Elegancki przycisk

13 sierpnia, 2012 w kategoriach: Grafika 2D, Web design, Adobe Photoshop

3,065 0
Dane:
  • Czas pracy: 10
  • Poziom: Podstawowy
Opis:

Chciałbym zademonstrować jak stworzyć ciekawy i elegancki przycisk w Photohospie. Tutorial zrobiony na podstawie tutoriala ze strony http://www.sanjaykhemlani.com/

Pokaż/Ukryj wszystko

Najpierw otwórzmy photoshopa. Nowy dokument i wymiary 450px na 300px

Alt 1-canvas-450x300

Teraz jeszcze dodamy sobie gradient w tym celu klikamy PPM na naszą warstwe i wybieramy Opcje mieszania (blending option). Tak wybieramy gradient i ustawiamy kolory od #f5f4f4 do #b3b3b3

Alt 3-gradient-on-canvas


Wydawnictwo Strefa Kursów

Gdy już mamy tak przygotowany dokument to stwórzmy sobie kształt. Wybieramy Zaokrąglony kwadrat (rectangle tool) z ustawionymi 50px kątą.Rysujemy na środku nasz kształt.

Alt 4-select-rounded-rectangle-tool

Teraz ustawmy opcję mieszania (blending option) tak jak na załączonych screenach.

Alt 1

Kolor ustawiony to biały #ffffff

Dalej

Alt 2

Tutaj mamy czarny #000000

Następnie

Alt 3

No i na inner glow (blask wewnętrzny) mamy kolor #fcfcfc

Na koniec ustawmy gradient, też w opcjach mieszania, gdyż chcemy go stworzyć tylko dla naszego kształtu.

Alt 4

Tutaj kolory mamy od #dddddd do # c4c4c4. Ustawmy kąt tego gradientu na 90 (angle) i kliknijmy ok.

Powinno wyjsć nam coś takiego jak niżej

Alt 5

Teraz utwórzmy drugi kwadrat z zaokrąglonymi rogami też na 50px i ustawmy na środku naszego poprzedniego kształtu tak jak tutaj

Alt 10-second-button-background

Teraz zajmiemy się pokolorowaniem tego drugiego elementu. W tym celu otwórzmy znowu opcje mieszania (blending option) i ustawmy tak jak niżej:

Alt 1b

Alt 2b

Alt 3b

Przy pierwszym i drugim ustawieniu mamy kolory czarny i biały, przy ostatnim ustawmy #fcfcfc

Teraz dodajmy gradient kolory od #e7a904 do #fddb3b i ustawmy kąt na 90 stopni (angle).

Alt gradient 2

W efekcie powinniśmy otrzymać coś takiego

Alt 15-sleek-gradient-button-below

Teraz tylko dodajmy jakiś text, tutaj dodałem biały. Ustawmy jeszcze trochę cienia wewnętrznego (inner shadow) o kolorze #ca9707 tak jak poniżej

Alt 17-inner-shadow-for-text

Efekt końcowy przycisku powinien wyglądać mniej więcej tak

Alt sleek-button

Podziekowanie za udostępnienie tutoriala dla witryny http://www.sanjaykhemlani.com/

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dodaj komentarz