[photoshop]Creer son premier template

Préambule:

Bonjour, ajourd'hui nous allons apprendre à créer un template pour un site web simple, je rappelle que l'on ne va pas apprendre à créer des effets donc ce qui va suivre est un template des plus basiques.

Voici ce que ça donne au final :


Fait en 10 minutes ^^ et j'etais inspiré par le vert ce jour la.


Etape 1: Schéma du template(webdesign):

Un webdesign se compose toujours de la même manière et aura pratiquement les mêmes éléments de bases après tout dépend du contenu.
Voici un schéma simple que j'ai fait vite fait ^^:



Remarquez qu'il se compose:

-d'un header ou bannière qui se trouve générallement en haut;
-d'un menu qui se trouve soit à droite, à gauche ou sous le header selon le choix du designer;
-d'un corps ou tous le site se fait. Exemple: mettre les news , articles ...;
-et d'un footer ou se trouve le nom des designers et du codeur et le reste du copyright.
Voici tous ce qui concerne le schéma.


Etape 2: La création:

Dans les prochaines étapes nous allons voir pour créer le template en suivant les étapes suivantes;
-background(fond),
-header,
-menu,
-corps,
-et footer.

Le background:

Nous allons commencer par créer un nouveau document moi j'ai choisi la taille de 800*600 pixels après à vous de voir la taille que vous voullez utilliser.
Je crée un nouveau calque que je renomme "background" (sans les guillemets) ; pourquoi je le renomme ? car pour les designs ou il y a énormément de calques c'est plus simple de s'y repérer même si la on ne va pas pousser trop loin ^^.
Après ce nouveau calque je sélectione le pot de peinture et je le rempli (peu importe la couleur puisque je vais faire un dégradé dans les options de fusion), puis je fait clique droit (sur le calque)>options de fusion , puis je clique sur degrader de couleurs et je lui mets deux couleurs #18ff00 et #deff00 ou sinon j'ai fait ce screen:



Voici en ce qui concerne le fond passons a la suite.

Le header:

Et oui on commence par le header en général (du haut vers le bas) et un conseil en plus n'hésiter pas à créer des groupes ou dossier que vous nomerez "header" par exemple et nommez toujours vos calques.
Créez un nouveau calque puis sélectionner l'outil rectangle arrondi , comme sur mon schéma (peu importe de nouveau la couleur):


Puis faites un rectangle en haut de votre document à vous de gérer vous même la taille ni trop grande , ni trop petite et laissez de l'espace en haut , à droite et à gauche , pour vous aider regardez au debut de ce tuto j'ai mis le resultat final prennez exemple.
Puis faites clique droit sur votre calque et attribuez lui les options suivantes:

Je lui est attribuez un dégrader (#48ff00, #ffffff) ainsi qu'un contour noir de 1pixel et exterieur.
Apres vous pouvez toujours rajouter du texte comme le nom du site , un logos et un slogan ; vous pouvez voir que le slogan je l'ai séparé du titre par un trait blanc de 2 px et d'un contour extérieur noir de 1 pixel.
Voilà on a fait le header, passons a l'etape suivante.

Le menu:

Pour le menu j'ai utiliseé la même méthode que pour le header sauf que j'ai utilisée un autre dégradeé.Alignez bien le menu avec le header sur la gauche si menu est a gauche bien sur; il peut très bien être à doite , en dessous du header ou au-dessus du header.Je lui est aussi mis une ombre de porter assez spéciale ^^ mais ça à vous d'essayer les effets ... selon votre style.
Allé j'ai fait un petit screen de ce que ça donne pour l'instant:



Le corps:

Le corps c'est toujours pareil sauf que la je n'ai pas mis de dégradé je lui ai juste attribué la couleur blanche (#ffffff).
Vous pouvez voir que j'ai rempli le corps par du texte qui ressemble au latin cela s'appelle du lorem ipsum (en gros c'est un texte latin qui ne veut rien dire) vous pouvez avoir un generateur sur le site suivant : http://www.lipsum.com/.
Voila vous avez remarqué que j'accélère les étapes car je ne suis pas la pour vous aider à créer des menus avec des effets de fou ^^ mais plutôt de vous expliquer le contexte d'un template et de sa mise en forme.

Le footer:

Pour le footer toujours pareil que précédemment sauf que j'ai inversé le dégradé du header ^^.J'y ai mis mon nom puisque c'est moi qui ai fait le design , un espace si un codeur le code , et le nom de l'équipe bien sur HighDesign et puis un espace "touts droits réservées votre site.com" pour le site qui utilisera ce webdesign.


Finale:

Voilà nous avons vu la mise en place d'un webdesign et vous voila assez renseignés pour savoir créer votre premier template de site web.
Je ne vous ai pas montrer les effets utiliser mais plutot la mise en forme à vous de jouer avec photoshop pour cela.
Ce tutorial a été réaliser par : RK57
Si vous voulez l'utiliser pour un autre site web demandez moi la permissions.

Je vous mets le resultat final en vraies grandeurs ^^ :



Plus le .psd pour ceux qui veullent:
http://serveur1.archive-host.com/membres/up/368857054/tuto-creersonpremierwebdesign.rar

Merci pour vos tutos

J'aime le design et surtout le Codage