Bonjour,bonsoir; aujourd'hui je me lance dans un tutoriel qui vous permettra de faire un webdesign plutôt simple; enfin pas trop compliquez quoi :p
I-Ce que vous avez besoin :-Photoshop CS4; (j'utiliserai cette version)
-Du temps
-Une connaissance de photoshop; savoir utiliser un style de calque; etc.
Et je pense que sa sera tout.
Tutoriel VideoA venir; peut être.Le tutoriel[align=justify]1.Tout d'abord il faut créer un nouveau document; ici j'ai pris comme dimension 1200*1400. Ensuite placez vos repaire comme ce-ci. Ici on va créer un menu horizontale.
Note: Pour placer un repaire; il faut déjà avoir la règle d'afficher pour cela faite ctrl+R ou Affichage/Règles. En suite prenez votre curseur de déplacement (v):; puis partez de la règle d'en haut pour faire glisser votre repère.2. En suite; prenez la couleur de votre choix; elle composera notre fond !
Pour ma part j'ai pris une couleur plutôt sombre.
A partir d'ici on va créer 4 groupes:
- Fond
- Header
- Menu
- Corps
- Footer
Mettez le calque 1 dans le groupe fond. On ne touche plus le groupe fond pour le moment.
3.On va maintenant touchez au groupe header.
Ici on va faire un header plutôt simple; on va prendre comme police Verdana , car tout le monde a cette police installer sur son ordinateur, et quand le site est visités il n'y a pas de problème d'affichage. Bref vous sélectionnez l'outil texte et commencer à créer le calque. Moi je met "Votre Site". Mettez ce texte en blanc avec une taille de 42 pixel.
Puis en va rajouter en plus petit ".com", on va le mettre en exposant. Comme ce-ci:
- Spoiler:
En suite on va un peu plus personnaliser votre header:
Pour commencer vous allez prendre la première lettre de votre header et la mettre dans la couleur que vous voulez.
/!\Attention vous devrez gardez cette couleur elle va nous servir pour le menu./!\
Si votre texte est composé de deux mots vous ferez pareil pour la première lettre du deuxième mot.
Pour finir mettez ces deux lettres en 55 pixel.
Et enfin mettez le ".com" de la même couleur de ces deux lettres.
Voila; on a finit avec le header.
4)On va passer un menu; fermer le groupe "header" en cliquant sur la flèche.
Allez dans le groupe "menu". Puis créer deux nouveaux groupes :
- a
- a:hover
Le "a:hover" est du CSS. donc il sert que si vous voulez coder votre design; moi je conseil de le laisser. Bref allons dans le groupe "menu"; créer un nouveau calque qui sera en dessous des deux groupes. Puis prenez le rectangle de sélection et sélectionnez comme ce-ci:
Puis remplissez le de blanc. Et mettez une "incrustation en dégradé" (Calque/Style de Calque/Incrustation en dégradé) , avec ces paramètres:
Pour que sa rende comme ce-ci:
En suite placez votre menu en créant plusieurs calque texte. Ce textes doivent être la couleur de votre fond:
En suite, on va passer au texte quand il va être survoler par vos visiteurs;
Dupliquez le groupes et nommer le a:hover.
Puis recoloriez tout vos calque texte avec la couleur de que vous avez mis lorsque vous avez fait le header (la couleur des deux lettre et du ".com"). Maintenant cachez tout vos claque "a:hover" sauf un. Et cachez le calque que ne vous avez pas cachez dans le groupe "a:hover" (si vous n'avez pas trop compris merci de me le dire :p).
Vous devrez arriver à sa:
5) Passons au corps du site. Allez dans le groupe corps et faire un nouveau groupe que vous appellerez "news".
Ensuite prenez l'outil Rectangle Arrondi(
). Puis faite comme vous le sentez moi j'ai fait quelque chose comme ce-ci :p :
Bien sur il faut qu'il soit blanc et que vous fait le même style de calque que pour le menu.
En suite prenez l'outil texte puis faite comme j'ai fait moi:
Avec comme couleur; la couleur de fond et comme taille : 25 px.
En suite plus bas vous mettrez le texte plus bas comme ce-ci:
de couleur blanche avec une taille de 14 px.
On en a finit avec le corps.
6) Allez du courage ici c'est finit. En faites le footer est juste le copyright, mais on peut mettre autre chose. La je met juste le copyright! Vous allez sélectionné le comme ce-ci:
Puis le remplir de noir. En suite, baissez l'opacité de votre calque jusqu'a avoir ce que vous voulez.
Bien sur vous avez créer un nouveau calque qui est dans le dossier footer.
Et voilà on a terminé.
Ce tutoriel est créer par Makino; merci de ne pas copier sans mon autorisation.