Design web2.0 knoppen in Photoshop

Door Pascal Vleugels  |  Photoshop, Tutorial  |  3 Reacties

De term Web2.0 hoor je te pas en te onpas voorbij komen. Wat meestal geassocieerd wordt met web2.0 zijn designelementen zoals verlopen, felle kleurtjes en grote knoppen. In deze tutorial maken we zo’n echte web2.o knop. Een grote knop met (jawel) een gradient, grote teksten en felle kleuren. Door middel van verschillende laagstijlen kun je redelijk eenvoudig een modern uitziende knop maken.

Een goede manier om mooie knoppen te analyseren, is naar je favoriet gedesignde website te surfen en helemaal in te zoomen op een bepaald element. Daaruit kun je afleiden of er subtiele verloopjes, lijntjes en schaduwen zijn gebruikt. Vervolgens kun je die inspiratie zelf weer gebruiken voor je eigen knoppen!

Wat gaan we maken?

Stap 1: Teken de achtergrond van de knop

Neem je Afgeronde rechthoek (U) gereedschap en teken de achtergrond van je knop. Het voordeel van dit gereedschap, is dat het op een vector-shape is gebaseerd. Dat betekend dat je de shape kunt blijven schalen en er dus geen pixelverlies optreedt (Dus als je knop straks iets groter moet worden, dan blijft het een scherpe vorm zonder wazige randen)

Stap 2: Plaats tekst op de knop

Gebruik je Horizontale tekst gereedschap (T) om de tekst te typen die op de knop moet komen. Voor een duidelijke knop kun je een pakkende actie-tekst gebruiken met een duidelijke CTA (Call-to-action). Dit is een gebiedende zin, zoals: Download de folder. Als subtitel gebruiken we een tekst die wat toevoegd aan de actie (gratis en voor niks), om de knop zo helder en duidelijk mogelijk te maken. De subtitel is minder belangrijk dan de CTA, dus die is ook wat kleiner en niet vet gedrukt.

Stap 3: Verloop toevoegen

Om wat diepte aan de knop toe te voegen, gebruiken we een verloop. Dubbelklik op de laag van de knop-achtergrond in het lagenpalet om de Laagstijlen te openen. (Je kunt ook op het Laagstijl-knopje klikken in je lagenpalet als je de juiste laag geselecteerd hebt, OF naar Laag > Laagstijl > Verloopbedekking). In ons voorbeeld hebben we oranje gebruikt, omdat dit een van de meest opvallende kleuren is voor knoppen. Een felle oranje bovenaan, een donkerdere oranje onderaan. Zo lijkt het licht van boven te komen.

Stap 4: Schaduw aan tekst toevoegen

Om de tekst wat meer op te laten vallen, plaatsen we een kleine slagschaduw achter de tekst. Zo lijkt de tekst net een beetje boven op de knop te liggen (reliëf). Voeg een Slagschaduw toe met een laagstijl en gebruik de volgende settings:

Overvloeimodus: Vermenigvuldigen
Dekking: 29%
Hoek: 120 graden
Afstand: 1px
Spreiden: 0
Grootte: 1px

Stap 5: Knop omlijnen

Om de knop wat los te laten komen van de achtergrond, voegen we 2 omlijniningen toe aan de knop. De eerste lijn is een Lijn-laagstijl:
Grootte: 1px
Positie: Binnen
Overvloeimodus: Normaal
Dekking: 100%
Vultype: Verloop

De 2e lijn is een Gloed buiten:
Overvloeimodus: Normaal
Dekking: 100%
Ruis: 0%
Techniek: Zachter
Spreiding: 100%
Grootte: 1px

Stap 6: Slagschaduw aan knop toevoegen

Om de knop nóg meer los te laten komen van de achtergrond, plaatsen we een dropshadow achter de knop. Selecteer de achtergrond-laag in je lagenpalet en voeg de Laagstijl:  Slagschaduw toe.
Overvloeimodus: Vermenigvuldigen
Dekking: 56%
Hoek: 120graden
Afstand: 0 px
Spreiden: 0%
Grootte: 8px

Stap 7: Teken een pijl

Om de knop nog wat meer dynamiek en uitnodiging tot klikken mee te geven, plaatsen we ook nog een een grote pijl op de knop. Teken zelf een pijl, of neem een van de standaard vorm-pijlen van Photoshop. Neem het Aangepaste vorm gereedschap (U) en teken de pijl op de knop. Geef de pijl ook dezelfde slagschaduw mee als de tekst. Kopieer de laagstijl van de tekstlaag door met je rechtermuisknop op de laag in je laagpalet te klikken en te kiezen voor de optie Laagstijl kopiëren

Stap 8: reflectie toevoegen

De knop wordt nu belicht, zodat hij nog wat meer lijkt te glimmen. Hiervoor tekenen we met de het Pen gereedschap (P) een vorm, die over de knop heen ligt. Vervolgens passen we een laagmasker toe om alleen de knop te bedekken met de vorm. Ctrl +klik op de laagthumbnail van de knop-achtergrond om een selectie te maken van alle niet-transparante pixels in die laag. Selecteer vervolgens je (net getekende) vorm-laag en klik op het icoon “Laagmasker toevoegen”. Nu zie je dat je zwarte vorm precies de randen van je knop volgt.

Daarna verander je de kleur van je vorm naar wit, en zet je de Dekking op 10%. en klaar is je knop!

Het eindresultaat: