Comment utiliser Photoshop pour créer vos propres icônes de style iOS 6

Comment créer vos propres icônes de style iOS

De nombreux débats se poursuivent pour savoir si iOS 7 estbon ou pas, il n'y a pas d'autre choix que de choisir un côté - iOS 6 ou iOS 7. Personnellement, je pense que les icônes iOS 7 sont un peu une arnaque de Windows Phone, mais bon - qu'allez-vous faire… Ce n'est pas la première chose à faire Apple a copié ou d’autres Microsoft d’Apple ou d’Android, la boucle est bouclée. Alors, pendant que nous sommes dans l’esprit Apple, pourquoi ne pas essayer un tutoriel rapide sur Photoshop pour créer vos propres icônes iOS 6.

Trouver de bons exemples d'icônes

La première étape consiste à trouver un exemple d'icône iOS. Effectuez une recherche rapide dans Google ou Bing Image pour «iOS Icons». Ciblez votre recherche pour obtenir des résultats plus précis à l'aide des options de recherche exacte de Google.

Une fois que vous avez trouvé une bonne icône PNG, enregistrez-la sur votre PC afin que nous puissions l’ouvrir dans Photoshop.

image

Il convient également de noter que Bing facilite la recherche d’images et d’icônes gratuites à des fins personnelles.

Recherche de licence Bing

Commencer

Importez l’image enregistrée dans Photoshop et assurez-vous qu’il s’agit d’un fichier PNG approprié. C’est censé avoir un grille en damier après les coins arrondis au lieu du fond blanc typique.

jeSi l’arrière-plan n’est pas transparent, vous pouvez utiliser quelque chose comme le Outil de gomme magique à chacun des quatre points blancs dans les coins.

image

Ctrl + Clic la vignette du calque avec l’icône importée pour sélectionner la forme de l’icône. Vous pouvez ensuite (avec l'outil de sélection rectangulaire) clic-droit et Remplir avec n'importe quelle couleur unie que vous voulez. Je vais essayer le noir pour commencer.

image

Effets spéciaux

Il est maintenant temps de donner à votre icône le look brillant d’IOS 6 (qui est mieux que iOS 7, bien sûr). Clic-droit votre couche et sélectionnez Options de fusion.

SNAGHTMLe01104

Les options de fusion vous permettront de créer une variété de styles de calque de superposition pouvant reproduire l'apparence de l'icône iOS. Commencez par un Pente et ensuite essayer Ombre portée et Lueur intérieure. Votre résultat final ressemblera à ceci:

image

Et votre couche ressemblera à ceci:

image

Conseil: vous pouvez renommer votre calque (Maj + Ctrl + N) pour mieux organiser les choses.

Ajouter un peu d'éclat

Reproduisons maintenant le lustre brillant au sommet de presque toutes les icônes iOS 6. Tout d'abord, créez un nouveau calque. Appelez-le "Gloss" et mettez-le au dessus de votre couche d'icônes:

image

Maintenant, prenez le Outil de chapiteau elliptique (caché derrière le rectangle de sélection). Faites une petite forme ronde dans la partie supérieure de l’icône comme ceci:

image

Sans désélectionner, prenez votre Outil gradient et créez rapidement un dégradé qui passe du blanc à 100% de transparence:

image

Après avoir créé votre dégradé, faites-le glisser du bas de la sélection. en maintenant la touche Maj enfoncée.

image

Supprimez maintenant la brillance qui dépasse les limites de l’icône. En faisant un Ctrl + Clic sur la vignette du Couche d'icônes puis inverser notre sélection avec Clic droit> Sélectionner inverse vous pouvez couvrir les quatre coins vierges. Maintenant, nous pouvons sélectionner le Couche de brillant et appuyez sur le Supprimer la clé se débarrasser de la brillance excessive. Vous pouvez finir avec un rapide Ctrl + D désélectionner.

image

Pointe: Pour améliorer l’effet de la brillance, vous pouvez essayer différents modes de superposition de calques. Certains fonctionnent correctement. Écran, Lumière douce et Recouvrir.

Finalisation de votre icône

Vous pouvez maintenant ajouter n'importe quel logo que vous souhaitez utiliser. Découvrez ma douce nouvelle application - le iSmile! Seulement 99,99 $ sur l'App Store - je plaisante, bien sûr! Vous pouvez utiliser cette technique pour créer autant d'icônes groovy que vous le souhaitez… amusez-vous!

image

0

Articles similaires

laissez un commentaire