Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer le design d'une application Ipad: Partie 3

Compatible Photoshop CS4. Cliquer pour en savoir plus sur les compatibilités.Par xanadu (Xanadu), le 15 septembre 2011
Pour pouvoir suivre ce tutoriel, vous n'avez pas besoin d'avoir de grandes connaissances de Photoshop. Je vous explique en détail toutes les étapes.

Etape 1 : Créer des boutons plus petits

Créez un nouveau dossier que vous appellerez « petits boutons ». Dupliquez le bouton principal. Déplacez-le dans votre dossier « petits boutons » et renommez-le « petits boutons »

Maintenant mettez-vous sur votre dossier (1) et faites un (Ctrl+T)

Maintenant redimensionnez votre groupe de calque. Modifiez la largeur et la hauteur à 33% (2).

Voici le résultat que vous devriez obtenir :

Maintenant supprimez votre claque « Brush 3 » dans votre dossier « petits boutons ». Ensuite cliquez sur le calque « rectangle 2 » et allez dans le menu « Edition > Transformation > Rotation 90° horraire ».

Ensuite déplacez votre calque sur la gauche du bouton pour avoir le même rendu que celui ci-dessous.

Créez un nouveau calque (Ctrl+Shift+N) et renommez-le « 0db ». Utilisez la police Arial en 3pt avec la couleur blanche.

Créez un nouveau calque (Ctrl+Shift+N) et renommez-le « 40db ». Utilisez la police Arial en 3pt avec la couleur blanche.

Double cliquez sur votre premier calque de texte. Allez dans les options de lueur externe. Changez le mode de fusion en « normal », l'opacité à 13%, la couleur en #3e3e3e et la taille à 6%.

Double cliquez sur votre deuxième calque de texte. Allez dans les options de lueur externe. Changez le mode de fusion en « normal », l'opacité à 13%, la couleur en #3e3e3e et la taille à 6%.

Voici le résultat obtenu :

Maintenant dupliquez votre groupe « petits boutons » 3 fois. Renommez-les comme indiqué sur la capture d'écran suivante.

Renommez les boutons comme indiqué ci-dessous.

Maintenant modifiez la position du calque « rectangle 2 » de la manière suivante.

Créez un nouveau calque (Ctrl+Shift+N) que vous appllerez « plume ». Prenez l'outil plume (P) et dessinez une forme comme celle dessinée ci-dessous. Dupliquez-la pour faire la deuxième forme, et renommez le calque « plume 2 ».

Double cliquez sur votre calque « plume ». Allez dans les options ombre interne. Modifiez le mode de fusion en normal, l'opacité à 26%, la distance à 4px et la taille à 3px.

Allez dans les options lueur interne. Modifiez le mode de fusion en lumière tamisée, l'opacité à 12%, la couleur en #6dcff6 et la taille à 23px.

Allez dans les options d'incrustation en dégradé. Modifiez le mode de fusion en lumière tamisée et l'opacité à 34%.

Double cliquez sur votre calque « plume 2 ». Allez dans les options ombre interne. Modifiez le mode de fusion en normal, l'opacité à 26%, la distance à 4px et la taille à 3px.

Allez dans les options lueur interne. Modifiez le mode de fusion en lumière tamisée, l'opacité à 12%, la couleur en #6dcff6 et la taille à 23px.

Allez dans les options d'incrustation en dégradé. Modifiez le mode de fusion en lumière tamisée et l'opacité à 34%.

Double cliquez sur votre calque « plume 2 ». Allez dans les options ombre interne. Modifiez le mode de fusion en normal, l'opacité à 26%, la distance à 4px et la taille à 3px.

Vous devriez obtenir ce résultat :

Créez deux nouveaux calques (Ctrl+Shift+N) que vous appellerez « input » et « output ». Prenez l'outil texte utilisez la police Arial avec une taille de 8pt et une couleur blanche comme ci-dessous.

Double cliquez sur votre calque de texte « input ». Allez dans les options ombre portée. Modifiez l'opacité à 100% ainsi que la distance et la taille à 1px.

Allez dans les options d'ombre interne. Modifiez le mode de fusion en normal, l'opacité à 26%, la distance à 4px et la taille à 3px.

Allez dans les options de lueur interne. Modifiez le mode de fusion en lumière tamisée, l'opacité à 12%, la couleur en #6dcff6 et la taille à 23px.

Allez dans les options d'incrustation en dégradé. Modifiez le mode de fusion en lumière tamisée et l'opacité à 34%.

Voici le résultat que vous devriez obtenir.

Double cliquez sur votre calque de texte « output ». Allez dans les options ombre portée. Modifiez l'opacité à 100% ainsi que la distance et la taille à 1px.

Allez dans les options d'ombre interne. Modifiez le mode de fusion en normal, l'opacité à 26%, la distance à 4px et la taille à 3px.

Allez dans les options de lueur interne. Modifiez le mode de fusion en lumière tamisée, l'opacité à 12%, la couleur en #6dcff6 et la taille à 23px.

Allez dans les options d'incrustation en dégradé. Modifiez le mode de fusion en lumière tamisée et l'opacité à 34%.

Voici le résultat que vous devriez obtenir.

Conclusion

Voilà cette partie du tutoriel est maintenant terminée. Dans la prochaine partie nous terminerons la création du design.

En savoir plus