Zaprojektuj błyszczący przycisk Web 2.0 w Photoshopie
Chcąc zaprojektować błyszczący przycisk Web 2.0? Oto prosty samouczek programu Photoshop, który krok po kroku pokazuje, jak uzyskać ładnie wyglądający czerwony przycisk błyszczący.
Krok 1 - Tworzenie bazy
Uruchom nowe płótno i dostosuj następujące ustawienia (zaznaczone na żółto) zgodnie z obrazkiem poniżej. Reszta powinna być domyślna. Możesz także sprawdzić dwukrotnie wartości domyślne.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop.gif)
Utwórz nowe wywołanie warstwy „Button”
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_2.gif)
Na warstwie „Przycisk” wybierz narzędzie Zaokrąglony prostokąt
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_3.gif)
Daj mu promień 7px
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_4.gif)
Narysuj prostokąt podobny do poniższego obrazu.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_5.gif)
Krok 2 - Czerwony przycisk
Kliknij prawym przyciskiem myszy Opcje mieszania dla warstwy „Przycisk”
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_6.gif)
Dostosuj następujące ustawienia dla
Upuść cień
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_7.gif)
Wewnętrzny cień
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_8.gif)
Faza i płaskorzeźba
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_9.gif)
Nakładka gradientowa
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_10.gif)
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_11.gif)
Twój przycisk powinien wyglądać mniej więcej tak
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_12.gif)
Krok 3 - Utwórz błyszczący efekt
Utwórz nową warstwę, wywołując „Szkło”
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_13.gif)
Wybierz narzędzie Markiza prostokątna, upewnij się, że wybierasz warstwę „Przycisk”. Przytrzymaj klawisz Ctrl i kliknij przycisk „Warstwy””s miniatura warstwy. Twój przycisk powinien być teraz podświetlony.
Wybierz teraz przycisk „Szkło”, przytrzymaj klawisz Alt z wybranym narzędziem Zaznaczanie prostokątne. Narysuj (wytnij) na dolnej połowie przycisku, tak jak na poniższym obrazku.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_14.gif)
Wypełnij wybrany obszar białym kolorem #ffffff za pomocą narzędzia Wiadro z farbą
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_15.gif)
Dostosuj krycie do 18%
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_16.gif)
Powinieneś mieć błyszczący przycisk wyglądający tak.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_17.gif)
Krok 4 - Nakładka wzoru
Dajmy przyciskowi lekką nakładkę na wzór. Będę używał niestandardowego stripe5px utworzonego wcześniej. Utwórz nową warstwę „Wzorzec” pomiędzy „Przycisk” i „Szkło” i kontynuuj opcje mieszania.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_18.gif)
Wybierz Nakładka wzoru, wybierz Stripe5px (lub dowolny utworzony wzór) i kliknij OK, a następnie zamknij okno dialogowe.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_19.gif)
Upewnij się, że nadal jesteś na narzędziu prostokątnego namiotu, przytrzymaj
Krok 5 - Wstawianie tekstu
Wrzuć losowy tekst w kolorze białym #ffffff z następującymi ustawieniami
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_20.gif)
Użyj następujących efektów mieszania na warstwie mojego tekstu.
Upuść cień
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_21.gif)
Krok 6 - Wynik końcowy
Powinieneś otrzymać taki obrazek.
![](http://savtec.org/img/images_4/design-glossy-web-20-button-in-photoshop_22.gif)