Adobe Photoshop - Tworzenie menu do strony internetowej

Nieodzownym elementem każdej strony internetowej jest menu. Podczas tworzenia strony www zawsze zastanawiamy się jak ono będzie wyglądać i gdzie je umieścić.
Artykuł ten opisuje sposób wykonania prostego menu do strony internetowej.



Czytając poniższy artykuł można dowiedzieć się m.in. o:

- pracy na warstwach,

- zastosowaniu narzędzi do zaznaczania,

- zastosowaniu narzędzia Gradient z przybornika narzędzi,

- tworzeniu odcięć,

- eksporcie grafiki do strony internetowej.



1. Tworzymy nowy dokument:

a) z paska menu wybieramy Plik - Nowy (szerokość-200 pikseli, wysokość-300 pikseli)

b) wypełniamy naszą warstwę Tło (przy użyciu Wiadra z farbą z przybornika narzędzi) ciemnym kolorem - tutaj zastosowałem kolor brązowy:






2. Nowa warstwa:

a) tworzymy nową warstwę (Warstwa - Nowa - Warstwa) i nadajemy jej nazwę przycisk

b) wybieramy narzędzie do zaznaczenia - Zaznaczanie prostokątne z przybornika narzędzi

c) trzymając klawisz Shift tworzymy zaznaczenie:






3. Wypełnianie gradientem:

a) z przybornika narzędzi wybieramy narzędzie Gradient

b) wybieramy gradient skośny:






c) teraz wciskamy D a potem X na klawiaturze by kolejno: przywrócić standardowe kolory narzędzia i tła (D) i zamienić kolory narzędzia i tła (X)

d) trzymając klawisz Shift klikamy w lewym dolnym rogu naszego zaznaczenia i przeciągamy (wciąż z wciśniętym klawiszem Shift) do prawego górnego rogu:






e) puszczamy teraz przycisk myszy a potem klawisz Shift i nasz obrazek powinien teraz wyglądać następująco:






4. Modyfikacja zaznaczenia:

a) z paska menu wybieramy Zaznacz - Zmień - Zawężanie. Ustawiamy wartość na 2 piksele i wciskamy OK

b) tworzymy nową warstwę (Warstwa - Nowa - Warstwa) i wypełniamy teraz nasze zaznaczenie ciemnym szarym kolorem. Następnie wciskamy na klawiaturze Ctrl + D by odznaczyć

5. Ponowne zaznaczanie:

a) wykorzystując narzędzie Zaznaczanie prostokątne zaznaczamy połowę naszego przycisku:






b) scalamy Warstwę 1 i warstwę przycisk zaznaczając Warstwę 1 i wybierając z menu opcje Warstwa - Połącz w dół.

Trzymając klawisze Alt + Ctrl + Shift naciskamy na klawiaturze strzałkę w prawo i rozciągamy nasz przycisk, aż nabierze oczekiwanych przez nas rozmiarów:






Następnie wciskamy Ctrl + D by odznaczyć.



c) gdy mamy już gotowy jeden z naszych przycisków wykorzystujemy ponownie narzędzie Zaznaczanie prostokątne i zaznaczamy nasz przycisk

d) trzymając klawisze Alt + Ctrl + Shift naciskamy na klawiaturze strzałkę w dół i w ten sposób kopiujemy zaznaczenie aż otrzymamy pożądaną przez nas liczbę przycisków:






6. Zaznaczenie eliptyczne:

a) tworzymy nową warstwę (Warstwa - Nowa - Warstwa) i nazywamy ją wycięcie. Narzędziem Zaznaczanie eliptyczne zaznaczamy owalny kształt po prawej stronie naszych przycisków:






b) korzystamy ponownie z narzędzia Gradient wybierając tym razem gradient liniowy. Znowu wciskamy z klawiatury klawisze D a następnie X (by przywrócić ustawienia standardowe i zamienić kolory tła i narzędzia) i trzymając klawisz Shift wypełniamy zaznaczenie

c) trzymając wciśnięty klawisz Ctrl klikamy na warstwie przycisk aby zaznaczyć tę warstwę. Z menu wybieramy Zaznacz - Odwrotność i będąc na warstwie wycięcie wciskamy klawisz delete żeby usunąć zbędną część. Nasze menu wygląda teraz następująco:






d) klikamy teraz na warstwie wycięcie prawym przyciskiem myszy i powielamy ją (Powiel warstwę). Zaznaczamy nowo powstałą warstwę wycięty brzeg kopia i z menu wybieramy Edycja - Przekształć - Odbij poziomo. Przeciągamy odbity poziomo brzeg na lewą stronę dopasowując tak aby powstało menu widoczne poniżej:






e) mając zaznaczoną warstwę wycięcie kopia wybieramy z menu opcję Warstwa - Połącz w dół. Mając złączone warstwy wycięcie kopia i wycięcie ponownie wybieramy opcje Połącz w dół i zostają nam jedynie dwie warstwy: przycisk i Tło:






f) łatwo zauważyć, iż brzegi menu są dość „ostre”. Zmieńmy ten wygląd. Klikamy prawym przyciskiem myszy na warstwie przycisk i wybieramy Opcje mieszania. Zaznaczamy opcje Faza i płaskorzeźba oraz Kontur.

Otrzymujemy nieco zmienione menu:






7. Wewnątrz przycisków:

a) tworzymy nową warstwę o nazwie przycisk wewnątrz
b) narzędziem Zaznaczanie prostokątne zaznaczamy małe prostokąty w środku tych większych i wypełniamy je gradientem liniowym nieco jaśniejszym niż poprzednio:






c) trzymając ponownie wciśnięte Alt + Ctrl + Shift przeciągamy myszką w dół nasz jaśniejszy prostokącik kopiując go pięć razy



Nasze menu jest już prawie gotowe. Możemy teraz jeszcze dodać tekst wewnątrz tych małych jasnych prostokącików. Z przybornika narzędzi wybieramy narzędzie Tekst i reszta zależy od tego co chcemy umieścić na naszej stronie. Tutaj wprowadziłem następujący tekst:






8. Zapisywanie i wycinanie:

Gdy nasze menu jest już gotowe zapiszmy je w taki sposób aby później mogło posłużyć nam przy budowie naszej strony. Jeżeli chcemy bezpośrednio całe nasze menu zapisać jak jeden obrazek wybieramy z menu opcje Plik - Zapisz dla Weba. Po zapisaniu pliku za pomocą polecenia Zapisz dla Weba, można wygenerować plik HTML dla tego obrazka. Plik ten zawiera cały kod niezbędny do wyświetlenia obrazka w przeglądarce WWW.



Istnieje również możliwość podziału naszego obrazka na mniejsze składowe. Przykładowo ustalono, że każdy z przycisków zostanie wycięty osobno, aby później, podczas pracy nad stroną internetową można było do każdego z nich (np. HOBBY) przyporządkować odpowiednią podstronę strony WWW. Może i brzmi to dalej jak jedna wielka zagadka dla tych, którzy po raz pierwszy zetknęli się z tym, ale w rzeczywistości jest bardzo proste:



a) z przybornika narzędzi wybieramy narzędzie Odcięcie:






b) zaznaczamy każdy z przycisków osobno:






c) z menu wybieramy Plik - Zapisz dla Weba i wybieramy OK:






Mamy już nasze obrazki przygotowane wraz z kodem źródłowym. Każdy przycisk jest wycięty osobno, więc nie pozostaje już nic innego niż praca z tym menu w programie do tworzenia stron WWW. A tak powinno wyglądać nasze menu po zastosowaniu narzędzia Odcięcie:






Ćwiczenie to pokazuje jak w prosty sposób zrobić ciekawe menu do strony internetowej. Lecz to nie jest jeszcze koniec naszej pracy bo dlaczego nasze menu nie mogłoby wyglądać tak:






Zastosowano tutaj efekt Faza i płaskorzeźba oraz Satyna (znajdują się one w menu Opcje mieszania po kliknięciu na daną warstwę - w tym przypadku na warstwę przycisk wewnątrz - prawym przyciskiem myszy).



Rozmieszczanie przycisków zależy tylko i wyłącznie od naszych upodobań, można np. pomiędzy poszczególnymi przyciskami zrobić odstępy co zmieni wizualnie wygląd menu, zmienić kształt przycisków (przyciski nie muszą być prostokątne- równie dobrze mogą być eliptyczne i wtedy zamiast Zaznaczania prostokątnego wybieramy Zaznaczanie eliptyczne i tworzymy warstwę przycisk).