16 Illustrator CS4 Illustrator a sprawa WWW.pdf
(
4632 KB
)
Pobierz
684305556 UNPDF
50
I
D
P
S
Ai
Fl D
W
F
W
Ct A
E
Pr Sb O
L
En Br
Illustrator CS4
Illustrator
a sprawa WWW
W trzeciej części cyklu
Akademia CS4, w którym
prezentowane są możliwości
najnowszego pakietu
firmy Adobe, zajmiemy się
Illustratorem...
Do projektowania niewielkich witryn
– wizytówek, opartych raczej o interesujący
projekt graficzny niż specjalistyczną wiedzę na
temat programowania HTML, zwykle korzystamy
z popularnych narzędzi typu Adobe Photoshop czy też
Fireworks.
Naturalnie jest to dobry wybór. Są jednak
sytuacje, gdy użycie Illustratora może zdecydowanie
przyspieszyć nasze działania. Ma to miejsce, kiedy
w naszej pracy znajduje się wiele powtarzalnych
elementów graficznych albo zależy nam na precyzyjnym
rozmieszczeniu detali czy też prostych elementów
wektorowych.
Dodatkowo, możliwość zapisu gotowego
projektu w postaci działającej strony www nadaje całej
sprawie zupełnie nowy wymiar. W tym prostym tutorialu
poznamy metody tworzenia i zapisu projektów witryn
w formacie HTML zarówno w postaci tradycyjnej tabeli
jak i popularnych znaczników DIV.
01
Do rozpoczęcia budowy
projektu strony www w programie Adobe
Illustrator wybieramy ekran startowy
i szablon dokumentu Web. W oknie
Dialogowym New Document możemy
określić docelową wielkość projektu
wyrażoną oczywiście w pikselach.
Pomimo, że strony o maksymalnej
szerokości w okolicach 780 pikseli wciąż
królują w naszych przeglądarkach, warto jednak rozważyć bardziej nowoczesne
rozwiązania. Budując stronę o szerokości 960 pikseli mamy możliwość podzielić ją
na niemal dowolną liczbę kolumn. Pozwoli to łatwo zbudować siatkę całej strony.
Tworzymy dokument o wielkości 960x800 pikseli.
Od wielu lat
jako freelancer
oraz instruktor
związany z grafiką
komputerową,
tworzeniem stron
www i prezentacji
multimedialnych.
Posiada
certyfikaty Adobe
Community
Expert, Adobe
Certified
Expert oraz
Adobe Certified
Instructor.
Założyciel
i manager Adobe
Creative Suite
User Group In
Poland (ACSUG).
Więcej informacji
o autorze pod
adresem
www.
pawelzakrzewski.pl
Umiejętności
Wykorzy-
stanie linii
pomocniczych
w Illustratorze
Twor zenie
makiety strony
www
Optymalizacja
grafiki do
internetu
Zapis strony
www
Edycja stylów
CSS
02
Strona o maksymalnej
szerokości 960 pikseli ma niewątpliwy
atut. Jeśli podzielimy ją na 2, 3,
4, 5, 6, 8, 10 czy nawet 12 kolumn
w rezultacie zawsze otrzymamy liczbę
całkowitą. Pozwala to zbudować
wygodną siatkę – makietę dla całej
strony. Do budowy siatki wykorzysta-
my zwykłe prostokąty o szerokości 60
pikseli rozmieszczone w odstępach
co 20 pikseli, które wygodnie
rozmieścimy za pomocą narzędzi
Illustratora (Object>Transform>Move).
Przygotowane prostokąty za
pomocą polecenia Make Guides
(View>Guides>Make Guides)
przekształcamy w linie pomocnicze.
03
Przygotowaną makietę
wypełniamy treścią typową dla
tradycyjnej strony www. Dzięki użyciu
dużej liczby kolumn, dopasowanie
poszczególnych elementów strony nie
sprawia nam większych problemów.
Teksty, elementy graficzne czy
zdjęcia możemy dowolnie rozciągać
nawet na kilka kolumn starając się
jednak zachować pewien logiczny
układ. Użycie siatki pozwala na łatwe
zachowanie ogólnej spójności całego
projektu.
Potrzebny czas
1 godzina
Computer Arts
Lipiec - Sierpień 2009
www.computerarts.com.pl
Akademia Adobe CS4
51
Gotowy projekt możemy
zapisać w postaci tradycyjnej
tabeli HTML lub nieco bardziej
nowoczesnych znaczników DIV
wraz z zestawem reguł CSS. Nie
jest to wzorcowy kod, jaki napisałby
doświadczony programista, jednak
w wielu przypadkach strona w takiej
postaci całkowicie spełnia nasze
oczekiwania.
Aby zapisać projekt
w postaci dokumentu HTML,
konieczne jest pocięcie go na osobne
elementy. Dodatkowo, możemy dla
każdej odciętej części nadać nie
tylko różny stopień kompresji, ale
także wybrać inny format kompresji.
Zasada jest prosta: fotografie oraz
elementy z dużą ilością przejść
tonalnych zapisujemy w formacie
JPEG, pozostałe proste elementy
wektorowe o ograniczonej liczbie
barw zapisujemy w formacie GIF.
Aby wygodnie podzielić na osobne części
poszczególne elementy projektu, zaznaczamy je
wszystkie jednocześnie, a następnie za pomocą polecenia
Object>Slice>Make tworzymy oddzielne odcięcia. Widoczne
na ekranie czerwone prostokąty wyznaczają granice
osobnych elementów graficznych. Domyślnie każdy z nich
utworzy odrębną komórkę tabeli HTML. Dzięki użyciu pole-
cenia Save For Web And Devices, możliwe jest precyzyjne
określenie ich formatu oraz stopnia kompresji.
Nieco inne zasady kierują opty-
malizacją pól tekstowych, o ile chcielibyśmy
poddać dalszej edycji w Dreamweaverze.
W tym przypadku daleko lepiej jest pozostawić
tekst w tradycyjnej wygodnej do dalszej edycji
tekstowej formie, a nie zamieniać go na gra-
fikę. Dzięki opcjom dostępnym w oknie Save
For Web & Devices możemy to łatwo osiągnąć.
Dwukrotnie klikamy odcięcie zawierające blok
tekstowy i w oknie Slice Options przełączamy
jego Slice Type na HTML Text. W rezultacie,
na wynikowej stronie HTML powstanie w tym
miejscu komórka z tekstem a nie grafika.
W podobny sposób edytujemy wszystkie
kluczowe elementy naszego projektu.
Aby zapisać efekty naszej
pracy w postaci strony www wybie-
ramy polecenie File>Save For Web &
Devices i uruchamiamy podgląd 2-Up.
Tu, zarówno w oknie Original (po lewej)
jak i w oknie podglądu (prawa sekcja)
możemy zaznaczać poszczególne
odcięcia i nadawać im odpowiedni
format graficzny. W celu optymalizacji
elementów wektorowych przezna-
czonych do zapisu w postaci pliku GIF
możemy dodatkowo ograniczyć ilość
wykorzystanych kolorów. Docelowa
wielkość pliku oraz szacunkowy czas
ładowania widoczne są w dolnej
części prawego okna podglądu. Do
optymalizacji zdjęć korzystamy
z formatu JPEG i suwaka Quality.
Także w tym przypadku szacunkowy
czas ładowania wybranej grafiki oraz
jej waga widoczna jest w dolnej części
okna podglądu.
Aby zapisać stronę HTML
w domyślnej postaci, nie trzeba
wprowadzać żadnych dodatkowych
zmian. Po ustaleniu odpowiedniego
formatu odcięć (GIF, JPEG) za pomocą
przycisku Save przechodzimy do okna
Save Optymized As. Tu jedyną ważną
zmianę wprowadzić należy w polu:
Zapisz jako Typ. Z dostępnej w tym
miejscu rozwijanej listy wskazujemy
opcję HTML and Images, następnie
wskazujemy docelową lokalizację
strony na dysku i zapisujemy pracę.
W rezultacie zapisu
z użyciem domyślnych ustawień, Adobe
Illustrator wyeksportował dokument
HTML zawierający tabelę, której
komórki wypełnione są przygotowaną
i również wyeksportowaną grafiką. Taki
dokument z powodzeniem możemy
otworzyć w programie Dreamweaver
i tu dokonać wszelkich niezbędnych
poprawek. Jeśli podejrzymy zapisaną
właśnie stronę, ujrzymy tradycyjny
dokument HTML odzwierciedlający
układ naszego projektu.
www.computerarts.com.pl
Computer Arts
Lipiec - Sierpień 2009
Technika
04
05
06
08
07
09
10
52
Akademia Adobe CS4
Technika
W programie Adobe Illustrator mamy możliwość zapisu projektu naszej
witryny w nieco bardziej nowoczesnej formie. Illustrator (podobnie jak Adobe
Fireworks) pozwala na zapis dokumentu HTML (lub nawet XHTML) zbudowanego
w oparciu o znaczniki DIV i arkusze stylów CSS. Niestety pomimo że tak przygotowa-
na strona dobrze wygląda w oknie przeglądarki internetowej, odbiega strukturą od
klasycznej postaci kodu HTML przygotowanego przez doświadczonego programistę
lub webmastera. Tym niemniej warto spróbować takiej opcji eksportu. W tym celu
podobnie jak w punkcie 7 otwieramy okno Save For Web & Devices i ustalamy od-
powiedni format odcięć dla kluczowych elementów strony. Po zakończeniu procesu
optymalizacji za pomocą przycisku Save przechodzimy do okna Save Optimized As,
wskazujemy HTML and Images jako format zapisu, jednak w tym miejscu za pomocą
sekcji Settings>Other przechodzimy do okna Output Settings, gdzie mamy możliwość
określenia własnych ustawień eksportu strony do formatu HTML.
Większość istotnych
ustawień dostępna jest na rozwijalnej
liście poniżej pola Settings. Możemy
tu samodzielnie określić opcje
dotyczące zapisu kodu HTML/XHTML
(sekcja HTML), a także sposobu
generowania layoutu strony Tabela/
DIV w sekcji Slices.
Aby przygotować układ
strony utworzony na podstawie
znaczników DIV oraz reguł CSS w sek-
cji HTML, zaznaczamy opcję Output
XHTML, w sekcji Slices – Generate
CSS. W tym miejscu mamy jeszcze
możliwość określenia selektorów
CSS, jakie wykorzystane zostaną do
tworzenia reguł CSS. W większości
przypadków do budowy layoutu
strony wygodnie jest użyć opcję by ID.
Alternatywnie możemy wykorzystać
także opcję By Class. W obu przy-
padkach powstanie strona XHTML
zbudowana w oparciu o znaczniki DIV
i reguły CSS budowane na podstawie
ID lub Class.
W rezultacie użycia
własnych ustawień eksportu,
powstanie nam strona HTML
o prostej strukturze. Wszystkie
elementy strony opisane są na
podstawie znaczników DIV zaś ich
wygląd i położenie określają reguły
CSS. Co ważne wszystkie elementy
tak przygotowanej strony możemy
dalej edytować za pomocą dowol-
nego edytora HTML – przykładowo
Dreamweavera.
Więcej o 960
Grid System
Jeśli zainteresował
Cię podział strony na podstawie
siatki 960 pikseli, odwiedź stronę:
http://960.gs/
, gdzie znajdziesz wiele
ciekawych informacji na temat użycia
tego systemu.
Po otwarciu zapisanej
strony w programie Dreamweaver,
jej podstawowy układ odpowiada
projektowi Illustratora zaś w oknie
CSS Styles widoczne są wszystkie
wykorzystane reguły CSS, które
kształtują układ i wygląd naszej
strony.
Co ważne, obszary które
podczas zapisu określone zostały jako
HTML Text straciły nieco swój wygląd.
Możemy jednak z łatwością edytować
za pomocą edycji utworzonych stylów
CSS. W ten sposób możliwe jest nawet
zbudowanie kilku kolejnych podstron
całego niewielkiego serwisu. Niezbędne
łącza możemy dodać także w programie
Dreamweaver.
Computer Arts
Lipiec - Sierpień 2009
www.computerarts.com.pl
11
12
13
14
15
16
Plik z chomika:
majoballs
Inne pliki z tego folderu:
11 Photoshop After Effects Głębia płaskiego obrazu.pdf
(6176 KB)
07 Illustrator Tworzenie i używanie własnych pędzli.pdf
(372 KB)
32 Photoshop Porządek musi być.pdf
(752 KB)
21 Photoshop CS2 lub nowszy Wyostrzanie obrazków do druku.pdf
(144 KB)
27 Photoshop Sztuka władania Piórem.pdf
(545 KB)
Inne foldery tego chomika:
Zgłoś jeśli
naruszono regulamin