Hvordan lage en Flat, minimalistisk Rock kort Bruke Adobe Illustrator

How å lage en Flat, minimalistisk Rock kort Bruke Adobe Illustrator
Hva du skal lage

I dag skal jeg vise deg hvordan vi kan skape en flat, minimalistisk bergart kortet ved hjelp av noen av Illustrator grunnleggende verktøy som Ellipse Tool og rektangelverktøyet kombinert med kraften i pennen og Direct Selection Tools. Spenne opp, og la oss komme i gang!

Når sant skal sies, var jeg og trolig fortsatt er deeplyfond av rockemusikk. Fra de sprø riff av Pantera til grungy lyden av pearljam og Nirvana, har denne kulturen alltid hatt en stor innflytelse over mygrowing-up år, og sannsynligvis det er derfor jeg fortsatt komme tilbake til det på tide og timeagain. Siden jeg er sikker på at de fleste av dere der ute har minst onerock sang nær hjertet ditt, bestemte jeg meg for at det ville være fint å lage en rock-inspirert kort som kan brukes til personlige prosjekter.

1. Innstilling UpOur Dokument

Siden jeg håper du allerede har Illustrator opp androcking, la oss begynne med å lage en NewDocument
enten ved å trykke Ctrl-N
eller ved å gå til fil > New
.Når popup-vinduer dukker opp, justere dokumentets innstillingene slik:

Antall tegnebord
: 1

Bredde
: 562 px

Høyde
: 638 px

Enheter
: Pixels

Og fra fanen Avansert
:

Fargemodus product:: RGB

Raster Effects
: Høy (300 ppi)

Align nye objekter toPixel Grid
: merket

2. Innstilling UpOur Layers

Når vi har laget vår Nytt dokument
det er på tide å laget det slik at vi kan lage en fin, ryddig arbeidsplass som til slutt vil la oss fokusere på hver del av theillustration ett skritt av gangen. Så åpne opp Layers
panel, og skaper fire lag, navngi dem som følger:


    fliser

    amp

    gitar

    teksturer

    3. Justere TheGrid

    SinceIllustrator tillater bruk av Rister, bør du vite at det gir deg theoption å knipse design til sin PixelGrid
    . Det betyr at hvert forankringspunkt vil bli plassert på middleintersection av fire piksler.

    Fordi thereare ulike situasjoner som krever forskjellige innstillinger for rutenett, noen ganger youmight må justere de kjører på versionof Adobe Illustrator.
    < p> jeg personallyhave gått for laveste og samtidig den mest nøyaktige innstillingene, fordi jeg føler jeg har mer kontroll over mine motiver

    for å endre disse innstillingene, må du gå til Rediger >.; Preferanser > Guides & Grid
    . Derfra vil en liten popup vises, der vi trenger å justere thefollowing:

    Uten kraftlinjer hver
    : 1 px

    Underinndeling
    : 1

    Når you'veadjusted disse innstillingene, alt du trenger å gjøre for å gjøre alt pixelcrisp er aktivere Fest til rutenett
    optionlocated under Vis
    menyen.

    også, hvis du er vant til å flytte ting rundt med thehelp av tastaturets retnings piltastene, kan det være lurt å endre Tastatur Økning
    til 1 px
    for å få det så presis som possible.You kan gjøre dette ved å gå til Rediger > innstillinger > Generelt > Tastatur Økning
    .

    Hvis din versjon av AI har verdien satt til PT (poeng), bare gå til Enheter Kjøpe og endre Generelt Hotell og Stroke
    enheter til piksler Hotell og du er flink til å gå.

    4. Opprette theTiles

    Den første thingwe behov for å skape er de tre fliser på som vi vil lag vår entiredesign.

    Trinn 1

    Plasser deg på fliser laget, andusing på < b> rektangelverktøyet (M)
    skape threerectangles med følgende verdier:

    Venstre fliser product::
    størrelse: 256 x 586 px Twitter /fylle color: # DAD9D8

    Bunn høyre spalte
    : størrelse: 244 x 256 px Twitter /fylle color: # B5B2B1
    < li> Top høyre spalte
    : størrelse: 244 x 320 px Twitter /fillcolor: # 453F3C

    Trinn 5

    Siden tekstur isn 't helt hva vi ville ha det tobe, må vi justere BlendingMode Hotell og Opacity
    nivå. Så withthe tekstur valgt, åpner opp Gjennomsiktighet
    panel og angi Blending Mode
    til Multipliser
    , senke sin Opacity
    til 50%
    . På dette punktet, kan du velge alle tre former (kroppen, omriss og tekstur) og gruppere dem sammen ( Ctrl-G
    ) slik at du ikke ved et uhell flytte dem rundt.

    Trinn 6

    Når you'veapplied teksturen er det på tide å begynne å jobbe på forsiden av vår amp (gevinster, og selve høyttaler). Først ta tak i RectangleTool (M) Hotell og skape et større 142 x146 piksler
    form (# 453F3C) som vil fungere som en disposisjon og en mindre 130 x 134 px
    en (# 56514E) som willholster hovedkontroller panel og høyttaler, og deretter gruppere twotogether ( Ctrl-G
    ).

    Hvis du tar en nærmere titt på en referanse pictureof amp , vil du legge merke til at den nederste delen av plast er høyere enn thetop en, noe som betyr at vi må plassere de to figurene som vi har justcreated mot toppen, etterlater et gap på 20 px
    mellom dem og den nederste delen av forsterkerens disposisjon.

    Når tekstur er opprettet, endre Blending Mode
    til Multipliser
    , senke sin Opacity
    til < b> 60%
    .

    Trinn 9

    Begynn å arbeide syne venstre side av panelet ved å lage den inngang for gitar. Bruke Ellipse Tool (L)
    skape en 10 x 10 px
    sirkel som vil fungere som thejack sin disposisjon, og deretter farge det ved hjelp av # 453F3C.

    Quick Tips:
    for å få total kontroll over Pixel Grid
    jeg anbefaler å slå på Pixel Forhåndsvisning
    modus (Alt-Ctrl-Y)
    , som vil tillate deg å ha total kontroll over thepositioning av objektene på Artboard
    , og dermed gjøre det lettere å forstå og gjenta prosessen brukes til å lage andposition de fleste av de elementene som brukes i denne illustrasjonen.

    Trinn 10

    Avslutt jack inngang ved å legge en lettere (# 56514E) 6 x 6 px
    sirkel på toppen av theoutline, som vi vil duplisere ( Ctrl-C > kontroll-F
    ) og juster ved å fjerne bunnankerpunkt slik at wecut den i to.

    Endre duplikat BlendingMode
    til Overlay
    , senke sin Opacity
    nivå til 20%
    . Til slutt legger du til en 4 x 4 px
    circlewhich vi vil farge med samme mørke fargetone brukes for omrisset (# 453F3C), og sørg for å velge og gruppere alle elementene i input ved hjelp av Control- G
    .

    Trinn 11

    Siden linjen i og hodetelefoner knekt arebasically identiske til gitaren innspill, vil vi duplisere en wealready har og flytte de to kopiene mot høyre side .

    Trinn 12

    Nå skal vi begynne å jobbe på volumet, gainand kontur knotter. Bruke EllipseTool (L)
    skape en 10 x 10 px
    basewhich vil handle disposisjonen. Deretter legger en mindre 6 x 6 px
    sirkel på toppen, som vi vil farge ved hjelp av # E5D66A.

    Duplicate denne siste formen, endre farge til hvit (#FFFFFF), og deretter flipits fylle med sitt slag ( Shift-X
    ) og pass på å justere slag mot innsiden, noe som gir det en Vekt
    av 1 px
    . Utvid denne ringen som form ( Object > Utvid > Fyll og hjerneslag
    ) og deretter lage en kopi ontop av det ( Ctrl-C > Kontroll-F
    ).

    Nå, ved hjelp av et rektangel, fjern først den nederste halvdelen av ringen (kopi) andthen øverste halvdel (den opprinnelige) endre Blending Modes Hotell og Opacity
    levelsas følger:

    Øvre halvdel:
    Blending Mode: overlegg /Opacity nivå: 40%

    Bunn halv:
    Blending Mode: Multipliser /Opacity nivå: 14%

    Avslutt knotten ved å legge en liten 1 x 1 px
    sirkel mot toppen right av gullfarget form, og som alltid gjør ikke glem å gruppere alle theelements sammen ( Ctrl-G
    ) sothat du ikke vil uhell flytte rundt på ting.

    Trinn 13

    Plasser forgylt volumknappen på theright siden av vår gitarinngang i en avstand på 4 px
    , litt flytter den mot oversiden av om 4 px
    .

    Trinn 14

    Lag en kopi av volumknappen ved selectingit og deretter dra til høyre mens du holder nede Alt-Shift
    . Når kopieringen er opprettet, velger du både det og theoriginal, og deretter distansere de to på om 6 px
    fra hverandre. Deretter oppretter du to kopier med secondknob som originalen, distansere dem på et mindre 4 px
    gap.

    Trinn 15

    Neste grab Avrundet rektangel Tool Hotell og skape en 6 x 6 px
    form med en CornerRadius
    av 2 px
    , fargelagt det # 453F3C. Deretter tegner et 2 x 2 px
    firkantet, farge den med # 56514E, og både vertikalt og horisontalt justere den til thecenter av den tidligere opprettede form. Gruppe to ( Ctrl-G
    ) og deretter plassere dem mellom de to første forgylt knotter, samkjøre basen til den av gitar-inngangen.

    Trinn 16

    Flytte til høyre side av frontpanelet, må vi legge den lite strøm LED. Vi vil gjøre det ved å opprette en 6 x 6 px
    base (# 453F3C) på toppen av whichwe vil legge en mindre 2 x 2 px
    redcircle (# D66B6B).
    < h3> Trinn 17

    Siden hver enhet har en power-knappen, needto vi legge en til vår lille amp også. Bruke Avrundet rektangel Tool
    , skape en 10 x 14 px
    form med en CornerRadius
    av 2 px
    . Farge shapeusing # 453F3C og deretter plassere den på ca 8 px
    fra LED-indikator, vertikalt
    samkjøre det til midten av forrige gullbelagt knott.

    Deretter oppretter du en mindre 6 x 10 px
    rectanglewith en 1 px Hjørneradius
    , coloringit bruker # 686360. Gjenta den samme prosessen med å lage den øverste høydepunkt andbottom skygge som vi gjorde for volum knotter, og legger til en 10 x 2 px
    rektangel (# 453F3C) mot midten for å gi den somedepth.

    trinn 18

    Når vi er ferdig med å lage inngangskontaktene, knotter og strømknappen, må vi ta vare på indikatoren decalsthat gå på toppen og under hvert av elementene. Bare ta et par utseende IDen referansebildet og ved hjelp av RectangleTool (M)
    skape en haug med enkle dekaler, farge alle av dem # 453F3C.

    Trinn 19

    Når alle, dekaler og knekt knappene areadded, vi trenger å kaste en haug med høydepunkter på gullplaten. Simplycreate tre figurer med forskjellige bredder, farge dem hvite, rotere dem på a45 ° vinkel (trykk på R Hotell og dra
    towardsthe høyre), og deretter endre deres BlendingModes
    til Overlay Hotell og deres Opacity
    nivåer til 30%
    .

    Ved hjelp av gullplaten under (platen ikke teksturen), lage en kopi på toppen av de grupperte høydepunkter og lage en Beskjærings Mask product: ( høyreklikk > Gjør klipping maske
    ) for å skjule de delene som går utenfor plate'sarea.

    Legg til en subtil skygge mot oversiden av gull plate, ved å opprette en 130 x 4 px
    rektangel, som vi vil farge svart (# 000000). Justere Blending Mode
    til Multiply
    samtidig som man reduserer sin Opacity
    nivå til 10%
    .

    Trinn 20

    Når vi er ferdig med den fremre kontrollpanelet wecan flytte ned til den nedre delen av forsterkeren, og begynne å bygge selve speaker.First legge til en 130 x 6 px
    skillelinjen (# 453F3C) og plasser den rett under gullplaten.

    Trinn 21

    Neste la oss begynne å jobbe på høyttaleren selv, ved å opprette en 88 x 88 px
    sirkel, som vi vil farge bruker # 453F3C og sentrum både vertikalt og horizontallyto mellomrommet mellom skillet og den nedre delen av forsterkerens front (therectangle omriss).

    Trinn 22

    Når vi har en base for vår foredragsholder, vi må begynne lagdeling differentsized sirkler oppå hverandre, og bruke høydepunktet-shadow ring styleto dem slik at vi gi det litt dimensjon.

    Når du har opprettet alle talerens elementer, gruppere dem sammen ( Ctrl-G
    ) sothat du enkelt kan administrere dem senere, i tilfelle du flytte rundt på ting på somepoint.

    Trinn 23

    nå er alt vi trenger å legge til forsiden av amp er mot fronten grillethat går over høyttaleren selv. Bare lage en haug med vertikal ( 2 x 94 px
    ) Hotell og horisontal (2 x 130 px
    ) rektangler med en avstand på 2 px mellom hvert element, og deretter farge dem med # 453F3C

    Trinn 24

    Når du har grillen ferdig, legger du til en topp, venstre og høyre skygge, ved å opprette tre svarte rektangler med followingdimensions.


    Venstre skygge
    : 4 x 90 px

    Top skygge
    : 130 x 4 px

    Høyre skygge:
    4 x 90 px

    Plasser dem på plass og deretter endre deres Blending Modes
    til Multipliser
    , senke Opacity
    til 20%
    .

    Trinn 25

    Siden vi har mer eller mindre ferdige arbeider på forsterkerens forside, vi trenger tostart arbeider på hjørnet stykker som binder skjelettet /ramme sectionstogether.

    Vi vil begynne med å lage en 32 x 32 piksler
    sirkel (# 686360), som vi vil halvert to ganger slik at vi fjerner theright og nederste halvdel. Da vil vi velge nederste høyre anker pointusing Direct Selection Tool (A)
    , andusing Round Corners Effect product: ( Effect > Stylize > Runde Corners
    ) vi vil bruke en glatt 4 px
    roundnessto det.

    Vi har så å utvide form ( Object > Utvid Utseende
    ), kopiere det og bruke en Offset Sti Effect
    av 6 px
    tothe kopi ( Effect > Sti > OffsetPath
    ), og pass på å sette tiltrer anbefale til Round
    . Endelig gjelder noen visualtreatment til hjørnestykke som tekstur, topp høydepunkt, skrue, og deretter gruppere dem ( Ctrl-G
    ).

    Trinn 26

    Plasser hjørne slik at de øvre og venstre screwssections gå utenfor amp hoved omrisset av 3 px
    .

    Trinn 27

    Lag tre eksemplarer av hjørnestykke som wealready har, og avhengig av sine posisjoner snu dem enten vertikalt (forthe høyresidig seg) eller horisontalt (for bunn seg).

    Trinn 28

    Legg til to 142x 4 px
    hvite rektangler (#FFFFFF) til de øvre og nedre deler av amp, og endre sin Blending Modes
    til Overlay
    , senke deres Opacity
    nivåer til 20%
    siden de vil fungere som høydepunkter.

    Deretter legger to mindre 14 x 10 px
    svart de (# 000000) under de to øverste hjørnet stykker, sette sin Blending Modes
    til Multiply
    thistime, mens du senker Opacity
    levelsto samme 20%
    .

    Trinn 29

    Opprett toppen håndtaket ved å tegne to 20x 14 px
    avrundet rektangler (# 453F3) med en CornerRadius
    av 2 px
    . Distansere de to på om 78 px
    fra hverandre , etter og deretter legge til en 78 x 4 px rektangel mellom dem.

    Trinn 30

    Fullfør av amp ved å opprette en 16 x 8 px
    avrundet rektangel med en Hjørneradius
    av 2 px
    . Nå, velge og presse hverandre av de beste ankerpunktene av en px mot utsiden av formen.

    Trinn 31

    Når du har justert disse ankere, skape aduplicate av form og posisjon de to på om 82 px
    fra hverandre, like under amp hoved disposisjon. Thenselect alle elementene i forsterkeren, gruppere dem ( Ctrl-G
    ), og med fliser lag ulåst, velge både ampand rektangelet under den og justere dem både horisontalt og vertikalt.

    6. Opprette Guitar

    Så snart du er ferdig med amp, låse sin lag, og gå videre opp til theguitar en. Siden instrumentet er basert på to forskjellige gitarer, ved hjelp someof de mer klassiske linjer, anbefaler jeg at du gjør et Google bildesøk forsome elektriske gitarer og se hvilke elementer de innlemme.

    Trinn 1

    Siden gitaren kropp har en noe specialshape, kan vi ikke lage det med bare enkle former som ellipser andcircles. Vi trenger å komme ned og skitne og bruke Pen Tool (P)
    å spore opp en tilpasset sti, men heldigvis wecan begynne å gjøre det ved å bruke en 156 x132 piksler
    ellipse som vår bygning blokkere.

    Så, skape basen form, og thenuse Direct Selection Tool (A) anbefale til removeits toppen ankerpunkt. Nå, ta tak i PenTool (P) Hotell og begynne å spore en silhuett av en gitar som ligner på en Ihave.

    Trinn 4

    Begynn å legge elementer ved å lage den tilbake andfront pickups. Ta tak i RoundedRectangle Tool Hotell og skape en 46 x 20 piksler
    form med en 2 px Hjørneradius
    .Change sin farge til # 999999 og deretter opprette en kopi på som vi willapply en Offset Sti Effect product: ( Effect > Sti > Offset Sti
    ) på 6 px
    .

    Utvid offset ( Object > Utvid Utseende
    ) og thenchange sin farge til # 453F3C, flytte formen under sin originalcounterpart. Gruppe de to, og deretter HorizontalCenter Strek
    dem til gitaren kropp, posisjonering dem mot bunnen på ca 77 px
    fra sin disposisjon.

    Trinn 5

    Legg til en øvre halvdel høydepunkt og en bunn halfshadow, ved å lage en kopi av lysere grå segmentet, fargelagt det hvite (#FFFFFFF) og deretter bla sin fylle med sitt slag ( Shift-X
    ) gjør Husk å angi Vekt
    til 2 px

    Deretter utvide form ( Object > ExpandAppearance
    )., duplisere det ( Kontroll-C > Kontroll-F
    ) og ved hjelp av et rektangel kutte ut den øverste halvdelen fra Firstone og nedre halvdel fra kopien. Påfør akkurat det samme Blend Hotell og Opacity
    valuesas de vi allerede brukt for forsterkerens volumknappen, og deretter til slutt gruppen twotogether.

    Deretter legger de fire små skruer, en til hvert hjørne, ved creatingfour 2 x 2 px
    sirkler (# 453F3C), andpositioning dem mot kantene av grå form, og etterlater et gap av 2 px
    mellom dem.

    legg til 34 x 16 px
    avrundet rektangel med en Hjørneradius
    av 4 px
    , senter den til pickup viktigste form og farge det bruker # 453F3C.

    Legg til et mindre 26 x 8 px
    form med en Hjørneradius
    av 1 px Hotell og farge det ved hjelp av samme goldtint at vi har brukt så langt (# E5D66A). Påfør samme ring styledhighlight /shadow behandling og til slutt legge til to diagonale høydepunkter.

    Trinn 6

    Når vi har den første pickup, rett og slett gruppe allof elementene ( Ctrl-G
    ) og thencreate et eksemplar som vi vil posisjonere mot toppen av gitaren på om 26 px
    fra originalen.

    Trinn 7

    Start jobber på gitar bro ved å opprette en 38 x 12 px
    avrundet rektangel med en 6 px Hjørneradius
    som vi vil colorusing # 453F3C. Deretter oppretter du en mindre 30x 4 px
    form med en 2 px CornerRadius
    , fargelegging dette ved hjelp av # 999999.

    Gjenta prosessen med å legge thetop halv høydepunkt og nedre halvdel skygge, og deretter legge til to 2 x 2 px
    skruer på hver side, forlater Agap av 2 px
    mellom dem og thebridge sidene.

    Deretter kan du avslutte stykket ved å legge seks 3 x 4 px
    avrundet rektangler med 1 px Hjørneradius
    , posisjonering dem mot midten av brua.

    Trinn 8

    Gruppe alle elementene i gitaren er en bro ( Ctrl-G
    ) og deretter plassere det towardsthe bunnen av ryggen pickup, i en avstand på 6 px
    .

    Trinn 9

    Neste, la oss begynne å jobbe på volum knotter, ved å opprette en 12 x 12 px
    sirkel (# 453F3C) som vil fungere som disposisjonen. Deretter kan du legge en mindre 8 x 8 px
    en (# D8CD6A), og legg den øverste og nederste halvdelen ring styledhighlight og skygge. Siden dette vil bli brukt for å indikere lydnivået, tilsett litt 2 x 2 px
    sirkel (# 453F3C) og positionit mot nedre venstre hjørne av forgylt knott.

  1. gnage markører
    . # 564744

    Trinn 20

    Når du er ferdig med å dekorere halsen, weneed å legge strengene som faktisk flakse rundt og produsere lyden onceyou treffe dem med hakke.

    start med å lage seks 1 x 330 piksler
    rektangler (# 453F3C), som vi vil distansere på 2 px
    fra en en annen.

    Gruppe strengene ( Ctrl-G
    ) og deretter bruke Horisontal Midtstill
    alternativ funnet inthe Align
    panel, for å få dem alignedto broen. Nå bare bunnen justere rektangler til broens greysection.

    Trinn 21

    Når gitarhalsen er gjort, kan vi flytte til thetop og bygge hodet, som inkorporerer de stemmeskruene og tuning innlegg .Start ut ved hjelp av Pen Tool (P)
    andtrace en enkel gitar hodeform som vi vil da farge ved hjelp # 686360.

    Trinn 3

    så nå har vi vår teksturer, men noe seemsoff. Hvis du tar en nærmere titt kan du se hvordan teksturen fra en tileinterferes med overflaten og tekstur av de andre.

    For å fikse dette, låse opp flisen lag, kopiere alle tre brikker ( Ctrl-C
    ), låse lag, gå tilbake til teksturer ett, og thenpaste dem ( Kontroll -F
    ) på toppen av thetextures

    velg deretter hver flis og tilsvarende tekstur under den, og bruke en Beskjærings Mask product: (høyreklikk >. Gjør klipping Mask
    ) sothat strukturen vil kun bli brukt på overflaten av det flis.

    det er det!


    Vi rocked hardt, og til slutt vi har opprettet anice utseende illustrasjon, men viktigst lært noen fiks ting alongthe måte. Jeg håper du likte den opplæringen, og jeg ser frem til å yourversions, så får dem ferdig og legge dem i kommentarfeltet!