On est tous fan du menu du site Apple, simple et élégant comme pas mal de chose de chez notre pomme adorée. Nous allons donc essayer de réaliser le menu, un tuto où les débutants se feront plaisir, pour les photoshopeurs (ça se dit il parait, alors OUI je le dis !) avancés ce sera les doigts dans le nez. A vos toshop, prêts ? souris, partezzzzzzzzz !

Rendu final:

Étape 2: Sélectionnez l'Outil Rectangle arrondi (U) et réglez son Rayon à 5px, en mode calque de forme.

Vérifiez que vous avez bien la couleur de premier plan noire . Tracez alors sur toute la largeur une bande qui sera la forme de notre menu. Nommez votre calque 'fond'.

Étape 3: Double cliquez sur le calque nouvellement créé pour ouvrir son style. Ajoutez lui une ombre portée et une incrustation en dégradé comme ci-dessous.

Étape 4: Il faut à présent créer les séparateurs. Avant toute chose, créez un dossier nommé 'séparateurs'. Créez un nouveau calque à l'intérieur du dossier et sélectionnez l'outil crayon (B) de diamètre 1px, dureté 100%. Zoomez correctement sur une hauteur de votre menu et tout en maintenant la touche MAJ enfoncée tracez une ligne sur toute la hauteur.

Renommez votre calque en 'séparateur'. Ouvrez son style et ajoutez une lueur externe ainsi qu'une incrustation de couleur comme ci-dessous.

Voilà ce que l'on obtient une fois que l'on a dupliqué et espacé notre calque 'séparateur'.

Étape 5:  Nous allons créez un nouveau calque, que nous appellerons 'hover'. Nous allons donc créer le rendu au survol du bouton. Créons une sélection de 116px de large et 36px de haut. Pour cela sélectionnez l'outil Rectangle de sélection (M) et choisissez un style de sélection de taille fixe. Rentrez alors les dimensions écrites précédemment.

Vous n'avez plus qu'à cliquez sur votre calque pour voir apparaître la sélection voulue. Remplissez votre sélection d'une couleur (peu importe laquelle) grâce à un pot de peinture ou un CTRL + DEL ou un ALT + DEL. Désélectionnez le tout avec un CTRL + D. On peu alors placer son rectangle bien aligné avec sa barre de menu.

Ajoutons enfin une incrustation en dégradé comme ci-dessous.

Ce qui nous donne :

Étape 6: Créons à présent l'effet lorsque le bouton est cliqué. Dupliquez votre calque 'hover' et nommez la copie de ce calque 'active'. Effacez son style de calque puis rajoutez lui le style approprié ci-dessous.

Ce qui nous donne :

Étape 7: Enfin, il n'y a plus qu'à ajouter vos titres en Arial, gras, 13pt, sans lissage, avec comme couleurs : blanc pour les hovers et active, #333333 pour le reste ! Après il n'y a pas besoin de vous expliquer comment placez vos éléments pour que cela donne le résultat final.

Voir le menu intégré
Télécharger les sources .psd + intégration