Share
Dans ce didacticiel, je vais vous montrer comment créer une illustration du cerveau de style dessin animé, puis comment convertir une image en vue de l'utiliser comme icône pour OSX et Vista. Je vais aussi aborder quelques points concernant les détails pour la conception d'icônes. Commençons!
Vous trouverez ci-dessous l'image finale sur laquelle nous allons travailler. Dans ce tutoriel, nous allons également créer une icône à partir de cela. Vous voulez accéder à l'intégralité des fichiers Vector Source et aux copies téléchargeables de chaque didacticiel, y compris celui-ci? Rejoignez Vector Plus pour seulement 9 $ par mois.
Rassemblez du matériel de référence et des images / illustrations du cerveau. Les livres médicaux sont une source parfaite. Le cerveau est aussi complexe extérieurement qu’intérieurement. Les principaux points à garder à l'esprit sont que le cerveau est une forme globalement ovale qui forme la matière grise, puis le cervelet et le tronc cérébral. En regardant de face / de dessus, le cerveau est bipolaire et se compose de deux hémisphères..
J'aime dessiner un formulaire de base sur papier ou numériquement avant de le transmettre à Illustrator. Cela est particulièrement vrai avec une forme organique, car vous ne savez pas exactement à quoi elle va ressembler, il sera donc utile d’esquisser les bases avant de passer aux vecteurs..
Lorsque vous dessinez l'aspect du cerveau, tenez compte des points suivants:
Point de vue - De quel côté allez-vous rendre votre cerveau? Une vue latérale a tendance à ne pas être aussi dimensionnelle, c'est pourquoi je vous suggère de la positionner un peu de côté pour intégrer la ligne qui sépare les deux hémisphères..
Moduler - Un cerveau ressemble presque à un grand réseau de pipes non uniformes qui ont été pliées ensemble sur une boule de spaghetti. Celles-ci des pipes ont une courbure unique, mais vous pouvez réutiliser des éléments tels que S et M zigzags en forme, T intersections et divers autres éléments dans votre cerveau; Rappelez-vous simplement de conserver la forme générale et de la gonfler par endroits. Exagérer - Nous n'allons pas pour un rendu réaliste anatomiquement correct. Utilisez les courbes pour accentuer certaines zones. Simplifier - Vous n'avez pas à faire autant de gribouillis qu'un cerveau réel. Encore une fois, nous ne faisons pas un rendu réaliste, évitez donc les détails inutiles. En effet, lorsqu’il s’agira de convertir l’image en icône, certains détails risquent d’être perdus ou brisés lorsqu’ils sont visualisés à des résolutions plus petites. J'ai même omis le cervelet et le tronc cérébral pour simplifier l'image. Cohérent - Gardez votre dessin au trait cohérent. L'épaisseur des lignes détermine la proximité et le poids des courbes entre elles, donc gardez cela à l'esprit.
Cela peut être une étape inutile pour certains, mais je passe généralement une esquisse au crayon dans Flash pour créer des dessins au trait épuré, puis je travaille à partir de celle-ci dans Illustrator, bien que vous puissiez utiliser votre flux de travail préféré..
Créez un canevas de 512 pixels par 512 pixels dans Illustrator. Importez votre esquisse sur votre toile et utilisez l'outil Plume pour créer le dessin au trait. Si vous êtes à l'aise avec l'outil Pinceau d'Illustrator ou si vous utilisez une tablette, vous pouvez l'utiliser à la place, mais les convertir en contours après. Veillez à intersecter la courbure avec la direction à l’esprit et à créer des plis et des chevauchements appropriés.
Conservez les plis extrêmes avec des extrémités pointues et pour des plis plus doux, créez des extrémités plus arrondies ou même ajoutez de minuscules plis pour soutenir la structure visuelle. Fusionnez toutes les formes en un seul remplissage à l'aide de l'outil Pathfinder Unite et renommez le calque en "dessin au trait".
Utilisez le Bucket Bool pour remplir de couleurs, puis extrudez.
Une fois tous les dessins au trait triés, utilisez l'outil Pot de peinture dynamique pour créer les remplissages. Sélectionnez le dessin au trait et utilisez une couleur rose légèrement désaturée pour la base. Ne le faites pas gris ou trop rose non plus, mais sa décision est à vous..
L'outil de compartiment étant une fonctionnalité de peinture dynamique, vos vecteurs deviennent un seul objet dans un groupe de peinture dynamique. Pour résoudre ce problème et les séparer, accédez à Objet> Peinture dynamique> Développer. Cela convertira votre groupe de peinture dynamique en un groupe normal de remplissages dans votre palette de calques. Ensuite, séparez les couleurs de rose sur un autre calque et renommez-le "base".
Nous devons ajouter quelques détails supplémentaires pour rendre le cerveau plus brillant et plus tridimensionnel en ajoutant des rehauts et des ombres. Décidez de la direction de la lumière. Dans mon cas, il est standard en haut à gauche. Créez un nouveau calque nommé "surbrillance". Maintenant, en utilisant l'outil Plume, commencez à créer des formes très arrondies face à votre lumière supposée en utilisant une couleur légèrement plus brillante que votre base..
Gardez à l'esprit que ce n'est pas censé être réaliste, mais donner une impression de brillant en ajoutant de la spécularité. Restez simple et n'ajoutez pas trop, car les couleurs se mélangeraient à des résolutions plus petites.
Bien que les rehauts soient arrondis et assez indépendants, les ombres seront adjacentes aux bords, à l'opposé des rehauts. Sur un autre calque appelé "ombres", à l'aide de l'outil Plume et d'une couleur plus sombre à la base, créez des ombres. Assurez-vous de les ajouter aux endroits où les formes du cerveau se chevauchent et se projettent des ombres..
Dupliquez vos calques et couches de base sur un nouveau calque appelé "dégradé", que nous utiliserons pour ajouter une autre fonction d’ombrage au cerveau. Utilisez à nouveau l'outil Pathfinder Unite pour fusionner le dessin au trait et le rose de base en un seul remplissage. Ensuite, faites-en un dégradé en utilisant une nuance de rose autre que celles déjà utilisées et une couleur douce. J'ai utilisé une nuance de rose avec un peu d'orange. Définissez le calque au-dessus de tout le reste et définissez le mode de fusion sur "Couleur".
La dernière étape consiste à créer une ombre sous le cerveau, strictement à l'usage des icônes. Dupliquez la couche de base et placez-la en dessous. Remplissez les formes en noir et utilisez Effets> Effets Photoshop> Flou> Flou gaussien avec une valeur de 10 pixels pour estomper l’ombre. Assurez-vous de tout redimensionner et de tout positionner de sorte que rien ne touche le bord de la toile et que l'ombre ne soit pas rognée..
Vous devriez vous retrouver avec 6 éléments principaux: "dégradé", "dessin au trait", "rehauts", "tons", "base rose" et "ombre". La dernière illustration est ci-dessous. Vous êtes maintenant prêt à convertir l'illustration en icône de fichier.!
Le dernier Mac OS Leopard et, bien sûr, le prochain Snow Leopard prennent en charge les tailles d’icône allant jusqu’à 512 pixels sur 512 pixels, alors que Windows Vista ne prend en charge que le format 256 x 256 pixels. Mac OSX prend en charge tous les types de formats à utiliser comme icône, en raison de la manière dont le système d'exploitation rend les images. Malheureusement, Windows traite le format ICO, qui n'est pas cohérent entre Vista et l'ancienne version de Windows..
Mac OSX est livré avec un utilitaire soigné appelé "Icon Composer" qui se trouve dans Root> Developer> Applications> Utilitaires. Cela fait partie des outils de développement gratuits d'Apple disponibles ici (compte gratuit requis).
Windows ne dispose d'aucun utilitaire natif que vous puissiez utiliser, mais il existe un éditeur d'icônes gratuit, IcoFX, pouvant exporter entre autres choses vers ICO..
Pour les besoins de ce didacticiel, je vais simplement utiliser l'image originale 512x512 et laisser le logiciel la redimensionner automatiquement. Les résolutions requises pour Mac OS sont 512x, 256x, 128x, 32x et 16x. Curieusement, pour Windows, ils sont 256x, 48x, 32x, 24x, 16x.
En réalité, vous éditeriez et affineriez l'icône à chaque étape, car il y a une incroyable perte de détails et, aux résolutions les plus basses, les formes seront indiscernables et vous devrez recourir à l'édition manuelle en pixels..
Si vous ne souhaitez pas vous inscrire sur Apple et télécharger les outils de développement uniquement pour obtenir Icon Composer, vous avez de la chance, car Mac OS prend en charge les PNG RGBA standard dans ses icônes. Tout ce que vous avez à faire est d’enregistrer votre fichier hors d’Illustrator au format PNG 512x512 avec transparence, ouvrez-le avec Aperçu, puis cliquez sur Édition> Copier pour copier l’image. Ensuite, allez dans le dossier dont vous voulez changer l'icône et faites un clic droit> obtenir des informations (ou Commande + I). Recherchez l'icône dans le coin supérieur gauche en regard du nom du dossier et cliquez dessus. Il mettra en évidence avec une couleur bleu clair.
Une fois que cela est mis en surbrillance, vous pouvez continuer et cliquez sur Édition> Coller. Et cela insérera le PNG que vous avez précédemment copié.
L'inconvénient est que l'image est toujours 512px par 512px, même pour les tailles plus petites qui impactent la mémoire lors de l'affichage de l'icône. Une autre est le fait que vous aurez du mal à revenir en arrière si vous avez échangé l'une des icônes du système..
Pour créer un fichier ICNS OSX natif, exécutez Icon Composer et faites glisser le fichier PNG de 512px par 512px dans le sont de la même taille. Le programme vous demandera si vous souhaitez copier et redimensionner l'image vers d'autres résolutions. Si vous souhaitez créer une image distincte pour chacun, continuez. À ce stade, je laisserai simplement l'ordinateur le redimensionner pour moi.
Vous pouvez voir qu'il y a un onglet Masques en bas. Cela vous permet d'importer une image indépendante qui gérera la transparence. Puisque nous utilisons des fichiers PNG, nous pouvons parcourir Fichier> Exporter et enregistrer un fichier ICNS..
Si vous ouvrez notre nouveau ICNS en avant-première, vous verrez qu'il s'agit d'un conteneur pour 5 images de leurs tailles respectives..
À ce stade, il est difficile d’implémenter ICNS en tant qu’icône, car vous ne pouvez pas simplement le copier et le coller dans un fichier complet. Si vous aimez la personnalisation sur votre Mac et aimez les icônes personnalisées, ou si vous êtes un concepteur qui a besoin de tester ses illustrations, je suggère un utilitaire très soigné, CandyBar. Ce n'est pas gratuit, mais en vaut la peine, si vous envisagez de prendre au sérieux la personnalisation.
Vista est différent de Windows XP. Des icônes avec compression PNG ont été introduites et sont reprises dans Windows 7, vous permettant de créer de jolies icônes avec une transparence adéquate. Windows gère les icônes dans les fichiers ICO. Ils sont l’équivalent de ICNS pour mac, qui sont des conteneurs d’images pour différentes résolutions..
Nous allons utiliser une application gratuite appelée IcoFX. Windows ne prend pas en charge les résolutions d'icône supérieures à 256 px par 256 px. Je vous suggère donc d'exporter une image 256 px directement à partir d'Illustrator afin d'éviter une compression supplémentaire..
Allez dans Fichier> importer une image pour importer votre png 256px. Utiliser les paramètres 32 bits 256x256.
Dans le panneau de gauche, cliquez avec le bouton droit de la souris sur> nouvelle image pour en importer une avec la résolution suivante. Vous pouvez continuer et effectuer une importation personnalisée au format 128x128. Puis importez le reste des images.
Une fois que vous avez toutes les images chargées, vous êtes prêt à enregistrer le fichier en tant que fichier ICO.
Pour changer l'icône d'un dossier / emplacement dans Vista, dans ce cas, je changerai l'icône "mon ordinateur". Faites un clic droit dessus, choisissez les propriétés. Si vous modifiez un raccourci, accédez à l'onglet Raccourci ou, s'il s'agit d'un dossier, accédez à l'onglet Personnaliser. Cliquez sur le bouton Choisir une icône et choisissez le fichier ICO que vous avez enregistré..
Confirmez le choix de l'image et l'icône devrait recharger dans votre image personnalisée.
Vous connaissez maintenant le processus de création d'une icône à partir de la base, à la fois pour Mac OSX et Windows Vista. Que vous lisiez le didacticiel de la section 1 pour suivre le processus d’illustration ou que vous sautiez directement à la section 2 pour voir comment convertir des images en icônes système utilisables, je vous remercie de suivre le didacticiel et espère voir de superbes images de personnalisation! Il y a beaucoup de bons endroits pour commencer.
Abonnez-vous au fil RSS Vectortuts + pour rester au courant des derniers tutoriels et articles sur les vecteurs.
Accentsconagua