Strict Standards: Non-static method Advanced_Permalinks::get() should not be called statically in /blog/wp-content/plugins/advanced-permalinks/advanced-permalinks.php on line 825

Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method GoogleSitemapGeneratorLoader::Enable() should not be called statically in /blog/wp-includes/plugin.php on line 123

Warning: call_user_func_array() expects parameter 2 to be array, null given in /blog/wp-includes/plugin.php on line 123
[Photoshop] Wypukły, lśniacy, nowoczesny przycisk na stronę www » Inne efekty » egrafik.pl
BAZA WIEDZY
KURSY
Bazy danych w PHP
Kurs AdvancedAJAX
Kurs ASP
Kurs ASP.NET
Kurs C++
Kurs CSS
Kurs HTML
Kurs HTML drugi
Kurs JavaScript
Kurs MySQL
Kurs PHP
Kurs RSS
Kurs XHTML
Obiekty DOM
MANUALE
CSS1 - W3C
DOM - w budowie
PHP 2005
PHP 2006
Wyrażenia regularne
SHOUTBOX
STAT
Online: 47 | UU: 941

Strict Standards: Resource ID#115 used as offset, casting to integer (115) in /forum2/db/mysql4.php on line 223

Strict Standards: Resource ID#115 used as offset, casting to integer (115) in /forum2/db/mysql4.php on line 224
[Photoshop] Wypukły, lśniacy, nowoczesny przycisk na stronę www
Inne efekty | 13 listopad 2009 | Wizyt: 150900

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Strict Standards: Only variables should be assigned by reference in /blog/wp-includes/post.php on line 114

Deprecated: Function eregi() is deprecated in /blog/wp-content/plugins/tpbc.php on line 96

W tej poradzie dowiecie się jak, za pomocą kilku efektów programy Photoshop, wykonać przycisk, który można wykorzystać przy projektowaniu stron internetowych.

przycisk_m.jpg

1. Zaczynamy od stworzenia nowego dokumentu o wielkości 450 x 450 pix.

2. Tworzymy nową warstwę.

1.jpg

2.jpg

3. Za pomocą narzędzia Ellipse_Tool rysujemy koło. Aby kształt był równy, przy rysowaniu koła należy cały czas mieć wciśnięty przycisk SHIFT.

3.a.jpg

3.jpg

4.jpg

4. W panelu warstw mamy wybraną warstwę z kształtem i następnie wchodzimy Warstwa (Layer) > Styl warstwy (Layer_Style) > Opcje mieszania (Blending Options) i z listy wybieramy Nałożenie gradientu (Gradient Overlay). Ustawiamy jak na ilustracji poniżej. Patrząc od lewej strony użyłam kolorów: #220000, #220000 oraz #D04F0D.

5.jpg

6.jpg

7.jpg

5. W ten sam sposób wybieramy styl: Obrys (Stroke). Tu użyłam kolorów: #000000, #E8E4E3.

8.jpg

9.jpg

10.jpg

6. Następnie duplikujemy warstwę z kształtem naciskając prawym przyciskiem myszy na warstwie z kształtem znajdującej się w panelu warstw. Z listy wybieramy Duplikuj warstwę (Duplicate Layer).

7. W skopiowanej warstwie usuwamy wszystkie nałożone style warstwy. W tym celu klikamy na tej warstwie prawym przyciskiem myszy i z listy wybieramy Wyczyść styl warstwy (Clear Layer Style).

11.jpg

8. Na skopiowaną warstwę nakładamy nowe style warstwy. Wchodzimy Warstwa (Layer) > Styl warstwy (Layer_Style) > Opcje mieszania (Blending Options) > Obrys (Stroke). Ustawiamy jak na ilustracji poniżej. Zaczynając od lewej strony użyłam kolory: #DAD7D6, #E8E4E3, #FCFCFC, #A2A3A7, #CFD0D2, #5A5A5C, #78797D, #212121, #707173, #F6F6F6 oraz #BABABA. Po nałożeniu gradientu ustawiamy wypełnienie warstwy na 0%.

12.jpg

13.jpg

14.jpg

15.jpg

16.jpg

9. Aby uzyskać efekt cienia, tworzymy nową warstwę i za pomocą narzędzia Elliptical_Marquee_Tool rysujemy zaznaczenie w kształcie koła.

17.jpg

10. Następnie, mając wybraną w palecie warstw nową warstwę z zaznaczeniem, wchodzimy Edytuj (Edit) > Obrys (Stroke).

17a.jpg

18.jpg

11. Wchodzimy Warstwa (Layer) > Styl warstwy (Layer_Style) > Opcje mieszania (Blending Options) > Nałożenie gradientu (Gradient Overlay). Użyłam kolorów: od lewej #FEFEFE, #FEFEFE  i #9E9E9E.

19.jpg

19a.jpg

20.jpg

12. Tworzymy nową warstwę i za pomocą narzędzia Elliptical_Tool rysujemy nowe koło.

21.jpg

22.jpg

13. Wchodzimy Warstwa (Layer) > Styl warstwy (Layer_Style) > Opcje mieszania (Blending Options) > Nałożenie gradientu (Gradient Overlay) i ustawiamy jak na ilustracjach poniżej. Patrząc od lewej użyłam kolorów: #FDF27A, #FDE971, #F68C26, #F58423, #AE2417.

23.jpg

24.jpg

25_a.jpg

14. Za pomocą narzędzia Elliptical_Tool rysujemy owal i wchodzimy Warstwa (Layer) > Styl warstwy (Layer_Style) > Opcje mieszania (Blending Options) > Nałożenie gradientu (Gradient Overlay). Użyłam kolorów: #FDF27A oraz #FFFFFF.

26.jpg

27.jpg

28.jpg

29.jpg

15. Dla uzyskania ciekawszego efektu możemy też stworzyć małe koło w prawym dolnym rogu owalu. Tym razem nie stosujemy żadnego stylu warstwy. Małe koło ma zostać białe.

30.jpg

16. Teraz za pomocą narzędzia Pióro (Pen Tool) Pen Tool tworzymy zaznaczenie w dolnej części naszego przycisku. Należy pamiętać, aby powstała ścieżka została zamknięta. (Aby przesuwać punkty naniesione przez Pióro (Pen Tool) Pen Tool klikamy na punkcie, który chcemy przesunąć a następnie wciskamy CTRL).

31.jpg

17. Mając zaznaczoną w panelu warstw warstwę z krzywizną wchodzimy Warstwa (Layer) > Styl warstwy (Layer_Style) > Opcje mieszania (Blending Options) > Nałożenie gradientu (Gradient Overlay).

32.jpg

34.jpg

35.jpg

18. Dla uzyskania jeszcze lepszego efektu, za pomocą narzędzia Pióro (Pen Tool) Pen Tool robimy krzywe w lewym górnym i w prawym dolnym rogu przycisku.

36.jpg

19. Na koniec nakładamy gradient na powstałe warstwy z krzywymi.

37.jpg

38.jpg

Efekt końcowy:

przycisk.jpg

Autor: Anna Szymańska

nowe Inne efekty » zobacz wszystkie

WordPress database error: [Incorrect file format 'wp_comments']
SELECT * FROM wp_comments WHERE comment_post_ID = '1583' AND comment_approved = '1' ORDER BY comment_date desc

Dodaj komentarz









 
| | | |
Copyright © 2006-2013 egrafik.pl | Kontakt | Reklama | Projekty domów
jocker