Share
Les icônes font partie intégrante d'une conception d'interface utilisateur graphique (GUI). Pendant des années, j'ai téléchargé, acheté et créé des icônes, puis un jour, j'ai décidé de créer mon propre jeu d'icônes utilisable. Quelque chose pour aider les autres concepteurs d'interface graphique à rendre le travail plus rapide et meilleur. Cet article explique en détail le processus de création et les phases que je traversais avec ce projet, et peut vous guider lorsque vous décidez de faire quelque chose de similaire. Je suis passé par plus d'un chemin créatif avant de finaliser cette police "GUI Design Icons".
Comme cet article est un peu plus long, je l’ai divisé en chapitres. Vous pouvez utiliser ces liens pour accéder au chapitre souhaité..
Je dessinais depuis des siècles des croquis d'interfaces utilisateur graphiques, et cette idée était toute ma pensée. J'ai pensé créer une règle - un pochoir - avec chaque icône fréquemment utilisée dans la conception d'interface graphique.?
Regardons les choses en face - j'ai raté la chance d'être le premier. Quelqu'un d'autre l'avait déjà fait. J'ai trouvé une belle règle en acier inoxydable (pochoir) de DesignCommision (voir photo), que vous pouvez acheter sur uistencils.com.
Je l'ai immédiatement commandé. Après l'avoir vu en direct, j'étais encore plus déterminé à en créer un par moi-même. Mon idée était d'exécuter cela un peu différemment - avec du plastique. Il n'y a rien de mal avec l'acier inoxydable. C'est brillant, moderne, c'est sympa. Mais vous ne pouvez pas le voir, les bords sont tranchants, cela détruit les crayons et vous gratte les doigts (ce n’est pas si grave, mais travailler avec ce n’est pas très confortable).
Au début était un papier, des charges de papier, des crayons, des feutres et beaucoup de temps. Pendant ce temps (en dehors du temps du dessin), j'explorais diverses interfaces graphiques, cherchant ce qui pouvait être utile, et je me suis retrouvé avec de nombreux papiers remplis de dessins. Vous pouvez également les voir ici (cliquez pour agrandir la photo). Une fois que j’ai décidé que j’avais assez de croquis, j’ai marqué toutes les icônes que je pourrais essayer de recréer sur ordinateur. C'est là que j'ai sauté dans la deuxième phase.
Le temps nécessaire pour les croquis n'était rien comparé au temps passé dans Adobe Illustrator. Comme vous pouvez le constater, les icônes sont assez simples, mais vous devez vous soucier de la précision maximale, le moins de points possible (pas de points inutiles) et, ce qui est le plus important, la cohérence du style..
Si vous examinez de près la règle de DesignCommision, il s’agit de la plus grande imperfection: les icônes n’ont pas de style unifié. La plupart des icônes sont simples, mais les icônes utilisateur ont un aperçu très détaillé. La plupart des icônes ont une taille similaire, mais le bouton de lecture est trop gros (et trop large). La plupart des icônes sont composées de lignes droites, mais les icônes "i" et "book" sont arrondies de manière déraisonnable ... et ainsi de suite..
Laissez-moi vous montrer comment créer deux icônes: l’icône de cadenas et l’icône de chargement de l’animation. Au début, j'ai créé deux des guides (assez au hasard) dans le document - et j’ai essayé de conserver la taille des icônes le long de ces guides. Non pas que chaque icône soit du premier au deuxième guide, mais pour garder à peu près la même échelle.
Le plus rapide à créer des icônes est d'imaginer l'icône comme un composé de formes de base. Il est toujours plus rapide de supprimer la moitié d'un cercle que de dessiner le demi-cercle à la main (avec l'outil Plume). Réduire au minimum le travail avec l'outil Plume vous aidera à créer des formes précises dans un court laps de temps. Au lieu d'utiliser l'outil Plume, essayez de penser aux formes de base utilisées et aux outils Pathfinder pour les séparer au besoin.
L’icône cadenas déverrouillée est encore plus simple (et rapide) à créer.
Ne pensez pas que vous pouvez tout rendre parfait du premier coup, tout comme les icônes de cadenas. En fait, j'ai imprimé beaucoup de papiers pour voir les icônes en plus grand format et sur du papier (croyez-le ou non, le papier est encore meilleur pour les ajustements). Après cela, j'ai ajouté quelques détails, ajusté certaines zones et supprimé certaines parties. Et ensuite appliqué ces modifications dans Illustrator.
Les images ci-dessous montrent mon processus. Après avoir imprimé les icônes dans une taille plus grande, j'ai choisi le marqueur de la même couleur (ne demandez pas pourquoi le gris, je l'aime juste) et ajouté quelques parties pour lesquelles je n'étais pas satisfait. J'ai également
marqué d'autres imperfections avec un marqueur rouge (comme un changement de taille, de poids du trait, etc.). Pour effacer, J'ai utilisé du ruban correcteur blanc ou juste un morceau d'autocollant blanc.
Comme vous pouvez le voir ci-dessous, les icônes simples ne sont que des lignes de longueurs et d'angles variés, mais avec le même poids..
Revenons maintenant à la création. Voyons comment créer une autre icône - utilisée pour le chargement des animations.
Ajuster cette icône est encore plus simple car il est créé à partir de deux lignes seulement. Il vous suffit de:
L'un des principaux avantages de ces icônes aurait dû être la possibilité de les combiner. Par exemple, placez un petit signe plus à côté de l’icône utilisateur pour afficher une icône ajouter un utilisateur, ou une petite croix sur l’icône du dossier pour créer un supprimer le dossier icône. Etc. Vous trouverez ci-dessous un exemple de loupe que vous pouvez combiner avec un signe plus ou moins.
Mon plan initial consistait à ajouter des chiffres, qui pourraient par exemple être placés sur l'icône du calendrier ou dans l'icône de la bulle de commentaires..
Voici à quoi ça ressemble dans Illustrator - icon, dans / sur / à côté duquel j'ai placé quelques exemples de petites icônes pour tester l'apparence.
Pour éviter la confusion entre l'icône qui est dessinée et celle qui vient d'être copiée, j'ai remplacé la couleur de celle copiée par un gris plus clair..
Et maintenant pour tester…
… Et imprimer, ajuster et changer.
Je mentionnerai brièvement une fonction très utile dans Adobe Illustrator. Les planches d’art, introduites dans Illustrator CS4, vous permettent d’avoir plusieurs pages dans un même document. Vous pouvez dire - rien de nouveau dans les produits concurrents, mais envisagez la possibilité de tailles différentes des pages et de positions différentes. Vous pouvez ajouter les pages au fur et à mesure que vous ajoutez les pages dans votre travail. Et donc j'ajoutais et ajoutais les planches d'art…
… Et je déplaçais les icônes inutilisées sur le côté, tout en déplaçant les dernières dans les nouveaux planches.
Cela m'a beaucoup aidé, en particulier pour l'impression et les corrections. Sans plan de travail, je devrais utiliser des calques ou un gros document (mais vous ne pouvez pas imprimer une partie de cette grande toile facilement).
Je voulais que la règle soit vraiment polyvalente. Je pensais à tous les moyens possibles pour le rendre encore meilleur. Par exemple, en ajoutant des lignes de division. Dans Illustrator, c’est très simple: tracez une ligne, puis ajoutez un effet Zig Zag pour créer une ligne dentelée (a), une ligne en zigzag (b), définissez correctement les options de la fenêtre Trait pour que les lignes soient pointillées (c), ou en pointillé (d).
Peut-être avez-vous remarqué que, lors de la création de l'icône de cadenas, nous avons laissé le trou de la serrure en blanc; il ressemble donc au trou, mais ce n'est pas le cas. Vous pouvez simplement le détecter en modifiant la couleur du calque sous-jacent.
Cela n'avait pas d'importance auparavant, mais pour le produit final, nous avons besoin d'icônes d'une seule couleur, sans trait ni effet, et idéalement d'un seul objet. Pour ce faire, nous allons utiliser deux fonctions Développer l’apparence et Développer et la palette Pathfinder. Voici le processus:
Si nous nous déplaçons des dizaines de jours plus tard, nous entrons dans la phase où toutes les icônes sont terminées et préparées de cette façon. J'ai donc créé un nouveau document de la taille de la règle de gabarit et commencé par placer ces icônes. En prime, j'ai ajouté quelques boutons.
Comme c'est une règle de pochoir qui sera découpée, les icônes ne peuvent pas avoir flottant parties - parce qu'il n'y a aucun moyen de le faire. Comme vous pouvez le voir sur l'image suivante, si vous voulez faire quelque chose comme moi, vous devez effacer ces parties (parties croisées) ou joindre ces parties avec des lignes fines (encerclées)..
Voici ces "lignes de jonction" en détail - voir l'icône de l'antenne. Vous pouvez également remarquer que l'icône de remplissage de la batterie est déjà supprimée..
La règle dans son aspect final dans Illustrator ressemble à ceci. Tout ce dont j'avais besoin était simplement de trouver quelqu'un pour le fabriquer.
J'ai envoyé de nombreux courriels pour trouver la bonne entreprise. Au début, il est apparu qu'il n'y aurait aucun problème à le fabriquer. Puis j'ai découvert qu'il y avait un problème et un gros. Les icônes étaient trop petites (parfois, le laser découpe la mauvaise partie). La règle entière était trop épaisse (parfois trop épaisse pour y mettre un crayon) et le nombre de coupes rendait le prix du produit final irréaliste..
Après l'enthousiasme initial, je n'avais qu'un échantillon, de nombreux papiers imprimés et une aversion pour faire autre chose avec ce projet. J'ai donc mis ce projet en attente, car il y avait beaucoup plus de choses agréables à faire…
Après quelques mois d'abandon, j'ai recommencé à penser au projet. La règle est partie, que dire de quelque chose d'autre avec ces icônes? Qu'en est-il d'une police, quelque chose comme Enroulements, mais avec le style? le
L'enthousiasme était de retour et je travaillais encore. Comme vous le verrez dans un instant, créer une police à partir d'icônes préparées est amusant.
Pour le travail de police de caractères, il était nécessaire de créer un autre document (avec une seule planche graphique), de taille 1000 par 1000 points..
Après cela, j'ai commencé à copier les icônes du document d'origine dans des calques distincts et j'ai redimensionné ces icônes pour les adapter à la taille du document (pour remplir correctement le document). Puisque toutes les icônes étaient déjà sans traits et effets, redimensionner était une question d'un simple clic. En plus de placer les petites icônes au milieu du document, utilisez simplement la palette Aligner. Sélectionnez Align to Artboard, puis cliquez sur Horizontal Align Center et Vertical Align Center pour tout aligner..
J'allais maintenant montrer les grandes icônes une par une et les placer au bon endroit face à de petites icônes (au cas où ces grandes icônes pourraient être combinées avec de petites icônes). Je l'ai fait à la main. Comme vous pouvez le voir sur l'image suivante, l'icône des commentaires est déplacée vers le bas, tandis que l'icône du document est déplacée vers le haut. La dernière partie de la photo montre l'icône du calendrier avec toutes les petites icônes montrées pour éviter le chevauchement des contours.
L'icône de feu montre que nous avons un document de 1000 par 1000 pt, mais dans de rares cas, nous pouvons dépasser les limites. Pour l'icône de signet (et quelques autres icônes spéciales), nous n'avons pas besoin de nous soucier de toutes les petites icônes. Dans le trou latéral, nous ne pouvons placer qu'un signe plus, un signe moins et une flèche.
Exporter des icônes pour FontLab
Une fois que toutes les icônes ont été placées au bon endroit, il était temps de les extraire d'Illustrator. Bien sûr, ils peuvent être utilisés dans un logiciel de création de polices (dans notre cas, FontLab, mais c'est la même chose pour tous les autres logiciels)..
Effectuer cette opération à la main pendant près de 200 icônes nécessiterait des heures de travail. Pourquoi faire cela si vous pouvez utiliser un script? Ce n'est pas une partie d'Illustrator, mais j'ai utilisé un script. Qui est disponible pour ceux qui commandent la police.
Travailler avec le script est vraiment facile. Chargez-le, lancez-le et tous les calques sont exportés sous forme de fichiers EPS. Et nous en avons fini avec Illustrator.
En effet, créer une police dans FontLab n’est pas pour un article, mais pour un gros livre. Mais créer une police "dingbats" à partir d'icônes EPS préparées est facile. Comme vous le verrez, tout autre logiciel de création de polices ferait l'affaire, car il nous suffit de charger les fichiers EPS en caractères individuels et de définir la largeur..
Au début, nous avons une nouvelle police vide.
Pour créer un nouveau caractère, double-cliquez dans une zone, puis définissez la taille (largeur) sur 1000 (comme dans Illustrator)..
Importez le fichier EPS souhaité et… c'est tout.
La procédure est un peu différente avec de grandes icônes. Nous voulons les montrer derrière les plus petits, il faut donc qu’ils n’occupent aucun espace. Par conséquent, nous définissons leur largeur sur zéro.
Un test rapide avec la fenêtre de prévisualisation montrera si cela fonctionne correctement. Dans la fenêtre d'aperçu, j'ai commencé par le caractère "k" (icône du dossier, qui devrait avoir une largeur nulle). Cela signifie que le deuxième caractère "V" (icône de rechargement) commence à s'afficher à partir du début, et donc sur l'icône précédente..
Et c'est tout. Après une heure de clic sur la police est prête, il ne reste plus qu'à définir le nom et à l'exporter..
Les photos suivantes montrent les tests des aperçus à partir de Microsoft Word.
Et maintenant nous avons une police complète.
Merci d'avoir parcouru un article aussi long. J'espère que vous avez appris quelque chose de nouveau et d'inspirant aujourd'hui. Comme vous pouvez le voir dans l'article, mes plans initiaux étaient très différents, mais la police qui en a résulté était excellente. Parfois, vous commencez dans une direction créative et finissez par emprunter un chemin créatif différent..
La police "GUI Design Icons" est disponible à l’achat sur myfonts.com.
Abonnez-vous au fil RSS Vectortuts + pour rester au courant des derniers tutoriels et articles sur les vecteurs.
Accentsconagua