|
Rozpoczynając proces projektowania
strony internetowej, zawsze należy zastanowić się, co na niej
będzie umieszczane. Po jej stworzeniu nie ma sensu dokładać coraz
to nowych kategorii, które przyjdą nam do głowy, ponieważ w
pewnym momencie zostanie całkowicie zatarta idea strony.
Zanim przystąpimy do prac związanych
z projektowaniem strony, warto zastanowić się, o czym będzie ta
strona i z jakich elementów będzie się składać, czego
będziemy potrzebowali do wykonania projektu i - co najważniejsze -
jak będzie ten projekt wyglądał. Warto sporządzić szkic strony
na kartce papieru, opracować jej układ, rozrysować sobie szkielet
struktury strony.
Elementy strony internetowej
Na początek warto zastanowić się,
jak i gdzie będą porozmieszczane elementy na naszej stronie, w
którym miejscu będzie menu, gdzie umieścimy treść główną,
jak duży będzie nagłówek, a jak duża stopka. Rozwiązanie
tych problemów przychodzi z czasem. Wraz z ilością
wykonanych stron nabiera się coraz większej wprawy przy ich
projektowaniu.
Menu
Jednym z najważniejszych elementów
strony internetowej jest menu. Musi ono być przede wszystkim dobrze
widoczne. Przy rozbudowanych serwisach trzeba zastanowić się nad
taką organizacją menu, aby łatwo było dotrzeć do pożądanych
opcji. Warto skupić się na tym, by menu było proste, żeby nie
zawierało zbyt wielu opcji, w których można byłoby się
zgubić. Odpowiednimi miejscami dla menu mogą być: lewa strona,
prawa strona, lub góra. Rzadko, albo w ogóle menu
umiejscowione jest na dole strony, gdyż zakłóca to odbiór
strony przez czytelnika, który przygotowany jest na to, że
znajdzie menu "tam gdzie zawsze". Właściwie każdy element
wokół menu może być dowolnie dobrany, pod warunkiem, że
nie będzie go przytłaczał.
Nagłówek
Nagłówek stał się elementem
reprezentacyjnym danej strony czy organizacji, która dzięki
stronie chce się pokazać. Przedstawia on profil działalności
osoby, firmy, organizacji itp. Najczęściej jest to kompozycja
fotografii oraz efektów graficznych, która ma na celu
przyciągnąć uwagę oglądającego. Ale czy to jest tak bardzo
potrzebne? Niekoniecznie. Ta część może zostać pusta, albo
zawierać niewielką ilość treści, może ona być również
znacznie większa niż się większości z nas wydaje, aby wzbogacić
stronę o "coś innego". Nic nie stoi na przeszkodzie, by
umieścić część lub całe menu w nagłówku. Wzbogaci to
konstrukcję strony, oczywiście jeżeli jest ku temu okazja.
Część główna strony
Następnie należy opracować miejsce,
w którym będziemy zamieszczać główną treść
strony. Może się wydawać, że jest to łatwa część
projektowania, bo przecież wystarczyłoby umieścić element, który
informuje o danych kategoriach, jakiś tekst i może jeden obrazek.
Jednak warto zastanowić się, czy nie udoskonalić strony, tworząc
jednolity interfejs, gdzie wszystkie elementy nagłówek, menu,
część główna, stopka będą ze sobą połączone. Jednym z
najważniejszych elementów części, gdzie znajduje się
treść, jest zaznaczenie miejsca, w którym się jest. Jest to
istotny element ze względu na to, że w przypadku rozbudowanych
stron oglądającemu często zdarza się zgubić. Bardzo często na
stronach znajdują się różnego rodzaju strzałki, punkty,
elementy dodatkowe, ramki, pełniące funkcję nawigacyjną, i które
warto uwzględnić w projekcie.
Przyciski
W momencie, gdy projekt strony jest już
opracowany, trzeba zastanowić się, jak będą zachowywały się
przyciski w menu po najechaniu na nie myszką. Jeżeli będą to
tylko zmiany formatowania tekstu, to nie ma problemu. Natomiast gdy
będą podmieniały się grafiki, to trzeba już zastanowić się nad
opracowaniem tych grafik. Zazwyczaj sprowadza się to do skopiowania
menu i opracowania wersji strony po najechaniu myszką na
poszczególne jej elementy. W tym wypadku warto opracować
sobie i wypisać nazwy wszystkich kategorii i podstron tak, by
później nie tracić czasu na dorabianie grafik.
Podstawowe zasady
Jest kilka zasad, o których warto pamiętać podczas projektowania stron w Photoshopie: korzystamy z własnych pomysłów, staramy się jak najmniej kopiować od innych; staramy się wprowadzać coraz to nowe kompozycje, dalekie od sprawdzonych standardów wciąż jednak należy pamiętać o szybkości transmisji; podczas projektowania staramy się umieszczać każdy nowy element na nowej warstwie, dzięki temu uzyskujemy większą kontrolę nad projektem; staramy się używać ujednoliconych krojów czcionek w projektach graficznych, ich niejednorodność może przyciemnić sam projekt graficzny; staramy się projektować jednolitą kompozycję graficzną tak, by każdy element tworzył całość z pozostałymi; staramy się tworzyć projekt w myśl "diabeł tkwi w szczegółach", dbając o szczegółowość wyglądu strony czasem warto odczekać parę dni i wrócić do projektu, można dzięki temu bardziej subiektywnie popatrzeć na to, co się robi; gdy już mamy gotowy layout, należy pokazać go innym, by mogli powiedzieć nam, co w nim trzeba jeszcze dopracować.
Tworzymy nowy obrazek Plik/Nowy File/New lub [Ctrl]+[N]. Ustawiamy rozmiary obrazka: długość 780, szerokość 800. Wypełniamy obrazek gradientem [G] (jeżeli mamy ustawione Wiadro z farbą Paint Bucket, wciskamy [Shift]+[G], żeby przejść do gradientów) z koloru RGB:[196,196,196] do koloru RGB:[150,150,150].
Zaznaczeniem [M] ustawiamy obszar
255x140 px, gdzie będzie znajdować się menu, i wypełniamy go
kolorem RGB:[255,198,0]. Do tego użyjemy Wiadra z farbą Paint
Bucket; wciskamy [Shift]+[G], żeby wrócić z gradientu do
Wiadro z farbą Paint Bucket. Bez zdejmowania zaznaczenia wybieramy
ponownie gradient radialny, zmieniamy wartość pierwszego koloru na
RGB:[255,174,0], a w opcjach gradientu ustawiamy gradient radialny z
koloru do przeźroczystości i wypełniamy zaznaczenie na nowej
warstwie tak, by uzyskać efekt cieniowania.
Umieszczamy tekst menu, wyrównując
go do prawej strony; rodzaj czcionki jest dowolny. Umieszczamy między
opcjami menu dwie linie o wysokości 1 px: górną koloru
szarego (nie za ciemny) i dolną koloru białego, a następnie
zmniejszamy stopień krycia do 40%.
Powielamy teraz tę warstwę [Ctrl]+[J] tyle razy,
ile jest opcji w menu, odpowiednio dopasowując je do wyglądu menu.
Na kolejnej warstwie zaznaczamy obszar 35x140 px i wypełniamy go
kolorem RGB:[177,104,0]. Między dwoma obszarami koloru żółtego
i brązowego rysujemy dwie kreski złożone z białego i szarego
koloru, by uzyskać wgłębienie. Po prawej stronie dodajemy ozdobnik
do każdej opcji w menu.
Oddzielamy nagłówek i menu od
reszty projektu poprzez wypełnienie obszaru 780x140 na najniższej
warstwie, ale nie niższej niż tło - gradient. Powielamy
dwukrotnie warstwę, gdzie wcześniej rysowaliśmy pionowe wgłębienie
Warstwa/Powiel warstwę Layer/Duplikate, a następnie przesuwamy ją na lewy i
prawy koniec menu. Z prawej strony menu zaznaczamy obszar 10x140 px i
wypełniamy go gradientem liniowym z koloru szarego RGB:[135,135,135]
do przeźroczystości. Zmieniamy sposób przenikania na
Mnożenie Multiply i zmniejszamy stopień krycia do 50%. Duplikujemy
tę warstwę i przenosimy ją na lewą stronę menu.
Oddzielamy nagłówek od dolnej
części, tworząc pas szarego koloru o wymiarach 780x30 px. W górnej
części tworzymy wgłębienie z jasnej i ciemnej linii. Powielamy i
przesuwamy na dół. Poniżej i powyżej pasa tworzymy cień na
takiej samej zasadzie jak w punkcie poprzednim. Zaznaczamy pod menu
obszar o długości 255 px i przeciągamy zaznaczenie do samego dołu.
Wypełniamy go gradientem z koloru RGB [135,135,135] do koloru RGB
[109,109,109].
Z lewej i z prawej strony ograniczamy
go pionowymi kreskami koloru trochę ciemniejszego od użytych w
gradiencie, np.: RGB [77,77,77], i ponownie umieszczamy cień,
używając gradientu i zmiany sposobu przenikania tak jak w kroku 8.
Chcąc odseparować poszczególne
kategorie w lewej kolumnie, zaznaczamy obszar, w którym
będziemy tytułowali daną kategorię. Wypełniamy go jaśniejszym
kolorem szarym. Na górze i na dole wykonujemy wgłębienie za
pomocą linii ciemnej i pod nią jasnej. Umieszczamy tekst tytułowy dla tej kategorii. Można dodać cień
pod tekstem, wybierając z menu Warstwa/Styl warstwy/Opcje mieszania Layer
Style/Blending Options. Ustawiamy Krycie Opacity na 40%, Odległość
Distance oraz Wielkość Size na 1, wszystko w zakładce Cień Drop
Shadow.
Przygotujemy teraz przestrzeń pod
splash-screen (obrazek wprowadzający do stron). Po prawej stronie
odseparujemy kawałek przestrzeni i wypełnimy ją jednolitym kolorem
np. RGB: [114,116,115]. Poniżej ograniczymy go jasną kreską RGB:
[214,214,214]. Aby uzyskać wrażenie większej przestrzeni, pod
kreską rysujemy gradient z koloru RGB:[192.192.192] do
przeźroczystości, mniej więcej na wysokość 30px, oraz dodajemy
cień powyżej kreski na podobnej zasadzie jak wcześniej.
W tym samym miejscu rysujemy ramkę o
grubości 3 px: zaznaczamy obszar 415x150 px, wypełniamy go kolorem
RGB [192,192,192] i wybieramy z menu Zaznacz/Zmień/Zawężanie
Select/Modify/Contract. Ustawiamy liczbę na 3, przez co nasze
zaznaczenie zmniejszyło się o 3 punkty na każdym z boków.
Wybieramy Edycja/Wytnij Edit/Cut lub
[Ctrl]+[X], dzięki czemu usuniemy niepotrzebny obszar. Do wewnętrznego
obszaru przenosimy obrazek o rozmiarze 409x144. Obrazek powinien kolorystycznie i treściowo
nawiązywać oraz komponować się z całym projektem.
Wracamy do grupy warstw menu nagłówek,
gdzie umieszczamy mapę świata, najlepiej zaraz nad wypełnieniem,
na całą szerokość strony tak, by komponowały się cienie
utworzone wcześniej. Oprócz tego wkomponujemy swoje logo lub
inny element, by wprowadzić identyfikację sieciową twórcy
na stronie.
Do ogólnego projektu brakuje nam
jeszcze stopki. Tworzymy zaznaczeie 780x30 px i wypełniamy je
gradientem linearnym z koloru RGB [129,129,129] do koloru RGB
[113,113,113]. Nad nim ograniczamy element poziomą kreską o
niewiele ciemniejszym odcieniu szarego i powyżej linii robimy cień
za pomocą gradientu i sposobu przenikania warstw. W tym miejscu
możemy napisać tekst na temat praw autorskich dotyczących
projektu.
Kolejnym etapem tworzenia projektu
strony jest opracowanie jej zawartości. Miejscem na zamieszczanie
informacji o nowościach na stronie będzie lewa kolumna, która
będzie pokazywać się na każdej podstronie tak, aby jak
najszybciej dotrzeć do odwiedzających stronę z nowymi
informacjami. W odseparowanym miejscu w lewej kolumnie przygotujemy
odpowiednie formatowanie dla każdego newsa. Dobrze
jest używać w projekcie czcionek, które ostatecznie będą
użyte już na stronie. Przykładową czcionką i najczęściej
używaną przy produkcji stron jest Verdana lub Arial.
Po prawej stronie tuż pod naszym
splash screenem będziemy zamieszczać główną treść
strony. Przygotowujemy tło pod nagłówek. Dla lepszego
rozeznania w wyglądzie projektu dobrze jest umieścić więcej
warstw z tekstami kategorii, wyłączając widoczność tych, które
nie są nam potrzebne w danym momencie.
W Image Ready przygotowujemy linie
cięcia. Włączamy linijki wokół obrazka Widok/Miarki
View/Rulers lub [Ctrl]+[R]; klikając na linijki, przeciągamy kursor
na pożądaną część obrazka. Wygodniej będzie nam, jeśli
podzielimy sobie nasz projekt na cztery części: góra -
nagłówek i menu, lewa strona, prawa strona oraz stopka.
Duplikujemy obrazek cztery razy za
pomocą Obrazek/Powiel Image/Duplicate i z każdego wyciągamy
odpowiedni fragment projektu. Zaznaczamy określone fragmenty
narzędziem Zaznaczenie prostokątne Marquee [M] i
wybieramy z menu Obrazek/Kadruj Image/Crop (linie pomocnicze zostały
poprowadzone w pliku site.psd).
W pociętych fragmentach w naszych
plikach PSD zostały już poprowadzone linie pomocnicze. Trzeba
przewidzieć, które fragmenty grafiki będą powielane, by
uzyskać ciągłość grafiki i odpowiednio przygotować sobie linie
pomocnicze tak, by wycinały potrzebne fragmenty grafik do
powielenia. Gdy są ułożone linie pomocnicze (można to zrobić
zarówno w Photoshopie jak i w Image Ready) przechodzimy do Image
Ready [Ctrl]+[Shift]+[M]. Od razu w programie otworzy się obrazek,
który był aktywny w Photoshopie. Aby pociąć fragment na
kawałki według przygotowanych wcześniej linii
pomocniczych, wybieramy z menu Odcięcia/Utwórz odcięcia z
linii pomocniczych Slices/Create Slice from guides. Na naszym obrazku
pojawią się numery kolejnych prawie już pociętych kawałków.
Pozostaje zdefiniowanie, który
kawałek będzie zapisany w formacie JPEG, a który w GIF.
Wybieramy z belki narzędziowej Zaznaczanie odcięcia Slice Select
Tool [K] i wybieramy interesujące nas kawałki. W palecie
Optymalizuj Optimize wybieramy format pliku oraz parametry dla danego
formatu. Jeżeli jest mała liczba kolorów, powierzchnie są w
miarę jednolite kolorystycznie albo kawałki są niewielkie, to nie
warto używać formatu JPEG, ze względu na to, iż traci się jakość
obrazu i zwiększa się objętość plików.
Gdy wszystkie kawałki są już
poukładane i poustawiane, wybieramy z menu Plik/Zapisz
Zoptymalizowany jako File/Save Optimized As lub
[Ctrl]+[Alt]+[Shift]+[S]. W nowym oknie wybieramy miejsce, gdzie mają
być zapisane pliki. Wybieramy jeszcze Ustawienia/Inne Settings/Other
i w nowym oknie kończymy ustawianie zapisu. W opcji Zapisywanie
plików Saving Files można zdefiniować dokładnie nazwy
plików, ich numerację oraz lokalizację. Zatwierdzamy OK i
zapisujemy pliki. Po wejściu do wskazanego wcześniej katalogu,
zobaczymy pliki HTML oraz w katalogu Images pocięty fragment na
pliki, które były wcześniej zdefiniowane w Image Ready.
Autor: ~Łukasz Pabian
Źródło:  www |
