Share
Vad du ska skapaI veckan tar vi med dig ett speciellt innehåll med ett tema som är väldigt nära oss alla, varför vi hade så mycket roligt att skapa alla snygga handledningar som är på väg.
Yup, det är en hel vecka med sagor inspirerade handledning, och jag fick chansen att arbeta på en av mina favoriter: De tre lilla grisarna.
Om du aldrig har haft chansen att läsa eller höra det, kretsar hela historien runt tre antropomorphiserade piggies som försöker bygga ett hus för sig själva, men varje gång det slutar blåses bort av en stor dålig varg tills de bygger en tegelsten.
Jag kommer inte att komma in i för många detaljer, så jag lämnar dig med en länk som kommer att berätta allt som finns att veta om den här fantastiska sagan om tre modiga lilla grisar.
Om du bestämmer dig för att du vill utöka projektet, kan du alltid hitta inspiration genom att ta en snabb titt på Envato Market, där du kan hitta massor av ikoner och sagor relaterade konstverk.
Med det sagt kommer vi idag att bygga vår egen version av tegelhuset med några enkla former och verktyg som du normalt skulle använda dagligen.
Som alltid, låt oss börja med att ställa in vårt dokument, genom att gå till Fil> Ny (eller använda Kontroll-N tangentbordsgenväg) och justera den enligt följande:
Och från Avancerad flik:
Normalt skulle jag ha bett dig att skapa ett dokument som har samma storlek som ikonen, eftersom vi kommer att skapa endast ett objekt, men jag ville visa dig processen för tegelhuset och sedan låta dig bygga de andra två använder några av samma steg.
Snabbtips: Eftersom vi ska skapa ikonen med ett pixel-perfekt arbetsflöde rekommenderar jag att du tar ett par ögonblick och läser min djupt handledning om hur man skapar pixel-perfekt konstverk, vilket ska komma igång på nolltid.
Oavsett om du har ett litet eller stort projekt ska du alltid försöka använda lag eftersom de kan hjälpa dig mycket när det gäller att skapa och strukturera din design, så att du kan fokusera på en sak i taget.
Så, förutsatt att du redan vet hur du använder Skikten panelen, öppna den och skapa tre lager med namnet på följande sätt:
Eftersom referensnätverk tillåter oss att bygga våra ikoner med storlek och konsistens i åtanke, kommer vi att skapa en som bara gör det.
Se till att du befinner dig på referensnätet och använder Rektangelverktyg (M) skapa en 128 x 128 px fyrkantig# FF6B57), som definierar den totala storleken på vår ikon. Justera sedan formen till mitten av ritytan använda Justera panelens Horisontell och Vertikalt inriktningscentrum alternativ.
Skapa en annan mindre 120 x 120 px fyrkantig#FFFFFF), som kommer att fungera som vårt aktiva ritningsområde och placera det ovanpå det vi tidigare skapat, välja och gruppera de två tillsammans med hjälp av Kontroll-G tangentbordsgenväg.
När du är klar låser du det aktuella lagret och går vidare till nästa där vi ska börja arbeta med den faktiska projekttillgången.
Eftersom vi nu har vårt referensnät kan vi zooma in på det och börja arbeta med vår lilla ikon genom att skapa den öppna bokbasen.
Hela tanken är att kombinera boken, som är en stark symbol för berättande, med huset från tre smågrisar för att få en mer intressant sammansättning.
Börja med att skapa en 112 x 4 px rektangel, som vi kommer att färga med # 93665F, ge en 4 px tjock kontur (# 604.946) använda Offsetväg metod (välj formen> Objekt> Path> Offset Path> 4 px), och placera sedan de två formerna på ett avstånd av 4 px från botten av den aktiva ritningsområdet.
Snabbtips: Eftersom exakt positionering handlar om möjligheten att se och använda det underliggande pixelnätet till din fördel, rekommenderar jag att du byter till Pixel Preview läge när du kan genom att gå till Visa> Pixel Preview eller genom att använda Alt-Control-Y tangentbordsgenväg.
När du har huvudformen på bokens omslag, ta tag i Rundad rektangelverktyg och skapa en 16 x 8 px form (# 93665F) med en 2 px hörn Radius, och placera den ovanpå de två rektanglarna, se till att anpassa den till den övre sidan av den bruna.
Välj den form som vi just har skapat och ge den en 4 px kontur (# 604.946), se till att skicka den till baksidan av den större konturen av högerklicka> Ordna> Skicka till Tillbaka.
Använda Rektangelverktyg (M) Lägg till en 112 x 2 px form mot den övre sidan av den bruna rektangeln, och vrid sedan den till en höjdpunkt genom att färga den vit (#FFFFFF) och justerar sedan dess Genomskinlighet genom att ställa in dess Blandningsläge till Täcka över och sänka dess Opacitet till 30%.
Lägg till ytterligare två uppsättningar höjdpunkter på var sida om bokens omslag (ca 22 px från sidorna) med samma värden som vi har använt i föregående steg.
Avsluta bokens omslag genom att lägga till en 8 x 8 px avrundad rektangel med a 2 px hörn Radius, som vi kommer att färga med # 604.946, och placera sedan ovanpå den bruna rektangeln och anpassa den till den övre sidan av den större konturen.
När du är klar väljer du och grupperar alla bokomslagets former med hjälp av Kontroll-G tangentbordsgenväg.
Börja arbeta på bokens övre del genom att skriva a 50 x 6 px rektangel (# F2D2CE), som vi kommer att justera genom att runda sitt högra högra hörn till 6 px använda Omvandla panel.
Ge det vanligt 4 px kontur (# 604.946), och placera sedan de två formerna ovanför locket, så att de större konturerna överlappar varandra.
Lägg till en 50 x 2 px svart (# 000000) Rektangeln mot den nedre delen av sidorna som vi just har skapat, och sedan ändra den till en skugga genom att sänka dess Opacitet till 20%, Se till att maskera den med hjälp av underformen som en Clipping Mask.
Snabbtips: om du är ny på Clipping Masks, Jag rekommenderar starkt att du läser denna tekniska handledning som förklarar fördelarna med att använda Clipping Mask över Pathfinder-panelen.
Avsluta bokens vänstra sida genom att lägga till några höjdpunkter på sidorna med Täcka över som den Blandningsläge och 60% för Opacitet.
Gruppera sedan alla dess komponentelement tillsammans med Kontroll-G snabbtangent och skapa och placera en kopia mot höger om bokens omslag.
Med sidorna på plats lägger du till en 104 x 1 px rektangel (# 604.946) mot deras nedre avsnitt för att ge dem mer detalj, se till att anpassa den till deras centrum.
Eftersom vi nu är färdiga att arbeta på boken kan vi välja och gruppera alla dess element tillsammans med Kontroll-G tangentbordsgenväg så att de inte kommer att separeras av misstag.
Börja arbeta med den lilla grisens hus genom att skapa en 44 x 62 px rektangel, som vi kommer att färga med # D1736B, och sedan placera mot mitten av vårt aktiva ritområde, anpassa det till sidans skiss.
Eftersom vi behöver formen att gå under vår lilla bok, kommer vi att Högerklicka på det och sedan gå till Ordna och välj Skicka tillbaka.
Ge den form som vi just har skapat en disposition genom att markera den och sedan gå till Objekt> Path> Offset Path> och in i 4 px in i Offset värdefältet, se till att ändra färg till # 604.946.
Lägg till en 44 x 6 px rektangel (# 000000) mot den nedre delen av husets huvudsakliga form och förvandla den till en skugga genom att sänka den Opacitet till 20%.
Lägg till en till 44 x 2 px rektangel (# 000000) mot den övre sidan av husets huvudform och vänd det till en skugga också.
I det här nästa steget kommer jag att ge dig lite kreativ frihet, eftersom vi måste lägga till de små tegelstenarna för att ge huset lite textur. Så ta din tid och använd små 4 x 2 px rektanglar (# AF5652) ge huset sitt tegelutseende, se till att gruppera dem alla tillsammans (Kontroll-G) när du är klar.
Använda Rektangelverktyg (M), lägg till två 54 px höga vertikala höjdpunkter (Färg: vit; Blandningsläge: Täcka över; Opacitet: 20%), och placera dem mot höger sida av huset.
Börja arbeta på dörren genom att skapa en 16 x 30 px rektangel som vi kommer att färga med # 93665F, och justera sedan genom att runda upp sina högsta hörn till 8 px. Ge sedan det vanliga 4 px kontur (# 604.946) och placera de två formerna mot husets nedre del.
Ge dörren några detaljer och gruppera dem alla tillsammans (Kontroll-G) så att dess komponentformer kommer att fungera som ett enda objekt.
Flytta några pixlar upp och börja arbeta i fönstret genom att skapa en 16 x 2 px rektangel (# C4BDBC), ge sedan en 4 px kontur (# 604.946) och placera de två formerna på ett avstånd av 4 px från dörrens kontur.
Ge kulan några höjdpunkter (Färg: vit; Blandningsläge: Täcka över; Opacitet: 60%), och lägg sedan till två 4 x 6 px avrundade rektanglar (# 604.946) med en 2 px hörn Radius, och rikta en till varje sida av den grå formen, så att de överlappar varandra med den större konturen.
När du är klar väljer du alla silens kompositer och grupperar dem tillsammans med Kontroll-G tangentbordsgenväg.
Skapa det faktiska fönstret genom att dra en 8 x 8 px cirkel (# 93B5D1), och ge sedan en 4 px tjock kontur (# 604.946) och placera de två formerna strax ovanför tröskeln, se till att deras konturer överlappar varandra.
Lägg till några detaljer i fönstret och gruppera sedan alla dess element tillsammans med Kontroll-G tangentbordsgenväg.
Börja arbeta på taket genom att dra a 20 px lång form (# 93665F) använda Penverktyg (P). Som du kan se i referensbilden, var noga med att lägga till en 2 px lång bas eftersom vi behöver det för konturen.
Ge taket a 4 px tjock kontur med hjälp av Offsetväg metod, se till att ändra färg till # 604.946 i efterhand.
Använda Rektangelverktyg (M), skapa tre 52 x 2 px former (# 604.946), som vi kommer att placera vid en 2 px vertikalt avstånd från varandra och placera sedan på takets övre del, se till att maskera dem med formen underifrån (båda formerna är valda > högerklicka> Gör klippmask).
Snabbtips: om du undrar varför vi bara har skapat tre styrelser, beror det på att vi kommer att lägga till ett annat avsnitt på taket i följande steg, vilket skulle ha maskerat dem.
Lägg till en annan uppsättning med tre 52 x 1 px rektanglar (#FFFFFF), som vi kommer att placera bredvid de som vi tidigare skapat, och sedan omvandlas till subtila höjdpunkter genom att ställa in deras Blandningsläge till Täcka över och sänka deras Opacitet till 40%.
När du är klar väljer du alla takets komponentelement och grupperar dem med hjälp av Kontroll-G tangentbordsgenväg.
Använda Rundad rektangelverktyg skapa en 52 x 2 px form (# C4BDBC) med en 1 px hörn Radius, och placera den mot takets nedre del, se till att det blir trevligt 4 px tjock kontur (# 604.946) för att få det att se ut som en rännan.
Lägg till de vanliga höjdpunkterna och två 2 x 2 px torg (# 604.946) till varje sida för att ge den mer polska. När du är klar väljer du alla rännans komponentelement och grupperar dem med hjälp av Kontroll-G tangentbordsgenväg.
Avsluta huset genom att lägga till en 4 x 8 px rektangel (# D1736B) med en 4 px kontur (# 604.946) skorstenen mot högra delen av taket. Ge den en subtil skugga (Färg: svart; Opacitet: 20%), och gruppera sedan alla dess former tillsammans (Kontroll-G).
När du är färdig med att arbeta på huset, välj alla dess komponerande sektioner och gruppera dem (Kontroll-G) så att de inte kommer att separeras av misstag.
Nu när vi är färdiga med huset, kan vi börja arbeta med bakgrunden genom att skapa de små buskarna och molnen som ger ikonen den visuella popen som den behöver.
Använda Ellipsverktyg (L),skapa två 8 x 8 px cirklar placerade 6 px från varandra, och lägg sedan till en 12 x 12 px en mellan dem. Färga formerna med # 5FAA7D, och ge sedan var och en av dem en 4 px kontur (# 604.946) Se till att skicka dem till baksidan av de gröna cirklarna. Ge dem några subtila höjdpunkter och gruppera sedan (Kontroll-G) och skapa en kopia (Control-C> Control-F), placera en buske på varje sida av huset.
Med buskarna på plats skapar du den runda bakgrunden genom att dra en 104 x 104 px cirkel, som vi kommer att färga med # C3D8E5, och placera mot mitten av vår ikon, anpassa den till bokens gemensamma, se till att skicka den till baksidan (högerklicka> Ordna> Skicka till Tillbaka).
Avsluta bakgrunden genom att lägga till de små molnen som vi ska skapa med en massa 4 px lång vit (#FFFFFF) Rundade rektanglar med en 2 px hörn Radius och en Opacitet av 60%.
Ta din tid och skapa ett par variationer med olika bredder för segmenten, och när du är klar, gruppera (Kontroll-G) och maskera dem alla med den blå cirkeln som en Clipping Mask.
När du är färdig med att arbeta i bakgrunden kan du gå vidare till den sista delen av vår handledning där vi kommer att ge ikonen några slutliga detaljer.
Innan du låser ikonskiktet och går vidare till den tredje och sista, måste du ta en kopia av varje av ikonens huvudlinjer, så taket, skorstenen, busens yttre delar, sidorna , bokomslaget och bakgrundscirkeln, som du sedan kan klistra in på det tomma lagret.
Snabbtips: Du kan enkelt välja vilken form som har lagts till i en grupp genom att klicka på den med hjälp av Direktmarkeringsverktyg (A).
Med kopiorna på plats väljer du dem alla och öppnar sedan Stigfinnare panelen och klicka på den nedåtriktade pilen för att få fram några av de dolda funktionerna. Från den nya menyn väljer du Gör sammansatt form vilket gör att du kan applicera en jämn gradient på hela ytan av kopiorna.
Applicera en Linjär Gradient till Sammansatt form, vinkeln ställs in -90 °, använder sig av # ED1C24 till vänster färg och # 29ABE2 för den rätta.
Avsluta ikonen genom att ställa in gradientens Blandningsläge till Lätta och sänka dess Opacitet till 40%.
Vi har gjort det! Det tog oss ett tag, men vi har äntligen kommit fram till slutet av vår lilla berättelse och lyckades skapa en snygg ikon för att följa med den. Jag hoppas att du lyckats följa alla steg och lärde dig något nytt och användbart under processen.
Åh, och eftersom alla sagor har en lycklig avslutning bestämde jag mig för att bifoga källfilen för projektet så att du får alla tre hus, inte bara tegelstenen.
Accentsconagua