TitaXium - Tag - site web

Réaliser le background de votre site avec PatternWall

TitaX — Thu, 29 Oct 2009 13:37:00 +0100

Il n'est pas toujours facile de réaliser seul le fond de son site web, surtout lorsqu'on débute, avec PatternWall, plus de soucis à vous faire, PatternWall s'occupe de tout, et pouvez choisir en live celui qui vous convient le plus et le télécharger rapidement et gratuitement prêt à l'utilisation!

Alors plus d'excuse pour ne pas personnaliser votre site web !

Personnaliser son site pour Halloween

TitaX — Sun, 11 Oct 2009 13:37:00 +0200

Bientôt, la fête d'Halloween va déferler sur la France, et la nuit du 31 Octobre au 1er Novembre sera la nuit de toutes les peurs !

Alors et si vous personnalisiez votre site web, votre forum ou votre Blog pour effrayer vos visiteurs ?
Voyons comment faire.

La typographie

Choisir une police de caractère pour annoncer l'événement est très simple ou encore modifier le titre de votre site pour le rendre plus effrayant, beaucoup de site web proposent des polices que l'on peut télécharger et utiliser dans n'importe lequel des logiciels de graphisme (comme photoshop ou The Gimp). Personnelement je vous conseil le site Dafont.com qui possède une bonne sélection de polices de caractère pour Halloween.

Les images

Ce qui marche aussi très bien c'est l'ajout d'images représentant Halloween sur votre site, par exemple dans votre Header ou bien près de votre logo ou slogan.
On peut trouver un bon nombre d'image avec une simple recherche sur Google, méfiez vous tout de même de respecter les droits d'auteur de l'image ou de la photo que vous allez utiliser.
Mais d'autres sources d'images sont disponibles sur Internet, moi j'utilise beaucoup le site Deviantart.com qui peut fournir par exemple ce genre d'image facilement utilisable (toujours avec l'accord de l'auteur bien entendu) :

Ou encore des banques d'images que l'on peut utiliser comme par exemple www.sxc.hu, avec tout ça impossible de ne pas trouver son bonheur !

Les smileys

Si vous possédez un Blog ou un Forum, vos utilisateurs apprécieront fortement que vous puissiez mettre à leur disposition un thème de smiley adapté pour la saison d'Halloween, les smileys sont souvent en téléchargement gratuit sur un bon nombre de site web une simple recherche sur google pourra vous apporter par exemple ce site, ou celui là, ou encore celui-ci enfin bref il y en a tout plein.

Les templates

Vous utilisez un CMS ou un moteur de blog, pourquoi travailler alors que d'autres l'ont déjà fait pour vous ? téléchargez simplement vos thèmes Halloween pour Wordpress, pour Joomla, pour Drupal, etc etc
Vous avez un peu d'argent ? achetez-vous un template comme celui-ci ou alors inspirez-vous en pour réaliser le votre vous même et pourquoi pas en faire profiter une communauté en le distribuant gratuitement

Les brushes

Vous avez décidez de réaliser votre thème Halloween vous même ? félicitation c'est le meilleur choix que vous pouvez faire !
Pour vous aider vous trouverez plus de 200 brushes en téléchargement gratuit à ajouter à votre logiciel photoshop :

Et vous, vous avez d'autres idées pour Halloween ?
A vous de jouer maintenant, n'hésitez pas à nous faire partager vos créations sur notre forum ou bien en commentaire.

A+

Créer un Favicon

TitaX — Wed, 05 Aug 2009 08:00:00 +0200

Apparu il y a quelques années le favicon est une petite icône qui s'affiche dans votre navigateur (dans la barre d'adresse ou dans l'onglet en général, mais aussi dans les marques pages, les historiques etc etc), il permet de reconnaitre facilement le site web et est devenu un élément indispensable !

Les webmaster pourront facilement et rapidement l'intégrer dans leur site web (suivre cette documentation si nécessaire) mais parcontre beaucoup se pose la question de comment réaliser ce favicon.

2 méthodes, soit on le réalise directement avec un logiciel de création graphique (ex : Photoshop, fireworks, the Gimp etc etc); soit on utilise un outil de génération de favicon très simple à utiliser comme par exemple le générateur de html-kit que vous pouvez trouver en cliquant ici html-kit.com/favicon.

Avec ces générateurs vous pouvez en quelques cliques créer de très jolis favicon représentatifs de votre site web !!!

Et vous, vous utilisez quoi pour créer vos favicon ??

Liens :
www.html-kit.com/favicon/
favicon.fr
favicon.cc

[Documentation] Réaliser une interface web sous Photoshop

TitaX — Mon, 12 May 2008 09:00:00 +0200

La création d'interface graphique pour un site web est souvent un exercice difficile dans lequel il faut maitriser beaucoup d'outils spécifiques à Photoshop mais aussi avoir une vision précise de l'interface de nous voulons créer afin de faciliter son intégration pour le futur développeur qui devra s'occuper du découpage de l'interface.

Plusieurs facteurs sont donc à prendre en compte aussi bien sur l'harmonie des couleurs, la disposition des blocs mais aussi la faisabilité de la découpe de votre futur interface, nous allons vous présenter comment réaliser une interface simple, facile à découper et qui pourtant répondra à la majorité des cahiers des charges de vos demandes en interface graphique de site web.

Cette documentation tout d'abord au débutant mais pourra aussi convenir aux utilisateurs de Photoshop plus aguerri.

Pour cette documentation nous aurons tout d'abord besoin de ces deux images qui seront utilisées pour le haut de l'interface (header) et le bas de l'interface (footer) :

Créez un nouveau document de 1000*600 pixels et remplissez le en blanc.

Créez un nouveau calque "motif" et remplissez le avec ce motif :

Vous devez donc avoir deux calques comme ceci :

Créez un nouveau calque, que vous appellerez "body" (au dessus du calque "motif").
Sur le calque "body", faire une sélection rectangulaire (M) de 692px de largeur et 600px de hauteur. Remplissez la sélection de blanc.
Cliquez droit sur le calque "body" puis Option de fusion et ajouter une ombre portée de 36% d'opacité, distance 0, grossi 0, taille 6, d'un angle 90°.
Puis valider !

Créez un nouveau calque "header", insérez l'image "header" et mettez celui-ci en haut du calque "body".

Créez un nouveau calque "dégradé". Faire une sélection, remplissez de blanc puis aller dans les options de fusion et mettez les mêmes valeurs que sur l'image ci-dessous :

Pareil pour l'ombre portée :

Dupliquez le calque "dégradé" puis mettez le en bas du design.
Importez l'image "footer" et mettez là en dessous du calque "dégradé copie".

Et voilà, le design est enfin prêt à être découpé !

A vous de jouer maintenant, vous avez toutes les cartes entre les mains

(Merci à Freak. pour la rédaction de cette documentation)