Share
Hva du skal skapeTro det eller ej, julen er igjen nesten her, noe som betyr at som med hvert år er santa vanskelig på jobb og forbereder seg på en av de travleste nettene i livet hans. Det var tilfellet, jeg trodde jeg kunne låne ham en hånd og gi deg en fin liten godbit i form av en ikonpakke med juletema, som jeg er sikker på at du vil elske.
Som alltid skal vi bruke de mest grunnleggende verktøyene, så uten å kaste bort noe mer tid, ta en bit av den lille kaken og la oss komme i gang.
Å, og ikke glem at du alltid kan utvide pakken ved å sjekke ut GraphicRiver, hvor du finner tonn av juledem ikoner med et tastetrykk.
Siden jeg er sikker på 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. Det er fordi jeg kjører den nye CC 2017-versjonen av programvaren, hvor det er gjort store endringer på veien Illustratorhåndterer måtene som snaps til det underliggende Pixel Grid.
Siden vi skal lage ikonene med en piksel-perfekt arbeidsflyt, vil du sette opp en fin liten Nett slik at du kan få full kontroll over våre former - det vil si hvis du 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 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:
Dereferansegitter (eller grunnlinjer) 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 en allround 4 px padding.
Grupper de to rutene som komponerer referansegitteret ved hjelp av Kontroll-G tastaturgenvei, og opprett deretter to kopier på en avstand på 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.
Vi skal kaste av prosjektet ved å lage melk- og kakebehandler som vi normalt vil gi santa til å hjelpe ham i løpet av en av de vanskeligste arbeidsnasjonene i livet hans. Når det er sagt, sørg for at du er på riktig lag (det ville være det andre) og så zoom inn på det første referansegitteret slik at vi kan komme i gang.
Velg Pennverktøyet (P) og bruk den til å lage en 102 px bredt linjesegment med a 4 px tykk Stroke og a Round Cap, som vi vil farge ved hjelp av # 332828 og plasser deretter på det første aktive tegneområdet, tilpass det til nederste venstre hjørne.
Med det første segmentet på plass, lag det minste med en 6 px bred linje og det samme Stroke verdier, som vi vil justere til nederste høyre hjørne av det underliggende aktive tegneområdet.
Med begge linjene på plass, velg og gruppér (Kontroll-G) dem slik at de ikke blir skilt ved en tilfeldighet.
Opprett hovedformen til glasset ved å bruke a 52 x 116 px rektangel, som vi vil farge ved hjelp av # 83DBEA og deretter posisjoner i en avstand av 18 px fra det aktive tegneområdet på venstre kant og 2 px fra toppen.
Juster formen som vi nettopp har opprettet ved å sette inn Radius av sine nederste hjørner til 12 px fra innsiden av Forvandle panelets Rektangelegenskaper.
Legg til melkeseksjonen ved å lage en mindre 52 x 88 px rektangel (#efefef) som vi vil justere ved å sette inn Radius av sine nederste hjørner til 12 px og plasser deretter på den blå formen, midtjustere den til bunnkanten.
Legg glassets hovedplan ved hjelp av Stroke metode ved å lage en kopi (Control-C> Control-F) av hovedlegemet (den blå formen) som vi vil farge ved hjelp av # 332828 og juster deretter ved å bla (Shift-X) det er Fylle med dens Stroke, sette sin Vekt til 4 px.
Bruker Pennverktøyet (P), tegne det horisontale omrisset som skiller glassets innhold, ved å følge toppkanten av melkens hvite del, ved å bruke a 4 px tykk Stroke med fargen satt til # 332828.
Når du er ferdig, velg og grupper alle glassets komponerende figurer ved hjelp av Kontroll-G hurtigtast.
Flytt noen piksler til høyre, og opprett hovedkroppen med en 74 x 74 px sirkel, som vi vil farge ved hjelp av # C6866F og deretter justere til nederste høyre hjørne av det underliggende aktive tegneområdet, etterlate a 2 px gapet rundt det for omrisset.
Legg til informasjonen til kaken ved hjelp av samme prosess vi brukte til glassets hoveddel, og sett inn Stroke's Vekt til 4 px og fargen til # 332828.
Begynn å legge til detaljer i informasjonskapselens kropp ved å tegne litt hasselnøttsmuler ved hjelp av Pennverktøyet (P), som vi vil farge ved hjelp av # F7D6B5, gi dem det samme 4 px tykk oversikt (# 332828) med en Round Join.
Individuell gruppe (Kontroll-G) hver fylle form med sin disposisjon, og deretter gruppere (Kontroll-G) alle tre krummer sammen også.
Avslutt kaken ved å legge til små sjokoladeflisene ved hjelp av et par forskjellige sirkler (# 332828), som vi vil ønske å gruppere sammen med Kontroll-G hurtigtast.
Når du er ferdig, ikke glem å velge alle cookieens komponerende figurer og grupper (Kontroll-G) de også.
Begynn å jobbe med det lille takknemålet ved å lage hovedkroppen ved å bruke en 40 x 30 px rektangel (# E0694C). Gi formen a 4 px tykk oversikt (# 332828) og deretter gruppe (Kontroll-G) og plasser de to på baksiden av kaken, i en avstand på 32 px fra det aktive tegneområdet til venstre kant.
Opprett den indre detaljlinjens innføring ved hjelp av a 30 x 20 px rektangel (# 332828), som vi vil justere ved å bla (Shift-X) det er Fylle med en 2 px tykk Stroke senter, tilpasse den til den underliggende røde formen etterpå.
Bruker Pennverktøyet (P), Tegn i de to dummy tekstlinjene ved hjelp av a 4 px tykk Stroke med fargen satt til # 332828. Plasser de to linjene 2 px fra hverandre, og deretter gruppe (Kontroll-G) og sentrum justere dem til notatets hovedlegeme, gruppering (Kontroll-G) alle dens komponerende figurer også etterpå.
Når du er ferdig, ikke glem å gjøre det samme for hele ikonet, siden du ikke ønsker å håndtere "forsvinner" elementer.
Forutsatt at du har klart å fullføre det første ikonet, går du videre til neste lag (det ville være det tredje), og la oss begynne å jobbe med prosjektets andre komponerende element.
Før du låser det forrige laget, lager du raskt en kopi (Kontroll-C) av ikonets bunnlinjesegment og lim inn det (Kontroll-F) over på det andre referansegitteret.
Opprett hovedformen for den runde nåværende boksen ved hjelp av a 92 x 92 px sirkel, som vi vil farge ved hjelp av # 33AFBC og plasser deretter på øverste høyre hjørne av det underliggende aktive tegneområdet, og la en 2 px gapet rundt det for omrisset.
Legg til de små, horisontale fargebåndene med 22 vertikalt stablet 92 x 2 px rektangler (# 179AA0) plassert 2 px fra hverandre, som vi vil gruppere (Kontroll-G) og deretter sentrere til den formen vi opprettet i forrige trinn.
Nå, siden vi vil at stripene forblir begrenset innenfor overflaten av sirkelen, vil vi lage en kopi av sistnevnte (Kontroll-C), lim det inn (Kontroll-F) foran dem, og bruk det som en Clipping Mask (høyreklikk> Lag Clipping Mask).
Opprett hovedformen for den gyldne viklingen ved hjelp av en 18 x 92 px rektangel som vi vil farge ved hjelp av # E5BA5A og deretter sentrere midtpunktet til den underliggende sirkelen, i en avstand på 16 px fra det høyre tegningens høyre tegning.
Bruker Ellipseverktøyet (L), legg til et par forskjellige sirkler (# D1A246) til overflaten av den gyldne viklingen, gruppering (Kontroll-G) og deretter maskere dem (høyreklikk> Lag Clipping Mask) ved å bruke en kopi av det underliggende rektangel hvis du trenger det.
Gi det gylne rektangel a 4 px tykk oversikt (# 332828) og deretter gruppe (Kontroll-G) og masker alle dens komponerende figurer ved å bruke den underliggende sirkelen som en Clipping Mask (høyreklikk> Lag Clipping Mask).
Lag en liten 8 x 8 px sirkel (# E5BA5A) med en 4 px disposisjon (# 332828), som vi vil gruppere (Kontroll-G) og senterjustering til den større underliggende sirkelen.
Avslutt den sirkulære presentasjonsboksen ved å gi den en 4 px tykk oversikt (# 332828), velge og gruppere (Kontroll-G) alle sammen komponerer sammen etterpå.
Opprett hovedformen for den rektangulære gavebokens kropp, ved hjelp av a 64 x 48 px rektangel (# E0694C) med en 4 px tykk oversikt (# 332828), som vi vil gruppere (Kontroll-G) og deretter justere til bunnen av det aktive tegneområdet, med en avstand på 8 px fra sin venstre kant.
Legg på forpakningen med en 12 x 48 px rektangel (# 71B769) med en 4 px tykk oversikt (# 332828) som vi vil gruppere (Kontroll-G) og deretter midtjustere til det underliggende røde rektangel.
Opprett navnet på små navn ved hjelp av en 8 x 12 px rektangel (# E5BA5A) med en 4 px tykk oversikt (# 332828), som vi vil gruppere (Kontroll-G) og deretter sentrere til den nåværende boks høyre halvdel, med en avstand på 12 px fra sin disposisjon.
Bruker Pennverktøyet (P), Tegn inn den lille strengen som holder etiketten, ved hjelp av a 4 px tykk Stroke med fargen satt til # 332828, gruppering (Kontroll-G) de to sammen etterpå.
Når du er ferdig, grupper alle de rektangulære presentasjonsboksens former som vi har opprettet så langt med Kontroll-G hurtigtast.
Lag lokket til den nåværende boksen ved hjelp av en 72 x 12 px rektangel (# E0694C) med en 4 px tykk oversikt (# 332828), som vi vil gruppere (Kontroll-G) sammen og deretter posisjon på toppen av underkroppen, senteret justerer de to.
Legg dekselets lister med a 16 x 12 px rektangel (# 71B769) med en 4 px disposisjon (# 332828), som vi vil gruppere (Kontroll-G) og deretter sentrere til den formen vi nettopp opprettet i forrige trinn.
Lag midtdelen av båndet ved hjelp av a 16 x 10 px rektangel (# 59934E), som vi vil justere ved å sette inn Radius av sine øverste hjørner til 4 px. Gi den resulterende formen a 4 px tykk oversikt (# 332828) og deretter gruppe (Kontroll-G) og plasser de to på lokket, senteret tilpasser dem til det.
Lag den venstre halvdelen av båndets bue ved hjelp av a 14 x 8 px rektangel (# 59934E), som vi vil justere ved å sette inn Radius av sitt øverste venstre hjørne til 4 px og deretter spille med sin krumning. Gi den resulterende formen a 4 px disposisjon (# 332828) og deretter gruppe (Kontroll-G) og plasser de to på venstre side av formen fra forrige trinn.
Lag båndets høyre halvdel med en kopi (Control-C> Control-F) av den venstre, som vi vil vertikalt vende (høyreklikk> Transform> Reflektere> Vertikal) og deretter plassere på motsatt side av senterpartiet.
Når du er ferdig, grupper alle båndets komponerende figurer sammen med Kontroll-G tastaturgenvei, og gjør det samme for lokket og hele boksen.
Opprett hovedformen for den mindre gjeldende boksen ved hjelp av a 20 x 16 px rektangel, som vi vil farge ved hjelp av # 59934E, gir det en 4 px disposisjon (# 332828). Juster de to figurene til den nedre kanten av det underliggende aktive tegneområdet, plasser dem på høyre side av den rektangulære presentboksen.
Bruker Pennverktøyet (P), legg til fire 2 px tykke diagonale detaljlinjer (# 332828), gruppering (Kontroll-G) og deretter sentrere dem til det grønne rektangel som ble opprettet i forrige trinn. Når du er ferdig, velg alle de mindre presentatørens komponerende figurer og gruppe (Kontroll-G) de sammen også.
Avslutt den mindre gjeldende boksen, og med den selve ikonet, ved å legge på lokket. Vi lager den ved hjelp av en 24 x 8 px rektangel (# D1553D) med en 4 px disposisjon (# 332828), som vi vil gruppere (Kontroll-G) og deretter posisjonere over hovedkroppen, tilpasse dem til venstre side.
Når du er ferdig, gruppe (Kontroll-G) alle dens komponerende figurer, gjør det samme for hele ikonet etterpå.
Vi er nå nede på vårt tredje og siste ikon, så forutsatt at du allerede kjenner boret, zoom inn på referansegitteret slik at vi kan komme i gang.
Som vi gjorde med presentikonet, vil vi ha tak i en kopi (Kontroll-C) av bunnlinjesegmentet og lim inn (Kontroll-F) over det før du faktisk forplikter deg til å låse det tredje laget.
Begynn å jobbe på stearinlysplaten ved å lage en 48 x 6 px rektangel, som vi vil farge ved hjelp av # D1553D og deretter posisjon over bunnlinjesegmentet, i en avstand på 26 px fra det høyre tegningens høyre tegning.
Juster rektangelet ved å velge og skyve sine nedre ankerpunktertil sentrum av 2 px bruker Flytteverktøy (høyreklikk> Transformér> Flytt> Horisontalt> +/- 2 px avhengig av hvilket anker du starter med). Når du er ferdig, gi den resulterende formen a 4 px tykk oversikt (# 332828) og deretter gruppere dem sammen (Kontroll-G).
Lag plateens øvre del med en 60 x 6 px rektangel (# E0694C) med en 4 px tykk oversikt (# 332828), som vi vil gruppere (Kontroll-G) og deretter sentrere til basen, gruppere (Kontroll-G) de to seksjonene sammen etterpå.
Lag lysets bunnmetallseksjon ved hjelp av a 48 x 12 px rektangel (# A3A8AA) med en 4 px tykk oversikt (# 332828), på toppen av hvilken vi vil legge til en gruppe på fem 4 x 4 px sirkler (# 332828) plassert 4 px fra hverandre. Gruppe (Kontroll-G) sammen alle formene i den nåværende delen og deretter sentrere dem over platen som vi opprettet i de forrige trinnene.
Lag det faktiske lysestaken ved hjelp av en 40 x 80 px rektangel (# F2D2B1) med en 4 px tykk oversikt (# 332828), på toppen av som vi vil legge til et par diagonale 4 px tykke linjer (# 332828).
Når du er ferdig, velg og gruppér (Kontroll-G) alle dens komponerende former, posisjonering dem over metallstanden som vi opprettet i forrige trinn.
Avslutt lyset ved å lage det lille strengstykket ved hjelp av a 6 x 12 px rektangel (# 6D5858) med en 4 px tykk oversikt (# 332828) som vi vil gruppere og deretter sentrere seg til toppen. Når du er ferdig, ikke glem å velge og gruppere alle lysets komponerende figurer sammen ved hjelp av Kontroll-G hurtigtast.
Begynn å jobbe på den lille julekloden ved å lage en 62 x 62 px sirkel, som vi vil farge ved hjelp av # 83DBEA og plasser deretter på venstre side av det underliggende aktive tegneområdet, med en avstand på 2 px fra venstre kant og 14 px fra bunnen en.
Lag snøpartiet av kloden ved hjelp av a 62 x 20 px rektangel (#efefef), som vi vil justere ved å sette ned toppkanten ved å legge til et nytt ankerpunkttil midten og leker med håndtakene. Gi den resulterende formen a 4 px tykk oversikt (# 332828) med en Round Join, og deretter gruppe (Kontroll-G) og bottom-center juster de to til den underliggende sirkelen.
Masker snøprofilen ved hjelp av en kopi (Kontroll-C) av den blå sirkelen, som vi vil lime inn foran den (Kontroll-F), og deretter med begge former valgt, Høyreklikk og velg Lag Clipping Mask.
Bruk en annen kopi av den blå sirkelen (Control-C> Control-F), lager kloden sin oversikt ved hjelp av en 4 px tykk Stroke med fargen satt til # 332828.
Begynn å jobbe på juletræret ved å lage en 6 x 8 px rektangel (# 8E5C57) med en 4 px disposisjon (# 332828), som vi vil gruppere (Kontroll-G) og deretter sentrere seg til kloden, posisjonere dem slik at de ender overlappende snøplanen.
Opprett den nedre delen av treet ved hjelp av a 22 x 10 px rektangel (# 59934E), som vi vil justere ved å velge og skyve sine toppankerpunktertil sentrum av 6 px (høyreklikk> Transformér> Flytt> Horisontalt> +/- 2 px avhengig av hvilket anker du starter med). Gi den resulterende formen a 4 px tykk oversikt (# 332828) med en Round Join, og deretter gruppe (Kontroll-G) og plasser de to på toppen av kofferten, senteret tilpasser dem til den.
Opprett øvre delen av treet ved hjelp av en 18 x 16 px rektangel (# 71B769), som vi vil bli til en trekant ved å legge til et nytt ankerpunkttil midten av toppkanten ved hjelp av Legg til ankerpunktsverktøy (+), og deretter fjerner du sidene med Slett ankerpunktsverktøy (-). Gi den resulterende formen a 4 px tykk oversikt (# 332828) og deretter gruppe (Kontroll-G) og sentrere dem til underkroppen av treet, gruppere (Kontroll-G) alle dens komponerende figurer også.
Bruker Ellipseverktøyet (L), legg inn de små snøfnuggene ved hjelp av et par 2 x 2 px sirkler (#efefef), som vi vil gruppere ved hjelp av Kontroll-G hurtigtast.
Når du er ferdig, velg hele verdenens komponerende figurer og gruppe (Kontroll-G) de også.
Begynn å jobbe på kloden sin base ved å lage sin øvre del med en 46 x 8 px avrundet rektangel (# 93524C) med en 4 px tykk oversikt (# 332828), som vi vil gruppere (Kontroll-G) og deretter posisjonere på toppen av kloden, senter som retter dem til den nedre delen.
Opprett basens nederste del ved hjelp av a 54 x 12 px avrundet rektangel (# AF655B) med en 6 px hjørne radius og a 4 px tykk oversikt (# 332828), og senter deretter de to til seksjonen fra forrige trinn.
Legg til noen detaljer på klodenes base ved å legge til en 12 px bred detalj linje (# 332828) med Round Caps til sentrum, og a 4 x 4 px sirkel (# 332828) på en avstand av 2 px fra hver sin side.
Når du er ferdig, ikke glem å velge alle basenes komponerende figurer og grupper (Kontroll-G) dem sammen, gjør det samme for kloden og hele ikonet etterpå.
Jeg håper du har hatt så mye moro som jeg opprettet denne lille ikonpakken, og som alltid lært noe nytt under prosessen. Når det er sagt, ønsker jeg dere alle en varm jul i selskap med alle dine kjære.
Accentsconagua