Tutorial - Moja I strona w photoshopie.pdf - Kurs projektowania stron (Photoshop) - mgglpl

Jak efektywnie zaistnieć w Internecie? Nie wystarczy dobra reklama i pomysł na

stronę. Potrzebny jest design, który zachęci gości do ponownej wizyty. Niestety kaŜdy dobry

grafik się ceni, więc nie wszyscy mogą pozwolić sobie na profesjonalny szablon strony

WWW. W tym tutorialu postaram się przybliŜyć moŜliwości webdesign-owe Photoshopa,

który jest nieograniczonym narzędziem do grafiki.

Jak juŜ wiemy na jaki temat chcemy zrobić stronę, musimy mieć równieŜ koncept na

dany projekt. Trzeba przemyśleć sposób rozmieszczenia treści, kolorystykę strony, czcionki

itd. W tym tutorialu zobaczycie jak zrobić przykładową stronę dla firmy (kategoria biznes).

Do dzieła!

Na samym początku musimy ustalić wielkość naszej strony. W tym celu klikamy na

Plik > Nowy… Szerokość ustawmy np. na 850 pikseli, wysokość tak samo. W nazwie

moŜemy wpisać Moja pierwsza strona. Po naciśnięciu OK ukaŜe nam się nasze pole robocze,

w którym powstanie nasza strona.

Dwukrotnie klikamy na Kolor narzędzia (ten wyŜej) i wybieramy kolor, który

będzie tłem najniŜej warstwy. Ja ustawiłem #E9EBEE. Naciskamy OK a

następnie wchodzimy w Edycja > Wypełnij… W wypełnieniu ustawiamy UŜyj:

Kolor Narzędzia , naciskamy OK.

Czas na elementy graficzne. W tym celu potrzebujemy nowej warstwy ( Shift + Ctrl + N ).

MoŜemy ją nazwać wedle uznania. U mnie będzie nosiła nazwę „góra_belka”.

Zaznaczamy prostokąt na samej górze poprzez Zaznaczenie prostokątne . Następnie

wypełniamy je kolorem #1F2022 (Ponownie zmieniamy kolor narzędzia i wchodzimy

w Edycja > Wypełnij… / OK ).

Mamy teraz ciemny pasek na górze strony. MoŜemy go urozmaicić przez nałoŜenie

delikatnego gradientu (naciskamy Dodaj styl warstwy ). Opcje ustawiamy w ten sposób: Tryb

mieszania: Zwykły, Krycie: 20%, Kąt -90.

Tworzymy nową warstwę, w której będą znajdować się przyciski do górnego menu.

Następnie tworzymy przyciski (np. Zaznaczeniem prostokątnym ) na wysokości naszej

„gornej_belki”. Zmieniamy jego kolor na zielony ( Wypełnienie na Kolor narzędzia

#D1FD20). Następnie dodamy gradient i cień do przycisku. W tym celu klikamy na Dodaj

styl warstwy i NałoŜenie gradientu . Tryb mieszania zostaje Zwykły , a Krycie na 16% .

Naciskamy OK. Znowu wchodzimy do Dodaj styl warstwy , ale tym razem wybieramy Cień .

Odległość ustalamy na 2 piksele, a Krycie na 25%, następnie naciskamy OK.

Powielamy warstwę trzykrotnie a następnie

rozsuwamy przyciski za pomocą Przesunięcia ( V ).

Teraz czas na logo strony. W tym celu tworzymy nową warstwę i przesuwamy ją nad

warstwę Tło , czyli pod górną_belkę . Zaznaczamy dość spory obszar, wypełniamy go

obojętnie jakim kolorem, gdyŜ następnie wypełnimy go gradientem.

Z lewej strony ustawiamy kolor #E9EBEE a z prawej biały. Naciskamy OK.

Wiemy jak wypełniać obiekty i jak nakładać na nie gradienty, dlatego zróbmy ramkę

(w Nowej warstwie ), która będzie stanowić część loga. Moja będzie wyglądać następująco:

Została wypełniona kolorem #8BAD31 a potem nałoŜyłem na nią gradient, obrazek

wyciąłem z innego pliku JPG za pomocą Lassa ( L ). Oprócz tego uŜyłem pędzli, które moŜna

pobrać z Internetu. Tekst nałoŜyłem za pomocą Tekst ( T ). W ten sam sposób robimy napisy

do przycisków górnego menu:

Czcionka, kolor i jej rozmiar zaleŜy od naszego gustu, ja ustawiłem taką. Teraz czas

umieścić nazwę firmy. Do tego równieŜ będą nam potrzebne ładne fonty, jeŜeli wasz zbiór

czcionek jest ubogi, to zapraszam na: www.webpc.pl/czcionki/

Tutorial - Moja I strona w photoshopie.pdf

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: