Share
Ce didacticiel fournit des exemples de techniques de création de texture de bois et de tissu. Nous allons également apprendre à reproduire la lumière sur les objets à l’aide du masque d’opacité, de l’outil de fusion et des formes d’art. En étudiant ce didacticiel étape par étape, vous apprendrez tous les secrets de la création de design d'icônes professionnel..
Les icônes pour les applications iOS ont une taille typique. Même si nous allons utiliser un éditeur de vecteur, l’icône sera créée à la taille prédéfinie requise. Comprendre ce qui précède nous permet de créer un graphique professionnel, d’éviter la création de détails impairs, qui ne seront jamais visibles à l’échelle réelle, ou qui pourraient affecter sa vue générale.
Aujourd'hui, nous allons créer une icône de la taille de 512 x 512 px. Cette taille est utilisée pour l'affichage dans iTunes, y compris CoverFlow et l'App Store. Le style rétro est considéré comme l’une des directions sophistiquées du design moderne. J'ai donc décidé de faire de Radio App Icon un poste de radio de style rétro datant du milieu du siècle dernier..
Nous allons commencer par utiliser l'outil Rectangle arrondi pour façonner la forme de l'icône avec la taille requise et le rayon d'arrondi, comme indiqué ci-dessous..
Remplissez le formulaire avec une couleur marron foncé.
Tous les objets seront colorés au cours du processus de création d’icône, mais il est nécessaire de déterminer à l’avance la position de la source de lumière. Dans notre cas, la source de lumière est située en haut à droite. Les couleurs de remplissage en dégradé, la direction de l'ombre portée, la position de surbrillance et l'intensité dépendent de sa position..
L'application de certaines sources de lumière ou d'images similaires doit être évitée. En effet, notre cerveau perçoit le monde réel et les graphiques d’une manière différente; Par conséquent, si certaines sources de lumière étaient appliquées, votre image pourrait ne pas sembler naturelle et même perdre ses fonctions 3D. Nous devons utiliser notre jugement artistique pour déterminer comment afficher de la lumière sur la conception de nos icônes..
Faites une copie du rectangle arrondi et collez-le directement au-dessus du précédent (Commande + C; Commande + F). Remplissez la copie avec un dégradé linéaire composé de plusieurs couleurs marron avec des reflets clairs et foncés.
Comme vous pouvez le constater, des curseurs plus légers du dégradé sont situés à droite de cette forme, en fonction de la position de la source de lumière..
Faites une copie du dernier rectangle arrondi créé et collez-le devant. Remplissez-le avec un dégradé de noir à blanc, comme illustré dans la figure ci-dessous..
Sélectionnez deux rectangles supérieurs et créez un masque d'opacité en choisissant Créer un masque d'opacité dans le menu du panneau Transparence..
Par conséquent, nous avons obtenu une répartition inégale de la lumière dans la partie supérieure de l'image..
Faites une copie du rectangle initialement créé lors de la première étape et collez-le devant. Placez le nouveau formulaire sur tous les objets créés et remplissez-le avec un dégradé linéaire brun foncé à brun.
Sélectionnez les points A, B, C et D à l'aide de l'outil de sélection directe (A), puis déplacez-le verticalement vers le bas en maintenant la touche Maj enfoncée pour le contraindre..
Conservez l'objet sélectionné, sélectionnez Objet> Chemin> Chemin décalé, puis définissez la valeur de décalage indiquée dans la boîte de dialogue..
Remplir le rectangle avec une couleur marron foncé.
Maintenant, allez à Objet> Fusion> Options de fusion, et définissez le nombre d'étapes spécifiées affichées dans la boîte de dialogue. Sélectionnez deux formes en haut et accédez à Objet> Fusion> Créer..
Faites une copie de l'objet du haut et collez-le devant. Déplacer le nouveau formulaire à partir de l’objet de fusion dans le panneau Calques.
Remplissez-le d'une couleur marron clair.
Créons maintenant la texture du bois vectoriel. Utilisez l'outil Rectangle (M) pour créer un rectangle rempli de gris. La hauteur d'un tel rectangle doit être supérieure à celle du rectangle brun clair..
Conservez l'objet sélectionné, accédez à Effet> Esquisse> Crayon graphique et définissez les paramètres d'un tel effet dans la boîte de dialogue..
Maintenant, allez à Objet> Développer l'apparence, puis à Objet> Suivi en temps réel> Options de traçage, puis définissez les paramètres indiqués dans la figure ci-dessous..
Accédez à Objet> Développez et développez la texture vectorielle horizontalement à l'aide de l'outil de sélection (V), tout en maintenant la touche Alt enfoncée. La largeur de la texture doit être supérieure à celle du rectangle arrondi marron clair.
Remplissez la texture avec une couleur marron clair. Cette couleur doit avoir une teinte légèrement plus claire par rapport au rectangle placé en dessous..
Utilisez l'outil de déformation. Double-cliquez sur l'icône de cet outil dans la barre d'outils, ce qui ouvrira la boîte de dialogue avec ses paramètres..
Appliquer des décalages horizontaux et verticaux des grains de texture à l'aide de l'outil de déformation.
Sélectionnez la totalité de la texture et allez à Effet> Déformer et transformer> Roughen, puis définissez les paramètres de cet effet tout en observant les modifications appliquées à la texture..
Faites une copie et collez la texture devant. Remplissez la copie avec une teinte plus foncée de couleur marron et déplacez-la légèrement vers le bas. Modifier les paramètres de l’effet Roughen; définissez le mode de fusion Multiplier et diminuez l’opacité. Tous ces paramètres sont accessibles depuis le panneau Apparence.
En appliquant la technique décrite aux étapes 7 et 8, j'ai créé un type supplémentaire de texture et l'a placé au-dessus des deux précédents. À des fins de démonstration, la visibilité des deux premières textures a été désactivée, comme indiqué dans la figure ci-dessous..
Cependant, toutes les textures ensemble ressemblent à ce qui suit.
Utilisation de l'outil crayon (P) pour créer la forme de l'ombre.
Conservez l’objet sélectionné, sélectionnez Effet> Flou> Flou gaussien, puis définissez la valeur du rayon comme indiqué ci-dessous..
Appliquez le mode de fusion multiplié et diminuez l'opacité à l'aide du panneau Transparence..
Faites une copie du rectangle arrondi brun clair et collez-le devant. Placez la copie au-dessus de tous les objets précédemment créés.
Sélectionnez toutes les textures, la forme de l'ombre et le rectangle supérieur arrondi, puis cliquez sur le raccourci Commande + 7 pour créer le masque d'écrêtage..
Maintenant, l'ombre et tous les objets de la texture sont regroupés. Diminuer l'opacité de ce groupe à l'aide du panneau Transparence.
Sélectionnez la sous-couche avec le tracé de détourage dans le panneau Calques et collez-la devant.
Déplacez le chemin créé du groupe avec le chemin de détourage et remplissez-le avec un dégradé linéaire allant du blanc au gris.
Appliquez le mode de fusion multiplié à l'objet à l'aide du panneau Transparence..
Créons maintenant une échelle d’accord radio. Utilisez l'outil Ellipse (L) pour dessiner une ellipse remplie de brun foncé..
Faites une copie de l'ellipse créée et collez-la devant. Maintenez les touches Alt + Maj enfoncées, puis réduisez la taille de l'ellipse en haut à l'aide de l'outil de sélection (V)..
Sélectionnez les deux ellipses et accédez à Objet> Fusion> Créer..
Créez deux autres ellipses, comme indiqué dans la figure ci-dessous..
Utilisez l'outil Ciseaux (C) pour couper les ellipses aux points 1-8. Supprimer les segments entre eux.
Appliquez le profil approprié du panneau Contour aux segments de gauche.
Sélectionnez tous les segments et allez à Objet> Développer l'apparence. Nous pouvons maintenant remplir les objets avec des dégradés linéaires. Par conséquent, nous avons créé les reflets sur le bord de la plage de réglage.
Créez la nouvelle ellipse et remplissez-la avec un dégradé linéaire complexe, comme illustré dans la figure ci-dessous..
Ensuite, nous allons remplir les deux ellipses avec une couleur brune et un dégradé linéaire.
Créons une série d’ellipses avec des traits de différentes largeurs sans les remplir.
Sélectionnez-les et allez à Objet> Développer. Maintenant remplissez-les avec des dégradés linéaires comme indiqué dans la figure ci-dessous.
Tracez l'ellipse au centre de l'échelle de réglage.
Remplissez-le avec un gradient conique.
Des instructions détaillées pour cette création de remplissage en dégradé conique sont fournies dans mon tutoriel, accessible ici. Créer un dégradé conique avec Adobe Illustrator, en deux minutes!.
Utilisation de l'outil Plume (P) pour tracer une ligne en pente qui doit traverser le point central de l'ellipse centrale.
Utilisez l'outil Ciseaux (C) pour le couper en deux points, puis supprimez le segment central..
Sélectionnez les deux segments et allez à Objet> Développer; maintenant, remplissez les objets avec un dégradé linéaire blanc à jaune.
Sélectionnez les deux segments, copiez-les et collez-les à l'arrière. Remplissez les segments inférieurs avec une couleur gris foncé et déplacez-les un peu vers le bas.
Créons maintenant l'éblouissement. Utilisez l'outil Ellipse (L) pour dessiner une ellipse. Maintenant, tournez-le et étirez-le, puis faites glisser l'un de ses points dans la direction du centre de la gamme de réglage à l'aide de l'outil de sélection directe (A). Remplir l'objet avec une couleur jaune clair.
Après cela, dessinez une autre ellipse et remplissez-la de couleur blanche.
Définissez la valeur d'opacité sur 0% dans le panneau Transparence pour l'objet placé en bas..
Sélectionnez les deux objets, puis les ayant utilisés comme base, créez le mélange (Objet> Mélange> Créer)..
Dessinez une ellipse supplémentaire et placez-la sous tous les objets d'échelle de réglage. Remplissez-le de noir, appliquez le mode de fusion multiplication et diminuez l'opacité dans le panneau Transparence..
Passons maintenant à la création du haut-parleur du poste de radio. Utilisez l'outil Crayon (P) pour créer le formulaire présenté dans la figure ci-dessous..
Créez maintenant le cercle, sélectionnez les deux formes et appuyez sur la touche Moins avant dans le panneau Pathfinder..
Remplir le formulaire obtenu avec une couleur beige foncé.
Malheureusement, il n'est pas efficace de contourner de tels formulaires à l'aide des outils standard Adobe Illustrator. L’effet Round Corner n’est pas applicable dans de tels cas, car il déforme toute la forme.
Par conséquent, il est utile d’arrondir manuellement les angles en ajoutant les points et en les déplaçant à l’aide de poignées. Le moyen le plus pratique que j'ai choisi pour résoudre ce problème est le plug-in VectorScribe, qui permet d'arrondir facilement tous les coins à l'aide de l'outil Dynamic Corners..
Créons la texture du tissu sur le haut-parleur. Utilisez l'outil Rectangle (M) pour dessiner un rectangle d'une largeur de 1px.
La couleur de remplissage pour un tel rectangle peut être quelconque pour le moment. En laissant le rectangle sélectionné, sélectionnez Objet> Transformer> Déplacer, définissez la valeur du décalage horizontal, puis appuyez sur le bouton Copier..
Appuyez maintenant sur appliquer les touches Commande + D autant de fois que nécessaire pour recouvrir la forme du haut-parleur avec les copies rectangle..
Il est nécessaire que tous ces rectangles soient remplis de différentes teintes de couleur marron. Pour notre bonheur, cela pourrait se faire automatiquement. Utilisez le panneau Couleur pour créer des teintes de couleur marron et enregistrez-les dans le panneau Nuancier..
A présent, sélectionnez tous les rectangles, choisissez les couleurs requises dans le panneau Nuancier et démarrez le script Couleurs aléatoires. Vous pouvez télécharger ce script gratuit et obtenir des informations détaillées à ce sujet en cliquant sur le lien suivant Remplissage aléatoire des échantillons.
Conservez les rectangles sélectionnés, accédez à Effet> Déformer et transformer> Rudesse et définissez les paramètres de l'effet..
Regrouper tous les rectangles. Appliquez la technique décrite précédemment pour créer un groupe de rectangles horizontaux.
Appliquer le mode de fusion multiplié pour le groupe.
Copiez le formulaire de haut-parleur et collez-le devant, puis placez-le au-dessus de tous les objets..
Sélectionnez la texture du tissu et la forme du haut en appliquant Command + 7, créant ainsi le masque d'écrêtage..
Utilisez l'outil Rectangle (M) pour dessiner quelques rectangles, qui doivent être remplis avec un dégradé linéaire..
Regroupez-les et faites-les glisser vers le groupe avec le masque d'écrêtage du haut-parleur. Cette manipulation doit être effectuée dans le panneau Calque..
Copiez les rectangles groupés et collez-les à l'arrière. Remplissez le groupe avec une couleur grise et appliquez le mode de fusion multiplié à l'aide du panneau Transparence..
Maintenant, l'ombre est créée.
Faisons l'inscription sur le haut-parleur. Pour ce faire, j'ai utilisé la police Sf American Dreams qui peut être téléchargée en cliquant sur le lien suivant. Alors, utilisez l'outil Texte (T) et créez l'inscription "Radio".
Conservez le texte sélectionné, sélectionnez Type> Créer des contours, puis sélectionnez Objet> 3D> Extruder et biseauter, puis définissez les paramètres de l'effet présenté dans l'illustration ci-dessous..
Vous pouvez également régler l'éclairage de l'objet. Pour cela, il faut appuyer sur la touche Plus d'options dans cette boîte de dialogue..
Copiez l'inscription et collez-la à l'arrière. Remplissez l’inscription placée en bas avec une couleur grise, puis appliquez le mode Fusion multiple avec une opacité diminuée dans le panneau Transparence. Maintenant déplacez-le un peu en bas et à droite. Ainsi, l'ombre de l'inscription est créée.
Utilisez l'outil Crayon (P) pour créer la forme de la partie d'extrémité de l'ouverture dans le boîtier de la radio..
Appliquez la technique décrite aux étapes 7 à 8 pour créer la texture de cet objet..
Créez la forme de l'ombre à partir du bord droit de l'ouverture dans le boîtier de la radio et remplissez-la de couleur marron.
Faites glisser la sous-couche avec ce formulaire vers le groupe avec le masque d'écrêtage du haut-parleur..
En laissant l'objet sélectionné, accédez à Effet> Flou> Flou gaussien et définissez le rayon du flou dans la boîte de dialogue..
Maintenant, diminuez l'opacité de la forme d'ombre.
Créons maintenant l'indicateur. La technique de la création est similaire à celle décrite dans ce tutoriel. donc, je vais vous montrer les étapes de sa création pour que vous puissiez travailler à partir de.
Maintenant il est temps de créer les tuners. En utilisant l’outil Plume (P), créez un formulaire similaire au formulaire présenté dans la figure ci-dessous..
Faites glisser ce formulaire dans le panneau Pinceaux et enregistrez le nouveau pinceau en tant que motif.
Créez la circonférence et appliquez-lui le motif pinceau.
Conservez le formulaire de syntoniseur sélectionné, accédez à Objet> Développer l'apparence et échangez le remplissage et le contour..
Utilisez l'outil Ellipse (L) pour créer le cercle illustré dans la figure ci-dessous..
Sélectionnez tous les éléments du tuner et appuyez sur le bouton Unite du panneau Pathfinder..
Réduisez la forme obtenue et placez-la dans la partie inférieure du poste de radio.
La couleur de remplissage de ces formulaires peut être quelconque.
Sélectionnez le syntoniseur et allez à Effet> 3D> Extruder et biseauter, puis définissez les paramètres indiqués dans la figure ci-dessous..
Maintenant, allez à Objet> Développer l'apparence. Lesdites manipulations aboutiront à la création du groupe d'objets vecteurs réguliers. Remplissez les surfaces d'extrémité de l'accordeur avec des dégradés linéaires pour rendre la répartition de la lumière sur eux.
Créez l'ellipse sur la surface avant du syntoniseur et remplissez-la d'un dégradé radial, comme indiqué dans la figure ci-dessous..
Maintenant, créez la jante sur le syntoniseur et remplissez-la avec un dégradé linéaire.
Les reflets sur le syntoniseur sont créés à l'aide de la fusion d'objets en appliquant la technique décrite ci-dessus..
Il est possible d'appliquer une autre technique pour la création des éclats. Utilisez l'outil Crayon (N) pour créer la forme des reflets avec l'application suivante de l'effet Flou gaussien..
Ces formes reproduisent la douce illumination. Créons maintenant des regards plus intenses. Lesdites formes sont également créées à l’aide du crayon (N), mais sans appliquer l’effet de flou gaussien dans ce cas..
Utilisez deux ellipses et l'outil de fusion pour créer l'ombre à partir de l'accordeur..
Regroupez tous les éléments du syntoniseur et dupliquez-le deux fois, après avoir placé les syntoniseurs comme indiqué dans la figure ci-dessous..
Continuons avec la création des éclats sur le boîtier de la radio. Utilisez deux ellipses pour créer l'objet Blend.
Faites-le glisser vers le panneau Pinceaux et enregistrez le nouveau pinceau en tant que pinceau d'art..
Maintenant, utilisez les pinceaux similaires mentionnés pour créer tous les reflets.
Nous avons donc créé une icône de la taille de 512 x 512 px. Il est possible d'utiliser les objets existants pour créer des icônes de tailles différentes. Pour notre bonne fortune, nous avons affaire à un vecteur «sans dimension». Cependant, il est recommandé de modifier certains éléments lors du redimensionnement.
Par exemple, pour les icônes de tailles plus petites, il est conseillé de modifier l’inscription afin de la rendre plus lisible. Aussi, vous pouvez simplifier les textures et supprimer certains reflets. Chaque fois que vous appliquez des transformations, vérifiez toujours son efficacité en regardant l'icône de taille réelle..
Toute icône pour les applications iOS doit enfin avoir le format bitmap (PNG) et par conséquent, vous pouvez afficher vos illustrations en mode Aperçu pixel (Voir> Aperçu pixel) afin d'estimer la qualité du produit final..
La dernière icône est affichée ci-dessous.
Accentsconagua