Comment créer des icônes parfaites de pixel
Pourquoi Perfect Pixel est important?
Les icônes sont la clarté et de la communication. icônes Blurry ne peuvent pas communiquer aussi bons que les pointus. Aussi simple que cela. Imaginez si les panneaux de signalisation étaient floues, quel gâchis qu'ils font!
Lorsque vous travaillez avec des icônes plus grandes (> 64px), les bords flous regardent généralement inesthétique, et si vous avez besoin de les utiliser sur une plus petite échelle (16px - 32px) ils pourraient même être méconnaissable. Et vous ne saurez jamais comment votre client utilisera ces icônes à l'avenir. Donc pixel parfait est le chemin à parcourir!
Chaque concepteur d'icônes doit savoir comment créer des icônes parfaites de pixels. À un certain moment dans l'avenir, ces compétences pourraient devenir moins importantes que les résolutions sur nos appareils sont de plus en plus. Cependant, pour l'instant il est un must absolu, ou une super-puissance pour chaque concepteur icône là-bas!
Au début de ma carrière d'iconographe, je luttais avec faire mon pixel icônes parfait. Parfois, il était un échec après un échec, mais maintenant, avec toute l'expérience derrière mon dos, je peux dire avec fierté que mes icônes sont tranchantes comme l'enfer! J'ai appris l'importance de la conception parfaite de pixel à la dure, mais il valait vraiment la peine.
Maintenant, je ressens le besoin de partager cette expérience. Permettez-moi de vous montrer ma façon de faire des icônes parfaites de pixels.
Partie 1: Mise en place du document
Donc, vous voulez faire des icônes parfaites de pixels. Génial. La première étape que vous devez prendre est de créer un fichier Illustrator correct.
Il y a 3 éléments clés dans la création de pixel approprié parfait document Illustrator: dimensions Artboard, unités et aligner tous les nouveaux objets sur la grille de pixels.
Dimensions
La largeur et la hauteur doit être un nombre pair. Assurez-vous que vous ne laissez pas non plus de ces caractéristiques par une virgule (par exemple 64,23 px).
taille Artboard appartient aux icônes que vous créez. Il pourrait être de toute taille standard: 16 x 16; 28 × 28; 30 × 30; 40 × 40; 48 × 48; 64 × 64; 96 × 96; 128 × 128, etc.
S'il vous plaît notez que tous les chiffres sont encore! C'est la façon dont ils devraient être.
Pixels. Voilà pourquoi il est appelé pixel parfait, pas millimètres parfait
Aligner de nouveaux objets à grille de pixels
Ok, celui-ci est très important. Allez vérifier cette fonctionnalité. Une fois qu'il est vérifié, tous les objets nouvellement créés se cassera automatiquement au pixel le plus proche.
Préférences Illustrator
Merveilleux, maintenant, quand vous avez un bon document, il est temps de régler certaines des préférences de l'illustrateur. Tout d'abord, allez à Illustrator> Préférences> Général (ou appuyez sur Cmd + K si vous êtes un utilisateur macbook)
Changement clavier incrémenter 1px. De cette façon, lorsque vous vous déplacez vos icônes ils resteront dans la grille de pixels.
Comme vous l'avez sans doute compris, nous mettons toutes les valeurs de pixels. Allez dans le menu Unités et changement général et les valeurs de trait aux pixels. Type peut rester en points, parce que vous utilisez rarement des polices dans les icônes
C'est tout!
Vous avez mis à jour votre Adobe Illustrator qui en fait une véritable usine d'icônes. Pourtant, il y a beaucoup plus que vous devez savoir sur les icônes de pixel parfait si vous voulez clouer. Passons maintenant à la partie suivante!
Partie 2: Trucs et astuces sur la façon de concevoir les icônes de pixel parfait.
Donc, maintenant lorsque votre pixel fichier Illustrator parfait est bien huilée et en douceur-travail, nous pouvons passer à la création du premier lot d'icônes parfaites de pixels. On y va?
Avoir un dossier préparé ne suffit pas de faire de grandes icônes. Il y a beaucoup de différents conseils et des techniques pour vous aider à créer des icônes vives. Aujourd'hui, je vais passer par quelques plus importants. Ces astuces vous rapprochera de devenir le maître des icônes parfaites de pixels. Sans plus tarder, nous allons commencer!
Utilisez ensemble des mesures de l'objet.
Ceci est la clé pour créer des icônes parfaites de pixels. Assurez-vous que toutes les dimensions, la taille des objets, coordonnées de positionnement, la largeur de course, etc. sont des nombres entiers. Chaque mesure unique. Évitez tout dessin à main levée. Au lieu de cela, choisissez un outil d'objet (ellipse, rectangle, etc.) et cliquez sur l'écran. Entrez vos dimensions de l'objet manuellement. Et encore une fois - pas des virgules!
Tous les chiffres devraient être encore.
Lorsque vous travaillez sur vos icônes, essayez de garder votre taille de l'objet et des mesures de largeur dans les nombres pairs (2, 4, 6, 8, 10, 12, etc ..). Les icônes sont destinés à être redimensionnée, de sorte que vous les créez imaginer sur une grille de 64 × 64 et faire un objet 15px x 21px. Lorsque vous redimensionnez votre icône à 32 × 32 (la moitié), cet objet deviendra 7,5px x 10,5px, ce qui se traduira par une icône floue.
Et ne pas oublier sur l'utilisation de mesures correctes de l'objet. Encore une fois: le principal principe de conception parfaite de pixel - ne pas utiliser de virgules! Jamais.
Faire la boîte transformer votre meilleur ami.
Utilisez Aperçu Pixel.
Cliquez sur Affichage> Aperçu en pixels. Utilisez cette option lorsque vous voulez vérifier si tout est parfait pixel, et vous ne l'avez pas fait d'erreurs le long du chemin. (Certaines personnes aiment garder tout le temps. Je l'utilise seulement quand je veux vous assurer que tout va bien. Après cela, je reviens à la vue régulière.)
Illustrator est un logiciel vectoriel, et à moins que vous cochez cette option, il vous montrera toujours des lignes parfaitement lisses. Quand il a été vérifié, il montre une image raster, celui que vous obtiendrez après avoir sauvegardé votre fichier en tant que .png ou tout autre format raster. Vous devez zoomer et voir si vous ne l'avez pas laissé de pixels et demi. (Pour voir la taille réelle d'une icône, allez dans Affichage> Taille réelle.)
Est l'icône de votre pixel parfait?
Est-il? Si vous avez tout droit, vos icônes devraient regarder super pointu.
Il y a quelques autres nuances dans le maintien de vos icônes pixel parfait lorsque vous les exporter. Parfois, Illustrator les bousille. Pourquoi est-il arrivé? Lisez le long de découvrir!
Partie 3: Exportation des icônes à partir d'Illustrator.
Maintenant que vous avez créé un fichier Illustrator et conçu des icônes parfaites de pixels en utilisant les conseils que je vous ai données, il est temps pour la dernière partie et facile - exporter vos icônes et de montrer tout le monde là-bas merveilleux travail que vous avez fait!
Il y a beaucoup de façons d'exporter des icônes à partir d'Illustrator. Malheureusement, la plupart du temps, ils ont tendance à être floue, donc vous devez être attentif. Ces conseils et astuces vous permettra d'économiser du temps et de l'énergie et éviter le flou.
Comme on dit, il est bon d'apprendre des erreurs des autres. En ce qui concerne l'exportation du pixel icônes parfaites, je vous propose d'écouter moi et jamais à moi répéter!
Je copier mes icônes de droite Illustrator à Photoshop. Faux! Peu importe la façon dont vous étiez précis tout en faisant les icônes dans Illustrator, ils se flou dans Photoshop. Toujours.
Donc, une fois que vous avez fini de travailler sur les icônes, votre écran devrait ressembler un peu comme celui-ci (voir, chaque icône est sur son propre art à bord):
Il est temps de nommer!
Ceci est la partie où vous nommez vos icônes. Cliquez sur l'élément de menu - Conseils d'art (__gVirt_NP_NN_NNPS<__ Maj + O). Voilà comment vous gagnez le contrôle des conseils d'art. Sélectionnez l'un d'eux, et vous pouvez modifier ses préférences sur le dessus. La seule chose que nous changeons le nom est ici. Aller à chaque conseil d'art individuellement et les renommer selon l'icône à l'intérieur.
Enregistrement de vos icônes
Voici! Maintenant, la tête dans Fichier> Enregistrer sous. Entrez un nom simple et court comme « 1.svg ». Continuez votre lecture pour découvrir pourquoi.
L'étape suivante est en train de changer le type de fichier en SVG et cochez l'option Utiliser les conseils d'art. Il est nécessaire de sauvegarder toutes vos cartes d'art séparément. Puisque vous gardez toutes vos icônes dans différents tableaux d'art (avez-vous?), Il les exporter à la fois. Si vous souhaitez exporter que quelques-uns, vous pouvez vérifier Range et entrez les numéros de carte d'art que vous souhaitez exporter. Choisissez l'emplacement où vous voulez que vos icônes à sauvegarder et cliquez sur le bouton Enregistrer.
Yay, toutes vos icônes sont exportés! Il y a une chose qui reste. Chaque icône a que « 1 » dans le nom du fichier. Si vous êtes un utilisateur Mac, vous pouvez sélectionner les icônes, faites un clic droit, puis choisissez « renommer tous » et remplacer le « 1 » avec un champ vide. Pour ceux qui travaillent avec Windows, je suppose qu'il devrait y avoir une sorte d'un Renamer lot. Sinon, vous pouvez fixer les icônes manuellement.
Comment générer les PNGs de toutes tailles?
Il suffit de glisser-déposer vos fichiers SVG, et l'application va les convertir presque tous les possibles résolution PNG. Il vous permet d'économiser vraiment une tonne de temps.
Donc, si tout se passait bien, maintenant, vous devriez avoir un tas d'icônes parfaites de pixels sur votre ordinateur. Vous pouvez utiliser ces PNGs pour faire votre tir Dribbble! Icône personnelle taille de choix pour Dribbble est 96x96px. Mais vous pouvez choisir ce qui semble bon pour vous. Il suffit d'aller avec votre tube digestif.
Et que ce soit avec les icônes de pixel parfait! Espérons que les gars que vous avez apprécié et maîtriserez vos compétences le long du chemin. la perfection de Pixel prend du temps, mais il est tout à fait la peine, vous ne pensez pas?
Maintenant, je dis: « Allez expérimenter! » Essayez différentes techniques, utilisez votre imagination et de l'expérience, mais n'oubliez pas de viser toujours plus « propres » pixels, et vos icônes regarderai comme l'enfer pointu avant que vous le sachiez!
De bons spationautes chance!
