Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox
EN CHANTIER
Cette page n'est pas terminée et est en cours d'écriture.

(Vous pouvez laisser cette balise le temps de rédiger votre tutoriel. Ainsi les lecteurs seront-ils avertis que le tutoriel n'est pas terminé. Vous pourrez enlever cette balise quand vous aurez fini.)

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

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

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

Double cliquez sur votre calque « carré 2 ». Allez dans l'onglet biseautage et estampage. Modifiez la profondeur à 144%, le mode des tons clairs en normal, l'opacité du mode des tons clairs à 100% et l'opacité du mode des tons foncés à 79%.

RENDU 01

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

RENDU 02

Allez dans les options de Contour. Modifiez la taille à 1px.

RENDU 03

Voici le résultat que vous devriez obtenir.

RENDU 04

Créez un nouveau dossier que vous appellerez « rond ». Ensuite créez un nouveau (Ctrl+Shift+N) et prenez l'outil ellipse (U). Tracez un rond comme celui montré ci-dessous. Utilisez la couleur #ed1c24.

RENDU 05

Double cliquez sur votre calque « rond ». Allez dans l'onglet Biseautage et estampage. Modifiez la taille et le flou à 2px et l'opacité du mode des tons foncés à 100%.

RENDU 06

Ensuite allez dans l'onglet Contour. Modifiez la taille à 1px.

RENDU 07

Dupliquez votre calque « rond », appelez-le « rond 2 » et changez la couleur #72e22f. Double cliquez sur votre calque « rond 2 ». Allez dans l'onglet Biseautage et estampage. Modifiez la taille et le flou à 2px et l'opacité du mode des tons foncés à 100%.

RENDU 06

Ensuite allez dans l'onglet Contour. Modifiez la taille à 1px.

RENDU 07

Voici le résultat que vous devriez obtenir.

RENDU 08

Maintenant créez un nouveau groupe de calque. Appelez-le « bandeau affichage ». Créez un nouveau que vous appellerez « cadre affichage ». Prenez l'outil rectangle (U) et créez une forme comme celle ci-dessous. Changez la couleur en #363636.

RENDU 09

Maintenant prenez l'outil ellipse de sélection (M) et faites deux cercles en maintenant la touche majuscule enfoncée.

RENDU 10

Maintenant faites un clic droit et Intervertir la sélection. Puis ajoutez un masque de fusion à votre calque « cadre affichage ».

RENDU 11

Voici le résultat que vous devriez obtenir.

RENDU 12

Double cliquez sur votre calque « cadre affichage ». Allez dans l'onglet Incrustation en dégradé. Modifiez le mode de fusion en Lumière tamisée et l'opacité à 22%.

RENDU 13

Créez un nouveau calque (Ctrl+Shift+N), prenez l'outil Texte (T) avec la police Ecran LCD que vous avez téléchargé au début du premier tutoriel. Modifiez la taille de la police à 29pt. Réduisez l'opacité du calque à 15%

RENDU 14

Ensuite reprenez l'outil Texte (T), avec la même police, la même taille de police et écrivez le titre de votre chanson.

RENDU 15

Dupliquez vos deux premiers calques autant de fois que nécessaire, pour arriver à ce résultat.

RENDU 16

Créez un nouveau dossier que vous appellerez « formes personnalisées ». Ensuite créez un nouveau calque que vous appellerez « note musique ». Prenez l'outil de Forme personnalisée (U) et sélectionnez la note de musique. Placez-la comme indiqué dans l'exemple ci-dessous.

RENDU 17

RENDU 18

Créez un nouveau calque que vous appellerez « horloge ». Prenez l'outil de Forme personnalisée (U) et sélectionnez l'horloge. Placez-la comme indiqué dans l'exemple ci-dessous.

RENDU 19

RENDU 20 Pour terminer, créez un nouveau calque que vous appellerez « volume ». Prenez l'outil de Forme personnalisée (U) et sélectionnez le bouton volume. Placez-le comme indiqué dans l'exemple ci-dessous.

RENDU 21

RENDU 22

Créez un nouveau dossier que vous appellerez « bouton info ». Prenez l'outil Ellipse (U). Tracez un rond en maintenant la touche majuscule enfoncée pour obtenir un tracé parfait. Changez la couleur en #d7d7d7.

RENDU 23

Renommez votre tracé « rond info ». Double cliquez sur votre calque et allez dans l'onglet Biseautage et estampage. Modifiez le style en Estampage oreiller, la profondeur à 1000%, la taille à 2px, le mode des tons clairs en clairs en Normal, l'opacité du mode des tons clairs à 42% et l'opacité du mode des tons foncés à 19%.

RENDU 24

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

RENDU 25

Pour terminer, allez dans l'onglet Contour. Modifiez la taille à 1px, la position à Intérieur et la couleur en #a2a2a2.

RENDU 26

Voici le résultat que vous devriez obtenir.

RENDU 27

Créez un nouveau calque (Ctrl+Shift+N) que vous renommerez « rond info 2 ». Double cliquez sur votre calque et allez dans l'onglet Biseautage et estampage. Modifiez le style en Estampage oreiller, la profondeur à 1000%, la taille à 3px, le mode des tons clairs en clairs en Normal, l'opacité du mode des tons clairs à 100% et l'opacité du mode des tons foncés à 19%.

RENDU 28

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

RENDU 29

Pour terminer, allez dans l'onglet Contour. Modifiez la taille à 1px, la position à Intérieur et la couleur en #a2a2a2.

RENDU 30

Voici le résultat que vous devriez obtenir.

RENDU 31

Maintenant créez un nouveau calque que vous appellerez « information ». Prenez l'outil Formes personnalisées et cliquez sur le bouton i comme indiqué ci-dessous. Changez la couleur en #646464.

RENDU 32

RENDU 33

Double cliquez sur votre calque « information ». Allez dans l'onglet Ombre interne. Modifiez la distance et la taille à 2px.

RENDU 34

Créez un nouveau groupe de calque que vous appellerez « bouton musique ». Créez un nouveau calque (Ctrl+Shift+N) et renommez-le « bouton ». Prenez l'outil Ellipse (U), tracez un bouton comme celui indiqué ci-dessous et changez sa couleur en #d7d7d7.

RENDU 35

Double cliquez sur votre calque « bouton » et allez dans l'onglet Biseautage et estampage. Modifiez le style en Estampage oreiller, la profondeur à 1000%, la taille à 2px, le mode des tons clairs en clairs en Normal, l'opacité du mode des tons clairs à 42% et l'opacité du mode des tons foncés à 19%.

RENDU 36

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

RENDU 37

Pour terminer, allez dans l'onglet Contour. Modifiez la taille à 1px, la position à Intérieur et la couleur en #a2a2a2.

RENDU 38

Changez la couleur de votre bouton #b6b6b6 et voici le résultat que vous devriez obtenir.

RENDU 39

Créez un nouveau calque (Ctrl+Shift+N) que vous appellerez « bouton 2 ». Double cliquez dessus et allez dans l'onglet Ombre interne. Modifiez le mode de fusion en Normal, l'opacité à 62%, la distance à 4px et la taille à 1px.

RENDU 40

Ensuite allez dans l'onglet Biseautage et Estampage. Modifiez le style en Estampage oreiller, la profondeur à 1000%, la taille à 4px, le mode des tons clairs en Normal, l'opacité à 0% et l'opacité du mode des tons foncés à 19%.

RENDU 41

Allez ensuite dans l'onglet Incrustation en dégradé. Modifiez le mode de fusion en Lumière tamisée, l'angle à 113° et l'échelle à 147%.

RENDU 42

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

RENDU 43

Voici le résultat que vous devriez obtenir.

RENDU 44

Maintenant créez un nouveau calque (Ctrl+Shift+N) que vous appellerez « note musique ». Prenez l'outil de Formes personnalisées et sélectionnez la note de musique comme indiqué ci-dessous.

RENDU 45

Tracez votre note de musique comme montré ci-dessous et changez la couleur en #1f1f1f.

RENDU 46

Créez un nouveau calque (Ctrl+Shift+N) que vous appellerez « brush ». Prenez l'outil Pinceau (B) avec du blanc. Faites-un trait comme montré ci-dessous.

RENDU 47

Sélectionnez votre calque brush et faites un clic droit dessus puis Créer un masque d'écrêtage.

RENDU 48

Conclusion

Ici une conclusion.

Les sources

Vous pouvez proposer au téléchargement tout document qui serait bienvenue pour le lecteur, par exemple le fichier .psd photoshop, le .fla pour flash, etc

Mais vous pouvez aussi proposer ces téléchargements tout au long du tutoriel, et pas seulement à la fin.

En savoir plus

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