Share
Vad du ska skapaI dagens handledning kommer vi att göra några små förändringar i vårt vanliga program och ta itu med ett ämne som jag har velat göra länge. Om du inte har tänkt ut det från titeln, kommer vi att skapa fem enkla ikoner som du kan göra till Android launcher-ikoner för eventuella framtida appar som du kan skapa eller vara inblandade i att skapa.
När det gäller processen använder vi ditt grundläggande urval av geometriska former i kombination med panelen Justera och några andra verktyg som du förmodligen redan arbetar med varje dag.
Med det sagt, ta en ny bit kaffe och låt oss komma igång.
Åh, och glöm inte att du alltid kan expandera projektet genom att gå över till GraphicRiver, där du hittar massor av fantastiska Android-designade ikonpaket, väntar bara på att klicka på.
Vill du lära dig via videoformat? Kolla in videoklippet på Envato Tuts + YouTube-kanalen:
Eftersom jag gissar att du redan har Illustrator igång i bakgrunden, ta upp den och låt oss ställa in en Nytt dokument (Fil> Ny eller Kontroll-N) med följande inställningar:
Och från Avancerad flik:
Snabbtips: några av er kanske har märkt att Justera nya objekt till pixelnätet alternativet saknas, vilket beror på att jag kör den nya CC 2017-versionen av programvaran, där stora förändringar har gjorts på sättet Illustratorhanterar hur formerna snapar mot underlaget Pixel Grid.
Eftersom vi ska skapa ikonerna med ett pixel-perfekt arbetsflöde, vill vi skapa en fin liten Rutnät så att vi kan ha full kontroll över våra former - det vill säga om vi kör den äldre versionen av programvaran.
Gå till Redigera> Inställningar> Guider och galler undermenyn och justera följande inställningar:
Snabbtips: Du kan lära dig mer om grids genom att läsa denna djupgående del om hur Illustrators Grid System fungerar.
När vi har satt upp vårt anpassade rutnät, behöver vi bara göra så att våra former ser skarpa ut är att aktivera Snap to Grid alternativ som finns under Se meny som kommer att omvandlas till Snap till Pixel varje gång du anger Pixel Preview läge.
Nu, om du är ny på hela "pixel-perfekt arbetsflöde", rekommenderar jag starkt att du går igenom mina sätt att skapa bildtestningsteknik, som hjälper dig att utöka dina tekniska färdigheter på nolltid.
Med det nya dokumentet skapades skulle det vara en bra idé att strukturera vårt projekt med ett par lager, eftersom det här sättet kan upprätthålla ett stabilt arbetsflöde genom att fokusera på en ikon åt gången.
Som sagt, ta upp Skikten panel och skapa totalt sex lager, som vi kommer att byta namn på enligt följande:
De Referensgaller (eller Base Grids) är en uppsättning exakt avgränsade referensytor, vilket gör att vi kan bygga våra ikoner genom att fokusera på storlek och konsistens.
Vanligtvis bestämmer storleken på rutorna storleken på de faktiska ikonerna, och de borde alltid vara det första beslutet du gör när du startar ett nytt projekt, eftersom du alltid vill börja med minsta möjliga storlek och bygga på det.
Nu, eftersom vi ska skapa ikonerna med avsikt att få dem att användas inom själva Android OS, måste vi följa deras rekommenderade storlek och format riktlinje och skapa ett anpassat rutnät av 96 x 96 px med en allround 4 px stoppning.
Börja med att låsa alla utom referensnätskiktet och ta sedan tag i Rektangelverktyg (M) och skapa en 96 x 96 px apelsin (# F15A24), vilket hjälper till att definiera den totala storleken på våra ikoner.
Lägg till en annan mindre 88 x 88 px ett (#FFFFFF) som kommer att fungera som vårt aktiva ritningsområde, vilket ger oss det hela 4 px stoppning.
Gruppera de två rutorna som komponerar referensnätet med Kontroll-G tangentbordsgenväg, och skapa sedan tre kopior på ett avstånd av 24 px från varandra, se till att anpassa dem till mitten av ritytan.
När du är klar, lås det nuvarande lagret och fortsätt till nästa där vi börjar arbeta på vår första ikon.
Vi kommer att sparka av projektet genom att skapa batteriikonen, som kan användas för en energisparande app eller till och med en statusindikator en eftersom det är ganska grundläggande.
Det sägs att du är på rätt lager (det skulle vara det andra) och sedan zooma in på det första referensnätet så att vi kan komma igång.
Börja med att skapa ikonens bakgrund med hjälp av en 88 x 88 px cirkel, som vi kommer att färga med # 00C853, centrum anpassar den till den underliggande aktiva ritningsområdet efteråt.
Snabbtips: eftersom Google var tillräckligt bra för att lägga ut en riktlinje för materialdesign för färger, har jag slutat mixa och matcha ett par värden som jag har använt för bakgrunden.
Skapa batteriets huvudkropp med hjälp av a 24 x 40 px rektangel, som vi kommer att färga med vit (#FFFFFF) och centrera sedan i linje med den större cirkeln, på ett avstånd av 20 px från dess nedre kant.
Vrid den form som vi just har skapat i en skiss, genom att vända på den Fylla med dess Stroke (Skift-X) och sedan ställa in dess Vikt till 4 px och dess Hörn till Round Join, allt inifrån Stroke panel.
Skapa den första statusindikatorfältet med hjälp av antingen a 12 x 4 px rektangel (#FFFFFF) eller a 12 px bred stroke (#FFFFFF) med en 4 px Vikt, som vi kommer att centrera i linje med batteriets kropp, lämnar a 4 px gapet runt det.
Lägg till ytterligare två indikatorfält, som vi staplar vertikalt på ett avstånd av 4 px från varandra, gruppera dem tillsammans (Kontroll-G) i efterhand.
Avsluta ikonen genom att lägga till den övre kåpan, som vi kommer att skapa med en mindre 8 x 4 px rektangel (#FFFFFF) som vi kommer att centrera i linje med batteriets kropp, på ett avstånd av 6 px (4 px för vaddering + 2 px för den övre halvan av stroke).
När du är klar, glöm inte att välja och gruppera (Kontroll-G) alla batterins kompositformer, gör samma sak för alla ikonens komponerande sektioner också.
Förutsatt att du lyckats slutföra den första ikonen låser du dess lager och går vidare till nästa (det skulle vara det tredje) och låt oss börja arbeta med inställningarna.
Som vi gjorde med den tidigare ikonen börjar du med att skapa bakgrunden med en 88 x 88 px cirkel, som vi kommer att färga med # 2196F3, centrum anpassar den till den underliggande aktiva ritningsområdet efteråt.
Börja arbeta med mittreglaget genom att skapa en 4 x 32 px rektangel eller a 32 px lång stroke med a 4 px tjock Vikt, som vi kommer att färga med vit (#FFFFFF) och centrera sedan i linje med den större cirkeln, på ett avstånd av 18 px från dess övre kant.
Skapa glidarens tillståndsindikator med hjälp av a 12 x 4 px rektangel (#FFFFFF) som vi kommer att centrera i linje med den tidigare skapade formen, på ett avstånd av 4 px från dess nedre kant.
Lägg till den nedre delen av reglaget med 4 x 12 px rektangel (#FFFFFF) som vi kommer att placera strax under statusindikatorfältet, väljer och grupperar (Kontroll-G) alla tre formerna tillsammans efteråt.
Skapa den övre delen för den vänstra reglaget med en mindre 4 x 12 px rektangel (#FFFFFF), som vi kommer att anpassa till mittkanten på mittreglaget och placera den på ett avstånd av 12 px från det.
Lägg till reglaget statusindikator genom att skapa en 12 x 4 px rektangel (#FFFFFF) som vi vertikalt staplar till den tidigare skapade formen, på ett avstånd av 4 px från dess nedre kant.
Avsluta vänsterreglaget genom att lägga till den nedre sektionen som vi ska skapa med hjälp av a 4 x 32 px rektangel (#FFFFFF) som vi kommer att placera under indikatorn.
När du är klar väljer du alla tre formerna och grupperar dem tillsammans (Kontroll-G) som vi gjorde med mittreglaget.
Avsluta ikonen genom att skapa en kopia (Control-C> Control-F) på vänster skjutreglage, som vi placerar på högra sidan av cirkeln, på ett avstånd av 4 px från mittreglaget.
När du är klar, glöm inte att välja och gruppera (Kontroll-G) alla dess komponerande sektioner så att de inte kommer att separeras av misstag.
Förutsatt att du redan har flyttat fram till nästa lager (det skulle vara fjärde), zooma in på det tredje referensnätet och låt oss komma igång.
Skapa ikonens bakgrund med hjälp av en 88 x 88 px cirkel, som vi kommer att färga med # 7C4DFF och centrera sedan in i linje med den underliggande aktiva ritningsområdet.
Skapa huvudformen för den vänstra meddelandeboxen med hjälp av a 32 x 24 px rektangel, som vi kommer att färga med vit (#FFFFFF) och placera sedan på ett avstånd av 20 px från den aktiva ritningsområdet är både vänster och övre kant.
Börja justera den form som vi just har skapat, genom att först slå på Pixel Preview läge (Alt-Control-Y) och sedan lägga till en ny ankarpunkttill dess nedre kant, på ett avstånd av 10 px från vänster en genom att klicka på vänster med hjälp av Lägg till Anchor Point Tool.
När du är klar, glöm inte att lämna Pixel Preview läge genom att använda Alt-Control-Y tangentbordsgenväg.
Fortsätt justera rektangeln genom att välja dess vänstra ankarpunktmed Direktmarkeringsverktyg (A), och sedan trycka den till botten av 8 px med hjälp av Flytta verktyg(högerklicka> Transformera> Flytta> Vertikal> 8 px).
Vrid den resulterande formen till en kontur genom att vända på den Fylla med dess Stroke (Skift-X) och sedan ställa in dess Vikt till 4 px och dess Hörn till Round Join.
Lägg till den mindre textlinjen genom att skapa en 10 x 4 px rektangel, som vi kommer att färga med vit (#FFFFFF) och placera sedan inuti den lilla meddelandeboxen, anpassa den mot sitt övre vänstra hörn, se till att lämna en 4 px gapet runt det.
Lägg till den bredare textraden med hjälp av a 20 x 4 px rektangel (#FFFFFF) som vi kommer att vänta till den tidigare skapade, på ett avstånd av 4 px från dess nedre kant.
När du är klar, glöm inte att välja och gruppera alla textlådans former tillsammans med Kontroll-G tangentbordsgenväg.
Skapa en kopia (Control-C> Control-F) i den lilla textrutans skiss och reflektera sedan (högerklicka> Transformera> Reflektera> Vertikal) och placera den på cirkelns högra sida, på ett avstånd av 18 px från den aktiva ritningsområdet både höger och nederkant.
Avsluta ikonen genom att ta bort textrutans överlappande sektion (markerad med rött) så att du slutar ha en 4 px klyftan mellan den och den vänstra sin kontur. För att göra detta, lägg helt enkelt till en ny ankarpunkttill dess övre och vänstra kant, och ta bort alla de andra.
När du är klar väljer du alla ikonens komponeringssektioner och grupperar dem tillsammans med Kontroll-G tangentbordsgenväg.
Eftersom du förmodligen redan känner till borren, låser du skiktet och går vidare till nästa lager (det skulle vara den femte) och låt oss börja arbeta med vår larmikon.
Skapa en 88 x 88 px cirkel, som vi sedan kommer att färga med # FFC107, centrera anpassningen till den underliggande aktiva ritningsområdet.
Skapa väckarklockans huvudkropp med hjälp av a 40 x 40 px cirkel, som vi kommer att färga med vit (#FFFFFF) och centrerar sedan mitt emot det aktiva ritområdet, på ett avstånd av 20 px från dess nedre kant.
Vrid den form som vi just har skapat i en skiss, genom att vända på den Fylla med dess Stroke, och sedan ställa in dess Vikt till 4 px inifrån Stroke panel.
Välj Penverktyg (P) och rita i klockans händer med hjälp av a 4 px tjock Stroke med färgen inställd på vit (#FFFFFF) och den Hörn till Round Join, se till att lämna en 4 px klyftan mellan de avslutande förankringspunkternaoch den större cirkeln.
Flytta några pixlar mot toppen och skapa en 8 x 6 px rektangel (#FFFFFF) som vi kommer att centrera i linje med den övre delen av den större cirkeln, positionera den så att den slutar överlappa Strokes översta hälften.
Lägg till en 16 x 4 px rektangel (#FFFFFF) ovanpå den som vi just har skapat, väljer och grupperar (Kontroll-G) dem tillsammans efteråt.
Avsluta ikonen genom att dra in de två små diagonala linjesegmenten med hjälp av a 4 px Stroke med färgen inställd på vit (#FFFFFF). När du är klar väljer du och grupperar (Kontroll-G) alla väckarklockans komponerande former tillsammans, gör samma för hela ikonen efteråt.
Ta vägen till det sjätte och sista laget, och låt oss avsluta projektet genom att skapa fotonikonen.
Använda en 88 x 88 px cirkel (# FF6F00) skapa ikonens bakgrund som vi kommer att centrera i linje med den underliggande aktiva ritningsområdet.
Skapa bildets huvudkropp med hjälp av a 36 x 36 px rektangel, som vi kommer att färga med vit (#FFFFFF) och sedan centrera inriktning mot den underliggande aktiva ritningsområdet, på ett avstånd av 20 px från dess övre kant.
Vrid den form som vi just har skapat i en skiss, genom att vända på den Fylla med dess Stroke (Skift-X) och sedan ställa in dess Vikt till 4 px och dess Hörn till Round Join inifrån Stroke panel.
Använda Penverktyg (P) rita i den horisontella delningslinjen med hjälp av a 4 px tjock Stroke (#FFFFFF) som vi kommer att placera inuti den tidigare skapade formen, på ett avstånd av 4 px från dess nedre kant.
Använda samma 4 px tjock Stroke (#FFFFFF) med en Round Join, börja rita det första berget genom att placera din första ankarpunktpå vänstra kanten av fotot, på ett avstånd av 10 px från den horisontella delningslinjen som vi just har skapat.
Lägg till det andra ankretpå ett avstånd av 10 px både horisontellt och vertikalt från den första. Avsluta berget genom att lägga till det tredje och sista ankretpå den horisontella delningslinjen, medan du håller ner Flytta nyckeln för att dra i en perfekt diagonal linje.
Rita i det andra mindre berget, med samma 4 px tjock Stroke (#FFFFFF), och sedan, när du är klar, välj och gruppera alla bildens sammansatta former tillsammans med Kontroll-G tangentbordsgenväg.
Skapa ikonens nedre sektion med hjälp av a 28 x 6 px rektangel, som vi kommer att färga med vit (#FFFFFF) och centrera sedan i linje med den nedre delen av fotoets kontur, på ett avstånd av 4 px.
Avsluta ikonen genom att vända den form som vi just skapat till en 4 px tjock kontur (#FFFFFF) med en Round Join, och sedan justera det genom att lägga till en ny ankarpunkttill mitten av dess övre kant, som vi sedan kommer att ta bort för att öppna banan (markerad med rött).
Välj den resulterande formen och resten av fotoets komponentelement och gruppera dem (Kontroll-G) gör samma för ikonens komponerande avsnitt efteråt.
Jag hoppas att du har lyckats följa varje steg och viktigast lärde dig något nytt och användbart under processen. Med det sagt kommer jag se dig i nästa!
Accentsconagua