En collaboration avec orkcreation.fr éditeur de l’application Orkcreation (Fond d’écran originaux pour votre Androphone) nous vous proposons un tutoriel de création d’un menu personnalisé sous Android en deux étapes. Première étape la création du graphisme, deuxième étape l’implémentation en programmation de ce menu.
Vous voulez commencer à créer une application Android ?
Remarque : Avant de commencer ce tutoriel, il faut savoir que je vous proposerai un menu simple ! Avec la base graphique, vous pourrez continuer votre création.
Remarque 2 : De plus, le tutoriel a été réalisé sous le logiciel Photoshop CS5. Les anciennes versions sont équivalentes.
Le résultat final :
+ 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
