Share
Med denna handledning visar jag dig hur man skapar en ikon för kartindikator som är perfekt för att importera till din nästa kartbaserade appdesign. Vi använder en enda form med flera utseende attribut för att skapa en enkel att använda och redigera grafisk stil i Adobe Illustrator.
Låt oss börja med att förbereda vårt dokument. Öppna Illustrator och klicka på Command + N för att skapa ett nytt dokument. Ange 500 i breddrutan och 500 i höjdlådan och klicka sedan på knappen Avancerat. Välj RGB, Screen (72ppi) och se till att rutan Justera nya objekt till pixelgrid är avmarkerad innan du klickar OK.
När du arbetar med upplösningsoberoende enheter är pixel-perfektion ett måste och för att skapa skarpa former skulle det vara lättare att ha Grid View inställd och Pixel Snapping aktiverad så vi gör det nu. Låt oss aktivera rutnätet (Visa> Visa rutnät) och sedan Snap to Grid (Visa> Snap to Grid). När de är på, behöver du ett rutnät var 1px. Gå bara till Illustrator> Inställningar> Guider & Grid, ange 1 i rutnätet varje ruta och 1 i rutan Indelningar. Låt oss nu ange måttenheten till pixlar från Illustrator> Inställningar> Enhet> Allmänt. När du är klar ska ditt dokument se ut som bilderna nedan.
Nu när vårt dokument är upprättat, låt oss börja med att skapa vår cirkelform som används för indikatorikonen. Eftersom vi skapar en retina-skärm måste vi arbeta med dubbla storleken på objektet vi vill skapa. På vår näthinnanhet vill vi att indikatorn verkar vara 16px med 16px så om vi multiplicerar det med 2 kommer vi fram till 32px. Med detta i åtanke ska vi välja vårt Ellipse Tool (L) och sedan klicka var som helst på duken. När dialogrutan visas kan vi skriva in 32px för både bredden och höjden. Detta skapar den perfekta cirkeln som behövs för vår indikator.
Tips: Tryck på bokstaven "D" på tangentbordet för att återställa fyllnads- och streckfärgen till standardinställningarna.
Med vår form dras kan vi komma till de roliga grejerna. Öppna panelet Utseende (om det inte redan går till Fönster> Utseende) och låt oss börja skapa vår ikon.
Det finns en hel del utseende attribut för denna form så att det blir lättare att följa vi kommer att arbeta från botten upp i Utseendepanelen.
För att börja, välj det nedersta fyllningsalternativet i Utseendepanelen och vi skapar en ogenomskinlig och transparent radialgradient som beskrivs i bilden nedan och justera opacitet till 50%. Med det alternativet Fill som valts kommer vi också att klicka på knappen Lägg till ny effekt (det ser ut som bokstäverna "fx") längst ner på Utseendepanelen och väljer sedan Sti> Förskjutningsväg och anger de attribut som beskrivs nedan. Vi måste också transformera Fyll-objektet så välj knappen Lägg till ny effekt igen och navigera till Förvränga & Transformera> Transformera och ange attributen enligt nedan. Om du inte har gissat än det kommer det att vara skuggan för indikatorikonen och det vi har gjort är att skapa en helt vektor droppskugga som ger en liten halo till vår huvudsakliga form och är nudged ner tillräckligt för att ge djup. Det ser inte ut så mycket nu men saker kommer snart att träda ihop.
Nu, låt oss skapa ett annat Fyll objekt ovanför vår gradient Fyll objekt. Som standard lägger detta till vår svarta till genomskinliga gradient men vi måste ta bort den här lutningen istället för en platt färg. Låt oss fortsätta och välj en fin ljus röd färg för det här skiktet som beskrivs nedan. Vid det här tillfället kan det tyckas konstigt att använda en sådan vibrerande röd, men det kommer alla att ge mening i ett ögonblick. Detta bottenlager kommer att fungera som både vår basfärg och vår sekundära höjdpunkt när vi går vidare till nästa steg.
Låt oss återigen skapa ett annat Fyll objekt. Detta kommer som standard till den platta röda färgen vi valde tidigare men vi vill ha en fin radiell gradient för det här objektet så välj Gradient-panelen och mata in attributen som beskrivs nedan. En fin lila till vit kombinationssats inställd på Multiplicera och opaciteten sjönk till 50% kommer att lägga till en fin full bodied rundad 3D form till ikonen. För att driva 3D-effekten ytterligare, låt vi Zoom (Z) in i vår ikon tills vi ser de enskilda pixelfälten på vårt konstkort. Med det alternativet gradient som valts väljer du ditt Gradient Tool (G) från Verktygspanelen och detta visar gradientfältet över ikonen. Vi kommer att klicka och dra den här stapeln upp ca 2,5 pixlar med hjälp av vårt konstkort som en guide så se till att baren är så centrerad som möjligt.
Nu börjar vi skapa vår primära ljuskälla. Kom ihåg att vi arbetar från botten till toppen så det kan inte vara meningsfullt förrän vi slutar med nästa steg.
Tänk på att vi försöker skapa en klar glans på vår ikon. Det står till grund att denna glans kommer att kasta lite diffusionsbelysning mot vårt objekt så det här är vad vi ska skapa nu. Återigen ska vi skapa ett nytt Fyll-lager. Låt oss justera denna lutning så att den är ogenomskinlig för genomskinlig som beskrivs nedan med över 60% opacitet. Välj Gradient Tool (G) och använd den vita handtaget baren med den svarta mitten på vänster sida av gradientmarkeringen klicka och dra det som handlar mot mitten av cirkeln så att det är nästan hälften av dess ursprungliga storlek och klicka sedan på mittlinjen och dra upp det och över till vänster lite. Håll ett öga på det här skiktet, eftersom du kanske vill komma tillbaka till det senare för att ställa upp det exakt med vårt huvudsakliga vita markeringslager senare.
Nu när vi har viss diffusion lägger vi till en glöd till höjdpunkten själv. Skapa ett annat Fyll-lager och fyll det med en vit till transparent gradient som beskrivs nedan. Tänk på att gradientpositionen kommer att matcha lagret nedan, innan du justerar denna lutning klickar du på "None" -prickan i fönstret Färger för att rensa ut den fyllningen och lägg sedan till och lägg till den nya ogenomskinliga till genomskinlig gradient så att dess position återställs . Med gradienten på plats kommer vi också att vilja Offset och Transform this Fill layer också. Klicka på knappen Lägg till ny effekt (det ser ut som bokstäverna "fx") längst ner på Utseendepanelen och välj sedan Steg> Förskjutningsväg och ange de attribut som beskrivs nedan. Vi måste också transformera fyllningsobjektet så välj knappen Lägg till ny effekt igen och navigera till Förvränga & Transformera> Transformera och ange attributen enligt nedan.
Med det glöd ut ur vägen, lägger vi till vår faktiska höjdpunkt. Klicka på knappen Lägg till ny fyllning igen och fyll i den med en platt vit färg. Välj sedan knappen Lägg till ny effekt (det ser ut som bokstäverna "fx") längst ner på Utseendepanelen och välj sedan Steg> Förskjutningsväg och ange attributen skisserade Nedan. Vi måste också transformera fyllningsobjektet så välj knappen Lägg till ny effekt igen och navigera till Förvränga & Transformera> Transformera och ange attributen enligt nedan.
Vid den här tiden kan du gå tillbaka till det röda gradientdiffusionsskiktet vi gjorde några steg tillbaka och justera mittpunkten för gradienten för att vara direkt under den vita höjden.
Låt oss nu justera den svarta gränsen som sitter där och stirrar på oss hela tiden. Vi ställer den på utsidan med ett slagvikt på 2px och färgen som beskrivs nedan.
Indikatorn själv är nu klar men låt oss ta det ett steg längre och skapa GPS-radiusringen också. Klicka på knappen Lägg till ny fyllning igen och fyll i den med en röd till transparent gradient som beskrivs nedan och släpp opacitet till 25%. Välj sedan knappen Lägg till ny effekt (det ser ut som bokstäverna "fx") längst ner på Utseendepanelen, välj sedan Sti> Förskjutningsväg och ange de attribut som beskrivs nedan.
För den sista delen av ikonen lägger vi gränsen runt GPS-radieringen. Klicka på knappen Lägg till ny stroke längst ner på Utseendepanelen och välj en 2px röd slagvikt på insidan av formen. Låt oss nu kompensera banan genom att klicka på knappen Lägg till ny effekt (det ser ut som bokstäverna "fx") längst ner på Utseendepanelen, välj sedan Sti> Förskjutningsväg och ange attributen som anges nedan. Och sedan lägger vi till ett yttre glöd till denna stroke. För att göra så klickar du på knappen Lägg till ny effekt (det ser ut som bokstäverna "fx") längst ner på Utseendepanelen och väljer sedan Stylize> Outer Glow
Vid den här tiden kan du Shift + Klicka på de två GPS-radiusringarna för att välja dem båda i Utseckningspanelen och dra sedan dem längst ner i listan så att den aktuella indikatorikonen sitter ovanpå.
Med indikatorn ur vägen kommer vi nu att skapa namnet popup. Markera verktyget Avrundad rektangel och klicka på sidan och ange informationen som skisseras i bilden nedan. Tänk på att bredden kan vara allt du önskar så länge som namnet du väljer senare passar men för den avsedda denna handledning använder vi den här bredden.
Vi måste också klicka en gång till med verktyget rundad rektangel för att skapa pilen längst ner. för detta behöver vi det vara helt kvadratiskt och vi släpper radien såväl som anges nedan. När formen har gjort låt oss rotera den 45 grader. För att göra det, välj markeringsverktyget (V) och placera musen nära ett hörn av torget och samtidigt hålla Shift-tangenten på tangentbordet, dra formen i vilken riktning som helst tills den ser ut som en diamant som ses på skärmbilden nedan.
Nu ska vi justera dessa objekt för att centreras med varandra. Med markeringsverktyget (V) i handbyte klickar du på båda objekten så att de båda är valda samtidigt. Vi navigerar nu till panelen Justera (Fönstret> Justera) och välj det andra alternativet under rubriken Justera objekt som heter Horizontal Align Center. Klicka sedan på det sista alternativet under samma rubrik som heter Vertical Align Bottom.
Med markeringsverktyget (V) fortfarande aktiverat, klicka på den mindre diamantformen så det är det enda objektet som nu valts. Medan du håller Shift på tangentbordet trycker du ner pilen på tangentbordet en gång. Släpp skiftet och tryck sedan på nedåtpilen på tangentbordet tre gånger för att flytta diamanten i perfekt läge.
Shift klicka på den större rundade formen så att båda objekten väljs igen och navigera till Pathfinder-panelen (Fönster> Pathfinder) och klicka sedan på det första alternativet under rubriken Form Modes titeln Unite. Båda objekten ska nu anslutas till en.
Med vår popup. form som nu skapats kommer vi att arbeta med styling den. Med den valda formen navigerar du till Utseendepanelen (Fönster> Utseende) och väljer Stroke. Vi håller detta som grundläggande svart men låt oss ställa in det för att vara utanför formen med en slagvikt på 2px.
Välj sedan Fyll och fyll i detta med en gråskala halvtransparent 90 graders gradient som beskrivs nedan.
Slutligen lägger vi till en droppskuggningseffekt för det här objektet. Klicka på knappen Lägg till ny effekt (det ser ut som bokstäverna "fx") längst ner på Utseendepanelen och välj sedan Stil> Släpp skugga och ange alternativen som skisseras i skärmdumpen nedan.
Låt oss ge det här objektet en fin markering överst. Med det valda objektet ska vi kopiera (Command + C) och klistra in framför (Command + F). Låt oss snabbt återställa till standardstilen genom att trycka på "D" på tangentbordet. Detta kommer att ta bort effekterna som vi lagt till tidigare och returnera formen till grundläggande vit med en svart slag. För denna höjdpunkt behöver vi inte stroke, så navigera till panelen Verktyg och klicka på streckfyllningsalternativet längst ner för att markera det. Klicka sedan på den vita rutan med den diagonala röda linjen genom att ta bort stroke helt. Med stroke borta, låt oss kopiera det (Command + C) och klistra in på framsidan (Command + F) igen så att vi nu har två vanliga vita vita former över varandra. Då medan toppformen är vald och valverktyget (V) är aktiverat trycker du på nedåtpilen på tangentbordet två gånger för att dämpa objektet. När du blivit nudged, skiftar du på det vanliga objektet bakom det för att välja båda samtidigt. Medan båda objekten väljs, navigerar du till Pathfinder-panelen (Fönster> Pathfinder) och väljer det andra alternativet under rubriken "Shape Modes" med titeln "Minus Front". Du borde nu lämnas med en liten skiva av den ursprungliga formen längst upp. Med denna sliver valda låt oss sänka den opacitet till 25% i Utseendepanelen (Fönster> Utseende).
Nu ska vi skapa texten för det här dyker upp. Välj typverktyget (T) från Verktyg-panelen och klicka sedan på konstkortet och skriv in det önskade namnet. I fönstret Verktyg klickar du på Fyllfärgen och ändrar den till vit. Navigera nu till karaktärspanelen (Typ> Typ> Karaktär) och justera storleken och typsnittstypen som beskrivs nedan.
Med den markerade texten går du till Utseendepanelen (Fönster> Utseende) och klickar på knappen Lägg till ny effekt (det ser ut som bokstäverna "fx") längst ner på Utseendepanelen och väljer sedan Stylize> Drop Shadow och anger alternativen som skisseras i skärmdumpen nedan. Vi kan också använda urvalsverktyget (V) för att dra texten till önskad plats i bubbelformen. Eftersom Smart Guides och Snap to Grid är aktiverade bör det vara lätt att hitta.
Med texten ut ur vägen, låt oss skapa pilikonen. Markera verktyget rundad rektangel och klicka på konstkortet och anslut sedan dessa alternativ.
Välj nu markeringsverktyget (V) och klicka på den nyskapade rektangeln. Med det valda objektet ska vi kopiera (Command + C) och klistra in framför (Command + F). Låt oss nu rotera det här nya objektet 90 grader. Nu justerar vi dessa objekt för att bilda en bakåtformad L-form. Med markeringsverktyget (V) i handbyte klickar du på båda objekten så att de båda är valda samtidigt. Vi navigerar nu till panelen Justera (Fönster> Justera) och välj det tredje alternativet under rubriken Justera objekt som heter Horisontell linjejustering. Klicka sedan på det sista alternativet under samma rubrik som heter Vertical Align Bottom.
Med båda objekten som fortfarande är markerade, navigerar du till panelen Pathfinder (Fönster> Pathfinder) och klickar sedan på det första alternativet under rubriken Form Modes titeln Unite. Båda objekten ska nu anslutas till en. Med markeringsverktyget (V) som fortfarande valts kan vi rotera formen 45 grader. För att göra det, välj markeringsverktyget (V) och placera musen nära ett hörn av torget och håll ner Skift-tangenten på tangentbordet, dra ett hörn till höger om avgränsningsrutan tills det ser ut som om en pil pekar mot höger.
Med pilen väljs navigerar du till Utseendepanelen (Fönster> Utseende) och klickar på knappen Lägg till ny effekt (det ser ut som bokstäverna "fx") längst ner på Utseendepanelen och väljer sedan Stylize> Drop Shadow och anger alternativen som skisseras i skärmdumpen nedan. Vi kan också använda urvalsverktyget (V) för att dra pilformen till önskad plats i bubbelformen.
Med popupen. Avsnittet slutförd aktiverar valverktyget (V) och drar ut ett urval över alla popup-enheter. objekt att välja dem alla samtidigt. Gå nu till Objekt> Grupp (Command + G) i menypanelen för att gruppera dessa objekt tillsammans. Vi kan sedan dra denna grupp ovanför indikatorikonen och centrera den så att den ser ut som skärmdumpen nedan. Och med det på plats är vi färdiga!
Jag hoppas att jag kunde visa dig hur du använder panelen Utseende för att skapa komplexa effekter utan att behöva extra lager. Gärna spela med olika färger som du tycker är lämplig. Med så många upplösningsoberoende enheter som flyter runt nu är det verkligen bra att kunna använda oändligt skalbara objekt som kan användas och återanvändas i dina appdesigner.
Accentsconagua