Share
Shopping pour une nouvelle icône? Cherchez pas plus loin. Apprenez à créer une icône de panier personnalisée pour votre prochain projet de conception Web. Nous allons combiner les qualités 3D avec un look plat. Vous aurez besoin d'une solide compréhension des outils Adobe Illustrators pour suivre ce didacticiel..
Vous trouverez ci-dessous la conception finale sur laquelle nous allons travailler.
Commencez par sélectionner l'outil Rectangle (M) et dessinez un rectangle avec un trait de 4 points. Assurez-vous que vous utilisez une couleur claire pour le trait afin que vous puissiez voir ce que vous faites lorsque vous appliquez l'effet 3D. Ne pas appliquer de remplissage au rectangle.
Allez à Effet> 3D> Extruder et biseauter. Donnez à votre forme une rotation pour les axes X, Y et Z et une profondeur d'extrusion d'environ 16. Cliquez sur OK. Copiez et collez cette forme à utiliser pour l'étape suivante.
Dans la palette Apparence, double-cliquez sur 3D Extrude & Bevel. Entrez une profondeur d'extrusion beaucoup plus élevée et cliquez sur OK..
Placez les formes les unes sur les autres et faites en sorte que la forme du haut ou du bas soit légèrement plus petite ou plus grande que l'autre. De cette façon, vous pouvez voir que le panier est composé de deux formes. Voici à quoi devrait ressembler votre oeuvre d'art maintenant.
Pour pouvoir manipuler plus avant la forme, vous devez d’abord accéder à Objet> Développer l’apparence. A l’aide de l’outil de sélection directe (A), faites glisser pour sélectionner les points tels que surlignés ci-dessous. Déplacez les points un peu vers l'intérieur de sorte que le panier entier est un peu plus maigre en bas.
Veillez également à déplacer les points autour du bord supérieur du panier..
Nous appliquerons un dégradé bleu à noir sur notre panier. Lorsque vous travaillez avec le noir, veillez à utiliser un noir dont les valeurs sont nulles pour R, G et B. Cela vous donnera un noir beaucoup plus riche..
Sélectionnez la face du panier et allez à Objet> Chemin> Chemin décalé. Entrez environ -10 et cliquez sur OK. Cela créera une zone interne avec les mêmes proportions de la forme plus grande. On peut ensuite appliquer deux formes différentes aux formes pour donner au panier plus d’intérêt visuel.
Donner à l'autre face du panier le même traitement de chemin offset.
Si vous souhaitez que vos dégradés soient cohérents sur plusieurs formes, assurez-vous de sélectionner les deux formes en même temps. J'ai créé l'aspect d'une surface très réfléchissante en modifiant brusquement la couleur du dégradé. Obtenir une réflexion réaliste prendra quelques expériences.
Sélectionnez la zone interne sur la face du panier et sélectionnez Edition> Modifier les couleurs> Ajuster la balance des couleurs. Entrez 5 pour chaque valeur et cliquez sur OK. La couleur bleue sera 5% plus claire sur la zone sélectionnée et donnera l’impression d’un changement subtil de la surface de l’objet..
Voici à quoi ressemblera votre oeuvre d'art maintenant.
Continuez à donner au reste du panier des gradients. Observez comment l'aspect réfléchissant n'est pas trop exagéré. J'ai tendance à ne pas donner plus d'un changement de couleur brusque à chaque face du panier. Mais bien sûr, les règles étaient faites pour être enfreintes. Continuez simplement à essayer différents angles et intensités de couleur jusqu'à ce que cela vous corresponde. Notez également que l’intérieur du panier n’utilise pas beaucoup la réflexion, mais uniquement un dégradé sombre à clair..
Faire les trous qui traversent le panier est plus facile que vous ne le pensez. En utilisant l’outil Plume (P), dessinez une forme similaire à celle ci-dessous. Assurez-vous de suivre les lignes du panier. Essentiellement, assurez-vous que vos lignes supérieures sont parallèles aux haut et bas du panier et que vos lignes latérales sont parallèles aux côtés du panier..
Copiez et collez la forme et superposez-les comme indiqué ci-dessous. Dans Pathfinder, sélectionnez Soustraire de la zone de forme, puis Développer..
Il vous restera une forme qui ressemble au bord d'une fenêtre.
Comme la forme de la fenêtre principale est toujours présente dans le Presse-papiers, appuyez sur Option + F pour coller la forme de la fenêtre exactement à l'endroit où vous l'avez copiée. Vous pouvez maintenant utiliser cette forme pour créer les autres fenêtres. La forme du panier diminuant vers le bas, vous devrez ajuster chaque fenêtre légèrement afin de leur donner une apparence correcte. Utilisez l'outil de sélection directe pour ajuster chaque forme de fenêtre.
Dessinez les fenêtres sur l'autre face du panier.
Sélectionnez chaque forme de fenêtre sur la face d'un côté du panier et donnez-leur un dégradé brun à noir simultanément. Cela garantira que le dégradé est uniforme et cohérent sur toutes les fenêtres.
Pour que les cases qui vont à l’intérieur du panier dessinent d’abord une forme carrée.
Allez à Effet> 3D> Extruder et biseauter. Entrez les variables ci-dessous et cliquez sur OK.
Copiez et collez les boîtes plusieurs fois et modifiez la profondeur d'extrusion pour obtenir différentes hauteurs de boîtes..
Pour continuer à travailler avec les boîtes, vous devrez les développer en allant dans Objet> Développer l'apparence. Très important: dissociez toutes les cases jusqu'à ce que vous ne puissiez plus les dissocier. Pour dissocier les boîtes, allez à Objet> Dissocier.
Ensuite, faites pivoter les cases pour les placer sous des angles légèrement différents. Donnez-leur un dégradé brun chaud en veillant à faire varier la luminosité de chaque côté de la boîte pour créer un aspect plus réaliste..
Ajoutez un peu plus de détails en copiant / collant le haut de la boîte et en utilisant l'outil Sélection directe pour remodeler l'objet afin qu'il ressemble à un morceau de ruban adhésif. Remplissez la forme avec du blanc et ajustez l'opacité dans la palette de transparence à environ 10%.
Allez à Objet> Chemin> Chemin de décalage et entrez -5, puis cliquez sur OK..
Sélectionnez la forme intérieure et ajustez le dégradé de manière à ce qu'il ne se mélange pas à l'autre forme derrière celle-ci..
Un moyen rapide de donner l’impression que les boîtes se trouvent dans le panier consiste à leur appliquer un masque de découpage..
À l'aide de l'outil Plume, tracez une ligne où se trouve la ligne en pointillé. Votre ligne n'aura pas besoin d'une couleur de remplissage ou de trait. La ligne rouge ci-dessous est juste pour la représentation.
Assurez-vous que la forme que vous venez de dessiner est devant les cases. Sélectionnez toutes les cases et sélectionnez la forme du masque, puis sélectionnez Objet> Masque d'écrêtage> Créer. Vos boîtes vont instantanément ressembler à l'intérieur du panier!
Si vous souhaitez éditer davantage la couleur ou la forme des cases, double-cliquez dessus pour entrer dans ce que l'on appelle le mode d'isolation (Illustrator CS3 et versions supérieures) et les ajuster à votre guise..
Créez des points forts sur le panier en dessinant d'abord une forme de base à l'aide de l'outil Plume. Allez à Effet> Flou> Flou gaussien et entrez une variable qui vous va bien.
Copiez et collez tous les éléments jusqu'à présent. Sélectionnez la copie que vous venez de faire et dans la palette Pathfinder, sélectionnez Ajouter à la zone de forme puis sur Développer..
Donnez à cette forme un trait épais. Définissez les majuscules sur Arrondir et rejoindre comme indiqué ci-dessous. Donnez ensuite à la forme une ombre portée en sélectionnant Effet> Styliser> Ombre portée..
Mettez la forme derrière tout le reste.
Vous pouvez facilement transformer cette icône en un ensemble en modifiant les fenêtres en dégradé de bleu à noir et en faisant une flèche à partir d’un triangle et d’une forme carrée..
Le voici, les icônes du panier final.
Accentsconagua