Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer le design d'une application Ipad: deuxième partie

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

Etape 1 : Création du bouton dessus

Fermer votre groupe bouton puis créez-en un autre que vous renommerez « bouton gauche dessus » et placez-le sous l'autre groupe.

Créez un nouveau calque (Ctrl+Shift+N), appelez-le « rectangle ». Prenez l'outil rectangle (U), fixez le rayon à 2px et tracez une forme similaire à celle montrée dessous.

Ensuite prenez l'outil de sélection (M) et tracez une sélection autour du cercle. Faites-un clic droit puis “Intervertir (la sélection)” et ensuite cliquez sur le masque de fusion.

Maintenant double-cliquer sur votre calque « rectangle » et modifiez les paramètres. Allez dans l'onglet “Ombre portée”. Modifiez l'opacité de votre ombre à 100%, la distance ainsi que la taille à 1px.

Ensuite allez dans l'onglet “Ombre interne”. Modifiez l'opacité à 33%, la distance à 4px et la taille à 3px. Cliquez sur OK.

Allez maintenant dans l'onglet “Lueur interne”. Dans la structure de la lueur interne, modifiez le mode de fusion de votre lueur en « Lumière tamisée », changez l'opacité à 12% et la couleur en #6dcff6. Dans les options d'éléments, modifiez juste la taille à 23%.

Ensuite allez dans les options de biseautage et estampage. Dans les options de structure, modifiez la taille à 1px. Dans l'option “Ombrage”, modifiez l'opacité du mode des tons clairs à 15%.

Allez dans l'onglet “Incrustation en dégradé”. Modifiez le mode de fusion en « Lumière tamisée » et changez l'opacité à 18%

Allez dans l'onglet “Contour”. Modifiez la taille à 1px et la couleur en #474747.

Créez un nouveau calque (Ctrl+Shift+N) que vous appellerez « rond ». Prenez l'outil (U) et tracez un cercle autour du bouton comme montré ci-dessous.

Double-cliquez sur votre calque « rond ». Allez dans l'onglet “Biseautage et estampage”. Modifiez le style en biseau externe, la taille à 9px, le flou à 1px. Pour terminer, modifiez l'opacité du mode des tons clairs à 41%.

Maintenant appliquez un masque d'écrêtage à votre calque “rond” en faisant un clic droit sur le calque puis « Créer un masque d'écrêtage ».

Maintenant nous allons ajouter un peu de texte. Pour cela, créez un nouveau calque et prenez l'outil “Texte” (T). Changez la taille de votre texte à 10px, la police en “Arial”. Peu importe la couleur que vous choisissez, moi je préfère utiliser du noir.

Maintenant double-cliquez sur votre calque. Allez dans l'onglet “Ombre portée”. Modifiez le mode de fusion de l'ombre en « Normal », l'opacité à 17%, la distance à 1px et la taille à 0px.

Ensuite allez dans l'onglet “Lueur externe”. Dans les options de structure, modifiez le mode de fusion de la lueur en « Lumière tamisée », l'opacité à 70% et la couleur en #6dcff6. Dans les otpions d'éléments changez uniquement la taille à 12px.

Allez maintenant dans l'onglet “Biseautage et estampage”. Dans les options de structure, modifiez le style en « Biseau externe », la profondeur à 348% et la taille à 3px. Pour terminer, dans l'option “Ombrage” modifiez l'opacité du mode des tons clairs à 15% et l'opacité du mode des tons foncés à 21%.

Allez dans l'onglet “Satin”. Modifiez juste la distance et la taille à 2px chacune.

Voici ce que vous devriez obtenir :

Voilà votre bouton “gauche dessus” est terminé. Maintenant nous allons devoir créer les 3 autres boutons qui seront identiques à celui que nous venons de créer. Pour cela reprenez les étapes de création du bouton précédent.

Etape 2 : Création du bouton milieu dessus

Fermer votre groupe bouton puis créez-en un autre que vous renommerez « bouton milieu dessus » et placez-le sous l'autre groupe.

Créez un nouveau calque (Ctrl+Shift+N), appelez-le « rectangle ». Prenez l'outil “Rectangler (U), fixez le rayon à 2px et tracez une forme similaire à celle montrée dessous.

Ensuite prenez l'outil de “Ellipse de sélection” (M) et tracez une sélection autour du cercle. Faites-un clic droit puis intervertir la sélection et ensuite cliquez sur le masque.

Maintenant double-cliquez sur votre calque « rectangle » et modifiez les paramètres. Allez dans l'onglet “Ombre portée”. Modifiez l'opacité de votre ombre à 100%, la distance ainsi que la taille à 1px.

Ensuite allez dans l'onglet “Ombre interne”. Modifiez l'opacité à 33%, la distance à 4px et la taille à 3px.

Allez maintenant dans l'onglet “Lueur interne”. Dans la structure de la lueur interne, modifiez le mode de fusion de votre lueur en « Lumière tamisée », changez l'opacité à 12% et la couleur en #6dcff6. Dans les options d'éléments, modifiez la taille à 23%.

Ensuite allez dans l'onglet “Biseautage et estampage”. Dans les options de structure, modifiez la taille à 1px. Dans l'option “Ombrage”, modifiez l'opacité du mode des tons clairs à 15%.

Allez dans l'onglet “Incrustation en dégradé”. Modifiez le mode de fusion en « Lumière tamisée » et changez l'opacité à 18%

Allez dans les options de contour. Modifiez la taille à 1px et la couleur en #474747.

Créez un nouveau calque (Ctrl+Shift+N) que vous appellerez « rond ». Prenez l'outil “Ellipse”(U) et tracez un cercle autour du bouton comme montré ci-dessous.

Double-cliquez sur votre calque « rond ». Allez dans l'onglet “Biseautage et estampage”. Modifiez le style en biseau externe, la taille à 9px, le flou à 1px. Pour terminer, modifiez l'opacité du mode des tons clairs à 41%.

Maintenant appliquez un masque d'écrêtage à votre calque rond en faisant un clic droit sur le calque puis « Créer un masque d'écrêtage ».

Maintenant nous allons ajouter un peu de texte. Pour cela, créez un nouveau calque et prenez l'outil “Texte (T)”. Changez la taille de votre texte à 10px, la police en “Arial”. Peu importe la couleur que vous choisissez, moi je préfère utiliser du noir.

Maintenant double-cliquez sur votre calque. Allez dans l'onglet “Ombre portée”. Modifiez le mode de fusion de l'ombre en « Normal », l'opacité à 17%, la distance à 1px et la taille à 0px.

Ensuite allez dans l'onglet “Lueur externe”. Dans les options de structure, modifiez le mode de fusion de la lueur en « Lumière tamisée », l'opacité à 70% et la couleur en #6dcff6. Dans les otpions d'éléments changez uniquement la taille à 12px.

Allez maintenant dans l'onglet “Biseautage et d'estampage”. Dans l'option “Structure”, modifiez le style en « Biseau externe », la profondeur à 348% et la taille à 3px. Pour terminer, dans l'option “Ombrage” modifiez l'opacité du mode des tons clairs à 15% et l'opacité du mode des tons foncés à 21%.

Allez dans l'option “Satin”. Modifiez la distance et la taille à 2px chacune.

Voici ce que vous devriez obtenir :

Voilà le bouton “milieu dessus” est terminé. Maintenant nous allons passer à la création du 3ème bouton.

Etape 3 : Création du bouton gauche dessous

Fermer votre groupe bouton puis créez-en un autre que vous renommerez « bouton gauche dessus » et placez-le sous l'autre groupe.

Créez un nouveau calque (Ctrl+Shift+N), appelez-le « rectangle ». Prenez l'outil “Rectangle” (U), fixez le rayon à 2px et tracez une forme similaire à celle montrée dessous.

Ensuite prenez l'outil de “Ellipse de sélection” (M) et tracez une sélection autour du cercle. Faites-un clic droit puis “Intervertir (la sélection)” et ensuite cliquez sur le masque de fusion.

Ensuite, double-cliquez sur votre calque « rectangle » et modifiez les paramètres. Allez dans l'onglet “Oombre portée”. Modifiez l'opacité de votre ombre à 100%, la distance ainsi que la taille à 1px.

Ensuite allez dans l'onglet “Ombre interne”. Modifiez l'opacité à 33%, la distance à 4px et la taille à 3px.

Allez maintenant dans l'onglet “Lueur interne”. Dans la structure de la lueur interne, modifiez le mode de fusion de votre lueur en « Lumière tamisée », changez l'opacité à 12% et la couleur en #6dcff6. Dans les options d'éléments, modifiez juste la taille à 23%.

Ensuite allez dans les options de biseautage et estampage. Dans les options de structure, modifiez la taille à 1px. Dans l'option “Ombrage”, modifiez l'opacité du mode des tons clairs à 15%.

Allez dans l'onglet “i*Incrustation en dégradé”. Modifiez le mode de fusion en « Lumière tamisée » et changez l'opacité à 18%

Allez dans l'onglet “Contour”. Modifiez la taille à 1px et la couleur en #474747.

Créez un nouveau calque (Ctrl+Shift+N) que vous appellerez « rond ». Prenez l'outil “Ellipse de sélection” (U) et tracez un cercle autour du bouton comme montré ci-dessous.

Double-cliquez sur votre calque « rond ». Allez dans l'onglet “Biseautage et estampage”. Modifiez le style en biseau externe, la taille à 9px, le flou à 1px. Pour terminer, modifiez l'opacité du mode des tons clairs à 41%. Cliquez sur OK.

Maintenant appliquez un masque d'écrêtage à votre calque rond en faisant un clic droit sur le calque puis « Créer un masque d'écrêtage ».

Maintenant nous allons ajouter un peu de texte… Pour cela, créez un nouveau calque et prenez l'outil “Texte” (T). Changez la taille de votre texte à 10px, la police en “Arial”. Peu importe la couleur que vous choisissez, moi je préfère utiliser du noir.

Ensuite, double-cliquez sur votre calque. Allez dans l'onglet “Ombre portée”. Modifiez le mode de fusion de l'ombre en « Normal », l'opacité à 17%, la distance à 1px et la taille à 0px.

Ensuite allez dans l'onglet “Lueur externe”. Dans l'option “Structures, modifiez le mode de fusion de la lueur en « Lumière tamisée », l'opacité à 70% et la couleur en #6dcff6. Dans les otpions d'éléments changez uniquement la taille à 12px.

Allez maintenant dans l'onglet “Biseautage et d'estampage”. Dans l'option “Structure”, modifiez le style en « Biseau externe », la profondeur à 348% et la taille à 3px. Pour terminer, dans l'option “Ombrage” modifiez l'opacité du mode des tons clairs à 15% et l'opacité du mode des tons foncés à 21%.

Allez ensuite dans l'option “Satins. Modifiez simplement la distance et la taille à 2px chacune.

Voici ce que vous devriez obtenir :

Voilà le bouton gauche dessous est maintenant terminé ! Nous allons passer à la création du 4ème bouton.

Etape 4 : Création du 4ème bouton

Fermer votre groupe bouton puis créez-en un autre que vous renommerez « bouton droit dessous » et placez-le sous l'autre groupe.

Créez un nouveau calque (Ctrl+Shift+N), appelez-le « rectangle ». Prenez l'outil “Rectangle” (U), fixez le rayon à 2px et tracez une forme similaire à celle montrée dessous.

Ensuite prenez l'outil “Ellipse de sélection” (M) et tracez une sélection autour du cercle. Faites-un clic droit puis “Intervertir (la sélection)” et ensuite cliquez sur le masque de fusion.

Ensuite, double-cliquez sur votre calque « rectangle » et modifiez les paramètres. Allez dans l'onglet “Ombre portée”. Modifiez l'opacité de votre ombre à 100%, la distance ainsi que la taille à 1px.

Ensuite allez dans l'onglet “Ombre interne”. Modifiez l'opacité à 33%, la distance à 4px et la taille à 3px.

Allez maintenant dans l'option “Lueur interne”. Dans la structure de la lueur interne, modifiez le mode de fusion de votre lueur en « Lumière tamisée », changez l'opacité à 12% et la couleur en #6dcff6. Dans les options d'éléments, modifiez juste la taille à 23%.

Ensuite allez dans l'onglet “Biseautage et estampage”. Dans l'options “Structure”, modifiez la taille à 1px. Dans l'option “Ombrage”, modifiez l'opacité du mode des tons clairs à 15%.

Allez dans l'onglet “Incrustation en dégradé”. Modifiez le mode de fusion en « Lumière tamisée » et changez l'opacité à 18%

Allez dans l'onglet “Contour”. Modifiez la taille à 1px et la couleur en #474747.

Créez un nouveau calque (Ctrl+Shift+N) que vous appellerez « rond ». Prenez l'outil “Ellipse” (U) et tracez un cercle autour du bouton comme montré ci-dessous.

Double-cliquez sur votre calque « rond ». Allez dans l'onglet “Biseautage et estampage”. Modifiez le style en biseau externe, la taille à 9px, le flou à 1px. Pour terminer, modifiez l'opacité du mode des tons clairs à 41%.

Maintenant appliquez un masque d'écrêtage à votre calque rond en faisant un clic droit sur le calque puis « Créer un masque d'écrêtage ».

Maintenant nous allons ajouter un peu de texte. Pour cela, créez un nouveau calque et prenez l'outil “Texte” (T). Changez la taille de votre texte à 10px, la police en “Arial”. Peu importe la couleur que vous choisissez, moi je préfère utiliser du noir.

Maintenant double cliquez sur votre calque. Allez dans l'onglet “Ombre portée”. Modifiez le mode de fusion de l'ombre en « Normal », l'opacité à 17%, la distance à 1px et la taille à 0px.

Ensuite allez dans les options de lueur externe. Dans l'option “Structure”, modifiez le mode de fusion de la lueur en « Lumière tamisée », l'opacité à 70% et la couleur en #6dcff6. Dans les otpions d'éléments changez uniquement la taille à 12px.

Allez maintenant dans l'onglet “Biseautage et d'estampage”. Dans les options de structure, modifiez le style en « Biseau externe », la profondeur à 348% et la taille à 3px. Pour terminer, dans l'option “Ombrage” modifiez l'opacité du mode des tons clairs à 15% et l'opacité du mode des tons foncés à 21%.

Allez dans l'options “Satin”. Modifiez uniquement la distance et la taille à 2px chacune.

Voilà le résultat à ce stade du tutoriel :

Voilà le bouton “gauche dessus” est maintenant terminé ! Dans la prochaine partie du tutoriel nous allons créer 4 boutons plus petits.

Vous pourrez bientôt télécharger le fichier .PSD de ce tutoriel.

En savoir plus

Voici le lien vers le sujet sur le forum. N'hésitez pas à me poser des questions ;)