Photoshop - tlačítko pro webové stránky
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Photoshop - tlačítko pro webové stránkyPhotoshop - tlačítko pro webové stránky

 

Photoshop - tlačítko pro webové stránky

Google       Google       2. 11. 2008       37 987×

Návod na vytvoření vlastního „svítícího tlačítka“ ve Photoshopu.

Reklama
Reklama

V tomto článku bych vám rád ukázal postup, pomocí kterého si můžete v Adobe Photoshop vyrobit pro své webové stránky tlačítko, které vidíte na obrázku pod tímto odstavcem. Hned na začátek se omlouvám, definice „svítící“ není úplně přesná. Bude se jednat o tlačítko, které obsahuje „světelný“ proužek.

Začneme tím, že si ve Photoshopu otevřeme nový dokument o rozměrech 300 × 300 pixelů. Jako barvu pozadí jsem zvolil #151515, ale výběr je zde čistě na vás, měla by se však logicky shodovat s barvou okolí tlačítka na vašich stránkách.

V prvním kroku musíme udělat základní tvar tlačítka. Vyberte nástroj zaoblený obdélník (klávesa U), na horní liště zadejte poloměr 3 pixely a udělejte obdélník. Výsledek by měl vypadat takto:

Nyní musíme rastrovat vrstvu, ve které se zaoblený obdélník nachází. V menu postupně klikejte na Vrstva > Rastrovat > Tvar. Tím nám vznikne nová vrstva obsahující pouze tento obdélník. Dále potřebujeme ještě malý obdélník. Vyberte znovu nástroj zaoblený obdélník, poloměr nastavte na 10 pixelů a vytvořte ho - měl by vypadat stejně jako ten na následujícím obrázku, ovšem bez výběru, o kterém bude řeč v následujícím odstavci.

Když máte obdélník hotov, držte klávesu Ctrl a klikněte na čtvereček (měl by být červený, pokud jste nezadali jinou barvu), který se nachází vpravo v okně s vrstvami. Měli byste vytvořit výběr, který je vidět na následujícím obrázku.

Nyní můžeme vrstvu s červeným obdélníkem smazat, nebudeme ji už potřebovat. Stiskněte klávesu Delete, malý obdélník zmizí, měl by ale zůstat vytvořený výběr. Zmáčkněte znovu Delete, potom hned kombinaci kláves Ctrl+D. Výběr zmizí a výsledek by měl vypadat stejně jako na tomto obrázku:

Základní tvar tlačítka máme hotový a můžeme se pustit do barev. V okně s vrstvami klikněte pravým tlačítkem na vrstvu s obdélníkem a vyberte volby prolnutí. Zde aplikujte následující nastavení:

Zde zvolený odstín barvy saténu má kód #405ba8

S barvami přechodu je to trochu složitější. Je jich 5, v tomto pořadí zleva: #ffffff, #089df1, #0387d2, #015196 a #045cb5. Zarážky jsou na pozicích 0%, 15%, 50%, 85% a 100%. Výsledek by potom měl vypadat přibližně takto:

K dalšímu postupu si budeme muset tlačítko trochu přiblížit, v okně navigátoru tedy zvolte přiblížení 300%.

V dalším kroku si vytvoříme 4 tenké čáry. Zvolte proto nástroj čára, nastavte tloušťku na 1 pixel a barvu na bílou. Na obdélníku vytvořte 4 čáry tak, aby vypadaly jako na následujícím obrázku:

Každá čára by měla vytvořit svoji vlastní vrstvu. U těch malých vodorovných nastavte krytí na 30%, u pravé svislé čáry potom 50% a levou ponechte na 100%. Po zhotovení všech čar musíme vytvořit následující výběr:

Nejdříve zvolte vrstvu, ve které je modrý obdélník; v menu potom jděte na Výběr > Načíst výběr. Měl by se vám načíst celý obdélník. Teď vyberte nástroj Eliptický výběr a nahoře na liště nastavte prolnutí na 0 pixelů a jako typ výběru zadejte Odečíst od výběru - je to třetí ikonka zleva (světlý čtvereček překrývající tmavý). Nyní už nic nebrání tvorbě námi požadovaného výběru. Ten vytvoříme tak, jak je znázorněno na následujícím obrázku.

Stiskněte Ctrl+Shift+Alt+n pro vytvoření nové vrstvy - ta musí ležet nad vrstvou s modrým obdélníkem. Zvolte nástroj Výplň a vyplňte vrstvu bílou barvou jako na obrázku.

Tlačítko je teď napůl bílé a napůl modré, což není zrovna estetické. Vložte teď do vrstvy s bílou částí tlačítka masku. Maska se vkládá kliknutím na ikonku bílého kruhu na tmavém obdélníku, která se nachází v okně s vrstvami úplně dole. Po vložení masky vyberte nástroj Přechod a táhnutím myši jej vytvořte zleva doprava podle šipky na následujícím obrázku. Po aplikaci přechodu ještě změňte krytí vrstvy na 30%.

Pokud vše vypadá jako na následujícím obrázku, můžeme se vrhnout na další krok.

Poslední částí samotného tlačítka bude spodní „svítící“ pruh. Vytvořte si malý obdélník podle obrázku a poté na něj aplikujte následující styly vrstvy:

Barva #9dfcfe

Barvy: #ffffff a #01009a

Barvy přechodu: #6bcaff a #0364cb, zarážky 0% a 100%. Vrstva s malým obdélníkem překrývá velký obdélník, musíme ji proto posunout dozadu, aby nám vznikla následující podoba tlačítka.

Teď už jen vložte znovu masku vrstvy a podle obrázku nastavte přechod a vytvořte jej podle šipky (z prostředku na kraj)

Tlačítko už by mělo být skoro hotové.

Na závěr už zbývá jen doplnit text, já jsem zvolil písmo Tunga a velikost 32 pixelů. A takhle by měl vypadat konečný výsledek:

A to je pro dnešek vše. Doufám, že vám návod alespoň trochu pomohl.

Zdroj: http://www.talk-mania.com/buttons-web-graphics-banners/24620-button-lights.html

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

2 názory  —  2 nové  
Hlasování bylo ukončeno    
0 hlasů
Google
Autor se věnuje webdesignu, programování v Pascalu a C, studuje Informační technologie na FIT VUT, mezi jeho koníčky patří četba, florbal, badminton a PC hry.
Web    

Nové články

Reklama
Reklama
Obrázek ke článku NopCommerce – datová vrstva a přístup k datům – 2. díl

NopCommerce – datová vrstva a přístup k datům – 2. díl

V minulém článku jsme si představili platformu NopCommerce z globálního pohledu. V dnešním díle se již zaměříme na konkrétní část systému, a to datovou vrstvu. Představíme si základní stavební kameny systému v podobě doménových objektů. Ukážeme si, jakým způsobem rozšířit doménové objekty a jakým způsobem přistupuje NopCommerce k nastavení systému a modulů.

Obrázek ke článku Seznamte se s open source platformou NopCommerce – 1. díl

Seznamte se s open source platformou NopCommerce – 1. díl

Hledáte e-commerce řešení, které si dokážete přizpůsobit podle vašich požadavků? Chcete čistý a srozumitelný kód, se kterým bude radost pracovat? Prozkoumejte s námi možnosti open source projektu NopCommerce. Seriál programování pod NopCommerce vám pomůže překonat první kroky nejistoty a úspěšně zvládnout vývoj pod platformou NopCommerce.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý