Share
In deze quick-tip-zelfstudie leggen we uit hoe u een plastic schakelaar in Photoshop kunt maken die u kunt gebruiken in uw interfaceontwerpen. Laten we beginnen!
Maak een nieuw bestand. Stel Breedte in op 400 en Hoogte op 300 en de resolutie op 72 PPI.
Maak nu een nieuwe groep en noem deze achtergrond. Gebruik Rectangle Tool (U) om een vorm te tekenen die groter is dan het canvas, net zoals in het voorbeeld. Zet de kleur op wit #ffffff en pas de laagstijlen toe.
Maak een nieuwe groep en noem deze Base. Gebruik Pengereedschap (P) om een vorm te tekenen, net zoals in het voorbeeld. Zet de kleur op een donkergrijs # 242424 en pas de laagstijlen toe. Nu is onze basisvorm gereed.
Maak een nieuwe groep en noem deze Knop. Gebruik Pengereedschap (P) om een vorm te tekenen zoals in het voorbeeld. Zet de kleur op # ada397 en pas de laagstijl toe.
Nu om wat volume en detail toe te voegen aan de knop. Maak binnen de knopgroep een nieuwe laag boven de knopvorm en gebruik het penseel (B), stel de voorgrondkleur in op zwart # 000000, de penseelgrootte op 11 px en de hardheid op 0 en teken een korte lijn onderaan onderdeel van de knop, zoals te zien in het voorbeeld. Verander die laag in een uitknipmasker door de ALT-toets ingedrukt te houden en tussen de twee lagen in te drukken, of klik eenvoudig met de rechtermuisknop op de laatste laag en selecteer Creëer knipmasker.
Maak een nieuwe laag en gebruik Pengereedschap (P) om een zwarte # 000000-vorm te tekenen, net zoals in het voorbeeld. Ga naar Filter> Vervagen> Gaussiaans vervagen, stel de straal in op 1,5 px en pas het filter toe. Stel met het gereedschap Wisser (E) het formaat in op 58 en de hardheid op 0 en veeg de linkerkant van de wazige vorm weg (de rode vorm in het voorbeeld markeert de plek). Zet de dekking van de laag op 18% en maak van deze laag een uitknipmasker. Maak nu een nieuwe laag, selecteer Brush Tool (B), stel de grootte in op 15px en de hardheid op 0, zet de kleur op # 92897f en teken een rechte lijn zoals in het voorbeeld. Als je klaar bent, transformeer je deze laag ook in een uitknipmasker.
Maak een nieuwe laag, selecteer Pen Tool (P), zet de kleur op # c8b7a5 en teken een vorm zoals in het voorbeeld. Ga naar Filter> Vervagen> Gaussiaans vervagen, stel de straal in op 1,5 px en pas het filter toe. Stel met het gereedschap Wisser (E) het formaat in op 58 en de hardheid op 0 en veeg de linkerkant van de wazige vorm weg (de rode vorm in het voorbeeld markeert de plek). Selecteer nu Penseelgereedschap (B), stel het formaat in op 13px en de Hardheid op 0, stel de kleur in op # c8b7a5 en teken een rechte lijn, net zoals in het voorbeeld. Maak van deze laag een uitknipmasker.
Maak een nieuwe laag en stel met behulp van het gereedschap Pen (P) de kleur in op zwart # 000000 en teken een vorm zoals in het voorbeeld. Ga naar Filter> Vervagen> Gaussiaans vervagen, stel de straal in op 1,5 px en pas het filter toe. Stel met het gereedschap Wisser (E) het formaat in op 58 en de hardheid op 0 en veeg de linkerkant van de wazige vorm weg (de rode vorm in het voorbeeld markeert de plek). Zet nu de overvloeimodus voor de laag op Overlay en de dekking op 80% en transformeer de laag in een uitknipmasker.
Maak een nieuwe laag en gebruik Penseel (B), stel de grootte in op 10px, de hardheid op 0%, de kleur op zwart # 000000 en teken een paar lijnen rond het onderste en rechter gedeelte van de knop zoals te zien in het voorbeeld . Transformeer die laag in een uitknipmasker en maak een nieuwe aan. Gebruik Penseel (B) met dezelfde instellingen als hiervoor en teken nog een paar lijnen aan de rechterkant van de knop. Nu moeten we de vectormaskerminiatuur van de knopvorm kopiëren naar onze laag. Houd de ALT-toets ingedrukt en klik en sleep de miniatuur van het Vectormasker van onze Knopvorm naar deze laag precies zoals in het voorbeeld. We zullen deze laag of toekomstige lagen Clipping Masks niet maken.
We zullen een nieuwe laag maken. Gebruik Pengereedschap (P) om nog een zwarte # 000000-vorm te tekenen, net zoals in het voorbeeld. Ga naar Filter> Vervagen> Gaussiaans vervagen, stel de straal in op 1,5 px en pas het filter toe. Zet de dekking van de laag op 20%. Maak een nieuwe laag en gebruik Penseel (B) om enkele hoogtepunten toe te voegen. Stel de grootte in op 2px en de hardheid op 0%, stel de kleur in op # d5c8b5 en maak een kleine stip in de linkerbovenhoek van de knop. Maak nog een laag en met Pen Tool (P) voegen we wat meer details toe. Zet de kleur op #dbcebe en teken nog drie andere vormen zoals in het voorbeeld. Deze hoogtepunten zullen onze knop meer volume en realisme geven.
Maak een nieuwe groep en plaats deze onder Base Group. Noem het maar Schaduw. Stel met Pen Tool (P) de kleur in op # 000000 en teken een vorm zoals in het voorbeeld. Ga naar Filter> Vervagen> Gaussiaans vervagen, stel de straal in op 1,5 px en pas het filter toe. Zet de dekking van de laag op 20% en gebruik het gumgereedschap (E), stel de grootte in op 58px en de hardheid op 0% en borstel het gedeelte rechtsonder van onze vorm weg (rode cirkel geeft het gebied in het voorbeeld aan).
Accentsconagua