Adobe Photoshop - Tworzenie menu do strony internetowej
Adobe Photoshop - Tworzenie menu do strony internetowej
autorem artykułu jest Rafał Turek
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).
--
E-LIME - Tworzenie stron www Krynica
Artykuł pochodzi z serwisu www.Artelis.pl
Zobacz takze:
Dobrze jest mieć rzadkie hobby inwestycyjne
Jak wykorzystać sieć telefonów komórkowych do reklamy b
Magiczna moc dodatków
W jaki sposób myślą ludzie sukcesu?
Wszyscy jesteśmy konsumentami