Share
Med denne opplæringen vil jeg vise deg hvordan du lager et ikon for kartindikator som er perfekt for import til ditt neste kartbaserte appdesign. Vi bruker en enkelt form med flere utseendeattributter for å lage en enkel å bruke og redigere grafisk stil i Adobe Illustrator.
La oss begynne med å forberede dokumentet vårt. Åpne Illustrator og trykk Kommando + N for å opprette et nytt dokument. Skriv inn 500 i breddeboksen og 500 i høydeboksen, og klikk deretter på Avansert-knappen. Velg RGB, Skjerm (72ppi) og kontroller at boksen Juster nye objekter til pixelruten er fjernet fra merket før du klikker OK.
Når du arbeider med oppløsning uavhengige enheter, er pixel perfeksjon et must, og for å skape skarpe figurer ville det være lettere å ha Grid View satt opp og Pixel Snapping aktivert slik at vi gjør det nå. La oss aktivere gridet (Vis> Vis grid) og deretter Snap to Grid (Vis> Snap to Grid). Etter at de er på, trenger du et rutenett hver 1 px. Bare gå til Illustrator> Innstillinger> Guides & Grid, skriv inn 1 i gridlinjen hver boks og 1 i underrubrikkene. La oss nå sette måleenheten til piksler fra Illustrator> Innstillinger> Enhet> Generelt. Når du er ferdig, bør dokumentet se ut som bildene nedenfor.
Nå som dokumentet vårt er satt opp, la oss begynne med å lage vår sirkelform som brukes til indikatorikonet. Siden vi lager for en netthinnen skal vi jobbe med dobbel størrelse på objektet vi vil lage. På vår netthinnenhet vil vi at indikatoren ser ut til å være 16px med 16px så hvis vi multipliserer det med 2, kommer vi til 32px. Med dette i tankene la oss velge vårt Ellipseverktøy (L) og deretter klikke hvor som helst på lerretet. Når dialogboksen vises, kan du skrive inn 32px for både bredde og høyde. Dette vil skape den perfekte sirkelen som trengs for vår indikator.
Tips: Trykk på bokstaven "D" på tastaturet for å tilbakestille Fyll og Stroke farge til standardinnstillingene.
Med vår form trukket kan vi komme til de morsomme tingene. Åpne Utseende-panelet (hvis det ikke allerede er gått til Vindu> Utseende), og la oss begynne å lage vårt ikon.
Det er ganske mange utseendeattributter for denne formen, slik at det blir enklere å følge, vi jobber fra bunnen av i utseendepanelet.
For å begynne, velg det nederste fyll-elementet i Utseende-panelet, og vi oppretter en ugjennomsiktig, gjennomsiktig radialgradient som beskrevet i bildet nedenfor, og juster Opacity til 50%. Med det fulle elementet som er valgt, vil vi også klikke på knappen Legg til ny effekt (det ser ut som bokstavene "fx") nederst på Utseendepanelet, og velg deretter Sti> Offset Path og angi attributter som er skissert nedenfor. Vi må også Transform fill-elementet, så velg knappen Legg til ny effekt igjen og naviger til Distort & Transform> Transform og skriv inn attributter som vist nedenfor. Hvis du ikke har gjettet det ennå, vil dette være skyggen for indikatorikonet, og det vi har gjort er å lage en helt vektor dråpe skygge som gir en liten halo til vår hovedform og er nudged ned akkurat nok til å gi dybde. Det ser ikke ut som mye nå, men det begynner å trekke sammen snart.
La oss nå opprette et annet fyll element over gradientfyllingselementet. Som standard vil dette legge til vår svarte til gjennomsiktige gradient, men vi må fjerne denne gradienten i stedet for en flat farge. La oss fortsette, og velg en fin lys rød farge for dette laget som beskrevet nedenfor. På dette tidspunktet kan det virke rart å bruke en så levende rød, men det vil alle gi mening i et øyeblikk. Dette bunnlaget vil virke som både vår grunnfarge og vårt sekundære høydepunkt når vi går videre til neste trinn.
Igjen, la oss skape et annet Fyll-element. Dette vil standardisere den flate røde fargen vi valgte tidligere, men vi ønsker en fin radialgradient for dette elementet, så velg Gradient-panelet og skriv inn attributter som er skissert nedenfor. En fin lilla til hvit kombinasjon satt til Multiply og Opacity falt til 50% vil legge til en fin full bodied avrundet 3D form til ikonet. For å skyve 3D-effekten enda lenger, la vi Zoom (Z) inn på vårt ikon til vi ser de enkelte pikselfirkantene på vårt kunstbrett. Med det gradientelementet som er valgt, velger du Gradient Tool (G) fra verktøylinjen, og dette vil vise gradientlinjen over ikonet. Vi skal klikke og dra denne linjen opp ca 2,5 piksler ved hjelp av vårt kunstbrett som en guide, sørg for å holde linjen så sentrert som mulig.
Nå begynner vi å lage vår primære lyskilde. Husk at vi jobber fra bunn til topp, slik at det ikke kan være fornuftig før vi er ferdig med de neste trinnene.
Husk at vi prøver å skape en lys glans på vårt ikon. Det står til grunn at denne glansen vil kaste litt diffusjonsbelysning mot vårt objekt, så dette er hva vi skal lage nå. Igjen skal vi lage et nytt Fyllingslag. La oss justere denne gradienten, slik at den er ugjennomtrengelig til gjennomsiktig som beskrevet nedenfor, med en over 60% åpenhet. Velg Gradient Tool (G) og bruk det hvite håndtaket med det svarte senteret på venstre side av graderingsmarkeringen, og dra det som håndterer mot midten av sirkelen, slik at det er nesten halvparten av originalstørrelsen, og deretter klikker du på senterlinjen og dra den opp og over til venstre litt. Hold øye med dette laget, siden du kanskje vil komme tilbake til det senere for å linke opp det nøyaktig med vårt viktigste hvite markeringslag senere.
Nå som vi har litt diffusjon vil vi legge til en glød til høydepunktet selv. Opprett et annet fyll lag og fyll det med en hvit til gjennomsiktig gradient som beskrevet nedenfor. Vær oppmerksom på at gradientposisjonen stemmer overens med laget nedenfor, før du justerer denne gradienten, klikker du på "Ingen" -prøven i panelet Støtter for å fjerne den fyllingen og deretter legge til den nye ugjennomsiktige gjennomsiktige gradienten slik at stillingen er nullstilt . Med gradienten på plass vil vi ønsker å kompensere og transformere dette fyllingslaget også. Klikk på knappen Legg til ny effekt (det ser ut som bokstavene "fx") nederst på Utseendepanelet, og velg deretter Sti> Offset Path og angi attributter som er skissert nedenfor. Vi må også Transform fill-elementet, så velg knappen Legg til ny effekt igjen og naviger til Distort & Transform> Transform og skriv inn attributter som sett under.
Med det lyser ut av veien la vi legge til vår faktiske høydepunkt. Klikk på Legg til ny fyll-knappen igjen og fyll den med en flat hvit farge. Velg deretter knappen Legg til ny effekt (det ser ut som bokstavene "fx") nederst på Utseendepanelet, velg deretter Sti> Offset-vei og skriv inn attributene som er skissert under. Vi må også Transform fill-elementet, så velg knappen Legg til ny effekt igjen og naviger til Distort & Transform> Transform og skriv inn attributter som sett under.
På dette tidspunktet kan du gå tilbake til det røde gradientdiffusjonslaget vi gjorde noen få skritt tilbake og justere midtpunktet for gradienten for å være direkte under det hvite høydepunktet.
La oss nå justere den svarte grensen som har satt der og stirrer på oss hele tiden. Vi setter den til utsiden med en slagvekt på 2px og fargen som er skissert nedenfor.
Indikatoren i seg selv er nå fullført, men la oss ta det et skritt videre og lage GPS-radiusringen også. Klikk på Legg til ny fyll-knappen igjen og fyll den med en rød til gjennomsiktig gradient som beskrevet nedenfor og slipp Opacity til 25%. Deretter velger du Add New Effect-knappen (det ser ut som bokstavene "fx") nederst på Utseendepanelet, og deretter velger du Sti> Offset Path og skriver inn attributene som er skissert nedenfor.
For det siste stykket av ikonet legger vi til grensen rundt GPS-radiusringen. Klikk på Add New Stroke-knappen nederst på Utseendepanelet, og velg en 2px rød slagvekt på innsiden av formen. La oss nå kompensere banen ved å klikke på knappen Legg til ny effekt (det ser ut som bokstavene "fx") nederst på Utseendepanelet, og velg deretter Sti> Offset Path og angi attributter som er skissert nedenfor. Og så til slutt legger vi til et ytre glød på dette slag. For å gjøre det, klikk på Legg til ny effekt-knappen (det ser ut som bokstavene "fx") nederst på Utseendepanelet, og velg deretter Stil> Outer Glow
På dette punktet kan du Shift + Klikk på de to GPS-radius-ringelementene for å velge dem begge i Utseendepanelet, og dra dem til bunnen av denne listen slik at selve indikatorikonet sitter på toppen.
Med indikatoren ut av veien, oppretter vi nå navnet. Velg verktøyet avrundet rektangel og klikk på siden og skriv inn informasjonen som er skissert i bildet nedenfor. Vær oppmerksom på at bredden kan være alt du ønsker så lenge navnet du velger senere passer, men i den hensikt med denne opplæringen bruker vi denne settbredden.
Vi må også klikke en gang til med verktøyet avrundet rektangel for å lage pilen på bunnen. for dette trenger vi den til å være helt firkantet, og vi vil slippe radiusen, så vel som angitt nedenfor. Når formen er laget, la vi rotere den 45 grader. For å gjøre dette, velg markeringsverktøyet (V) og plasser deretter musen nær hvert hjørne av torget og mens du holder Shift-tasten på tastaturet, dra formen i hvilken som helst retning til det ser ut til en diamant som vist på skjermbildet under.
Nå justerer vi disse objektene for å være sentrert med hverandre. Med markeringsverktøyet (V) i håndskift klikker du på begge objektene, slik at de begge blir valgt samtidig. Vi navigerer nå til Juster-panelet (Vindu> Juster), og velger det andre alternativet under Høydejusteringssenteret Juster objekter. Deretter klikker du på det siste alternativet under samme overskrift som heter Vertikal Juster Bunn.
Med valgverktøyet (V) fortsatt aktivert, klikk på den mindre diamantformen, så det er den eneste objektet som nå er valgt. Mens du holder Shift på tastaturet, trykker du på pil ned på tastaturet en gang. Slip skift og trykk tre ganger på pil ned på tastaturet for å flytte diamanten til den perfekte posisjonen.
Shift klikk på den større avrundede formen, så begge objektene blir valgt igjen og navigere til Pathfinder-panelet (Vindu> Pathfinder), og klikk deretter på det første alternativet under overskrift Formater-tittelen Unite. Begge gjenstandene skal nå bli slått sammen til en.
Med vår pop up. form nå opprettet, vil vi jobbe med styling den. Med den valgte formen navigerer du til Utseendepanelet (Vindu> Utseende) og velger Stroke. Vi vil holde dette som grunnleggende svart, men la oss sette det til å ligge utenfor formen med en slagvekt på 2px.
Deretter velger du Fyll og vi fyller dette med en gråskala halvtransparent 90 graders gradient som beskrevet nedenfor.
Til slutt legger vi til en dråpeskyggingseffekt på dette objektet. Klikk på knappen Legg til ny effekt (det ser ut som bokstavene "fx") nederst på Utseendepanelet, og velg deretter Stil> Slett skygge og skriv inn alternativene som er skissert i skjermbildet under.
La oss gi dette objektet et fint høydepunkt øverst. Med det valgte objektet vil vi kopiere (Command + C) og deretter Lim inn foran (Command + F). La oss raskt tilbakestille til standard stil ved å trykke "D" på tastaturet. Dette fjerner effektene vi la til tidligere, og returnerer formen til grunnleggende hvitt med svart slag. For dette høydepunktet trenger vi ikke et slag, så naviger til Verktøy-panelet og klikk på slagfyllingsalternativet nederst for å velge det. Deretter klikker du på det hvite torget med den diagonale røde linjen gjennom den for å fjerne slaget helt. Med strekningen borte, la oss kopiere den (Command + C) og deretter Lim inn foran (Command + F) igjen, slik at vi nå har to vanlige hvite figurer en oven på den andre. Da mens toppformen er valgt og valgverktøyet (V) er aktivert, trykker du på nedpilen på tastaturet to ganger for å dytte objektet nedover. Når du er nudged, skift klikk på det enkle objektet bak den for å velge begge samtidig. Mens begge objektene er valgt, navigerer du til Pathfinder-panelet (Vindu> Pathfinder) og velger det andre alternativet under overskriften "Shape Modes" med tittelen "Minus Front". Du bør nå være igjen med en liten sliver av den originale figuren øverst. Med denne sliver valgte, la oss senke den Opacity til 25% i Utseendepanelet (Vindu> Utseende).
Nå lager vi teksten for dette popup-vinduet. Velg Typeverktøyet (T) fra Verktøy-panelet, og klikk deretter på kunstbrettet og skriv ut navnet du ønsker. I Verktøy-panelet klikker du Fyll farge og bytter det til hvitt. Gå nå til tegnpanelet (Type> Type> Tegn) og juster størrelsen og skrifttype som beskrevet nedenfor.
Med den valgte teksten navigerer du til Utseendepanelet (Vindu> Utseende) og klikker Legg til ny effekt-knappen (det ser ut som bokstavene "fx") nederst på Utseendepanelet, og deretter velger du Stil> Slå skygge og skriv inn alternativene som er skissert i skjermbildet nedenfor. Vi kan også bruke markeringsverktøyet (V) til å dra teksten til ønsket sted i bobleformen. Fordi Smart Guides og Snap to Grid er aktivert, bør dette være enkelt å finne.
Med teksten ute av veien, la oss lage pilikonet. Velg verktøyet avrundet rektangulære og klikk på kunstbrettet, og koble deretter til disse alternativene.
Velg nå markeringsverktøyet (V) og klikk på det nyopprettede rektangelet. Med det valgte objektet vil vi kopiere (Command + C) og deretter Lim inn foran (Command + F). La oss nå rotere dette nye objektet 90 grader. Nå justerer vi disse objektene for å danne en baklengs L-form. Med markeringsverktøyet (V) i håndskift klikker du på begge objektene, slik at de begge blir valgt samtidig. Vi navigerer nå til Juster-panelet (Vindu> Juster), og velg det tredje alternativet under Høydejusteringsjustering høyre linje. Deretter klikker du på det siste alternativet under samme overskrift som heter Vertikal Juster Bunn.
Med begge gjenstandene som er valgt, navigerer du til Pathfinder-panelet (Vindu> Pathfinder), og klikker deretter på det første alternativet under overskrift Formater-tittelen Unite. Begge gjenstandene skal nå bli slått sammen til en. Med valgverktøyet (V) fremdeles valgt, kan vi rotere formen 45 grader. For å gjøre dette, velg markeringsverktøyet (V) og plasser musen nær hvert hjørne av torget og hold inne Shift-tasten på tastaturet, dra et hjørne til høyre for avgrensningsboksen til det ser ut til at en pil peker mot Ikke sant.
Med pilen som er valgt, navigerer du til Utseendepanelet (Vindu> Utseende) og klikker Legg til ny effekt-knappen (det ser ut som bokstavene "fx") nederst på Utseendepanelet, og deretter velger du Stil> Slå skygge og skriv inn alternativene som er skissert i skjermbildet nedenfor. Vi kan også bruke markeringsverktøyet (V) til å dra pilformen til ønsket sted i bobleformen.
Med pop opp. seksjonen fullført aktiverer valgverktøyet (V) og drar ut et valg over alle popup-vinduene. objekter å velge dem alle samtidig. Gå nå til Objekt> Gruppe (Kommando + G) i menypanelet for å gruppere disse objektene sammen. Vi kan deretter dra denne gruppen over indikatorikonet og senter det slik at det ser ut som skjermbildet nedenfor. Og med det på plass, er vi ferdige!
Jeg håper jeg kunne vise deg hvordan du bruker panelet Utseende til å lage komplekse effekter uten behov for ekstra lag. Du er velkommen til å spille med forskjellige farger som du finner passende. Med så mange oppløsnings uavhengige enheter som flyter rundt i dag, er det veldig flott å kunne bruke uendelig skalerbare objekter som kan brukes og gjenbrukes i app-designene dine..
Accentsconagua