.
+ En premier lieu, on commence par prendre le premier calque qu’on nommera AP1 (pour Arrière Plan #1) et on ajoute un gris sombre de code #1F1F1F.
Aucun dégradé n’a été appliqué pour la simple et bonne raison que le développement d’un dégradé n’est pas simple surtout pour un arrière plan.
+ Pour continuer, on créer un nouveau calque pour ajouter une barre rectangulaire de couleur : #494949. J’ai nommé ce calque « AP2 » pour bien le différencier avec le premier arrière plan.
On lui applique un dégradé simple avec comme paramètres :
.
.
Remarque 3 : ce dégradé permet d’affiner le futur rendu. Les paramètres ci-dessus ne sont que des exemples ; libre à vous de jouer avec les réglages.
Cette barre sera placée vers le haut selon votre envie. Pour ma part, je l’ai ajouté à une dizaine de pixels
+ J’ai ajouté sur ce rectangle un contour en haut d’un pixel gris clair (#5D5D5D) pour accentuer la séparation du menu à l’arrière plan.
Pour ce faire, on créer un nouveau calque qu’on nommera « barre blanche » pour ensuite prendre l’outil Trait (raccourci U) et étirer un jolie trait en restant appuyer sur SHIFT pour qu’il reste droit.
Pour l’instant j’obtiens ceci :
.
Je dois l’avouer, ce n’est pas très coloré mais on commence toujours par une base. Pour l’instant seul le gris domine mais vous allez comprendre pourquoi …
II – Quand on ajoute la couleur.
La deuxième partie va permettre d’accentuer notre menu !
+ On ouvre un nouveau calque qu’on nommera par exemple « bleu » pour ajouter un nouveau rectangle bleu (#3592d9) qu’on va positionner tout en bas de notre deuxième arrière plan gris (la base du menu).
On lui ajoute également un dégradé très léger d’opacité 14% avec un mode de fusion en lumière tamisée.
Ainsi, le rectangle bleu sera moins agressif et permettra de délimiter de nouveau le menu par rapport au reste du design.
+ On arrive au moment de l’ajout des titres. Pour ce tutoriel, j’ai pris deux titres : « ACCUEIL » et « MA GALERIE ».
La police utilisée est TW CENT MT en mode « BOLD » et de taille 20px.
Je les ai positionnés au centre du menu comme ceci :
Remarque 4 : Vous pouvez vous amuser à ajouter de la couleur, ajouter des dégradés ou autre à votre typographie. Pour ma part, le blanc est net et sobre … du coup j’ai préféré ne rien ajouter mais ce n’est que mon avis.
+ Pour savoir où l’on est sur l’application, il est toujours bien d’ajouter un petit plus à ce menu.
Il existe diverses solutions et j’ai choisi d’ajouter un rectangle à bord arrondi derrière la typographie du menu.
Pour cela, ouvrez un nouveau calque (nommé « Où est-on ? ») et appliquez lui un rectangle à bord arrondi (raccourci U). Ajoutez ce rectangle de façon qu’il englobe toute la partie du texte comme ci-dessous :
Après l’avoir englouti, mettez-le en mode Lumière Tamisée, d’opacité 70% et de fond 50%.
Placez-le derrière le calque texte.
On obtient le rendu suivant :
III – On chipote.
Le tutoriel touche à sa fin. Comme vous avez pu le constater, ce menu est simple mais très efficace ! Il faut penser qu’on sera sur un androphone et que la résolution de l’écran n’est pas celui de vos ordinateurs ! Il faut donc adapter.
Mais nous pouvons continuer de peaufiner ce menu (ceci est subsidiaire) :
Avant de continuer, prenez l’image « petitplus.png » et ouvrez là sur Photoshop. Des lignes s’ouvrent … Mais à quoi vont-elles servir ?
Allez dans EDITION et cliquez sur UTILISER COMME MOTIF. Ajoutez-lui le nom de votre choix… cela n’a peu d’importance.
+ Retournez sur votre création de menu et créez un nouveau calque que j’ai nommé « le petit plus ».
Allez dans EDITION puis cliquez sur REMPLIR.
Dans « contenu », mettez MOTIF et comme MOTIF PERSONNALISE, allez chercher votre motif que vous venez tout juste de créer (voir 6 lignes au dessus) et cliquez sur OK.
AÏE ! Pleins de traits en diagonales apparaissent…
+ Pas de panique, il vous suffit de prendre l’outil Rectangle de Sélection (Raccourci M) et de sélectionner la partie bleue de votre menu.
Cliquez sur : CTRL + I pour inverser la sélection précédente et faites supprimer.
Il vous suffit enfin de mettre ce calque en mode Produit, d’opacité 40% et de fond 30%.
Voilà, le tutoriel sur la réalisation d’un menu est maintenant fini.
Bien entendu, vous pouvez continuer à personnaliser votre menu ; le tutoriel permet de montrer les bases nécessaires.
Pour le rendu final, voir tout en haut.
Page facebook du projet et le compte twitter.
Télécharger le fichier psd ici
est disponible à un prix de 37 euros
