Concevez une boîte de céréales à thème Vector dans Adobe Illustrator

Ce que vous allez créer

Adobe Illustrator est le repas le plus important de la journée. Je suis sûr que le petit-déjeuner vient en second. En tant que tel, nous allons combiner les deux et rendre hommage aux boîtes de céréales de notre enfance avec ce design de boîte en carton.

1. Commencez par un croquis

Étape 1

Il est important de déterminer votre personnage central et votre mise en page dans votre croquis. J'aime dessiner à l'intérieur Adobe Illustrator CC lui-même (vous pouvez également importer un croquis). En utilisant le Outil Pinceau (B) avec fidélité mis à Lisse dans le Options de l'outil Pinceau panneau et un défaut Calligraphique Au pinceau choisi, j'ai dessiné un personnage de dessin animé excité et bloqué au-dessus de lui dans le nom de la céréale. 

Pour un guide détaillé sur le dessin des mains, jetez un coup d’œil à Fondamentaux de la bande dessinée: Comment dessiner des mains de bandes dessinées par Carlos Gomes Cabral.

Étape 2

Comme il s'agit d'une boîte de céréales, n'oubliez pas de mettre en valeur le bol à céréales. Dans ce cas, nous allons dessiner (principalement) des morceaux de céréales en forme de O avec le personnage sautant hors (ou présentant) le bol (qui a été rempli à ras bord). Groupe (Control-G) ensemble vos lignes de croquis et verrouiller le groupe dans le Couches panneau, comme vous les tracerez lors de la création de votre conception finale.

2. forme la tête

Étape 1

Construire chaque partie de l'anatomie n'est pas nécessaire dans cette conception. 

1. Commencez par le visage en traçant votre croquis avec le Outil stylo (P). 
2. Le visage comprend la moitié de la tête et une oreille. Vous pouvez en dessiner des parties (tête, mâchoire et oreille) séparément et Unir dans le Éclaireur panneau.
   
3. Définissez la couleur du trait sur brun foncé afin de créer un contour, ou Copier (Control-C) et Coller (Contrôle-V) la forme de votre visage, définissez le remplissage et la couleur de trait sur brun foncé, Poids de l'AVC à 2 pts, et Aligner derrière le visage d'origine.
4. Dessinez une petite forme en forme de D pour l'autre oreille, dans un ton chair plus foncé (par rapport à la couleur chair choisie) et placez-la derrière les autres formes de tête. Pour plus d'informations sur les différents tons de peau, consultez ce conseil rapide de votre part.

Étape 2

1. Après avoir découvert les cheveux pendant la phase de dessin, je peux maintenant les tracer avec le Outil stylo.  Pensez aux cheveux comme étant en sections: frange, côtés et dos. Si vous voulez que vos cheveux soient un peu plus fluides, utilisez le Outil Crayon (N) dessiner rapidement et arrondir les bords en manipulant Coins vivants.
2. En utilisant le même ton chair foncé que celui utilisé pour l'oreille, dessinez une forme qui imite les bords des cheveux. Cela servira à projeter une ombre des cheveux sur le visage. Placez la forme sous les cheveux dans le Couches panneau.
3. N'oubliez pas une forme en C pour l'intérieur de l'oreille gauche.

Étape 3

Le visage est principalement construit à partir de formes simples combinées pour former un visage vraiment, vraiment excité.

1. Dessinez deux cercles qui se chevauchent en utilisant le Outil Ellipse (L). Si vous définissez la couleur de remplissage sur null et le tracé sur le même brun foncé utilisé pour les contours, vous pouvez alors modifier la largeur des cercles sur les bords extérieurs à l'aide de la touche Outil de largeur (Maj-W). La bouche, dessinée avec le Outil stylo, est comme une fève à la gelée.
2. Le nez est comme un point d'interrogation à l'envers ou un demi-cercle avec une petite jambe dessus.
3. Pour la langue, j'ai choisi un rose pâle et dessiné une forme qui occupe la moitié inférieure de la bouche.
4. Les dents sont des formes courbes qui suivent le contour de la bouche.
5. Copie et Coller les cercles créés pour les yeux et les remplir d'un bleu clair. Assurez-vous que l'œil gauche chevauche le droit.
   

Étape 4

Continuant avec les yeux:

1. Dessinez des cercles blancs qui chevauchent les cercles bleu clair de l'étape précédente. Si vous sélectionnez le cercle bleu clair et son homologue blanc qui se chevauchent, vous pouvez utiliser le Outil de création de forme (Maj-M) pour séparer la partie non croisée du cercle blanc (en la sélectionnant), Désélectionner, et Effacer.
2. Utilisez le Outil de largeur pour augmenter la largeur du trait de l'oeil. Dans ce cas, je Collé le cercle de contour de l'étape précédente et placez-le sur les formes blanches et bleu clair formant l'oeil droit.
3. La bouche a besoin d'un contour aussi. Copie et Coller la forme de la bouche de la base (qui se gélifie sur le côté) et régler le trait sur 1 pt de poids.
4. Pour que le nez ne semble pas transparent, tracez un demi-cercle et placez-le sous la ligne du nez, mais au-dessus des yeux dans le Couches panneau.
5. Épaissir le contour de l'œil gauche aussi et dessiner deux petits cercles pour les pupilles des yeux.
6. En utilisant le Outil Pinceau, J'ai dessiné deux petits sourcils et Étendu les sous Objet.

Étape 5

Quand vous êtes satisfait de la tête de votre dessinateur, Groupe tout ensemble. Ajouter un contour plus épais autour du texte entier (tout en conservant celui dessiné précédemment, ce qui aide à définir le début de la tête et le début de l’oreille à peine visible à droite), Copie, Coller, et Unir la tête copiée Éclaireur. Réglez le remplissage et la couleur de trait sur brun foncé et le poids de trait sur 2-3 points, en fonction de ce que vous préférez. Aligner la tête et sa silhouette et Groupe eux autres ensemble. 

3. Ajoutons un corps

Étape 1

Encore une fois, la forme du corps a été déterminée lors de la phase de dessin.

1. Les parties du corps sont les suivantes: deux mains, deux bras, un cou, une chemise et l’intérieur de la chemise. J'ai trouvé le plus facile, pour moi, de Copie, Coller, et Réfléchir le bras gauche (sur une Axe vertical) pour obtenir le bras droit. Je l'ai aussi mis à l'échelle et pivoté afin de l'adapter à l'esquisse.
2. En utilisant la technique de la section précédente, donnez au cou et aux bras un 2 pt poids contour.
3. En utilisant le même ton chair foncé que celui utilisé dans les ombres sur le visage, dessinez des formes d'ombre pour les paumes des mains, le cou et le haut des bras (où les ombres des manches sont projetées).

Étape 2

Utilisez le Outil stylo tracer des lignes sur la chemise indiquant les poignets, les coutures et le col. Groupe tout ensemble et encore une fois, Copie, Coller, Unir dans la Éclaireur panneau, appliquez un trait épais à la forme et Aligner derrière le personnage principal. Groupe tout cela ensemble et nous allons passer à créer le reste de la conception de la boîte.

4. Dessin de céréales tridimensionnelles

Étape 1

Tracez un cercle dans un grand cercle en utilisant le Outil Ellipse. Avec les deux sélectionnés, appuyez sur Minus Front dans le Éclaireur panneau. Sélectionnez votre forme de beignet plat et allez à Effet> 3D> Extrusion & biseautage… . Jouez avec la rotation ou entrez les détails suivants pour obtenir la même forme 3D ci-dessous:

• Axe X: 3 °
• Axe Y: 6 °
• Axe z: -2 °
• Profondeur d'extrusion: 34 pt
• Surface: Ombrage en plastique

Étape 2

Avec la forme de beignet 3D sélectionnée, allez à Objet> Développer l'apparence. Utilisez le Outil de sélection directe (A) sélectionner la face de la forme de céréale et régler la couleur de remplissage sur un bronzage clair. Sélectionnez tout sauf la face de l'objet et définissez la couleur de remplissage sur un bronzage plus foncé. Suivez les étapes à partir de Section 3, étape 2 donner un contour épais à la forme de la céréale. Groupe ces formes ensemble. Vous allez utiliser ce processus pour dessiner une image à plat, l'extruder, changer les couleurs de remplissage et lui donner un contour pour les autres morceaux de céréales plus loin dans ce tutoriel..

Étape 3

Copie et Coller plusieurs des "Vector O". Tourner à votre guise, ou créez-en de nouvelles versions 3D pour plus de variété dans la perspective de chaque objet céréalier. Sélectionner un groupe d'entre eux et dans le Options de modèle panneau, créer un nouveau motif. Choisir Hex par colonne ou ce qui vous donnera le plus de couverture. sauvegarder votre modèle et passez à l'étape suivante.

Étape 4

1. Dessinez une grande ellipse qui servira de sommet. Réglez la couleur de remplissage sur une crème légère (cela servira de notre lait).
2. Copie etColler cette ellipse et appliquez votre nouveau motif à celle-ci (veuillez ignorer le manque de forme de guimauve, car cela va arriver sous peu).
   
3. Coller formes de céréales autour du bol afin de couvrir tous les bords du motif et de faire ressembler le bol de céréales, il est rempli à ras bord avec de délicieux "Vector O". Utilisez le Outil stylo dessiner un bol peu profond. Seuls les côtés et le bord supérieur apparaîtront dans la conception finale. Votre appel est donc précis dans la perspective de la cuvette..
   

5. formes de guimauve!

Étape 1

La section précédente mentionnait certaines des formes de guimauve illustrées sur le thème Illustrator que nous ajoutons au bol de céréales. Travaillons sur eux. Commençons par un Outil stylo-guimauve inspirée. Dessinez la moitié de la conception, vue ci-dessous, avec le Outil stylo lui-même. Copie et Coller l'objet et Réfléchir sur un Axe vertical. En utilisant les étapes de Section 4, étape 1, Créez une version 3D de l'outil Plume et changez les couleurs de l'ombre en sarcelle foncé. Tracez un cercle au centre de la forme et Groupe ensemble. Donnez-lui un contour épais, tout comme les céréales O.

Étape 2

Pour la prochaine forme de guimauve, nous allons créer un crayon jaune. Utilisez le Outil Rectangle (M) dessiner un rectangle étroit. Arrondir les coins en le sélectionnant avec le Outil de sélection directe et en tirant le Coins vivants vers l'intérieur. Couper la forme en deux (ou plus) en traçant un rectangle dessus et en frappant Minus Front dans la Éclaireur panneau.

Étape 3

1. Utilisez le Polygone Outil dessiner un simple triangle. 
2. Aligner et Échelle si sa base a la même largeur que le reste de la forme du crayon.
3. En utilisant le Éclaireur panneau à nouveau, couper la pointe du triangle.
4. À partir de là, vous pouvez dessiner des bandes étroites sur le crayon et créer un objet 3D comme pour les autres formes de céréales..

Étape 4

Les autres formes de guimauve ont un aperçu rapide, car il en va de même pour leur création..

1. Notez comment différentes valeurs de rotation sur différents axes vous donnent des perspectives différentes pour vos guimauves..
2. La troisième forme est un pinceau. Je dessine sur la base de Outil Pinceau icône avec le Outil Crayon. 
3. La guimauve finale est la Outil de sélection rendu en vert. Il est composé d'un rectangle et d'un grand triangle en retrait.

Étape 5

Eparpillez vos guimauves et vos "Vector O" autour du motif, en vous assurant de mettre de côté et sur la main du personnage comme s'il sortait du bol et le lançait. Groupe tout cela ensemble. Vous remarquerez également que l'icône du stylo utilisé pour la guimauve bleue a également été ajoutée à sa chemise. Clairement, ce mec aime l'art vectoriel.

6. Autocollant et fond

Étape 1

Dessine ce joli autocollant situé dans le coin inférieur droit de la composition.

• Tracez un cercle avec le Outil Ellipse et remplissez-le d'une couleur jaune foncé. Aller à Effet> Distorsion & Transformation> Zig & Zag… Ajustez l'effet à votre convenance. Plus la taille est grande, plus les points s'enfoncent profondément dans le centre du cercle. Et plus il y a d'arêtes par segment, plus vous aurez de points autour de votre cercle.
• Créez un contour pour la forme de votre autocollant et assurez-vous que les coins sont arrondis en manipulant Coins vivants ou en choisissant Arrondi Casquettes et Coins dans le Accident vasculaire cérébral panneau.
• Pour le rendre brillant, dessinez un cercle avec un Gradient linéaire venir de jaune clair à 100% à 0% Opacité et incliné en haut à gauche. Supprimez toutes les parties du cercle qui ne se croisent pas de la forme de votre autocollant à l’aide des touches Outil de création de forme.
• Enfin, utilisez une police de style bande dessinée comme Arch Rival ou Toontime pour vos calques de texte..

Étape 2

Le fond est assez simple. Dessinez un grand rectangle sur la planche d’art dans "sarcelle" à l’aide du Outil Rectangle. Avec le Outil stylo, dessiner des formes longues irradiant du centre (ou presque) du dessin. Unir eux dans le Éclaireur panneau et appliquer un Radial dégradé au Forme composée allant du bleu clair au centre et bleu sarcelle aux bords. La majeure partie de votre conception couvrira les parties les plus opaques de la forme au centre.

7. Le logo

Étape 1

En utilisant une autre police de caractère comique, j'ai écrit le nom de la céréale. Cette police s'appelle Helsinki. Je recommande d'utiliser quelque chose qui est enfantin et soit arrondi ou dessiné à la main. Extrusion et biseau, tout comme les formes de guimauve étaient avant.

Étape 2

Les étapes pour créer le logo sont assez simples:

1. Développer votre texte en 3D dans Objet et Dissocier vous pouvez ainsi déplacer chaque lettre vers le haut, le bas ou la faire pivoter à votre guise.
2. Changez les visages des lettres en bleu clair et leurs couleurs d'ombre en sarcelle.
3. Échelle certaines des lettres, comme le C et le O, et certains d'entre eux, comme le E.
4. Groupe le texte ensemble une fois satisfait du placement et créer un contour par Copier, Collage, et Unissant le groupe copié dans le Éclaireur panneau. Réglez le poids de trait sur 3-5 pts et Aligner derrière le premier groupe de logos. Notez comment le texte se courbe un peu, prêt pour la conception de la boîte. 

Étape 3

Mets le tout ensemble! J'ai décidé que le personnage chevauchait un peu le logo et le texte supplémentaire de "avec des outils de guimauve" était à nouveau défini dans Arch Rival. J'ai également ajouté deux contours supplémentaires au personnage, à la cuvette et aux morceaux de céréales, afin de les distinguer davantage du fond.. 

À ce stade, avec la conception principale terminée, vous pouvez appeler ce projet bien fait. Ou bien, vous pouvez continuer à créer une maquette numérique de boîte de céréales.

8. Le panneau latéral

Étape 1

Avant de nous moquer de la conception, nous devons créer le panneau latéral de la boîte de céréales. J'ai décidé de prendre la peine de créer tous les faits sur la nutrition. Utilisez le Rectangle Outil dessiner un rectangle étroit rempli de blanc et la couleur de trait réglée sur noir et un Poids 2 pt. Pour les lignes, j'ai utilisé le Outil de segment de ligne to tracez chaque ligne en vous assurant que la largeur des lignes correspond à celle du rectangle initial. Découvrez une vraie boîte de céréales (ou autre aliment) afin de respecter les directives de la FDA en matière de nutrition. À moins que vous ne décidiez de tout inventer, prenez les libertés artistiques que vous voulez..

Étape 2

La police utilisée pour "Valeur nutritive" est Franklin Gothic. Pour le reste du label, j'ai utilisé Liberation Sans, comme je le préfère à Arial ou Helvetica. Assurez-vous d’aligner votre texte de sorte que les vitamines et les principaux éléments nutritifs s’alignent, tandis que leurs valeurs et leurs pourcentages s’alignent de.

Étape 3

Comme le devant de la boîte de céréales, le panneau latéral est également bleu sarcelle (mais sans les formes de dégradé rayonnant). Copie et Coller le logo et Échelle il bas de sorte qu'il s'inscrit dans le rectangle. Coller votre valeur nutritive et des exemples assortis de dessins de guimauve aussi.

Étape 4

Vous aurez besoin d'ouvrir Adobe Photoshop CC pour l'achèvement du reste de ce tutoriel. Vous aurez également besoin de cette superbe maquette de boîte de céréales sur Graphic River créée par Zeisla. Il y a une instruction .PDF avec le fichier de téléchargement.

Ouvrez le fichier intitulé 3.PSD dans Photoshop. Vous remarquerez que la couche supérieure est intitulée "Box (Votre image ici)". Clic-droit cette couche et a frappé Modifier le contenus. Coller la conception de votre recto et assurez-vous qu’elle remplit l’ensemble du document. Frappé enregistrer et revenir à 3.PSD. Vous remarquerez que votre dessin est maintenant sur la case précédemment vide. Répétez cette étape avec la deuxième couche intitulée "Côté boîte (votre image ici) " pour votre panneau latéral créé précédemment (vous pouvez également assembler directement le contenu de votre panneau latéral sur le fichier).

Excellent travail, vous avez terminé!

Jetez quelques guimauves dans les airs, vous avez terminé! Puis reprends-les, je doute que tu veuilles des fourmis. Pour plus de plaisir avec la conception d’emballages et de bandes dessinées, consultez ces tutoriels fantastiques:

• Maquette Blister Packaging dans Photoshop
• Principes de base du dessin animé: comment dessiner correctement un visage de dessin animé
• Fondamentaux de la bande dessinée: Les secrets du dessin d'animaux