Share
Denne opplæringen vil gi eksempler på tre- og teksturtekstdannelsesteknikker. Også vi lærer å gjøre lysspillet på objektene ved hjelp av Opacity Mask, Blend Tool og Art Brushes. Når du studerer denne veiledningen trinn for trinn, vil du bli kjent med alle hemmelighetene til profesjonell ikondesigndesign.
Ikonene for iOS-applikasjoner har en typisk størrelse. Selv om vi skal bruke en vektorredigerer, vil ikonet bli gjort med ønsket forhåndsinnstilt størrelse. Forståelse av ovenstående gjør det mulig for oss å lage en profesjonell grafikk, unngå å skape uvanlig detalj, noe som aldri skal synliggjøre i reell skala eller kunne påvirke dens generelle visning.
I dag skal vi lage et ikon med størrelsen 512 ved 512 px. Denne størrelsen brukes til visning i iTunes, inkludert CoverFlow og App Store. Retro stilen regnes som en av de fancy retningene av moderne design. Derfor har jeg bestemt meg for å lage Radio App Icon som et retro-stilrad i midten av forrige århundre.
Vi begynner med å bruke det runde rektangelverktøyet til å forme ikonformen som har et sett på ønsket størrelse og hjørneavrundingsradius, som vist nedenfor.
Fyll skjemaet med mørk brun farge.
Alle objektene vil bli farget i løpet av ikonet skapelsesprosessen, men det er pålagt å forhåndsvise lyskildens posisjon. I vårt tilfelle er lyskilden øverst til høyre. Gradientfyllene, drop shadow direction, høydepunkt og intensitet avhenger av posisjonen.
Bruk av noen lyskilder eller lignende bilder skal unngås. Dette er fordi vår hjerne oppfatter den virkelige verden og grafikken på en annen måte; Derfor, hvis det skulle være noen lyskilder brukt, kan bildet ditt se unaturlig og til og med miste sine 3-D-funksjoner. Vi må bruke vår kunstneriske dømmekraft ved å bestemme hvordan vi skal vise lys på vårt ikondesign.
Lag en kopi av det runde rektangelet og lim det direkte på toppen av den forrige (Command + C; Command + F). Fyll kopien med en lineær gradient bestående av flere brune farger med lyse og mørke toner.
Som du kan se, er lysere glidebrytere av gradienten plassert til høyre for dette skjemaet, i henhold til lyskildeposisjonen.
Lag en kopi av det siste avrundede rektangel laget og lim det inn foran. Fyll den med en svart til hvit gradient, som vist i figuren nedenfor.
Velg to øverste rektangler og opprett en Opacity Mask ved å velge Lag Opacity Mask i menyen Transparency Panel.
Derfor har vi oppnådd ujevn lysfordeling i den øverste delen av bildet.
Lag en kopi av rektangelet som opprinnelig ble opprettet under første trinn, og lim det inn foran. Legg det nye skjemaet på toppen av alle opprettede objekter og fyll det med en mørk brun til brun lineær gradient.
Velg punktene A, B, C og D ved hjelp av Direct Selection Tool (A), flytt deretter den vertikalt ned ved å holde Shift-tasten nede for å begrense den.
Hold objektet som er valgt, gå til Objekt> Sti> Offset-vei, og angi offset-verdien som vises i dialogboksen.
Fyll rektangelet med en mørk brun farge.
Gå nå til Objekt> Blend> Blandingsalternativer, og angi antall angitte trinn som vises i dialogboksen. Velg to skjemaer øverst og gå til Objekt> Blend> Lag.
Lag en kopi av toppobjektet og lim det inn foran. Flytt det nye skjemaet fra blandingsobjektet i Lagpanelet.
Fyll den med en lysebrun farge.
La oss nå lage vektortrestruktur. Bruk rektangulærverktøyet (M) til å lage et gråfylt rektangel. Høyden til et slikt rektangel skal være mer enn det lysebrune rektangelet.
Hold objektet valgt, gå til Effekt> Skisse> Grafisk penn og angi parametrene for en slik effekt i dialogboksen.
Gå nå til Objekt> Utvid utseende, og deretter til Objekt> Live Trace> Trace Options, og angi parametrene vist i figuren under.
Gå til Objekt> Utvide og utvide vektorteksturen horisontalt ved hjelp av Utvalgsverktøyet (V), mens Alt-tasten holdes nede. Teksturbredden skal være mer enn den lysebrune avrundede rektangelet.
Fyll tekstur med en lysebrun farge. Denne fargen skal ha en litt lysere tint i forhold til rektangelet plassert under den.
Bruk Krypverktøyet; Dobbeltklikk på dette verktøyikonet i verktøylinjen, som åpner dialogboksen med innstillingene.
Påfør horisontale og vertikale forskyvninger av teksturkornene ved hjelp av Warp Tool.
Velg hele tekstur og gå til Effect> Distort & Transform> Roughen, og sett parametrene for en slik effekt samtidig observere endringene som brukes på tekstur.
Lag en kopi og lim inn tekstur foran. Fyll kopien med mørkere fargen i brun farge og flytt den litt ned. Endre parametrene for Roughen-effekten; Still multipliseringsmodusen og senk Opacity. Alle disse parameterne er tilgjengelige fra Utseendepanelet.
Ved å bruke teknikken som er beskrevet i trinn 7 og 8, har jeg opprettet en annen type tekstur og plassert den over de to foregående. For demonstrasjonsformål har synligheten til de to første teksturene blitt deaktivert, som vist i figuren under.
Imidlertid ser alle teksturer sammen som følger.
Bruk pennverktøyet (P) til å gjøre formen på skyggen.
Hold objektet som er valgt, gå til Effect> Blur> Gaussian Blur, og sett radiusverdien som vist nedenfor.
Bruk multipliseringsmodusen og senk Opacity ved hjelp av Transparentpanelet.
Lag en kopi av det lysebrune avrundede rektangelet og lim det inn foran. Legg kopien over alle tidligere opprettede objekter.
Velg alle teksturer, skyggeformen og topprundet rektangel, og klikk deretter på snarveien Command + 7, og dermed opprette Clipping Mask.
Nå er skyggen og alle gjenstander av tekstur gruppert. Reduser opaciteten til denne gruppen ved hjelp av gjennomsiktighetspanelet.
Velg underlaget med Clipping Path i Layout-panelet og lim det inn foran.
Flytt den opprettede banen ut fra gruppen med klippingsti og fyll den med en hvit til grå lineær gradient.
Bruk multipliseringsmodusen for objektet ved hjelp av gjennomsiktighetspanelet.
La oss nå lage en radiosett tuning skala. Bruk Ellipse Tool (L) til å tegne en mørk brun fylt ellipse.
Lag en kopi av den opprettede ellipsen og lim den inn foran. Hold nede Alt + Shift-tastene, og senk størrelsen på ellipsen på toppen ved hjelp av valgverktøyet (V).
Velg begge ellipser og gå til Objekt> Blend> Lag.
Lag to flere ellipser som vist på figuren nedenfor.
Bruk saksverktøyet (C) til å kutte ellipser i punkt 1-8. Slett segmentene mellom dem.
Bruk den aktuelle profilen fra Stroke-panelet til de venstre segmentene.
Velg alle segmentene og gå til Objekt> Utvid utseende. Nå kan vi fylle objekter med lineære gradienter. Derfor har vi opprettet glares på tuning skala rim.
Opprett den nye ellipsen og fyll den med en kompleks lineær gradient, som vist på figuren nedenfor.
Deretter fyller vi de to ellipser med en brun farge og lineær gradient.
La oss lage en serie ellipser med slag av forskjellige bredder og uten å fylle dem.
Velg dem og gå til Objekt> Utvid. Nå fyll dem med lineære gradienter som vist i figuren under.
Tegn ellipsen i midten av innstillingsskalaen.
Fyll den med en konisk gradient.
Detaljert instruksjoner for slik konisk gradient fylling opprettelse er gitt i min opplæring tilgjengelig her Opprett en konisk gradient med Adobe Illustrator, om to minutter!.
Bruk pennverktøyet (P) til å tegne en skrånende linje som kommer over midtpunktet til den sentrale ellipsen.
Bruk Saksverktøyet (C) til å kutte det i to punkter og slett deretter det sentrale segmentet.
Velg begge segmentene og gå til Objekt> Utvid; nå fyll objektene med en hvit til gul lineær gradient.
Velg begge segmentene, kopier dem og lim det inn på baksiden. Fyll de nedre segmentene med en mørk grå farge og flytt dem litt ned.
La oss skape blendingen. Bruk Ellipse Tool (L) til å tegne en ellipse. Vri og strekk den nå, og dra den en av punktene i retning av tuningskalasenteret ved hjelp av direkte utvalgsverktøyet (A). Fyll objektet med en lys gul farge.
Deretter tegner du en ellipse og fyller den med en hvit farge.
Angi Opacity-verdien på 0% i Transparent-panelet for det nedre plassert objektet.
Velg begge objektene, og ha brukt dem som basis, lag blandingen (Objekt> Blend> Lag).
Tegn en ekstra ellipse og legg den under alle tuningsskalaobjekter. Fyll den med svart, bruk multipliseringsmodusen, og senk Opacity i Transparency-panelet.
La oss nå fortsette til den radioinnstilte høyttaleropprettelsen. Bruk pennverktøyet (P) til å lage skjemaet som vises i figuren under.
Opprett nå sirkelen, velg begge skjemaene, og trykk på Minus Front-tasten i Pathfinder-panelet.
Fyll det oppnådde skjemaet med en mørk beigefarge.
Dessverre er det ikke effektivt å rundt hjørner av slike skjemaer ved hjelp av standard Adobe Illustrator-verktøy. Round Corner-effekten er ikke aktuell i slike tilfeller, da det forvrenger hele skjemaet.
Derfor er det nyttig å runde hjørnene manuelt ved å legge til punktene og flytte dem ved hjelp av håndtak. Den mest hensiktsmessige måten jeg har valgt for å løse dette problemet, er VectorScribe-pluginet som muliggjør enkel avrunding av alle hjørner ved hjelp av Dynamic Corners Tool.
La oss lage stofftekstur på høyttaleren. Bruk rektangulærverktøyet (M) til å tegne et rektangel med en bredde på 1 px.
Fargefyllingen for et slikt rektangel kan være noe for øyeblikket. Hvis du forlater rektangelet som valgt, går du til Objekt> Transformere> Flytt, og angir den horisontale forskyvningsverdien, og deretter trykker du på Kopier-knappen.
Trykk nå på Command + D så mange ganger som nødvendig for å dekke høyttalerformen med rektangelkopiene.
Det kreves at alle slike rektangler er fylt med forskjellige farger med brun farge. Til vår lykke kan dette gjøres automatisk. Bruk fargepanelet til å lage noen farger med brun farge og lagre dem i panelet Farger.
Nå, velg alle rektangler, velg de nødvendige fargene i panelet Fargeprøver, og start skriptet Random Color Swatches. Du kan laste ned dette freeware-skriptet og få detaljert informasjon om det ved å klikke på følgende kobling Tilfeldig fargeprøvefyll.
Hold rektanglene valgt, gå til Effect> Distort & Transform> Roughen, og sett parametrene for effekten.
Grupper alle rektangler. Påfør den tidligere beskrevne teknikken for å lage en gruppe av horisontale rektangler.
Bruk multipliseringsmodus for gruppen.
Kopier høyttalerskjemaet og lim det inn foran, og legg det over alle objektene.
Velg stofftekstur og det øverste skjemaet ved å bruke Command + 7, og dermed opprette Clipping Mask.
Bruk Rectangle Tool (M) til å tegne noen rektangler, som skal fylles med en lineær gradient.
Grupper dem og dra dem til gruppen med klipping masken på høyttaleren. Denne manipulasjonen skal gjøres i lagpanelet.
Kopier de grupperte rektanglene og lim dem inn på baksiden. Fyll gruppen med en grå farge og bruk multipliseringsmodusen ved hjelp av gjennomsiktighetspanelet.
Nå er skyggen skapt.
La oss lage påskriften på høyttaleren. For dette formålet har jeg brukt Sf American Dreams skrift som kan lastes ned ved å klikke på følgende link. Så bruk typeverktøyet (T) og opprett innskriftet "Radio".
Hold teksten som er valgt, gå til Type> Opprett oversikter, og deretter Til objekt> 3D> Ekstruder og kommando, og angi parametrene for effekten vist i figuren under.
Du kan også justere objektbelysningen; For dette formål er det nødvendig å trykke på More Options-tasten i denne dialogboksen.
Kopier innskriften og lim den inn på baksiden. Fyll den lavt plasserte påskriften med en grå farge, og bruk deretter multipliseringsmodusen med en nedsatt tetthet i gjennomsiktighetspanelet. Nå flytte den litt ned og til høyre. Dermed er skapt skyggen av innskriften opprettet.
Bruk pennverktøyet (P) til å lage skjemaet til slutten av åpningen i radiosettet.
Bruk teknikken beskrevet i trinn 7-8 for å lage tekstur for dette objektet.
Lag skyggenes form fra høyre kant av åpningen i radiosettetui og fyll det med en brun farge.
Dra underlaget med dette skjemaet til gruppen med klipping masken på høyttaleren.
Hvis du forlater objektet som valgt, går du til Effekt> Uklarhet> Gaussisk uskarphet, og angir uklarheten i dialogboksen.
Nå, reduser skyggeformens opasitet.
La oss nå lage indikatoren. Teknikken til opprettelsen ligner de samme som bare beskrevet i denne opplæringen; derfor skal jeg vise deg trinnene i den skapelsen for at du skal jobbe fra.
Nå er det på tide å lage tunere. Bruk pennverktøyet (P) ved å lage skjemaet som ligner på skjemaet som er vist i figuren nedenfor.
Dra dette skjemaet til Penselpanelet og lagre den nye penselen som mønsterbørsten.
Lag omkretsen og bruk mønsterbørsten til den.
Hold mottakerskjemaet valgt, gå til Objekt> Utvid utseende, og bytt fyll og strekk.
Bruk Ellipse Tool (L) for å lage sirkelen vist i figuren nedenfor.
Velg alle tunerelementene og trykk på Unite-knappen i Pathfinder-panelet.
Gjør den innhentede formularen mindre og plasser den i bunnen av radiosettet.
Fyllfarge for slike former kan være noe for øyeblikket.
Velg mottakeren og gå til Effekt> 3D> Ekstruder og kommando, og sett deretter parametrene vist i figuren under.
Gå nå til Objekt> Utvid Utseende. De nevnte manipulasjonene skal resultere i opprettelsen av den vanlige vektorobjektgruppen. Fyll mottakerens endeflater med lineære gradienter for å gjøre lysfordelingen på dem.
Lag ellipsen på forsiden av tuneren og fyll den med en radial gradient, som vist på figuren nedenfor.
Nå lager rimen på tuneren, og fyll den med en lineær gradient.
Glarene på tuneren opprettes ved hjelp av Blend-objekter ved å anvende teknikken beskrevet ovenfor.
Det er mulig å bruke en annen teknikk for å opprette glares. Bruk blyantverktøyet (N) til å lage skjemaet for glares med følgende bruk av Gaussian Blur-effekten.
Disse skjemaene gjengir myk belysning. Nå, la oss skape mer intensive glares. De nevnte skjemaene er også opprettet ved hjelp av blyantverktøyet (N), men uten bruk av Gaussian Blur-effekten i dette tilfellet.
Bruk to ellipser og blandingsverktøyet til å lage skyggen fra tuneren.
Grupper alle elementene i tuneren, og dupliser den to ganger, etter å ha plassert tunere som vist på figuren nedenfor.
La oss fortsette med etableringen av glares på radiosettet. Bruk to ellipser til å lage Blend-objektet.
Dra den til Penselpanelet og lag den nye penselen som Art Brush.
Bruk nå lignende pensler som er nevnt for å skape alle glares.
Så, vi har laget et ikon med størrelsen 512 ved 512 px. Det er mulig å bruke eksisterende objekter for å lage ikoner med andre størrelser. Til vår lykke, har vi å gjøre med "dimensjonsløs" vektor. Det anbefales imidlertid å endre noen elementer når du endrer størrelsen.
For eksempel for ikonene som er mindre størrelser, anbefales det å endre påskriftet for å gjøre det lettere å lese. Du kan også forenkle teksturen og slette noen glares. Når du har brukt transformasjoner, må du alltid kontrollere effektiviteten ved å se på ikonet for ekte størrelse.
Et hvilket som helst ikon for iOS-applikasjoner skal endelig ha det bitmaperte formatet (PNG), og du kan derfor se bildene dine i Pixel Preview-modusen (Se> Pixel Preview) for å estimere kvaliteten på sluttproduktet.
Det siste ikonet er vist nedenfor.
Accentsconagua