Blog om foto, web og brugervenlighed

Glasknapper og glaseffekter. En Photoshop tutorial

marts 17th, 2008. Kategori: Design, Webudvikling

Simple vellignende glaseffekter

Jeg vil i denne tutorial gennemgå, hvordan man laver en simpel glasknap. Metoden er let at overføre til andre elementer, så du kan bruge den til at lave både glasknapper, glasbjælker og andre glaseffekter.

Når man først forstår og behersker denne simple teknik, er det let at aflure andre og mere avancerede glasteknikker.

Det grundlæggende

 

 

1. Start med at oprette en nyt billede på 200*100px. I starten er det godt at lave knappen stor. Det gør det lettere at styre gradienterne, når man øver sig.
2. Opret i alt 5 lag, navngiv dem fra neden af: Baggrund – Glasfarve – Omrids – Genskin – Tekst
3. Vælg laget Glasfarve
4. Knappens form bestemmes. Lav en rektangel selection. Vælg Select – Modify – Smoth.  Sæt Sample Radius til 4px.

Det farvede glas

 

 

1. Vælg farve til knappen. Brug en lys nuance til baggrundsfarve og en mørkere til forgrund.
2. Vælg gradient værktøjet. Vælg gradienten Foreground to Background. Hold shift nede (sikrer et 100% lodret farveforløb)  og træk en gradient, så den lyse farve kommer nederst. Den mørke øverst.
3. Læg en dropshaddow på knappen. Pas på den ikke bliver for kraftig. Når man laver glas, er det vigtig at bruge effekterne subtilt. Jeg har brugt en opacity på slagskyggen på 33%

Omridset

 

 

1. Vælg laget Omrids
2. Vælg Edit – Stroke. Sæt farven til sort, bredden til 2px, Location til Inside, klik ok
3. Sæt lagets opacity ned til 33%. På den måde vil omridste tage farve fra baggrunden, og hvis du senere vil ændre farve på glasknappen, er det nok at skifte glasfarven.

Genskin i glasset

 

 

1. Vælg laget Genskin
2. Vælg Select – Modify – Contract. Vælg 2px.  Selectionen trækker sig sammen med 2 pixels på alle leder.
3. Vælg rektangel selection værktøjet. Hold Alt-tasten nede og træk en selection, så den nederste halvdel af knappen bliver trukket fra selctionen.
4. Vælg gradient værktøjet. Vælg en gradient, der går fra hvid til gennemsigtigt. Træk gradienten ned over selectionen. Det er vigtigt, at trække gradieneten ned til bunden af knappen, altså længere end selctionen. Så får man nemlig en forholdsvis skarp kant midt på knappen, som underbygger illusionen om genskin i glas.

Tekst på knappen

 

 

1. Vælg tekst laget
2. Skriv teksten
3. Tilføj en let slagskygge, for at opnå en illusion af en skygge ned i det underliggende glas. Jeg har valgt en opacity på dropshaddow på 50% 

Du er nu færdig. Bemærk at kun laget “glasfarve” indeholder farve, så hvis du vil ændre farven på knappen, er det nok at ændre farven på dette lag.  

Glasknapper videre

Én udviklingsmulighed er at lægge en hvid til gennemsigtig rund gradient ind på midten af knappen. Det giver en illusion af at knappen er gennemskinnelig, men er bedst egnet til runde knapper.

 

Pointen er, at når man først kender den basale teknik, er det let at finde inspiration til nye og mere subtile effekter. Glasknapper, barer og ande glas effekter flyder alle steder på nettet. Det er bare at åbne øjnene, og lade sig inspirerer.