Share
Stiftet på varje italiensk frukost är espressokaffe, bryggd med den ikoniska "Moka Express" -krukan. I den här handledningen skapar vi en Moka helt från början med hjälp av former, lagereffekter och en massa produktivitetshöjande tips. Vi fortsätter sedan för att göra vår design till en professionell ikon för Leopard och Vista. Så få dina kaffekrusar redo och låt oss börja brygga!
Denna handledning riktar sig till mellanliggande Photoshop-användare, därför krävs kommandot för gränssnittet och kunskapen om de viktigaste tangentbordsgenvägarna. Ta en titt på bilden nedan för att se hur vår färdiga ikon kommer att se ut.
Innan vi börjar ska vi få vatten med vår kaffekanna. Läs allt om det och ta en titt på följande bild. Detta är min egen älskade Moka Express utan vilken jag inte kunde starta en dag. Det ser komplicerat ut, men det är det inte.
Vi kan se att Moka består av: en åttkantig bottenreservoar med en ventil på ena sidan, en åttkantig skruvkammare med en näbb för att hälla kaffet och en ringliknande bas, ett lock som toppas med en knopp och en handtag ansluten till lockets gångjärn. Det finns två material här: svart plast för ratten och handtaget och aluminium för kroppen.
Låt oss börja från ringen. Skapa ett nytt tomt RGB-dokument och ställ in dess storlek till 512 pixlar med 512 pixlar, den maximala upplösningen av OS X Leopard-ikoner.
Under hela handledningen använder du vita, grå och mörkgrå bakgrundslager för att hjälpa dig att se bilden bättre. Låt oss skapa vårt dokument. Tryck D för att aktivera standard svart (förgrunds) och vita (bakgrunds) färger. På Visa-menyn sätt på Linjaler (Kommando + R) och Snap (Kommando + Skift + Colon-tangent). Vi är redo att gå.
Använd ellipseverktyget och med hjälp av några guider, rita två ellipser på två separata lager. Gör den nedre ellipsen svart och namnge dess lager "botten". Gör den övre ellipsen vit och namnge dess lager "bas".
Med det rektangulära markeringsverktyget (M) gör du ett urval i mitten av guiderna på "botten" -lagret och sedan på Alt + Backspace för att fylla det med förgrundsfärgen av svart (se fig 3a).
Hit Command + D för att avmarkera alla. Medan du fortfarande befinner dig på "botten" -laget, klicka på miniatyrbilden på den vita ellipsen på "bas" -laget för att välja dess skiss och tryck sedan på Radera för att radera det här urvalet från den svarta ellipsen (bild 3b).
Stäng av "bas" lagret för att se resultatet (fig 3c). Radera de två trianglarna på toppen genom att omsluta dem med ett rektangulärt val och ta bort innehållet. Vi har en halv ring nu (fig. 3d). Byt namn på det här lagret till "ring".
Låt oss nu lägga till några material. För att simulera miljöreflektioner på aluminium lägger du till en Gradient Overlay-stil i "ring" -laget. Skapa en horisontell linjär gradient med flera färgvariationer. Försök att föreslå små tints medan du håller dig nära en medelgrå. Gör också höger sida lättare till ledtråd i ljusriktningen. Se bilden för detaljerna.
Aluminium ser bra ut, men vi vill ge den en borstad textur för att göra den mer realistisk. På ett nytt lager skapa en vit rektangel med liknande proportioner till ringen (bild 5a). Rotera den nu 90 grader så att den ligger i vertikal position. Använd Free Transform Tool (Command + T) för att rotera och behåll Shift trycks för att snäppa i rät vinkel (fig 5b).
Se till att de standard svarta och vita färgerna är aktiverade och gå till Filter> Render> Fibers och justera inställningarna tills du får många smala ränder med lite variation (fig 5c). Nu ser du anledningen till att vi var tvungna att rotera rektangeln: filtret skapade vertikala fibrer men vi behöver dem att vara horisontella.
Så vrid nu rektangeln 90 grader tillbaka till sin ursprungliga horisontella position. Namnge detta lager "brushed_alu" och ändra dess blandningsläge till skärm. Detta kommer att gömma de svarta delarna, vilket ger snygga ljusa linjer att lysa igenom (fig 5d).
Nu måste vi kasta den penslade texturen så att den matchar vår ring. Sätt lagrets opacitet till 25% så att ringen blir synlig. Återigen anropa Free Transform Tool (Command + T), Högerklicka och välj Warp (fig 6a).
Ett nät visas. Dra manuellt ner på handtagen och de inre punkterna så att nätet överensstämmer med ringen. Försök att hålla ett jämnt avstånd mellan maskinjerna så att skiktet deformeras korrekt (fig 6b).
Kommandoklicka på "ring" -laget, använd sedan det här valet för att maskera "brushed_alu" -laget eller vänd enkelt in det här valet (Command + Shift + I) och klicka sedan på Del för att bli av med alla extra pixlar. Vilken fin subtil textur (fig 6c)! Vi kommer att upprepa denna teknik varje gång vi vill uppnå det penslade utseendet.
Vrid "bas" lagret igen. Flytta den under "ring" -laget och duplicera det genom att slå Command + J. Skala den nya ellipsen ner en bit och flytta den upp lite. Gör detta lager svart (Alt + Backspace) och rasterize det. Applicera ett Gaussian Blur filter (Filter> Blur> Gaussian Blur) med en radie av 5px. Detta kommer att bli ringen skugga.
Med ringen och dess skugga på plats, låt oss gå vidare till behållaren. Duplicera "basen" skiktet, flytta ner det och skala det upp (fig 8a). Nämn detta lager "botten".
Ställ in ett rutnät med guider för att definiera behållarens storlek och position. Använd alltid Snap-funktionen för att hjälpa dig att skala och flytta elementen till rätt plats. Med nätet på plats, välj pennverktyget (P) i formskiktsläge och dra åt ottekantens framsida (bild 8b). Gör det någon färg du gillar, vi ändrar det snart nog. Namn på detta lager "center".
Duplicera "mitt" lagret för att skapa ansiktet till höger. Flytta den och justera den med Free Transform Tool (Command + T), alternativt välja Distort and Skew via högerklickning för att rätta till perspektivet. Namn det här skiktet "rätt".
Duplicera och spegla det, namnge det "vänster" och flytta det till vänster om "mitt" -lagret. Allt du behöver göra nu är att lägga till de två yttersta ytorna med samma teknik som skisseras här. Nämn dessa lager "höger" och "vänster".
Låt oss ge behållaren lite textur. Lägg till först i varje ansikte ett överlagringslager, använd sedan tekniken som lärdes i steg 5 och 6, lägg ett borstat aluminiumskikt ovanpå det. Använd linjära gradienter från lätta till medelstora grayer, roterade för att ligga i linje med perspektivet.
Aluminium är ganska reflekterande därför färgen påverkas djupt av omgivningen. Det kommer att finnas ljusa och mörka föremål som kommer från många håll, så gör inte gradienterna på samma sätt. En bra metod att ge en känsla av djup är att göra en skarp kontrast mellan två intilliggande ansikten, som du kan se i följande bild där en riktigt mörkgrå möter en riktigt ljus. Observera också att det borstade aluminiumskiktet är förvrängt så att linjerna flyter med perspektivet.
Flytta "bas" skiktet under behållarskikten och fyll i klyftan med vit. Samma som tidigare lägger du till en Gradient Overlay-lagstil och ett borstat aluminiumskikt. Var försiktig med att matcha ljusriktningen: det nedre högra hörnet ska vara ljust medan den övre vänstra ska vara mörkt. Det är denna konsistens som ger realism till vår ikon. Observera också hur lagret "botten" har mörkats.
I den verkliga världen är ingen kant helt skarp. Det finns alltid en tunn remsa av material som kommer att få höjdpunkter där ansikten möts. Så för realismens skull lägger vi till den här snygga lilla handen. Duplicera "mitt" ansikte, byt namn på det "markera" och minska dess fyllnadsvärde till 0%. Detta kommer att gömma lagrets innehåll samtidigt som lagstilarna är synliga.
Lägg till en Stroke-lagstil med dessa parametrar: Färg av vit, Storlek på 1px, Utanför position och Opacitet på 30%. Lägg sedan till en yttre Glow-stil: Blandningsläge för Normal, Färg av vit, Opacitet på 50% och Storlek på 5px (se bilden). Upprepa denna process för "vänster" och "höger" ansikten.
Höjdpunkterna kommer inte att springa hela höjden på reservoaren så vi måste maskera botten ut. Lägg de tre höjdlagren i en ny lagergrupp med namnet "highlight".
Välj gruppen och klicka på Command + E för att slå samman den: du har nu ett lager ("highlight") och lagstilarna har blivit bakade. Håll Q för att gå in i Quick Mask och med en mjuk, rund svart penselfärg ut längdkanten av kanterna.
Använd 100% opacitet på botten och gradvis minska den när du flyttar upp kanterna för att göra ett gradvis val. När du trycker på Q igen kommer de målade delarna att maskeras av ett omvänd val. Använd den för att maskera skiktet, så småningom applicera masken när du är nöjd med resultaten.
Låt oss bygga toppkammaren nu. Skapa en ny ellips på toppen av ringen (fig 14a). Detta kommer att vara kammarens botten. Dra nu centrum-höger sida av oktagonen precis som i steg 8. Ställ in styrenheterna, aktivera Snap och använd pennverktyget (P) i formslagsläge (bild 14b). Duplicera det här skiktet, vrid det horisontellt och placera det bredvid den första (fig 14c).
Lägg till gradöverlagringar (bild 14d) och borstat aluminiumstruktur (figur 14e). Bygg de yttre ytorna och texta dem på samma sätt (fig 14f). Namn dessa lager, respektive "right", "left", "rightmost" och "leftmost".
Låt oss lägga till några fina kanter till toppen också. Använd samma teknik som förklaras i steg 12 och 13, men den här gången ger en svart streck till "vänster" och "vänster" skikt och en vit streck till "höger" och "höger" skikt. Detta beror på att vi tidigare markerade höger sida på behållaren, kom ihåg?
För att hålla orden på varandra, gruppera alla lager med meningsfulla namn som "BASE", "RING" och "TOP". Kopiera "TOP" -gruppen och vrid den vertikalt (fig 16a). Skala ner det vertikalt bara en liten bit. Med hjälp av våra ljusblåa vänner (guiderna) ritar du en vit oktagon i utrymmet mellan de två blast (fig 16b). Kassera den övre topp som vi inte behöver det längre.
Kopiera den vita oktagonen och gör den svart (fig 17a). Fyll i luckorna i hörn av den vita oktagonen (de cirklade områdena i fig 17b). Gör rektangulära val på den vita oktagonen och mörk dem lite för att simulera reflektionerna på lockets tjocklek (se rektangeln på fig 17b). Kom ihåg att hålla höger sida lättare. Nu har vi ett fint tunt lock. Rita en vit ellips något ovanför lockets mitt. Det kommer att vara basen på plastknappen (fig 17b).
Dra nu locket på locket. Använd pennverktyget (P) genom att dra fyra trianglar (fig 18a) och kopiera dem och vrid dem över till andra sidan. Lägg till graderingsöverläggningar (fig 18b) och borstad textur (fig 18c). Locket är nu klart.
För ratten duplicerar den lilla ellipsen, förstorar den och ger den en Gradient Overlay-stil (fig 19a). Rita en trapezoid på höger sida (fig 19b), spegla den till vänster sida. Rasterize båda skikten och slå dem ihop i en. Ge det här laget ett horisontellt överdrag för överlagring så att det ser runt runt (fig 19c).
Låt oss nu ge ratten en höjdpunkt. Kopiera den övre ellipsen, sätt dess fyllnadsvärde till 0% och ge den en vit streck (fig 20a). Lägg det här laget i en grupp och slå ihop det. Ange nu Quick Mask och måla ut de delar vi inte behöver (bild 20b). Avsluta snabbmaskningsläge, vrid markeringen i en mask och tillämpa den (högerklicka på masken och välj Apply Mask). Lägg bara till lite Gaussian Blur och du är färdig (fig 20c)!
Låt oss nu lägga till några scalloping på knoppen. Rita en oval form längst ner i mitten (fig 21a) och ge den en inre skugga (fig 21b) och ett slag (fig 21c). Duplicera detta lager två gånger (fig 21d). Lägg nu alla dessa lager i en ny grupp med namnet "KNOB."
Låt oss lägga till en reflektion. Kopiera "KNOB" -gruppen och slå samman den resulterande "KNOB copy" -gruppen. Vänd det vertikalt och flytta det bakom och under vredet (bild 22a). I Quick Mask, gör ett lutningsval (fig 22b) och använd det för att maskera lagret. Ställ in dess blandningsläge till Pin Light och dess opacitet till 50%.
Nu på näbb. Rita en serie former och lägg till Gradient Overlays som på bilden nedan. Slutligen lägg till en borstad textur till alla delar precis som vi lärt oss tidigare. Sätt alla dessa lager i "BEAK" -gruppen.
Följ en liknande process för att dra gångjärnet. Lägg märke till att den lilla cirkeln (the nav) har en mörkgrå stroke applicerad på den. Sätt dessa lager i en ny grupp som heter "HINGE."
För att rita handtaget skapa ett nytt svart formlag (fig. 25a). Tweak vägen tills du är nöjd med den och rastrera den sedan. Välj nu Color Dodge Tool (O), välj en halvgenomsiktig, mjuk rund pensel och försiktigt måla höjdpunkterna på toppen av handtaget och ner sidorna för att simulera bakgrundsbelysning (fig. 25b), och förfina den högsta höjdpunkten för att göra det mer framträdande (fig 25c).
Handtaget har även en kammussling. Rita den med ett formlager och ge den en subtil vit inre skugga genom att ställa in blandningsläge till normal och spela med opacitet tills du är nöjd (bild 25d). Handtaget är klart!
Nu för vårt sista steg låt oss sätta in ventilen. Låt oss först dra i skruven. Gör ett formlag och färg det medeltrått, gör en lättare kopia och flytta den bredvid den första (fig 26a).
Lägg till de återstående formerna och täck dem med gradienter så att de ser rundade ut (fig. 26b-26e). Slutligen sätta alla delar in i en ny grupp med namnet "VALVE", rotera den och placera den på sidan av behållaren (bild 26f). Var gjort!
Pojke var den här långvariga! Det var värt det, tror du inte? Nu när Moka Express är klar är allt vi behöver göra att skala ner till 256px (för Vista), 128px (för dockningsapplikationer), 48px, 32px och 16px (för de olika ikonerna / listorna / detaljerna i OS windows) och importera alla storlekar till vår favoritprogram för redigering av ikoner. Jag hoppas att du hade kul och lärt dig många användbara tekniker under denna turné de force. Nu brygga du några egna ikoner!
Accentsconagua