Kolorowe buttony i Photoshop
czytano 423 razy|dodaj komentarz
Moje ostatnie 2 posty dotyczyły programów graficznych, dlatego dzisiaj zajmiemy się czymś innym, a mianowicie tworzeniem kolorowych buttonów “zakładek” w programie Adobe Photoshop. Efekt końcowy tego tutoriala widoczny jest na powyższym obrazku i myślę, że każdemu przypadnie on do gustu. Do stworzenia prawie w całości powyższych przycisków wykorzystamy Blending Options, stosując odpowiednie efekty warstw, takie jak: Inner Shadow, Outer Glow, Gradient Overlay czy Stroke. Zapraszam do zapoznania się z całością wpisu i wypróbowania go na własnej skórze! ;)
Krok 1 – Tworzymy nowy dokument
Pierwsza rzecz jaką musimy wykonać to utworzenie nowego dokumentu i wybranie dla niego odpowiedniego tła. Oto wymiary, których użyłem: 180×80 pixeli, tło natomiast wypełniłem kolorem #212121 – aby to zrobić wciśnij Ctrl+A dzięki czemu zostanie zaznaczony cały obszar roboczy, po czym z menu głównego programu wybierz pozycję Edit >> Fill…. W polu Use wybierz Color…, a w oknie, które pojawi się na ekranie wpisz kod html naszego koloru (#212121). Oto efekt:
Krok 2 – Zaznaczenie
Stwórz nową warstwę (klikając Layer >> New >> Layer…), a następnie używając narzędzia Rectangular Marquee Tool utwórz zaznaczenie o rozmiarach, które ma mieć Twój button. Jak widzisz jest ono prostokątne, a nasz przycisk ma być lekko zaokrąglony, aby to poprawić wybierz opcję Select >> Modify >> Smooth… i podaj wartość w liczbie pixeli o jaką ma być zaokrąglone nasze zaznaczenie (w moim przypadku są to 3px):
Krok 3 – Wypełniamy zaznaczenie kolorem
Okej, mamy zaznaczenie, ale nasz button nadal nie ma żadnego koloru! Wybierz więc Foreground color i wypełnij nim nasze zaznaczenie korzystając z narzędzia Paint Bucket Tool (G) – po prostu klikając w jego obrębie. Ja użyłem czerwonego koloru o kodzie: #b00000.
Krok 4 – Dodajemy efekty warstw
Jak na razie nie wygląda to zbyt zadowalająco, nieprawdaż? Dodajmy więc poniższe efekty warstw, a przekonasz się, że ze zwykłego prostokąta w mgnieniu oka może powstać piękny button. Kliknij PPM na warstwie z wypełnionym wcześniej wybranym kolorem zaznaczeniu i wybierz Blending Options… stosując poniższe efekty:
Inner Shadow:
Outer Glow:
Gradient Overlay:
Gradient Editor (ustawienia gradientu dla efektu Gradient Overlay):
Stroke:
Po zastosowaniu wszystkich opcji powinniśmy otrzymać coś takiego:
Krok 5 – Dodajemy tekst
Nie pozostaje nam nic innego jak dodanie jakiegoś tekstu przy użyciu narzędzia Horizontal Type Tool (T). Oto ustawienia, których użyłem, a których efekty widzicie poniżej: czcionka Arial Narrow, Bold, 10pt, Smooth, koloru #ffffff.
Krok 6 – Detale
Hym, tekst nie wygląda zbyt ostro, jest lekko rozmazany – dodajmy więc do niego cień (ponownie kliknij PPM na warstwie tekstu i wybierz Blending Options…):
Drop Shadow:
Oto co otrzymamy:
Możesz wierzyć lub nie, ale właśnie skończyliśmy naszą pracę. Teraz już nic nie stoi Ci na przeszkodzie by stworzyć całą gamę kolorów swoich własnych buttonów, wystarczy, że zmienisz kolor pierwszej warstwy z zaznaczeniem. Oto przykład:
Jeśli chcesz możesz po prostu pobrać projekt psd powyższego obrazu i wykorzystać go w swoich własnych pracach. Mam nadzieję, że spodobał Ci się ten samouczek, jeśli tak to zostaw komentarz – na pewno go przeczytam! :)
Możesz także przeczytać ten tutorial w języku angielskim, oto jego oryginał. Pozdrawiam!
Powiązane wpisy:
- Zielona ramka na Twoje myśli
- Rekonstruujemy oryginalne logo Google Inc.
- Selective Sepia, wydobądź kolor…
- Stwórz swój własny wektorowy motyw morskich kafelek
- Płynna animacja rozmycia tekstu w technologii Flash
- Sprejem po ścianie
Być może zainteresują Cię również inne artykuły o podobnej tematyce? Linki do nich znajdziesz powyżej! :)
