Share
Een populair pictogram dat u op internet kunt vinden, is het slotpictogram. Het wordt veel gebruikt om beveiligde webpagina's te identificeren. Het geeft vaak wachtwoordvelden voor beveiligde bestanden aan. Waar je ook een slotpictogram wilt plaatsen, deze tutorial laat je zien hoe je een slot kunt maken dat je kunt gebruiken!
Nota van de redactie: Deze tutorial is oorspronkelijk gepubliceerd in het Tsjechisch bij 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 volledige Photoshop-bestand beschikbaar via ons Psdtuts + Plus-lidmaatschap.
Laten we beginnen met een nieuw document, gevuld met een lichtgrijze kleur (# D5D5D5). Kies het gereedschap Afgeronde rechthoek. Teken vervolgens de basisvorm van een slot. Stel de Radius in hoe u zich goed voelt. Vul het dan met een lichtgrijze kleur (#DDDDDD).
Laten we het bovenste deel toevoegen. Gebruik de Ellips-tool om een cirkel te tekenen. Kies het met de Pad Selection Tool, kopieer, plak en maak het een beetje kleiner met behulp van (Ctrl + T). Trek vervolgens de kleinere cirkel van de grotere af door er een gat in te slaan.
Wijzig uw gereedschap in het gereedschap Rechthoek en teken met de Alt-toets ingedrukt (aftrekkend) een rechthoek zoals hieronder wordt weergegeven. Voer dan met hetzelfde gereedschap, maar met de Shift-toets ingedrukt (toevoegen), de linker- en rechterkant af.
Maak het linker uiteinde afgerond door een ellips te tekenen met de Ellipse Tool, opnieuw met de Shift-toets ingedrukt. Als u pixel-nauwkeurig wilt worden, moet u het raster inschakelen.
Laten we beginnen met het toevoegen van een aantal effecten om het slot er realistisch uit te laten zien. We beginnen met het onderste gedeelte en gebruiken enkele laageffecten. Maak een beetje donkerder rond de randen met het effect Inner Schaduw.
Sommige effecten moeten handmatig worden uitgevoerd. Laten we een sterke schaduw toevoegen door de laag te kopiëren (Ctrl + J). Kies het gereedschap Pad selecteren (A). Selecteer vervolgens kopiëren (Ctrl + C) en voeg in (Ctrl + V). Verplaats vervolgens een paar pixels naar boven en plaats de stijl aftrekken. Vul de vorm die we zojuist hebben gemaakt in met een donkergrijze kleur (# 505050). De schaduw (onderomtrek) is voltooid.
Nu vraag je je misschien af waarom we deze techniek gebruikten en niet gewoon een innerlijk schaduweffect toepasten? Nou dat is omdat we niet willen dat de schaduw op het hele slot wordt toegepast. Dat is waarom we het laagmasker toevoegen. Pak een penseel (zwarte zachte borstel) en teken in het midden van een vorm. Dat maakt de schaduw minder zichtbaar en voegt een beetje meer plasticiteit toe aan ons uiteindelijke beeld. Zoals je kunt zien in de laatste afbeelding hieronder, verdwijnt de schaduw als we naar het midden gaan.
Oké, laten we ons slot meer verduisteren. Maak een nieuwe laag boven de vormlaag (van een onderste gedeelte) (Ctrl + Alt + Shift + N). Stel de laag in als een snijmasker van de vorige laag door op (Ctrl + Alt + G) te drukken. Pak het penseel (groot zacht zwart) op. Stel de dekking in op 30%. Teken dan aan de linker- en rechterkant. Dat zal zachte schaduwen creëren.
Je kunt lichtere delen tekenen net zoals je de schaduwen hebt getekend. Gebruik een lichtgekleurd penseel met een vergelijkbare dekking. Teken ze in een nieuwe of dezelfde laag. Volg de afbeeldingen hieronder voor hulp.
Laten we vervolgens reflecties maken op de bovenste rand. Selecteer alle van de onderste laag (Ctrl + klik op de laag). Ga naar Selecteren> Wijzigen> Inkrimpen. Vul vervolgens de selectie (in een nieuwe laag) met een witte kleur (Alt + backspace). Verplaats de selectie twee pixels naar beneden (druk twee keer op de pijl-omlaag). Druk vervolgens op de Delete-toets om dit deel van de laag te verwijderen. Vergeet niet om te deselecteren met Ctrl + D!
Bepaal daarna de plasticiteit van een slot met grotere reflecties. Gebruik het gereedschap Rechthoekselectie om een rechthoek in een nieuwe laag te maken. Teken een lineair verloop (gereedschap Verloop) van wit naar transparant.
Selecteer een lijn van 2 pixels aan de bovenkant met het gereedschap Rechthoekselectie, zoals hieronder weergegeven. Schud het vervolgens, zoals in de tweede afbeelding hieronder. Dit is hoe de reflectie de vorm van het slot kopieert.
Maak gewoon reflecties aan de andere kant, maar veel groter.
We maken het groter, zodat het er niet veel op lijkt. We zijn bijna klaar met het onderste gedeelte. Hieronder ziet u hoe ons slot er tot dusver moet uitzien.
Vervolgens voegen we een strip toe! Maak opnieuw selectie een selectie. Teken vervolgens een verloop in deze selectie van geel (# F5E02F) in oranje (# F3BB2A).
Kies daarna de tool voor het selecteren van een enkele rij. Selecteer vervolgens de eerste en laatste regel van de vorige selectie (selecteer beide lijnen met Shift ingedrukt).
Gebruik een penseel en een donkere kleur om aan uw behoeften te voldoen. Dat is hoe je het verschil maakt tussen de achtergrond en de strip.
Maak een selectie door op Ctrl te drukken en klik op een nieuwe laag. Voeg vervolgens vanuit het menu Lagen een nieuwe patroonvulling toe. Gebruik dit patroon, verander de schaal naar 50% om bij de pictogramgrootte te passen. Stel vervolgens de laagstijl in op Vermenigvuldigen. Dan zullen alleen zwarte strepen zichtbaar zijn.
Als u het patroon aan de randen kleiner wilt maken, maakt u het masker rechts en links groter. Verlaag de laag vervolgens (Laag> Rasteren> Inhoud vullen).
Verfijn vervolgens de linker- en rechterkant. Knip de delen uit en pas de grootte aan als dat nodig is. Hierdoor zullen de zijkanten schuin aflopen en schuin aflopen. Dit kan een paar keer worden gedaan om het effect te maximaliseren.
Voeg nog een laag toe. Teken er wat om de zijkanten van de strip donkerder te maken. Gebruik opnieuw het penseel met een zwarte, zachte en verlaagde dekking.
Het onderste deel van het slot is klaar, geweldig! Laten we aan het bovenste gedeelte werken. Begin met een nieuwe bovenste laag en begin te kleuren en de randen te definiëren. Gebruik een grijze kleur (# D5D5D5). Geef het een Innerlijk Gloed-effect met 1px-formaat, grijze kleur # 848484. Dat zou het prima moeten doen. Zet de mengmodus op vermenigvuldigen.
Zoals we eerder hebben geleerd, is een belangrijk deel van een metalen oppervlak de reflectie. Laten we dus een reflectie maken die alleen op de helft van het bovenste gedeelte wordt toegepast. Een andere vorm kan ons helpen. Kopieer degene die we hebben door op Ctrl + J te drukken en kleur hem zwart, zodat we precies zien waar de randen zijn. Pak vervolgens het pad selectiegereedschap en gebruik het om de binnenste cirkel te selecteren. Maak het dan groter met Ctrl + T.
Teken links en rechts twee rechthoeken met de Alt-toets ingedrukt (aftrekken).
Verlaag de dekking van deze vorm tot 30%. Maak een nieuwe laag tussen deze en de originele vorm. Teken vervolgens een lineair verloop van wit naar transparant. Druk op Ctrl + Alt + G (het masker van de vorige laag afsnijden) om de reflectie alleen zichtbaar te maken op ons pictogram.
Zoals aan de onderkant zullen we hier twee grotere reflecties toevoegen. Ze moeten gewoon worden gevormd zoals de vorm waarin ze zich bevinden, dus het zijn geen rechthoeken, maar ellipsen. Teken een ellips met behulp van de Ellipse Tool, zoals in de onderstaande afbeelding.
Draai hem ongeveer 45 graden met Ctrl + T.
Gebruik tenslotte het gereedschap Direct selecteren (A) om twee punten in het midden van de ellips te selecteren. Verplaats ze vervolgens totdat de ellips de curve van het bovenste gedeelte van het slot nabootst.
Dupliceer deze laag (Ctrl + J). Draai het vervolgens horizontaal en verplaats het naar de rechterkant.
Het slot is bijna klaar. We willen alleen de randen op sommige plaatsen donkerder maken, dus het pictogram is volledig gescheiden van de achtergrond.
Maak eerst een laagselectie van het onderste gedeelte van het slotpictogram (Ctrl + klik op een laag). Maak een nieuwe laag. Teken dan in die nieuwe laag. Gebruik onze bekende donkere, zachte borstel om plekken te tekenen waar u het slot donkerder wilt maken. Wanneer u klaar bent, maakt u de selectie 1 pixel kleiner door naar Selecteren> Wijzigen> Contract te gaan. Druk vervolgens op de Delete-toets. De volgende afbeelding toont het stadium vlak voor het verwijderen.
Hieronder ziet u de 100% weergave na het verwijderen. We zijn bijna klaar.
Precies dezelfde techniek kan worden gebruikt om een hoog detailniveau te bereiken op het bovenste deel van een slot. De pijlen laten zien waar je moet verduisteren.
Wanneer u besluit om het pictogram in uw ontwerp te plaatsen, vergeet dan niet om de grijze kleur een klein beetje toe te voegen aan de kleurstijl van de achtergrond waarop deze wordt geplaatst. In de volgende afbeelding is meer paars toegevoegd om in het applicatieontwerp te passen.
En dat is alles. Ik hoop dat je iets nieuws hebt geleerd. De uiteindelijke afbeelding is hieronder.
Accentsconagua