[Photoshop] #1 Praktyczny photoshop: wyszukiwarka

Posty · Wysłany: 06.08.2009 18:06 [Photoshop] #1 Praktyczny photoshop: wyszukiwarka

Myślę, że początkującym grafikom przyda się trochę praktycznych porad i wskazówek z photoshopa. W moich tutorialach będę przedstawiał jak zrobić ciekawe elementy na stronę. W każdym tutorialu inny element.

Wszystkie tutki oparte są o Photoshop CS3 polska wersja. Jeśli masz angielską wersję tego programu przetłumaczone komendy znajdziesz tu: http://www.pstools.pl/

Dzisiaj zaczniemy i zrobimy ładną oraz prostą wyszukiwarkę.

1. Otwieramy photoshop, tworzymy nowy dokument Plik/Nowy. Okno dialogowe wypełniamy wg poniższego obrazka.

Teraz musimy sobie zorganizować okna, na których będziemy pracować. Oczywiście okno z narzędziami, a do tego warstwy i info. Klikając w menu Okno zaznaczamy powyższe opcje. Nasz photoshop powinien wyglądać mniej więcej tak:

http://img294.imageshack.us/img294/14/19486992.png

2. Jeśli mamy już zorganizowane wszystko możemy zaczynać. Klikamy na

w oknie Warstwy albo używamy klawiszy shif + ctrl + N, aby utworzyć nowa warstwę. Teraz przy użyciu narzędzia Prostokąt zaokrąglony

musimy utworzyć element o szerokości 180px i wysokości 25px. Ale przed tym trzeba ustalić promień zaokrąglenia w menu na górze. Ja ustawiłem na 3px. W tym menu trzeba ustawić dobrze parę opcji więc poniższy obrazek pokazuje jak powinno wyglądać to menu.

Aby kontrolować rozmiary tego prostokąta patrzymy na okno info, w którym mamy wymiary.

3. Teraz musimy zmienić kolor klikając w kolor kształtu w oknie Warstwy.

Klikamy dwukrotnie na „to brązowe (u Ciebie może być inny kolor w tym miejscu)” i wybieramy kolor #f8f8f8 – lekko szary. Następnie klikamy prawym przyciskiem myszy na tą warstwę o nazwie Kształt 1 i z menu wybieramy opcje mieszania. Ustawiamy je tak:

Kolor obrysu: #c7c6c6.

Kolor cienia wewnętrznego: #000000.

4. Musimy teraz stworzyć przycisk. Tworzymy nową warstwę. Wybieramy narzędzie Prostokąt zaokrąglony

i z wciśniętym klawiszem Shift rysujemy kwadrat o zaokrąglonych bokach o wysokości 25px (patrzymy na info). Menu górne pozostaje takie samo jak w punkcie 2. Ustawiamy go po prawej stronie tak jak na poniższym obrazku.

Analogicznie do punktu 3. ustawiamy kolor temu przyciskowi na #2f8dbe – niebieski, taki jak powyżej. A opcje mieszania ustawiamy tak:

5. Powstało nam coś takiego:

Pasowałoby jeszcze coś do tego przycisku dodać. Zatem wybieramy narzędzie Kształt własny

,a z menu górnego wybieramy lupę (poniższy obrazek – lewy górny róg). Jeżeli nie mamy takiego obrazka musimy wejść w menu za pomocą strzałki i kliknąć Web, co przedstawione jest na poniższym obrazku.

Rysujemy lupę na niebieskim przycisku z wciśniętym klawiszem Shift. Podobnie jak w punktach 3. i 4. ustawiamy kolor lupki na: #ffffff, czyli biały i opcje mieszania wg poniższego obrazka:

6. Można jeszcze przekręcić nieco lupkę w prawo. Wybierz narzędzie zaznaczenie prostokątne

i kliknij na lupkę prawym przyciskiem myszki, a następnie Przekształcanie swobodne. Z wciśniętym klawiszem Shift przekręć lupkę o 1 pozycje.

Oto efekt naszych starań:

Wersja z promieniem zaokrąglenia 5px:

Ciekawy, a prosty efekt. Można się pobawić opcjami, kolorami i np. zwiększyć jeszcze promień zaokrąglenia.

Jeżeli nie rozumiesz czegoś, potrzebujesz bardziej szczegółowej instrukcji pisz i pytaj pod tym postem.

Wkrótce następna część!

Powodzenia! Smile