Share
Het hoofdbestanddeel van elk Italiaans ontbijt is huis-espressokoffie, gebrouwen met de iconische "Moka Express" -pot. In deze zelfstudie maken we een Moka helemaal opnieuw met vormen, laageffecten en een hele reeks productiviteitsverhogende tips. We zullen vervolgens doorgaan om ons ontwerp om te zetten in een professioneel pictogram voor Leopard en Vista. Dus zorg dat je koffiemokken klaar staan en laten we beginnen met brouwen!
Deze zelfstudie is bedoeld voor gemiddelde Photoshop-gebruikers, daarom is de beheersing van de interface en kennis van de belangrijkste sneltoetsen vereist. Bekijk de afbeelding hieronder om te zien hoe ons voltooide pictogram eruit zal zien.
Laten we voordat we beginnen aquatinted worden met onze koffiepot. Lees er alles over en bekijk de volgende foto. Dit is mijn eigen geliefde Moka Express, zonder welke ik geen dag kon beginnen. Het ziet er ingewikkeld uit, maar dat is het echt niet.
We kunnen zien dat de Moka bestaat uit: een achthoekig bodemreservoir met een klep aan één kant, een achthoekige opschroefbare bovenkamer met een bek voor het gieten van de koffie en een ringvormige basis, een deksel met een knop en een handgreep aangesloten op het scharnier van het deksel. Er zijn twee materialen: zwart plastic voor de knop en de hendel en aluminium voor het lichaam.
Laten we beginnen bij de ring. Maak een nieuw, leeg, RGB-document en stel de grootte in op 512 pixels bij 512 pixels, de maximale resolutie van OS X Leopard-pictogrammen.
Gebruik tijdens de zelfstudie witte, grijze en donkergrijze achtergrondlagen om het artwork beter te kunnen zien. Laten we ons document opstellen. Druk op D om de standaard zwarte (voorgrond) en witte (achtergrond) kleuren te activeren. Vanuit het menu Beeld zet u Linialen (Command + R) en Snap (Command + Shift + kolomtoets) aan. We zijn klaar om te gaan.
Gebruik het Ellips-gereedschap en teken met behulp van enkele hulplijnen twee ellipsen op twee afzonderlijke lagen. Maak de onderste ellips zwart en noem de laag "onderaan". Maak de bovenste ellips wit en noem de laag "basis".
Maak met het Rechthoekige selectiekader (M) een selectie in het midden van de hulplijnen op de onderste laag en druk vervolgens op Alt + Backspace om deze te vullen met de voorgrondkleur van zwart (zie fig. 3a).
Druk op Command + D om alles te deselecteren. Terwijl je nog steeds op de "onderste" laag staat Command-klik je op de miniatuur van de witte ellips op de "basis" laag om zijn omtrek te selecteren, druk dan op Wissen om deze selectie uit de zwarte ellips te wissen (fig. 3b).
Schakel de "base" -laag uit om het resultaat te zien (fig. 3c). Wis de twee driehoeken aan de bovenkant door ze met een rechthoekige selectie om te sluiten en de inhoud ervan te verwijderen. We hebben nu een halve toon (fig. 3d). Hernoem deze laag naar "ring".
Laten we nu wat materialen toevoegen. Als u omgevingsreflecties op het aluminium wilt simuleren, voegt u een verloopoverlaystijl toe aan de "ring" -laag. Creëer een horizontaal lineair verloop met verschillende kleurvariaties. Probeer lichte tinten te suggereren terwijl je in de buurt van een medium grijs blijft. Maak ook de rechterkant lichter om te wijzen op de richting van het licht. Zie de foto voor de details.
Het aluminium ziet er goed uit, maar we willen het een geborstelde textuur geven om het realistischer te maken. Maak op een nieuwe laag een witte rechthoek met dezelfde afmetingen als de ring (fig. 5a). Draai hem nu 90 graden zodat hij in een verticale positie staat. Gebruik het gereedschap Vrije transformatie (Command + T) om te draaien en houd Shift ingedrukt om te snappen naar rechte hoeken (fig. 5b).
Zorg ervoor dat de standaard zwart-wit kleuren geactiveerd zijn en ga naar Filter> Renderen> Vezels en pas de instellingen aan totdat je veel dunne strepen krijgt met slechts een kleine variatie (fig. 5c). Nu zie je de reden waarom we de rechthoek moesten roteren: het filter maakte verticale vezels, maar we hebben ze horizontaal nodig.
Draai de rechthoek nu 90 graden terug naar de oorspronkelijke horizontale positie. Noem deze laag "brushed_alu" en verander zijn Overvloeimodus in Scherm. Hierdoor worden de zwarte delen verborgen en blijven mooie heldere lijnen schijnen (fig. 5d).
Nu moeten we de geborstelde textuur verdraaien zodat deze overeenkomt met onze ring. Zet de laagdekking op 25% zodat de ring zichtbaar zal zijn. Roep wederom de Vrije Transformatietool aan (Command + T), klik met de rechtermuisknop en selecteer Warp (fig. 6a).
Er verschijnt een mesh. Sleep met de hand op de handgrepen en de binnenste punten om het gaas in overeenstemming te brengen met de ring. Probeer een gelijkmatige afstand tussen de netlijnen te houden, zodat de laag correct vervormt (fig. 6b).
Command-klik op de "ring" laag, gebruik dan deze selectie om de "brushed_alu" laag te maskeren of keer eenvoudigweg deze selectie om (Commando + Shift + I) en druk dan op Del om alle extra pixels te verwijderen. Wat een mooie subtiele textuur (fig. 6c)! We zullen deze techniek telkens herhalen als we de geborstelde look willen bereiken.
Zet de "base" -laag weer aan. Verplaats het onder de "ring" -laag en dupliceer het door op Command + J te drukken. Schaal de nieuwe ellips iets naar beneden en verplaats hem iets omhoog. Maak deze laag zwart (Alt + Backspace) en raster het. Een Gaussiaans vervagingfilter toepassen (filter> vervagen> Gaussiaans vervagen) met een straal van 5 px. Dit zal de schaduw van de ring zijn.
Laten we met de ring en de schaduw op zijn plaats naar het reservoir gaan. Dupliceer de "basislaag", verplaats deze naar beneden en schaal hem op (fig. 8a). Noem deze laag "onderaan".
Stel een raster met hulplijnen in om de grootte en positie van het reservoir te bepalen. Gebruik altijd de Snap-functie om u te helpen bij het schalen en verplaatsen van elementen naar hun juiste locatie. Terwijl het raster op zijn plaats zit, kiest u het gereedschap Pen (P) in shape-layer-modus en tekent u de voorkant van de octagon (fig. 8b). Maak het elke kleur die je wilt, we zullen hem snel genoeg veranderen. Noem deze laag "midden".
Dupliceer de laag "midden" om het gezicht naar rechts te maken. Verplaats het en pas het aan met het gereedschap Vrije transformatie (Command + T), en kies afwisselend Vervormen en scheeftrekken met de rechtermuisknop om het perspectief te corrigeren. Noem deze laag "goed".
Dupliceer en spiegel het, noem het "links" en verplaats het links van de laag "midden". Het enige dat u nu hoeft te doen, is om de twee buitenste vlakken toe te voegen met dezelfde techniek die hier wordt beschreven. Noem deze lagen "uiterst rechts" en "uiterst links".
Laten we het reservoir wat textuur geven. Voeg eerst aan elk vlak een laagstijl Gradient Overlay toe en gebruik vervolgens de techniek die is geleerd in stap 5 en 6 en voeg daarover een laag van geborsteld aluminium toe. Gebruik lineaire gradiënten van lichte tot middelgrote grijstinten, geroteerd om op één lijn te komen met het perspectief.
Aluminium is behoorlijk reflecterend en daarom wordt de kleur ervan sterk beïnvloed door de omgeving eromheen. Er komen lichte en donkere voorwerpen uit vele richtingen dus zorg ervoor dat de hellingen niet allemaal dezelfde kant op gaan. Een goede methode om een gevoel van diepte te geven, is door een duidelijk contrast te maken tussen twee aangrenzende vlakken, zoals u kunt zien op de volgende afbeelding, waar een echt donkergrijs een echt helder grijs ontmoet. Merk ook op dat de geborstelde aluminiumlaag vervormd is, zodat de lijnen met het perspectief meebewegen.
Verplaats de "basislaag" onder de reservoirlagen en vul de opening met wit. Hetzelfde als hiervoor, voeg een laagstijl Gradient Overlay en een laag geborsteld aluminium toe. Zorg ervoor dat de richting van het licht overeenkomt: de rechterbenedenhoek moet licht zijn, terwijl de linkerbovenhoek donker moet zijn. Het is deze consistentie die ons pictogram realisme zal geven. Merk ook op hoe de "onderste" laag is verduisterd.
In de echte wereld is geen rand perfect scherp. Er is altijd een dunne strook van materiaal dat hoogtepunten zal vangen waar gezichten samenkomen. Dus laten we voor het realisme deze nette kleine aanraking toevoegen. Dupliceer het "midden" -vlak, hernoem het "markeren" en verminder de vulwaarde tot 0%. Hiermee wordt de inhoud van de laag verborgen terwijl de laagstijlen zichtbaar blijven.
Voeg een Lijnstijl toe met behulp van deze parameters: Kleur wit, Grootte van 1 px, Positie buiten en Dekking van 30%. Voeg vervolgens een Outer Glow-stijl toe: Mengmodus van Normaal, Kleur wit, Dekking van 50% en Grootte van 5 px (zie de afbeelding). Herhaal dit proces voor de "linker" en "juiste" gezichten.
De hoogtepunten zullen niet de hele hoogte van het reservoir lopen, dus we moeten de bodem uit maskeren. Zet de drie markeringslagen in een nieuwe laaggroep met de naam "highlight".
Selecteer de groep en druk op Command + E om deze samen te voegen: je hebt nu één laag ("highlight") en de laagstijlen zijn ingeslagen. Druk op Q om Quick Mask in te voeren en met een zachte, ronde, zwarte borstel het onderste deel van de randen af.
Gebruik 100% dekking onderaan en verminder het geleidelijk naarmate je de randen omhoog beweegt om een geleidelijke selectie te maken. Als je opnieuw op Q drukt, worden de geverfde delen gemaskeerd door een omgekeerde selectie. Gebruik het om de laag te maskeren en pas eventueel het masker toe als u tevreden bent met de resultaten.
Laten we nu de bovenste kamer bouwen. Maak een nieuwe ellips bovenop de ring (fig. 14a). Dit zal de basis van de kamer zijn. Teken nu de rechter rechterkant van de achthoek zoals bij stap 8. Stel de hulplijnen in, activeer Snap en gebruik de Pen Tool (P) in shape-layer modus (fig. 14b). Dupliceer deze laag, draai hem horizontaal om en plaats hem naast de eerste laag (fig. 14c).
Voeg kleuroverlappingen toe (afb. 14d) en de textuur van geborsteld aluminium (afb. 14e). Bouw de buitenste vlakken en structureer ze op dezelfde manier (fig. 14f). Geef deze lagen de naam 'rechts', 'links', 'meest rechts' en 'uiterst links'.
Laten we ook een paar fijne randen toevoegen aan de top. Gebruik dezelfde techniek als uitgelegd in stap 12 en 13, maar geef deze keer een zwarte lijn aan de "meest linkse" en "linker" lagen en een witte lijn aan de "meest rechtse" en "juiste" lagen. Dit komt omdat we eerder de rechterkant op het reservoir hebben gemarkeerd, onthoud?
Om de dingen overzichtelijk te houden, groepeer alle lagen met betekenisvolle namen zoals "BASE", "RING" en "TOP". Dupliceer de "TOP" -groep en klap hem verticaal (fig. 16a). Schaal het een beetje verticaal naar beneden. Trek met de hulp van onze lichtblauwe vrienden (de gidsen) een witte octagon in de ruimte tussen de twee tops (fig. 16b). Gooi het bovendeel weg top omdat we het niet meer nodig hebben.
Dupliceer de witte achthoek en maak deze zwart (fig. 17a). Vul de openingen in op de hoeken van de witte achthoek (de omcirkelde gebieden in afb. 17b). Maak rechthoekige selecties op de witte achthoek en donker ze een beetje om de reflecties op de dikte van het deksel te simuleren (zie de rechthoek op afb. 17b). Vergeet niet om de rechterkant lichter te houden. Nu hebben we een mooie dunne deksel. Teken een witte ellips iets boven het midden van het deksel. Het zal de basis van de plastic knop zijn (fig 17b).
Teken nu de bovenkant van het deksel. Teken met behulp van het gereedschap Pen (P) vier driehoeken (fig. 18a) en kopieer en draai ze vervolgens om naar de andere kant. Gradiëntoverlays toevoegen (afb. 18b) en de geborstelde textuur (afb. 18c). Het deksel is nu voltooid.
Voor de knop dupliceer je de kleine ellips, vergroot je deze en geef je hem een verloopoverlay-stijl (fig. 19a). Teken aan de rechterkant een trapezium (fig. 19b), spiegelen aan de linkerkant. Rasteer beide lagen en voeg ze samen. Geef deze laag een horizontale verloopoverlay om deze rond te laten kijken (fig. 19c).
Laten we nu de knop een hoogtepunt geven. Dupliceer de bovenste ellips, stel de vulwaarde in op 0% en geef deze een witte lijn (fig. 20a). Zet deze laag in een groep en voeg deze samen. Ga nu naar Quick Mask en verf de delen die we niet nodig hebben (fig. 20b). Verlaat de modus Snelmasker, verander de selectie in een masker en pas het toe (klik met de rechtermuisknop op het masker en kies Masker toepassen). Voeg gewoon een beetje Gaussiaans vervagen toe en u bent klaar (fig. 20c)!
Laten we nu wat scalloping toevoegen aan de knop. Trek een ovale vorm helemaal in het midden (fig. 21a) en geef het een innerlijke schaduw (fig. 21b) en een lijn (fig. 21c). Dupliceer deze laag twee keer (fig. 21d). Plaats nu al deze lagen in een nieuwe groep met de naam "KNOB."
Laten we een weerspiegeling toevoegen. Dupliceer de "KNOB" -groep en voeg de resulterende "KNOB-kopie" -groep samen. Draai het verticaal en verplaats het achter en onder de knop (fig. 22a). Maak in Snelmasker een selectie van een verloop (fig. 22b) en gebruik deze om de laag te maskeren. Zet de mengmodus op Pin Light en de dekking op 50%.
Nu verder naar de snavel. Teken een reeks vormen en voeg overlappende overgangen toe, zoals in de onderstaande afbeelding. Voeg ten slotte een geborstelde textuur toe aan alle onderdelen, net zoals we eerder hebben geleerd. Zet al deze lagen in de "BEAK" -groep.
Volg een soortgelijk proces om het scharnier te tekenen. Merk op dat de kleine cirkel (de naaf) heeft een donkergrijze streep toegepast. Plaats deze lagen in een nieuwe groep met de naam 'HINGE'.
Om de hendel te tekenen, maakt u een nieuwe zwarte vormlaag (fig. 25a). Pas het pad aan totdat u tevreden bent en rasteer het vervolgens. Kies nu de Color Dodge Tool (O), kies een semi-transparante, zachte ronde borstel en schilder de markeringen voorzichtig op de bovenkant van de hendel en langs de zijkanten om achtergrondverlichting te simuleren (fig. 25b), en verfijn de bovenste markering om het prominenter (fig. 25c).
Het handvat heeft ook een coquille. Teken het met een vormlaag en geef het een subtiele witte innerlijke schaduw door zijn mengmodus in te stellen op Normaal en te spelen met de dekking totdat je tevreden bent (fig. 25d). Het handvat is klaar!
Laten we nu voor onze laatste stap de klep erin doen. Laten we eerst de schroef tekenen. Maak een vormlaag en kleur deze in medium grijs, maak een lichtere kopie en verplaats deze naast de eerste (fig. 26a).
Voeg de resterende vormen toe en bedek ze met hellingen zodat ze rond lijken (fig. 26b-26e). Plaats tot slot alle onderdelen in een nieuwe groep met de naam "VALVE", draai deze en plaats deze aan de zijkant van het reservoir (fig. 26f). Werden gedaan!
Jongen was zo langdradig! Het was het echter wel waard, vind je ook niet? Nu de Moka Express klaar is, hoeven we het alleen nog maar te schalen naar 256 px (voor Vista), 128 px (voor dock-toepassingen), 48 px, 32 px en 16 px (voor de verschillende pictogram / lijst- / detailaanzichten in OS-vensters) en importeer alle formaten in onze favoriete pictogrambewerkingssoftware. Ik hoop dat je veel plezier hebt gehad en veel nuttige technieken hebt geleerd tijdens dit hoogstandje. Ga nu enkele eigen iconen brouwen!
Accentsconagua