Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

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

Compatible Photoshop CS4. Cliquer pour en savoir plus sur les compatibilités.Par xanadu (Xanadu), le 19 septembre 2011
Pour pouvoir suivre ce tutoriel, vous n'avez pas besoin d'avoir de connaissances particulières sur Photoshop. Tout est expliqué dans les détails.

Etape 1 : Créer la barre 

Maintenant vous allez créer un nouveau dossier que vous appellerez « barre ».

Créez un nouveau calque (Ctrl+Shift+N) et renommez-le « rectangle ». Prenez l'outil “Rectangle” (U), la couleur #383839. Changez le rayon à 2px.

Ensuite tracez une forme comme ci-dessous. Renommez votre calque « rectangle ».

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

Ensuite allez dans l'onglet “Ombre interne”. Modifiez la distance et la taille à 3px.

Maintenant allez dans l'onglet “Biseautage et d'estampage”. Modifiez le style de votre biseau en “Biseau externe”, l'opacité du mode des tons clairs à 19% et l'opacité du modes des tons foncés à 55%.

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

Pour terminer, allez dans les options contour. Modifiez juste la taille de votre contour à 1px et la couleur en « 323232 ».

Voici le résultat que vous devriez obtenir.

Créez un nouveau calque (Ctrl+Shift+N) que vous renommerez « forme ». Prenez l'outil “Rectangle” (U) et dessinez une forme comme celle tracée ci-dessous.

Double-cliquez sur votre calque « forme arrondie ». Allez dans l'onglet “Ombre portée”. Modifiez uniquement la distance et la taille de votre ombre à 1px.

Allez dans l'onglet “Biseautage et estampage”. Modifiez la taille à 2px, l'opacité du mode des tons clairs à 42 et le mode des tons foncés en “Normal”.

Pour terminer, allez dans l'onglet “Incrustation en dégradé”. Modifiez le mode de fusion en “Lumière tamisé”e et l'opacité à 14%.

Vous devriez obtenir ce résultat.

Créez un nouveau calque que vous appellerez « barre centre. ». Prenez l'outil “Rectangle” (U) et dessinez un forme comme ci-dessous.

Double-cliquez sur votre calque « barre centre ». Allez dans l'onglet “Ombre interne”. Modifiez la distance à 3px.

Allez dans l'onglet “Lueur externe”. Modifiez l'opacité à 16% et la couleur en blanc.

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

Dupliquez votre calque « barre centre ». Renommez-le « barre dessous 01 ». Créez un nouveau groupe de calque que vous appellerez « barre dessous » et placez le calque « barre dessous 01 » dedans. Changez la couleur de votre calque en #222222.

Ensuite double-cliquez sur votre calque. Allez dans l'onglet “Ombre interne”. Modifiez la distance à 3px.

Allez dans l'onglet “Lueur externe”. Modifiez l'opacité à 16% et la couleur en blanc (#ffffff).

Allez dans l'onglet “Incrustation en dégradé”. Modifiez le mode de fusion en “Lumière tamisée”, l'opacité à 14% et l'angle à 0°.

Dupliquez votre calque deux fois et renommez-le « barre dessous 02 » et «  barre dessous 03 ».

Vous devriez obtenir ce résultat.

Maintenant, dupliquez votre groupe de calque « barre dessous » et renommez-le « barre dessus ». Déplacez votre groupe de calque de façon à obtenir ce résultat.

Créez un nouveau groupe de calque et renommez-le « texte ». Prenez la police “Arial”, 4pt, de couleur blanche (#ffffff). Ecrivez « 10DB » et « 40DB ».

Maintenant vous n'avez plus qu'à dupliquer votre groupe de calque « barre », de façon à obtenir 10 barres comme celle-ci.

Maintenant créez un nouveau groupe de calque que vous appellerez « grille ». Créez un nouveau calque que vous renommerez « outil rectangle ». Prenez l'outil “Rectangle” (U) et dessinez une forme :

Double-cliquez sur votre calque « outil rectangle ». Allez dans l'option “Ombre portée”. Modifiez le mode de fusion en “Normal”, l'opacité à 52%, l'angle à 90°, puis pour terminer, la distance et la taille à 2px.

Allez dans l'onglet “Ombre interne”. Modifiez le mode de fusion en “Normal”, l'opacité à 95%, l'angle à 97°, la distance et la taille à 2px.

Pour terminer, allez dans l'onglet “Incrustation en dégradé”. Modifiez le mode de fusion en “Lumière tamisée”, l'opacité à 10%, cochez sur la case “Inverser” et l'angle à 90°.

Voici le résultat que vous devriez obtenir.

Dupliquez votre calque « outil rectangle » 4 fois puis renommez-le « outil rectangle 02 », « outil rectangle 03 », « outil rectangle 04 », « outil rectangle 05 », de façon à obtenir ceci.

Fermez votre groupe de calque et faites-un clic droit dessus, puis cliquez sur “Convertir en objet dynamique”. Ensuite, double-cliquez sur le calque. Allez dans l'onglet “Ombre interne”, modifiez l'opacité à 55%, la distance à 5px et la taille à 7px.

Prenez l'outil “Plume” (P) et dessinez un tracé comme celui indiqué ci-dessous. Changez la couleur en #984545.

Double-cliquez sur votre calque, puis allez dans l'onglet “Biseautage et estampage”. Modifiez la profondeur à 1000%, la taille à 24px, le flou à 11px, l'angle à 120°, le mode des tons clairs en “Normal” et l'opacité à 100%.

Dupliquez le calque de forme puis changez la couleur en #46b131.

Créez un nouveau dossier que vous renommerez « carrés rouges ». Créez un nouveau calque (Ctrl+Shift+N). Renommez-le « carré ». Changez la couleur en #871b19. Prenez l'outil “Rectangle” (U) puis tracez un carré comme ceci :

Dupliquez votre carré et renommez-le « carré 2 ».

Double-cliquez sur votre calque « carré 1 ». Allez dans l'onglet “Ombre interne”. Modifiez le mode de fusion en “Normal”, l'opacité à 43%, la distance à 1px et la taille à 2px.

Allez dans l'onglet “Lueur interne”. Modifiez le mode de fusion en “Normal”, l'opacité à 51%, la couleur en noir (#000000) et la taille à 3px.

Allez dans l'onglet “Biseautage et estampage”. Modifiez la profondeur à 144%, la taille à 0px, le flou à 2px, le mode des tons clairs en “Normal”, l'opacité du mode des tons clairs à 24% et l'opacité du mode des tons foncés à 79%.

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

Allez dans l'onglet “Contour”. Modifiez juste la taille à 1px.

Conclusion

Voilà cette partie du tutoriel est terminée ! Rendez-vous pour la partie 6 !…

En savoir plus

Ici des liens intéressants en rapport avec cet article, des documentations, d'autres tutoriels, etc