Photoshop Utwórz przycisk Web 2.0

Samouczki programu Photoshop są prawdopodobnie jedną z najgorętszych kategorii w dowolnej witrynie samouczka Photoshopa, a ponieważ Web 2.0 jest teraz tak gorącym tematem, przejdźmy do prostego przycisku odpowiedniego dla każdej aplikacji Web 2.0 na stronach internetowych. Samouczek po skoku.

Utwórz pusty obszar roboczy o rozmiarze około 500 pikseli (szerokość) x 400 pikseli (wysokość), aby rozpocząć projektowanie przycisku. Utwórz nowe wywołanie warstwybg01” Wybierz Zaokrąglone narzędzie prostokątne, przytrzymaj SHIFT i narysuj kwadratowy kwadrat w środku. Każdy kolor jest w porządku na obecnym etapie.

Zadzwoń do Opcje mieszania z 'bg01'i dostosuj następujące style:

Upuść cień

• Krycie: 40%
• Odległość: 0px
• Spread: 0%
• Rozmiar: 6px

Nakładka gradientowa

• Zatrzymanie koloru: 0%, # d00031
• Zatrzymanie koloru: 100%, # ff2b5d

Przytrzymaj CTRL, kliknij lewym przyciskiem myszybg01„Miniatura warstwy, aby wybrać jej kształt. Udać się Wybierz -> Modyfikować -> Kontrakt i wprowadź wartość ”2px” Spowoduje to zmniejszenie wybranego obszaru o 2 piksele.

Utwórz nowe wywołanie warstwybg02'i wypełnił podświetlony (po zmniejszeniu) obszar dowolnym kolorem. Używam tu # 000000 czarny. Kliknij dwukrotnie „bg02”, aby uruchomić Opcja mieszania i dostosuj następujący styl.

Nakładka gradientowa

• Zatrzymanie koloru: 0%, # c6002f
• Zatrzymanie koloru: 100%, # c6002f

Utwórz kolejną nową warstwę dla tekstu, zadzwoń do niegotekst” Wstaw tekst swojego przycisku. Użyję alfabetu do reprezentowania. Style czcionek, których tutaj używam, są następujące:

• Zaokrąglony Arial Pogrubiony
• 150pt

Tak samo, po podjęciu decyzji o tekście, kliknij dwukrotnie „txt”, aby uruchomić Opcje mieszania i dostosuj następujące style.

Upuść cień

• Krycie: 25%
• Odległość: 0px
• Spread: 0px
• Rozmiar: 5px

Wewnętrzny cień

• Krycie: 10%
• Odległość: 0px
• Dławik: 0
• Rozmiar: 10px

Tłoczenie stożkowe

• Głębokość: 1px
• Kierunek: W dół
• Rozmiar: 0px
• Softten: 0px
• Tryb podświetlenia Krycie: 32%
• Krycie w trybie cieni: 32%

Nakładka gradientowa

• Stop kolorów: 0% # d2d2d2
• Kolor Stop: 100% # f0efef

Przycisk jest prawie gotowy. Nadajmy trochę blasku górnej części. Trzymać CTRL, lewy przycisk myszy 'bg02„Miniatura warstwy, aby podświetlić kształt zewnętrzny; wybierać Narzędzie markizy Eclipse. Teraz przytrzymaj ALT, przy wybranym narzędziu markizy Eclipse przeciągnij w poprzek do minus na dolnej połowie zaznaczonego obszaru. Zobacz obraz powyżej.

Po podświetleniu górnej części i zaznaczeniu narzędzia Eclipse Marquee kliknij prawym przyciskiem myszy i wybierz Pióro; wchodzić 15px dla promienia.

Utwórz nową warstwę, nazwij ją ”poświata'i wypełnij zaznaczoną część białym [#ffffff]. To powinno dodać efekt blasku do górnej części przycisku. Produkt końcowy powinien wyglądać jak na poniższym obrazku.

Pobierz samouczek

Coś ekstra…

Dostosuj opcje mieszania z 'bg01' i 'bg02'da ci bardziej interesujące przyciski. Oto kolejny samouczek programu Photoshop dotyczący przycisku, który zrobiłem wcześniej - Utwórz błyszczący przycisk dla Web 2.0

Pobierz próbkę