Obiekt.eurolol.pl | O grafice w formie video…

Dobra, dzisiaj bez owijania w bawełnę! Tytuł postu nie mówi wiele, więc przejdźmy do rzeczy: w poniższym tutorialu nauczysz się jak przy pomocy Photoshop’a wykonać prostą zieloną ramkę w stylu web 2.0, która następnie może posłużyć Ci na przykład do zbudowania kolumn swojej własnej strony www. W tym celu skorzystamy ze styli Blending Options, utworzymy wektorowe kształty przy pomocy narzędzia Rounded Rectangle Tool oraz efektowne odbicie, czyli tzw. efekt mokrej podłogi (z ang. wet floor effect).

Krok 1
Włącz Photoshop’a i stwórz nowy dokument o rozmiarach, które będą Ci odpowiadać. Ja wybrałem obszar o powierzchni 300 na 231 pixeli. Jako kolor tła naszej pracy (Background Contents) wybierz kolor biały, czyli pozycję White, po czym zatwierdź klikając przycisk OK.

Krok 2
Z menu po lewej wybierz narzędzie Rounded Rectangle Tool (U), a następnie ustaw Foreground color na #9AB82E i stwórz kształt, na którym będzie bazowała nasza ramka. Oto ustawienia narzędzia (wybrałem Radius: 6px) i kształt, który właśnie utworzyłem przy jego pomocy:

Krok 3
Na nowo utworzonym kształcie (stworzonym w poprzednim kroku) zastosuj następujące style (klikając na jego warstwie PPM >> Blending Options…), i tak kolejno dla:

Drop Shadow:

Inner Glow:

Gradient Overlay:

Stroke:

Po wprowadzeniu wszystkich ustawień zatwierdź je klikając na przycisk OK.

Krok 4
W tym kroku utworzymy kolejny kształt umieszczając go w środku poprzedniego, na którym to znajdzie się tekst wypełniający naszą ramkę. Aby to zrobić musisz zduplikować utworzony wcześniej kształt: kliknij PPM na warstwie kształtu i wybierz opcję Duplicate Layer…, po czym użyj narzędzia Free Transform Tool, aby zeskalować nowo utworzoną warstwę.

Użyj skrótu klawiaturowego Ctrl+T by wybrać Free Transform Tool i zmień procentowe wartości wysokości i szerokości na 97%, tak jak jest to widoczne na poniższym obrazku.

Krok 5
Następnie przy pomocy myszki lekko zmniejsz rozmiary utworzonej właśnie warstwy zostawiając miejsce na nagłówek z tekstem, tak jak jest to widoczne na poniższym zrzucie ekranu:

Nasza ramka w tej chwili powinna wyglądać tak:

Krok 6
Wyczyść aktualne style dla naszej warstwy klikając na niej PPM >> Clear Layer Style i zastosuj następujące:

Inner Glow:

Gradient Overlay:

Nasza ramka powinna teraz wyglądać mniej więcej tak:

Krok 7
Na sam koniec naszej pracy wypadałoby dodać do ramki jakiś tytuł i tekst, który ją wypełni oraz opcjonalnie ikonę, która będzie ją reprezentować. Oto ustawienia, które użyłem dla nagłówka: czcionka to Trebuchet MS z włączonym Bold’em (pogrubieniem), o rozmiarze 12px, Strong oraz dodatkowo styl Stroke o szerokości1px koloru #7E991D. Oprócz tego dorzuciłem od siebie ładne odbicie, które podkreśla zakończenie ramki nadając jej charakteru web 2.0:

Gotowe! Oto oryginalna wersja tutorialu napisanego w języku angielskim. :) Pozdrawiam i życzę wszystkim Wesołych Świąt Wielkiej Nocy!

Powiązane wpisy:

• Płynna animacja rozmycia tekstu w technologii Flash
• Sprejem po ścianie
• Kolorowe buttony i Photoshop
• Selective Sepia, wydobądź kolor…
• Modelujemy miskę dla naszego czworonoga
• Stwórz swój własny wektorowy motyw morskich kafelek

Być może zainteresują Cię również inne artykuły o podobnej tematyce? Linki do nich znajdziesz powyżej! :)