Micro gombok


Valószínűleg már nem egyszer futottál bele ilyen gombokba különböző honlapokon, elég népszerű megoldás manapság. A módszer nem nehéz, bátran próbáld ki. :)

pict1

1.) Először is nyisd meg a photoshop-t és hozz létre egy új képet. A kép hátterét nem töltsd ki semmilyen színnel, maradjon a képen is látható módon – transparent (átlátszó). A kép méretét kicsit vedd nagyobbra mint amekkora a gombod lesz.

Nagyítsd ki a képet mondjuk úgy 400%-ra hogy lásd is mit csinálsz (akár a nagyító eszközzel, vagy az ALT gomb nyomvatartása mellett nyomd meg 3x a “+” jelet.)

Most jelölj ki egy területet a RECTAGULAR MARQUEE TOOL-lal rectmar pontosan akkorát amekkora a gombod mérete lesz. Töltsd ki fekete színnel, akár a kis “vödörrel”, akár úgy hogy egy “D”-t majd egy ALT+BACKSPACE-t nyomsz.

pict2

2.) Eddig akkor van egy üres területünk, benne egy fekete négyzettel. Ebből kell most megcsinálni a gomb külső fekete körvonalát. A módszer a következő:

A CTRL gombot nyomva tartva kattints rá a fekete négyzetet tartalmazó layer-re (LAYERS PALETTE), ezzel választva ki a tartalmát. Ezután menj a SELECT/MODIFY/CONTRACT menüpontba és 1px-t állíts be értéknek. Ezzel a kiválasztás területét lecsökkentetted 1px-lel.

Válassz ki két színt, ezek fogják egy színátmenettel a gombod hátterét alkotni. Hozz létre egy új layer-t new válaszd ki a LINEAR GRADIENT TOOL-t lgrad majd ezzel töltsd ki a kiválasztott területet (lsd: 2.kép)

Most a kép úgy néz ki, hogy megvan körben a fekete körvonal, és fentről lefelé haladva egy világoskékből sötétkékbe megy át a háttere.

Következő lépésként törölj ki a fekete körvonal 4 sarkából 1-1 pixelnyi területet (akár a radírt használva, akár úgy hogy a RECTANGULAR MARQUEE TOOL-lal kijelölöd az 1×1 pixelnyi területet és nyomsz egy DEL-t.

pict3

majd fehér színnel írd type bele a gomb feliratát, mondjuk középre igazítva. Az ilyen stílusú gombokhoz leginkább a pixel/bitmap fontok illenek, ami a képen van az nevezetesen a “04b_09″, melyet számtalan helyről le lehet tölteni (google:04b_09)

Tipp: az ilyen jellegű fontok esetében ajánlott a betű tulajdonságainál – a SET THE ANTI-ALIASING METHOD-t type-re kattintva a Photoshop felső menüjében egy legördülő menüben található) beállítani a NONE értékre.

pict4

4.) A már meglévő fehér betűknek most csinálj egy 1px széles körvonalat, mely még jobban kiemeli a gomb hátteréből. Ehhez a CTRL gombot nyomva tartva menj a SELECT/MODIFY/EXPAND menübe, és az értéket tedd 1px-re (ezzel növeled a szöveg kiválasztását 1px-nyit). Nyiss egy új layer-t a szöveget tartalmazó layer fölé (közben a kiválasztás ugyanúgy megmarad), majd a kiválasztott területet töltsd ki fekete színnel. Hirtelen eltűnik alatta a szöveg de nincs gond, a következő lépés után újra elő fog tűnni. :)

A LAYER PALETTE-n a layer tulajdonságai között állítsd be a SOFT LIGHT-t. Ekkor az eddig fekete terület eltűnik, a fehér betűk újra látszódni fognak az előbbi állapothoz képest annyi különbséggel, hogy kaptak egy sötétkékes körvonalat. Ha a körvonalat túl sötétnek találod, a layer OPACITY tulajdonságait módosítsd (a képen 60%-ra lett állítva).

pict5

5.) Utolsó lépésként nyiss egy új layert, majd válaszd ki a PENCIL TOOL-t pencil és 1-1 pixel vastagságban rajzol egy fehér és fekete vonalat a gomb bal és jobb szélére (fekete körvonalon belül) úgy, hogy a gomb fekete körvonalát ne érintse.

bal oldalra -> 1px vastag fehér vonal
jobb oldalra -> 1px vastag fekete vonal

A layer tulajdonságaiban állítsd át a BLENDING MODE-t OVERLAY-re vagy SOFT LIGHT-ra, majd kicsinyítsd a kép nézetét 100%-ra és gyönyörködhetsz a művedben. :)

pict6

Ezt a tecnikát alkalmazhatod az elterjedt 88x31px méretű logók esetében is.

Kapcsolódó bejegyzések:
  • Ezzel a módszerrel egyszerűen és gyorsan tudunk látványos külsőt adni szövegünknek.1. Nyissunk egy 600×600 nagyságú képet. Töltsük ki a hátteret fekete s …

  • Az alábbi leírás segítségével egy króm hatású “bar”-t tudsz majd elkészíteni a photoshop segítségével.1.) Első lépésként válassz ki egy 15 pixel maga …

  • 3D-s szöveg elkészítése nem túl nehéz, de nagyon látványos. Ebben a tutorialban megtudhatod, hogyan készítsd el :)1.) Nyissunk egy új lapot 600×600 méretben …

  • Látványos, egyszerűen összehozható effekt.Nyiss egy új, fekete-fehér képet a Photoshop-ban. Ehhez menj a FILE / NEW menübe, és állítsd be “grayscale …

  • Honlapon használható egyszerű és modern gomb készítését mutatja be a leírás.1.LépésHozz létre egy új dokumentumot 130x80px-es mérettel, fehér há …

A cikket beküldte: Harder (http://blog.harder.hu)

1 hozzászólás

  1. N54 says:

    Szép, de nem jók az ilyen gombok sok mindenre…

Szólj hozzá
a Micro gombok c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>