[TUTO] Créer des icônes en photoshop sur iPhone
par Twix » 25 Fév 2008, 21:46
Petit tutorial tout simple pour créer des icônes pour iPhone.
1. Créer un nouveau fichier avec les caractérises suivantes:
- taille de 60*57 pixels
- résolution de 72 pixels/pouce
- arrière plan transparent
2. Personnellement j'agrandis la zone de travail à 300%, ça permet d'être plus précis. Nommer le calque "bouton" (pas obligatoire évidemment, mais ça permet de pas se perdre lorsqu'on se retrouve avec 10 calques).
Veillez à avoir affiché les règles (Affichage -> règles) et les avoir configurées en mode pixel (à retrouver dans les préférences).
Mettre en place des repères afin de délimiter une zone de 57*57 pixels.
Choisir la couleur du bouton (possible de modifier par la suite).
Sélectionnez l'outil rectangle arrondi et définissez un rayon de 10 pixels et activer l'option "pixel de remplissage" (en haut à droite).
Délimitez votre forme de bouton à l'aide des repères.
3. On va ensuite appliquer un effet gloss sur le haut du bouton.
Pour cela, créez un nouveau calque, nommez le "Gloss".
Sélectionnez l'outil dégradé, modifié les options pour obtenir un dégradé de blanc à transparent.
Sélectionnez la forme du bouton, tout en restant sur le calque gloss.
Appliquez le dégradé du haut vers le centre du bouton. Pour bien faire il faudrait obtenir un dégradé jusqu'au centre du bouton.
On va jouer avec le lasso ellipse de sélection maintenant, avec l'option intersection. Le bouton est toujours sélectionné, délimitez la zone dans laquelle vous voulez obtenir un effet gloss.
Intervetir la sélection obtenue (Sélection -> intervetir) et effacé ensuite cette zone (Edition -> effacer).
4. Pour rendre le bouton moins plat, on va former une légère lueur de bas en haut.
Créez un nouveau calque, nommez le "Lueur".
On reprend l'outil dégradé, toujours de blanc à transparent et on crée une légère lueur sur le bas du bouton (en aillant sélectionné la forme du bouton de préférence).
On peut légèrement modifier l'opacité du calque à 80%.
5. On va maintenant créer une ombre sous le bouton pour accentuer l'effet de relief.
Commencez par dupliquer le calque bouton, et on le nomme "Ombre". Remplissez le de noir et modifiez l'opacité à 80%.
Et pour finir, faites le descendre légèrement plus bas que le bouton.
6. Revenez au calque "Bouton" et entrez dans les options de fusion.
Cocher l'option "ombre portée" et modifiez les choses suivantes:
- opactié : 80%
- angle : 90°
- distance : 2 pixels
- taille : 2 pixels
7. Et enfin la petite touche finale (dans ce cas ci j'ai choisi de jolies petites cartes) que l'on glisse sur l'icône vierge.
Amusez-vous bien
Certaines petites choses seront sans doute à modifier et à rajouter, mais je dois d'abord voir ce que ça donne sur l'iPhone et pour ça, je dois trouver comment importer et remplacer les icônes.
1. Créer un nouveau fichier avec les caractérises suivantes:
- taille de 60*57 pixels
- résolution de 72 pixels/pouce
- arrière plan transparent
2. Personnellement j'agrandis la zone de travail à 300%, ça permet d'être plus précis. Nommer le calque "bouton" (pas obligatoire évidemment, mais ça permet de pas se perdre lorsqu'on se retrouve avec 10 calques).
Veillez à avoir affiché les règles (Affichage -> règles) et les avoir configurées en mode pixel (à retrouver dans les préférences).
Mettre en place des repères afin de délimiter une zone de 57*57 pixels.
Choisir la couleur du bouton (possible de modifier par la suite).
Sélectionnez l'outil rectangle arrondi et définissez un rayon de 10 pixels et activer l'option "pixel de remplissage" (en haut à droite).
Délimitez votre forme de bouton à l'aide des repères.
3. On va ensuite appliquer un effet gloss sur le haut du bouton.
Pour cela, créez un nouveau calque, nommez le "Gloss".
Sélectionnez l'outil dégradé, modifié les options pour obtenir un dégradé de blanc à transparent.
Sélectionnez la forme du bouton, tout en restant sur le calque gloss.
Appliquez le dégradé du haut vers le centre du bouton. Pour bien faire il faudrait obtenir un dégradé jusqu'au centre du bouton.
On va jouer avec le lasso ellipse de sélection maintenant, avec l'option intersection. Le bouton est toujours sélectionné, délimitez la zone dans laquelle vous voulez obtenir un effet gloss.
Intervetir la sélection obtenue (Sélection -> intervetir) et effacé ensuite cette zone (Edition -> effacer).
4. Pour rendre le bouton moins plat, on va former une légère lueur de bas en haut.
Créez un nouveau calque, nommez le "Lueur".
On reprend l'outil dégradé, toujours de blanc à transparent et on crée une légère lueur sur le bas du bouton (en aillant sélectionné la forme du bouton de préférence).
On peut légèrement modifier l'opacité du calque à 80%.
5. On va maintenant créer une ombre sous le bouton pour accentuer l'effet de relief.
Commencez par dupliquer le calque bouton, et on le nomme "Ombre". Remplissez le de noir et modifiez l'opacité à 80%.
Et pour finir, faites le descendre légèrement plus bas que le bouton.
6. Revenez au calque "Bouton" et entrez dans les options de fusion.
Cocher l'option "ombre portée" et modifiez les choses suivantes:
- opactié : 80%
- angle : 90°
- distance : 2 pixels
- taille : 2 pixels
7. Et enfin la petite touche finale (dans ce cas ci j'ai choisi de jolies petites cartes) que l'on glisse sur l'icône vierge.
Amusez-vous bien
Certaines petites choses seront sans doute à modifier et à rajouter, mais je dois d'abord voir ce que ça donne sur l'iPhone et pour ça, je dois trouver comment importer et remplacer les icônes.
-
Twix
SitemapIndex