Share
Laten we teruggaan in de tijd en kijken naar systeempictogrammen van Windows XP. We raken geïnspireerd door een oud computerpictogram. Vervolgens maken we een eenvoudig monitorpictogram in die stijl. Icon Factory is het bedrijf dat de pictogrammen voor zowel Vista- als XP Windows-besturingssystemen heeft gemaakt. Hun werken dienen niet alleen als inspiratie voor deze tutorial, maar ook voor de vele iconen die vandaag zijn gemaakt.
Opmerking van de uitgever: Deze tutorial is oorspronkelijk in de Tsjechische taal gepubliceerd op
Grafika online.
Grafika heeft toestemming gegeven voor Vaclav om het hier opnieuw te publiceren op Psdtuts + voor diegenen onder ons die Tsjechie nog niet helemaal onder de knie hebben ...
Voordat we aan de slag gaan, laten we eens kijken naar de afbeelding die we gaan maken. Zoals altijd is het gelaagde Photoshop-bestand beschikbaar via ons Psdtuts + Plus-lidmaatschap.
Eerst kopiëren we het XP-systeempictogram in een nieuw document om het als inspiratie voor dit ontwerp te gebruiken. Kies vervolgens een paarse kleur (# 9693B0) en teken een rechthoek, die de basisvorm van een scherm vormt. Gebruik het gereedschap Afgeronde rechthoek en stel de juiste straal in.
Verander de kleur in blauw (# 1E7EDB) voor de bureaubladachtergrond. Teken vervolgens het binnenste gedeelte van onze monitor. Maak deze straal een beetje kleiner. Laat ook wat ruimte onder voor het bedieningspaneel.
Het is goed om knoppen aan de rechterkant in één laag te tekenen. Houd de Shift-toets ingedrukt tijdens het tekenen. Ga dan naar de andere kant en maak een grotere schakelaarvorm. Stel vervolgens het clippingmasker van de vorige laag in (Ctrl + Alt + G). De schakellaag wordt "Shape 11" genoemd.
Dat is genoeg voor nu, dus laten we het transformeren door naar Bewerken> Transformeren> Vervormen te gaan.
Het resultaat van 100% grootte tot nu toe is hieronder weergegeven.
Nu voegen we een derde dimensie toe aan onze monitor. Kopieer de eerste laag (Ctrl + J). Gebruik vervolgens dezelfde transformatie, maar maak deze groter in de linkerbovenhoek en rechtsboven. Wijzig de laag van deze laag in donkerpaars (# A19ECA). Stel vervolgens onze eerste laag in op een lichtpaarse kleur (# D6D3F6).
Maak selecties van beide lagen (Ctrl + Shift + klik op de laag). Haal vervolgens vanuit het menu Bewerken de functie Lijn uit. Stel de grootte in op 1 pixel en de kleur op donker paars (# 6A6887). Druk vervolgens op OK. Natuurlijk kunnen we de laageffecten gebruiken, maar we hebben op deze manier gekozen omdat we een klein stukje van deze contour willen verbergen.
Maak meer lagen boven de monitor terug. Stel vervolgens het clippingmasker van de vorige laag in (Ctrl + Alt + G). Pak het penseel. Selecteer met een zachte borstel geselecteerd de hoogtepunten (1) en schaduwen (2).
We kunnen ook met het bedieningspaneel spelen. Kopieer de schakellaag en geef deze een lichtere kleur (# 9693B0). Maak het dan een beetje kleiner. Deze kleine details zullen je werk altijd interessanter maken.
Nu werken we op het beeldscherm. Voeg een nieuwe laag toe en teken een lichtblauw (# 70B5F4) verloop. Voeg vervolgens meer vormen toe om de illusie te creëren dat u een taakbalk hebt.
Om het scherm een plastischer uiterlijk te geven, tekent u een passend donkere en lichte omtrek er omheen. We zouden de Stroke-functie kunnen gebruiken, maar we zullen dit keer iets anders proberen. Teken de omtrek als een laagvorm, zodat deze naar de randen verdwijnt.
Kopieer eerst de laag van het scherm (Ctrl + J). Selecteer vervolgens de vorm met Select Path Tool (A). Kopieer de vorm en voeg deze in. Verplaats het vervolgens iets langs de zijkanten en trek het van de oorspronkelijke vorm af (tweede pictogram in de lade). Gebruik Vervorming om de vorm naar de rand te laten verdwijnen en de vorm goed uit te rekken.
Kopieer de laag opnieuw (Ctrl + J). Vul het dan met een witte kleur. Verplaats hem 1 pixel naar boven en naar links. Dit maakt de omtrek beter zichtbaar. De 100% -weergave tot nu toe is hieronder.
We zullen op dezelfde manier met het onderste gedeelte van het scherm werken. U hebt slechts één vorm nodig die is gevuld met een witte kleur. Het scherm ziet er nu vrij plastic uit.
Laten we nu wat reflecties toevoegen. De Pen-tool is handig. Het is aan jou om te kiezen waar de reflectie zal zijn.
Een belangrijk ding om hier te doen is het Laagmasker van onze reflectie instellen (1). Laad het (Ctrl + Shift + klik op alle lagen) om de reflectie alleen daar zichtbaar te maken. Dit is waar we het willen hebben - boven de monitorlaag (2) en de achterkant van de monitor (3).
Maak de achtergrond op je bureaublad aantrekkelijker met een oude truc. Teken een Ellips (ongeacht de grootte) met de Ellipse Tool. Maak vervolgens een selectie uit de laag (Ctrl + Shift + klik). Stel vervolgens de lijn in als een pixel van 1 pixel in een nieuwe laag.
Draai de ellips rond, transformeer hem en geef hem opnieuw een lijn van 1 pixel in een nieuwe laag. Doe dit meerdere keren. Voeg vervolgens een laagmasker toe aan elke ellipslaag. Vul het met een zwarte kleur zodat niets zichtbaar is. Gebruik vervolgens een zachte witte borstel om te tekenen waar u de contouren zichtbaar wilt maken. Voeg meer wit toe op plaatsen waar de contouren elkaar kruisen.
Het laatste deel van de monitor dat u moet maken, is de monitorstandaard. Teken een ellips (#DCDBEE-kleur). Transformeer het vervolgens met de functie Vervormen.
Kopieer dit (Ctrl + J), maak het kleiner (Ctrl + T) en vul het met donkerdere schaduw (# B6B4D4).
Om het hoofdgedeelte van de standaard te tekenen, moet u de Pen-tool gebruiken. Maak vervolgens een vorm, zoals hieronder weergegeven.
Vervolgens zullen we contouren van elke vorm maken. Maak eerst de selectie van monitorstandlagen (Ctrl + Shift + klik op de lagen) en kies Lijnfunctie - # 5D5B7B kleur.
Het enige dat u nu moet toevoegen, zijn enkele schaduwen en hooglichten. U kunt de Pen-tool opnieuw gebruiken. Vergeet niet dat de standaard niet het hoofdgebied is waarop gebruikers zich moeten concentreren. Wees voorzichtig met schaduwen en hooglichten, maak ze niet te expressief.
De laatste stap is om de omtrek van het beeldscherm te wissen waar het de standaard raakt. Voeg een laagmasker toe en teken erin met een harde zwarte kwast. Als u geen dekking van 100% gebruikt, kunt u de omtrek enigszins zichtbaar laten. Dit is de reden dat we niet de hele omtrek van dit spectaculaire pictogram hebben gemaakt. In plaats daarvan hebben we twee hoofdlijnen: één voor het beeldscherm en een tweede voor de standaard zelf.
En dat is alles! Ik hoop dat je iets nieuws hebt geleerd over pictogramontwerp in Photoshop.
Accentsconagua