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.

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

1 hozzászólás

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét