Share
Hva du skal skapeI dagens veiledning skal vi trekke ut våre arkitekthatter og lære å "bygge" vårt eget miniatyriserte sett av New Yorks mest ikoniske bygninger, uten å bruke noe mer enn de grunnleggende former og verktøy som vi jobber med daglig.
Så, forutsatt at du allerede har fylt opp kaffekruset, la oss komme til det!
Og ikke glem, du kan alltid utvide samlingen din ved å gå over til GraphicRiver, hvor du finner mange fantastiske vektorbygg.
Siden jeg håper at du allerede har Illustrator oppe i bakgrunnen, ta den opp og la oss sette opp en Nytt dokument (Fil> Ny eller Kontroll-N) ved hjelp av følgende innstillinger:
Og fra Avansert tab:
Raskt tips: Noen av dere har kanskje lagt merke til at Juster nye objekter til pikselruten alternativet mangler, noe som skyldes at jeg kjører den nye CC 2017-versjonen av programvaren, hvor det er gjort store endringer på måten Illustratorhåndterer måter som snaps til det underliggende pikselruten.
Siden vi skal lage ikonene ved hjelp av en piksel-perfekt arbeidsflyt, vil vi sette opp et fint lite rutenett slik at vi kan ha full kontroll over våre former, det vil si hvis vi kjører den eldre versjonen av programvaren.
Gå til Rediger> Innstillinger> Guider og rutenett undermenyen, og juster følgende innstillinger:
Raskt tips: Du kan lære mer om grids ved å lese dette grundige stykket om hvordan Illustrators Grid System fungerer.
Når vi har satt opp vårt egendefinerte rutenett, må alt vi trenger for å sikre at våre figurer ser skarpe ut, gjør det mulig Snap to Grid alternativ funnet under Utsikt menyen, som vil forvandle seg til Snap til Pixel hver gang du går inn Pixel Preview modus.
Nå, hvis du er ny på hele "piksel-perfekt arbeidsflyt", anbefaler jeg på det sterkeste at du går gjennom hvordan jeg lager en piksel-perfekt kunstoppgave, som vil hjelpe deg med å utvide dine tekniske ferdigheter på kort tid.
Med det nye dokumentet opprettet, vil det være en god ide å strukturere prosjektet vårt ved hjelp av et par lag, da denne måten vi kan opprettholde en jevn arbeidsflyt ved å fokusere på ett ikon om gangen.
Når det blir sagt, ta opp lag panel, og opprett totalt fire lag, som vi vil endre navn på som følger:
De Referansegitter (eller Base Grids) er et sett med nøyaktig avgrensede referanseflater, som tillater oss å bygge våre ikoner ved å fokusere på størrelse og konsistens.
Vanligvis bestemmer størrelsen på nettene størrelsen på de faktiske ikonene, og de bør alltid være den første avgjørelsen du gjør når du starter et nytt prosjekt, siden du alltid vil starte fra den minste mulige størrelsen og bygge videre på det.
Nå, i vårt tilfelle, skal vi lage ikonpakken med bare en størrelse, mer nøyaktig 128 x 128 px, som er en ganske stor en.
Begynn med å låse alt annet enn referansegitterlaget, og ta deretter tak i Rektangelverktøy (M) og opprett en 128 x 128 px oransje (# F15A24), som vil bidra til å definere den totale størrelsen på ikonene våre.
Legg til en mindre 120 x 120 px en (#FFFFFF) som vil fungere som vårt aktive tegneområde, noe som gir oss et allround 4 px padding.
Grupper de to rutene som komponerer referansegitteret ved hjelp av Kontroll-G tastaturgenvei, og opprett deretter tre kopier på en avstand av 40 px fra hverandre, sørg for å justere dem til sentrum av artboard.
Når du er ferdig, låser du det nåværende laget og går videre til neste, hvor vi begynner å jobbe med vårt første ikon.
La oss slå av prosjektet ved å lage stempel-lignende ramme som vil være det gjentagende elementet for hver av våre ikoner. Når det er sagt, sørg for at du er på riktig lag (det ville være den første) og så zoom inn på det første referansegitteret.
Lag rammens ytre delen ved hjelp av a 100 x 116 px rektangel, som vi vil farge ved hjelp av # 45576B og sentrere deretter til det underliggende aktive tegneområdet.
Juster formen som vi nettopp har opprettet ved å plassere et par 8 x 8 px sirkler (uthevet med rødt) nøyaktig 8 px fra hverandre både horisontalt og vertikalt, som vi deretter skal kutte ut fra det større rektangel ved bruk av Pathfinder's Minus Front Shape Mode.
Fortsett å justere den resulterende formen ved å bla den Fylle med dens Stroke (Shift-X), og deretter sette sin Vekt til 4 px fra innsiden av Stroke panel.
Lag rammens fargede fyllingsdel med en 76 x 92 px rektangel (# EFA28B), som vi vil sentre justere til det større omrisset.
Avslutt rammen ved å legge til en oversikt over den fargede fyllingsdelen ved hjelp av Stroke metode. Lag en kopi av det (Kontroll-C) som vi vil lime inn foran (Kontroll-F) og deretter justere ved å endre fargen til # 45576B og deretter bla sin Fylle med dens Stroke (Shift-X). Still inn stien Vekt til 4 px, og velg så og grupper alle tre formene sammen ved hjelp av Kontroll-G hurtigtast.
Når vi er ferdig med å jobbe på rammen, kan vi lage to kopier av det (Control-C> Control-F) og plasser dem på de resterende referanseglassene, pass på at du limer hver enkelt av dem på deres respektive lag (det vil være det tredje og det fjerde). Så før du låser lagene tilbake, må du endre fargen på den andre rammens fyllingsdel til # 8CC1ED og den tredje er til # 8CEAC8.
Med rammene på plass kan vi nå begynne å jobbe med de faktiske bygningene, så sørg for at du er tilbake på riktig lag (det ville være den andre) og zoome inn på det første referansegitteret slik at du kan få bedre utsikt over figurene.
Begynn å jobbe på Empire State Building base ved å lage en 22 x 18 px rektangel med a 4 px tykk Stroke (# 45576B) som vi vil bunne justere til fyllseksjonens disposisjon, plassere den på en avstand av 5 px fra sin venstre kant.
Lag en annen litt høyere 14 20 px rektangel med det samme 4 px tykk Stroke (# 45576B), som vi vil plassere på toppen av den fra foregående trinn.
Opprett den riktige delen av bygningens base ved å plassere en kopi (Control-C> Control-F) av de to figurene som vi har på motsatt side av rammen, og holder det samme 5 px gapet mellom dem og det større omrisset.
Begynn å jobbe på bygningens senterdel, ved å lage en 38 x 10 px rektangel med a 4 px tykk Stroke (# 45576B) som vi vil sitte i linje med rammen, plassere den på toppen av basisformene.
Juster formen som vi nettopp har opprettet ved å åpne banen, ved å legge til et nytt ankerpunkt i midten av bunnkanten ved hjelp av Legg til ankerpunktsverktøy (+) og deretter fjerne den ved å trykke Slett.
Fortsett å jobbe deg opp ved å opprette en 30 x 12 px rektangel med a 4 px tykk Stroke (# 45576B), som vi vil sitte i linje med forrige form, posisjonere den på toppen.
Begynn å jobbe på bygningens øvre del ved å lage en 22 x 6 px rektangel med a 4 px tykk Stroke (# 45576B), som, som du sikkert har antatt, posisjonerer du på toppen av forrige form.
Legg til en annen 6 x 12 px rektangel med a 4 px tykk Stroke (# 45576B) på toppen av formen som vi nettopp har opprettet, sørg for å sentrere de to etterpå.
Avslutt byggets struktur, ved å legge til antennen ved hjelp av a 14 px høy 4 px tykk Stroke (# 45576B), som vi selvfølgelig vil plassere på toppen av alle de andre figurene.
Deretter skal vi ta en liten omvei og legge til de små høydepunktene før du starter arbeidet med vinduene selv. Så, ved hjelp av Rektangelverktøy (M), lage en haug med 2 px høy hvit (#FFFFFF) rektangler, som vil dekke den øvre synlige delen av de fleste av bygningens komponerende seksjoner.
Juster figurene som vi nettopp har opprettet slik at de ser ut som de faktiske høydepunktene, ved å velge dem alle og senke dem opacity til bare 60%.
Med høydepunktene på plass, er det på tide å begynne å jobbe med vinduene, som vi vil lage ved å tegne dem med et par 2 px tykk vertikal Stroke linjer (# 45576B) plassert 4 px fra hverandre (hvis du bruker Rette inn panelets Distribuere opsjoner). Ta deg tid, og legg til linjene til hver del av bygningen, velg og gruppere (Kontroll-G) både dem og de større komponerende figurene sammen som du går med.
Legg til de harde skyggene ved å lage et par rektangler (# 45576B) som vi vil posisjonere slik at de overlapper banen til hver bygningens disposisjon.
Juster skyggene (alle unntatt den øverste senteret) ved å velge de øverste indre ankerpunktene sine individuelt og skyve dem til bunnen med en avstand av 1 px for de øverste og 2 px for resten. Du kan bruke Flytteverktøy (Høyreklikk > Transformere> Flytt> Vertikal> + / -2 px avhengig av hvilken side du starter med).
Avslutt ikonet ved å tegne himmelen ved hjelp av et par 2 px tykk Stroke linjer (# 45576B). Ta deg tid, og når du er ferdig, grupper alle linjene sammen ved hjelp av Kontroll-G tastaturgenvei, gjør det samme for alle ikonets komponerende seksjoner etterpå.
Hvis du antar at du allerede har jobbet med det første ikonet, går du videre til neste lag (det ville være det tredje), låser den forrige og så zoomer inn på det andre referansegitteret slik at vi kan komme i gang.
Begynn å jobbe på bygningens nederste del ved å lage en 48 x 16 px rektangel med a 4 px tykk Stroke (# 45576B) som vi vil sentre justere til bunnen av det fargede fyllingspartiets disposisjon.
Lag en mindre 32 x 10 px rektangel med a 4 px tykk Stroke (# 45576B) som vi vil plassere på toppen av forrige form, sørg for å midtstille de to.
Avslutt denne delen ved å legge til en 16 x 20 px rektangel med a 4 px tykk Stroke (# 45576B), som vi vil justere ved å sette inn Radius av sine øverste hjørner til 8 px fra innsiden av Forvandle panelets Rektangelegenskaper.
Velg alle tre figurene, og slå dem til en enkelt større bane ved å forene dem med Pathfinder's Forene Shape Mode.
Begynn å jobbe på bygningens venstre side seksjon ved å lage en 6 x 18 px rektangel med a 4 px tykk Stroke (# 45576B), som vi vil plassere på det første trinnet i større form.
Legg til en liten ledge på formen som vi nettopp har opprettet, ved hjelp av en 4 px bred 4 px tykk Stroke linje (# 45576B) som vi vil plassere på sitt øverste venstre hjørne. Når du er ferdig, velg og gruppér de to sammen ved hjelp av Kontroll-G hurtigtast.
Opprett bygningens høyre nedre del ved hjelp av en kopi (Control-C> Control-F) av den som vi nettopp er ferdig med å jobbe med, som vi vil vertikalt reflektere (høyreklikk> Transform> Reflektere> Vertikal) og deretter plassere på motsatt side av bygningen.
Opprett bygningens senterparti ved hjelp av a 32 x 28 px rektangel med a 4 px tykk Stroke (# 45576B) som vi vil posisjonere på toppen av sin base.
Juster formen som vi nettopp har opprettet ved å sette inn Radius av sine øverste hjørner til 16 px fra innsiden av Forvandle panelets Rektangelegenskaper.
Fortsett å justere den resulterende formen ved å legge til et nytt ankerpunkt til midten av bunnkanten ved hjelp av Legg til ankerpunktsverktøy (+), og deretter fjerne (Slett) for å åpne opp banen.
Fortsett å jobbe deg opp ved å opprette en 24 x 14 px rektangel med a 4 px tykk Stroke (# 45576B) som vi vil justere ved å sette inn Radius av sine øverste hjørner til 12 px og deretter åpne bunnbanen sin. Når du er ferdig, plasser den resulterende formen på toppen av den tidligere opprettede.
Legg til en annen 16 x 12 px rektangel med a 4 px tykk Stroke (# 45576B), som vi vil justere ved å sette inn Radius av sine øverste hjørner til 8 px, åpner bunnbanen som vi gjorde med forrige form. Når du er ferdig, plasserer du den resulterende formen på toppen av bygningens senter.
Begynn å jobbe på bygningens øvre del ved å lage en mindre 8 x 6 px rektangel med a 4 px tykk Stroke (# 45576B), som vi vil justere ved å sette inn Radius av sine øverste hjørner til 4 px, posisjonere den resulterende formen på toppen av forrige form, sørg for å åpne opp bunnbanen.
Lag det siste stykket av bygningens øvre del ved hjelp av a 6 x 16 px ellipse med a 4 px tykk Stroke (# 45576B) som vi vil justere ved å kutte den i halv ved å velge og deretter fjerne bunnankerpunktet. Senter justere den resulterende formen i en avstand på 4 px fra den aktive tegningens toppkant, sørg for å utvide bunnprofilen til forrige form ved å bruke Pennverktøyet (P).
Legg antennen med en 8 px høy 4 px tykk Stroke linje (# 45576B), som vi vil sentre justere til den tidligere opprettede formen.
Som vi gjorde med den forrige bygningen, begynn å legge til de små høydepunktene ved hjelp av hvitt (#FFFFFF) som hovedfyllingsfarge, senke deres opacity til 60% når du er ferdig. Lag de rette høydepunktene ved hjelp av vanlige rektangler, mens du bruker utklipp for de buede, sørg for å sende dem til baksiden av bygningen etterpå (høyreklikk> Ordne> Send bakover).
Begynn å legge til detaljer i den øvre delen av bygningen ved å opprette en 2 x 2 px sirkel, som vi vil farge ved hjelp av # 45576B og deretter plassere i midten av sin andre form.
Lag tre 2 x 4 px ellipser (# 45576B) som vi vil posisjonere 1 px fra hverandre, flytte senteret en til toppen av 1 px. Gruppe (Kontroll-G) formene og plasser dem i midten av toppseksjonens tredje form.
Lag et nytt sett med 2 x 4 px ellipser (# 45576B), som vi vil avstand på 2 px fra hverandre, gruppering (Kontroll-G) og deretter plassere dem mot midten av toppseksjonens fjerde form.
Bruke ni 2 x 2 px firkanter (# 45576B), legg de små vinduene til den buede delen av bygningen, gruppere dem sammen etterpå ved hjelp av Kontroll-G hurtigtast.
Lage en 6 x 41 px rektangel med a 2 px tykk Stroke linje (# 45576B), som vi vil justere ved å sette inn Radius av sine øverste hjørner til 3 px, senter justering av den resulterende formen til bunnen av den fargede fyllingsseksjonen.
Som vi gjorde med den første bygningen, ta deg tid og tegne i vinduene med et par 2 px tykk Stroke linjer (# 45576B) plassert 2 px fra hverandre, velge og deretter gruppere (Kontroll-G) dem sammen når du er ferdig.
Legg til skyggene ved hjelp av et par rektangler som vi vil plassere slik at de følger stien til bygningens komponerende seksjoner.
Juster skyggene, ved å velge de øverste indre ankerpunktene sine, og trykk dem til bunnen med en avstand på 2 px bruker Flytteverktøy (Høyreklikk > Transformere> Flytt> Vertikal> 2 px.
Avslutt ikonet ved å tegne himmelen ved hjelp av et par 2 px tykk Stroke linjer (# 45576B). Ta deg tid, og når du er ferdig, grupper alle linjene sammen ved hjelp av Kontroll-G tastaturgenvei, gjør det samme for alle ikonets komponerende seksjoner etterpå.
Vi er nå nede til vårt tredje og siste ikon, så antar du at du allerede har flyttet opp til neste lag (det ville være den fjerde), zoome inn på referansegitteret, og la oss fullføre dette.
Opprett bygningens hovedform ved hjelp av a 36 x 56 px rektangel med a 4 px tykk Stroke (# 45576B) som vi vil sentrere til den nederste kanten av den fargede fyllingsseksjonen.
Begynn å jobbe på bygningens øvre del ved å lage antennen ved hjelp av a 36 px høy 4 px tykk Stroke (# 45576B), som vi vil plassere på toppen av den større formen.
Lag den nederste delen av takplattformen med a 28 px bred 4 px tykk Stroke (# 45576B), som vi vil sentre justere til bygningens hovedform, plassere den i en avstand av 6 px fra det.
Legg plattformens støtteben med a 16 x 6 px rektangel med a 4 px tykk Stroke (# 45576B), som vi vil sitte i linje med det større rektangelets toppkant.
Opprett den øvre delen av plattformen med en annen 28 px bred 4 px tykk Stroke (# 45576B), som vi vil sitte i linje med bunnseksjonen, plassere den på en avstand av 6 px fra det.
Koble plattformens to seksjoner med to sett med 6 px høy 4 px tykk Stroke linjer (# 45576B), som vi vil posisjonere 4 px fra hverandre ved hjelp av Rette inn panelets Distribuere alternativer, plasser en på hver side av antennen.
Ta raskt tak i Pennverktøyet (P), og trekk deretter inn de diagonale støttestenger med a 2 px tykk Stroke linje (# 45576B), starter fra toppen av plattformen og går opp på antennens senterdel.
Avslutt den øvre delen av bygningen ved å legge til en 8 px bred 4 px tykk Stroke linje (# 45576B) som vi vil sentre justere til antennen. Så, når du er ferdig, velg og grupper alle de nåværende delens figurer sammen ved hjelp av Kontroll-G hurtigtast.
Legg til de viktigste høydepunktene med syv 32 x 2 px rektangler (farge: hvit; opacity: 60%) som vi stabler vertikalt 6 px fra hverandre, gruppering (Kontroll-G) og deretter sentrere dem til bygningens hoveddel.
Begynn å jobbe på forsiden av bygningen ved å lage vinduene med tolv 20 px bred 2 px tykk Stroke linjer (# 45576B) vertikalt stablet 4 px fra hverandre. Når du har linjene, grupperer du (Kontroll-G) og deretter sentrere dem til tårnets hoveddel, i en avstand av 4 px fra toppkanten.
Legg til høydepunktene på forsiden med seks 20 x 2 px rektangler (farge: hvit; opacity: 60%) vertikalt stablet 6 px fra hverandre, som vi vil gruppere (Kontroll-G) og deretter sentrere seg til vinduene, plassere dem under den første Stroke linje. Så, når du er ferdig, velg og grupper begge vinduene og høydepunktene sammen ved hjelp av Kontroll-G hurtigtast.
Opprett hoveddelens hovedoversikt ved hjelp av a 20 x 56 px rektangel med a 4 px tykk Stroke (# 45576B), som vi vil sitte i linje med bygningens hoveddel.
Juster rektangelet ved å velge sine toppankerpunkter og skyv dem innvendig med en avstand på 8 px bruker Bevege seg verktøyet (høyreklikk> Transformér> Flytt> Horisontalt> + / - 8 px avhengig av hvilken side du starter med).
Lag en kopi (Control-C> Control-F) av den resulterende formen, og bruk den til å maskere frontdelens vinduer og høydepunkter (høyreklikk> Lag Clipping Mask), sørg for å sende dem til baksiden etterpå (høyreklikk> Ordne> Send bakover).
Legg til bakgrunnsvinduene ved hjelp av et par 2 px tykk Stroke linjer (# 45576B), vertikalt stablet 4 px fra hverandre. Start fra den ytre kanten av den større konturen og gå helt til den fremre delen. Så, når du er ferdig, velg og grupper alle bygningens former sammen med Kontroll-G hurtigtast.
Avslutt ikonet ved å tegne himmelen ved hjelp av et par 2 px tykk Stroke linjer (# 45576B). Når du er ferdig, gruppe (Kontroll-G) alle linjene sammen, gjør det samme for alle ikonets komponerende seksjoner.
Flott arbeid! Vår lille ikonpakke er fullstendig ferdig!
Jeg håper du har klart å følge hvert steg, og som alltid lært noe nytt og nyttig under prosessen.
Accentsconagua