Nokia

Dessinez votre icône Symbian Anna

1149 views 10 Comments

Tout le monde (enfin je crois) aime le nouveau style Symbian Anna et ses icônes arrondies. J’ai récemment fait le nouveau logo pour le blog et je me suis beaucoup inspirée du thème Anna pour le concevoir. Si vous aussi vous avez une application à soumettre, ou si vous avez simplement envie de vous amuser un peu, voici un petit tuto pour réaliser une icône au style Anna sous Photoshop.

Bien entendu le procédé est le même à peu de choses près sur les autres logiciels…quant au motif d’exemple il est tout sauf sérieux !

Création du document

Commencez par créer un document de 1000px x 1000px avec 72 pixels par pouce. L’arrière plan peut être blanc pour une meilleure visibilité.

Création de la forme de base

Sélectionnez l’outil « Rectangle arrondi » dans la barre d’outils ou pressez la touche U. Définissez le rayon à 450px et tracez le rectangle tout en maintenant la touche MAJUSCULE appuyée et en prenant comme repère les bords de la zone de travail.Vous devriez avoir un résultat similaire à ceci :

Modification de la forme

Là ça devient un peu plus compliqué… quoi que ça reste assez simple !

Créez un rond qui va du coin de la zone de travail jusqu’au rond noir comme sur la copie d’écran ci-dessous :

Sélectionnez ensuite l’outil « Sélection directe » dans la barre d’outils ou appuyez sur la touche A.

Sélectionnez le rond noir (la forme) dans la liste des calques et cliquez en bas du rond noir pour voir les points apparaître (il faut bien cliquer sur les bords du rond) :

Tirez les points jusqu’au rond bleu tout en maintenant la touche MAJUSCULE appuyée de manière à ce que ce soit bien droit. Vous devriez avoir le résultat suivant :

Répétez l’opération sur tous les coins en faisant attention de tirer les points dans le bon sens… il faut que vous sélectionniez les points qui vont déjà vers votre cercle ! Pour ma part j’ai juste déplacé le cercle bleu existant vers les autres coins afin d’être certaine de toujours avoir la même taille. Une fois l’opération terminée vous pouvez supprimer le ou les ronds bleus :

C’est pas trop mignon ?

Maintenant qu’on a la forme on va pouvoir passer aux choses sérieuses !

Création du dégradé

Faites un clic droit sur votre calque avec le rond noir (dans la liste à droite, pas sur la forme elle-même) et sélectionnez « Options de fusion ». Allez dans le panneau « Incrustation en dégradé ».

Cliquez sur le dégradé noir et blanc pour voir le panneau d’édition s’ouvrir. Faites vous ensuite plaisir à créer un dégradé en cliquant simplement sur les languettes et en modifiant les couleurs.Pour ma part j’ai choisi 2 nuances de bleu.

Cliquez sur OK pour valider (sur les deux fenêtres ouvertes).

Création du motif

Maintenant que vous avez la base, il faut s’attaquer au motif !

Créez un groupe (Calque > Nouveau > Groupe) et dessinez ce que vous voulez dedans. Vous aurez besoin de créer des calques à l’intérieur (CTRL + MAJ + N). Dépassez autant que vous voulez, ce sera coupé par la suite !

Il est pas beau mon cochon ? :)

Découpage !

Maintenant que vous avez fait votre motif (plus ou moins sérieux selon votre personnalité), il va falloir le découper.

Réduisez le groupe dans lequel est votre motif en cliquant sur la flèche à sa gauche. Appuyez sur la touche ALT GR et faites un glissé déposé de la forme du rond noir vers votre groupe. Normalement, ça devrait vous supprimer tout de qui dépasse de la forme !

 

Sauvegarde

Dans un premier temps, débarrassez-vous du calque d’arrière plan simplement en cliquant sur l’œil à côté de celui-ci. Ensuite, faites CTRL + MAJ + ALT + S pour « Enregistrer pour le Web et les périphériques ».

Sélectionnez le format PNG 24 et modifiez la taille selon ce que vous voulez en faire… 400px suffisent largement pour un avatar Twitter par exemple !

Cliquez sur Enregistrer… et voilà !

N’hésitez pas à nous montrer vos chefs-d’œuvre !

PS : Nico me dit que pour les newbies il existe Anna’s Icon Creator !

RELATED ITEMS
Author Bio

Julie

Co-Fondatrice de Nokians.fr || Nokia Champion 2012 / 2013 / 2014 // Blogueuse sur la marque depuis 2010 // MVP Windows Phone || Fan de cochons d'inde et de cuisine (www.recettesdejulie.fr)

10 Comments
  1. Nskr

    7 septembre 2011 at 9 h 59 min

    Sympa le tuto 😉

  2. Lithos35

    7 septembre 2011 at 10 h 05 min

    Sympa oui 😉

    Mais il en existe des tout fait (pour la forme au moins!) sur d’autres blogs, je peux envoyer un lien?

    • Julie

      7 septembre 2011 at 10 h 15 min

      Fais toi plaisir, on est là pour partager 😉 Je sais pas si t’as vu j’ai aussi un lien à la fin du tuto (by Nicolas)

      • Lithos35

        7 septembre 2011 at 10 h 36 min

        Merci :)

        Oui j’ai vu le lien, mais le rendu est pas superbe, quand tu fais ça toi-même ça a quand même une autre tête!

        Voilà des templates tout fait par exemple: http://tdk-blog.fr/?p=904

        • Julie

          7 septembre 2011 at 10 h 41 min

          Pas mal, merci pour le lien 😉

  3. Panther42

    7 septembre 2011 at 17 h 17 min

    je n’ai pas de photoshop et j’ai que livequartz
    mais je ne suis pas fort sur les calques dégardés
    les multi-résolutions dans un petit résolution
    mais j’aimerais le faire avec l’image
    que j’ai pris sur internet :
    http://www.tao-yin.com/astrologie/img/tiger_panthere_neige.jpg

    • Julie

      7 septembre 2011 at 17 h 21 min

      Hello, tu devrais essayer le lien en bas de mon tuto 😉

      • Panther42

        7 septembre 2011 at 17 h 31 min

        Merci beaucoup de ta réactivité ! ^^

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


× cinq = 10

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.