Design en Vector Themed Cereal Box i Adobe Illustrator

Hva du skal skape

Dagens viktigste måltid er Adobe Illustrator. Jeg er ganske sikker på at frokost kommer andre. Som sådan skal vi kombinere de to og betale hyllest til kornboksene i vår barndom med denne tegneserieaktige boksdesignen.

1. Start med en skisse

Trinn 1

Det er viktig å finne ut din sentrale karakter og layout i skissen din. Jeg liker å skisse i Adobe Illustrator CC seg selv (selv om du også kan importere en skisse). Bruker Paintbrush Tool (B) med gjengivelse satt til GlattVerktøy for penselverktøy panel og standard kalligrafiske børste valgt, jeg har trukket ut en spennende tegneseriefigur og blokkert i kornets navn over ham. 

For en detaljert guide til å tegne hendene, ta en titt på Cartoon Fundamentals: Hvordan tegne Cartoon Hands av Carlos Gomes Cabral.

Steg 2

Siden dette er en frokostblanding boks, ikke glem å presentere frokostblandingen bolle. I dette tilfellet skal vi tegne (for det meste) O-formede kornbiter med tegnet som hopper ut av (eller presenterer) bollen (som er fylt til brimmen). Gruppe (Control-G) sammen skisse linjene og låse gruppen i lag panel, som du vil spore disse når du lager din endelige design.

2. Form hodet

Trinn 1

Å bygge opp hver bit av anatomi er ikke nødvendig i dette designet. 

  1. Start med ansiktet ved å spore skissen med Pennverktøyet (P)
  2. Ansiktet består av halvparten av hodet og ett øre. Du kan tegne deler av det (hode, kjeve og øre) separat og ForenePathfinder panel.
  3. Du kan enten sette strekkfargen til mørk brun for å lage en oversikt, eller Kopier (Control-C) og Lim inn (Control-V) ansiktsformen din, sett fyll og strekkfargen til mørk brun, Stroke Weight til 2 pts, og Rette inn det bak det opprinnelige ansiktet.
  4. Tegn en liten D-lignende form for det andre øret, i en mørkere kjøtt-tone (i forhold til hvilken kjøtttone du har valgt) og legg den bak de andre hodestykkene. For mer informasjon om ulike hudfarger, sjekk ut dette raske tipset fra deg.

Steg 2

  1. Etter å ha funnet ut håret i skissefasen, kan jeg nå bare spore den med Pennverktøy.  Tenk på hår som å være i seksjoner: Bangs (frynser), sider og bak. Hvis du vil at hårdesignet ditt skal være litt mer væske, bruk Blyantverktøy (N) å tegne det raskt og runde ut eventuelle kanter ved å manipulere Levende hjørner.
  2. Bruk samme mørke kjøtttone som brukes til øret, tegne en form som etterligner hårets kanter. Dette vil tjene til å kaste en skygge fra håret mot ansiktet. Plasser formen under håret i lag panel.
  3. Ikke glem en C-form for innsiden av venstre øre.

Trinn 3

Ansiktet er for det meste bygget av enkle former kombinert for å danne et virkelig, veldig spent ansikt.

  1. Tegn to overlappende sirkler ved hjelp av Ellipseverktøyet (L). Hvis du setter fyllfarge til null og strekket til samme mørkebrune brukes til konturer, kan du da endre bredden på sirklene på ytre kantene med Breddeverktøy (Shift-W). Munnen, tegnet med Pennverktøy, er som en sidelengs gelébønne.
  2. Nesen er som et opp og ned spørsmålstegn, eller halvcirkel med et lite ben på den.
  3. For tungen valgte jeg en lysrosa og tegnet en form som tar opp den nedre halvdelen av munnen.
  4. Tennene er buede former som følger kontur av munnen.
  5. Kopiere og Lim inn sirkler opprettet for øynene og fylle dem med en lyseblå. Pass på at venstre øye overlapper høyre.

Trinn 4

Fortsetter med øynene:

  1. Tegn hvite sirkler som overlapper lysblåene fra forrige trinn. Hvis du velger den lyseblå sirkelen og den overlappende hvite motparten, kan du bruke Form Builder Tool (Shift-M) å skille den ikke-skjærende delen av den hvite sirkelen (ved å velge den), Opphev valget, og Slett.
  2. Bruke Breddeverktøy for å øke bredden på øyets slag. I dette tilfellet, jeg limes omriss sirkelen fra forrige trinn og plassert den over de hvite og lyseblå former som danner høyre øye.
  3. Munnen trenger også en oversikt. Kopiere og Lim inn basen munnformen (den sidelengs gelébønnen) og sett streken til 1pt vekt.
  4. Slik at nesen ikke ser gjennomsiktig, tegne en halv sirkel og legg den under nesen, men over øynene i lag panel.
  5. Tynn også omrisset av venstre øye og trekk to små sirkler for øynene elever.
  6. Bruker Paintbrush Tool, Jeg trakk to små øyenbryn og Utvidet dem under Gjenstand.

Trinn 5

Når du er fornøyd med tegneseriefolkens hode, Gruppe alt sammen. For å legge til en tykkere oversikt rundt hele greia (mens du beholder den som er trukket tidligere, som hjelper å definere hvor hodet slutter og knapt sett øre til høyre begynner), KopiereLim inn, og Forene det kopierte hodet i Pathfinder. Sett fyll- og strekkfargen til mørk brun og strekkvekten til 2-3pts, avhengig av hva du foretrekker. Rette inn hodet og dets silhuett og Gruppe dem sammen. 

3. La oss legge til et legeme

Trinn 1

Igjen var kroppens form uttegnet under skissefasen.

  1. Kroppens seksjoner er som følger: To hender, to armer, en nakke, en skjorte og innsiden av skjorten. Jeg fant det enklest for meg å KopiereLim inn, og Reflektere venstre arm (over a Vertikal akse) for å få den rette armen. Jeg skalerte og roterte det også for å passe med skissen.
  2. Ved hjelp av teknikken fra foregående avsnitt, gi nakke og armer a 2PT vekt omriss.
  3. Bruk den samme mørke hudtonen som brukt i skyggene i ansiktet, tegne skyggeformer for håndflatene, på nakken og overarmene (hvor skygger fra ermene blir kastet).

Steg 2

Bruke Pennverktøy å tegne linjer på skjorten som viser ermemuffer, søm og en krage. Gruppe alt sammen og igjen, KopiereLim innForene i de Pathfinder panel, bruk en tykk slagvekt til formen, og Rette inn bak hovedpersonen. Gruppe Alt dette sammen, og vi fortsetter å lage resten av boksdesignet.

4. Tegning tredimensjonalt korn

Trinn 1

Tegn en sirkel i en stor sirkel ved hjelp av Ellipseverktøy. Med begge valgte, trykk Minus FrontPathfinder panel. Velg din flat doughnut form og gå til Effekt> 3D> Extrude & Command ... . Spill med rotasjonen, eller skriv inn følgende detaljer for å få samme 3D-form under:

  • X-akse: 3 °
  • Y-akse: 6 °
  • Z-aksen: -2 °
  • Extrude Depth: 34 pt
  • Flate: Plastic Shading

Steg 2

Når du har valgt 3D-donutformen, går du til Objekt> Utvid Utseende. Bruke Direkte utvalgsverktøy (A) å velge ansiktet på kornformen og sette fyllfargen til en lys brunbrun. Velg alt, men objektets overflate, og sett fyllfarge til mørkere brunfarge. Følg trinnene fra Seksjon 3, trinn 2 å gi kornblandingen en tykk skisse. Gruppe disse figurene sammen. Du bruker denne prosessen med å tegne et flatt bilde, ekstrudere det, endre fyllfargene, og gi det en oversikt over andre kornblandinger senere i denne opplæringen.

Trinn 3

Kopiere og Lim inn flere av "Vector O's". Rotere dem rundt som du synes passer, eller til og med lage nye 3D-versjoner av dem for ekstra variasjon i hvert cerealieobjektperspektiv. Å velge en gruppe av dem og i Mønsteralternativer panel, opprett et nytt mønster. Velge Hex etter kolonne eller hva som vil gi deg mest mulig dekning. Lagre ditt mønster og gå videre til neste trinn.

Trinn 4

  1. Tegn en stor ellipse som vil tjene som toppen av bollen. Sett fyllfarge til en lyskrem (dette vil tjene som melk).
  2. Kopiere ogLim inn som ellipse og bruke ditt nye mønster til det (vennligst ignorere mangelen marshmallow form, som det kommer opp kort tid).
  3. Lim inn kornblandinger rundt bollen for å dekke noen mønsterkanter og for å gjøre kornbollen se ut som den er fylt til brimmen med deilige "Vector O's". Bruke Pennverktøy å tegne grunne bolle. Bare sidene og toppkanten vil vises i den endelige utformingen, så hvor nøyaktig i skålens perspektiv er du, er din samtale helt.

5. Marshmallow Shapes!

Trinn 1

Den forrige delen nevnte noen av Illustrator-tema marshmallow figurer vi legger til bollen med frokostblandinger. La oss få jobbe med dem. La oss starte med en Pennverktøy-inspirert marshmallow. Tegn halvparten av designet, sett under, med Pennverktøy seg selv. Kopiere og Lim inn objektet og Reflektere det over a Vertikal akse. Bruk trinnene fra Seksjon 4, trinn 1, lag en 3D-versjon av pennverktøyet og skift fargene til mørk blågrønn. Tegn en sirkel i midten av formen og Gruppe sammen. Gi den en tykk oversikt akkurat som frokostblandingen O er.

Steg 2

For neste marshmallow form, vil vi skape en gul blyant. Bruke Rektangelverktøy (M) å tegne et smalt rektangel. Rundt hjørnene ved å velge den med Direkte utvalgsverktøy og trekker Levende hjørner innover. Klipp formen i halv (eller mer) ved å tegne et rektangel over det og treffe Minus Front i de Pathfinder panel.

Trinn 3

  1. Bruke polygon Verktøy å tegne en enkel trekant. 
  2. Rette inn og Scale det er så at basen har samme bredde som resten av blyantformen.
  3. Bruker Pathfinder panel igjen, klipp av spissen av trekanten.
  4. Herfra kan du tegne noen smale striper på blyanten og fortsette å lage et 3D-objekt som ferdig med de andre kornformene.

Trinn 4

De andre marshmallow-figurene får en rask oversikt, siden det er mer av det samme ved å lage dem.

  1. Legg merke til hvordan forskjellige verdier i roterende over forskjellige akser gir deg forskjellige perspektiver for marshmallows.
  2. Den tredje formen er en pensel. Jeg tegner den basert ut av Paintbrush Tool ikon med Blyantverktøy
  3. Den endelige marshmallow er den Utvalgsverktøy gjengitt i grønt. Den er laget av et rektangel og en stor, trekantet trekant.

Trinn 5

Sprøt dine marshmallows og "Vector O's" rundt designet, sørg for å sette noen nær og på tegnens hånd som om han hopper ut av bollen og kaster dem rundt. Gruppe alt dette sammen. Du vil legge merke til at pennikonet som ble brukt for den blå marshmallow, ble også lagt til skjorten sin. Klart elsker denne fyren vektorkunst.

6. Klistremerke og bakgrunn

Trinn 1

La oss tegne den søte klistremerket som ligger nederst til høyre i komposisjonen.

  • Tegn en sirkel med Ellipseverktøy og fyll den med en mørk gul farge. Gå til Effekt> Forvreng og transformer> Zig & Zag ... Juster effekten til din smak. Jo større størrelse, desto dypere blir punktene i sirkelens senter. Og jo flere rygger per segment, desto flere poeng har du rundt sirkelen din.
  • Lag en disposisjon for klistremerkeformen og sørg for at hjørnene er avrundet enten gjennom manipulering Levende hjørner eller velge avrundet Caps og CornersStroke panel.
  • For å gjøre det skinnende, tegne en sirkel med a Lineær gradient går fra lys gul på 100% til 0% opacity og vinklet fra øverst til venstre. Slett alle ikke-kryssende deler av sirkelen fra klistremerkeformen din ved hjelp av Form Builder Tool.
  • Til slutt, bruk en tegneserie skrift som Arch Rival eller Toontime for tekstlagene dine.

Steg 2

Bakgrunnen er ganske enkel. Tegn et stort rektangel over tavlen i "teal" ved hjelp av Rektangelverktøy. Med Pennverktøy, tegne lange former som utstråler seg ut fra sentrum (eller så) av designet. Forene dem i Pathfinder panel og bruk a radial gradient til Sammensatt form går fra lyseblå i midten og krøll på kantene. De fleste av designene dine dekker de mer ugjennomsiktige porsjonene av formen i midten.

7. Logo

Trinn 1

Ved å bruke en annen tegneserisk skrift, skrev jeg ut kornblandingens navn. Denne fonten heter Helsinki. Jeg anbefaler å bruke noe som er barnlig og enten avrundet eller ser håndtegnet. Extrude & Command, akkurat som marshmallow figurer var før.

Steg 2

Fremgangsmåten for å opprette logoen er ganske enkel:

  1. Utvide din 3D-tekst i Gjenstand og Del opp gruppe slik at du kan flytte hvert brev opp, ned eller rotere det til din smak.
  2. Bytt bokstavene til lyseblå og deres skyggefarger til å krise.
  3. Scale noen av bokstavene opp, som C og O, og noen av dem nede, som E.
  4. Gruppe teksten sammen en gang fornøyd med plasseringen og lage en oversikt av kopieringlime, og Uniting den kopierte gruppen i Pathfinder panel. Still slagvekten på 3-5pts og Rette inn det bak den første logogruppen. Legg merke til hvordan teksten kurver litt, klar for boksdesign. 

Trinn 3

Sett alt sammen! Jeg bestemte meg for at tegnet skulle overlappe logoen litt, og den ekstra teksten til "med marshmallow-verktøy" ble satt i Arch Rival igjen. Jeg har også lagt to ekstra skisser til tegnet, bollen og kornbiter flyr rundt for å sette dem fra bakgrunnen videre. 

På dette tidspunktet, med hoveddesignet fullført, kan du ringe dette prosjektet godt utført. Eller, du kan fortsette å lage en digital kornboks mock-up.

8. Sidepanelet

Trinn 1

Før vi bryter med å mocking opp designet, må vi lage sidepanelet på frokostblandingen. Jeg har bestemt meg for å gå i trøbbel for å skape fulle fakta. Bruke Rektangel Verktøy å tegne et smalt rektangel fylt med hvitt og slagfargen satt til svart og a 2pt vekt. For linjene brukte jeg Linjesegmentverktøy to tegne hver linje, sørg for at bredden på linjene stemmer overens med bredden på det opprinnelige rektangelet. Sjekk ut en ekte frokostblandingskasse (eller annen matvare) for å matche FDAs retningslinjer for ernæringsfakta. Med mindre du går på ruten for bare å gjøre alt, så ta hva som helst kunstneriske friheter du vil ha.

Steg 2

Skriften som brukes til "Ernæringsfakta" er Franklin Gothic. For resten av etiketten brukte jeg Liberation Sans, som jeg foretrekker det over Arial eller Helvetica. Sørg for at du tilpasser teksten slik at vitaminer og viktige næringsinnhold stikker opp mens deres verdier og prosenter står på den andre siden.

Trinn 3

Som fronten av kornboks er sidepanelet også krøllete (men uten de utstrålende gradientformene). Kopiere og Lim inn logoen og Scale det ned slik at det passer i rektangelet. Lim inn din ernæring fakta og ulike forekomster av marshmallow designer også.

Trinn 4

Du må åpne opp Adobe Photoshop CC for å fullføre resten av denne opplæringen. Du vil også trenge denne flotte kornboksens mock-up på Graphic River laget av Zeisla. Det er en instruksjon .PDF med nedlastingsfilen.

Åpne filen som er merket 3.PSDPhotoshop. Du vil merke at topplaget har tittelen "Boks (bildet ditt her)". Høyreklikk dette laget og hit Rediger innholdsLim inn din front boks design og sørg for at det fyller hele dokumentet. Truffet lagre og gå tilbake til 3.PSD. Du vil legge merke til at ditt design er nå på den tidligere tomme boksen. Gjenta dette trinnet med det andre laget merket "Box Side (bildet ditt her) " for ditt tidligere opprettede sidepanel (du kan også sette inn sidepanelinnholdet direkte på filen).

Flott jobb, du er ferdig!

Kast noen marshmallows i luften, du er ferdig! Så plukk dem opp igjen, jeg tviler på at du vil ha maur. For mer moro med emballasje design og cartooning, sjekk ut disse fantastiske opplæringsprogrammene:

  • Mockup Blister Packaging i Photoshop
  • Cartoon Fundamentals: Hvordan tegne en Cartoon Face riktig
  • Tegneseriegrunnlag: Hemmelighetene i tegning av dyr