Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer le design d'une application Ipad: Première Partie

Compatible Photoshop CS4. Cliquer pour en savoir plus sur les compatibilités.Par xanadu (Xanadu), le 15 septembre 2011

Dans ce tutoriel, nous allons vous montrer comment concevoir une interface utilisateur détaillé pour une application iPad audio-thème. Nous allons concevoir cette application en utilisant énormément les calques de forme Photoshop et les styles de calque. Commençons!

Tout d'abord télécharger le pack suivant: Pack

Pour pouvoir suivre ce tutoriel dans les meilleures conditions possibles, il n'est pas réellement nécessaire d'avoir des connaissances approfondies pour Photoshop. Je vous explique toutes les étapes en détail.

Etape 1 : Création de l'arrière-plan

Créez un nouveau fichier dans Photoshop (Ctrl+N). Définissez la largeur et la hauteur à 768x1024px et la résolution à 131 dpi.

Créez un nouveau groupe de calque, en allant dans le menu « Calque > Nouveau > Groupe ». Pensez à le renommez « fond ».

Ensuite, créez un nouveau (Ctrl + Shift +N), renommez-le « couleur » et remplissez-le à l'aide du “Pot de peinture” (G) et de la couleur #707070.

Créez un nouveau calque (Ctrl + N), renommez le “bruit”. Vous pouvez le remplir avec la couleur que vous voulez, mais je vous conseille d'utiliser du blanc. Ensuite allez dans le menu « Filtre > Bruit > Ajout de bruit ». Modifiez la quantité à 400%, laissez la répartition sur « Uniforme » et cochez la case “Monochromatique”.

Ensuite retournez dans le menu « Filtre > Esthétiques > Estampage ». Réglez l'angle à 135°, la hauteur à 1 et le facteur à 146. Pour terminez cette étape, réglez l'opacité de votre calque à 25%.

Voici ce que vous devriez obtenir :

Prenez l'outil “Rectangle” (U) et tracez une forme comme celle qui vous est montré sur le dessin ci-dessous, en utilisant la couleur blanche (#ffffff). (J'ai ajouté un contour noir autours de ma capture d'écran pour que vous puissiez distinguer le rectangle blanc).

Ensuite, réglez le mode de fusion de votre forme en « Lumière » et l'opacité à 12%.

Etape 2 : Création des éléments :

Créez un nouveau groupe de calque, en allant dans le menu « Calque > Nouveau > Groupe ». Pensez à le renommez «bouton principal».

Créez un nouveau calque (Ctrl + N) et renommez-le « cercle ». Prenez l'outil “Ellipse” (U), et créez un cercle. Restez appuyé sur la touche en même temps que vous dessinez votre cercle, afin qu'il garde ses proportions. Remplissez-le avec la couleur #e1e1e1.

Ensuite double-cliquez sur votre calque afin d'accéder aux Styles de calque.

Allez dans l'onglet « Lueur externe ». Changez le mode de fusion en “Normal”. Mettez l'opacité à 62% et cliquez sur le petit rectangle de couleur pour mettre de la couleur noire (#000000). Pour terminer, dans les options d'“Eléments”, changez le grossi à 13% et la taille à 38%.

Puis, allez dans l'onglet « Biseautage et estempage ». Dans l'option “Structure”, réglez la profondeur à 1000% et la taille à 2px. Dans l'option “Ombrage”, réglez uniquement l'opacité du mode des tons foncés à 14%.

Maintenant allez dans les options de « Satin ». Dans l'option de structure modifiez le mode de fusion en « Lumière linéaire », l'opacité à 6%. Ensuite changez la distance à 24px et la taille à 5px.

Pour terminer cette partie, allez dans l'onglet “Incrustation en couleur”. Vous avez juste à modifier l'opacité à 6% et l'angle à 118°.

Utilisez l'outil “Pinceau” (B), choisissez une brosse de taille moyenne et régler la dureté à 0%. Faites un trait noir, comme dans l'exemple, puis réduisez l'opacité à 33%. Faites un clic droit sur le calque dans la fenêtre des calques, puis sélectionnez « Créer un masque d'écrêtage ».

Maintenant prenez l'outil “Forme personnalisée” (U).

Choisissez le cercle fin dans les options de forme personnalisé. Renommez-la forme « bouton ».

Maintenant prenez l'outil “Rectangle de sélectiorn (M), et cliquez sur « Ajouter la sélection ».

Faites deux sélections comme sur l'exemple ci-dessous.

Ensuite faites-un clic droit > “Intervertir”. Le but de cette manipulation est de pouvoir ajouter un masque de fusion à la forme, afin d'en masquer une partie. Ensuite, mettez-vous sur votre calque « bouton » et appliquez un masque de fusion.

Une fois cette étape terminée, appliquez les styles de calques en faisant un double-clic sur celui-ci.

Allez dans l'onglet “Ombre portée”. Changez la couleur de votre ombre portée en cliquant sur le petit rectangle de couleur à coté du mode de fusion. Ensuite modifiez l'opacité à 88%, la distance à 1px et la taille et le grossi à 0px. Pour terminer mettez le bruit à 0%.

Ensuite allez dans l'onglet “Lueur externe”. Modifiez l'opacité à 40%. Changez la couleur du dégradé en cliquant sur le petit rectangle de couleur et mettez la couleur suivante #434343. Pour terminer modifiez la taille à 6px.

Pour terminer, allez dans l'onglet “Incrustation en dégradé” et changez juste l'opacité à 15%.

Créez un nouveau calque que vous appellerez « masque ecretage ». Prenez l'outil “Pinceau” (B) de couleur noire et dessinez une ombre.

Réduisez l'opacité de votre calque à 22% et transformez-le en masque d'écrêtage. Pour ce faire faites-un clic droit sur votre calque « masque ecretage » et cliquez sur « Créer un masque d'écrêtage ».

RENDU 06

Créez un nouveau calque (Ctrl+Shift+N) que vous renommerez “ellipse”. Ensuite, sélectionnez l'outil “Ellipse” (U) et dessinez un rond à l'intérieur du bouton comme montré ci-dessous.

Ensuite double-cliquez sur votre calque « ellipse » et modifiez les paramètres de style de calque. Modifiez le mode de fusion en « Lumière tamisée » et l'opacité à 40%, puis cliquez sur OK.

Créez un nouveau calque que vous allez appeler « rectangle ». Ensuite, prenez l'outil “Rectangler” (U), afin de dessiner une forme comme celle dessinée dans l'exemple ci-dessous.

Ensuite placez-le de façon à ce qu'il cache un petit peu votre bouton. Comme montré ci-dessous.

Maintenant allez dans le menu « Filtre > Atténuation > Flou », réglez l'angle à 40° et la distance à 15px.

Prenez l'outil “Dégradé” (G). Utilisez la couleur noire pour le dégradé. Choisissez le dégradé “Linéaire”.

Ensuite modifiez le type de dégradé en sélectionnant celui qui part du noir vers le transparent.

Faites un léger trait partant du milieu de votre calque « rectangle ». Réduisez l'opacité du calque à 80%. Vous devriez obtenir ce résultat.

Créez un nouveau et nommez-le « cercle 2 ». Prenez l'outil “Ellipse” (U) et dessinez un rond à l'intérieur de votre bouton.

Double-cliquez sur votre calque. Cliquez sur l'onglet “Biseautage et estampage”. Dans l'option “Structure”, modifiez la « Technique » en « Ciselage marqué », la profondeur à 191%, la taille à 3px et le flou à 2px. Dans l'option “Ombrage”, modifiez l'opacité du mode des tons clairs à 1% et l'opacité du mode des tons foncés à 73%.

Ensuite allez dans l'onglet “Incrustation en dégradé”. Changez le mode de fusion en « Lumière tamisée », l'opacité à 31% et l'angle à 99°.

Voci ce que vous devriez obtenir :

Créez un nouveau calque (Ctrl+Shift+N) et renommez-le « brush ». Prenez l'outil “Pinceau” (B), utilisez un diamètre de 120px, une dureté de 0% et une couleur noire. Faites-un trait assez épais comme montré ci-dessous.

Appliquez un masque d'écrêtage sur votre calque en faisant un clic droit sur celui-ci puis « Créer un masque d'écrêtage ». Vous devriez obtenir ce résultat.

Créez un nouveau calque (Ctrl+Shift+N) que vous renommerez « cercle 3 ». Changez la couleur en #e1e1e1.

Voici ce que vous devriez obtenir :

Double-cliquez sur votre calque. Allez dans le menu « Biseautage et estampage ». Dans les options de structure, modifiez la « profondeur » à 1000% et la taille à 3px. Ensuite, dans l'option “Ombrage”, modifiez le « mode des tons clairs » en normal et changez l'opacité à 63%. Pour terminer, modifiez l'opacité du « mode des tons foncés » à 24%.

Ensuite allez dans l'onglet « Incrustation de dégradé ». Modifiez le mode de fusion en « Lumière tamisée », l'opacité à 88% , l'angle à 113° et l'échelle à 21%.

Pour terminer, allez dans l'option « Contour ». Modifiez la taille à 1px, la position à intérieur, et la couleur en #818388.

Vous devriez obtenir ce résultat :

Créez un nouveau calque (Ctrl+Shift+N) et renommez-le « rectangle 2 ». Prenez l'outil “Rectangle” (U) et dessinez-en un en le remplissant avec la couleur #666666 comme montré sur la figure ci-dessous.

Ensuite transformez vote calque en masque d'écrêtage en faisant un clic droit sur le calque puis en cliquant sur « Créer un masque d'écrêtage ».

Vous devriez obtenir ce rendu :

Créez un nouveau calque et faites un autre cercle en utilisant l'outil “Ellipse” (U), et définissez la couleur à # d7d7d7.

Double-cliquez sur votre calque pour ouvrir les options de style de calque. Allez dans l'onglet “Biseautage et estampage”. Modifiez, dans l'options “Structures, le style en estampage oreiller et la profondeur à 1000%. Dans l'option “Ombrage”, modifiez le mode des tons clairs en normal et l'opacité à 100%. Pour terminer, modifiez l'opacité du mode des tons clairs à 19%.

Ensuite, allez dans l'onglet “Incrustation en dégradé”. Modifiez le mode de fusion en “Lumière tamisée”, réglez l'opacité à 47% , cochez la case inverser, modifiez l'angle à 113°.

Pour terminer, allez dans l'option “Contour”. Modifiez la taille à 1 px, la position à intérieur et la couleur en #a2a2a2.

Vous devriez obtenir ce résultat :

Créez un nouveau (Ctrl+Shift+N) que vous renommerez « brush 2 ». Prenez l'outil “Pinceau” (B), utilisez la couleur blanche et faites un dessin comme montré ci-dessous.

Transformez ensuite votre claque en masque d'écrêtage en faisant un clic droit sur le calque puis « Créer une masque d'écrêtage »

Maintenant, nous allons créer le symbole de puissance. Créez un nouveau calque (Ctrl+Shift+N) que vous renommerez « brush 3 ». Ensuite dupliquez le calque « rectangle 2 ». Prenez l'outil de forme personnalisée et tracez un cercle comme indiqué ci-dessous. Remplissez-le avec la couleur #666666. Afin de ne pas trop vous mélanger les pinceaux, fusionnez le calque « brush 3 » et le calque du rectangle que vous avez copié. Sélectionnez lesdits calques -CTRL+clique sur le calque- et appuyez sur CTRL+E ( ou “Calque > Fusionner les calques”).

Double -cliquez sur votre calque (celui que vous venez de fusionner). Allez dans l'onglet “Ombre interne”. Modifiez l'opacité à 75%, la distance à 2px et le taille à 3px.

Ensuite allez dans l'onglet “Lueur externe”. Modifiez la couleur du dégradé en #fbf7c3 et la taille à 2px.

Allez dans l'onglet “Biseautage et estampage” et rentrez les paramètres comme indiqués sur la capture d'écran.

Maintenant allez dans l'onglet “Incrustation en dégradé” et modifiez les paramètres comme sur la capture d'écran.

Pour terminer, allez dans l'option “Contour” et modifiez les paramètres comme indiqué sur la capture d'écran.

Voilà notre premier bouton est terminé. Voici ce que vous devriez obtenir :

Conclusion

Voilà la deuxième partie de ce tutoriel est terminée ! Notre création se construit petit à petit… ;-)

En savoir plus

Pour en savoir plus ou si vous avez des questions à me poster, rendez-vous sur le forum.