 |
Création d’une interface graphique complète - Shadow pink
mercredi 11 avril 2007
par Wonka
  
|
|
Tag associé à ce tutorial |
||
Galerie interne
| ||
|
Je vais créer à nouveau un tutorial pour créer une interface complète, attention ce tutorial ne s’adresse pas au débutant Photoshop, les étapes sont nombreuses avec peu d’explication et les réalisations sont assez compliquées. Mais si vous avez les doigts agiles je vous souhaite bonne chance Voici le rèsultat final
ETAPE 1 Je crée un document de 900 sur 60 pixels de coté, que je remplie d’un marron foncé ! Je vais ensuite créer sur un nouveau calque une bande noir sur le haut, je remplie grâce au style de calque (incrustation de motif) cette bande avec des diagonales noires blanches voir ce tutorial pour des explications sur les diagonales : http://www.wks.fr/Utiliser-les-diagonales-avec.html. Ensuite je crée un calque vide sous mes diagonales puis j’appuie sur ctrl + e pour les fusionner, je passe ensuite ce calque en mode incrustation et 50% d’opacité. Sous ce calque je crée un autre calque et je récupère la sélection de la bande en faisant ctrl + clic sur le calque de la bande. J’applique ensuite nu dégradé de marron clair vers marron foncé sur le second calque (celui que nous venons de créer). ETAPE 2 Je crée un nouveau document, et avec l’outil sélection je remplie un large rectangle de marron clair. J’ajoute en premier lieu une ombre portée d’angle -90 et un dégradé marron foncé sur marron clair (marron foncé position 0 et marron clair 40). Ensuite je crée un nouveau calque et à la limite de mon rectangle je crée une barre en marron clair (quelques tons plus clair que le rectangle). Je crée un nouveau calque vide sous mon rectangle puis je les fusionne, je fusionne ensuite le rectangle avec la barre de marron clair que j’ai crée sur le haut. ETAPE 3 Attention cette étape est fastidieuse : (je précise vous voyez :p Je vais créer un masque de fusion sur mon rectangle, le but est de camoufler légèrement les deux cotés de mon rectangle pour cela je vais utiliser un dégradé noir 100% sur un noir 0%, et je crée deux dégradé de chaque coté de mon masque de fusion. Je fais la même chose pour le calque des diagonales. En fait ce n’est pas si dure ETAPE 4 J’ajoute très simplement du texte, pour mettre en avant les titres j’applique une police plus large que le texte et j’utilise un rose clair pour correspondre à l’ambiance du site. Je peux également appliquer un rectangle arrondis en dessous des titres pour ce faire : Je crée un nouveau calque et je crée un rectangle arrondis noir, je passe ensuite ce calque en opacité 30%, et je place le rectangle ainsi crée en dessous de mon titre. ETAPE 5 Je vais ajouter deux boutons pour se rendre se la page dédiée aux articles (par exemple). Nous utiliserons le tutorial ci pour créer ces boutons : http://www.wks.fr/Creer-un-bouton-crystal-avec.html cependant nous utiliserons quelques améliorations : Pour ajouter l’effet sur la gauche (le rectangle foncé), je crée un nouveau document juste au dessus de mon rectangle, puis je récupère sa sélection que je remplie de noir. Ensuite avec l’outil sélection je supprime la partie droite inutile et enfin je passe le calque en mode lumière tamisée ou incrustation et je baisse son opacité. J’ai également ajouté une lueur externe noir sur le bouton en mode incrustation. Puis j’ai utilisé une police pixel pour ajouter mon texte ! Voir sur le site dafont : http://www.dafont.com/bitmap.php ?page=1 ETAPE 6 Je vais crée les icônes servant à illustrer chacun de nos articles, pour cela je crée un rectangle arrondis puis je le remplie d’un dégradé rose clair sur rose foncé (angles 45 degrés). Ensuite je duplique ce rectangle je supprime le dégradé et je le remplace pour un rose foncé, puis je le diminue de 5% en utilisant l’outil scale (édition >transformation > scale). Maintenant il ne me reste plus qu’a ajouter mon image, pour arrondir les coins je crée un rectangle par-dessus, je récupère la sélection puis je l’inverse et je supprime sur mon icône. Important je baisse mon opacité de mon image pour qu’elle ne frappe pas l’oeil, je peux insérer par la suite un rollover permettant de visualiser les vraies couleurs. ETAPE 7 J’ajoute une ombre portée à mon rectangle de contenus, et juste en dessous j’ajoute un nouveau calque, je remplie toute la partie inférieure de rose claire et j’ajoute un masque de fusion, avec celui-ci je camoufle la gauche, la droite puis le bas. Cette partie servira à ajouter le copyright. ETAPE 8 J’ajoute mon logo. J’adapte également quelques petites choses pour que tous les éléments s’harmonisent parfaitement ! ETAPE 9 Je vais ajouter le texte concernant le copyright, pour cela je copie l’ensemble de mon logo et j’aplatie les couleurs pour le faire ressembler à une ombre, puis j’ajoute mon texte. ETAPE 10 Je viens de remarquer que la droite de notre interface est un peu vide, nous avons largement la place de créer un menu ou deux. Pour cela je vais créer un rectangle arrondi avec l’outil forme personnalisée. Puis j’ajoute un masque de fusion pour camoufler la partie droite de mon menu, petite remarque : en faisant cette manipulation le header vas être visible pour le cacher je crée un nouveau calque que je place sous le menu, je récupère ensuite la sélection du menu que je remplie de la couleur du fond de mon interface. Je crée des blocs pour les titres, pour cela je crée une sélection et un calque puis avec une couleur plus claire que le menu je crée trois blocs. ETAPE 11 J’ajoute simplement les liens avec l’outil texte, je peux également ajouter un effet de ligne sur ligne avec l’outil sélection. Voila donc ce tutorial terminé, normalement je devrais adapter cette composition pour en faire une interface graphique et la distribuer sur kitgrafik.com mais je suis pas encore sur, je pense également distribuer le fichier source PSD de cette interface graphique en accès restreint et payant via allopass directement sur ce site, et directement sur cet article. Car je l’avoue j’y ai passé du temps sur cette bête :p Le résultat est il satisfaisant ? | ||
|
| ||
|
||
D’ailleurs pour vous montrez que ce tutorial donne vraiment un bon résultat je vais soumettre l’interface sur le site Kitgrafik.com, vous verrez 
