Jump to content
  • entries
    24
  • comments
    3
  • views
    28918

Etape par étape : Créer un menu style Apple

Sign in to follow this  
tankia

526 views

Créer un menu style Apple

sous Photoshop CS2

Niveau de difficulté 2

Pour ce premier Etape par étape, je vais créer un menu à onglets comme celui qui se trouve sur le site de Apple. Pourquoi celui là ? Parce que Apple joue un grand rôle dans le design informatique depuis 20 ans et il a aussi beaucoup influencé le graphisme des sites internet actuels. Un menu sert à naviguer sur un site web, il doit donc être très bien travaillé graphiquement, il ne faut surtout pas que l'internaute se fâche avec le premier médium qui va le relier au site internet. Le menu est un élément qui va vous accompagner tout au long de votre visite sur le site, si il est raté c'est un peu comme si vous étiez accueilli dans un avion par une hôtesse qui ressemblerait à Tatie Danielle, ça ne donne pas trop envie de prendre ce vol, non ;) ?

Pour commencer, ouvrez Photoshop CS2, ouvrez un nouveau document Ctrl + N. Dans la fenêtre Nouveau, remplissez dans l'ordre :

Nom : Menu style Apple

Résolution : 72 pixels/pouce

Largeur : 700 pixels

Hauteur : 100 pixels

Mode colorimétrique : RVB 8bits

Contenu de l'arrière plan : Transparent

Cliquez sur le bouton OK, votre nouveau document s'ouvre. Quittez toutes les fenêtres sauf la fenêtre Calques et la Barre d'outils.

Renommez le Calque 1 par Bg et remplissez le de gris clair avec l'outil Pot de peinture activé G puis Maj + G.

1/ Je dessine le fond du premier bouton

Je crée un nouveau calque (au passage, j'apprends à ne pas perdre de temps pour créer un nouveau calque et le nommer), je le nomme tout de suite Btn. Je clique dessus dans la palette des calques pour le sélectionner et travailler uniquement sur ce calque.

J'active l'outil Rectangle U et je sélectionne le Rectangle arrondi :

Rayon : 4px

Mode : Normal

Opacité : 100%

Lissage : cochée

Je choisis comme couleur le blanc (hexa : FFFFFF) et je fais un cliquer-glisser sur ma zone de travail pour créer le fond de mon bouton comme sur la première image du screenshot.

633ae092.png

Ensuite, je vais enlever les coin arrondi en bas de mon bouton. Pour cela je vais activer l'outil Sélection rectangulaire M :

Contour progressif : 0 px

Style : Normal

Et je vais sélectionner la partie inférieure de mon bouton et appuyer sur la touche Suppr pour la supprimer. Pour ajouter un contour gris foncé, en bas de la fenêtre des calques, je clique sur l'icône Ajouter un style de claque avec un petit F et un cercle noir comme fond et enfin je clique sur Contour. Dans la fenêtre des styles de calque qui est apparue remplissez :

Taille : 1px

Position : Extérieure

Mode de fusion : Normal

Opacité : 100%

Type de remplissage : Couleur

Couleur : 717171

Je clique sur le bouton OK pour valider le style de calque contour.

Voici ce que ça donne du côté de la palette des calques :

d209b0c0.png

J'enregistre Ctrl + S régulièrement pour ne pas tout perdre si photoshop plante.

2/ J'ajoute les effets au fond de mon bouton

J'ai un onglet blanc avec un contour gris foncé. Je peux m'arrêter là pour rester très simple, mais je souhaite rendre ce menu un peu agréable visuellement, je vais lui ajouter quelques effets sans en abuser pour lui donner un peu de relief et une matière "glossy".

Je crée un nouveau calque Ctrl + Maj + N que je nomme Dégradé. Je vais l'attribuer au calque Btn (Comment attribuer un calque à un autre). Le calque Dégradé est sélectionné pour travailler uniquement sur ce calque.

J'active l'outil Dégradé G

Couleur : noir/blanc OU noir/transparent

Dégradé : Linéaire

Mode : Normal

Opacité : 100%

Inverser : non cochée

Simuler : cochée

Transparence : cochée

Je trace mon dégradé en faisant un cliquer-glisser de haut en bas en maintenant la touche Maj appuyée pour que mon dégradé soit parfaitement vertical. J'essaie que ça ressemble au screenshots (le dégradé est plus foncé chez vous, c'est normal on modifiera son opacité tout à l'heure).

Maintenant, je me la joue subtile ! En effet, je vais sélectionner à l'aide de l'outil Sélection rectangulaire M la première bande de 1 pixel de hauteur supérieur de mon dégradé. Pour m'aider j'utilise l'outil Zoom Ctrl + +. Une fois sélectionnée, j'appuie sur Suppr pour supprimer cette petite bande de pixels rebelles :groupwave:

Pour revenir en taille réelle : Ctrl + Alt + 0 !

40e73c12.png

J'enregistre Ctrl + S régulièrement pour ne pas tout perdre si photoshop plante.

Je vais à cette étape ajouter la touche "glossy" à mon onglet. Pour cela rien de plus simple. Je crée un nouveau calque Ctrl + Maj + N que je nomme Glossy. Je vais l'attribuer au calque Btn (Comment attribuer un calque à un autre). Le calque Glossy est sélectionné pour travailler uniquement sur ce calque.

J'active l'outil Rectangle U et je sélectionne le Rectangle arrondi :

Rayon : 3px

Mode : Normal

Opacité : 100%

Lissage : cochée

Je choisis comme couleur le blanc (hexa : FFFFFF) et je fais un cliquer-glisser sur ma zone de travail pour créer la touche "glossy" de mon bouton comme sur la deuxième image du screenshot. La largeur est volontairement un peu plus petite que le fond de mon bouton pour laisser apparaître 1 pixel de fond dégradé à la droite et à la gauche de mon effet "glossy", ça donne un effet de profondeur au bouton plus réaliste.

d0ae70cd.png

Voici ce qui se passe au niveau de la palette des calques. J'ai modifié l'opacité du calque Dégradé à 35% et celle du calque Glossy à 90%.

d70394fc.png

J'enregistre Ctrl + S régulièrement pour ne pas tout perdre si photoshop plante.

La plus grosse partie du travail est faite :whistling:

3/ Je nomme mon bouton, je le groupe et je le duplique

Le calque Glossy est sélectionné. J'active l'outil Texte T et je clique sur ma zone de travail, je tape le texte de mon bouton.

A titre d'exemple pour les paramètres du texte :

Police de caractère : Myriad

Style : Roman ou Regular

Taille : 15 pt

Anti aliasing : Précis

Alignement : fer à gauche

Couleur : noir (hexa : 000000)

J'appuie sur la touche Entrée au centre de mon clavier et non celle de droite pour valider mon texte. Un calque de texte s'est créé dans la palette des calques. Je peux bien replacer mon texte avec l'outil Déplacement V. Je vais mettre une opacité de 60% à mon calque de texte et je valide avec la touche Entrée.

4110cf26.png

Maintenant, je vais mettre tous les calques qui constituent mon bouton dans un groupe. Pour cela, ça se passe comme dans un dossier windows pour la sélection des calques dans la palette des calques. Je clique sur le calque Btn j'appuie sur la touche Maj et tout en la maintenant enfoncée, je clique sur le calque de texte. Mes calques sont sélectionné j'appuie sur Ctrl + G pour les grouper et je nomme ce groupe Bouton 1.

db4a888e.png

Pour ajouter des boutons à mon menu, il me suffit de dupliquer ce groupe bouton1 autant de fois que je le désire. Pour le faire, je clique sur le groupe bouton1 dans la palette des calques en maintenant la touche Alt enfoncée et je glisse le groupe entre le groupe bouton1 d'origine et le calque Bg, je relâche le clique de ma souris, le groupe est dupliqué, il se nomme automatiquement bouton1 copie. Vous pouvez très bien le renommer bouton2 ou bouton contact, c'est suivant votre choix de méthode d'organisation (S'organiser et gagner en efficacité).

6740eff3.png

J'enregistre Ctrl + S régulièrement pour ne pas tout perdre si photoshop plante.

3/ Je vous laisse finir ;)

En effet, vous disposez maintenant de tous les éléments pour finir ce menu seul, je vous mets quelques screenshots d'indication pour vous guider un peu.

bb0d4b11.png

8255954.png

Si vous souhaitez mettre un texte plus grand qui ne rentre pas dans votre onglet, je vous conseille la lecture de ce billet sur la duplication.

Si vous avez un souci ou une idée à propos de cet Etape par étape, postez un commentaire avec si possible votre image que vous pouvez héberger gratuitement sur hiboox comme je le fais dans mon hublog :thumbup: N'hésitez surtout pas à poster aussi vos réalisations !

Sign in to follow this  


0 Comments


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...