Projektowanie.pdf

webdesign

projektowanie stron

Łukasz Pabian

Projektowanie

stron

anim przystąpimy do prac związanych z projek-

towaniem 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.

czył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, two-

rząc jednolity interfejs, gdzie wszystkie elementy (na-

głó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 znajdu-

ją się różnego rodzaju strzałki, punkty, elementy dodat-

kowe, ramki, pełniące funkcję nawigacyjną, i które warto

uwzględnić w projekcie.

PODSTAWOWE ZASADY

Jest kilka zasad, o których warto pamiętać podczas

projektowania stron w Photoshopie:

internetowych

w pakiecie

• 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 czcio-

nek w projektach graicznych, ich niejednorodność

może przyciemnić sam projekt graiczny;

• staramy się projektować jednolitą kompozycję gra-

iczną tak, by każdy element tworzył całość z pozo-

stał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ć.

Adobe

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łów-

ną, 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 wpra-

wy przy ich projektowaniu.

PRZYCISKI

W momencie, gdy projekt strony jest już opracowany,

trzeba zastanowić się, jak będą zachowywały się przyci-

ski 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ę graiki, to trzeba już

zastanowić się nad opracowaniem tych graik. Zazwy-

czaj sprowadza się to do skopiowania menu i opracowa-

nia wersji strony po najechaniu myszką na poszczegól-

ne jej elementy. W tym wypadku warto opracować sobie

i wypisać nazwy wszystkich kategorii i podstron tak, by

później nie tracić czasu na dorabianie graik.

Photoshop

Jednym z najważniejszych elementów strony inter-

netowej jest menu. Musi ono być przede wszystkim

dobrze widoczne. Przy rozbudowanych serwisach trze-

ba 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 wie-

lu opcji, w których można byłoby się zgubić. Odpowied-

nimi miejscami dla menu mogą być: lewa strona, prawa

strona, lub góra. Rzadko, albo w ogóle menu umiejsco-

wione jest na dole strony, gdyż zakłóca to odbiór strony

przez czytelnika, który przygotowany jest na to, że znaj-

dzie menu „tam gdzie zawsze”. Właściwie każdy element

wokół menu może być dowolnie dobrany, pod warun-

kiem, że nie będzie go przytłaczał.

Rozpoczynając proces projektowania

strony internetowej, zawsze należy zasta-

nowić 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.

NAGŁÓWEK

Nagłówek stał się elementem reprezentacyjnym danej

strony czy organizacji, która dzięki stronie chce się poka-

zać. Przedstawia on proil działalności osoby, irmy, orga-

nizacji itp. Najczęściej jest to kompozycja fotograii oraz

efektów graicznych, która ma na celu przyciągnąć uwa-

gę oglądającego. Ale czy to jest tak bardzo potrzebne?

Niekoniecznie. Ta część może zostać pusta, albo zawie-

rać niewielką ilość treści, może ona być również znacz-

nie większa niż się większości z nas wydaje, aby wzboga-

cić 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ędzie-

my zamieszczać główną treść strony. Może się wydawać,

że jest to łatwa część projektowania, bo przecież wystar-

1 Projekt strony internetowej wykonany w Photoshopie

Artykuł został opublikowany w magazynie Design Extra!. Zapraszamy do lektury całego magazynu.

Szczegóły na stronie internetowej www.psdmag.org. Wszelkie prawa zastrzeżone.

Powielanie całości lub części artykułu bez zgody Wydawnictwa - zabronione.

www.dsx.pl Design Extra! Nr 5

Design Extra! Nr 5

www.dsx.pl

webdesign

projektowanie stron

Krok 1 Przygotowujemy tło

Krok 2 Dodajemy kolor i gradient do selekcji

Krok 5 Oddzielamy menu od reszty projektu

Krok 6 Ostatecznie wydzielamy menu

Tworzymy nowy obrazek

Plik–>Nowy (ang. File–>New)

lub [ Ctrl ]+[ N ]. Ustawiamy roz-

miary obrazka: długość 780,

szerokość 800. Wypełniamy

obrazek gradientem [ G ]

(jeżeli mamy ustawione

Wiadro z farbą (ang. 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ą (ang.

Paint Bucket), ; wciskamy

[ Shift ]+[ G ], żeby wrócić z gra-

dientu do Wiadro z farbą (ang.

Paint Bucket) . Bez zdejmowa-

nia zaznaczenia wybieramy

ponownie gradient radialny,

zmieniamy wartość pierwsze-

go 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.

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 war-

stwę, gdzie wcześniej ryso-

waliśmy pionowe wgłębienie

Warstwa–>Powiel warstwę

(ang. 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źro-

czystości. Zmieniamy sposób

przenikania na Mnożenie

(ang. Multiply ) i zmniejsza-

my 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 wymia-

rach 780x30 px. W górnej

części tworzymy wgłębie-

nie 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].

Krok 3 Dodajemy linie

Krok 4 Dopracowujemy elementy menu

Krok 7 Dodajemy lewą kolumnę

Krok 8 Kategorie w lewej kolumnie

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 ciem-

ny) i dolną koloru białego,

a następnie zmniejszamy

stopień krycia do 40%.

Powielamy teraz tę war-

stwę 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.

Z lewej i z prawej strony

ograniczamy go pionowymi

kreskami koloru trochę ciem-

niejszego od użytych w gra-

diencie, 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ć poszcze-

gó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 (ang. Layer

Style–>Blending Options).

Ustawiamy Krycie (ang.

Opacity) na 40%, Odległość

(ang. Distance) oraz Wielkość

(ang. Size) na 1, wszystko

w zakładce Cień (ang. Drop

Shadow) .

www.dsx.pl Design Extra! Nr 5

Design Extra! Nr 5

www.dsx.pl

webdesign

projektowanie stron

Krok 9 Przygotujemy części pod splash-screen

Krok 10 Dodajemy ramkę

Krok 13 Tworzymy stopkę

Krok 14 Formatujemy newsy

Przygotujemy teraz prze-

strzeń 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 ogra-

niczymy 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ść 30 px,

oraz dodajemy cień powyżej

kreski na podobnej zasadzie

jak wcześniej.

W tym samym miejscu rysu-

jemy ramkę o grubości 3 px:

zaznaczamy obszar 415x150

px, wypełniamy go kolorem

RGB [192,192,192] i wybiera-

my z menu Zaznacz–>

Zmień–>Zawężanie (ang.

Select–>Modify–>Contract).

Ustawiamy liczbę na 3,

przez co nasze zaznaczenie

zmniejszyło się o 3 punkty na

każdym z boków.

Do ogólnego projektu

brakuje nam jeszcze stopki.

Tworzymy zaznaczeie 780x30

px i wypełniamy je gradien-

tem linearnym z koloru RGB

[129,129,129] do koloru RGB

[113,113,113].

Nad nim ograniczamy ele-

ment poziomą kreską o nie-

wiele 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 tworze-

nia 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 przy-

gotujemy 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 .

Krok 11 Umieszczamy splash-screen

Krok 12 Planujemy nagłówek

Krok 15 Wyłączamy warstwy

Krok 16 Dzielimy projekt

Wybieramy Edycja–>Wytni j

(ang. Edit–>Cut) lub [ Ctrl ]+[ X ],

dzięki czemu usuniemy

niepotrzebny obszar. Do

wewnętrznego obszaru

przenosimy obrazek o roz-

miarze 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łnie-

niem, na całą szerokość stro-

ny tak, by komponowały się

cienie utworzone wcześniej.

Oprócz tego wkomponujemy

swoje logo lub inny element,

by wprowadzić identyikację

sieciową twórcy na stronie.

Po prawej stronie tuż pod

naszym splash screenem

będziemy zamieszczać

główną treść strony.

Przygotowujemy tło pod

nagłówek. Dla lepszego roze-

znania 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 przygotowu-

jemy linie cięcia. Włączamy

linijki wokół obrazka Widok–>

Miarki (ang. 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.

www.dsx.pl Design Extra! Nr 5

Design Extra! Nr 5

www.dsx.pl

webdesign

Krok 17 Tniemy projekt w Image Ready

Krok 18 Pocięty na kawałki fragment projektu

Duplikujemy obrazek cztery

razy za pomocą Obrazek–>

Powiel (ang. Image–>

Duplicate) i z każdego wycią-

gamy odpowiedni fragment

projektu. Zaznaczamy okre-

ślone fragmenty narzędziem

Zaznaczenie prostokątne

(ang. Marquee) [ M ] i wybiera-

my z menu Obrazek–>Kadruj

(ang. Image–>Crop) (linie

pomocnicze zostały popro-

wadzone w pliku site.psd ) .

W pociętych fragmentach

w naszych plikach PSD zosta-

ły już poprowadzone linie

pomocnicze. Trzeba przewi-

dzieć, które fragmenty graiki

będą powielane, by uzyskać

ciągłość graiki i odpowied-

nio przygotować sobie linie

pomocnicze tak, by wycinały

potrzebne fragmenty graik

do powielenia. Gdy są

ułożone linie pomocnicze

(można to zrobić zarówno

w Photoshopie jak

i w Image Ready) prze-

chodzimy 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, wybiera-

my z menu Odcięcia–>Utwórz

odcięcia z linii pomocniczych

(ang. Slices–>Create Slice from

guides) . Na naszym obrazku

pojawią się numery kolejnych

prawie już pociętych kawał-

ków.

Krok 19 Format zapisu odcięć (ang. slice )

Krok 20 Opcje zapisu plików

Pozostaje zdeiniowanie,

który kawałek będzie zapisa-

ny w formacie JPEG, a który

w GIF. Wybieramy z belki

narzędziowej Zaznaczanie

odcięcia (ang. Slice Select Tool)

[ K ] i wybieramy interesujące

nas kawałki.

W palecie Optymalizuj

(ang. 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

(ang. File–>Save Optimized

As) lub [ Ctrl ]+[ Alt ]+[ Shift ]+[ S ].

W nowym oknie wybieramy

miejsce, gdzie mają być zapi-

sane pliki. Wybieramy jeszcze

Ustawienia–>Inne (ang.

Settings–>Other) i w nowym

oknie kończymy ustawianie

zapisu.

W opcji Zapisywanie plików

(ang. Saving Files) można

zdeiniować 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 zdeinio-

wane w Image Ready.

www.dsx.pl Design Extra! Nr 5

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: