¤ ÉTAPE 1 :
- NOUVEAU CALQUE
Ouvrez un nouveau document 1000 X 1000 pixels et remplissez le fond de #23589E.
Prenez l'Outil Rectangle arrondi avec un rayon de 5px et faites une forme vers le haut (il s'agira du header). Récupérez la sélection ⇒A et remplissez-la de #FFFFFF :
¤ ÉTAPE 2 :
- NOUVEAU CALQUE
Prenez l'Outil Rectangle de sélection et faites une barre (de navigation) sous le header en prenant soin de cacher les arrondis de celui-ci (en mettant la barre au dessus). Remplissez ensuite cette sélection d'une couleur.
¤ ÉTAPE 3 :
Ajoutez ces Options de fusion au calque :
Et vous devriez avoir une barre de navigation comme celle-ci :
¤ ÉTAPE 4 :
- NOUVEAU CALQUE & CALQUE TEXTE
Maintenant, ajoutez votre texte dans la barre. Pour la séparation, j'ai utilisé le tuto de Psyko (Voir) et j'ai gommé les extrémités puis baissé l'opacité.
¤ ÉTAPE 5 :
- NOUVEAU CALQUE & CALQUE TEXTE
Ajoutez votre logo (de préférence en bleu) et votre nom avec éventuellement un reflet (Voir).
¤ ÉTAPE 6 :
- NOUVEAU CALQUE
Créez ensuite un rectangle blanc à l'aide de l'un des outils utilisé précédemment :
¤ ÉTAPE 7 :
Ajoutez ce dégradé à ce rectangle (via les Options de fusion) :
Voilà ce que vous avez à cette étape du tutoriel :
¤ ÉTAPE 8 :
- NOUVEAU CALQUE & CALQUE TEXTE
Ensuite, ajoutez du texte sur la partie gauche. Vous pouvez lui mettre un cadre (mon cadre est une lueur externe noir gommée certains bords).
¤ ÉTAPE 9 :
- NOUVEAU CALQUE
Insérez ensuite un élément sur la partie droite. J'ai choisi un screenshot avec un contour blanc et une perspective.
¤ ÉTAPE 10 :
- NOUVEAUX CALQUES
De nouveau, créez un rectangle blanc.
Avec l'Outil dégradé, faites un petit dégradé noir sur le haut et baissez l'opacité du calque. Prenez ensuite le Crayon et faites une séparation entre les deux rectangles de 1 ou 2px blanc.
¤ ÉTAPE 11 :
- NOUVEAU CALQUE
Créez un petit rectangle arrondi à l'intérieur de ce rectangle, et après avoir récupérer la sélection et l'avoir rempli de blanc (ou autre), ajoutez-y ces Options de fusion :
Dupliquez ensuite 3 fois ce rectangle et disposez les de cette manière :
¤ ÉTAPE 12 :
- NOUVEAU CALQUE TEXTE
Ajoutez du texte dans ces cadres et des détails (par exemple, un rectangle blanc de faible opacité autour du GO) :
Et créez des reflets (Voir).
¤ ÉTAPE 13 :
- NOUVEAU CALQUE
Pour la dernière fois, créez un rectangle en #F4F2F3 et une séparation de la même façon que la précédente mais dans un gris plus foncé.
¤ ÉTAPE 14 :
- NOUVEAU CALQUE TEXTE
Ajoutez du texte dans cette partie :
¤ ÉTAPE 15 :
- NOUVEAU CALQUE TEXTE
Puis un footer en créant plusieurs séparations grises (au dessus et entre les liens).
¤ ÉTAPE 16 :
- NOUVEAU CALQUE
Pour finir, ajoutez divers détails comme un logo RSS par exemple ...
Tuto traduit et proposé sur Forum-Toshop par Ryu.
Source : http://photoshopandyou.com
Commentaires
Bonjour a tous, alors tout d'abord vos tuto sont supers rien a en redire mais aprés avoir créer tout cela comment fait on pour l'appliquer sur un site a ton vraiment besoin de connaitre le langhage html??je fait parti d'une team sur le net et notre forum aurez vraiment besoin d'un pti dépoussiérage svp merci de me repondre salut^^
Salut, après avoir créer le design toujours avec Photoshop tu le découpe avec l'outil tranche (K) puis tu enregistre les image dans un seul fichier (Menu > Fichier > Enregistrer pour le web).
ok merci sa devrait m'aider j'aurais surement d'autres question plus tard^^je suis pas trés douée mais jme lance on véra bien en tout cas merci beaucoup
Bonjour, ton tuto est super. Mais pourrait tu m'expliquer comment tu fait pour que la "fleur" apparaisse et que quand on ajoute des éléments qu'elle se fond dedans?
Merci pour ton aide.
Marine
La fleur c'est un "Watermark" (Juste pour dire que l'image appartient a un site spécifique)
Merci pour ton tuto il est génial
comment faire pour un insérer un lien hypertexte derrière les boutons?????
et comment faire pour retravailler cette page sur dreamweaver?
developez un peu plus votre raisonnement a part ca, 10/10
Voici mon rendu grâce a ce tuto:
http://www.noelshack.com/voir/13030...
Très bon tuto pour créer un template.
Pour l'intégration Web, il est préférable de découper les éléments graphiques pour créer le HTML/CSS en privilégiant les insertions des textes séparément (favorable pour optimiser le référencement). Hormis peut-être les boutons du menu (et encore...).
Tuto pour créer un site web en XHTML et en CSS
http://www.itsystem.fr/blog/creer-u...