Quick Tips: Hvordan lage iOS Kart Indikatorer med Graphic Styles
Dette innlegget er en del av en serie som heter Vector Mobile App Design.Create en Weather App Design for iOS i Adobe IllustratorHow til Lag en Pub Chalk Board UI i Adobe Illustrator

Med denne opplæringen vil jeg vise deg hvordan du oppretter en iOS-kart indikatorikonet perfekt for import til din neste kartbasert app design. Vi skal bruke en enkel form med flere Utseende attributter for å lage en enkel å bruke og redigere grafiske stilen i Adobe Illustrator.

Trinn 1

La oss starte med å forberede våre dokumentet. Åpne Illustrator og trykke Command + N for å opprette et nytt dokument. Skriv inn 500 i bredden boksen og 500 i høyden boksen og klikk på knappen Avansert. Velg RGB, Screen (72ppi) og sørg for at Align nye objekter til Pixel Grid boksen ikke er krysset før din klikker OK.

Når du arbeider med oppløsning uavhengige enheter pixel perfeksjon er et must, og for å skape skarpe figurer det ville være lettere å ha Grid View satt opp og Pixel Festing aktivert så vi får gjøre det nå. La oss gjøre det mulig Grid (View > Vis rutenett) og deretter Fest til rutenett (View > Fest til rutenett). Etter de er på, trenger du et rutenett hver 1px. Bare gå til Illustrator > Preferanser > Guides & Grid, skriver en i linjenettet hver boks og en i underinndelinger boksen. Nå la oss sette måleenhet til piksler fra Illustrator > Preferanser > Unit > General. Etter fullført dokumentet skal se ut bildene nedenfor.

Trinn 2

Nå som vår dokumentet er satt opp La oss begynne med å skape vår sirkel form brukes for indikatorikonet. Siden vi skaper for en retina-skjerm må vi jobbe doble størrelsen på objektet vi ønsker å skape. På vår hinnen enheten vil vi ønsker indikatoren å fremstå som 16px av 16px så hvis vi multipliserer det med to kommer vi til 32px. Med dette i tankene la oss velge vår Ellipse Tool (L) klikk deretter hvor som helst på lerretet. Når vises dialogboksen la oss type i 32px for både bredde og høyde. Dette vil skape en perfekt sirkel trengte for våre indikator

Tips:.. Trykk på bokstaven "D" på tastaturet for å tilbakestille Fill og Stroke farge til standardinnstillingene

Trinn 3

Med vår form trekkes vi kan få til morsomme ting. Åpne Utseende panelet (hvis den ikke allerede gå til Vindu > Utseende). Og la oss begynne å skape vår ikonet

Det er en ganske mange Utseende attributter for denne formen så for å gjøre det enklere å følge vi vil være å jobbe fra bunnen opp i Utseende-panelet.

For å begynne, i Utseende panel velge nederste Fyll element, og vi vil skape en ugjennomsiktig til transparent radial gradient som skissert i bildet nedenfor deretter justere Opacity til 50%. Med det Fyll elementet fortsatt valgt vi vil også gå klikker Legg til ny Effect-knappen (ser ut som bokstavene "fx") på bunnen av Utseende panel velg deretter Sti > Offset Sti og angi attributtene som er beskrevet nedenfor. Vi må også Transform Fyll elementet så velg Legg til ny Effect-knappen igjen, og naviger til Forvrenge & Transform > Omforme og angi attributter som vist nedenfor. Hvis du ikke har gjettet ennå, vil dette være skyggen for indikatorikonet og hva vi har gjort er å lage en helt vektor skygge som gir en liten glorie til vår viktigste form og er dyttet ned akkurat nok til å gi dybde. Det ser ikke ut som mye nå, men ting vil begynne å trekke sammen snart.

Nå, la oss lage en annen Fill element ovenfor vår gradient Fyll element. Som standard vil dette legge vår svart til gjennomsiktig gradient, men vi må fjerne dette gradient i stedet for en flat farge La oss gå videre og velge en fin lys rød farge for dette laget som beskrevet nedenfor. På dette punktet kan det virke rart å bruke et slikt levende rød, men det vil være fornuftig i et øyeblikk. Denne nederste laget vil fungere som både vår base farge samt vår sekundær høydepunkt når vi går videre til neste trinn.

Nok en gang la oss skape en annen Fill element. Dette vil standard til flat rød farge vi valgte tidligere, men vi vil ha en fin radial gradient for dette elementet så velg Gradient panel og innspill attributtene som er beskrevet nedenfor. En fin lilla til hvit combo satt til Multipliser og Opacity falt til 50% vil legge til en fin fyldig avrundet 3D form av ikonet. Å presse 3D-effekten enda lenger la oss Zoom (Z) i vår ikonet til vi ser de enkelte pixel rutene på vår kunst bord. Med det gradient elementet fortsatt valgt velge Gradient Tool (G) fra Tool panel og dette vil vise den gradient bar over ikonet. Vi kommer til å klikke og dra dette bar opp ca 2,5 piksler med vår art bord som en guide og pass på å holde baren så sentrert som mulig.

Nå skal vi begynne å lage vår primære lyskilde. Husk vi jobber fra bunn til topp så ting ikke kan være fornuftig før vi er ferdig med de neste trinnene.

Husk vi prøver å skape en lys skinne på vår ikonet det står til grunn at dette skinne vil kaste noen diffusjon belysning mot vår objekt så dette er hva vi skal lage nå. Igjen skal vi lage en ny Fill lag. La oss justere denne gradienten, så det er ugjennomsiktig til transparent som nedenfor skissert med en over all Opacity på 60%. Velg Gradient Tool (G) og ved hjelp av den hvite håndtak med svart senter på venstre side av gradient marquee klikk og dra som håndterer mot sentrum av sirkelen, så det er nesten halvparten av sin opprinnelige størrelse og klikk sentrum gradient bar og dra den opp og over til venstre litt. Hold et øye med dette laget som du kanskje ønsker å komme tilbake til det senere å stille det opp nøyaktig med vår hoved hvit høydepunkt lag senere.

Nå som vi har noen diffusjon vil vi legge til en glød til heve seg selv. Lag en annen Fyll layer og fyll den med en hvit til gjennomsiktig gradient som beskrevet nedenfor. Vær spesielt oppmerksom på at gradient posisjon vil matche laget under så før du justere denne gradienten kan du klikke på "Ingen" swatch i Fargeprøver-panelet for å tømme ut som fyller deretter legge deretter legge den nye ugjennomsiktig til transparent gradient så sin posisjon er reset . Med gradient i stedet skal vi ønsker å Offset og Transform denne Fill lag også. Klikk på Legg til ny Effect-knappen (ser ut som bokstavene "fx") på bunnen av Utseende panel velg deretter Sti > Offset Sti og angi attributtene som er beskrevet nedenfor. Vi må også Transform Fyll elementet så velg Legg til ny Effect-knappen igjen, og naviger til Forvrenge & Transform > Omforme og angi attributter som sett under.

Med den gløden ut av veien la oss legge våre faktiske høydepunkt. Klikk på Legg til ny Fill-knappen igjen og fylle den med en flat hvit farge Deretter velger du Legg til ny Effect-knappen (ser ut som bokstavene "fx") på bunnen av Utseende panel velg deretter Sti > Offset Sti og angi attributtene som er beskrevet nedenfor. Vi må også Transform Fyll elementet så velg Legg til ny Effect-knappen igjen, og naviger til Forvrenge & Transform > Omforme og angi attributter som sett under.

På dette tidspunktet kan du gå tilbake til den røde gradient diffusjonslaget vi gjort et par skritt tilbake og justere midtpunktet på graderingen å stå rett under den hvite høydepunkt.

Nå la oss justere at svart ramme som har sittet der og stirrer på oss hele tiden. Vi vil sette den til utenfor med en Stroke Vekt av 2px og fargen beskrevet nedenfor.

Indikatoren selv er nå ferdig, men la oss ta det et skritt videre og opprette GPS radius ring også. Klikk på Legg til ny Fill-knappen igjen og fylle den med en rød til gjennomsiktig gradient som skissert nedenfor og slippe Opacity til 25%. Deretter velger du Legg til ny Effect-knappen (ser ut som bokstavene "fx") på bunnen av Utseende panel velg deretter Sti > Offset Sti og angi attributtene som er beskrevet nedenfor.

For den siste biten av ikonet vil vi legge grensen rundt GPS radius ringen. Klikk på Legg til ny Stroke knappen på bunnen av Utseende panelet og velge en 2px rød Stroke Vekt på innsiden av formen. La oss nå motvirket banen ved å klikke på Legg til ny Effect-knappen (ser ut som bokstavene "fx") på bunnen av Utseende panel velg deretter Sti > Offset Sti og angi attributtene som er beskrevet nedenfor. Og så til slutt vil vi legge til en Ytre glød til dette slag. For å gjøre dette klikker du på Legg til ny Effect-knappen (ser ut som bokstavene "fx") på bunnen av Utseende panel velg deretter Stylize > Ytre Glow

På dette punktet kan du Shift + Klikk på de to GPS radius ring elementer for å velge dem både i Utseende-panelet og dra dem til bunnen av denne listen, slik at selve indikatorikonet sitter på toppen.

Trinn 4

Med indikatoren ut av veien vi vil nå opprette navnet pop up. Velg Avrundet rektangel verktøyet og klikk på siden og skriv inn informasjonen som er beskrevet i bildet nedenfor. Husk at bredden kan være alt du ønsker så lenge det navnet du velger senere anfall, men for den hensikt av denne opplæringen vil vi bruke dette settet bredde.

Trinn 5

Vi trenger også å klikke en gang til med den Avrundet rektangel verktøyet for å skape pilen på bunnen. for dette vil vi trenger det for å være helt firkantet, og vi vil slippe radius samt angitt nedenfor. Når formen gjorde la oss vri det 45 grader. For å gjøre dette, velg Selection Tool (V) da plasserer musen nær ethvert hjørne av plassen, og mens du holder Skift-tasten på tastaturet drar form i alle retninger før det ser ut som en diamant som vist i skjermbildet nedenfor.

Trinn 6

Nå skal vi justere disse objektene til å være sentrert med hverandre. Med Selection Tool (V) i hånden shift klikk begge objektene slik at de er begge valgt samtidig. Vi skal nå gå til Align panelet (Vindu > Align) og velge det andre alternativet under justere objekter header kalles horisontal Align Center. Klikk deretter på det siste alternativet under den samme overskriften heter Vertikal Strek Bottom.

Med Selection Tool (V) fortsatt aktivert, klikker du på mindre diamant form, så det er det eneste objektet nå valgt. Mens du holder Shift på tastaturet, trykker du på pil ned på tastaturet en gang. Utgivelsen shift og trykk deretter på pil ned på tastaturet tre ganger for å flytte diamant i perfekt posisjon.

Shift klikk på større avrundet form, slik at begge stedene er valgt igjen og naviger til Pathfinder-panelet (Vindu > Pathfinder) og klikk deretter på det første alternativet under Shape Modes header tittelen Unite. Begge stedene skal nå settes sammen i ett.

Trinn 7

Med vår pop up. forme nå opprettet vi skal jobbe med styling den. Med den formen valgt navigere til Utseende panelet (Vindu > Utseende) og velg Stroke. Vi kommer til å holde dette som grunnleggende svart, men la oss sette den til å være utenfor form med en Stroke Vekt av 2px.

Deretter velger du Fyll og vi vil fylle dette med en gråskala semi-transparent 90 graders gradient som beskrevet nedenfor.

Til slutt vil vi legge til en skygge effekt til dette objektet. Klikk på Legg til ny Effect-knappen (ser ut som bokstavene "fx") på bunnen av Utseende panel velg deretter Stylize > Drop Shadow og angi alternativene som er skissert i skjermbildet nedenfor.

Trinn 8

La oss gi dette objektet et fint høydepunkt på toppen. Med den valgte vi Kopier objekt (Command + C) deretter Lim inn i Front (Command + F). La oss raskt tilbakestilt til standard stilen ved å trykke på "D" på tastaturet. Dette vil fjerne virkningene vi har lagt tidligere og gå tilbake formen til grunnleggende hvit med en svart strek. For hensikten med denne høydepunkt vil vi ikke trenger et strøk så navigere til verktøypanelet og klikk på hjerneslag fill alternativet nær bunnen for å velge det. Klikk deretter på den hvite firkanten med diagonal rød tråd gjennom det å fjerne strøk helt. Med hjerneslag gått la oss Kopier den (Kommando + C) deretter Lim inn i Front (Command + F) på nytt, slik at vi nå har to vanlig hvit figurer oppå den andre. Så mens den øverste formen er valgt og Selection Tool (V) er aktivert trykker du på pil ned på tastaturet to ganger for å dytte objektet ned. Når dyttet, shift klikk sletten objektet bak det å velge begge deler samtidig. Mens begge stedene er valgt navigere til Pathfinder-panelet (Vindu > Pathfinder) og velge det andre alternativet under overskriften "Shape Modes" tittelen "Minus Front". Du skal nå sitte igjen med et lite snev av den opprinnelige formen på toppen. Med denne sliver valgt la oss senke det er Opacity til 25% i Utseende-panelet (Vindu > Utseende).

Trinn 9

Nå vil vi lage teksten for denne pop up. Velg Type Tool (T) fra verktøypanelet og klikk deretter på kunst styret og skriver ut navnet du ønsker. I verktøypanelet klikker du på fyllfarge og endre den til hvitt. Nå navigere til Tegn-panelet (Type > type > Character) og justere størrelsen og skrifttype som beskrevet nedenfor

Med teksten valgt navigere til Utseende panelet (Vindu > Utseende). Og klikk Legg til ny Effect-knappen (ser ut som bokstavene "fx") på bunnen av Utseende panel velg deretter Stylize > Drop Shadow og angi alternativene som er skissert i skjermbildet nedenfor. Vi kan også bruke Selection Tool (V) for å dra teksten til ønsket plassering i boblen form. Fordi Smart Guides og Snap til Grid er aktivert dette bør være lett å finne.

Trinn 10

Med teksten ut av veien la oss lage pil-ikonet. Velg Avrundet rektangel verktøyet og klikk på kunsten styret deretter plugge i disse alternativene.

Nå velger Selection Tool (V) og klikk på den nyopprettede rektangel. Med den valgte vi Kopier objekt (Command + C) deretter Lim inn i Front (Command + F). La oss nå roter dette nye objektet 90 grader. Nå skal vi justere disse objektene for å danne en baklengs L form. Med Selection Tool (V) i hånden shift klikk begge objektene slik at de er begge valgt samtidig. Vi skal nå gå til Align panelet (Vindu > Align) og velge det tredje alternativet under justere objekter header kalles horisontal Høyrejustér. Klikk deretter på det siste alternativet under den samme overskriften heter Vertikal Strek Bottom

Med begge stedene fortsatt utvalgte navigere til Pathfinder-panelet. (Vindu > Pathfinder) og klikk deretter på det første alternativet under Shape Modes header tittelen Unite. Begge stedene skal nå settes sammen i ett. Med Selection Tool (V) fortsatt valgt la oss rotere figuren 45 grader. For å gjøre dette, velger du markeringsverktøyet (V) da plasserer musen nær ethvert hjørne av plassen, og mens du holder Skift-tasten på tastaturet dra et hjørne på høyre side av markeringsrammen opp til det ser ut som en pil som peker til rett

Når pilen valgt navigere til Utseende panelet (Vindu > Utseende)., og klikk på Legg til ny Effect-knappen (ser ut som bokstavene "fx") på bunnen av Utseende panel velg deretter Stylize > Drop Shadow og angi alternativene som er skissert i skjermbildet nedenfor. Vi kan også bruke Selection Tool (V) til å dra pil til ønsket plassering i boblen form.

Trinn 11

Med pop up. § fullført aktivere Selection Tool (V) og dra ut et utvalg over all pop up. objekter å velge dem alle samtidig. Nå gå til Objekt > Group (Command + G) i menypanelet til gruppen disse objektene sammen. Vi kan deretter dra denne gruppen over indikatorikonet og sentrer det slik at det ser ut som skjermbildet nedenfor. Og med det på plass, er vi ferdige!

Konklusjon

Jeg håper jeg var i stand til å vise deg hvordan du bruker Utseende panel for å skape komplekse effekter uten behov for ekstra lag. Føl deg fri til å leke med forskjellige farger som passer deg. Med så mange oppløsning uavhengige enheter flyter rundt nå-a-dager er det virkelig flott å kunne bruke uendelig skalerbare objekter som kan brukes og gjenbrukes i app-design. Anmeldelser