Comment faire pour créer une icône Web dans Adobe Illustrator

Précédent ◈ Suivant

Vous avez toujours voulu concevoir une icône pour le web? Aujourd'hui est votre jour. Dans ce tutoriel, vous apprendrez comment concevoir des icônes web.

Étape 1 - Faites votre recherche

Comme pour tout nouveau projet, la première étape du processus de création commence par définir l'idée, une phrase ou un mot que vous voulez représenter l'utilisation des images.

Ce faisant, vous sacrifierai définissant les aspects que vous aurez besoin afin de comprendre ce qui pourrait (ou non) vous aider à façonner l'icône.

Les meilleures ressources pour ce faire comprennent:

En supposant que vous avez effectué votre travail de détective, vous devriez avoir un sens plus profond de ce qu'il est que vous voulez représenter par l'utilisation de la couleur, des lignes et d'autres formes d'images. Maintenant, vous pouvez réellement commencer à faire preuve de créativité.

Étape 2 - Démarrer Esquisser

Comme tout nouveau produit, la façon dont vous traduisez les informations que vous tenez est profondément connecté à votre personne, comme pas deux idées sont identiques. Il n'y a pas de règles, mais surtout pas de limites auxquelles vous devez adapter ou contraindre à - la seule variable vraie est votre imagination.

Que ce soit une tasse de café ou un bon vieux Nirvana (le groupe), constater que quelque chose qui est votre esprit va et qui coule de votre main et commencer à dessiner. Peu importe à quel point vous êtes, ce qui importe est que, ce faisant, vous commencez établissant la forme et les fonctions que l'icône utilisera.

Conseil: Ne jamais jeter des choses loin. Même si vous avez commencé une idée, et abandonné le long du chemin, essayez toujours d'établir un chemin, afin que vous puissiez voir les directions à partir de laquelle votre conception a émergé. Ce faisant, vous pouvez superposer des pièces d'une version à une autre et d'améliorer la qualité de la composition visuelle.

Ces deux premières étapes sont un peu général. Pour notre projet, quelques images représentant le Kindle sera suffisant réelle; il a une conception simple qui peut être facilement reproduit à l'aide des formes de base.

Étape 3 - Illustrator Commencer

Que vous ayez fait pression pixels depuis longtemps, ou tout simplement commencer, l'un des outils les plus importants est Adobe Illustrator. Je ne vais pas parler du logiciel lui-même, mais vous guidera à travers la mise en place d'un nouveau document et de commencer à construire une icône.

3.1. Mettre en place un nouveau document

En supposant que vous aviez déjà Illustrator et en cours d'exécution en arrière-plan, créez un nouveau document en appuyant sur Ctrl + n (ou ⌘ + n si vous utilisez un Mac) ou en allant à Fichier> Nouveau ... et nous allons passer par quelques-uns des paramètres cela pop-up.

Comment faire pour créer une icône Web dans Adobe Illustrator

Prénom. Celui-ci est évidente; lui donner un nom qui convient à votre projet.
Profil. Ceci est important car les graphiques conçus pour le web seront différentes de celles basées sur un profil pour l'impression. Assurez-vous de sélectionner Web dans le menu déroulant.
Nombre de plans de travail. Le Artboard selon Adobe, représente les régions qui peuvent contenir des illustrations réels. Je vais habituellement pour un plus grand artboard même si je dispose de plusieurs modèles, et les mettre sur les différentes couches afin qu'ils soient à portée de main et choisir exactement ceux que je veux voir.
Largeur et hauteur. Les mesures dont vous pouvez définir la taille artboard - dans notre cas, nous irons pour une 120 par 120 pixels.
Unités. Illustrator est destiné à être utilisé avec Internet et imprimer, de sorte que vous avez beaucoup d'options; pour ce projet, nous irons avec des pixels.
Mode de couleur. Double-vérifier que cette option convient le support que vous créez pour. RVB (Rouge, Vert, Bleu) est de couleur spécifique au support numérique, alors que CMJN (cyan, magenta, jaune, noir) est utilisé dans des projets qui impliquent l'impression. Pour notre projet, nous utiliserons RVB.

Conseil rapide. Pour en savoir plus sur les différences entre RVB et CMJN dans ce tutoriel officiel d'Adobe (qui fait un bon travail expliquant les principales différences que vous devez être au courant).

Effets raster. Il y a trois valeurs à choisir

Écran (72 ppi), qui est la valeur par défaut. Ceci est l'option standard que vous allez si vous concevoir pour le web (qui, dans notre cas, nous sommes).
Moyen (150 ppi).
High (300 ppi). Les deux dernières options sont destinées à des graphiques qui seront utilisés pour l'impression.

Conseil rapide. Maintenant que vous avez créé des illustrations, et supposons que votre conception utilise des effets dans le menu Esthétiques tels que les ombres portées. Lueur externe ou Lueur interne. vous avez besoin pour assurer la qualité. La version imprimée doit regarder aussi lisse et propre que celui sur votre moniteur. Accomplir en sélectionnant Effet> Document des effets de pixellisation paramètres et en choisissant une résolution plus élevée des cases à cocher - vous pouvez également entrer votre propre valeur dans le champ Autre.

« L'aspect croustillant de coups de pixels alignés est maintenue dans la sortie de type trame à une résolution de 72 ppp seulement. Pour d'autres résolutions, il y a une forte possibilité de tels accidents vasculaires cérébraux qui produisent des résultats lissés « .

Aligner de nouveaux objets à grille de pixels. Si vous filmez pour la conception de pixel parfait, c'est un must. Le programme instruit les objets vectoriels de s'aligner sur la grille de pixels chaque fois qu'ils sont déplacés ou mis à l'échelle, les réaligner avec de nouvelles positions.

Il est: un temps dit-it-all intro qui va combler certaines lacunes qui pourraient apparaître lors du démarrage.

3.2. Formes de base Obtenir

Tout d'abord, mettre en place un cercle qui servira de base pour la conception. Utilisation de l'outil Ellipse (L) à gauche cliquez dans Illustrator pour obtenir les paramètres Rectangle Arrondi Box et définir la largeur et la hauteur du cercle. Entrez 110px pour les deux, puis cliquez sur OK. Sélectionnez l'objet nouvellement créé et enlever la couleur de la course, et lui donner une belle lumière rougeâtres remplissage (HEX = ff7171 ou R = 255, G = 113, B = 113).

Prenez l'outil Rectangle Arrondi (situé sur la barre d'outils à gauche, au même endroit que l'outil Rectangle), cliquez à gauche sur la planche graphique et créer une forme 55 x 80px avec un rayon d'angle 5px. Utilisation des options Aligner (Fenêtre> Aligner) sélectionnez le nouvel objet et horizontalement et aligner verticalement au plan de travail. Donnez-lui un remplissage gris foncé # 606060 (R = 96, G = 96, B = 96)

Conseil rapide. Si vous venez de mettre en place le panneau Aligner, l'alignement par défaut appliquera aux objets sélectionnés. Pour aligner sur le plan de travail, regardez le coin inférieur droit, cliquez sur « Aligner » et sélectionnez Aligner Artboard.

En suivant les mêmes étapes que précédemment, créer un nouveau rectangle arrondi (largeur = 39px, Hauteur = 64px, le rayon d'angle = 1 pixel). Sélectionnez le nouvel objet et aligner horizontalement au plan de travail et le déplacer vers le haut du grand rectangle.

Avec l'objet sélectionné, changer sa couleur de remplissage à un D3D3D3 gris légèrement plus clair (R = 211, V = 211, B = 211).

Ceci est la trame de base et de l'écran qui représentera un Kindle.

3.3 Boutons Superposition

L'étape suivante doit faire avec des boutons. Sélectionnez l'outil rectangle arrondi et créer un 5 x objet 5px avec un rayon d'angle 2px. Horizontalement l'aligner sur les autres parties, et le déplacer au milieu de l'espace entre la partie inférieure de l'écran et la partie inférieure du corps (vous pouvez aussi le faire en faisant glisser et en créant un rectangle et d'aligner verticalement sur le bouton pour qu'il ). Assigner une couleur de remplissage (474747, R = 71, G = 71, B = 71), puis le copier et le coller en place (Ctrl + f / ⌘ + f). Cliquez sur le bouton double et retourner sa course avec la couleur de remplissage, laissant à 1px.

Nous avons maintenant notre bouton principal; Viennent ensuite les quatre les arrondis. Sélectionnez l'outil Ellipse (L) et de créer un 3 x 3 pixels cercle. Sélectionnez, et tout en maintenant Alt. faites-le glisser vers la gauche pour dupliquer. Ayant à la fois sélectionné, maintenez à nouveau la touche Alt (Mac ⌥Option sur), et faites glisser sur le côté droit du bouton principal. Sélectionner tous les boutons ronds et le principal. Cliquez à gauche sur le bouton central et à l'aide du panneau Aligner et les centrer verticalement. Maintenant, nous devons les espacer en place, avec tous les objets sélectionnés encore, aller dans le coin inférieur gauche de la Aligner pour distribuer l'espacement. et lui donner 4px et sélectionnez Distribution horizontale Espace.

Pour les boutons latéraux, nous allons créer un objet coin rond (Largeur = 5px, Hauteur = 30px, Rayon de = 1px), et aligner verticalement au corps principal de l'icône. Faites glisser un peu vers la droite afin qu'il chevauche. Utilisation de la forme outil de génération (Maj + m) soustraire l'intersection des deux objets et vous avez des boutons de navigation de page.

Sélectionner le nouvel objet et modifier le remplissage à 3d3d3d (R = 61, G = 61, B = 61). Dupliquer et retourner verticalement (clic droit> Transformation> Réflexion> verticale), puis aligner sur le côté droit du corps principal.

À ce stade, l'icône commence à prendre forme. Dans l'étape suivante, nous allons commencer à ajouter des détails.

3.4. Ajout de détails

Avec notre Kindle maintenant présenté, nous allons commencer à ajouter des touches de finition à l'écran. Saisir l'outil Rectangle et dessiner un objet 100 x 55 pixels. Faites pivoter en appuyant sur R. puis faites glisser un coin à la gauche tout en maintenant la touche Maj enfoncée pour obtenir un bel angle de 45 degrés. Dupliquer l'écran du Kindle et sélectionner à la fois et l'objet mis en rotation et appuyez sur Maj + M pour la forme Builder Tool. Soustraire le chemin recoupée pour une belle réflexion.

Encore une fois sélectionnez l'écran, copiez et collez-le en place, en feuilletant le remplissage avec la course et en lui donnant un gris plus foncé (3d3d3d).

Sélectionnez le corps principal du dispositif, le dupliquer et retourner à nouveau le remplissage avec sa course. A partir de la palette de couleurs sélectionnez un gris plus visible afin que vous puissiez le distinguer du reste du corps.

3.5. Ajouter une ombre

Nous allons terminer notre icône en jetant une ombre longue. Dupliquer le corps principal de l'icône (Ctrl + C puis Ctrl + f) pour coller en place. Sélectionnez le nouvel objet et faites-le glisser à un angle de 45 vers le coin inférieur droit. Nous le ferons en maintenant la touche Alt et tout en faisant glisser vers la droite, appuyez et maintenez la touche Maj afin que vous obtenez exactement à 45 degrés.

Créer un mélange entre les deux objets; aller à l'objet> Options de fusion et dans les étapes spécifiées entrer 200. Maintenant, en utilisant le même chemin sélectionnez Marque.

Les deux se sont unis en une seule forme. Aller à l'objet> Développer> OK. puis de la fenêtre Transformer, cliquez sur Unite. Ceci est une ombre de base. Donnez-lui une couleur plus foncée que le cercle d'arrière-plan, puis le masque afin qu'il ne tombe pas de la conception réelle. Changer la couleur de d85d5d (R = 216, V = 93, B = 93) de copier et coller le cercle en face de l'ombre. Sélectionnez à la fois l'ombre et l'objet ci-dessus, puis faites un clic droit> Faire masque de détourage.

Vous pouvez changer les couleurs que vous s'il vous plaît, adapter le style à vos besoins. En outre, comme nous l'avons fait tout cela en utilisant des vecteurs, nous pouvons échelle l'icône aussi grand ou aussi petit que nous voulons.

Étape 4 - Enregistrer pour le Web

Nous avons une belle icône à la recherche, mais que diriez-vous de l'enregistrer afin que nous puissions réellement l'utiliser pour ce que nous avions à l'esprit en premier lieu - le web? illustrations d'exportation en utilisant le SVG (Scalable Vector Graphics) format vectoriel basé sur XML. Les principaux avantages de l'utilisation SVG par rapport à d'autres formats (tels que PNG) sont les suivants:

Éditabilité: Vous pouvez modifier l'image à tout moment à l'aide d'un éditeur de texte.
Évolutivité: Vous pouvez facilement l'échelle des images une fois qu'ils sont en direct sur Internet sans avoir besoin de créer plusieurs versions.

Donc, nous allons aller de l'avant et de voir quelques-uns des paramètres qui viennent avec ce format. Allez dans Fichier> Enregistrer> et du Enregistrer sous, cliquez sur le menu déroulant, puis sélectionnez SVG (* .SVG) - ne pas oublier de cliquer sur la case Utiliser de manière à Plans de travail enregistre uniquement les éléments sur votre plan de travail. Vous devriez obtenir une fenêtre pop-up - cliquez sur l'option de plus pour voir l'ensemble des options. Allons-y par chacun d'eux:

Type: contrôle les polices sont ainsi intégrées dans le fichier réel. En général, si vous avez du texte, Adobe recommendsSVG, mais cela a des inconvénients et n'est pas pris en charge par Firefox.

Subsetting. En utilisant SVG vous pouvez enregistrer un sous-ensemble de glyphes (caractères) dans le fichier réel (ce qui augmentera la taille, mais vous permettra de modifier le contenu) mais nous allons aller avec seulement Glyphes utilisés parce que notre conception ne comprend pas le texte.

Après avoir sélectionné toutes les options ci-dessus, cliquez sur Enregistrer.

Conseil: Pour plus d'informations sur le reste des options d'enregistrement s'il vous plaît visitez ce lien.

C'est une enveloppe!

J'espère que vous avez apprécié ce tutoriel, et a réussi à apprendre à construire des icônes dans Illustrator. Ces techniques peuvent être appliquées à tout projet, peu importe le sujet.