Utilisez Fireworks pour créer des détails exquis sur les icônes

Dans cet article, nous utilisons le logiciel Fireworks pour créer quelques détails sur une image d'icône prête à l'emploi afin de rendre l'icône plus raffinée et plus belle !

Il y a deux points principaux à noter lors de l'utilisation de Fireworks (ci-après dénommé FW) pour la conception d'icônes :

Premièrement, FW se concentre sur la conception Web et n'est pas adapté à la création d'effets PS trop complexes. Vous pouvez vous attendre aux filtres PS de FW CS5 ;
Deuxièmement, la méthode d'édition de FW est similaire à celle de l'IA. Si vous avez l'habitude de travailler dans un environnement d'ombrage de pixels de type PS, vous pouvez ignorer ce didacticiel.

Ensuite, entrons dans le vif du sujet. Copions une icône relativement standard pour explication, qui facilitera la compréhension de tous.

L'image ci-dessous est un ensemble d'icônes créées par le célèbre design domestique eico. L'objet que nous souhaitons copier est l'icône d'enveloppe encadrée dans l'image. Laissez-moi vous expliquer à l'avance qu'en raison du thème du didacticiel, nous ajouterons quelques détails à cette icône, de sorte que notre résultat final de copie sera différent de l'image originale.

Étape 01

Découpez l'icône que vous souhaitez copier comme référence et verrouillez le calque. Le panneau de chemin de mon FW ici est extrait de Fireworks CS4, mais il n'a aucun impact sur les opérations ultérieures car j'utilise toutes les fonctions incluses dans CS3.

Étape 02

Utilisez l'outil Rectangle arrondi pour dessiner un rectangle arrondi similaire à l'image échantillon, utilisez les quatre points de contrôle des coins arrondis pour ajuster le rayon des coins arrondis, puis appuyez sur Ctrl+Maj+G pour diviser la forme.

Copiez ensuite le premier rectangle arrondi, utilisez l'outil flèche blanche pour déplacer un pixel dans quatre directions et créez deux rectangles arrondis comme indiqué sur l'image (notez que les huit nœuds aux coins arrondis sont traités avec des flèches blanches, ils doivent être alignés).

Nous ne pouvons pas utiliser Stroke pour ajouter une bordure extérieure à un rectangle, car la bordure virtuelle vous tuerait. Si le rectangle arrondi que vous avez dessiné avec l'outil Rectangle arrondi a des bords virtuels sans contour, dispersez les nœuds, sélectionnez le chemin avec l'outil flèche noire et cliquez sur Arrondir les points en pixels dans le panneau Chemin pour renvoyer tous les nœuds du chemin. . position à l'intersection des pixels (vous pouvez également utiliser l'outil flèche blanche pour sélectionner un nœud pour un référencement individuel).

Étape 03

Copiez le grand rectangle arrondi et placez-le sur le calque supérieur. Utilisez la flèche blanche et les touches Maj + flèche pour obtenir un triangle inversé. Copiez-le ensuite. Remplissez le triangle inversé supérieur avec un dégradé linéaire. Remplissez le triangle inversé inférieur avec du marron uni. définir une mise en drapeau de 1 px.

Étape 04

Utilisez les flèches blanches pour sélectionner les nœuds affichés au milieu, puis utilisez les touches fléchées du clavier pour descendre de deux pixels afin de rendre l'enveloppe plus longue (car une seule icône ici n'est pas limitée par le style global).

Étape 05

Retournez verticalement le triangle inversé rempli de dégradé dessiné précédemment, faites-en une copie et placez-le. Leur relation de position est comme indiqué dans l'image ci-dessous. Les deux triangles inversés sont séparés d'un peu plus de 1px de haut en bas. Vous pouvez utiliser l'outil flèche blanche pour sélectionner les quatre nœuds au-dessus du triangle inversé brun foncé et faire glisser la souris avec la ligne auxiliaire pour déplacer les nœuds vers le haut de 0,3 à 0,5 pixels. Cela rendra le brun foncé moins flou d'abord (et ensuite). Encore une fois, abandonnez au plus vite l'idée d'utiliser Stroke pour les bordures, ce n'est pas Photoshop).

Étape 06

Notez qu'il y a une surbrillance au-dessus de l'icône dans l'exemple d'image et qu'il ne s'agit pas d'une surbrillance radiante courante d'un seul pixel (la surbrillance de 1 px au-dessus de la surbrillance d'environ deux pixels est plus lumineuse que celle de 1 px ci-dessous), vous pouvez donc envisager d'utiliser un un radiateur elliptique comme Ellipse Filling obtient cet effet.

Nous sélectionnons et copions le rectangle arrondi du bas deux fois. Après avoir déplacé la position, nous obtenons deux rectangles arrondis espacés de 2 pixels l'un de l'autre. Nous utilisons la méthode de soustraction des deux chemins rectangulaires pour obtenir un nouveau chemin et le remplissons d'Ellipse (blanc 0). -100 transparence), et enfin définissez le mode de superposition de ce chemin de surbrillance sur Superposition.

Étape 07

Ajoutez un surlignage de 1 px en bas.

Étape 08

Le résultat actuel est celui indiqué ci-dessous. Faisons une pause et buvons du thé. Ensuite, nous ajouterons des détails.

Étape 09

En changeant temporairement l'arrière-plan en blanc, nous pouvons voir qu'en raison de l'adoucissement utilisé dans le triangle inversé précédent, certains pixels débordaient un peu des deux côtés de l'enveloppe.

Il existe deux méthodes pour traiter ces pixels : l'une est Aplatir en tant que Bitmap et l'autre consiste à masquer tout en conservant le chemin, car elle conserve le chemin et peut être modifiée ultérieurement si nécessaire. ci-dessous:

Étape 10

Revenons au fond sombre. Avez-vous l'impression que les côtés de l'enveloppe sont un peu plats ? Utilisons un remplissage à barres ou radial pour ajouter un peu d'effet.

Étape 11

Ensuite, ajoutez des reflets d'un seul pixel aux triangles supérieur et inférieur de l'enveloppe. Étant donné que l'opération de soustraction de chemin (Punch Path, vous pouvez la trouver dans le menu Modifier – Combiner les chemins) a déjà été discutée à plusieurs reprises, je ne l'expliquerai pas. ici, comme indiqué ci-dessous :

Étape 12

De la même manière, ajoutez des reflets au triangle ci-dessous.

Étape 13

Le fond étant de couleur plus foncée, nous pouvons envisager d’ajouter une lueur. Ici, nous n'utilisons pas le filtre de projection ou de luminescence de FW, mais utilisons Path Pourquoi ? Parce que c'est plus facile à contrôler, juste une préférence personnelle. Nous pouvons créer un nouveau rectangle arrondi 1px plus grand en haut, en bas, à gauche et à droite que le rectangle arrondi inférieur de l'enveloppe, sans contour progressif et avec une transparence de 30.

Étape 14

Ajoutez ensuite un surlignage de 1 px ci-dessous.

Étape 15

À ce stade, l’icône est pratiquement terminée et nous entrons maintenant dans la phase de polissage. Nous sélectionnons tous les calques et les « copions », puis appuyons rapidement sur Ctrl+Alt + Maj+Z pour aplatir les calques en bitmaps, puis définissons le mode de superposition sur Superposition et la transparence sur 60, afin que nous puissions voir la saturation de L'icône. Le degré et le contraste ont été améliorés. C'est ma méthode préférée pour un polissage rapide, mais elle n'est pas applicable à tout moment, vous devez utiliser manuellement les filtres intégrés de FW pour ajuster des paramètres tels que les courbes, le contraste, et la saturation.

Finition

L'effet final (le triangle sous l'enveloppe utilise Path comme projection)