{"id":133,"date":"2008-03-17T10:32:38","date_gmt":"2008-03-17T09:32:38","guid":{"rendered":"http:\/\/www.nielsgamborg.dk\/wordpress\/webudvikling\/glasknapper_glaseffekter_photoshop_tutorial.htm"},"modified":"2008-03-17T10:32:38","modified_gmt":"2008-03-17T09:32:38","slug":"glasknapper_glaseffekter_photoshop_tutorial","status":"publish","type":"post","link":"https:\/\/nielsgamborg.dk\/wordpress\/design\/glasknapper_glaseffekter_photoshop_tutorial.htm","title":{"rendered":"Glasknapper og glaseffekter. En Photoshop tutorial"},"content":{"rendered":"

<\/a>Simple vellignende glaseffekter<\/h3>\n

<\/a><\/p>\n

Jeg vil i denne tutorial\u00a0gennemg\u00e5, hvordan man laver\u00a0en simpel\u00a0glasknap.\u00a0Metoden er let at overf\u00f8re til andre elementer, s\u00e5 du kan bruge den til at lave b\u00e5de glasknapper, glasbj\u00e6lker og andre glaseffekter.<\/p>\n

N\u00e5r man f\u00f8rst forst\u00e5r og behersker denne simple teknik, er det let at aflure andre og mere avancerede glasteknikker.<\/p>\n

Det grundl\u00e6ggende<\/h3>\n

\u00a0<\/p>\n

\"\"<\/p>\n

\u00a0<\/p>\n

<\/a><\/p>\n

    \n
  1. Start med at oprette en nyt\u00a0billede p\u00e5 200*100px. I starten er det godt at lave knappen stor. Det g\u00f8r det lettere at styre gradienterne,\u00a0n\u00e5r man \u00f8ver sig.<\/li>\n
  2. Opret\u00a0i alt 5 lag, navngiv dem fra neden af: Baggrund – Glasfarve – Omrids – Genskin – Tekst<\/li>\n
  3. V\u00e6lg laget Glasfarve<\/li>\n
  4. Knappens form bestemmes. Lav en rektangel selection. V\u00e6lg Select – Modify – Smoth<\/strong>.\u00a0 S\u00e6t Sample Radius<\/strong> til 4px.<\/li>\n<\/ol>\n

    Det farvede glas<\/h3>\n

    \u00a0<\/p>\n

    \"\"<\/p>\n

    \u00a0<\/p>\n

      \n
    1. V\u00e6lg farve til knappen. Brug en lys nuance til baggrundsfarve og en m\u00f8rkere til forgrund.<\/li>\n
    2. V\u00e6lg gradient v\u00e6rkt\u00f8jet. V\u00e6lg gradienten Foreground to Background<\/strong>. Hold shift nede\u00a0(sikrer et 100%\u00a0lodret farveforl\u00f8b) \u00a0og tr\u00e6k en gradient, s\u00e5 den lyse farve kommer nederst. Den m\u00f8rke \u00f8verst.<\/li>\n
    3. L\u00e6g en dropshaddow p\u00e5 knappen. Pas p\u00e5 den ikke bliver for kraftig. N\u00e5r man laver glas, er det vigtig at bruge effekterne subtilt. Jeg har brugt en opacity p\u00e5 slagskyggen p\u00e5 33%<\/li>\n<\/ol>\n

      Omridset<\/h3>\n

      \u00a0<\/p>\n

      \"\"<\/p>\n

      \u00a0<\/p>\n

        \n
      1. V\u00e6lg laget Omrids<\/li>\n
      2. V\u00e6lg Edit – Stroke<\/strong>. S\u00e6t farven til sort, bredden til 2px, Location<\/strong> til Inside<\/strong>, klik ok<\/li>\n
      3. S\u00e6t lagets opacity ned til 33%. P\u00e5 den m\u00e5de vil omridste tage farve fra baggrunden, og hvis du senere vil \u00e6ndre farve p\u00e5 glasknappen, er det nok at skifte glasfarven.<\/li>\n<\/ol>\n

        Genskin i glasset<\/h3>\n

        \u00a0<\/p>\n

        \"\"<\/a><\/p>\n

        \u00a0<\/p>\n

          \n
        1. V\u00e6lg laget Genskin<\/li>\n
        2. V\u00e6lg Select – Modify – Contract<\/strong>. V\u00e6lg 2px.\u00a0 Selectionen tr\u00e6kker sig sammen med 2 pixels p\u00e5 alle leder.<\/li>\n
        3. V\u00e6lg rektangel selection v\u00e6rkt\u00f8jet. Hold Alt-tasten nede og tr\u00e6k en selection, s\u00e5 den nederste halvdel af knappen bliver trukket fra selctionen.<\/li>\n
        4. V\u00e6lg gradient v\u00e6rkt\u00f8jet. V\u00e6lg en gradient, der g\u00e5r fra hvid til gennemsigtigt. Tr\u00e6k gradienten ned over selectionen. Det er vigtigt, at tr\u00e6kke gradieneten ned til bunden af knappen, alts\u00e5 l\u00e6ngere end selctionen. S\u00e5 f\u00e5r man nemlig en forholdsvis skarp kant midt p\u00e5 knappen, som underbygger illusionen om genskin i glas.<\/li>\n<\/ol>\n

          Tekst p\u00e5 knappen<\/h3>\n

          \u00a0<\/p>\n

          \"\"<\/p>\n

          \u00a0<\/p>\n

            \n
          1. V\u00e6lg tekst laget<\/li>\n
          2. Skriv teksten<\/li>\n
          3. Tilf\u00f8j en let slagskygge, for at opn\u00e5 en illusion af en skygge ned i det underliggende glas. Jeg har valgt en opacity p\u00e5 dropshaddow p\u00e5 50%\u00a0<\/li>\n<\/ol>\n

            Du er nu f\u00e6rdig. Bem\u00e6rk at kun laget “glasfarve” indeholder farve, s\u00e5 hvis du vil \u00e6ndre farven p\u00e5 knappen, er det nok at \u00e6ndre farven p\u00e5 dette lag.\u00a0\u00a0<\/p>\n

            Glasknapper videre<\/h3>\n

            \u00c9n udviklingsmulighed er at l\u00e6gge en hvid til gennemsigtig rund gradient ind p\u00e5 midten af knappen. Det giver en illusion af at knappen er gennemskinnelig, men er bedst egnet til runde knapper.<\/p>\n

            \u00a0<\/p>\n

            \"\"<\/p>\n

            Pointen\u00a0er, at n\u00e5r man f\u00f8rst 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\u00e5 nettet. Det er bare at \u00e5bne \u00f8jnene, og lade sig inspirerer.<\/p>\n","protected":false},"excerpt":{"rendered":"

            Simple vellignende glaseffekter Jeg vil i denne tutorial\u00a0gennemg\u00e5, hvordan man laver\u00a0en simpel\u00a0glasknap.\u00a0Metoden er let at overf\u00f8re til andre elementer, s\u00e5 du kan bruge den til at lave b\u00e5de glasknapper, glasbj\u00e6lker og andre glaseffekter. N\u00e5r man f\u00f8rst forst\u00e5r og behersker denne simple teknik, er det let at aflure andre og mere avancerede glasteknikker.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,19],"tags":[111,113,201,276],"_links":{"self":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts\/133"}],"collection":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/comments?post=133"}],"version-history":[{"count":0,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts\/133\/revisions"}],"wp:attachment":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/media?parent=133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/categories?post=133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/tags?post=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}