Niels Gamborgs online notesbog

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.

  1. 7 Responses to “Glasknapper og glaseffekter. En Photoshop tutorial”

  2. By Lasor on dec 29, 2008

    Hej.

    Har lige prøvet din knap….havde problemer med at finde “Vælg rektangel selection værktøjet”….kan du hjælpe der.

    Det ser ud til at du har pænt meget styr på PS….jeg vil gerne lave en skygge effekt, så emnet ser ud til at stå på et glasborde…..kan du hjælpe med det…?

  3. By Niels on dec 29, 2008

    Rektangel selction tool’et hedder “Rectangular Marquee Tool” genvejs tasten er “m”.

    Det ligger øverst til venstre i værktøjsboxen, hvis du har visningen til 2 spalter. Den ligger anden øverst hvis du kun har 1 spalte.

    Jeg er ikke sikker på at jeg helt forstår dit andet spørgsmål. Hvis du skal lave en skygge effekt kan du evt bruge en “drop shadow” fra layer style menuen. Eller du skal måske selv male skyggen på for at få det til at se realistisk ud.

    Glasbordet kræver vel en svag reflektion af emnet og samtidig en vis gennmsigtig, så man kan se baggrunden bagved/under bordet, for at få det til at ligne realistisk glas. Måske skal man også forvrænge/forskyde baggrunden der ses gennem glasset.
    Evt. kan man også tilføje en lysrefleks til glasbordet for at øge glas illusionen.

  4. By Morten on apr 10, 2009

    Hej.

    Jeg har haft super glæde af siden. Nu står jeg overfor et problem, idet jeg skal lavet et logo, som er en snegl fra “shape”. Jeg skal have det Østriske falgs faver som fyldfarve….men kan ikke finde ud af hvordan jeg gør det. Efterfølgende skal jeg også lave henholdsvis Italien, Frankrig og Sverige.

    Håber virkelig på noget hjælp.

    Hilsen, Morten

  5. By Niels on apr 10, 2009

    Hej Morten.

    Det kan laves på flere forskellige måder. Men kræver nok en særskilt tutorial, hvis det skal forklares grundigt. Det har jeg desværre ikke tid til at lave pt.

    Men det handler om at lege med lag. Tag nogle kopier at dit “snegle”-lag, og rasterize laget. Så kan du lege med farver uden at ødelægge originalen.

    Glaseffekten lægges særskilt på i 1-2 lag, ligesom i denne tutorial. Men se på nettet for eksempler på hvordan, hvordan man lægger gradienter på buede/kugleformede flader.

  6. By Morten on apr 10, 2009

    Hej Niels.

    Tak for dit hurtige svar….men jeg er lidt “PhotoShop Novice”….altås kun lidt, men er ikke klar over hvad du mener….vil gerne beholde formen….og så “kun” markere noget af det for dermed at fylde farve på/i…

    Hilsen, Morten

  7. By Niels on apr 12, 2009

    Tja…

    Det kan som sagt gøres på mange måder afhængig af hvad du helt præcis vil opnå. Men at forklare det helt fra bunden er en større omgang.

    Prøv at kigge på mine 500+ photoshop tutorials. Og prøv at finde nogle tutorials der ligner.

    Alternativt kan du smutte forbi multimedieforum.dk. Måske nogen der kan hjælpe dig med lidt mere præcise råd.

  1. 1 Trackback(s)

  2. sep 3, 2008: Gimp. Gratis billedbehandling i Ubuntu | Blog om webudvikling

Skriv en kommentar