V C W v i c M a n < s pho

Kl fi\ . t o Editor 7.2 • Page Curl 1 . 2 - Puzzle Pro 2.0

NQ W FILMY INSTRUKTAŻOWE DO TUTORIALI • ZDJĘCIA ROYALITY FREE
NR 01/2004 (1) CENA 29,80 PLN VAT 0% NAKŁAD 6000 egz.

MAGAZYN
UŻYTKOWNIKÓW
PROGRAMU
ADOBE PHOTOSHOP
www.psdmag.org

oI
co TEMAT NUMERU W ^
ni
ca WEBDESIGN^
projektujemy layout strony
CL
kolory na WWW
optymalizacja grafiki
O
z
O

1<

PHOTO
co nowego

Fotografia cyfrowa
kupujemy aparat
 rozwijaj się
Twoja praca. Twoja droga. Poznaj 3ds max 6.
Biegnij do przodu razem z elastycznymi, bogatymi w możliwości modelowania 3D, animacji
i renderingu narzędziami 3ds max6.
Z nowym systemem cząstek, zintegrowanym rendererem mental ray ©.ultranowoczesnym schematicview.
vertex paint. reactor©2stuntman and vehicle dynamics, wzmocniona integracją z nowym Autocad® 2004,
rodziną Autodesk 1) VIZ. formatami .DWG ™. DXF i IGES 3ds max 6 wspomaga produkcję gier post
produkcję wizualizację i design
Dzięki niesamowitym możliwościom 3ds max 6 wykracza daleko poza uroki starych dobrych czasów

Odwiedź nas na pokazie 3ds max

Quedex • • i kom. H8 605 061
ul. Bukowska 14 http://www.quedexx tcl.*48 61 8963
62-080 Sierosław biuro@quedexxom fax +48 61 8963 900
dodatkowe informacje na stonie producenta: www.di i/products/3dsmax6
Od redakcji
Mam przyjemność przedstawić Warn pierwszy numer z serii .psd. Pismo powsta-
ło dzięki Waszym sugestiom i uwagom. W głównej mierze poświęcone jest tworze-
niu grafiki i obróbce zdjęć w programie Adobe Photoshop. Nie będziemy jednak po-
mijać innych tematów — zwłaszcza dotyczących nowości, jakie pojawiają się na na-
szym rynku.
Tematem pierwszego numeru jest webdesign, czyli sztuka projektowania
i przygotowywania grafiki na potrzeby internetu. Nie bez przyczyny użyłam tu słowa
„sztuka" — grafików jest wielu, natomiast dobrych grafików niestety dużo mniej...
Zaprojektowanie grafiki na potrzeby WWW to poważne wyzwanie i nie każdy umie
mu sprostać. Mam nadzieję, iż artykuły poświęcone temu zagadnieniu pomogą Warn
w świadomym projektowaniu witryn internetowych. Możecie przeczytać między
innymi o optymalizacji plików graficznych, tworzeniu funkcjonalnego layoutu strony
internetowej i pozycjonowaniu stron.
Oprócz tego zapraszam do wykonywania tutoriaii — w pierwszym numerze pokaże-
my Warn jak tworzyć teksturę przypominającą zardzewiałą powierzchnię, dowiecie się
jak ręcznie wykonać metalowy obiekt pokryty kroplami wody, poznacie tajniki usuwa-
nia efektu mory z zeskanowanych zdjęć.
Nie przeoczyliśmy również nowości, jaka ostatnio pojawiła się na rynku — pakie-
tu Adobe Creative Suitę — w .psd możecie przeczytać o zmianach, jakie firma Adobe
wprowadziła w programie Photoshop CS.
Na dołączonej do pisma płycie CD szczególną atrakcjąjest zestaw 25 zdjęć Royality
Free, które z pewnością przydadzą się Warn przy realizacji własnych projektów.

Życzę miłej lektury

Magdalena Cyrczak
magda@software.com.pl
 Magdalena Tomczyk Danie! Sodkiewicz
Pracuje jako freelancer, od ra- 19 lat, z powołania ;-) uczęsz-
ku również w stałej współpracy cza do Technikum Elektroniczne-
z agencjami reklamowymi. go we Wrocławiu. Oprócz sprzętu
komputerowego interesuje się tak-
że różnego rodzaju programami.
szczególnie związanymi z tworze-
niem stron internetowych i grafiką

Mariusz Dubielecki (Akira) Dariusz Pasturczak

Technik-Informatyk, interesuje się Grafiką zajmuje się od przeszło
tworzeniem stron WWW, anima- 10 lat. Z Photoshopem pracuje od
cji, psychologią, muzyką rockową, sześciu lat. Interesuje się zarów-
pisaniem, szeroko pojętym spor- no grafiką 2D jak i 3D. także ani-
tem ze szczególnym uwzględnie- macją. Obecnie pracuje jako Fre-
niem i praktykowaniem kulturysty- elancer wykonując rozmaite pro-
ki i lekkoatletyki. jekty graficzne.

Rafał Dukaczewski Łukasz Pabian

Photoshopa używa od 6 lat. Zaj- Grafiką komputerową interesuje
muje się tworzeniem grafiki do się od kilku lat. W swoich ilustra-
celów reklamowych, projektowa- cjach stara się przekazywać to co
niem stron internetowych. logo- w danej chwili odczuwa, posługu-
typią. jąc się abstrakcyjnym wyrazem
przestrzeni, formy oraz koloru.
Większość jego prac można zoba-
czyć na stronie www.insane.all.pl

Piotr Horodyński Magdalena Cyrczak

Absolwent Akademii Sztuk Pięk- Grafikąi projektowaniem witryn in-
nych w Łodzi. Dziedzinąjego dzia- ternetowych zajmuje się od oko-
łalności jest malarstwo, grafika tra- ło 2 lat.
dycyjna i komputerowa, multime- Portfolio: www.infranet.pl/magda
dia i animacje.

Aleksandra Kot Waldemar Pruss

Absolwentka Wydziału Geografii Autor tutorialu p.t. Zardzewia-
i Studiów Regionalnych Uniwesy- ia tekstura.
tetu Warszawskiego, z zamiłowa-
nia podróżniczka i fotograf, gra-
fiką komputerową (Photoshop,
Flash, Bryce. Painter) zajmuje się
od dwóch lat.

Łukasz Zając Trejderowski Tomasz

Freelance designer z ponad dwu- Z wykształcenia metalurg, z zawo-
letnim doświadczeniem w projek- du programista, webdesigner i wy-
towaniu graficznym i projektowaniu kładowca, z zamiłowania —pisarz.
stron internetowych. Pracuje jako wolny strzelec, two-
rząc serwisy internetowe, progra-
my i aplikacje oraz wykładając na
kursach komputerowych.

Marcin Sawicki Lech Jaszowski

Student III roku informatyki. Grafi- Fotograf, nauczyciel w Policealnym
ką zajmuje się od niedawna bo od Studium Fotograficznym, wykła-
ok. 1.5 roku, w chwili obecnej po- dowca w firmie informatycznej.
znaje Flasha. W swoich obecnych
pracach wykorzystuję Photoshopa
7. Photolmpact 8. FreeHand MX
oraz Flash MX. W przyszłości pla-
nuje poznać tajniki tworzenia 3D.

Tomasz Zelek Michał Szpilewski

Student drugiego roku Politechniki Koszalińskiej. Na co Grafiką zajmuje się od 5 lat, gównie na potrzeby poligrafii,
dzień pracuje m.in. jako grafik, zajmując się głównie two- od 2 lat współtworzy jedną z najdynamiczniej rozwijających
rzeniem stron WWW. Prowadzi serwis poświęcony Photo- się galerii internetowych —digart.pl
shopowi — www.graffik.pl.

psi
luty/marzec 2004
 STYCZEŃ

Temat numeru — WEBDESIGN

Tworzymy menu
DANIEL SODKIEWłCZ

Kolory na WWW
TOMASZ TREJDEROWSKI

Layout
MAGDALENA TOMCZYK

Optymalizacja grafiki
MICHAŁ SZPILEWSKI

Pozycjonowanie stron WWW

MARCIN SAWICKI

Interfejs 3D
ŁUKASZ FABIAN

Projekt: Okładka EFEKTY

ŁUKASZ FABIAN
Efekt termowizji
MARIUSZ DUBIELECKI
NARZĘDZIA

Narzędzia selekcji
TOMASZ ZELEK

Jak zrobić własny pędzel

ŁUKASZ ZAJĄC Krople wody i nie tylko.
MAGDALENA CYRCZAK

FOTOGRAFIA CYFROWA Motyl

RAFAŁ DUKACZEWSKI
Usuwanie efektu mory
LECH JASZOWSKI
KLASYCZNE EFEKTY
Fotografia cyfrowa
Kupujemy aparat Zardzewiała tekstura
DOMINIK MACIASZEK WALDEMAR PRUSS

luty/marzec
 •
ai

SYLWETKA

Bartek Kozłowski

NOWOŚCI jest wydawany przez

Software-Wydawnictwo Sp. z o.o.
Photoshop CS — co nowego? Redaktor naczelna:
DARIUSZ PASTURCZAK Magdalena Cyrczak
design@software.com.pl
Producent:
Marta Kurpiewska,
marta@software.com.pl
Opracowanie CD:
Magdalena Cyrczak
design@software.com.pl
Skład:
Agnieszka Wawrzyniecka,
agaw@software.com.pl
Projekt graficzny okładki:
RECENZJE Łukasz Pabian,
insane@all.pl
Piuginy Projekt typograficzny okładki:
•- DARIUSZ PASTURCZAK Marzena Turek-Gaś
marzenat@software. com.pl
Książki Dział reklamy:
• MAGDALENA CYRCZAK reklama@software.com.pl
PIOTR HORODYŃSKI tek: (22)860 18 79
Prenumerata:
Tablety Marzena Dmowska,
DARIUSZ PASTURCZAK pren@software.com.pl
tek: (22) 860 17 67
PIOTR HORODYŃSKI
Adres korespondencyjny:
GALERiA Software-Wydawnictwo Sp. z o. o.,
00-190 Warszawa, ul. Lewartowskiego 6
e-mail: psd@software.com.pl,
Galeria digąrt.pl www.psdmag.org
tel. (22) 860-18-81, fax (22) 860-17-71
POWSTAŁA PRZY WSPÓŁPRACY Z
Wyprodukowano w Polsce
Druk: Stella Maris

W Konkurs Redakcja dokfada wszelkich starań, by publikowane w piśmie i na

towarzyszących mu nośnikach informacje i programy były poprawne,
ROZWIĄZANIE KONKURSU jednakże nie bierze odpowiedzialności za efekty wykorzystania ich;
nie gwarantje także poprawnego dziafania programów shareware,
freeware i public domain. Uszkodzone podczas wysytki ptyty
„POCZTÓWKA Z WAKACJI" wymienia redakcja,
Wszystkie znaki firmowe zawarte w piśmie są własnością odpo-
wiednich firm i zostały użyte wyłącznie w celach informacyjnych.
Deklarowana wysokość nakładu obejmuje również dodruki.
Redakcja nie udziela pomocy technicznej w instalowaniu O
i użytkowaniu programów zamieszczonych na płycie CD Ć)
POZNAJEMY PHOTOSHOPA dostarczonej z pismem.

-o
Płytę CD dołączoną do magazynu przetestowano programem
AntiWenKit firmy G DATA Software Sp. z o.o. /l

p
* FAQ Sprzedaż aktualnych lub archiwalnych numerów pisma po innej
cenie niż wydrukowana na okładce — bez zgody wydawcy—jest
działaniem na jego szkodę i skutkuje odpowiedzialnością sądową.
"' MARCIN WARDĘGA

I? Interfejs

?
luty/marzec 2004
 Opis CD
DEMO
Ultimate Paint v2.83 (Win)
Program do obróbki obrazu, którego funkcjonalność moż-
na rozszerzyć poprzez pluginy. Umożliwia rysowanie
i edycję własnych obrazów, tworzenie stron HTML ze zdję-
ciami, przesyłanie grafik e-mailem, robienie zrzutów ekra-
nu oraz ustawianie tapet,
strona producenta: http://www.ultimatepaint.com
Universe Image Creator 1.63 (Win)
Program pozwalający na tworzenie realistycznych obra-
zów przypominających przestrzeń kosmiczną: planety,
gwiazdy, rozbłyski świetlne i galaktyki.
strona producenta: http://www.diardsoftware.com
WERSJA 30-DNIOWA
Adobe Photoshop 7.0 (Win/Mac)
30-dniowa wersja sztandarowago programu do tworzenia i edycji grafiki,
strona producenta: http://www.adobe.com
FREEWARE
Adobe Acrobat Reader 5.0.5 PL (Win/Mac)
Program umożliwiający przeglądanie dokumentów zapi-
sanych jako PDF (Portable Document Format),
strona producenta: http://www.adobe.com
VCW VicMan's Photo Editor 7.2 (Win)
Darmowy program do obróbki obrazów o ciekawym i wy-
godnym interfejsie użytkownika. Jak każdy tego typu pro-
gram, pozwala zeskanować i obrobić zdjęcie. Efekty i fil-
try tworzy się przez podanie wzoru matematycznego, któ-
ry modyfikuje współrzędne na obrazie,
strona producenta: http://www.vicman.net
PLUGINY
Andrew's plugins (Win)
Zestaw przykładowych gradientów, styli, pędzli, wzorków,
pluginów i efektów — współdziałających z Photoshopem.
strona producenta: http://www.graphicxtras.com
Mystical Lighting (Win/Mac)
E> Plugin pozwalający na wprowadzenie realistycznych efek-
o
cb tów świetlnych. Zawiera 16 efektów wizualnych oraz takie
ra
-o udogodnienia jak: możliwość pracy na warstwach, nieogra-
w
CL niczone cofanie czynności i maskowanie,
strona producenta: http://www.autofx.com
DODATKI
25 ZDJĘĆ ROYALITY FREE od firmy UCE
www.uce.pl
luty/marzec 2004
PhotoFrame 2.5 (Win/Mac)
PhotoFrame pozwala na projektowanie wysokiej jakości
ramek i obramowań dla Twoich obrazów. Można wybrać
ramkę z gotowych szablonów lub zrobić własną. Aplika-
cja posiada efektz zmiany koloru, trybu mieszania, cienia,
płaskorzeźby i wiele innych,
strona producenta: http://www.extensis.com
Pro Motion
Program do edycji grafiki - idealny do tworzenia grafiki do
gier, ikon, a także animacji.
strona producenta: http://www.cosmigo.com
dfoto Klient
Program dfoto.klient to narzędzie, które ma ułatwić prze-
glądanie (a w kolejnych wersjach również zarządzanie)
kolekcji fotografii, edycję plików cyfrowych oraz zama-
wianie odbitek w serwisie dfoto.pl. Program wyposażono
m.in. w funkcję bezstratnego obrotu plików jpg, seryjne-
go skalowania fotografii, przycinanie do formatów cyfro-
wych i tradycyjnych (możliwość wyboru proporcji kadro-
wania 2:3 lub 3:4, korektę barwy, kontrastu, nasycenia.
Program obsługuje następujące formaty: JPG, TIF, BMP,
PCX, PNG, TGA
strona producenta: http://www.dfoto.pl
Page Curl 1.2
Plugin umożliwiający stworzenie efektu zawiniętego rogu
kartki. Szersza recenzja wewnątrz numeru (str. 29)
strona producenta: http://www.avbros.com
Puzzle Pro 2.0
Plugin firmy AV Bros dający efekt układanki z puzzli. Szer-
sza recenzja wewnątrz numeru (str. 29)
strona producenta: http://www.avbros.com
Filmy instruktażowe i pliki źródłowe pomocne przy wyko-
nywaniu ćwiczeń zawartych w magazynie.
(Cd2)
!r OKŁADKA

W^r i i i
20 min

pliki

Łukasz Pabian

Wielokrotnie zdarza się, że współczesnym twórcom przestaje już wystarczać tylko Photoshop.
Dlatego sięgają do zupełnie innych programów tak by ich projekty nabrały zupełnie nowego
wyrazu. Łącząc techniki stosowane w grafice trójwymiarowej oraz ogromne możliwości Adobe
Photoshop można poszerzyć swoje grafiki o zupełnie nowe horyzonty.

Tło

Tworzymy nowy plik PliloNowy... (File>New...) o wymiarach: dłu-

gość 990 pikseli i wysokość 1400 pikseli. Następnie wypełnij ca-
łą powierzchnie obrazka gradientem linearnym (pionowo) od koloru
RGB: [212,227,253] do koloru RGB: [240,245,255].

Niebo w tle

Pobieramy fotografię nieba i nanosimy ją na nasz obrazek, po-

przez przeciągnięcie warstwy z pliku jpg na okno z naszą grafiką.
Wyrównujemy zdjęcie względem obrazka i dopracowujemy jego ko-
lorystykę. Wybieramy z menu Obrazek>Dopasuj>Kolor selektywny
(lmage>Adjust>Selective Color), następnie w oknie Kolor selektyw-
ny {Selective Color) wybieramy Niebieskości (Blues), ustawiamy su-
waki na wartościach CMYK: [+79%][+6%][+14%][+19%]. Zmieniamy
tryb krycia na Ostre światło (Hard Lighf). Wybieramy gumkę [E],
zmieniamy na jeden ze zmiękczonych pędzli i ustawiamy jej rozmiar
na około 450 pikseli. Wycieramy dolną cześć zdjęcia, tak by zosta-
ło tylko niebo. Wybieramy z menu Filtr>Artystyczny>Suchy pędzel
(Filter>Artistic>Paint Daubs), ustawiamy suwaki: Rozmiar pędzla
(Brush size) na 12, Szczegół (Sharpness) na 7. Na kolejnej warstwie
rysujemy gradient linearny z dołu od koloru białego do przezroczy-
stości, do połowy wysokości.

Świetliste linie

E1 Aby wykonać łuki należy stworzyć zaznaczenie [/W] w postaci piono-

o

I
wej elipsy, na nowej warstwie wypełnić je jasnym kolorem, następnie
przesunąć zaznaczenie tak by powstał najcieńszy łuk. Klawiszami
•o [Cf/7]+[X] wycinamy niepotrzebną przestrzeń. Kopiujemy tę warstwę
czterokrotnie poprzez przeciągnięcie jej na ikonę tworzenia nowej
warstwy w zakładce Warstwy (Layers). Począwszy od najwyższej
warstwy każdy łuk poddajemy filtrowi Rozmyciu gaussowskiemu
Filtr>Rozmycie gaussowskie (Gaussian Biur (Filter>Blur>Gaussian
Biur), przy czym każda niższa warstwa powinna mieć większy
współczynnik rozmycia. Pierwsze nałożenie filtru powinno być z pa-
rametrem Promień (Radius) 2 piksele. Można zgrupować warstwy

luty/marzec 2004
 C

lub też połączyć je w jedną. Następnie powielamy to zgrupowanie

lub warstwę i obracamy o kilka stopni Edycja>Przekształć>Obróć
(Edit> TransforrroRotate).

Nałożenie trójwymiarowych obiektów

Pobieramy z CD obrazki kuia.tif, frawa.tif (pliki wygenerowane przez

3ds max). Nanosimy kule i trawę na obrazek, tak by kula była na
niższej warstwie. Ustawiamy trawę, tak by jej dół wychodził z góry
kuli — z otworu. Gumką należy usunąć niepotrzebny fragment
podstawy trawy, tak by sprawiała wrażenie wyrastania z kuli.

Nałożenie masek

Pobieramy z CD obrazki maska1.tif orazmaska2.tif (p\\k wygene-

rowany przez 3ds max oraz Poser). Za pomocą narzędzia Lasso
(Lasso Tool) [L] wycinamy tylną część głowy, tak by powstał nam
kontur zarówno w jednej, jak i drugiej masce. Nanosimy ma-
ski na nasz obrazek ustawiając je na cienkich „gałęziach" wśród
traw. Możliwe, że będzie potrzebne obracanie warstw by dopaso-
wać je do pozostałych części Edycja>Przekształć>Obróć (Edit>
Transform>Rotate). Ciemne oczy wykonamy na nowej warstwie, na-
rzędziem Pędzel (Brush) [B] zamalujemy wszystkie oczy kolorem
RGB: [50,85,129], następnie zmieniamy tryb krycia miedzy warstwa-
mi na Mnożenie (Multiply).

Powielenie elementów

Łączymy wszystkie warstwy — maski, ciemne oczy, kulę, tra-

wę — w jedną warstwę. Następnie powielamy ją i przenosimy war-
stwę poniżej tej z „kwiatem". Przesuwamy ją w prawo i powyżej.
Zmniejszamy o około 85% Edycja>Przeksztalć>5kaluj (Edit>
Transform>Sca!e) i nanosimy na tę warstwę efekt rozmycia
gaussowskiego Fi!r>Rozmycie>Rozmycie gaussowskie (F//fer>
Btur>Gaussian Biur). Powtarzamy te czynności jeszcze dwa razy,
za każdym razem zwiększając stopień rozmycia gaussowskiego.
Aby uzyskać cienie pod kulami, narzędziem Pędzel (Brush) [B] typu
miękkiego na nowej warstwie punktowo będziemy zaznaczać cienie.

Rysowanie motyla

Narzędziem Pędzel [B] o małym przekroju obrysujemy skrzydło mo-

tyla. Następnie zewnętrzną część skrzydła zamalowujemy czarnym
kolorem, a wewnętrzną ciemnym niebieskim RGB: [38,57,152], Aby
uzyskać nierówne rozprowadzenie koloru należy zastosować pędzle
o nierównych krawędziach. Na nowej warstwie, jasnym niebieskim
RGB: [17,170,245] zamalowujemy część powierzchni, na której jest
niebieski (ciemny). Posługując się narzędziem Rozmycie (Smudge)
[R] uzyskamy rozmazanie pociągnięcia. Powielamy tę warstwę i na-
nosimy na niąfiltr Rozmycie gaussowskie. Zmniejszamy przezro-
czystość do 30%. Kolorem RGB: [17,142,222] rysujemy drobne linie
di
pędzlem [8] najlepiej o jak najmniejszym przekroju. Można jeszcze
urozmaicić skrzydła poprzez malowanie pędzlami o nieregularnych •o

końcach. Łączymy warstwy składające się na skrzydła i powielamy

tę warstwę. Narzędziem Zniekształć — Edycja>Przekszta!ć>Znieksz
tałć (Edit>Transform>Disort) zmieniamy ułożenie drugiego skrzydła.
Na kolejnej warstwie dorysowujemy jeszcze główkę i czułki. Warstwy
te można połączyć i zmieniać ich kolorystykę za pomocą polece-
nia Barwa/Nasycenie (Hue/Saturation) — Obrazek>Dopasuj>Barwa/
Nasycenie (lmage>Adjust>Hue/Saturation). ®

luty/marzec 2004
 WEBDESIGN

15 min

a.
film
TWO
pliki

Daniel Sodkiewicz

Nie musisz znać Fiasha aby stworzyć ciekawe i animowane menu do własnej strony www.
Jedyne czego będziesz potrzebować to programu graficznego Photoshop w minimalnej wersji 5.5
i chęci przeczytania tego artykułu. Tutorial ten przeprowadzi Cię przez proces tworzenia menu
za pomocą narzędzi Slice, skryptów Rollover i nieskomplikowanego kodu HTML. Jeżeli nie masz
zielonego pojęcia o choćby jednym z powyższych pojęć, nie musisz się przejmować — poniższe
kroki opisujące dokładnie każdą czynność, przeprowadzą Cię przez cały ten proces.

Cel, Tworzymy przycisk.

Menu, jakie stworzymy, będzie się składać z kilku połączonych ze so-

bą i utrzymanych w nowoczesnym stylu przycisków. Po najechaniu
kursorem na wybrany guzik, zostanie on podświetlony, sam zaś przy-
cisk będzie sprawiał wrażenie trójwymiarowego. Aby rozpocząć pracę
uruchamiamy program Photoshop.
Pierwsze co należy ustalić to wielkość naszego przycisku. Jeżeli nie
Wysol-o-c 393 mamy konkretnego pomysłu, wybieramy dość standardowe rozmia-
Rozdzielcza 11 ry 121 na 17 pikseli. Kolejny wybór to kolor tła, w tym przypadku pro-
W\ Zachowaj proporcje ponuję jasny odcień szarości np. #D4D4D4 (HTML Code). Aby nadać
0 Metoda POfiownegoprubko^nd Dwu ze cienna V- naszemu rysunkowi efekt trójwymiarowości należy narysować przy
górnej i lewej krawędzi jasną linię o szerokości 1 piksela np. w kolorze
o jasnej barwie: #F3F3F3. Zapisujemy nasz przycisk w wysokiej ja-
kości pliku JPG, będzie on służył jako szablon do tworzenia kolejnych
klawiszy w menu.

Napisy

W zależności od tego z jakich działów składa się nasza strona, two-

rzymy odpowiednie napisy na przyciskach. Korzystając z przygotowa-
nego wcześniej szablonu nanosimy na kolejne przyciski nazwy dzia-
łów. W przedstawionym przykładzie menu będzie się składać
Dl
z sześciu guzików: lndex, Newsy, Książki, Historia, Teksty i Kontakt.
T3 Bardzo ważnym elementem, mającym ogromny wpływ na końcową
?Iridex - - •• a • • - -i
estetykę naszego menu jest użyta w nim czcionka. Godnymi polece-
nia, eleganckimi krojami sąm.in. Tahoma i Verdana. Każdy stworzo-

ń
ny przycisk zapisujemy osobno w jednym katalogu, staramy się także
aby napisy na każdym z rysunków znajdowały się w tej samej odległo-
ści od górnej, dolnej i (szczególnie) lewej krawędzi. Przed zapisa-
niem obrazka musimy spłaszczyć wszystkie warstwy, poprzez menu:
Warstwa>Sptaszcz obrazek (Layer>Flatten Image).

10
luty/marzec 2004
Składamy menu

Otwieramy wszystkie utworzone przyciski, a następnie ustalamy na

jakim tle zostaną one umieszczone. W naszym przykładzie będzie to
niewielki prostokąt o wymiarach: 123 na 109 pikseli. Przy przyciskach
o wymiarach 121 na 17, po lewej i prawej stronie przycisków będzie
wystawał 1 piksel tła, zaś w pionie pomiędzy kolejnymi przyciskami,
oraz na samej górze i dole, także będzie jeden piksel tła. Aby nasz
podkład odróżniał się od samych guzików najlepiej nadać mu jakiś
ciemniejszy kolor, np. cierny odcień szarości #9C9C9C. Na utworzo-
ne tło wklejamy wcześniej stworzone przyciski, ustawiając je,
każde w odległości o 1 piksel od krawędzi i następnego przycisku.
Aby dokładnie móc rozmieszczać wklejone obiekty, należy maksymal-
nie powiększyć (zrobić zbliżenie) naszego obrazka. Po złożeniu cało-
ści, zapisujemy menu w osobnym folderze.

Pierwsze cięcie

Wszystkie wersje Photoshopa, począwszy od numeru 5.5, posiada-

ją bardzo przydatną dla webmasterów funkcję pozwalającą pociąć ob-
razek na mniejsze części i zapisać go w formie kodu HTML z tabelka-
mi wypełnionymi naszym pociętym obrazkiem. Przed przystąpieniem
do tego zadania należy upewnić się czy w menu Widok (View) jest za-
znaczona opcja Dodatkowe (Extras) (można ją uaktywnić skrótem
Index
klawiszowym [Ctrl\+[H\). Następnie, za pomocą narzędzia Odcięcie
(Slice) (skrót klawiszowy [K]), dokładnie obramowujemy każdy z przy-
Newsy
cisków. Aby zrobić to jak najdokładniej, należy skorzystać z maksy-
malnego powiększenia widoku. Książki
Dokładne wycinanie kolejnych obrazków jest bardzo ważne, tutaj bo-
Historia
wiem wyznaczamy aktywny obszar naszych przycisków. Niezbędna
jest więc dokładność co do piksela. Pocięcie naszego obrazka koń-
czymy zapisując go poprzez polecenie: Plik>Zapisz dla Weba
Teksty
(File>5ave for Web), potwierdzamy czynność przyciskiem [Zapisz
(Save)].
Kontakt

HTML

Chwilowo możemy zamknąć Photoshopa, przechodzimy teraz do

stworzonego przez Photoshopa pliku *.html (który przed chwilą zapi-
sywaliśmy), gdzie znajduje się nasze menu.
Photoshop stworzył plik z rozszerzeniem *.html i folder, w którym znaj-
duje się nasz pocięty obrazek. Otwieramy teraz ten plik html, za po-
mocą zwykłego notatnika lub jakiegoś edytora html (Dreamweaver, Index
Pajączek). Na początku w znaczniku meta zamieniamy kodowanie
strony z charset=windows-1250 na charset=iso-8859-2. Pierwszy po-
Newsy
ważniejszy problem na jaki się natkniemy to wykorzystanie naszych
pociętych rysunków jako hiperłączy (linków). Po wpisaniu polecenia:
Książki
Historia
J
<a href=""> </a>
Teksty s1
pomiędzy wybranym rysunkiem np. tak: q

<a href="">
Kontakt
I
<IMG SRC="Obrazki/menu_03.gif" WIDTH=121 HEIGHT=17
ALT="">

okaże się, że w przeglądarce internetowej menu po prostu się roz-

sypało. ,

11
luty/marzec 2004
 WEBDESIGN

css
Po pierwsze, nie możemy pozwolić na odstępy pomiędzy wpisywa-
nymi kodami, każda bowiem spacja jest postrzegana jako znak, a to
burzy układ całej tabeli. Szczególnie trzeba uważać, aby nie było od-
stępów pomiędzy poleceniami <a h r e f = " " > i </a>, a znajdującym
się wewnątrz nich rysunkiem.
Aby obrazki z hiperłączami nie były w żaden sposób zniekształcane
musimy utworzyć style. Skorzystamy zatem z Kaskadowych Arkuszy
Stylów— Cascading Style Sheets (CSS).
Stosowanie styli uniezależni nas od rodzaju przeglądarki, jakiej bę-
dzie używała osoba oglądająca nasze menu, gdyż w stylach mo-
żemy zdefiniować np. wielkość fontu, marginesy, kolor tła dla po-
szczególnych elementów. Style również umożliwiają szybkie zmia-
ny w formatowaniu wielu elementów HTML, gdyż zmiana ta odbywa
się wówczas w jednym miejscu. Aby wprowadzić style do naszego
dokumentu w pliku *.html z tabelą, pomiędzy znaczniki HEAD nale-
ży wpisać:

<LINK href="style.css" rel="StyleSheet"

type="text/css">

Następnie tworzymy plik tekstowy, w którym umieszczamy linijkę:

IMG {border=0 p a d d i n g : 0px, Opx, Opx, Opx} —patrz
screen. Następnie zapisujemy go jako style.css w tym samym kata-
logu, co odwołujący się do niego plik *.html.

Ciąg dalszy pracy z HTML-em

Musimy teraz sprawdzić jakie nazwy posiadają rysunki przedsta-

wiające nasze przyciski, które zostały pocięte i wrzucone do folde-
ru Obrazki. Aby to zrobić otwieramy nasz plik *.html w przeglądarce,
następnie najeżdżamy na każdy z przycisków menu kursorem i kli-
kamy na nim prawym przyciskiem myszy, wybieramy z menu opcję
„Właściwości". Zapamiętujemy nazwę każdego z przycisków (patrz
ilustracja), po czym przechodzimy do kodu html i przyporządkowu-
jemy każdemu z nich hiperłącza — identycznie jak przedstawiono to
w kroku 6.
Możemy teraz sprawdzić poprawność działania naszego dzieła
w przeglądarce internetowej. Jeżeli występują jakieś problemy w wy-
świetlaniu grafiki, najprawdopodobniej w kodzie HTML zrobiliśmy nie-
potrzebny odstęp (spację) lub niepoprawnie stworzyliśmy plik *.css.
Jeżeli wszystko działa, czas na ożywienie naszego menu.

RoIIover

Do tego celu zastosujemy najprostszy skrypt typu Rollover, któ-

ry zmienia grafikę w momencie, gdy kursor znajdzie się nad nią.
Najpierw jednak w Photoshopie otwieramy rysunki przedstawiające
nazwy poszczególnych działów (te, którym przed chwilą nadawaliśmy
hiperłącza) i przekształcamy je w taki sposób jaki chcemy, aby wyglą-
dały po najechaniu na nie strzałką kursora.
f Stworzone przyciski zapisujemy w istniejącym już folderze Obrazki,
Ó) nadając im nazwy np. newsy.gif. indexy.gif itd., nie zmieniając oczywi-
ra
Index ście tych pociętych wcześniej przez program. Jeżeli nie mamy pomy-
•a słu na zmianę wyglądu poszczególnych przycisków, polecam: prze-
kreślenie wyrazu, pogrubienie czcionki czy przedstawioną w przykła-
dzie zmianę koloru tła (np. na jasno-żółty #EEEEA6). Ważne, żeby
nie przesadzić z ilością efektów rollover, gdyż wówczas nasza strona
może zacząć przypominać jarmark. W folderze Obrazki powinny za-
tem znaleźć się po dwa GIF-y do każdego hiperłącza: jeden ze sta-
nem przycisku przed, a drugi po najechaniu na niego kursorem.

12
luty/marzec 2004
 dl

Zmiana koloru przycisków

W Photoshopie otwieramy pliki z przyciskami, znajdującymi się

w stworzonym przez program folderze o nazwie Obrazki. Otwieramy
wybrany przycisk, który został zapisany z rozszerzeniem *.gif, np. Inde i
menu_03.gif. Format ten (GIF) zajmuje mało miejsca, jednak unie-
możliwia on dodawanie do obrazka dodatkowych kolorów. Musimy
więc stworzyć w Photoshopie nowy obraz o identycznej wielko-
ści jak nasz przycisk (wielkość sprawdzamy poleceniem Obrazek>
Wielkość obrazka... (lmage>lmage Size); przy dokładnym wycię-
ciu przycisków (Krok 5), obrazek powinien mieć rozmiary 121 na 17
pikseli, aby wyeliminować pomyłkę, sprawdzamy wielkość każde-
go przycisku) a następnie kopiujemy GIF-a na nowo stworzone tło. Index

El-
Za pomocą narzędzia o nazwie Różdżka (skrót klawiszowy [W]), za-
znaczamy całe szare pole przycisku i kolorujemy je na żółty kolor
#EEEEA6).
Pokolorowane przyciski zapisujemy w folderze Obrazki, z dowolnym
rozszerzeniem (najlepiej GIF lub JPEG), ale o mówiącej o ich za-
wartości nazwie (np. index.jpg).

RoIIover w HTML
<a lirei=""
Wracamy do edycji kodu HTML. Aby skrypt zadziałał np. na napisie onMouseOvei=mdex.src="Obrazki/index.ipg"1
onMouseOut=index.src="Obrazki/!liemi_03.giP">
„lndex" należy wpisać: <IMG SRC="Obraz3d/memi_03.gif" name="ujde.V
WIDTH=121 HEIOHT=17 ALT=" ">

<a h r e f = " "

onMouseOver='index.src="Obrazki/index.jpg"'
onMouseOut='index.src="Obrazki/menu_03.gif"'>
<IMG SRC="Obrazki/menu_03.gif" name="index"
WIDTH=121 HEIGHT=17 ALT="index">

Gdzie:
newsy.gif - przycisk po najechaniu kursora,
menu_03_03.gif- przycisk po opuszczeniu przez kursor obszaru hi-
perłącza, czyli podstawowa wersja rysunku nazwy działu.
Aby móc używać na jednej stronie kilku efektów typu rollover musi-
my używać różnych nazw poszczególnych „akcji" dla każdego z hi-
perłączy. W tym przypadku rollover dotyczący przycisku „lndex" na-
zwiemy np. index.src, co musimy podać w sekcji name="index".
Przepisując powyższy kod należy zwrócić uwagę na znaki: ' oraz ".
Przy niektórych nazwach oba te symbole występują koło siebie i ła-
two się pomylić.

Wstawiamy m e n u na s t r o n ę

W dokumencie html stworzonym przez program Photoshopa, tabelka

z pociętym menu rozpoczyna się od wpisu:

}
<!-- ImageReady Slices (menu_03.gif) --> a kończy na lndex Ol

<!-- End ImageReady Slices -->

o
di
Newsy
Aby więc umieścić nasz rysunek na jakiejś stronie, wystarczy sko-
Książki
- -i
i I
CL
piować w odpowiednie miejsce kod tabeli znajdującej się pomiędzy
wspomnianymi powyżej znacznikami. Historia
Przy przenoszeniu menu do innego dokumentu, należy pamiętać
o dokonaniu odpowiednich zmian w pliku *.css, do którego odwołuje Teksty
się dana strona (wpisaniu linijki: IMG {border=0 p a d d i n g : 0px,
Kontakt
Opx, Opx, Opx}). Pełny kod i rysunki przedstawionego w tutorialu
menu można znaleźć na dołączonej do pisma płycie CD. •

13
luty/marzec 2004
 WEBDESIGN

/z. fizycznego punktu widzenia, kolory to sposób w jaki mózg

/ zzłowieka interpretuje promieniowanie elektromagnetyczne
o dłiinn4ri fali w zakresie 350 do 700 nanometrów. Promie-
niowanie to jest zamieniane na impulsy mózgowe w obrę-
bie siateczki nerwu wzrokowego. Różne kolory są interpre-
towane jako fale o różnej długości. Fale o długości mniej-
szej niż 350 nanometrów to promieniowanie ultrafioletowe
(ang. ultraviolet lub UV), zaś promieniowanie o długości fa-
li wyższej niż 700 nanometrów to promienie podczerwone

I
(ang. infrared lub IR).

KOLORY D Spektrum zakresu długc^, Fal postrzeganych przez oko ludzkie

jako poszczególne kolory

NA WWW
Tomasz Trejderowski

Określenia „kolor" używamy kilkanaście lub kilkadziesiąt razy dziennie, w praktycznie wszystkich aspektach.
Ale czy kiedykolwiek zastanawialiśmy się czym tak naprawdę są kolory i jak ich świadomie używać?

KOŁO BARW
Jest to rozwiązanie umowne polegające na wygięciu
spektrum kolorów zaprezentowanego na powyższej ilustra-
cji, w ten sposób, że czerwień i fiolet stykają się ze sobą.
W praktyce koło kolorów jest użyteczne przy wyjaśnianiu
jakjeden kolorjest powiązany z następnym oraz przy opisie
mechanizmów tworzenia nowych kolorów przez mieszanie
dwóch i więcej kolorów już istniejących.

KOLORY PODSTAWOWE
W życiu codziennym mamy do czynienia z dwoma syste-
mami kolorów.
Dla mediów związanych z przedstawianiem obrazu (mo-
nitory, wyświetlacze LCD, telewizory) obowiązuje system
RGB, którego nazwa powstała od pierwszych liter nazw
tworzących go kolorów podstawowych, w tym przypadku:
czerwonego (red), zielonego (green) i niebieskiego (blue).
Jest to tak zwany addytywny system kolorów. Połącze-
Koło barw nie trzech podstawowych kolorów w tym systemie daje ko-
lor biały.
W przypadku mediów stronicowych (druk, rysunki, malar-
stwo) mamy do czynienia z substraktywnym systemem ko-
lorów, którego nazwa CMYK również utworzona została na
podstawie nazw kolorów, odpowiednio są to: niebiesko-zie-
lony (cyjan), purpurowy (magenta), żółty (yellow) i czarny
(blacK, oznaczony przez K, dla odróżnienia od B — używa-
Ol nego dla oznaczenia koloru niebieskiego, blue w systemie
03
RGB). Połączenie trzech podstawowych kolorów (oprócz)
"O
czarnego w tym systemie, daje w efekcie kolor czarny. Sys-
tem CMYK nadaje się lepiej do opisu barwy w druku, gdzie
rola pochłaniania światła jest realizowana przez farbę dru-
karską, natomiast system RGB nadaje się lepiej do wyświe-
tlania koloru (np. na monitorze), gdzie światło jest emito-
wane.
W tym artykule zajmować się będziemy kolorami na stro-
nach WWW, które są wyświetlane na ekranach monitorów,

14 psd
luty/marzec 2004
paneli LCD i telewizorów, zatem skupimy się wyłącznie na
modelu RGB.
JAK MONITOR WYŚWIETLA KOLORY?
Jeśli przyjrzysz się z bliska monitorowi lub telewizorowi
(w tym pierwszym przypadku niezbędne może okazać się
użycie szkła powiększającego) ujrzysz tysiące kolorowych
(a dokładnie: czerwonych, zielonych i niebieskich) punkci-
ków, pogrupowanych po trzy — po jednym z każdego z wy-
mienionych kolorów. Rozmiar tych punkcików oraz ich ścisłe
upakowanie powodują, że podczas spoglądania na ekran
z normalnej odległości nie rozróżniamy pojedynczych punk-
tów, a raczej nasze oko miksuje je, a my widzimy jeden kon-
kretny kolor.
Właśnie dzięki tej niedo-
v kładności ludzkiego oka, mo-
•\ żliwe stało się zaprezento-
mniejsza liczba podana, tym ciemniej dany kolorowy punkt
świeci. Dla przykładu, układ 0,0,255 oznacza, że punk-
ty czerwony i zielony nie świecą wcale, a niebieski świe-
ci w maksymalnej swojej intensywności — uzyskujemy ko-
lor niebieski. W innym przykładzie, układ 255,255,0 — czyli
punkty czerwony i zielony świecą z maksymalną intensyw-
nością, a punkt niebieski nie świeci wcale - otrzymujemy
czysty żółty kolor. Według analogicznej zasady, nieświece-
nie się żadnego z punktów, czyli układ 0,0,0 — daje kolor
czarny, a świecenie się wszystkich trzech punktów z mak-
symalną intensywnością, czyli układ 255,255,255 — daje
kolor biały. A przynajmniej taki kolor postrzega nasze oko,
gdyż w rzeczywistości to są nadal trzy podstawowe kolory:
czerwony, zielony i niebieski.
„BEZPIECZNE KOLORY
PRZEGLĄDARKI"

I
: ; l| wanie bardzo dużej liczby Określenie to ukute zostało w okre-
sie, kiedy maksimum możliwości kart gra-
Select foreground co tor:
ficznych i monitorów było wyświetlanie
256 kolorów (czasy Windows 3.1 lub na-
wet wcześniejsze). Projektanci pierwszej
':• : | i kolorów przy użyciu trzech
wersji przeglądarek internetowych wyszli
; |
§ podstawowych barw oraz
z założenia, że ok. 40 kolorów jest uży-
B Sposób ; wyświetlania J odpowiednio dobieranych in-
wanych do renderowania elementów sys-
kolorów przez monitor j—/ tensywności świecenia każ-
temowych (okna, klawisze, menu itp.). Po
y dej z tych barw. Każdy wspo-
odjęciu tej liczby od 256 pozostało 216 ko-
mniany punkt może świecić
lorów, stanowiących właśnie ową wspo-
z 256 różnymi intensywno-
mnianą paletę bezpiecznych kolorów
ściami (lub 256 poziomami
przeglądarki.
nasycenia) — od 0, gdzie dany punkt nie świeci wcale, do
255 — w którym to przypadku wybrany punkt świeci ze swo- Czy ma sens ograniczać się więc do sto-
ją maksymalną możliwą intensywnością. sowania na stronach WWW tylko kolorów
Orily Web Lolors
Łatwo jest więc obliczyć, że 256 stanów świecenia każ- należących do tej grupy 216 bezpiecznych
dego z trzech kolorów, przemnożone przez siebie, daje licz- także obecnie, gdy karty graficzne i mo- D Bezpieczne kolory
bę: 256*256*256=16777216. Czyli, wykorzystując niedo- nitory bez problemów wyświetlają obraz,
kładność ludzkiego oka, można (mieszając trzy barwy pod- w 16, 24 czy nawet 32 bitach, składający się z milionów ko-
stawowe) wyświetlić prawie siedemnaście milionów róż- lorów? W tej kwestii zdania są podzielone. Po pierwsze na-
nych kolorów. leży podkreślić, że mówimy wyłącznie o kolorach elemen-
Intensywność świecenia (0-255) każdego z trzech pod- tów niegraficznych (tekst, tło, obramowanie itp.). Obecnie
stawowych kolorów, podaje się w kolejności takiej jak wy- zakłada się, że mniej niż 5% użytkowników na całym świe-
stępują nazwy tych kolorów w nazwie systemu RGB. Czy-
li najpierw podajemy intensywność świecenia koloru czer-
wonego, potem zielonego, a na końcu niebieskiego.SYSTEM Im SZESNASTKOWY

Aby móc zapisywać kolory na stronach WWW,
niezbędne jest poznanie przynajmniej podstaw
szesnastkowego systemu liczbowego, gdyż takim
właśnie operuje się w języku HTML i w arkuszach
CSS. Jakkolwiek, co będzie pokazane w dalszej czę-
ści artykułu, możliwe jest zapisanie każdego koloru
w systemie dziesiętnym, zalecane jest opanowanie
i stosowanie wyłącznie systemu szesnastkowego.
W systemie dziesiętnym podstawą jest liczba
dziesięć. Każdą liczbę można zapisać w postaci ko-
lejnych potęg liczby dziesięć. Przykładowo, liczbę
28 można zinterpretować jako dwa-osiem i zapisać
w postaci: 2x101+8x10"=2x10+8x1=20+8=28.
W systemie szesnastkowym reprezentacja i prze-
liczanie liczby jest identyczne, z jedyną różnicą, że
podstawą tego systemu jest liczba 16. Aby to osią-
gnąć niezbędne jest wprowadzenie dodatkowych
„cyfr", które oprócz podstawowych dziesięciu cyfr
systemu dziesiętnego (0—9) uzupełnią też do 15
wszystkie podstawowe „cyfry" systemu szesnastko-
wego. Mamy więc: A=10, B=11, C=12, D=13, E=14
i F - 15. Znaki od Ado F są traktowane jako brakują-
ce „cyfry" systemu szesnastkowego.
Wiedząc, że jedyną różnicą jest podstawa syste-
mu, bardzo łatwo jest zrozumieć sposób reprezen-
tacji i zapisu liczb w tym systemie. Dla analogiczne-
go przykładu przedstawionego powyżej, można na-
pisać, że 28 m) = 1C(M), co należy rozumieć, iż licz-
bie 28 w systemie dziesiętnym odpowiada liczba 1C
w systemie szesnastkowym. A dlaczego? Wszyst-
ko staje się jasne, jeśli, zgodnie z przekazaną po-
wyżej wiedzą, zinterpretujemy liczbę ICjakojeden-
ce i zapiszemy w postaci 1x16'+Cx16"=1x16+Cx1
={„cyfrze" C odpowiada liczba 12) = 1x16+12x1=16
+12=28.
Łatwo można zauważyć, że w obu systemach ko-
lejne cyfry numeruje się rosnącymi potęgami. Czy-
li liczbę trzycyfrową w systemie dziesiętnym rozbi-
jemy na trzy cyfry, mnożone przez liczbę dziesięć
podniesioną kolejno do potęgi 2 (pierwsza cyfra od
lewej), 1 (druga cyfra od lewej) i 0 (trzecia cyfra).
W systemie szesnastkowym zrobimy tak samo, tyl-
ko, że pierwszą cyfrę z liczby trzycyfrowej przemno-
żymy przez 162, drugą przez 16', a trzecią przez 16°.
Dla liczby czterocyfrowej, rozbitej na cztery cyfry ko-
lejne mnożenia w obu systemach będą przez 10 lub
16 podniesione do potęgi 3, potem 2, 1 i na końcu
do potęgi 0.
Łatwo zauważyć, że 255(m = FF(m). Tu od razu
mamy odpowiedź dlaczego intensywność maksy-
malna to właśnie liczba 255. Konstrukcja kompute-
rów wymusza stosowanie systemu szesnastkowego
(lub dwójkowego) w praktycznie każdym przypad-
ku, zamiast systemu dziesiętnego. A liczba 255 to
w systemie szesnastkowym największa liczba, jaką
można zapisać przy użyciu tylko dwóch „cyfr".
Warto jeszcze pamiętać, iż liczby jednocyfro-
we (w systemie szesnastkowym) poprzedza się ze-
rem -jest to takie jakby uzupełnienie, aby niezależ-
nie od tego czy nasycenie danej barwy podstawo-
wej jest niskie (np. 1O(mi = A(W:) czy wysokie, zawsze
była ona zapisywana jako liczba dwucyfrowa. Uży-
te w artykule przykładowe kolory, byłyby więc zapi-
sane w systemie szesnastkowym jako: 0000FF (nie-
bieski, co odpowiada modelowi 00, 00, 255 nasyce-
nia kolejno składowych czerwonej, zielonej i niebie-
skiej) lub FFFFOO (żółty, co odpowiada modelowi
255, 255, 00).

? 15
luty/marzec 2004
 WEBDESIGN
cie nadal korzysta ze sprzętu ograniczonego do wyświetla-
nia maksymalnie 256 kolorów. To jeden z argumentów prze-
mawiający za tym, żeby nie przejmować się już obecnie
„bezpiecznymi" kolorami i stosować takie, na jakie w danym
projekcie jest zapotrzebowanie. Ponadto udowodniono,
że w ekstremalnych warunkach (na starym i egzotycznym
sprzęcie oraz w nietypowej konfiguracji karty graficznej) na-
wet „bezpieczne" kolory przestają być bezpieczne i nie są
wyświetlane prawidłowo.
Reasumując, problem nieprawidłowego wyświetlania ko-
lorów z większej palety niż 216 wydaje się już być przeszło-
ścią. Nie mniej nie można pominąć tego zagadnienia w ar-
tykule o kolorach na stronach WWW—jako, że może to być
rozwiązanie niektórych problemów z wyświetlaniem stron
internetowych, zwłaszcza na starszych komputerach.
NAZWY KOLORÓW
Kilka lat temu, kiedy przeglądarki firmy Netscape były
wiodącymi na rynku, firma ta zdefiniowała 140 angielskich
nazw kolorów, które mogły być stosowane zamiast warto-
ści szesnastkowych. W wielu przypadkach nazwy te były
bardzo dziwne, jak na przykład „BlanchedAlmond", „Mediu-
mAquamarine" czy „MediumGolfenRodYellow". Ten spo-
sób określania kolorów nie wszedł do oficjalnych specyfi-
kacji języka HTML, ale powinien być prawidłowo interpreto-
wany przez większość przeglądarek nawet w najnowszych
wersjach.
Obecnie zdecydowanie zaleca się jednak stosowanie wy-
łącznie notacji szesnastkowej.
Pytanie więc, po co wspominać jeszcze o tak zamierz-
chłym i niezalecanym sposobie określania koloru? Otóż,
ma on wymiar wyłącznie komercyjny. Kiedy będziesz pa-
rał się tworzeniem serwisów internetowych w sposób profe-
sjonalny (zarobkowo), przyjdzie do ciebie klient i powie, że
chce mieć odcień w kolorze rdzawo-śliwkowym. Nie licz na
to, że powie „poproszę o treść w kolorze #ca459f". Dobrze
jest wtedy znać jedną, ustaloną wartość szesnastkową od-
powiadającą danemu kolorowi.
MIESZAMY KOLORY
W zasadzie, właśnie ta część projektowania interfejsu
graficznego (wyglądu) strony WWW jest najważniejsza i za-
razem najtrudniejsza. Właściwy wygląd strony i dobór kolo-
rów to sprawa, która „na dzień dobry" przyciąga lub odrzu-
ca odwiedzającego.
Trudno jest udzielić właściwej i pełnej odpowiedzi na py-
tanie — ile kolorów użyć przy projektowaniu danego serwi-
su. Generalnie jednak obowiązuje jedna zasada, iż znacz-
nie większe ryzyko niepowodzenia (osiągnięcia brzydkiego
efektu końcowego) jest w przypadku użycia zbyt dużej ilości
kolorów niż gdy użyje się zbyt małej ilości kolorów.
Strona zawierająca zbyt dużo kolorów lub zbyt dużo mie-
szanin (grup) kolorów jest przede wszystkim nużąca i mę-
cząca dla oczu. Ponadto znacznie utrudnia odnalezienie
informacji, której odbiorca poszukuje w naszym serwisie.
A nie wolno zapominać, że społeczność internetowa jest
społecznością informacji. Oprawa graficzna, jakkolwiek
piękna, rozbudowana i dopracowana w szczegółach, za-
wsze pozostanie tylko dodatkiem do nośnika informacji, ja-
kim powinna być nasza strona WWW.
Z drugiej strony, oprawa graficzna zawierająca zbyt ma-
ło kolorów może być postrzegana jako nudząca, pusta, czy
niedopracowana. Jednakże nie zawsze tak musi być. Cza-
sami można uzyskać interesujące wyniki przy zastosowaniu
16 psd
luty/marzec 2004
ascezy kolorystycznej, podczas gdy zbyt wielka ilość kolo-
rów prawie zawsze prowadzi do niepowodzenia.
DOBÓR KOLORÓW
W tym miejscu mowa już o sytuacji, w której twórca wy-
brał jeden podstawowy kolor, którego będzie używał w ser-
wisie. Omówimy kilka metod doboru kolorów uzupełniają-
cych do wybranego koloru podstawowego.
Gradient barw
Jedną z metod jest zasada gradientu barw, czyli dobiera-
nia kolejnych kolorów uzupełniających z grupy kolorów sta-
nowiących płynne przejście od wybranego koloru podsta-
wowego do czerni lub bieli. Po wybraniu kilku kolorów z tej
linii, dobrym pomysłem jest potraktowanie każdego lub czę-
ści z nich operacjami zmiany natężenia, nasycenia czy cie-
niowaniem, tak aby uzyskać lekkie odchylenie od podsta-
wowej linii przejścia kolorów. Jednakże nawet pomimo za-
stosowania tych operacji uzupełniających, należy mieć na
uwadze ryzyko uzyskania monotonii kolorów. Dodanie czer-
ni lub bieli jako ostatniego z kolorów przejściowych może
(aczkolwiek nie musi) poprawić ten efekt.
El Gradienty
Kontrast kolorów N x
Teoria kontrastu proponuje użycie kolorów kontrastują-
cych ze sobą (może być to kontrast wartości — różne kolo-
ry lub na przykład kontrast natężenia — te same kolory) dla
podkreślenia różnic lub uwypuklenia elementów istotnych.
Kontrast może być duży lub mały. Z reguły stosuje się du-
ży kontrast pomiędzy kolorem tekstu, a kolorem tła. Nale-
ży jednak uważać, że zbyt duży kontrast lub nieprawidłowo
dobrane kolory kontrastujące ze sobą, mogą prowadzić do
uczucia nieporządku i bałaganu. Biel i czerń tworzą ze sobą
najsilniejszy kontrast wśród kolorów El. Kontrast jest głów-
nie stosowany do uwypuklenia dużych różnic, np. pomię-
dzy tekstem a tłem. Duży kontrast jest przyjemnym efektem
dla oka, za to mały kontrast może posłużyć do podkreślenia
subtelnych różnic np. w tle.
El Najsilniejszy kontrast tworzą biel i czerń.
Kontrast nasycenia raczej bywa wykorzystywany do uzy-
skania subtelnych efektów graficznych niż do podkreślenia
lub uwypuklenia czegoś. Na przykład kilka kolorów kontra-
stujących przez natężenie, przedstawionych w zestawieniu
z szarym tłem może być interpretowany przez ludzki wzrok
jak przezroczystość H
B Kolory o mniejszym nasyceniu mogą być postrzegane jako
przezroczyste.

„KOLOROWA ŚLEPOTA"
Ostatnią sprawą w aspekcie kolorów, o której należy pa-
miętać, jest tak zwana „kolorowa ślepota" (można znaleźć
inne tłumaczenia angielskiego określenia „colour blind-
ness"). Niecałe 10% internautów ma lekką wadę wzroku,
polegającą na niedostrzeganiu pewnych kolorów zestawio-
nych w pewnych kombinacjach. Niewłaściwe zestawienie
koloru tekstu i tła może spowodować, że treść zawarta na
twojej stronie WWW będzie dla tych osób praktycznie nie-
czytelna lub trudno dostrzegalna.
Przykładowo, zielony tekst na czerwonym tle lub czerwo-
ny tekst na niebieskim tle, jest trudny do przeczytania nawet
dla osób pozbawionych opisywanej wady, mimo, że oba te
układy kolorów stanowią świetny przykład kontrastu. Nato-
miast układy biały-czarny i niebieski-żółty również są kolo-
rami kontrastującymi, ale w tym przypadku czarny tekst na
białym tle lub żółty tekst na niebieskim tle, są łatwe do od-
czytania.

D Czarny tekst na białym tle oraz żółty tekst na niebieskim tle są

czytelne i przyjemne dla oka.

W zasadzie techniczny aspekt kolorów na stronach

WWW został w artykule wyczerpany. Dla osób chcących
uzyskać dodatkowe informacje, polecam książki z zakresu
HTML i CSS, szczególnie, gdy oba te zagadnienia są oma-
wiane w jednej pozycji, gdyż z reguły autor kładzie wtedy
nacisk na wspólne wykorzystanie obu oraz na subtelne róż-
nice między nimi.
Aspekt artystyczny to temat rzeka i w zasadzie jest to za- ^ ZASTOSOWANIE:
• Szyfrowanie poufnych -^,
gadnienie niewyczerpane. Szukającym bardziej szczegóło- ^ danych i oprogramowania
wych czy rozszerzonych informacji, polecam serwis „Colo- 0 Szyfrowanie poczty e-mail
~* Zabezpieczenie danych
urs on the web", http://www.webwhirlers.com/colors/ oraz w razie kradzieży lub
podobne opracowania internetowe. Nie spotkałem się z po- włamania przez Internet
Sejf Wirtualny: zasada działania
zycją książkową, która by omawiała czy chociażby poru- jak sejfu wmurowanego w ścianę
*G DATA Software Sp. z o.o.
szała to zagadnienie. • w Szczecinku nie ponosi
odpowiedzialności za używa '
programu TopSecret Next G.
do ukrywania w komputerach
nielegalnego (pirackiego)

Źródła informacji wykorzystane w artykule:

Wielka Internetowa Encyklopedia Multimedialna: hasło

CMYK, dostępne pod adresem: http://wiem.onet.pl/wiem/
009989.html
SOFTWARE
Przewodnik „Colours on the web",
Sp. z o.o.
httpJ/www. webwhirlers. com/colors/ ul. 28 Lutego 2
40
Tomasz Trejderowski, „Po prostu Internet", Wydawnictwo
Helion, Gliwice, grudzień 2001 r., ISBN 83-7197-681-X,
146, * 78-400 Szczecinek
®+48 94 372-96-50
Tomasz Trejderowski, „Po prostu Internet. Techni- i- +48 94 372-96-59
ki zaawansowane". Wydawnictwo Helion, Gliwice, lipiec e-mail: biuro@gdata.pl
handel@gdata.pl
2002 <.. ISBN 83-7191-670-4. http://www.gdata.pl

SZUKAJ NASZYCH PRODUKTÓW W:

RENOMOWANYCH SKLEPACH, HURTOWNIACH I HIPERMARKETACH
 WEBDESIGN

LAYOUT
NAWIGACJA
NA STRONIE WWW
Magdalena Tomczyk

Jeśli naszym celem jest stworzenie przejrzystej witryny internetowej, wykorzystajmy

grafikę do wsparcia czytelnej nawigacji. Elementy graficzne umieszczamy na stronie,
po to, by przykuć uwagę internauty i zatrzymać go na dłużej. Trzeba jednak pamiętać,
że przeładowanie strony elementami graficznymi utrudni wędrowanie po niej i możemy
osiągnąć efekt dokładnie odwrotny — zrazić czytelnika do swojej strony.

Obserwując rozwój internetu w Polsce i na świecie, wyda-
je się, iz szybki dostęp do internetu jest nadal kwestią przy-
szłości. Większość użytkowników internetu łączy się z nim
nadal przez modemy, które osiągają małe prędkości trans-
feru danych. Dlatego trzeba zadbać o to, aby nie umieścić
zbyt dużej ilości grafiki na stronie, a także o to, by umiesz-
czane pliki graficzne miały niewielkie rozmiary. Adobe Pho-
toshop oraz inne dostępne obecnie programy do obróbki
grafiki wyposażone są w narzędzia pozwalające zoptymali-
zować rozmiar tworzonych plików. Umieszczając elementy
graficzne należy kierować się zasadą, iż strona powinna ła-
dować się nie dłużej niż minutę przy prędkości 28,8 kb/s.
STANDARDOWE MENU
Tworząc menu strony należy pamiętać o tym, aby lista
odnośników do podstron ograniczała się do najważniej-
szych działów. Wprowadzenie zbyt dużej ilości odnośników
wprowadzi chaos informacyjny i utrudni internaucie znale-
zienie informacji. Obecnie można wyróżnić kilka rodzajów
stylów projektowania stron WWW. Jednym z odróżniają-
cych te style elementów jest miejsce zamieszczenia me-
nu nawigacyjnego.
W stylu tradycyjnym menu umieszcza się po lewej stronie
witryny. Są to przyciski lub łącza tekstowe do najważniej-
szych działów. Do tego sposobu nawigacji przyzwyczajo-
na jest większość internautów, dlatego też trafiając na stro-
nę z tak rozmieszczonym menu — poruszają się po niej in-
tuicyjnie, co zdecydowanie ułatwia im odszukanie żądanej
informacji. Za negatywy tego sposobu uważa się małą ory-
ginalność projektu, a także dużą odległość, jaką musi poko-
nać kursor myszki od paska przewijania po prawej stronie
do menu po lewej.
Alternatywą dla tego wyjścia
jest umieszczenie menu po pra-
wej stronie witryny. Zaleta — bli-
żej od paska przewijania do na-
wigacji po tej samej stronie. Jed-
nak badacze internetu twierdzą,
iż wzrok internauty łatwiej wy-
szukuje informacje znajdujące
się po lewej stronie ekranu kom-
putera i szybciej je dostrzega.
Dla obu powyższych sposobów istnieje pewne ryzyko
podczas budowania stron opartych na tzw. ramkach, gdzie
layout konkretnej strony skonstruowany jest z kilku (zwykle
dwóch lub trzech) stron wbudowanych w ramki i widocznych
jednocześnie dla użytkownika. Otóż, gdy menu będzie za-
wierało zbyt długą listę odnośników, wówczas część z nich
może nie być widoczna przy oglądaniu strony w mniejszej
rozdzielczości, a wprowadzenie paska przewijania zepsuje
efekt wizualny całej strony.
Jednym z coraz częściej używanych formatów strony
WWW jest format gazetowy, w którym menu nawigacyjne
w postaci przycisków umieszcza się u góry strony, zwykle
pod bannerem reklamowym, jakąś drobną grafiką ozdobną
i logo firmy. Menu umieszczane na dole witryny jest zwy-
kle menu tekstowym i służy głównie ułatwieniu nawigacji,
gdy strona przewinięta jest w dół i powrót do górnego me-
nu wymaga jej przewinięcia. Jednak można spróbować tak
skonstruować stronę, aby menu główne znajdowało się na
dole strony (jednak wtedy musi pozostać nieruchome, bez
możliwości przewinięcia dolnej części strony), natomiast za-
sadnicza część strony powinna mieć możliwość przewija-
nia. Można wtedy wkomponować napisy — linki w atrakcyj-
ną grafikę, pamiętając jednak o tym, by nie zgubiły się w jej
nadmiarze.
Layout niestandardowy — na dole strony
MENU — INNE ROZWIĄZANIA
Jeśli strona zawiera bardzo dużo odnośników do kolej-
nych działów, wyjściem jest stworzenie tzw. menu kaska-
dowego opartego także na elementach graficznych (pro-

•f z zastosowaniem menu po prawej stronie

psć
luty/marzec 2004

stokątach o wybranej wielkości i kolorach), a „ożywionego"
przez dodanie odpowiednich skryptów (pisanych np. w Ja-
vaScript). Działanie tego menu podobne jest do działania
programów znanych użytkownikom systemu Windows. Dal-
sze odnośniki pozostają ukryte do momentu „najechania"
na nie kursorem myszki lub kliknięcia. Kliknięcie lub „naje-
chanie" myszką powoduje rozwinięcie się kolejnego paska
z przyciskami.
H Zastosowanie menu kaskadowego
Innym wyjściem dla strony niezawie-
rającej zbyt dużej ilości odnośników jest
też stworzenie tzw. pływającego menu, które „spada" w dół
wraz z przewijaniem strony w dół lub odwrotnie — podno-
si się do góry w momencie powrotu do góry strony. W takim
menu wykorzystujemy zwykłe przyciski graficzne tworzone
do typowych stron WWW. Zaletą tego sposobu jest to, że
menu nawigacyjne zawsze mamy „pod ręką". Jednak wie-
lu internautów skarży się na swego rodzaju natrętność ele-
mentów, które jakby „przyklejają" się do myszy i śledzą każ-
dy ruch użytkownika.
PRZYCISKI NAWIGACYJNE
Ważnym elementem
ułatwiającym nawigację
w różnych rodzajach me-
nu jest stosowanie przy-
cisków, które w momen-
cie „najechania" na nie
kursorem myszki zmie-
niają swój kolor lub wy-
pukłość.
Aby ułatwić internau-
H Różne rodzaje przycisków cie wybór kolejnej pod-
strony z listy przycisków
menu, można też wyróżnić przycisk strony, na której obec-
nie się znajduje (np. zmienić jego kolor, wypukłość lub pod-
świetlenie).
ROZPLANOWANIE STRONY - GRAFIKA
ODDZIELAJĄCA OD SIEBIE DZIAŁY STRON
Jeśli tworzymy witrynę w formacie gazetowym (menu
u góry strony, reszta strona podzielona jest na kolumny
i wiersze), wskazane jest oddzielenie od siebie poszczegól-
nych działów witryny na danej podstronie. Ułatwi to odwie-
dzającym naszą stronę wzrokowe ogarnięcie tematyki stro-
ny, a także oddzielenie od siebie poszczególnych działów
lub informacji, które chcemy wyszczególnić. Można to zro-
bić poprzez umieszczenie nagłówków w poszczególnych
komórkach tabeli. Nagłówki raczej powinny charakteryzo-
wać się tym samym stylem (krój pisma, kolorystyka, kształt
itd.). Poszczególne komórki tabeli możemy oddzielić od sie-
i
bie delikatnymi liniami, kropkami, lub czymś co w subtelny
sposób oddzieli poszczególne działy.
INNE ELEMENTY GRAFICZNE
UŁATWIAJĄCE NAWIGACJĘ
Często stosowanymi elementami graficznymi są ikon-
ki — obrazki kojarzące się z określonymi czynnościami,
np. kliknięciem ikony koperty otworzymy stronę prowadzą-
cą do poczty elektronicznej, znak zapytania przeniesie nas
do systemu pomocy, domek ustawi oglądaną stronę jako
startową, a ikonka folderu doda stronę do ulubionych. Kiedy
tworzymy stronę wielojęzyczną, to zamiast napisów może-
my umieścić ikonkę z flagą danego kraju. Wówczas odwie-
dzający nie ma wątpliwości, gdzie znajdzie stronę „mówią-
cą" w zrozumiałym dla niego języku. Warto też zrobić od-
nośnik z logo firmy umieszczonego na każdej z podstron
(może to być mapa obrazu). Ułatwi to internaucie powrót do
strony głównej w dowolnym momencie. Są to rozwiązania
popularne i często stosowane na stronach internetowych.
Może są mało oryginalne, ale należą do tych elementów,
dzięki którym odwiedzający poruszają się po stronach intu- Mapy obrazu
Mapa obrazu to nic innego, jak
icyjnie - a o to między innymi chodzi! obrazek po którym można klikać,
a w zależności ód tego w którym
jego obszarze klikniemy — prze-
NARZĘDZIA PRACY nosi nas do wybranej informacji.
Bardzo przydatnym narzędziem do przygotowania grafi- Najczęściej stosuje się to rozwią-
ki internetowej jest np. Adobe Photoshop. Program ten bar- zanie w mapie będącej mapą
kraju, regionu czy świata, dla
dzo ułatwia pracę w zakresie przygotowania graficznych pokazania punktów w których
elementów strony WWW. Dostępne w nowszych wersjach dana firma zaistniała, czy też
Photoshopa narzędzie Odcięcie pozwala „pociąć" przygo- ma swoje przedstawicielstwa,
bądź do wyszukania informacji
towany projekt na poszczególne obrazki — gotowe elemen-
w obrębie danego regionu.
ty strony WWW (np. na przyciski) i jednocześnie zachować Zastanówmy się, czy zamiast
je w warstwach. Ułatwia to modyfikację pojedynczego ob- rozwijanego menu (tzw. belki)
razka nawet bardzo złożonej graficznie strony WWW, bez z nazwami części kraju czy re-
gionu nie lepiej stworzyć mapę
konieczności modyfikacji pozostałych obrazków — części obrazu z możliwością wybrania
składowych strony. Na dodatek każde odcięcie z tego sa- z niej interesującego internautę
mego projektu można zapisać jako inny rodzaj pliku: Jpg, regionu.
.g/7 lub .png. Przy pomocy Adobe
Photoshop lub ImageReady z ła-
twością przygotujemy podświe-
tlane przyciski lub mapy obrazu.
Pamiętajmy o tym, że obraz
często oddziałuje bardziej niż
słowo. Wykorzystajmy grafikę
na stronach w taki sposób, aby
ułatwić i uprzyjemnić internau-
cie poruszanie się po naszej wi-
trynie. Jedną z żelaznych zasad
stosowanych przez webmaste-
rów powinna być „zasada dwóch
klików". Polega ona na tym, iż za
pomocą jedynie dwóch kliknięć inter-
nauta przenosi się do poszukiwanych in-
formacji. Należy też zwrócić uwagę na ko-
lorystykę witryny, w tym także na tło. Ciemne tło
o
jest nastrojowe i tajemnicze, jednak podczas czytania więk- Dl
szej ilości tekstu bardzo męczy wzrok. ro
Internet to coraz powszechniejsze medium, którego ob- OT
o.
raz jest nieodłącznym elementem. Obraz na stronach s
WWW prowadzi za rękę, skraca i ułatwia proces myślowy, 5
który niejako dzieje się poza świadomością odwiedzającego
witrynę. Zestaw zawartych tu wskazówek warto wziąć pod
uwagę podczas projektowania strony WWW jako pierwszy
krok do tworzenia funkcjonalnej strony internetowej. •
19
luty/marzec 2004
 WEBDESIGN

D Przykłady różnego
stopnia optymalizacji pliku
JPEG

Oryginał

Optymalizacja O Optymalizacja 50 Optymalizacja 100

OPTYMALIZACJA
o
di
T3
GRAFIKI
Michał Szpile wski

Przeglądając setki stron internetowych na pewno niejednokrotnie spotkaliście się z ob-

razkami, które mimo małych rozmiarów i dobrego łącza wgrywały się zbyt długo, czy też
z takimi, których zła jakość sprawiała, iż były one nieczytelne. Można śmiało powiedzieć,
iż przyczyną tego jest zła optymalizacja zapisu lub jej całkowity brak.

20
luty/marzec 2004
[Chcąc zdefiniować zagadnienie „optymalizacja zapisu" mo-
owiedzieć, iż J e s t t0 takie opracowanie jakości obraz-
I przyczyni się do zmniejszenia jego objętości bez
wyraźnej utraty jakości. Proces ten jest na pewno jednym
z ważniejszych podczas tworzenia grafiki pod WWW. War-
to posiedzieć nad nim trochę dłużej niż kilka minut. Polecam
również przed przystąpieniem do czytania zapoznanie się
z informacjami na temat polecenia Zapis jako... (Save As...)
i Zapisz dla Weba... (Save for Web...)
JAKI FORMAT WYBRAĆ PRZY
ZAPISIE?
Pierwszą rzeczą, którą powinniśmy zająć się podczas
optymalizacji obrazka jest wybór formatu zapisu. Do dyspo-
zycji mamy 3 rozszerzenia obsługiwane przez przeglądarki
internetowe: JPEG, GIF i PNG. Pokrótce opiszę każdy, po-
dając jaki rodzaj grafiki najlepiej w nim zapisać.
Zacznę od formatu zdecydowanie najczęściej spotyka-
nego — JPEG (Joinł Photographic Experts Group). For-
mat ten obsługuje 24-bitowe kolory co pozwala na zacho-
wanie szerokiego zakresu kolorów. Przyczynia się to do
idealnych przejść tonalnych występujących przykładowo
w zdjęciach. Kompresja tego formatu polega na wybiór-
czym usuwaniu danych. Metodę taką nazywa się strat-
ną. Nie jesteśmy w stanie określić, w której części obraz-
ka znajduje się przykładowo mały tekst, dla którego utra-
ta jakości sprawi, iż stanie się on nieczytelny. Adobe Pho-
toshop pozwala nam ustalić stopień optymalizacji w skali
od Odo 100. B
Wadą tego formatu jest na pewno to, iż nie obsługuje on
przezroczystości tła. Obszar przezroczysty zostaje zastą-
piony kolorem matowym. Można jednak ustalić własny ko-
lor, który zastąpi przeźroczyste piksele (opcja Matte).
Kolejnym formatem, którego użyć możemy tworząc grafi-
kę dla potrzeb sieci jest GIF (Graphics Interchange Format).
Format ten używa 8-bitowego koloru. Zachowuje on dobrą
jakość jeżeli w naszym obrazku znajduje się obszar wypeł-
niony jednym kolorem. Idealnie nadaje się on do zapisu lo-
gotypów, ikon czy też ilustracji zawierających tekst. Przy je-
go pomocy możemy zapisać obraz, który maksymalnie za-
wiera 256 kolorów.
Format ten ma wiele zalet. Na pewno największą jest to,
iż można go animować (przykładowo przy pomocy Image
Ready). Kolejnym jego plusem jest obsługa przezroczysto-
ści, krawędzie obrazka wtopione zostają w tło strony B.
Ostatnim formatem jest PNG (Portable Network Graph-
ics). Występuje on w 2 wersjach, PNG-8 i PNG-24. Jest
to format stosunkowo młody, co sprawia, iż jeszcze nie
wszystkie przeglądarki internetowe go obsługują. Dlatego
warto pomyśleć czy nie lepiej jest zastąpić go innym roz-
szerzeniem.
Format PNG-8 możemy śmiało porównać do GIF'a. Po-
dobnie obsługuje on 8-bitowy kolor i przezroczystość. Po-
siada on jednak bardziej zaawansowane schematy kompre-
sji niż GIF co pozwala na zmniejszenie objętości zapisywa-
nego obrazka nawet o 30% (w zależności od wzorków ko-
lorów). Trzeba tu dodać, że format ten używa kompresji
bezstratnej. Oznacza to, że wszystkie dane zostają zacho-
wane (jeżeli zapis będzie z 24-bitowego koloru do 8-bitowe-
go, jakość obrazka na pewno ulegnie pogorszeniu).
Musimy również pamiętać, że format PNG nie zawsze
jest lepszy od GIF. Jeżeli nasz obrazek ma małą ilość kolo-
rów, prawie zawsze lepszy będzie GIF. Warto więc porów-
nać oba te formaty przed zapisem.
Format PNG-24 natomiast obsługuje 24-bitowy kolor po-
dobnie jak JPEG. Posiada on jednak wiele dodatkowych
cech. Format ten korzysta z kompresji bezstratnej. Pozwala
na zapisywanie obrazka, który zawiera zarówno ilustracje
jak i tekst. Zachowuje on idealnąostrość szczegółów. Wpły-
wa to jednak na objętość pliku, która jest zwykle większa niż
w przypadku JPEG.
Obsługa przezroczystości jest na pewno największym
walorem tego formatu. Obsługuje on aż 256 poziomów
przezroczystości co pozwala na idealne wtopienie obraz-
ka w tło strony WWW.
O CZYM POWINNIŚMY PAMIĘTAĆ?
Jedną z ważniejszych rzeczy przy optymalizacji zapisu
jest plik wyjściowy, który zapisujemy. Powinniśmy pamię-
tać, iż zapisując do JPEG-a nasz obraz jest stratny a każ-
de jego kolejne zapisanie z kopii przyczynia się do obniże-
nie jakości nie powodując zmiany objętości B.
Warto również zwrócić uwagę czy w naszym obrazku wy-
stępują przejścia tonalne S. Od tego zależy czy pokusimy
się o wybór GIF, PNG-8 czy JPEG lub PNG-24. W przypad-
ku pierwszej grupy, czyli formatów, które obsługują mak-
symalnie do 256 kolorów przejścia tonalne wyraźnie tracą
płynność co sprawia, iż nasza grafika znacznie traci na ja-
kości.
Oryginał Kopia Kopia z kopii
B Straty jakości przy zapisie z kolejnych kopii pliku
Jeżeli w naszej grafice znajduje się dużo obszarów
wypełnionych jednolitym kolorem, optymalnym formatem
zapisu będzie GIF bądź PNG-8. Dodatkowo pozwalają nam
one na obniżenie ilości kolorów w palecie z 256 nawet do
1 koloru.
o
JPEG GIF gi
B Przejścia tonalne w formacie JPEG i GIF "•
u)
O.
W momencie gdy nasz serwis odwiedzany jest przez co-
raz większą ilość osób, powinniśmy pamiętać, że nie wszy-
scy posiadają przeglądarki, które obsługują format PNG.
Przykładowo przeglądarka Microsoft Internet Explorer ob-
sługuje go dopiero od wersji 4.0. Warto więc umieścić alter-
natywną wersję w postaci JPEG czy GIF aby wszyscy użyt-
kownicy mieli szansę zobaczyć grafikę.
?
21
luty/marzec 2004
 WEBDESIGN
CZYM POWINNIŚMY SIĘ KIEROWAĆ
TWORZĄC GRAFIKĘ DLA WWW?
Optymalizacja grafiki dla Weba to nie tylko sam etap
zapisu ale również cały proces jej tworzenia. Warto poznać
kilka zależności które wpływają na rozmiar plików.
Tworząc obrazek, który docelowo zapiszemy w JPEG
powinniśmy wiedzieć, iż wszelkie rozmycia przyczynią się
do pomniejszenia jego objętości. Warto więc w przypad-
ku zdjęć wyselekcjonować obszary mniej ważne i rozmyć
go tak by tworzyły spójną całość S. Dokładniejszy opis tej
czynności znajdziesz na CD dodanym do tego numeru.
H Zapis obrazka w formacie JPEG bez rozmycia i z rozmyciem mniej istotnych fragmentów;
pozwala to na zmniejszecnie objętości pliku.
Przy projektowaniu grafiki takiej jak przycisk czy tło stro-
ny powinniśmy pamiętać by miała ona jak najbardziej po-
wtarzany wzorek tzw. pattern B i powierzchnie o stałym
•
kolorze. Musimy również zadbać by ilość kolorów użytych
w obrazku była jak najmniejsza (maksymalnie 256 kolo-
rów), nadająca się do zapisu w trybie 8-bitowym, czyli GIF
lub PNG-8.
Pamiętać powinniśmy również by
użyć jak najwięcej powtarzających się
elementów. Pozwoli nam to na wzbo-
gacenie naszej grafiki przy pomo-
cy jednego pliku, który zostanie wy-
świetlony w kilku miejscach. Warto tu
użyć plików z przeźroczystymi pikse-
lami, które pozwolą na to by nasz ob-
razek komponował się bez proble-
I I Przykładowy wzorek (pattern) mów z każdym tłem.
DZIELENIE OBRAZKA
Jednym z etapów, który jest zarazem konieczny, jak i bar-
dzo przydatny, jest podzielenie grafiki. Możemy to zrobić
przy pomocy narzędzia Slice Tool jak i kopiując poszcze-
gólne elementy a następnie wklejając je do nowego okna
i zapisując.
o
Dl Odpowiednie podzielenie obrazka daje nam większą
ra
"O
kontrolę nad optymalizacją poszczególnych elementów. Nie
jest to jednak jedyna zaleta, większa ilość elementów in-
terfejsu naszej strony może być wgrywana jednocześnie,
co znacznie wpływa na całkowity czas załadowania strony.
Powinniśmy jednak pamiętać by nie przesadzić z ilością po-
ciętych elementów, zbyt duża ilość spowoduje, iż na star-
szych komputerach nasza strona będzie się znacznie wol-
niej otwierała, przesuwała, ponieważ przeglądarka będzie
musiała przeanalizować dodatkowe linijki kodu.
22 •?s<!
luty/marzec 2004
OBJĘTOŚĆ GRAFIKI A HTML
Przy pomocy umiejętnego korzystania z HTML-a jeste-
śmy w stanie wpłynąć na rozmiar naszej grafiki. Zademon-
struję 2 przykłady wykorzystania kodu do pomniejszenia
objętości naszej grafiki. Więcej przykładów jak również te
opisane znajdziesz na płycie CD dołączonej do numeru.
Pierwszym ważnym sposobem na pomniejszenie objęto-
ści naszego obrazka jest stworzenie 2 warstwowego przy-
cisku B. Możemy to zrobić przy pomocy 2 obrazków o jed-
nakowych rozmiarach i tabelki. Pierwszym obrazkiem mu-
si być tło przycisku, przykładowo może to być przejście to-
nalne (plik w formacie JPEG), drugi obrazek to tekst, który
zostanie naniesiony na przycisk, musi on mieć przeźroczy-
ste tło, by widać było przejście tonalne „
(plik w formacie GIF). Kolejna czynność _Ą
to stworzenie tabelki, w której komórka
Tłojpeg
ma wymiary dokładnie takie jak stworzo-
ne obrazki. Wystarczy jako jej tło wgrać ,PSD
plik JPEG i wstawić do niej obrazek GIF, Tekst gif
który będzie zarazem linkiem. Pozwoli
nam to na kilkakrotne wykorzystywanie
tła przycisku, które waży znacznie wię- Gotowy przycisk
cej niż sam tekst.
Kolejnym efektem jest stworzenie li- H Dwuwarstwowy
przycisk
nii ozdobnej. Efekt ten polega na stwo-
rżeniu obrazka o dowolnej wysokości (w naszym przypad-
ku 5 pikseli) i szerokości równej 1 piksel. Tak utworzony ob-
razek możemy wgrać na naszą WWW nadając mu dowolną
szerokość. Uzyskamy w ten sposób linie o dowolnej szero-
kości, której rozmiar podczas zapisu nie przekroczy 70 baj-
tów (zapisany w formacie GIF) B.
ILE POWINNA. WAŻYĆ GRAFIKA?
Wyznaczając granice objętości naszej grafiki powinni-
śmy wziąć pod uwagę kilka kryteriów. Pierwsze i zarazem
najbardziej istotne jest łącze, do którego podpięty jest nasz
serwer WWW. Im jego przepustowość jest mniejsza tym
więcej starań musimy włożyć w to, by nasza grafika zop-
tymalizowana była maksymalnie. Pod uwagę powinniśmy
również wziąć ilość tekstu i dodatkowych obrazków, która
znajdzie się w części merytorycznej naszej strony.
B Tworzenie linii na zasadzie powielania małego fragmentu.
Chcąc podać wielkość liczbowo powinniśmy zadbać by
nasza grafika nie przekroczyła 80 KB. Warto postawić się
wówczas na miejscu osoby, która łączy się z Internetem
przy pomocy zwykłego modemu 56,6 Kbps.
INNE PROGRAMY
Nie powinniśmy ograniczać się jednak tylko i wyłącznie
do optymalizacji przy pomocy Adobe Photoshop. W interne-
cie można znaleźć wiele ciekawych, niejednokrotnie darmo-
wych programów do optymalizacji, które dodatkowo pozwo-
lą nam odchudzić naszą grafikę. Kilka z nich zamieściliśmy
na CD dołączonym do naszego magazynu. •
 Czy stoimy na przegranej pozycji? Nie! W tym momencie
możejMy, a nawet powinniśmy skorzystać z pozycjonowa-
. Jest to najlepsza, najskuteczniejsza i stosunko-
wo tania metoda zwiększenia liczby odwiedzin witryny i jej
promocji w Internecie. Pozycjonowanie polega na takiej mo-
dyfikacji kodu witryny internetowej pod kątem wyszukiwarki,
Marcin Sawicki
aby po wpisaniu słowa bądź wyrażenia, nasza strona była
wyświetlana możliwie na jak najwyższym miejscu na liście
Co zrobić, aby nasza strona nie ginęła w gąsz-
wyników wyszukiwania.
czu stron internetowych? Co zrobić by witryna Jedynym minusem pozycjonowania jest fakt, iż na efek-
ty tego zabiegu można czekać nawet do kilku miesięcy...
trafiała do jak największej ilości internautów? Jest to uwarunkowane samą wyszukiwarką, a ściślej mó-
Można oczywiście wydać krocie na wielką kam- wiąc okresem, jaki mija od rejestracji witryny w wyszukiwar-
ce a jej faktycznemu zaindeksowaniu. Okres ten jest różny
panię reklamową, która z pewnością przynie-
1
S
o dla różnych wyszukiwarek i może trwać od kilku dni do kilku
di
ra sie zamierzone efekty, ale co zrobić, gdy nie miesięcy. Pozycjonowanie nie zagwarantuje nam, że nasza
E strona będzie ukazywała się na danej pozycji w liście wyni-
13
l/l
O. posiadamy tak dużego kapitału? Co zrobić, jeżeli ków niezmiennie. Po kilku miesiącach jest nawet pewne, że
i nasza strona „spadnie w rankingu". Spowodowane jest to
nasza strona nie jest komercyjna i nie stać nas
tym, że coraz więcej osób i firm korzysta z tej metody pro-
na jakąkolwiek reklamę? mocji witryn. Na szczęście sąto zazwyczaj niewielkie spad-
ki i można szybko powrócić na „swoje" miejsce po ponow-
nym pozycjonowaniu. Teraz, kiedy ogólne wiadomości ma-
my już opanowane przyszedł czas na konkrety...

24 psi

Wiemy już, że zaprojektowanie i wykonanie witryny inter-
netowej (choćby jej jakość stała na najwyższym poziomie)
to bynajmniej nie koniec naszej pracy. Aby witryna genero-
wała jakikolwiek ruch musimy „powiadomić" o jej istnieniu
internautów. Aby jednak czynność ta przyniosła zamierzo-
ne efekty musimy podejść do sprawy szerzej. Musimy po-
znać działanie i typy wyszukiwarek, ponieważ to pod ich ką-
tem będziemy modyfikować kod stron internetowych.
TYPY WYSZUKIWAREK
Obecnie mamy w Internecie niezliczoną liczbę wyszuki-
warek, powstają ich tysiące a liczba ta stale wzrasta. Na
szczęście dla webmasterów, ruch w Internecie skupia się na
kilku największych i najpopularniejszych. Ta ścisła czołów-
ka w skład której wchodzą Yahoo, Google, Alta Vista, Inkto-
mi, GoTo generują 90% ruchu internetowego pochodzące-
go z wyszukiwarek. Pod względem funkcjonalności wyszu-
kiwarki możemy podzielić na dwa typy:
Katalogi — są to witryny internetowe, które są filtro-
wane przez ludzi przeglądających każdą zgłoszoną stro-
nę i decydujących czy dana witryna spełnia kryteria i na-
daje się do umieszczenia jej w listingu. Hierarchia katalo-
gów jest identyczna jak ta którą znamy z naszych własnych
PC-tów, katalogi podzielone są na kategorie i podkatego-
rie ułatwiające i umożliwiające łatwe spenetrowanie ba-
6456487347O
grafika z kolekcji Infinity
zy danych w celu odszukania interesujących nas witryn
bądź stron internetowych. Do najbardziej znanych serwi-
sów opartych na strukturze katalogowej możemy zaliczyć
Yahoo, LookSmart czy Open Directory Project.
Wyszukiwarki — te serwisy z kolei programatycznie ak-
tualizują swoje bazy danych. Obsługiwane są automatycz-
nie przez programy, potocznie nazywane szperaczami,
wyszukujące w Internecie zawartość, którą można dodać
do baz danych wyszukiwarek.
Szperacz podąża w ślad łącz Internetowych i zapisuje da-
ne o nowo odkrytych stronach internetowych. Wyszukiwar-
ki indeksują strony w oparciu o informacje zawarte w doku-
mencie HTML, z tego też powodu witryny oparte w całości
na Flashu wymagają większej pomysłowości.
Strony wejściowe tzw. doorway-pages są pierwszą rze- Ol
o
czą, którą należy zmodyfikować w ramach pozycjonowa- di
nia strony. Strony wejściowe to nic innego jak nasze „stro-
ny główne". Z założenia służą one do przyciągania szpera-
czy wyszukiwarek i do przekazywania im jak największej
ilości danych dotyczących naszej witryny. Strony wejściowe
są najważniejszym elementem naszej witryny, zarówno ze
względu na szperacze jak i ze względu na internatów, któ-
rzy to właśnie na naszą stronę wejściową trafiają najpierw.
Z tego powodu projektant witryny powinien bardzo do-
kładnie przemyśleć i zaprojektować wygląd strony wejścio-
?
luty/marzec 2004
25
 WEBDESIGN
wej, ponieważ od niej zależeć będzie w dużej mierze sku-
teczność pozycjonowania.
Słowa kluczowe — wybór słów kluczowych jest pod-
stawą każdego pozycjonowania stron internetowych. Jeże-
li w tym momencie popełnimy błąd to w najlepszym wypad-
ku nasza strona będzie miała mierną „oglądalność" w naj-
gorszym... nie będzie jej miała wcale. Dlatego postaram się
jak najlepiej będę potrafił wyjaśnić w jaki sposób dobierać
oraz o czym należy pamiętać a czego się wystrzegać pod-
czas doboru słów kluczowych. W momencie doboru tych-
że stów uwagę należy zwrócić na takie zagadnienia jak: po-
znanie oferowanych usług, produktów bądź zawartości oraz
poznanie grupy docelowej.
Przez poznanie swojej własnej oferty rozumie się język,
jakim posługujemy się określając produkty bądź usługi ofe-
rowane za pomocą naszej witryny. Często zdarza się bo-
wiem, ostatnimi czasy, że ludzie zajmujący się stronami in-
ternetowymi, obracając się w swoim własnym środowisku
„przesiąkają" owym hermetycznym językiem i jako słowa
kluczowe wybierają doskonale znane sobie wyrazy bądź
wyrażenia, ale zupełnie nieznane i niezrozumiałe dla „zwy-
kłego" internauty. Wybór języka potocznego, zrozumiałego
dla większości ludzi staje się więc pierwszą rzeczą w dro-
dze do poprawnego i skutecznego pozycjonowania strony.
Poznanie grupy docelowej jest nie mniej ważnym czyn-
Wskazówka nikiem decydującym o doborze słów kluczowych. Bardzo
Z własnego doświadczenia wiem,
prosto jest wytłumaczyć ten stan rzeczy: innego słownic-
że warto jest działać w myśl za- twa używają ludzie młodzi, aktywnie spędzający czas, a in-
sady mówiącej, że człowiek nie nego poważni, szanowani, ustatkowani biznesmeni. Inaczej
jest nieomylny. Warto, więc obok wygląda strona przeznaczona dla męskich odbiorców a in-
„właściwych" słów kluczowych,
wpisać ich błędne formy. Nie gwa- aczej dla damskiej części wirtualnej społeczności. Inną for-
rantuje to wzrostu skuteczności mę przybierze zatem witryna kierowana do 5-10 latków a in-
pozycjonowania, ale na pewno aczej do 15-20 latków.
nie zaszkodzi.
Po wybraniu słów kluczowych należy przystąpić do opty-
malizacji stron dla szperaczy wyszukiwarek. Aby optymali-
zacja była naprawdę „optymalna" należy przestrzegać po-
niższych zasad:
• pozycja słowa kluczowego w dokumencie HTML —
wyszukiwarki wyżej zazwyczaj oceniają strony interne-
towe, które swoje słowa kluczowe zawierają w tytule
bądź pierwszej linijce tekstu. Pamiętajmy, im bliżej gór-
nej części dokumentu HTML, tym lepiej!
• pozycja słowa kluczowego w sekcji — sekcją nazy-
wamy obszar pomiędzy znacznikami <TITLE>, <H1>
czy <BODY>. Aby słowo kluczowe było oceniane przez
szperacza jak najlepiej powinno znajdować się jak naj-
bliżej początku w każdej sekcji oraz w możliwie najwięk-
szej ich liczbie (sekcji).
Gdyby naszym słowem kluczowym było wyrażenie „czę-
ści komputerowe" to w przykładzie pierwszym uzyskałoby
ono wyższą pozycję niż w przykładzie drugim.
o
ó>
ra Przykład 1:
<TITLE>części komputerowe — najnowsze i naj-
T3
o. tańsze </TITLE>
g
g Przykład 2:
<TITLE>najnowsze i najtańsze części komputerowe</
TITLE>
Następnym elementem, którym się zajmiemy na naszej
drodze do optymalnego przygotowania naszej witryny pod
26
luty/marzec 2004
kątem pozycjonowania jest znacznik <META>. Znaczniki
te służą do zawierania w nich danych opisujących zawar-
tość witryny. <META> opisuje jednak nie tylko zawartość
witryny, lecz również takie elementy jak autora, generator
pliku HTML czy datę utworzenia pliku. Jeżeli do utworze-
nia pliku HTML użyliśmy jakiegoś programu (MS FrontPa-
ge, Pajączek) to znacznik <META> będzie zawierał o tym
informacje:
<META name = "GENERATOR" c o n t e n t = " t u _ na-
zwa _ p r o g r a m u " >
Aby zademonstrować działanie znaczników <META>
przedstawię pustą stronę HTML, która posiadać będzie
szczegółowy opis jej finalnej wersji za pomocą znaczni-
ków <META>.
•-.HTMIT-
< HEAL
<TITLE>F imr jd. ^rona klepu komputerowe-
go </TITLE->
<META htti.-t- { n 7-"" ntent-Type"
content= "test/html; charset=iso-8859-2" >
<META name-"GENERATOR" content- "nazwa _ pro-
gramu g e n e m jacego">
<META name- "Keywords"kontent= "kompute-
ry, części komputerowe, akcesoria komputerowe,
najnowsze, najtańsze">
<META name- "Description" content^ "Czesci
komputerowe - najnowsze i najtańsze">
<META name="Autor" content-"Marcin Sawicki" >
<META name= "Copyright" content= "2003 UCT" >
<META name="Date" content= "2003-07-07" >
</HEAD>
<BODY>
</BODY>
</HTML>
Jak widać znaczniki <META> umieszczamy w sekcji < H E -
A D > , czyli pomiędzy znacznikiem < H E A D > a < / H E A D > .
Najważniejsze znaczniki <META> to name = "Keywords"
(znacznik słów kluczowych) oraz n a m e = " D e s c r i p t i o n "
(znacznik opisu strony).
<META> Keywords — tu umieszczamy nasze słowa klu-
czowe. Pamiętajmy o zasadach które należy zachować aby
optymalnie dobrać nasze słowa kluczowe (mowa o nich by-
ła wcześniej).
<META> Description — służy do opisu zawartości witry-
ny (lub strony) internetowej. Jest to tekst który wyświetlany
jest w wynikach wyszukiwarek, dlatego pisząc ten tekst mu-
simy pamiętać, że w dużej mierze to od jego jakości zależeć
będzie czy internauta kliknie na nasz link czy też przejdzie
do następnego. Opis musi być napisany w taki sposób aby
Wskazówka
Optymalny opis to taki, który przykuwa uwagę i zachęca do
odwiedzin witryny, w jego tekście znajdują się słowa kluczowe,
a jego treść jest sensowną kontynuacją tytułu strony.
 zachęcał do odwiedzin, nie może być za długi (na ogół jest
to do 25 znaków) a jednocześnie musi zawierać jak najwię-
cej informacji o naszej witrynie (bądź stronie) internetowej.
Kolejnym „miejscem", które umożliwia nam zwiększenie
jakości pozycjonowania strony są komentarze HTML.
Komentarze są to niewielkie teksty umieszczane zazwy-
czaj przez programistów w celu opisu kodu oraz ułatwienia
jego późniejszego odczytu. Komentarze nie są wyświetla-
ne i nie wpływają w żaden sposób na atrakcyjność strony
internetowej. Niektóre wyszukiwarki mogąje jednak odczy-
tywać i w tym upatrujemy nasze możliwości wykorzystania
tej niewielkiej „luki".
Komentarze HTML otwierane są symbolami <! — i za-
mykane —>. Pomiędzy tymi symbolami możemy umieścić
dowolny tekst. Nie ma żadnych ograniczeń co do długości
komentarzy, ale pamiętajmy o tym, że krótsze, ale rzeczo-
we komentarze są o wiele lepsze niż długie zawierające
niewiele przydatnych informacji „wypracowania". Komen-
tarze możemy umieszczać w dowolnym miejscu dokumen-
tu HTML.
Jako treść komentarza powinniśmy używać jak najwięk-
szej ilości słów kluczowych, ale z samymi komentarzami
nie należy przesadzać, ich nadmierna ilość może okazać
się przeszkodą w odczycie kodu i ewentualnej późniejszej
z nim pracy. Treścią komentarza powinno być zdanie o ja-
snej treści i dobrze sformułowane stylistycznie.
Kolejną techniką przydatną podczas pozycjonowa-
nia stron jest zastosowanie tzw. ukrytych pól wejścio-
wych. Jest to technika pozwalająca na dodanie większej
ilości informacji ze słowami kluczowymi do dokumentu
HTML. W tym celu wykorzystamy atrybuty name i value.
Oto przykład takiego zabiegu:
<INPUT type="Hidden" name="komputer" valu-
e="części komputerowe, akcesoria komputero-
we, komputery, PCty">
Miejsce w których należy umieszczać ukryte pola wej-
ściowe to główna część dokumentu (sekcja <BODY>). Ukry-
te pola nie są wyświetlane przez wszystkie przeglądar-
ki i nie wpływają w żadnym stopniu na wygląd strony bądź
jakość kodu. Ostatnim elementem, którego modyfikacja
podnosi jakość pozycjonowania są znaczniki obrazków.
A ściślej rzecz biorąc atrybut alt znacznika < I M G > . Znacz-
nik <IMG> może „współpracować" z wieloma atrybutami,
najbardziej nas interesującym ze względów pozycjonowa-
nia stron jest jednak atrybut alt (skrót od angielskiego al-
ternative). Atrybut ten określa tekst jaki będzie wyświetlany
w momencie ładowania obrazka lub gdy użytkownik wyłą-
czył w swojej przeglądarce możliwość wyświetlania obraz-
ków, a dodatkowo jeżeli jesteśmy użytkownikami Internet
Explorer tekst ten będzie wyświetlany po najechaniu kurso-
rem myszki na obrazek.
Typowy znacznik <IMG> wygląda tak jak ten przedsta-
wiony poniżej:
<IMG border="0" src = "czescikomputerowe.jpg"
width="350" height="378">
Znacznik ten zawiera takie informacje jak: wysokość,
szerokość, rozmiar obramowania obrazka, a także określa
sam obrazek przeznaczony do wyświetlenia.
A oto przykład tego samego znacznika z dodanym atry-
butem alt:
Google
Polska
D Logo najpopularniejszej wyszukiwarki na świecie: Google
<IMG border="0" src= "czescikomputerowe .jpg"
width="350" height="378" alt="najnowsze i najtań-
sze części komputerowe">
Teraz, gdy nasza witryna jest już gotowa na podbój In-
ternetu, gdy jest dopracowana pod każdym względem oraz
zoptymalizowana pod kątem pozycjonowania nadszedł
czas na jej zgłoszenie do wyszukiwarek. Niestety jest to
bardzo szeroki temat, który nadawałby się na oddzielny ar-
tykuł, dlatego przedstawię tutaj jedynie ogólny zarys zgła-
szania witryn bez zagłębiania się w szczegóły.
Z przyczyn praktycznych skupię się teraz tylko na dwóch
wyszukiwarkach: Google oraz Onet.pl. Wybór był bardzo
prosty, są to bowiem dwie najbardziej popularne wśród pol-
skich internatów wyszukiwarki. Nie należy jednak zapomi-
nać o Yahoo, Alta Vista, Inktomi, GoTO.com czy Dmoz.org.
Google — jest to jedna z młodszych wyszukiwarek
a jednocześnie jedna z najbardziej dynamicznie rozwijają-
cych się. Stale powiększa swoją własną bazę danych, a jej
obecny stan wskazuje na ponad 3 mld zindeksowanych
stron! Do indeksowania Google używa szperacza o nazwie
Googlebot. Wyszukiwarka ta jest obecnie jedną z najszyb-
szych witryn, jeżeli chodzi o indeksowanie nowych stron.
Warto wiedzieć, że wielkość liter nie ma tutaj znaczenia dla
mechanizmu wyszukiwania. Aby dodać stronę do wyszuki-
warki należy udać się na stronę: http://www.google.pl/intl/
pl/addurl.html.
Onet.pl — wyszukiwarka Onetu — największego pol-
skiego portalu internetowego jest skarbnicą polskich stron
internetowych. Wyszukiwarka ta jest ściśle powiązana z Al-
ta Vistą oraz Inktomi. Ważną informacją dla osób pozycjo-
nujących strony jest fakt, iż wyszukiwarka Onetu wykorzy-
stuje mechanizm zapobiegający „sztucznemu podwyższa-
niu wartości strony". Polega to na tym, że szperacz od-
czytuje zawartość poszczególnych pól i jeżeli wykryje np.
powtarzające się słowa kluczowe to taka witryna znajdzie
się na oddalonym miejscu w stosunku do strony zawierają-
cej jedno takie słowo. Posługując się naszym przykładem
sklepu komputerowego wyglądałoby to mniej więcej tak:
<META name="Keywords" content= "sklep,
sklep, sklep">
O)
o
ten zapis byłby gorzej oceniony niż zapis wyglądający jak ci)
ten poniżej:
<META name= "Keywords" content-"sklep kom-
puterowy" >.
Wszelkie informacje i szczegółowe zasady zgłaszania
stron do powyższej wyszukiwarki można odnaleźć na stro-
nie http://szukaj.onet.pl/pomoc/dodaj.html. 9
27
luty/marzec 2004
 POZNAJEMY PHOTOSHOPA
Czym t^k naprawdę są Akcje?
Akcje (Actions) są to gotowe zestawy wykonywanych po-
leceń. W rzeczywistości Akcje są plikami tekstowymi. Kie-
dy nagrywamy Akcję i zapisujemy ją w folderze, Photoshop
kopiuje to (listę wszystkich poleceń w Akcji) i nadaje roz-
szerzenie .atn. Kiedy wczytujemy folder z akcjami, Photo-
shop wczytuje plik .atn, odtwarzając wszystkie polecenia
w nim zapisane. Akcje można nagrać, klikając w panelu Ak-
cje przycisk nagrywania.
Jak wtopić nową warstwę w tło?
Należy zaznaczyć naszą warstwę (kliknąć w okienku
Warstwy (Layers) na naszą warstwę trzymając jednocze-
śnie wciśnięty przycisk [Ctrl]) albo zaznaczyć, za pomocą
np. Lassa lub innego narzędzia, wybraną część warstwy.
Kolejnym krokiem jest wejście w menu górne w Zaznacz/
Odwrotność (Select/lnverse), następnie wybranie z tego sa-
mego menu Wtapianie (Feather) i podanie wartości, która
będzie nam odpowiadała. Na zakończenie należy wciskać
klawisz [DEL], aż osiągnie się pożądany efekt.
Jak wypełnić zaznaczenie swoim obrazem? (np. efekt li-
nii telewizyjnych)
Na początek należy przygotować sobie wzorek linii.
W tym celu tworzymy dokument o wymiarach 1 na 4 pikse-
le i przezroczystym tle, oczywiście podane wymiary moż-
na sobie modyfikować w zależności od potrzeb. Czarnym
ołówkiem o grubości 1 piksela zamalowujemy dwa górne
piksele. Rysunek zapisujemy jako wzorek poprzez Edycja/
Zdefiniuj wzorek (Edit/Define Pattern). Kolejnym krokiem
jest zaznaczenie pola, które chcemy wypełnić. Wypełniamy
przez Edycja/Wypełnij, zmieniając w jego ustawieniach Źró-
dło (F/7/) na Wzorek (Pattern), a Wzorek (Pattern) na nasz.
W jaki sposób zainstalować nowe filtry i gradienty?
Filtry z reguły kopiuje się do katalogu ..Photoshop\Plug-
Ins. Można sobie tam utworzyć również dodatkowe katalo-
gi, jeżeli chce się mieć filtry podpisane i posegregowane.
Program Photoshop przy starcie przeszukuje ten katalog by
znaleźć nowe Pluginy. Niektóre firmy robiące filtry oferują
wersje instalacyjne filtrów, więc co za tym idzie należy po-
dać ścieżkę dostępu do wyżej opisanego katalogu. Nam po-
zostaje tylko użytkować nowe filtry i tworzyć piękne grafiki.
Gradienty instaluje się podobnie, należy podać ścieżkę do-
stępu do katalogu: ..Photoshop\Presets\Gradients. Po uru-
01 chomieniu Photoshopa nowe gradienty można załadować
o
O) wybierając narzędzie Gradient (Gradient Tool).
I
ra
o. Jak stworzyć obrazek w jednym odcieniu, np. w sepii?
Aby nadać obrazkowi jednolity odcień należy wybrać po-
lecenie Barwa/Nasycenie (Hue/Saturation) — [Ctrl]+[U].
Następnie suwakami: Barwa (Hue), Nasycenie (Saturation)
i Jasność (Brightness) należy zmieniać wartości parame-
trów dopóki obrazek nie nabierze pożądanego odcienia.
Należy również pamiętać o włączeniu opcji Koloruj (Colori-
ze), aby na bieżąco mieć podgląd obrazka.
28
luty/marzec 2004
Jak zrobić własne pluginy?
Najprostszą metodą zrobienia nowych filtrów jest użycie
wtyczki FilterFactory z płyty instalacyjnej Photoshopa. Ma
ona tę zaletę, że zapisywane opisy plików mogą być uży-
wane na wszystkich platformach. Minusem jest to, że Filter-
Factory jest raczej wolny, ograniczony i nie do końca intu-
icyjny. Pewne interesujące efekty można także uzyskać za
pomocą wbudowanego filtru Custom, a jego pliki ustawień
również są przenośne.
Najbardziej elastyczną metodą jest zainstalowanie Pho-
toshop Software Developer's Kit (SDK) i samodzielne na-
pisanie wtyczek w języku C. Tak napisana wtyczka działać
będzie tylko na pojedynczej platformie, ale zawsze można
przekompilować ją i zrobić wersję również na inne platfor-
my. Metoda ta jest najpełniejsza i najszybsza, ale wyma-
ga pewnej znajomości programowania w języku C i mani-
pulacji obrazu.
Dlaczego nie można otworzyć menu Akcji?
Problem, który ma większość użytkowników Photoshopa,
ale jest na niego sposób. Jeżeli w katalogu Photoshopa jest
zapisane zbyt dużo akcji, menu Akcji staje się nieaktywne.
Rozwiązanie jest proste. Należy przenieść nowo skopiowa-
ne Akcje do innego katalogu na komputerze, ale poza kata-
log Photoshopa, część Akcji można pozostawić, jeżeli chce-
my żeby wczytywane były automatycznie. Menu Akcji po-
jawi się i będzie można wczytać nowe Akcje z dowolnego
miejsca w komputerze.
Jak zrobić cień do tekstu lub świecący tekst?
Należy w tym celu utworzyć nowy dokument z przezro-
czystym tłem (Transparent) i wpisać tekst na pierwszej war-
stwie. Przejść do menu górnego Warstwa/Styl warstwy/
Cień (Layer/Layer Style/Drop Shadow lub Inner Shadow).
Pojawi się okno z ustawieniami cieniowania, można dowol-
nie ustawić cień w zależności od potrzeb, kierunek padania
światła, rozproszenie itd.
Jeżeli nie chcemy żeby światło na naszym rysunku by-
ło tylko z jednego kierunku należy wyłączyć Oświetle-
nie Globalne (Use Global Light). Jeżeli chodzi o świecący
tekst należy w pierwszych fazach postępować, jak w przy-
padku cieniowania, ale dalej zamiast użycia cienia, używa-
my opcji Blask wewnętrzny (Inner Glow) i Blask zewnętrzny
(Outer Glow). Kolor światła należy sobie wybrać w zależno-
ści od potrzeb.
Jak zaznaczyć cały obraz w jednej warstwie?
Do zaznaczenia obrazu w warstwie należy najechać
kursorem na naszą warstwę w oknie Warstwy (Layers),
a następnie trzymając przycisk [Ctrl] kliknąć na nią. Moż-
na w następnych krokach tworzenia grafiki wykorzystać to
zaznaczenie przełączając się na inne warstwy i wypełnić to
pole np. jakimś kolorem.
Wszystkie skróty klawiaturowe są opisane praktycznie
w każdym podręczniku do Photoshopa. Polecam zapozna-
nie się choć zjednym z nich.
 Pluginy — recenzje

Co zrobić, jeżeli nie można uzyskać polskich znaków
w niektórych czcionkach np.: w postscriptowych firmy
Bitstream używanych z Photoshop 6.x lub 7.x CE
Problem wynika z kodowania czcionki. Rozwiązaniem
jest dopisanie informacji zmieniających domyślne trakto-
wanie czcionek przez Photoshop. Należy odszukać plik
lntlFontDB.txt (ulokowany w podkatalogu ..\CESupport) i do-
dać odpowiednie wpisy dla wszystkich interesujących nas
czcionek. Należy używać nazwy PostScript danej czcionki
— podanie złej nazwy spowoduje, że czcionka nadal będzie
żle funkcjonowała.
# przykład wpisu dla Photoshop CE dla Windows
"FuturaMdPL-Regular" type-wince unicode-0
"FuturaMdPL-Italic" type-wince unicode = 0
"BaskervillePL-Roman" type=wince unicode-0
"BaskervillePL-Italic" type-wince unicode-0
"BaskervillePL-Bold" type-wince unicode = 0
"BaskervillePL-BoldItalic" type-wince unicode = 0
Jeśli kiedykolwiek chcieliśmy uzyskać efekt układanki (puzzli) to trzeba było się na-
męczyć. Ewentualnie można było wykorzystać jeden ze styli dostępnych w podstawo-
wej palecie Photoshopa. Jednak w tym przypadku efekt nie zawsze będzie zadowala-
jący. Wtedy warto zaopatrzyć się w plugin firmy AV Bros — Puzzle Pro 2.0. Pozwala on
na uzyskanie efektu układanki na każdej wczytanej do Photoshopa ilustracji. Menu jest
proste i czytelne, bez trudu odnajdziemy w nim opcje jak zmiana wielkości kawałków
układanki, ich grubość, rozmiar kolumn i wierszy. Jest także możliwość zmiany kształtu
elementów układanki jaka ma się pojawić na naszej ilustracji. W zakładkach Se/ect oraz
Adjust znajdują się bardziej zaawansowane opcje pozwalające zmienić wygląd końco-
wego efektu. Jest możliwość wypełniania poszczególnych kawałków innymi kolorami
(Color overlay), nadanie efektu płaskorzeźby (Bevel), rozmycia (Motion Biur lub Caus-
sian Biur) czy też całkowitego usunięcia wybranych kawałków.
Plugin Puzzle Pro 2.0 daje nam sporo możliwości, jeśli będziemy szybko i bez proble-
mów chcieli uzyskać efekt układanki na naszej pracy. W tej kwestii jego możliwości są
ogromne. Jednak osiągnięcie nim jakichś innych efektów będzie prawie niemożliwe. Je-
śli zatem lubicie dodawać efekty typu „puzzle" do Waszych prac, to Puzzle Pro 2.0 bę-
dzie idealnym wyborem. Jeśli nie, to warto choćby go przetestować.
producent: AV BROS

# przykład wpisu dla Photoshop CE dla Mac OS

"BaskervillePL-Romanv type = macce unicode-0
"BaskervillePL-Italic" type-macce unicode = 0
"BaskervillePL-Bold" type=macce unicode = 0
"BaskervillePL-BoidItalic" type-macce unicode-0

UWAGA!!!
Jeśli czcionka ma odmiany np. Bold, Italie itd., to każda
czcionka musi mieć osobny wpis (inaczej niż w przypadku
InDesign).

Jak wykadrować zdjęcie?

Narzędzie Kadrowanie (Crop) służy do wycinania frag- PAGE CURL 1.2
mentów obrazka i kadrowania. Wybieramy narzędzie Ka-
druj (Crop) i rysujemy nim prostokąt, w którego centrum po- Uzyskanie efektu zawiniętego rogu przy pomocy programu Photoshop nie powinno
winien być wybrany przez nas fragment zdjęcia. Aby doko- sprawić problemów nawet jego mało zaawansowanym użytkownikom. Co nie ozna-
nać kadrowania, po narysowaniu prostokąta wciskamy na cza, że jest to proste i niepochłaniające zbyt wielkich ilości czasu. Jednak nie musimy
klawiaturze przycisk [Enter]. Narzędzie Crop zostało wypo- się męczyć. Wystarczy zaopatrzyć się we „wtyczkę" firmy AV Bros — Page Curl 1.2.
sażone również w możliwość nadawania proporcji kadrowa- Po zainstalowaniu tego filtru „zagniemy" rogi każdej kartki przy pomocy zaledwie kil-
nemu zdjęciu. ku kliknięć myszką.
Okno dialogowe jest bardzo proste w obsłudze. Wynika to z faktu, że do tego ty-
Jak narysować linię równoległą lub prostopadłą do kra- pu efektu nie potrzeba setek opcji. Po wybraniu filtra od razu możemy wybrać który
wędzi obrazka? z czterech rogów naszej ilustracji chcemy zawinąć. Jeśli nie interesują nas standar-
W tym celu w trakcie rysowania linii należy trzymać wci- dowe ustawienia to możemy zmienić kąt pod jakim będzie zawijany róg, oraz poziom
śnięty przycisk [Shift]. i kąt samego zawinięcia. Następnie naciskamy przycisk Apply. Pomimo, że efekt filtru
można stosować zarówno na całych ilustracjach jak i na wybranych warstwach jego
Jak zrobić przeźroczyste gify? możliwości są ograniczone. Po kilku minutach eksperymentów zobaczymy wszelkie
Należy utworzyć nowy obrazek, który ma przezroczyste możliwe warianty jakie możemy uzyskać. Jednak warto zaznaczyć, iż efekt końcowy
tło i można przystąpić do rysowania — to jest prosta meto- zawsze jest zadowalający.
da gdy chcemy utworzyć nowy, niezbyt skomplikowany rysu- producent: AV BROS
nek. Po utworzeniu rysunku należy zapisać go jako plik z roz-
szerzeniem .gil
Drugą możliwościąjestedytowanie już wcześniej utworzo-
nego rysunku. W tym celu otwieramy dowolny rysunek i usta-
wiamy tryb kolorów obrazka na tryb indeksowany — menu
Obrazek/Tryb/Kolor Indeksowany (lmage/Mode/lndexed Co-
lor). Za pomocą Magicznej różdżki (Magie Wand) lub inne-
go narzędzia selekcji, zaznaczamy te fragmenty, które mają
być przeźroczyste i wciskamy klawisz [Delete]. Dla dokład-
niejszego zaznaczenia można powiększyć rysunek posługu-
jąc się lupą.

Marcin Wardęga

Dariusz Pasturczak
 NARZĘDZIA

15 min

film
Narzędzia
pliki

Podstawowym rodzajem zaznaczenia w Photoshopie jest

y ; Tomasz Zelek
Każdy program graficzny, zarówno taki,
który przeznaczony jest do tworzenia grafiki
2D/3D czy animacji, posiada paletę będącą
/zbiorem narzędzi, umożliwiających edycję
obrazu. Przyjrzymy się bliżej narzędziom
• selekcji w Photoshopie 7.0, czyli zaznaczaniu
prostokątnemu, eliptycznemu, swobodnemu
oraz różdżce.
Dl
-o
s.
5
elekcja prostokątna i owalna. Do jej wykonania służą
larzędzia Zaznaczanie prostokątne (Rectangular Marquee
Tool) oraz Zaznaczanie eliptyczne (Elliptical Marquee Tool).
Oba działają na podobnej zasadzie, a jedyną różnicą mię-
dzy nimi jest kształt zaznaczenia, które wykonujemy, kli-
kając na rysunku i przeciągając kursor myszy w przeciw-
legły róg przyszłej selekcji. Po zwolnieniu klawisza myszy
naszym oczom ukaże się delikatne obramowanie w posta-
ci migającej przerywanej linii. Od tej pory wszelkie zmiany,
jakie będziemy wprowadzać na obrazie, ograniczone zosta-
ną do zaznaczonego obszaru. Pozwala to na edycję jedy-
nie fragmentu rysunku, bez naruszania przy tym jego pozo-
stałej części.
Oba narzędzia do zaznaczania posiadają własny pasek
z ustawieniami, widoczny u góry ekranu. Po jego lewej stro-
nie widzimy cztery ikony, umożliwiające kolejno: tworzenie
nowej selekcji (New selection), dodawanie selekcji do już
istniejącej (Add to selection), odejmowanie selekcji (Sub-
tract from selection) i wyciąganie części wspólnej (Inter-
sect with selection). Funkcja Wtapianie (Feather) pozwa-
la na zmiękczenie brzegów zaznaczenia, domyślna war-
tość 0 pikseli oznacza, że krawędzie zaznaczonego obsza-
ru będą wyglądały dokładnie tak, jak obramowanie selekcji.
Pozycja Wygładzony (Anti-aliased) odpowiada za wygła-
dzanie brzegów zaznaczenia, natomiast Style za jego styl.
Dostępne mamy trzy style: Zwykły (Normal) — swobodne
zaznaczanie prostokątów i owali, Stałe proporcje boków
(Fixed Aspect Ratio) — zaznaczanie z zachowaniem pro-
porcji oraz Określona wielkość (Fixed Size) — umożliwiają-
ce podanie dokładnych wymiarów selekcji.
Narzędzie Różdżka (Magie Wand Tool) zaznacza obsza-
ry o identycznym lub zbliżonym odcieniu barw. Selekcję
tworzy się, klikając w wybranym miejscu obrazu, co spo-
woduje zaznaczenie wszystkich pikseli posiadających kolor
zbliżony do tego, jaki posiadał wskazany punkt. Tolerancję
kolorów zmieniamy w opcjach narzędzia — im będzie ona
większa, tym więcej pikseli zostanie zaznaczonych. Jeżeli
podamy wartość 0, wówczas na rysunku zaznaczone zosta-
ną piksele posiadające dokładnie taki kolor, jak wskazany
przez nas. Opcja Wygładzony (Anti-aliased) odpowiada za
wygładzanie krawędzi selekcji, warto ją zaznaczyć, jeśli nie
chcemy uzyskać poszarpanych brzegów danego elemen-
tu. Ciągły (Continuous) to funkcja pozwalająca zachować
ciągłość zaznaczenia. Oznacza to, że zaznaczone zosta-
ną piksele znajdujące się w pobliżu miejsca, które wskaza-
liśmy. Jeśli wyłączymy tę opcję, selekcji zostaną poddane
wszystkie piksele znajdujące się na całym obrazku. Ostat-
nia pozycja Wszystkie warstwy (Use Ali Layerś) pozwala na
zaznaczanie wybranych pikseli na wszystkich warstwach
jednocześnie.

30
luty/jfiarzec 2004
 tu
ai

Zaznaczanie proste

Naszą pracę zaczniemy od wykonania prostego, owalnego zazna-

czenia, obejmującego górną część kubka. Utworzoną selekcję mo-
żemy swobodnie przesuwać przy pomocy myszy i strzałek kurso-
ra tak, by znajdowała się ona w odpowiednim miejscu. Aby nie utra-
cić selekcji, zapisujemy ją jako kanał Alfa, dzięki czemu będziemy
mogli ją przywrócić podczas dalszej pracy. W tym celu w palecie
Kanały (Channels), na dolnym pasku klikamy na ikonie Zapisz zazna-
czenie jako kanał (Save selection as channef). Teraz przy pomocy
Zaznaczenia eliptycznego (Elliptical Marquee Tool) zaznaczamy dolną
część kubka. Następnie dodajemy obie selekcje tak, by uzyskać jed-
ną, zawierającą oba fragmenty. Klikamy na utworzonym wcześniej ka-
nale Alfa, trzymając wciśnięte klawisze [Shift] i [Ctrl], w ten sposób łą-
czymy oba zaznaczenia.

Lasso wielokątne

Do zaznaczenia boków kubka wykorzystamy Lasso wielokątne

{Polygonal Lasso Tool), umożliwiające wykonywanie swobodnych,
wielobocznych zaznaczeń. Selekcję tworzymy klikając w miejscu bę-
dącym jej początkiem, i stawiając kolejne punkty, które połączymy li-
niami prostymi. Zaznaczenie zawsze kończymy w miejscu, w którym
je zaczęliśmy. Aby zaznaczyć boki kubka, klikamy z lewej strony gór-
nej selekcji. Robimy to przy wciśniętym klawiszu [Shift], aby nie utra-
cić dotychczasowego zaznaczenia. Następnie puszczamy [Shift] i kli-
kamy kolejno z lewej i prawej strony dolnej selekcji, potem z prawej
strony górnej i na końcu w miejscu, gdzie zaczęliśmy selekcję.

Lasso magnetyczne

Zaznaczamy ucho kubka, wykorzystując Lasso magnetyczne

(Magnetic Lasso Tool), które przyciąga brzegi selekcji do miejsca
0 największej różnicy barw — działa ono niemal automatycznie, na-
sze zadanie ogranicza się do prowadzenia kursora wzdłuż krawę-
dzi obiektu. Przystępujemy do zaznaczania trzymając klawisz [Shift]
1 klikając w miejscu będącym początkiem ucha. Następnie puszcza-
my zarówno [Shift], jak i klawisz myszy, i przesuwamy kursor wzdłuż
obiektu, obrysowując całe ucho kubka. Lasso magnetyczne dzia-
ła podobnie jak wielokątne, ale tu Photoshop stawia punkty automa-
tycznie, domyślnie co 10 pikseli. Wartość tę można zmienić na pasku
ustawień narzędzia.

o
di

•
Odejmowanie selekcji ro
73 '

Pozostało nam jedynie wycięcie zaznaczenia znajdującego się we-

wnątrz ucha kubka. Skoro selekcje można do siebie dodawać, to
można je również od siebie odejmować. Odejmowanie wykonuje-
my z klawiszem [Alt]. Najprościej zrobić to przy pomocy Lassa ma-
gnetycznego — wciskamy klawisz [Alt] i klikamy wewnątrz ucha, prze-
suwając kursor wzdłuż jego krawędzi. Tym sposobem zaznaczymy
cały kubek, który teraz możemy np. wyciąć i wkleić do innego
rysunku. •

?
luty/marzec 2004
31
 FOTOGRAFIA CYFROWA

10 min
Usuwanie efektu mory
Lech Jaszowski
film
Efektem mory nazywamy występowanie charakterystycznej siatki w postaci szarych punktów
pliki powstałe wskutek interferencji siatek punktów lub linii rastrowych wykonywanej kliszy z liniami
rastra oryginału. Tutonal ten pokaże Wam jak ten nieestetyczny efekt usunąć.

Analiza kolorów

Aby zmniejszyć efekt mory, powinno się skanować rastrowany orygi-

nał pod kątem 45 stopni z największą rozdzielczością optyczną, ob-
sługiwaną przez skaner. Następnie należy z powrotem obrócić zdję-
cie i zmienić rozdzielczość obrazka do potrzebnych rozmiarów. Jeżeli
efekt nadal nie jest zadowalający zaczynamy obróbkę zdjęcia. Na po-
czątku naszej pracy musimy dokładnie zanalizować poszczególne ka-
nały kolorów (używamy do tego celu kombinacji klawiszy: [Cfr/]+[7],
[Ctr!\+[2] i [Cfr/]+[3]), następnie wybieramy najgorszy z nich. W na-
szym wypadku najwyraźniejszy wzór mory występuje w kanale nie-
bieskim. Zastosujmy filtr Rozmyj gaussowsko (Gaussian Biur) o ta-
kiej wartości, aby wzór mory zniknął. W tym przykładzie użyliśmy war-
tości 2.

Poprawianie ostrości obrazy

Następnie wybierzmy filtr Filtr>Szum>Mediana (Filter>Noise>

Median) z wartością promienia równą 2. Później wybierzmy Filtr>
Wyostrzanie>Wzmocnienie (Filter>Sharpen>Unsharp Mask) z pa-
rametrami odpowiednio: Ilość (Amount) 200%, Promień (Radius) 2,
Próg (Threshold) 0. Zasada jest taka, że wartość promienia powinna
być równa wartości filtru rozmycia gaussowskiego z kroku pierwsze-
go, a wartość Próg (Threshold) powinna wynosić 0.

Kanał zielony i czerwony

Po wykonaniu powyższych czynności przechodzimy do kanału zie-

lonego klikając na symbol warstwy z tym kanałem w palecie Kanały
(Channels). Zastosujmy Filtr>Rozmycie>Rozmyjgaussowsko
(FilterBlur>Gaussian Biur), ustawiając wartości 1,3. Następnie wy-
bierzmy Filtr>Wyostrzanie>Wzmocnienie (Filter>Sharpen>Unsharp
Mask) z parametrami odpowiednio: 200%; 0,5; 0. Teraz przechodzimy
do kanału czerwonego. W kanale czerwonym ponownie zastosuje-
my Filtr>Rozmycie>Rozmyjgaussowsko (Filter>Blur>Gaussian Biur),
ustawiając jego wartość na 0,8.

Efekt końcowy

i
o
Na koniec przechodzimy do widoku łącznego w trybie RGB, używa-
"O jąc do tego kombinacji klawiszy [Cfr/]+[~] i wybieramy Filtr>Wyostrza-
/l nie>Wzmocnienie (Filter>Sharpen>Unsharp Mask), ustawiając pa-
rametry odpowiednio: 100%; 0,5; 0. Porównajmy wersję fotografii
z morą i bez niej: wybierzmy Obrazek>Powiel (lmage>Duplicałe) i cof-
nijmy historię oryginalnego pliku poprzez kliknięcie w palecie Historia
(History) na miniaturce umieszczonej na samej górze. Wadąjest to,
że ostrość fotografii po obróbce będzie niestety mniejsza niż na po-
czątku. •

32
luty/marzec 2004
. L.
 FOTOGRAFIA
CYFROWA
Kupujemy aparat
Dominik Maciaszek

Fotografia jako technika rejestrowania obrazu ma za sobą blisko

150-letnią historię pełną przełomów, zwrotów, pojawiających się
i ginących tendencji, mód i technik. Na początku postrzegano jąjako
wielkie zagrożenie dla malarstwa, by po czasie przyznać jej doży-
wotnie miejsce w panteonie sztuk wysokich. Tamte spory wyga-
sły gdy fotografia stała się częścią życia codziennego, głównie za
sprawą fotograficznych ilustracji prasowych, ale zastąpiły je nowe
o dość podobnej naturze. Obecnie jesteśmy świadkami decydują-
cego starcia tradycjonalistów, którzy uznają tylko klasyczne tech-
niki ciemniowe oraz zwolenników nowoczesnych technologii, któ-
rzy zamiast kuwet z chemikaliami wolą monitor komputera. Pierw-
si posługują się bardzo zasadnym argumentem, iż cyfrowa reje-
stracja obrazu nie dorównuje jakością zapisowi na błonie filmowej.
Drudzy mają rację mówiąc, że jest to jakość w zupełności wystar-
czająca, a atuty takie jak szybkość pracy, możliwości edycji obrazu
czy znacznie tańsza eksploatacja zdecydowanie przeważają. Moż-
na się domyślać, że tak jak nie umarło malarstwo, tak fotografia tra-
dycyjna będzie zawsze miała wierną grupę miłośników. Ale era foto-
grafii cyfrowej już nastała, a jej niebywały rozwój fascynuje każde-
go, kto choć trochę interesuje się otaczającym go światem.
Technologia cyfrowa jest odpowiedzią na takie potrzeby jak szyb-
ki przekaz danych i natychmiastowa informacja. Klasycznym już
przykładem jest tu zdjęcie wykonane przez fotoreportera na linii
frontu, które po 5 minutach publikuje się w sieci, a po następnych
pięciu jest gotowe do druku wielkonakładowego. Inny przykład to
praca w studio reklamowym, gdy kilkunastoosobowa ekipa pracu-

/'• I je kilka dni nad „tym jednym" ujęciem - szybki podgląd efektów jest
tu wręcz zbawienny. Jeszcze bardziej doniosłym faktem od same-
go powołania fotografii cyfrowej do życia jest jej udomowienie. Jak
podają statystyki blisko 50% użytkowników aparatów na film dekla-
ruje, że w razie usterki wymienią go na sprzęt cyfrowy.
Niezależnie od tego czy zaliczamy się do grona entuzjastów
czy przeciwników „cyfry" warto pamiętać, że aparat cyfrowy to
przede wszystkim narzędzie, a sposób jego wykorzystania zależy
wyłącznie od pomysłowości i warsztatu fotografującego. Możliwość
natychmiastowego podglądu obrazu na ekranie aparatu to skarb dla
początkujących fotoamatorów, ale z drugiej strony, jak mówi stare
powiedzenie, nic tak nie motywuje do nauki jak kilka zmarnowanych
rolek filmu. Słowem, na wyniki i zadowalające efekty trzeba zapra-
cować niezależnie od tego z jakiego sprzętu korzystamy. Nowa
technologia to nowe zagadnienia, nowa terminologia, a dalej, nowa-
torskie podejście do tematu i sposobu pracy. W prezentowanych tu
artykułach postaramy się przybliżyć tematykę związaną z cyfrową
rejestracją i przetwarzaniem obrazu oraz sztuką fotografii, także tej
tradycyjnej, w ogóle.
 Parametry aparatów cyfrowych
ROZDZIELCZOŚĆ
Sę w jakim formacie będziesz najczęściej robić od-
bitki Wymagana dla standardowej odbitki rozdzielczość wyno-
si 300 jdpLW zatem zdjęcie 2 MP (1600 x 1200) jest optymal-
ne dla-odbitki 1 0 x 1 5 cm; zdjęcie z aparatu o rozdzielczości
3 MP (2048 x 1536) odpowiada odbitce 13 x 18 cm; rozdziel-
czość 4 MP (2272 x 1704) przeznaczona jest do odbitek for-
matu 18 x 24cm; 5 MP (2560 x 1920) wystarczy do wydruków
A4. Są to wartości optymalne, ale można dopuścić tu pewną
tolerancję, np. z pliku o wymiarach 1600 x 1200 można wyko-
nać odbitkę 15x21 cm i mniej wprawny obserwator nie odczu-
je różnicy w jakości. Pamiętaj, że nie warto zabijać się o kolej-
ny milion pikseli.
ERGONOMIA
Jeśli lubisz mieć aparat zawsze przy sobie, rozejrzyj się za
czymś dyskretnym. Obecnie nawet miniaturowe konstrukcje
oferują taką samą funkcjonalność jak ich większe odpowiedniki.
Jednak pokaźmejsze rozmiary obudowy wiążą się z lepszą sta-
bilnością oraz lepszymi parametrami optyki. Większe kompakty
lub aparaty lustrzankopodobne (mniejsze niż zwykła lustrzan-
ka, ale o podobnym kształcie) nie zmieszczą się w kieszeni, ale
na pewno zrobisz nimi lepsze zdjęcia. A jeśli jesteś już szczęśli-
wym posiadaczem optyki systemowej (kolekcji obiektywów jed-
nego producenta) — zainwestuj w lustrzankę cyfrową.
PODGLĄD
W kojTipaktach cyfrowych do podglądu fotografowanego obra-
zu można uzywac albo monitora LCD albo wizjera. Ten pierw-
szy sposób wtąze się z dużym zużyciem energii. Natomiast ce-
lowniki optyczne czyli zwykłe „okienka podglądowe" cierpią
najczęściej na wadę paralaksy. Wynika ona z tego, że obraz
w celowniku nie jest dokładnie tym, który „widzi" aparat przez
oko obiektywu. Wybawieniem są tu wizjery elektroniczne (EVF
od ang. Electronic Viewfinder), które są pomniejszoną wersją
monitora i wyświetlają obraz rzeczywisty. Jeśli zdecydujemy się
na takie rozwiązanie zwróćmy uwagę na częstotliwość odświe-
żania obrazu — powinna ona nadążać nawet za szybką zmia-
ną pozycji aparatu.
CZUŁOŚĆ
Bardzo istotnym, a często omijanym podczas zakupów para-
metrem aparatu cyfrowego jest oferowana czułość Zwykłe fil-
my mają stałą wrażliwość, np. ISO 100 do zdjęć w słonecznych
plenerach lub ISO 400 do zdjęć w pomieszczeniach. Cyfrówka
powinna posiadać opcję zmiany czułości w dowolnym momen-
cie, a specyfikacja sprzętu określa maksymalny jej zakres.
Dobre aparaty amatorskie dysponują wartościami od ISO 50
do ISO 400. Pamiętajmy przy tym, że im większa czułość tym
większa ziarnistość obrazu, a zatem nie tylko górny parametr
jest istotny.
psd
luty/marzec 2004
OBIEKTYW
Przeć zakupem aparatu należy zwróć uwagę na konstruk-
cję obiektywu — najlepiej by była szklana, a w całym ukła-
dzie optycznym uwzględniono soczewki asferyczne lub ni-
skodyspersyjne. Możliwość szybkiego zbliżenia to największy
skarb fotografującego i podstawowe narzędzie pracy. Oceń ja-
ki zakres ogniskowych jest Ci potrzebny. Do fotografii we wnę-
trzach najlepszy jest obiektyw szerokokątny (np. 28 mm); do
zdjęć przyrodniczych przydaje się teleobiektyw (np. 200 mm).
Pamiętaj, że ogniskowa większa niż 200mm będzie wymagała
zastosowania dobrego statywu. Nie zwracaj uwagi na zoom cy-
frowy — skadrować zdjęcie możesz już na komputerze.
JASNOŚĆ
Drugi parametr w opisie obiektywu to jego jasność czyli najwięk-
szy dostępny otwór przysłony. Inaczej można to wyjaśnić jako
stratę światła generowaną przez konstrukcję optyki. Im większa
liczba tym jasność gorsza. Np. symbol 35-105 mm F2.8-F4.5
oznacza, że jasność przy najszerszym ujęciu (35 mm) wyno-
si F2,8, a przy maksymalnym zbliżeniu (105 mm) wynosi F4,5.
Ciąg wartości przysłony jest następujący: F1,0 (światło dosko-
nałe); F1,4; F2,0; F2,8; F4,0; F5,6; F8.0; F11.0 itd. Każda kolej-
na liczba tego ciągu oznacza 2-krotne zaciemnienie w stosun-
ku do liczby poprzedniej. Najlepsze (i najdroższe) są obiektywy
ze stałą jasnością dla całego zakresu ogniskowych.
TRYBY PRACY
Aparat powinien być dobrany na wyrost w stosunku do Twoich
aktualnych umiejętności. Nie równaj w dół, bo może się szyb-
ko okazać, ze kupiłeś model nie posiadający dokładnie tej funk-
cji jakiej potrzebujesz. Aparaty dzielą się na takie, które ma-
ją lub nie mają manualnych trybów ekspozycji. Chodzi tu o try-
by: priorytetu czasu, priorytetu migawki oraz manualny (ręczne
ustawienie obu parametrów). Modele posiadające wyłącznie
program Auto oraz kilka programów tematycznych (Portret,
Krajobraz itd.) przeznaczone są dla początkujących lub mniej
wymagających użytkowników. Sam zdecyduj czy... będziesz do
nich należeć także pół roku po zakupie aparatu.
KOREKTA
Podczas fotografowania bardzo przydaje się też możliwość ko-
o
rekty parametrów obrazu. Oczywiście zmian można dokonać di
ro
także na komputerze, ale praktyka pokazuje, że lepsze efek-
•o
ty osiągniemy korzystając z ustawień na poziomie aparatu. U)
CL
Najczęściej spotykamy korektę ostrości, nasycenia oraz kon- i
trastu. Niektóre aparaty posiadają też funkcję zmiany tonacji,
a także tryby kolorów (czarno-białe, sepia). Ważne jest też ilu
skokowa jest korekta (przynajmniej od -1 do +1 dla każdego
parametru. Zaawansowane aparaty oferują także wybór prze-
strzeni barwnej (Adobe RGB, sRGB) istotnej przy wykorzysta-
niu zdjęć w poligrafii.
 FOTOGRAFIA CYFROWA
FUNKCJONALNOŚĆ
Przed zakupem upewnij się czy odpowiada Ci funkcjonalność
aparatu. Tak samo ważne jak układ przycisków jest to, czy mo-
żesz instynktownie poruszać się po menu, czy znalezienie
określonej funkcji nie nastręcza problemów lub czy aparat do-
brze leży w dłoni. Zwróć uwagę czy przyciski dobrze reagują na
Twoje „polecenia". Oceń możliwość pracy jedną ręką oraz przy-
datność do długiej sesji fotograficznej.
JAKOSC OBRAZU
Jakość obrazu jako najistotniejsza właściwość każdego apa-
ratu powinna znaleźć się na samym początku naszego wykła-
du. Niestety, trudno jest ocenić ją podczas zakupów, a zatem
musisz poświęcić trochę czasu na lekturę dostępnych testów
i oglądanie tzw. sampli. Zwróć wtedy uwagę na wierność od-
wzorowania kolorów, poziom nasycenia i kontrastu przy stan-
dardowych ustawieniach, płynność przejść tonalnych na płasz-
czyznach o mało zróżnicowanej palecie barw, poziom ziarni-
stości przy wysokich czułościach oraz ostrość. Możesz pobrać
fotografię zrobioną testowanym modelem w pełnej rozdzielczo-
ści i wykonać tradycyjną odbitkę. Przekonaj się czy jakość zdję-
cia spełnia Twoje oczekiwania.
CENA
Jeśli wiesz już wszystko na temat swojego wymarzonego apa-
ratu cyfrowego... kup skarbonkę. Niezmiennie największą wa-
dą zaawansowanego sprzętu jest jego wysoka cena. Obecnie
minimalny koszt przyzwoitego aparatu będzie nie mniejszy niż
1500 PLN. Jeśli myślisz o czymś poważniejszym przygotuj się
na wydatek rzędu 3000-4000 PLN. Najtańsze lustrzanki cyfro-
we są do kupienia już za 5500 PLN, ale przyda się jeszcze do-
datkowy obiektyw. Pocieszeniem jest to, że można znaleźć
coraz więcej ofert specjalnych, np. na aparaty wysokiej kla-
sy, które są wycofywane z produkcji. Zapoznaj się z warunka-
mi gwarancji, dołączanymi akcesoriami i sprawnością sprzętu
przed zakupem. Jeśli poświęcisz na to trochę czasu będziesz
cieszyć się swoim aparatem przed długie lata. Przynajmniej do
czasu aż zauroczy Cię jakaś nowinka...
ZŁĄCZA
Praktycznie wszystkie cyfrówki wyposażone są w złącze USB,
za pomocą którego przerzucimy zdjęcia z aparatu do kompute-
ro
ra. Jeśli zależy nam na szybkości to powinniśmy szukać sprzę-
"a
CL
tu ze złączem USB 2.0 (kilkakrotnie szybszego od USB 1,1).
Wyjście Video (Video out) przyda się jeśli chcemy przeglądać
zdjęcia na ekranie telewizora. Z kolei symbol DC-IN w opisie
złącz aparatu oznacza, że istnieje opcja podłączenia zasilania
sieciowego. Jako miłośnik sportów ekstremalnych powinieneś
zwrócić uwagę na to czy złącza aparatu są dobrze osłonięte
przed czynnikami zewnętrznymi. Najlepiej sprawdza się gumo-
wa zaślepka przyczepiona na stałe do obudowy.
36
luty/marzec 2004
LAMPA BŁYSKOWA
Wbudowana lampa błyskowa jest bardzo pożądana. Jeśli cho-
dzi o jej parametry to pierwszą sprawą jest jej moc, czyli za-
sięg skutecznego świecenia. Powinien on wynosić nie mniej niż
2.5 m. Ważną funkcją jest tu korekta mocy błysku czyli możli-
wość zmniejszenia lub zwiększenia intensywności świecenia.
Sprawdź też czy lampa nie jest ulokowana za blisko obiektywu
(ryzyko „czerwonych oczu") lub zbyt blisko boku aparatu (ryzy-
ko przysłaniania lampy palcem). Najlepszym rozwiązaniem jest
lampa zewnętrzna, ale żeby ją zastosować aparat musi posia-
dać stopkę akcesoriów. Skoro jesteś już zaawansowanym fo-
tografem sprawdź typ realizowanego systemu pomiaru światła
błyskowego (np. E-TTL) oraz zgodność z dedykowanymi lam-
pami.
SZYBKOŚĆ
Na funkcjonalność aparatu składają się obsługa oraz szybkość
jego działania. Chodzi tu po pierwsze o czas startowy, czyli
okres od włączenia aparatu do osiągnięcia pełnej gotowości do
pracy. Kolejną sprawąjest szybkość pomiaru ostrości oraz czas
opóźnienia migawki (okres między naciśnięciem spustu, a fak-
tycznym wyzwoleniem migawki).
Warto też zwrócić uwagę na szybkość zapisu zdjęć na kar-
cie pamięci — najlepiej wykonać serię i zbadać po jakim cza-
sie aparat będzie gotowy do wykonania serii następnej. Każda
grupa sprzętowa oferuje inne osiągi, dlatego najlepiej kiero-
wać się własnym odczuciem. Zasada „doboru na wyrost" cią-
gle obowiązuje...
ZASILANIE
Zasilanie uważane jest powszechnie za piętę achillesową fo-
tografii cyfrowej. Niemniej w ostatnim czasie producenci robią
wiele by zmienić ten stan rzeczy. Dobrze jeśli zestaw zawiera
akumulatory oraz ładowarkę Czasem są to „paluszki" NiMH,
ale jeszcze lepiej gdy dostaniemy akumulator litowo-jonowy de-
dykowany specjalnie do konkretnego modelu. Gwarantuje on
dość spokojną pracę w terenie (nawet do 600 zdjęć). Jeśli w ze-
stawie nie ma żadnego źródła zasilania powinniśmy od razu za-
inwestować w doładowywane baterie. Do pracy w pomieszcze-
niu idealne jest zasilanie sieciowe (oznaczenie DC-IN w opisie
aparatu). Zasilacz rzadko jest częścią zestawu i trzeba go do-
kupić.
FORMATY
Zwroc uwagę na formaty zapisu obrazu oraz poziomy kom-
presji plików JPEG. Dobrze jeśli są to przynajmniej trzy róż-
ne jakości Pozwoli to na sensowne gospodarowanie pamięcią.
Niektóre aparaty cyfrowe oferują także zapis bezstratny RAW
oraz TIFF, które to przeznaczone są do zaawansowanej edy-
cji obrazu.
 EFEKTY

(V)
20 min

film

pliki

Mariusz Dubielecki (Akira)

Nasze ingerencje w zdjęcia i rysunki polegające na fotomontażu, uzyskiwaniu efektów specjalnych,

stylizacji czy polepszaniu wizualnej jakości zdjęć przy użyciu programu Photoshop, nieodłącznie
związane są z tworzeniem warstw, ich przekształcaniem i nakładaniem na siebie. Tutońal ten
pokaże, jak przy niewielkiej ingerencji w warstwy i przy użyciu prostych narzędzi można uzyskać
ciekawy, atrakcyjny i nieszablonowy efekt

Zaczynamy

Pracę zaczynamy od otworzenia naszego zdjęcia, które chcemy

poddać przeróbce. Możemy to zrobić w dwojaki sposób. Klikając na
zakładkę Plik>Otwórz (File>Open..), lub używając kombinacji kla-
wiszy [Ctrl\+[O]. Następnie uaktywniamy okno warstw (Layers) za
pomocą zakładki Window>Layers. Teraz, gdy już uaktywnione zo-
stało okno warstw (Layers) możemy przystąpić do powielenia war-
stwy z naszym zdjęciem, która stanowi tło.

Powielanie warstw

Aby powielić warstwę ze zdjęciem, klikamy na zakładkę

o Warstwa>Powiel warstwę... (Layer>Duplikate Layer...) i kolejno na-
di
E dajemy jej jakąś nazwę. Aby nie pogubić się w warstwach i zacho-
wać przejrzystość oraz porządek, proponuję nadawać warstwom na-
zwy bezpośrednio związane z rzeczami i elementami, których doty-
czą. W naszym przypadku jest to kotek, więc taką nazwę nadajemy
nowo utworzonej warstwie. Wyżej opisaną czynność klonowania
warstw dokonujemy ze względu na fakt, iż chcemy wyciąć ze zdjęcia
obiekt (w tym przypadku kota), poddać go termowizyjnej metamorfo-
zie, a następnie warstwę z tak zmodyfikowanym kotem nałożyć po-
nownie na tło tzn. na warstwę z naszym zdjęciem.

38
luty/marzec 2004
 /o

.OJ

Obrysowywanie obiektu

Wycinamy kota z warstwy kołek — włączamy zakładkę Filtr>

Wydziel... (Filter>Extracł...) lub używając skrótu klawiszowego
[/Vf]+[Cfrf]+[X]. Znajdujemy się obecnie w oknie Extract, gdzie za po-
mocą narzędzia Flamaster (Edge Highlighter Tool) i po uprzednim
ustawieniu odpowiedniej jego grubości, czyli Brush Size (proponu-
jemy wybrać wielkość między 4 a 8), obrysowujemy naszego kotka.
Ważne jest dokładne obrysowanie wycinanego obiektu. Nie mogą
istnieć żadne przerwy. W przypadku problemów z precyzją i dokład-
nością przy wykonywaniu wyżej opisanej czynności, możemy sobie
pomóc używając narzędzia Lupy (Zoom tool).

Wypełnienie

Po wykonaniu powyższych czynności musimy użyć narzędzia

Wiaderko (F/7/ Tool) i wypełnić wcześniej obrysowane elemen-
ty. Program wytnie jedynie wypełnione fragmenty zdjęcia (do wy-
cięcia używamy kombinacji klawiszy [Cfrf]+[X]). Dlatego tak waż-
ne było dokładne obrysowywanie, żeby jakaś mała szczelinka, lub
przerwa nie spowodowała wypełnienia i zaznaczenia do wycię-
cia całego zdjęcia, zamiast jedynie naszego przykładowego kotka.
Potwierdzamy przyciskiem [OK\.

Podkład

W tym kroku przeprowadzimy pierwszy etap stylizacji naszego pod-

kładu, czyli warstwy Background (warstwa z naszym nie przerabia-
nym do tej pory jeszcze zdjęciem), na widok z kamery termowizyj-
nej. W związku z tym całe otoczenie - poza żywymi istotami i obiek-
tami emitującymi ciepło - musimy ukazać w nocnych, ciemnych
i niewątpliwie zimnych barwach. W tym celu, wyłączamy widocz-
ność warstwy kotek poprzez kliknięcie na przycisk Wskazuje na wi-
dzialność maski (Indicates layer visibility) znajdujący się po lewej
stronie warstwy (symbol oka), a następnie zaznaczamy warstwę
Background, żeby była podświetlona.

Dopasowywanie kolory

Następnie przechodzimy do ustawień Barwy i Nasycenia. Kolejno

wybieramy zakładkę Obrazek>Dopasuj>Barwa/Nasycenie...
{lmage>Adjustments>Hue/Saturation...). Możemy również posłużyć
się skrótem klawiszowym [Ctr!\+[U\. Znajdując się w oknie Barwa/
Nasycenie (Hue/Saturation), zaznaczmy opcję Koloruj (Colorize),
po czym ustawiamy następujące wartości: Barwa (Hue): 235;
Nasycenie (Saturation): 40; Światło (Lightness): -30. Następnie
wszystkie nasze ustawienia i całą operację zatwierdzamy przyci-
skiem [OK].

Zmiana ostrości
O)
Teraz przystąpimy do drugiego i ostatniego etapu w procesie styli-
T3
zacji naszego tła na widok termowizyjny. A mianowicie spowoduje-
my w niewielkim stopniu zmniejszenie ostrości obrazu, dzięki cze-
mu uzyskamy ciekawszy i sugestywniejszy efekt. Do rozmazania
posłuży nam filtr Rozmycie gaussowskie Filtr>Rozmycie>Rozmycie
gaussowskie (Filter>Blur>Gaussian Biur) - sugeruję używać warto-
ści miedzy 2 a 5. Gdy otrzymamy satysfakcjonujący nas już rezul-
tat, to całą operację standardowo musimy jedynie jeszcze potwier-
dzić przyciskiem [OK].

39
luty/marzec 2004
 EFEKTY

Termowizja

Zmniejszamy ostrość obrazu na warstwie kotek. Czynność roz-

mazania w niewielkim stopniu naszego kotka jest niezbędna, gdyż
chcemy w późniejszym procesie nakładania barw uzyskać plastycz-
ny rozkład kolorów, które będą symbolizować różną ciepłotę i tem-
peraturę poszczególnych elementów i narządów ciała. Wyłączamy
widoczność warstwy Background (symbol oczka po lewej stronie
warstwy, który musi zniknąć) i włączamy widoczność warstwy kotek.

Termowizja cd.

Teraz przyszła pora na termowizyjną metamorfozę obrazu. W celu

uzyskania zamierzonego efektu musimy zaznaczyć warstwę kotek.
Następnie używamy zakładki Filtr>Rozmycie>Rozmycie gaussow-
skie (Filter>Blur>Gaussian Biur). W tym przypadku wartością w zu-
pełności wystarczającą będzie 2. Trzymając wciśnięty klawisz [Ctrl],
klikamy na warstwę kotek i zaznaczamy cały obiekt do dalszej ob-
róbki. Klikamy jeszcze na przycisk Utwórz nową warstwę korekcyj-
ną lub wypełnienia (Create new fill or adjustment layer) znajdujący
się na samym dole w oknie Warstwy (Layers) - (przycisk ten symbo-
lizowany jest przez okrąg w jednej połowie biały a w drugiej czarny)
i wybieramy opcję Mapa gradientu (Gradient Map...)

Kolory

Następnie z rozwijanego menu aktywujemy opcję Tęcza przezroczy-

sta (Transparent Rainbow). Jeśli nie odpowiada nam standardowe
rozmieszczenie barw, zmieniamy je, zaznaczając opcję Odwrotnie
(Reverse), w wyniku czego kolory zostaną odwrócone. Jeśli nie je-
steśmy zadowoleni z wyglądu naszego obiektu, możemy zadecy-
dować o innym rozłożeniu barw i ich procentowym udziale w zdję-
ciu, poprzez kliknięcie na symbol wybranej wcześniej przez nas ma-
py kolorów Tęcza przezroczysta (Transparent Rainbow). Będąc
w oknie Edytor gradientów (Gradient Editor), za pomocą suwaków
ustalamy położenie poszczególnych kolorów i ich procentowy udział
w obiekcie. Zatwierdzamy nasz wybór przyciskiem [OK].

Ustawienie jasności

Wreszcie przyszła pora na końcowe „szlify" związane z termo-

wizyjnym kotkiem, tzn. będziemy teraz dodawać lub odejmo-
wać — według własnego uznania i gustu — intensywność ko-
lorów, z których składa się nasz obiekt. W tym celu klikamy i za-
znaczamy warstwę kotek, by następnie posłużyć się zakładką
Obrazek>Dopasuj>Jasność/Kontrast(lmage>Adjustments>Bright-
ness/Contrast). Za pomocą suwaków Jasność/Kontrast (Brightness/
Contrast) ustawiamy odpowiednie wartości i potwierdzamy [OK].

Dl Paski
O
di
ra Teoretycznie w tym momencie zakończyliśmy naszą pracę i może-
E
my już ją zapisać. Ale czy czegoś jeszcze nie brakuje? Przecież nie
możemy zapomnieć o paskach, które występują w obrazie telewizyj-
nym. W celu uzyskania wyżej wspomnianego efektu postępujemy
w następujący sposób: tworzymy nowy rysunek (będzie on wzorcem
linii, którymi pokryjemy zdjęcie), a następnie ustawiamy odpowied-
nie wartości: Szerokość (Width): 1 piksel; Wysokość (Height): 2 pik-
sele; Wypełnienie (Contents): Biały (White) i zatwierdzamy przyci-
skiem [OK].

40
luty/marzec 2004
 >s

CD

Zaznaczenie

Powiększamy maksymalnie nowo utworzony rysunek, używając na-

rzędzia Lupa (Zoom Tool). Narzędzie to możemy także wywołać,
używając skrótu klawiszowego [Z]. Następnie klikamy prawym przy- Name UMM-1
' CD
• knagi S i n — ~ [ ""canoe* )
ciskiem myszy na narzędzie Marquee Tool (znajduje się ono w le- PresetSees Gistom

wym górnym rogu okna z narzędziami) i wybieramy Rectangular Wtfth 1

Marguee Tool.

Wzorek

Zaznaczamy połowę naszego nowego rysunku. Następnie używa-

my zakładki lmage>Adjustments>lnvert lub skrótu klawiszowego
[Cfr]+[/] (chcemy, aby nasze paski były na przemian białe i czarne).
Zaznaczamy cały rysunek za pomocą zakładki Select>AII lub skró-
tu [Ctr/]+[/4]. Potem udajemy się do zakładki Edit>Define Pattern...,
gdzie nadamy nowo utworzonemu wzorkowi (Pattern) nazwę linia.
Całą operację akceptujemy przyciskiem [OK[. W tej chwili nie jest
już nam potrzebny nowo utworzony rysunek, wiec go zamykamy
bez zapisywania.

Wypełniania wzorkiem

Wybieramy narzędzie Wiaderko (Paint Bucked Tool) lub używa-

my skrótu klawiszowego [G], W uaktywnionym nowym oknie wy-
żej wspomnianego narzędzia ustawiamy następujące opcje: Fill>
Pattern; Pattern — nasz nowo utworzony wzorzec o nawie linia.
Resztę zostawiamy bez zmian. Tworzymy nową warstwę, używając
zakładki Layer>New Layer... i nadajemy jej nazwę paski. Możemy
się również posłużyć skrótem klawiszowym [Shft]+[Ctrl\+[N].
Wybieramy narzędzie Wiaderko lub używamy skrótu klawiszowego
[G]. A następnie wypełniamy zaznaczoną warstwę paski.

Zapisanie pracy

Mając zaznaczoną i wybraną warstwę paski, ustawiamy następu-

jące wartości: Layers - SoftLight; Opacity: 15%. Z wymienionymi
opcjami możemy poeksperymentować w celu uzyskania optymalne-
go efektu. Wartości, które zaznaczyliśmy, w tym wypadku najlepiej
nadawały się do wybranego zdjęcia. Ostatnią czynnością, jaką wy-
konamy, będzie upewnienie się, że wszystkie warstwy zostały włą-
czone przy użyciu przycisków Indicates layer visibility (symbol oczka
powinien znajdować się po lewej stronie każdej z naszych warstw)
oraz zapisanie tak przerobionego zdjęcia [Shft]+[Ctrl\+[S]. •

S1
o
ro
•D

8.
5

[SIL- _ .'

41
luty/marzec 2004
 EFEKTY

(V)
30 min Krople wody i nie tylko
a.
film

i j—s

Magdalena Cyrczak

W ćwiczeniu przedstawmy, jak za pomocą prostych kształtów! efektów narysować ujście zlewu
pokryte kroplami wody. Tutohal skrada się z dwóch części' A-' pierwszej pokażemy, jak stworzyć
obiekt wykorzystując selekcje, ścieżki i filtry; druga część natomiast przedstawia, jak prostymi
metodami narysować krople wady. Otrzymujemy zatem całkiem realistyczny obraz, który może
zostać wykorzystany zarówno samodzielnie, jak ; w większych projektach.

Zaczynamy

Tworzymy nowy dokument Plik>Nowy (File>New) [Ctrf\+[N], wielkość

naszego rysunku ustalamy dowolnie; w naszym przykładzie jest to
800 na 600 pikseli. Ustawiamy kolor narzędzia i tła na domyślny [D],
Domyślnie utworzoną warstwę odblokowujemy poprzez dwukrotne
kliknięcie na niej myszką i nazywamy ją np. f/o. Następnie na warstwie
f/o stosujemy filtr Filtr>Rendering>Chmury (Filter>Render>Clouds).
Otrzymujemy w ten sposób efekt czarno-białych chmur, który będzie
stanowić tło dla pozostałych elementów.

m
Następnie stosujemy filtr Filłr>Rozmycie>Rozmycie gaussow-
skie (Filter>Blur>Gaussian Biur) oraz Filtr>Szum>Dodaj szum
(Filter>Noise>Add Noise) z intensywnością 5. Otrzymujemy w ten
sposób nieco „przybrudzoną" powierzchnię. Jej kolor i jasność regu-
lujemy poleceniami Obrazek>Dopasuj>Jasność/Kontrast (lmage>
Adjustments>Brightness/Contrasf) oraz Obrazek>Dopasuj>Barwa/
Nasycenie (lmage>Adjustments>Hue/Saturation). Klikamy na war-
stwę f/o i wybieramy Warstwa>Styl warstwy>Cień wewnętrzny
(Layer>Layer Style>lnner Shadow). Ustawiamy Wielkość (Size)
na 29.
 Ol

Tworzymy obrys

Nad utworzoną wcześniej warstwą f/o tworzymy nową warstwę

[Shift]+[Ctrl\+[N] i nazywamy ją np. koloi. Wypełniamy ją białym ko-
lorem za pomocą polecenia Edycja>Wypełnij>Bialy (Edit>Fill>White).
Wybieramy zaznaczenie owalne i, przytrzymując wciśnięty klawisz
[Shift], rysujemy okrąg na środku warstwy koloi. Zapisujemy tą selek-
cję za pomocą polecenia Zaznacz>Zapisz zaznaczenie (Select>Save
Selection) i nazywamy ją np. k1. Wciskamy kombinację klawiszy
[Ctrl]+[Shift]+[f], aby odwrócić zaznaczenie.

Sitko

Usuwamy zaznaczony obszar [Delete] i likwidujemy zaznaczenie

klawiszami [Cfr/]+[D]. Kopiujemy warstwę to/o 7 i nazywamy ją ko-
Io2. Będąc na tej warstwie wybieramy zaznaczenie owalne i rysu-
jemy okrąg o średnicy nieco mniejszej niż ten na warstwie koło7.
Zapisujemy selekcję jako k2. Naciskamy [Ctrl\+[Shift]+[l] i usuwamy
zaznaczony obszar. Kopiujemy warstwę kolo2 i nową warstwę nazy-
wamy sitko. Dla ułatwienia pracy ukrywamy warstwy sitko i koio2, kli-
kając na ikonie oka przy nazwie warstwy w palecie Warstwy (Layers).

Metalowa powierzchnia

Wracamy do warstwy koło 7 i wczytujemy selekcję k2,

Zaznacz>Wczytajzaznaczenie (Select>LoadSelection), następ-
nie usuwamy zaznaczony obszar [Delete]. Powinniśmy otrzymać
kształt „obwarzanka". Zaznaczamy otrzymany kształt, klikając na
symbolu warstwy z wciśniętym klawiszem [Ctrl] w celu zaznacze-
nia całego obiektu. Potem stosujemy filtry Filtr>Rendering>Chmury
(Filter>Render>Clouds), Filtr>Szum>Dodaj szum (Filter>Noise>Add
Noise); intensywność ustawiamy na 6. Wybieramy polecenie
Warstwa>Styl warstwy>Faza i płaskorzeźba (Layer>Layer Style>
Bevel and Emboss) i wszystkie wartości pozostawiamy bez zmian.

Metalowa powierzchnia cd.

Będąc cały czas na warstwie kolol, klikamy na zakładkę Cień we-

wnętrzny (Inner Shadow) i Cień (Drop Shadow) i wszystkie opcje
pozostawiamy bez zmian. Na koniec wybieramy jeszcze opcję
Satyna (Satin) i ustawiamy Krycie (Opacity) na 20%, pozostałe war-
tości pozostawiamy bez zmian. Usuwamy zaznaczenie [Ctrl]+[D].
Przechodzimy do warstwy kolo2, wczytujemy selekcję k2 i stosuje-
my Filtr>Rendeńng>Chmury (Filter>Render>Clouds), a następnie za
pomocą opcji Jasność/Kontrast (Brightness/Contrast) przyciemniamy
obraz i zwiększamy kontrast.

Trójwymiarowość

Będąc na warstwie sitko, zaznaczamy cały element i za pomocą na- E?

rzędzia Gradient (Gradient Tool) [G] wypełniamy selekcję gradientem o
ch
tak jak na rysunku. Następnie wybieramy polecenie Warstwa>Styl 03

E
warstwy>Faza i płaskorzeźba (Layer>Layer Style>Bevel and Emboss) "O
I/)
i nadajemy obiektowi trójwymiarowy wygląd. Ustawiamy opcje: Głębia
(Depth): 40; Wielkość (S/że): 7; Zmiękczanie (Soften): 0. Następnie
wybieramy polecenie Warstwa>Styl warstwy>Blask wewnętrzny
(Layer>Layer Style>lnner Glow) i ustawiamy Wielkość (S/że) na 4.
Dodajemy Cień (Drop Shadow), ustawiając Wielkość (Size) na 5,
Odległość(Distance) na 5 i Cień wewnętrzny (Inner Shadow), ustawia-
jąc Wielkość (Size) na 29.

psc! 43
luty/marzec 2004
 EFEKTY

Otwory w sitku

Za pomocą Zaznaczenia owalnego (Eliptic Marquee) na warstwie sit-

ko rysujemy mały okrąg i usuwamy jego zawartość [Delete]. Okrąg
przesuwamy kilkakrotnie za pomocą polecenia Zaznacz>Przekształć
zaznaczenie (Select>Transform Selection) i za każdym razem usu-
wamy zawartość zaznaczenia. Za pomocą narzędzia Pióro (Pen) [P]
rysujemy niewielki trójkąt o zaokrąglonych wierzchołkach, zamienia-
my ścieżkę na selekcję, klikając prawym klawiszem myszy na symbo-
lu ścieżki w palecie Ścieżki (Paths) i wybierając polecenie Utwórz za-
znaczenie (Make Selection). Umieszczamy trójkąt tak jak na rysunku,
usuwamy jego zawartość i powtarzamy czynność kilka razy, przesu-
wając obiekt w różne miejsca.

Cienie i odblaski

Następnie ręcznie w pewnych miejscach możemy dodać cienie lub

odblaski za pomocą cienkiego pędzla o promieniu 2-3 piksele oraz
narzędzia Rozmycie (Biur Tool) [R], którym rozmywamy otrzymane
powierzchnie. Proponuję, aby cienie/odblaski umieszczać na osob-
nej warstwie w celu łatwiejszego nanoszenia poprawek. Aby nie-
co postarzyć otrzymany zlew, klikamy na warstwę koło 1 i wybieramy
Filtr>Szum>Kurz i rysy (Filter>Noise>Dust & Scratches). Ustawiamy
opcje: Promień (Radius) na 1, Próg (Threshold) na 20. Czynności te
powtarzamy także dla warstwy sitko.

Kształt kropel

Następnie dodajemy do obrazka efekt kropel wody. W tym celu ponad

wszystkimi warstwami tworzymy nową warstwę i nazywamy ją krople.
Ustawiamy kolor Narzędzia (Foreground) na czarny i, będąc na tej
warstwie, za pomocą pędzla o wielkości zależnej od planowanej wiel-
kości kropel rysujemy dowolną ilość kształtów pokrywających elemen-
ty leżące poniżej. Większe krople możemy rysować za pomocą narzę-
dzia Pióro (Pen Tool) [P]. Utworzoną w ten sposób ścieżkę należy za-
mienić na selekcję i wypełnić kolorem czarnym.

m Nadajemy kroplom głębię

Teraz, będąc na warstwie krople, zmniejszamy jej krycie do 0% i wy-
bieramy polecenie Warstwa>Styl warstwy>Cień (Layer>Layer
Style>Drop Shadow). Ustawiamy opcje: Krycie (Opacity): 95%.
W opcji Cień wewnętrzny (Inner Shadow) ustawiamy Krycie (Opacity):
60%, Odległość (Distance) na 18, a Wielkość (Size) na 10 pikseli.
Następnie w opcji Blask wewnętrzny (Inner Glow) ustawiamy Krycie
(Opacity) na 20%, Wielkość (Size) na 92-95%, kolor na jasnobłękit-
ny. W zakładce Faza i Płaskorzeźba (Bevel and Emboss) ustawiamy
Technikę (Technique) na Dłuto Twarde (Chisel Hard); Głębię (Depth)
na 300-320%, Wielkość (Size) na 70, Zmiękczanie (Soften) na 10.

o
di Ostatnie poprawki
"O
i/) Aby krople wody na zlewie były bardziej realistyczne, zaznaczamy
o.
wszystkie krople na warstwie krople i przechodzimy do warstwy koloT.
S
Wybieramy narzędzie Smużenie (Smudge) [R] i zniekształcamy nie-
g
co fragmenty obiektu leżące bezpośrednio pod kroplami. Następnie
fragmenty te możemy delikatnie rozmyć za pomocą filtru Rozmycie
gaussowskie (Gaussian Biur) — Filtr>Rozmycie>Rozmycie gaussow-
skie (Filter>Blur>Gaussian Biur), w którym ustawiamy opcję Promień
(Radius) 2-3 piksele. ®

44
luty/marzec 2004
 WEBDESIGN

30 min
Interfejs
film w Photoshopie"

Łukasz Pabian

Photoshop pomimo że, na pozór nadaje się tylko do grafiki płaskiej, może być bardzo pomocnym
narzędziem przy tworzeniu pseudo trójwymiarowych obiektów stosując wypełnienia gradientowe.
W programie istnieją również narzędzia oraz opcje dające możliwość pracy z wektorami. Dzięki
czemu można nadać obiektom nowatorski kształt. Nie dyskryminując podstawowych narzędzi
Photoshopa w tutorialu zostały również użyte narzędzia zaznaczenia do wymodelowania
kształtu.
_ Zaczynamy
Tworzymy nowy plik i zaznaczamy owalny obszar narzędziem
Zaznaczenie eliptyczne {Eliptical Marquee Tool) [M], który wypełniamy
gradientem liniowym z jasnego do ciemnoszarego. Żeby podkreślić
trójwymiar, na górze na nowej warstwie wypełniamy zaznaczenie gra-
dientem radialnym z koloru jaśniejszego niż wcześniejszy do przezro-
czystości i podobnie na dole kolorem ciemniejszym od poprzedniego
użytego w pierwszym gradiencie. W tutorialu będziemy używać sty-
lu warstwy: Styl 7. Faza i Płaskorzeźba (Styl: Płaskorzeźba, Głębia: 1,
Wielkość: 1, Kierunek: Do dołu) (Bevel and Emboss (Style: Emboss,
Depth: 1, Size: 1, Direction: Down)).

Kształt interfejsu

Za pomocą linii pomocniczych [Cf/7]+[R] tworzymy krzyż (środek

umieszczamy w centrum okręgu). Ze środka rysujemy kolejny okrąg
o narzędziem Elipsa (Elipsę Tool) [U] — mniejszy od poprzedniego,
di
03
gdy przytrzymamy [Ctrl] figura będzie symetryczna względem osi X
i Y. Narzędziem Zaznaczenie bezpośrednie Direct Selection Tool [A]
zmieniamy pozycję górnego węzła — przenosimy go w dół zmniej-
szając siłę ramion oddziaływania na krzywą. Tworzymy nową warstwę
i klikamy prawym przyciskiem myszy na krzywej, wybieramy opcję
Utwórz selekcję (Make Selection). Powstałe zaznaczenie wypełnia-
my kolorem ciemnoszarym. Zmniejszamy zaznaczenie o 1 piksel —
Zaznacz>Zmień>Zawężanie (Select>Modify>Contract). Wycinamy za-
znaczenie [Cfr/]+[X] i nakładamy na warstwę Styl 1.

46
luty/marzec 2004
 to

Przyciski

Tworzymy najmniejszy okręg, który przemieszczamy kilka punktów

poniżej środka, wypełniamy go ciemnoszarym na nowej warstwie,
zmniejszamy o 1 piksel zaznaczenie Zaznacz>Zmień>Zawężanie
(Select>Modify>Contract) i wycinamy [Ctrl\+[X\. Rysujemy linie łączą-
ce małe koło z większym „kołem", które będą oddzielały nasze przy-
ciski. Nanosimy Styl 1. Możemy na mniejszy okrąg nałożyć kilka gra-
dientów, tak jak w pierwszym kroku by uzyskać wypukłość przycisku.

Przyciski cd.

Na poszczególnych przyciskach tworzymy odpowiadające im symbo-

le (za pomocą narzędzia Zaznaczenie (Marquee) [M] lub Pióro (Pen)
[U]). Wypełniamy każdy ze znaczków kolorem RGB: [42,78,128] i na
warstwę z symbolami nakładamy Styl: Cień wewnętrzny (Krycie 30%,
Odległość: 2, Wielkość: 2) (Inner shadow (Opacity 30%, Distance: 2,
Size: 2)) oraz Faza i Płaskorzeźba (Styl: Faza zewnętrzna, Kierunek:
Do dołu, Głębia: 11%, Wielkość: 1) (Bevel and Emboss (Style: Outer
Bevel, Direction: Down, Depth: 11%, Size: 1)). Teraz symbole spra-
wiają wrażenie jakby się zagłębiały w przyciskach.

Wypełnienie

Tworzymy zaznaczenie o średnicy 12 pikseli i wypełniamy je gradien-

tem linearnym z góry od koloru RGB: [95,134,56] do koloru RGB:
[120,226,17], Zmniejszamy zaznaczenie o 1 piksel Zaznacz>
Zmień>Zawężanie i na nowej warstwie wypełniamy je kolorem białym,
przesuwamy zaznaczenie o kilka punktów w dół i wycinamy to co jest 4 4

w zaznaczeniu [Cfr/]+[X]. Na niższą warstwę (zielony owal) nakłada-

my Styl: Cień wewnętrzny (Odległość: 0, Wielkość 10) (Inner Shadow
(Distance: 0, Size 10)) oraz Faza i Płaskorzeźba (Styl: Faza zewnętrz-
na, Głębia: 1%, Wielkość: 2) (Bevel and Emboss (Style: Outer bevel,
Depth: 1%, S/że: 2)).

Przyciski cd.

Wokół każdej zielonej kulki nanosimy zaznaczenie, wypełniamy je na

nowej warstwie szarym kolorem, zmniejszamy o 1 piksel i wycina-
my, nanosimy Styl 1 na obręcz wokół kulek. Dodatkowo zmniejszamy
Krycie (Opacity) do 60%. Wokół wszystkich kulek tworzymy elipsę na-
rzędziem Elipsa [M], którą ścinamy z dołu inną elipsą, poprzez nary-
sowanie jej z przytrzymanym klawiszem [Alt]. Następnie wypełniamy
je szarym kolorem. Jeżeli zaznaczenie znika przy kolejnym kliknięciu,
można na nowej warstwie wypełnić sobie pierwsze zaznaczenie i ko-
lejnym ściąć [Cfr/]+[X] niepotrzebny obszar. Aby nadać bardziej gład-
ki wyraz tego kształtu zaznaczamy warstwę — klikamy myszą na da-
ną warstwę z okna Layers przytrzymując [Ctrl], a następnie wybiera-
my z menu Zaznacz>Zmień>Wygładzanie (Select>Modify>Smooth).

o
Gradient di
ra
•o
Na najniższej warstwie ze środka krzyża tworzymy owalne zaznacze-
nie o średnicy 200 pikseli i wypełniamy je gradientem od koloru RGB:
[84,108,145] do koloru RGB: [132,171,228]. Na nowej warstwie two-
rzymy zaznaczenie owalne ze środka krzyża o średnicy 150 pikseli
i wypełniamy je gradientem linearnym z tymi samymi kolorami tyle, że
odwrócone ([X] odwraca kolory na palecie). Aby uzyskać zmiękczenie
krawędzi warstwy nanosimy filtr Rozmycie gaussowskie (Gaussian
Blur)(\ pikseli).

47
luty/marzec 2004
 WEBDESIGN

Gradient cd.

Ze środka tworzymy zaznaczenie o średnicy 175 pikseli, odwraca-

my je — Zaznacz>Odwróć (Select>lnverse) i wypełniamy kolorem
szarym. Zaznaczamy największy okręg i wycinamy z warstwy, którą
przed chwilą wypełniliśmy. Tworzymy owalne zaznaczenie o średnicy
równej szerokości powstałego pierścienia, ustawiamy je w dolnej czę-
ści po lewej stronie i odwracamy zaznaczenie, wycieramy niepotrzeb-
ną część powyżej. Przesuwamy zaznaczenie z [Shift] na prawą stronę
(w poziomie) i wymazujemy część powyżej.

Podkład

Zaznaczamy wycięty fragment i wybieramy (Zaznacz>Modyfikuj>Za-

wężanie (5 pikseli)). Na nowej warstwie wypełniamy zaznaczenie
ciemnym kolorem, kopiujemy warstwy z zielonymi kulkami i prze-
stawiamy je na „suwak", usuwamy ze Stylu Warstwy opcje Faza
i Płaskorzeźba, a dodajemy Cień (Odległość: 2, Wielkość: 2) (Drop
Shadow (Distance: 2, Size: 2)). Wycinamy po lewej i prawej stro-
nie zaznaczeniem w kształcie elipsy kawałki najniższego okręgu.
Zaznaczamy obiekt, z którego przed chwilą ścinaliśmy boki, przez
kliknięcie myszą na warstwę razem z [Ctrl] i na nowej warstwie wy-
pełniamy zaznaczenie kolorem RGB: [16,62,104]. Z menu Zaznacz
(Selecf) wybieramy opcję Wtapianie (Feather) (16 pikseli) i usuwamy
zbędną cześć przez [Cfrf]+[X]. Zmienimy tryb mieszania warstwy na
Mnożenie (Multiply).

Podkład cd.

Ze środka krzyża zaznaczamy obszar o średnicy 200 pikseli i wypeł-

niamy na nowej warstwie gradientem od jasnego do ciemnego szare-
go. Zaznaczamy niebieską warstwę ściętą z lewej i prawej strony,
z menu wybieramy Zaznacz>Zmień>Rozszerzanie (Select>Modify>
Expand (1 piksel)). Na nowej warstwie wypełniamy zaznaczenie ciem-
nym szarym, zmniejszamy o 1 piksel i wycinamy (krok 2). Nakładamy
na warstwę z obwiednią styl: Blask wewnętrzny (Tryb mieszania:
Mnożenie, Krycie: 35%, Wielkość: 7) (Outer Glow (Blend Modę:
Multiply, Opacity: 35%, Size: 1)). Rysujemy symetryczny prostokąt
wypełniony gradientem linearnym od koloru RGB: [92,156,235] do ko-
loru RGB: [7,81,148].

Podkład cd.
Sil
Dodajemy poziomą linię pomocniczą w połowie prostokąta. Elipsami
z zaznaczenia ścinamy kąty prostokąta, rysowanie elips zaczyna się
w środku nowego krzyża z linii pomocniczych, przytrzymując [Ctrl].
Rysujemy dwie linie łączące szary łuk oraz górę prostokąta i na-
kładamy ten sam Styl 1. Zaznaczamy okrąg o średnicy 200 pikse-
li ze środka pierwszego krzyża i wypełniamy go ciemnym niebieskim.
Zaznaczamy warstwę ze ściętym prostokątem, odwracamy zazna-
czenie i ścinamy wcześniej wypełniony okrąg. Zmniejszamy Krycie
(Opacity) do 10% i zmieniamy tryb krycia na Mnożenie (Multiply).

o.
s Podkład cd.

Zaznaczamy z [Ctrl] warstwę, gdzie wystają z lewej i z prawej stro-

ny jej szare fragmenty, zwiększamy zaznaczenie o 2 piksele i wy-
pełniamy ciemnym kolorem. Nakładamy na warstwę styl Faza
i Płaskorzeźba (Styl: Faza wewnętrzna, Głębia: 490%, Kierunek:
Do dołu, Wielkość: 10, Kąt: 145). Zaznaczamy z [Ctrl] warstwę ze

48 psd
luty/marzec 2004
 f
ściętym prostokątem i na nowej warstwie wypełniamy dół ciem-
nym gradientem, tak by uzyskać cień. Zmieniamy Tryb mieszania na
Mnożenie, a krycie na 50%).

Wyświetlacz

Na nowej warstwie, górnej części zaznaczamy prostokąt 200 na 80

pikseli, wypełniamy go szarym kolorem. Za pomocą zaznaczeń for-
mujemy wyświetlacz interfejsu. Zaznaczamy wyświetlacz i wybieramy
z menu Zaznacz>Zmień>Wygładzanie (Select>Modify>Smooth (5 pik-
seli)) by wygładzić kąty. Odwracamy zaznaczenie [Ctrl\+[Shift]+[f\
i ścinamy niepotrzebne rogi. Zaznaczamy warstwę szarego pro-
stokąta z [Ctrl] i na nowej warstwie wypełniamy go ciemniej-
szym szarym, zwężamy go o 1 piksel Zaznacz>Zmień>Zawężanie
(Select>Modify>Contract (1 piksel)).

Gradient

Zaznaczamy myszą z [Ctrl\ warstwę z szarym prostokątem i na nowej

warstwie wypełniamy ją ciemniejszym szarym. Następnie wybiera-
my z menu Zaznacz>Wtapianie (Select>Feather (8 pikseli)) i ścinamy
zaznaczenie. Znów zaznaczamy szary prostokąt i wybieramy z me-
nu Zaznacz>Przekształć zaznaczenie (Select>Transform Selection),
ustawiamy Skalowanie na 90% dla szerokości i wysokości. Na kolej-
nej warstwie rysujemy gradient od białego do przezroczystości, mniej
więcej z góry do połowy zaznaczenia. Następnie zmniejszamy krycie
tej warstwy do 40-50%. Zmieniamy kolor szarej warstwy pod spodem
na zielony RGB: [106,187,27].

Tworzymy deseń

Tworzymy nowy plik wielkości o 2 na 3 piksele. Wypełniamy go

tak, jak na rysunku i zaznaczamy [Ctrl\+[A]. Wybieramy z menu
Edycja>Zdefiniuj wzorek (Edit>Define Pattern), przechodzimy do na-
szego interfejsu, zaznaczamy z [Ctrl] zieloną warstwę i tworzymy no-
wą warstwę. Wybieramy z menu Edycja>Wypełnij (Edit>Fill...), usta-
wiamy na Wzorek (Pattern) i z dostępnych deseni wybieramy ten,
który przed chwilą stworzyliśmy. Zmniejszamy krycie na naszym scan-
line do 25% i sposób przenikania na Mnożenie (Multiply).

Ostatnie poprawki

Zaznaczamy warstwę z niebieskim podkładem używając [Ctrl], na-

stępnie używając Lasso wielokątne (Polygonal Lasso Tool) [L] ści-
namy zaznaczenie wzdłuż skośnych linii. Używamy do tego [Alt] że-
by usunąć część wspólną obu zaznaczeń z pierwszego zaznaczenia.
Na nowej warstwie wypełniamy nasze zaznaczenie kolorem RGB:
[33,91,152], krycie warstwy zmniejszamy do 50% i ustawiamy tryb
krycia na Mnożenie (Multiply). Znów zaznaczamy niebieski podkład
i na nowej warstwie z samej góry rysujemy gradient od białego do Ol
przezroczystości, następnie przesuwamy zaznaczenie o kilkanaście o
di
punktów w dół i usuwamy zbędny obszar gradientu. 9 ra
E
"a

49
luty/marzec 2004
 EFEKTY

30 min

a.
film

Rafał Dukaczewski

Szukając zdjęć mających wzbogacić nasz projekt, często nie zastanawiamy się, że
w czasie, który na to poświęciliśmy, sami moglibyśmy stworzyć taki element. Nie tylko podobny,
ale wręcz dokładnie taki, jakiego szukamy, łatwy do późniejszego przetwarzania i co ważne —- za
darmo. Czasami zapominamy, jak elastycznymi i wygodnymi narzędziami dysponuje Photoshop.
Przy wykorzystaniu jego filtrów, mieszania warstw i stylów warstw, okazuje się, że nasz wkład
w proces twórczy może być całkiem niewielki.

Rysujemy skrzydło motyla

Tworzymy nowy dokument o parametrach: 800 na 600 piske-

li; 150 dpi; RGB. Wybieramy narzędzie Pióro (Pen) i tworzymy ob-
rys skrzydła motyla jako zamkniętą ścieżkę. Poprawiamy jej kształt
przesuwając węzły, lub jeżeli trzeba — dodajemy lub usuwamy
węzeł. Tworzymy nową warstwę i nazywamy ją czarny podkład. Ze
ścieżki tworzymy zaznaczenie prawy przycisk>Utwórz zaznacze-
nie (Make Selection) i wypełniamy je na czarno, na nowo utworzo-
nej warstwie. Zaznaczenie zapisujemy jako skrzydło. Aby skrzy-
dło wyglądało bardziej naturalnie, traktujemy jego dolną krawędź
filtrem Zygzak (ZigZag) z ustawionymi wartościami 5 i 14; Wokół
środka (Around center), a następnie Rozmycie Gaussowskie
(Gausian Biur) 0,6 piksela.

Rysujemy wzór na skrzydle

o Zaczynamy tworzyć właściwy wzór na skrzydle. Zaznaczamy
di
obszar czarnego wypełnienia ([Cfrf]+kliknięcie lewym przyci-
T3
skiem myszy na listwę warstwy czarny podkład). Zmniejszamy
obszar zaznaczenia najpierw o 8 pikseli na całym obszarze:
Zaznacz>Zmień>Zawężanie (Select>Modify>Contract), a następ-
nie z lewej strony narzędziem Lasso, tak aby krawędź zaznacze-
nia nie była regularna. Wyświetlamy zakładkę Kanały (Channels),
tworzymy nowy kanał i nazywamy go pomarańczowa faktura.
Wypełniamy na nim zaznaczenie białym kolorem. Rozmywamy je
filtrem Rozmycie Gaussowskie (Gaussian Biur) ok. 3 pikseli.

50
luty/marzec 2004
Rysowanie żyłek na skrzydle

Teraz musimy utworzyć fakturę ciemnych żyłek na skrzydle moty-

la, żeby jego wygląd był jak najbardziej rzeczywisty. Aby żyłki by-
ły wykonane precyzyjnie, dobrze byłoby utworzyć je przy pomocy
ścieżek, lecz kanał będzie nam służył jedynie do utworzenia cha-
rakterystycznej tekstury, więc duża dokładność nie jest w tym wy-
padku wymagana. W związku z tym rysujemy użytkowanie za po-
mocą Pędzla (Brush), Ołówka (Pencil) i Gumki (Eraser). Najpierw
tworzymy najgrubsze elementy, a dopiero później nanosimy detale
i wykonujemy retusz nowych elementów.

Tworzenie nowej warstwy

Zaznaczamy utworzony przez nas w kanale pomarańczowa fak-

tura kształt. Tworzymy nową warstwę nad czarnym podkładem.
Nazywamy ją pomarańczowy i na niej wypełniamy zaznaczenie
kolorem #FFCD02. Następnie na tej warstwie stosujemy filtr Efekty
świetlne (Lighting effects) z ustawieniami: rodzaj światła — otnni:
13; kolor: #FCFECE; właściwości: 60; 70; 0; 21; kolor: #FEB300;
jako teksturę wybieramy wcześniej utworzony kanał pomarańczo-
wa faktura, a wartość wypukłości ustawiamy na 14.

Powierzchnia skrzydła

Tworzymy nową warstwę nad poprzednimi. Nazywamy ją tekstu-

ra. Zaznaczamy obszar skrzydła. Wybieramy narzędzie Gradient
[G]. Wybieramy gradient czamo-biały i na pasku tworzymy ok. 25
naprzemiennych ustawień barwy białej i czarnej. Ustawiamy kąto-
wy sposób nakładania gradientu (Angle Gradient). Gradient apli-
kujemy, jako początkowy punkt wybierając prawy górny róg skrzy-
dła. Próbujemy kilka razy tak, aby uzyskać jak najwięcej przejść
tonalnych. Następnie filtr Dodaj szum (Add Noise) z wartością 10
i rozmieszczeniem jednolitym (uniform). Ustawiamy tryb mieszania
warstwy na Światło Liniowe (Linear Lighf). Zmniejszamy kontrast
warstwy do -85 i wyrównujemy jasność do poziomu przed utworze-
niem warstwy tekstura (ok. 10).

C
Tekstura powierzchni skrzydła

Kopiujemy warstwę tekstury. Umieszczamy ją nad warstwą czar-

ny podkład i nazywamy ciemna tekstura. Wypełnienie (F/7/) usta-
wiamy na 30%. Pod nią tworzymy warstwę pomarańczowy na-
lot. Zaznaczamy obszar skrzydła i wypełniamy warstwę barwą
#FEA201. Ustawiamy czarną barwę tła i stosujemy filtr Chmury
(Clouds). Zwiększamy kontrast +40 i używamy filtra Dodaj szum
{Add Noise) ok. 40%; rozmieszczenie gaussowskie (gaussian),
monochromatyczny (monochromatic).

Ozdabianie skrzydła Dl
O
di
Teraz w zasadzie pozostała nam już tylko kosmetyczna pra-
"O
ca w postaci ozdobienia skrzydła różnymi plamkami i wzorkami
o.
np. białą obwódką wzdłuż dolnej krawędzi. Nakładamy je według
własnego uznania przy pomocy narzędzi malarskich, pamięta-
jąc o tworzeniu nowych elementów na oddzielnych warstwach, co
wpływa na komfort pracy i ułatwia edycję rysunku. Drobne elemen-
ty nakładamy, korzystając z powiększenia. Teraz też jest właści-
wy czas, aby zastanowić się nad tym, czy z kolorami skrzydła jest
wszystko w porządku. Wprowadzamy ewentualnie zmiany barwy.

51
luty/marzec 2004
 EFEKTY

iii Tworzymy drugie skrzydło

Duplikujemy warstwy, z których stworzone jest skrzydło i nazy-

wamy je prawe. Wybieramy Edycja>Przekształć>Odbij pozio-
mo {Edits>Transform>Flip Horizontal) i przesuwamy na pożąda-
ne miejsce. Sprawdzamy, czy kształt utworzonych skrzydeł nam
odpowiada. Następnie duplikujemy obydwa zestawy warstw.
Ustawiamy ponad poprzednimi i kolejno „spłaszczamy" polece-
niem Warstwa>Złącz widoczne (Layer>Merge Visible). Nie połączo-
ne zestawy warstw odznaczamy i blokujemy, żeby ich nie uszkodzić
w dalszej pracy. Ustawiamy wypełnienie (F/7/) na ok. 50%.

odwłok i oczy

Włączamy narzędzie Zaznaczanie eliptyczne (Eliptical Marquee)

i nad poprzednimi warstwami tworzymy nową warstwę o nazwie od-
włok. Tworzymy zaznaczenie w pożądanych przez nas proporcjach
i kształcie, wypełniamy je czarnym kolorem i korygujemy utworzo-
ny kształt. Tworzymy następną warstwę oczy. Rysujemy kształt oka
owalnym zaznaczeniem i wypełniamy radialnym gradientem utwo-
rzonym z barw: #CCC790, #5A5540. Podobnie tworzymy drugie
oko. Możemy nałożyć na nie teksturę Warstwa >Styl warstwy>Na-
łożenie wzorka (Layer>Layer Style> Pattern Overlay). Wybieramy
np. wzór Cells z palety Wzorki (Patterns) w trybie mieszania jako
Nakładka (Overlay) i skali 9%.

gm Rysyjemy detale i łączymy części

Rysujemy detale na odwłoku, aby wyglądał naturalnie. W tym ce-

lu korzystamy z pędzli naśladujących owłosienie np. standardowe
Grass i Dune Crass o wielkości między 10 a 20 pikseli. Nanosimy
fakturę na oddzielnej warstwie. Teraz połączymy skrzydła motyla
z odwłokiem. Przywracamy wypełnienie warstw skrzydeł do 100%.
Ustawiamy warstwy odwłoka i jego detali pod warstwami skrzydeł.
Jeżeli obecny wygląd skrzydeł nam odpowiada, możemy ich war-
stwy połączyć poleceniem Złącz (Merge Down). Fragmenty nasady
skrzydeł wycieramy delikatnie gumką, aby wydawał się znajdować
nad skrzydłami w górnej części i trochę pod nimi w dolnej.

m Rysujemy czułki i odnóża

Rysujemy czułki i odnóża na oddzielnych warstwach. Ustawiamy
parametry pędzla, jakim będziemy rysować czułki np. Hard Round
3 pixels. Tworzymy szkielet czułka za pomocą ścieżki, a następ-
nie obrysowujemy ją pędzlem: Obrysuj ścieżkę >Pędzel (Stroke
Path>Brush) z zaznaczoną opcją Symulacja nacisku (Simulate pres-
sure). Ścieżkę czułka odwracamy horyzontalnie, ustawiamy we wła-
ściwym miejscu i ponownie obrysowujemy. Identyczne czynności
wykonujemy dla odnóży,

Ol Tworzymy cień
o
di
ro
Wszystkie elementy odwłoka kopiujemy na nową warstwę i ustawia-
-a
my ją na samym dole. Stosujemy opcje: Obrazek>Dopasuj>Usuń
o.
3 kolor (lmage>Adjustments>Desaturate), a następnie Próg
S (Threshold) i ustawiamy suwak na 255. Podnosimy nieco jasność
warstwy i stosujemy filtr Rozmycie Gaussowskie (ok. 2 piksele).
Zniekształcamy cień Edycja>Przekształć>Zniekształć (Edit>Trans-
form>Distort), tak aby był naturalny. Na warstwie ze skrzydłami apli-
kujemy cień poleceniem Warstwa>Styl warstwy>Cień (Layer>Layer
Style>Drop Shadow), dostosowując go do tonu cienia odwłoka. ®

52
luty/marzec 2004
 i

\
Jl

Jakie są Twoje najważniejsze osiągnięcia

i nagrody?

Najważniejszą nagrodą dla mnie jest własna apro

bata do tego co projektuję. Lubię piękne rzeczy i nic
innego nie sprawia mi satysfakcji jak otaczanie się
nimi i wyobrażenia o tym co, jeszcze mogę zreali-
zować. Cieszy mnie, że pomogłem wielu ludziom
wystartować w dobrym kierunku :)

Jak wygląda Twoje miejsce pracy? Jakiego

sprzętu i jakich programów używasz? W jakim,
programie najchętniej pracujesz?

Moje miejsce pracy jest chaosem w czystej

ci. Chciałbym być poskładany jak mój ojciec, ale się
nie da. Nieporządek wokół komputera narasta i nara
sta... Używam dwuprocesorowego Maca G4 i peo
ta (AMD) z XP na pokładzie. Moje aplikacje to Pho-
toshop i lllustrator, wspomagam się 3D, fotografiami
mojego kolegi Adama Bochenka i rysunkami młod'
go Sławka Wydry

Czym charakteryzują się Twoje prace, co je

odróżnia od innych?

To że wyszły spod mojej ręki. Przedstawiają

Przedstawiamy Warn sylwetkę Bartka Kozłowskiego
— znakomitego grafika i projektanta.
punkt widzenia, moją perspektywę i kolorystykę.
W projektowaniu najtrudniejszą rzeczą jest dla mnie
skompletowanie perfekcyjnych detali „klocków" całej
układanki tak aby sprostały moim wyobrażeniom.
Materia to oporna, bo jeśli potrzebujesz zabójczo
groźnej wieży rodem z Tolkiena to jak jej nie wyren-
derujesz lub nie narysujesz to jej nie masz! Czasem
oddaję prace nad „klockami" innym bardziej utalen-
towanym w różnych technikach graficznych oso-
 bom i staram się ich naprowadzić na moją wizję
rysowanego/malowanego detalu. Nie mam komplek-
su omnibusa i wiem, że przez to całość jest bardzo
atrakcyjna, bo moi „klockarze" wkładają w to tyle serca
ile się da. Ja za to „pan i władca" łaskawie to przetwo-
rzę, pokoloruję i będzie ładnie (śmiech). Druga spra-
wa, która mnie drażni to brak kontroli nad tym co już
jest dobrze a co nie. Czasem za długo wpatruję się w
jeden projekt i zmieniam coś co powinno pozostać nie-
tknięte. Podziwiam artystów analityków, którzy posia-
dają całość projektu od początku w głowie i wiedzą
kiedy przestać! Ja ciągle coś zmieniam, wywracam,
jestem zadowolony potem już nie i powiem Warn coś
w sekrecie... wcale nie boję się do tego przyznać!
Tworzenie podczas tworzenia — bardzo sympatycz-
ny proces! Jedynym jego wrogiem jest czas, hekto-
litry kawy potrzebne do zakończenia zadania i zwią-
zane przez klienta ręce... Ale kto by się tam przejmo-
wał takimi drobiazgami:) Aha, byłbym zapomniał, pra-
cuję w nocy, tylko wtedy potrafię się skupić, nawet jak
zaciemnię sobie pomieszczenie w dzień, rytm miasta
i jego „bicie" nie pozwalają pracować. No i jeszcze te
telefony, dzwonią i dzwonią...

B Opisz jak powstał, jeden z Twoich projektów

Opowiem Warn jak projektowałem kartę plastikową

dla banku. Założenia były takie: „wie Pan... coś takie-
go... lekkiego, ładnego... spójnego" Dobre prawda?
Miał być detal który kojarzy się z transportacją, prze-
wozem, eksportem/importem. Uznałem, że wszystko
jest bardzo oklepane i przypomniałem sobie muchę
taką małą owocówkę, którą widziałem latem lecącą
beztrosko na ...dmuchawcu! I to było olśnienie: dmu-
chawce! Super transport za darmochę! Może czasem
nie zgodnie z rozkładem jazdy i kierunkiem, ale chy-
ba jest to dosyć lekkie i ładne. Nabazgrałem na kartce
papieru jak to widzę, pod jakim kątem fotka czy z bli-
ska czy z daleka, Adam zrobił zdjęcie dmuchawca (cy-
frakiem FujiS2 pro) pogłaskaliśmy obrazek w Photo-
shopie, dopracowaliśmy liternictwo i kolorystykę (uda-
ło się przekonać klienta, że już czas trochę „odjechać"
W: BANK BFH 4H&1 BANKPBK'
od zieleni) i tadaaaa... karta jak się patrzy! Nie opo-
wiem wam o kilku wątkach pobocznych, wokół których Bank Przemystowo-Handlowy PBK SA
się kręciłem zanim na to wpadłem. Chodziły mi po
głowie jakieś „globusy", „statki", „karawany" ale szó- PROSFERA
sty zmysł mówił mi: „jeszcze trochę wysiłku kolego... Kraków
rusz mózgownicą!"
KLUB HANDLU ZAGRANICZNEGO
B Co lub kto jest dla Ciebie inspiracją?

Muzyka, sny, słońce za oknem, fotografia, malar-

stwo, (uwielbiam Boscha, Klimta, Miro). Fascynuje BARTEK KOZŁOWSKI
mnie kino — zapominam na trochę o rzeczywistości Urodzony w 1974 roku, grafik,
— uwielbiam komiksowych superbohaterów walczą- projektant, wykładowca. o
Obecnie współwłaściciel Ośrod- ra
cych z całym światem :)
ka Szkoleniowego i Studia Pro-
/l
jektowego PROSFERA w Kra-
B Czym się zajmujesz po godzinach? kowie. Uczy obsługi aplikacji
graficznych i zasad prepressu.
Projektuje w duecie ze swoim
Chronicznym poprawianiem samopoczucia. Jeżdżę przyjacielem Krzysztofem Stan-
na desce, gram w koszykówkę. Ciągle słucham muzy- kiewiczem.
ki, bez niej jestem kaleki (Seal, Soyka, polski HH (po-
chodzę z Kielc) Faith No Morę, Kosheen — straszny
mam rozrzut:)
Rozmawiała Magdalena Cyrczak

55
styczeń 2004
 NOWOŚCI
dobę podobnie jak inni producenci oprogramowania przy-
zwyczaili nas, że wraz z nowymi wersjami ich programów
'trzymujemy większe możliwości lub niekiedy zupełnie no-
we programy. Nie inaczej jest w przypadku najnowszej od-
słony sztandarowej aplikacji Photoshop. Zamiast cyferki 8 w
tytule jest skrót CS (Creative Suitę). Czy to nowa moda na
nazwy, czy też początek nowej serii produktów? Nie jest to
ważne, liczą się możliwości programu.
Na początek niemiła wiadomość dla użytkowników star-
szych systemów operacyjnych. Photoshop CS nie urucho-
INFORMACJA
mi się na systemach innych niż Windows 2000 wraz z Servi-
producent: Adobe
ce Pack 3 lub Windows XP z Service Packi. Niestety oso-
cena:
by pracujące na Windows 98 lub innym, nie będącym XP
649.00 $ (petna wersja)
169.00$(upgradezPS7.0)
lub 2000 nie będą miały możliwości nawet zainstalowania
Photoshop CS. Jest to lekko bolesne, ale może w ten spo-
sób Adobe próbuje nakłonić swych klientów do przejścia na
nowsze systemy operacyjne?
Wymagania systemowe nie zmieniły się zbytnio. Wzrosła
jedynie pamięciożerność, nieznacznie ale jednak.
CO NOWEGO?
Zmian w stosunku do wersji 7.0 jest sporo, choć jest to ra-
czej ewolucja niż rewolucja. Dodano możliwość przekonfi-
gurowania skrótów klawiszowych, choć zasadniczo więk-
szość osób używa podstawowych skrótów.
Rozbudowano menu poszczególnych filtrów,
poprzez dodanie galerii. Teraz nie jeste-
śmy zmuszeni do sprawdzania,
jak będzie wyglądał
efekt wybrane-
o
di
ro
"O
o.
g Piocesoi lntel'p Pentium R III lub 4
g
Microsoft® Windows®, 2000 z SP3 lub Windows XP z SP1
;192 MB RAM (zalecane 256 MB RAM)
280 MB wolnego miejsca na dysku
^arta graficzna z możliwością wyświetlania tysięcy kolorów (16 bit) lub lepsza oraz monitor
ilorowy z możliwością pracy z rozdzielczością 1024x768 lub większą
Napęd CD-ROM
56
luty/marzec 2004
Po otwarciu okna dialogowego, automatycznie pojawia się
mini galeria, w której na jednym z podstawowych obrazków
są pokazane najważniejsze warianty danego efektu —jest
to spore ułatwienie. Ponadto części filtrów można użyć na
ilustracjach zapisanych w trybie 48 bitowego koloru. Doszły
także nowe filtry fotograficzne.
Kilka zmian zaszło w obsłudze warstw (Layers). Pho-
toshop CS daje nam możliwość zarządzania nimi (Layers
Compś). W Praktyce oznacza to, że w jednym pliku może-
my mieć zachowanych kilka wariantów jednej grafiki i swo-
bodnie zmieniać je przy pomocy kilku kliknięć myszką. Taką
możliwość mieliśmy już w poprzednich wersjach, jednak tu-
taj zostało to dopracowane niemalże do perfekcji. Ponadto
dodano podwarstwy, które jeszcze bardziej powinny ułatwić
tworzenie skomplikowanych i wielowarstwowych projektów.
A skoro jesteśmy przy projektach to warto zaznaczyć o do-
daniu obsługi ogromnych formatów potrzebnych np. do
produkcji billboardów. W PS CS mamy możli-
wość stworzenia ilustracji nawet o wy-
miarach 300,000 na 300,000 pik-
seli z 56 kanałami.
Jest także mo-
żliwość
tworze-
nia oraz edy-
towania tekstu na
krzywych oraz kształtach.
W tym celu Photoshop wykorzystu-
je moduł z Ilustratora, co pozwala na szybki,
bezbolesny eksport do tego programu.
PHOTOSHOP DLA FILMOWCÓW?
Wersja CS pozwala na tworzenie obrazów ze ścieżką
czasu (time linę) oraz obsługuje niekwadratowe piksele (jak
wiadomo piksele na ekranie monitora są „kwadratowe", na-
tomiast na ekranie telewizora „okrągłe"). Dzięki czemu mo-
żemy przygotować niezbędne elementy graficzne i od razu
eksportować je do programów wideo z rodziny Adobe czyli
Premierę lub After Effects, bez potrzeby konwersji. Jest tak-
że możliwość eksportowania poszczególnych warstw do pli-
ków, a następnie do bardziej przyjaznych plików wideo.
IMAGEREADY CS
Warto również przyjrzeć się młodszemu bratu czyli Ima-
geReady CS.
Podobnie jak w Photoshopie, tak i w nim zaszły zmia-
ny. Ulepszono edycje drobnych elementów, jak przyciski
 3
czy tekst oraz współpracę z Photoshopem. Teraz „skoki" Być może za jakiś czas pojawi się jakiś patch, jednak wąt-
pomiędzy tymi dwoma aplikacjami są o wiele szybsze, jed- pię. Więc nie pozostaje nic innego jak zmienić system na
nak aby tak się działo wymagany jest szybki procesor z se- Windows XP a następnie zamienić Photoshop 7.0 na wer-
rii Pentium 4 (lub procesory G4, G5 w przypadku kompute- sję CS. ©
rów Macintosh).
Jednak najważniejszą i zarazem najciekawszą nowością
ImageReady CS jest możliwość eksportu plików do forma-
tu Flasha (SWF). Ponieważ Flash nie obsługuje importu wie-
lowarstwowych plików PSD, przeniesienie pliku Phqtosho-
pa posiadającego kilkanaście warstw może zająć godziny.
Dzięki ImageReady teraz taka operacja zajmie co najmniej
kilka minut i kliknięć myszką. Wystarczy wyeksportować da-
ny plik PSD do SWF, a następnie wczytać go w programie
Flash. Eksportowane projekty zachowują wszystkie swoje
wartości oraz ustawienia, jednak są odpowiednio konwer-
towane, aby można było jak najwygodniej pracować na nich
we Flashu.
Ponadto ImageReady z dopiskiem CS pozwala na do-
dawanie plików SWF (głównie wariacji tekstowych) do pli-
ków HTML (a nawet XHTML), które sam tworzy. Uspraw-
niono możliwości cięcia grafiki na potrzeby stron www. Te-
raz jest możliwość ukrycia konkretnych wycinków, dzięki
temu jeśli nie ma potrzeby to nie zostaną one zawarte w ko-
dzie HTML. Sk Galeria filtrów

PODSUMOWANIE
Nowy Photoshop jest godnym następcą wersji 7.0. Posia-
da całkiem sporo przydatnych zmian i nowych możliwości.
O kilku z nich nie wspomniałem w tym artykule, jak choćby
o rozbudowanej przeglądarce plików, czy też o dzieleniu się
swoimi projektami z innymi grafikami przy pomocy prezenta-
cji w postaci plików PDF.
Jedynym minusem nowej wersji jest fakt, że posiada-
cze starszych systemów nie będą mogli go przetestować.

Konfigurowalne skróty klawiaturowe

Rozbudowane o edycję i przeszukiwanie moduł metadanych XMP

Możliwość pracy z obrazem pełnoekranowym

Paleta histogramów

Przetwarzanie wsadowe plików

Plik z historią pracy nad dokumentem i Cięcie grafiki w ImageReady CS

Galeria filtrów

Rozszerzona obsługa skryptów

Korekcja świateł i cieni

Kamera RAW

Filtry pracujące w trybie 48 bitowego koloru

Automatyczne kadrowanie

Filtry fotograficzne

Rozmycie soczewkowe

Automatyczne łączenie zdjęć o

ó>
m
Zarządzanie warstwami (Layer Comps) E
Tekst na ścieżce l/>
O.

Podwarstwy 5

Obsługa dużych dokumentów (powyżej 2 GB)

Tworzenie obrazów ze ścieżką czasu

Obsługa niekwadratowych pikseii

Eksport warstw do plików

Wszechstronna obsługa 16-bitowych plików RGB

B Ulepszona przeglądarka plików w PS CS

57
luty/marzec 2004
 KLASYCZNE EFEKTY

15 min

film

pliki
TEKSTURA
Waldemar Pruss

Photoshop to potężne narzędzie do tworzenia grafiki. Jest on także nieoceniony dla projektantów
3D. Dzięki niemu mogą tworzyć realistyczne tekstury, które później nałożą na stworzone obiekty
i modele. W poniższym tutorialu zaprezentujemy, w jaki sposób można stworzyć teksturę zardze-
wiałej blachy przy pomocy zdjęć zrobionych aparatem cyfrowym (są one zamieszczone na płycie
CD dołączonej do magazynu). Oczywiście nie trzeba wykorzystywać tych samych zdjęć — można
użyć własnych.

. -UJ

Tworzymy tło

Tworzymy pusty dokument o wymiarach 400 na 300 pikse-

li. Można to zrobić na dwa sposoby: korzystając z polecenia
Plik>Nowy (File>New) albo za pomocą kombinacji klawiszy [Ctrl\+[N\.
W polu o nazwie Wypełnienie (Contents) zaznaczamy Biały (White).
Otwieramy zdjęcie o nazwie rust.tif, na którym widać kawałek zardze-
wiałej blachy. Po otwarciu tego obrazka klikamy na niego lewym przy-
ciskiem myszy i — trzymając ten przycisk cały czas — przesuwamy
obrazek do dokumentu, który utworzyliśmy wcześniej. Mamy teraz do-
kument z tłem dla naszej tekstury, którą zamierzamy stworzyć.

Duplikowanie

Po utworzeniu tła duplikujemy warstwę ze zdjęciem, które uprzed-

nio wczytaliśmy. Możemy to zrobić za pomocą kombinacji klawi-
szy [Ctrl]+[J], albo klikając prawym przyciskiem myszy na war-
stwie z blachą, a z menu, które się ukaże wybieramy Powiel war-
stwę (Duplicate Layer). Musimy zduplikowane zdjęcie wyostrzyć.
Wybieramy z menu u góry Obrazek>Dopasuj>Jasność/Kontrast
(lmage>Adjustments>Brightness/Contrast). W oknie, które się poja-
wi, Jasność (Brightness) ustawiamy na +30 i Kontrast (Contrast) usta-
Ol wiamy też na +30.
o
Ol
ra Wycinanie
•a
a.
S Następnie z przybornika narzędzi wybieramy narzędzie Lasso i za je-
g go pomocą na powielonej warstwie rysujemy zaznaczenie, tak jak
widać na rysunku, albo inne dowolne — według naszego uznania.
Następnie wciskamy przycisk [Delete], co spowoduje wycięcie zazna-
czenia i utworzy dziurę, nad która będziemy pracować w następnym
kroku. Dzięki temu zabiegowi nasza grafika będzie wyglądała bardziej
realistycznie.
 N

O
wm Pęknięcie

Teraz dodamy cień, który bardziej podkreśli pęknięcie. Pozostajemy

na zduplikowanej warstwie, na której wycięliśmy zaznacze-
nie. Klikamy na nią w oknie Warstwy (Layers) prawym przyci-
skiem myszy i z widocznego menu wybieramy Opcje warstwy
{Layer Properties). W oknie, które się pojawi, klikamy po lewej stro-
nie na opcję Cień (Drop Shadow) i w niej ustawiamy następują-
ce parametry: Tryb mieszania (Blend Modę) — Mnożenie (Multiply),
Krycie (Opacity) na 30, Kąt (Angle) na 142, Odległość (Distance) na
7, Zasięg (Spread) na 0, Wielkość {Size) na 2. Zatwierdzamy [OK].
W ten sposób otrzymaliśmy pęknięcie wyglądające znacznie bar-
dziej realistycznie.

Powierzchnia cz. 1

W tym kroku zaczniemy etap pracy związany z poprawianiem kolo-

rów. Otwórzmy więc zdjęcie o nazwie mur.tif\ przenieśmy je do na-
szego dokumentu — w taki sam sposób jak w kroku nr 1.
Teraz, gdy już mamy przeniesiony obrazek, ustawimy jego krycie.
W tym celu przechodzimy do okna Warstwy (Layers) i ustawiamy kry-
cie na Nakładka (Overlay). Dzięki temu tekstura nabrała kolorów, jed-
nak należy jeszcze nad nią popracować, aby nabrała bardziej reali-
stycznego wyglądu.

Powierzchnia cz. 2

W celu polepszenia i zbliżenia się do jak najlepszego efektu, otwie-

ramy zdjęcie o nazwie blach.tifi również przenosimy je do naszego
dokumentu. Następnie — tak jak w poprzednim kroku — ustawiamy
krycie, ale tym razem jako Mnożenie (Multiply). Tym razem tekstura
zrobiła się ciemniejsza i nie wygląda zbyt ładnie. Poprawimy to w na-
stępnych krokach.

Korekcja kolorów

Aby dokonać korekcji kolorów w oknie Warstwy, klikamy na biało-czar-

ne kółko znajdujące się na dole palety i z listy, która się ukaże, wybie-
ramy Krzywe (Cun/es). Jest to narzędzie, które oferuje znacznie bar-
dzie zaawansowane ustawienia niż Jasność/Kontrast. Ukaże się nam
okno, w którym możemy dokonać ustawień. Oś pozioma wykresu
przedstawia wyjściową (nie zmienioną) wartość jasności pikseli, a oś
pionowa nowe (nadane) wartości jasności. Ustawiamy linię, którą wi-
dać w lewym okienku, mniej więcej tak jak na ilustracji — w ten spo-
sób skorygowaliśmy półcienie. Następnie zatwierdzamy operację [OK]. S
o
6)
ra
•o
Wyostrzanie

W celu wyostrzenia obrazu i poprawienia jego kontrastu ponownie kli-

kamy na biało-czarnym kółku u dołu okna Warstwy i z listy wybiera-
my polecenie Jasność/Kontrast (Brightness/Contrast) i w okienku, któ-
re się ukaże, ustawiamy następujące parametry: Jasność (Brightness)
na +75 a Kontrast (Contrast) na +76. Dzięki temu uzyskaliśmy ładną
i wyraźną realistyczną teksturę. •

59
luty/marzec 2004
 NARZĘDZIA

5 min
Jak zrobić własn
Łukasz Zając
film
Czy nie potrzebujesz pędzelka o innym niż domyślny wzorze? Na pewno Ci niezbędny
niestandardowy kształt końcówki ~ inny niż oferuje program Adobe "^lotoshop.
pliki
W tym tutonalu dowiesz się jak samemu wykonać własny pędzel.

Tworzenie wzoru pędzla

Tworzymy nowy dokument Plik>Nowy (File>New). Ustawiamy

Szerokość (Width) na 700 pikseli, a Wysokość (Height) na 500 pik-
seli. Wypełnienie (Contents) wybieramy Przezroczyste (Transparent).
Klikamy [OK], aby utworzyć nowy dokument. Teraz z okna Narzędzia
(Tools) wybieramy dowolny Kształt własny (Custom shape). W na-
szym przykładzie wybraliśmy kształt Sztuczne Ognie (Starburst),
a wokół niego narysowaliśmy ramkę za pomocą kształtu Ramka 7
(Frame 7). Możemy oczywiście wykonać dowolny wzór, który będzie
naszym pędzlem. Kolor lub styl, jaki wybierzemy, nie będzie miał żad-
nego znaczenia.

Łączenie warstw

Musimy teraz połączyć wszystkie warstwy. W tym celu klikamy na

Warstwa>Złącz widoczne (Layer>Merge Visible) lub po prostu wciska-
my kombinację klawiszy [Ctri\+[Shiff\+[E\. Zawsze musimy pamiętać
o tym, aby łączyć wszystkie warstwy jeszcze przed tworzeniem no-
wego pędzla, w przeciwnym razie pędzel zostanie utworzony jedynie
z aktualnie zaznaczonej warstwy! Aby utworzyć pędzel, wybieramy
Edycja>Zdefiniujpędzel (Edit>Define Brush). W polu Nazwa (Name)
wpisujemy nazwę dla naszego pędzla. Akceptujemy, klikając [OK\.

Testowanie pędzla

Możemy teraz przetestować nasz pędzel. W tym celu tworzymy no-

wy dokument: Plik>Nowy (File>New), wybieramy dla niego dowol-
ne parametry. Z okna Narzędzia (Tools) wybieramy narzędzie Pędzel
(Brush Tool) i wybieramy nasz pędzelek. Ustawiamy teraz średni-
cę pędzla (Master Diameter) na np. 50 pikseli, wybieramy dowol-
ny kolor. Gotowe, możemy już wypróbować nowo utworzony pędzel.
Oczywiście możemy tworzyć pędzle o przeróżnych kształtach i wiel-
kości — zależnie od potrzeb i fantazji.

— !r ,. Wczytywanie pędzli

B Wczytujemy plik Design-Extra!.abr (znajduje się na płycie CD do-

o łączonej do magazynu). Z palety wyboru kształtu pędzla wybiera-
di
my Wczytaj Pędzle (Load Brushes) i szukamy pliku Pędzelek 2, usta-
"O
wiamy Główną Średnicę (Master Diameter) na 55 pikseli. Na pa-
sku opcji narzędzi klikamy na Pędzle. Zaznaczamy pole Dynamika
kształtu (Shape Dynamics), w opcjach wybieramy Wahanie rozmia-
ru (Size Jitter), Kontrola: Zanik (Control: Fade) — ustawiamy na 40.
Zaznaczamy pole Inne dynamiki (Other Dynamics), Wahanie krycia
(Opacity Jitter) ustawiamy na 45%, Kontrola: Zanik (Control: Fade)
— ustawiamy na 25. W ten sposób uzyskujemy efekt spadających
gwiazd. •

60 psd
luty/marzec 2004
KSIĄŻKI — RECENZJE
Photoshop 7 Down & Dirty Tricks
• •##0
Autor: Scott Kelby
Wydawnictwo: New Riders
Objętość: 304 strony
ISBN: 0735712379
dostępna w wydawnictwie Mikom
Cena: 162 zł
Photoshop 7. Ćwiczenia praktyczne
Autor: Łukasz Oberlan
Obiętość: 104 strony
Wydawnictwo: Helion
ISBN: 83-7197-876-6
Cena: 12 zł
Photoshop 7
Książka jest zestawieniem tutoriali opisujących najbardziej popularne efekty spe-
cjalne, jakie można osiągnąć w Adobe Photoshop 7.0. Autor — Scott Kelby — redak-
tor pisma Photoshop User w przystępny sposób szczegółowo przedstawia między
innymi: techniki obróbki zdjęć (retusz, korekcja barwy i kontrastu), efekty 3D osiąga-
ne przy użyciu filtrów jakie oferuje Photoshop, zaawansowane techniki pracy z tek-
stem, tajniki efektów stosowanych na warstwach, metody i pomysły na tworzenie
efektownych interfejsów.
Każdy z efektów został opisany krok po kroku i opatrzony kolorowymi ilustracja-
mi, co zdecydowanie ułatwia zrozumienie procesu jego tworzenia. Oprócz tutoriali
na każdej stronie czytelnik znajdzie praktyczne porady i przydatne skróty klawiatu-
rowe. Pozycja jest przeznaczona głównie do użytkowników, którzy stawiają pierwsze
kroki w Photoshopie. Brakuje jedynie płyty CD z wykonanymi projektami, co mogło-
by znacznie ułatwić czytelnikom ich przyswojenie.
Magdalena Cyrczak
Książka adresowana jest przede wszystkim do początkujących grafików kompute-
rowych, amatorów chcących zgłębić tajniki 7 wersji Photoshopa, jednak informacje
w niej zawarte mogą być wykorzystane zarówno w projektach niekomercyjnych, jak
i w pracy zawodowej. Wykonanie opisanych ćwiczeń pomoże utrwalić podstawową
wiedzę o tym programie. Poznamy m.in. techniki obróbki i retuszu fotografii, łącznie
z poprawianiem jakości zniszczonych zdjęć, kadrowanie obrazu, podstawy przygo-
towywania obrazu do obróbki i do druku, sekrety tworzenia grafiki na potrzeby inter-
netu, filtry, narzędzia selekcji, pracę na warstwach oraz korygowanie kolorystyki, ja-
sności i kontrastu. Przedstawione przykłady zastosowania Photoshopa 7 w praktyce
opisane zostały w prosty i przystępny sposób, wzbogacone ważnymi wskazówkami
praktycznymi i zobrazowane licznymi — niestety tylko czarno-białymi — ilustracja-
mi. Cenne informacje, które będą przydatne w pracy z Photoshopem, zawarte są
również na końcu książki. Szkoda, że Autor wspominając w ćwiczeniach i swoich
wskazówkach o skrótach klawiaturowych, nie podał w formie tabeli zestawienia tych
najważniejszych, zwłaszcza początkujący użytkownicy Photoshopa byliby wdzięcz-
o
ni za taką „ściągawkę". 01
Książka na pewno ułatwi pierwsze kroki w poznawaniu programu i zachęci do dal-
szej pracy, jednak nie pokaże nam wszystkich możliwości, jakie posiada Photoshop
i wszystkich jego zastosowań. Czytelnicy chcący poszerzać swoją wiedzę i umiejęt- 3!
ności w tym kierunku powinni sięgnąć po ambitniejszą lekturę.
Niestety tym razem do książki nie został dołączony CD ROM — a szkoda. Zwłasz-
cza w przypadku publikacji poświęconych ćwiczeniom praktycznym bardzo przydat-
ne sąpiiki źródłowe do każdego omówionego projektu lub filmy przedstawiające krok
po kroku wykonywane czynności. Ważne jest także to, że w książce wykorzystano
tylko angielską wersję programu.
Piotr Horodyński
•?s<! 61
luty/marzec 2004
 RECENZJE

Recenzje tabletów
Dariusz Pasturczak *

INTU0S2
Rodzina tabletów Intuos2 liczy sobie pięciu członków
ne możliwości przy korzystaniu z takich programów jak Pa-
różniących się rozmiarami (A6, A5, A4 regular, A4 oversize inter, Aura czy Photoshop.
oraz A3) obszaru roboczego. My dostaliśmy do testów wer-
Myszka 4D posiada cztery programowalne przyciski
sje o rozmiarach A4. W skład zestawu wchodzi nie wyma-
(stad nazwa 4D) oraz scroll. Mimo iż nie jest optyczna spra-
gające baterii piórko oraz także nie posiadająca dodatkowe- wuje się bardzo dobrze i jest stosunkowo dokładna. Nieste-
go zasilania mysz o nazwie 4D i sam tablet, czyli miejsce na ty jej konstrukcja nie przewiduje użycia na innej powierzch-
którym będziemy rysować. ni niż tablet.
Zaletą zestawu jest możliwość swobodnego używania Wymiary tabletu to: 456 x 361 x 14 mm, natomiast ob-
zarówno piórka jak i myszki. Stało się to możliwe dzięki usu- szar roboczy na którym możemy pracować to 304,8 x 240,6
nięciu kabli łączących je z tabletem. Mimo braku „smyczy" mm. Te rozmiary powodują, że rysuje się na nim swobod-
każdy z urządzeń nie wymaga wymiany baterii, gdyż dzia- nie i przyjemnie. Nie brak nam miejsca i zasadniczo taka
łają one bez żadnego wewnętrznego źródła energii. Jest powierzchnia powinna wystarczyć nawet do bardzo skom-
to niewątpliwie ogromny plus, dzięki któremu nie jesteśmy plikowanych ilustracji czy projektów.
zmuszeni kupować co kilkanaście dni baterii aby można by-
Intuos2 to znakomity zestaw do tworzenia cyfrowych ilu-
ło korzystać z zestawu.
stracji, jego możliwości są ograniczone jedynie naszym ta-
Ponadto zarówno mysz jak i piórko posiada własny, uni- lentem i zapałem do pracy.
kalny system wykrywania o nazwie TolllD. W praktyce
oznacza to, że narzędzie po dotknięciu tabletu jest automa-
tyczne wykrywane, rozpoznawane i gotowe do użycia oraz
konfiguracji.
Piórko Intuos2 posiada wygodną i energonomiczną budo-
wę, dzięki czemu leży w dłoni wręcz idealnie. Jest stosun-
kowo lekkie i zarazem bardzo precyzyjne, posiada 1024 po-
ziomy czułości nacisku, ponadto jest aktywne nawet do 10
mm nad poziomem tabletu. W praktyce daje nam to ogrom-

Producent WACOM WACOM

Parametry tabletu

Format A4 A6
Obszar roboczy 9x12"(304,8x240,6mm) 4x5" (92,8x127.6)
Wymiary 456x361x14 225x210x7.5 GRAPMRE2 USB DC 1000
Rozdzielczość 2540 dpi 1000 dpi W skład zestawu Graphire2 wchodzi: bezkulkową mysz-
Folia ruchoma jest kę (działająca bez baterii), nie wymagające baterii oraz in-
jest
Podłączenie wersja P (RS-232C), USB
nego zasilania, czułe na nacisk piórko oraz podkładka do
wersja U (SSB)
rysowania czyli „tablet" o —jak twierdzą twórcy — bardzo
Poziomy nacisku 1024 512 nowoczesnym kształcie.
Menu ponad obszarem roboczym tak Jedną z zalet zestawu jest możliwość swobodnego uży-
Dwuściezkowatość tak wania zarówno piórka, jak i myszki. Jest to możliwe dzięki
Pole szybkiego wyboru
usunięciu z konstrukcji zbędnych i ograniczających możli-
tak
wości kabli łączących je z tabletem czy też komputerem, do
Podstawka do piórka tak. oddzielny element
którego jest podłączony zestaw. Warto zaznaczyć, że oba
Waga 1600 g 426 g manipulatory nie wymagają również instalacji oraz okreso-
Parametry piórka wej wymiany baterii, gdyż działają one bez jakiegokolwiek
160x14 mm 145A14 mm
wewnętrznego źródła energii. Jest to niewątpliwie ogrom-
Zasilanie bezbateryjne
ny plus, dzięki któremu nie jesteśmy zmuszeni kupować czy
bezbateryjne
Dl Podłączenie
też ładować co kilka tygodni baterie, aby można było swo-
bezprzewodowe bezprzewodowe
o bodnie pracować.
ó\ Poziomy nacisku 1024 512

I
Piórko dołączane do Graphite2 jest smukłe i dobrze leży
Gumka czuła na nacisk tak tak w dłoni. Jest bardzo lekkie i poręczne, posiada 512 pozio-
o. Boczne przyciski/ilość tak/2 tak/2 mów nacisku, co powinno wystarczyć do wszelkiego rodza-
g
Kod Tool ID tak nie
ju szkiców elektronicznych czy też podpisów. Posiada także
5 dwupozycyjny przycisk, którym można swobodnie zapro-
Waga 17 g
'ug
Oprogramowanie
gramować oraz gumkę.
Pamtei Classic Pamter Classic. Cybei Sign,
Pen Office SE. Pen Toois Myszka jest bezkulkową, choć nie optyczna i podobnie
Gwarancja 24 miesiące 24 miesiące jak piórko jest bezprzewodowa. Posiada 3 programowalne
Cena 2574 PLN przyciski. Wadą jest to, że nie ma możliwości używania jej
469 PLN
na innym podłożu niż tablet.

62
luty/marzec 2004
 •O

•2

Sam tablet, czyli pod- godzinach pracy doszedłem do dwóch wniosków: po pierw-
łoże służące do ryso- sze: do wszystkiego można się przyzwyczaić, a po drugie:
wania, łącznie ze stoja- tablet został stworzony z myślą o bankach, gdzie lada dzień
kiem na piórko ma wy- będziemy używać podpisu elektronicznego
miary 225x210x7,5 mm Praca z zestawem Graphire2 jest przyjemna, jednak sta-
i podłącza się go do por- wia spore ograniczenia. Szczególnie odczuwalne będzie to
tu USB. Niestety realne dla osób przyzwyczajonych do rysowania na formatach co
miejsce pracy jest sto- najmniej A4 - będzie im brakować miejsca. Dlatego przed
sunkowo małe i raczej ewentualnym zakupem warto rozważyć możliwość prze-
trudno jest stworzyć na testowania go w sklepie, by sprawdzić czy taka mała po-
niej bardziej skompli- wierzchnia nie będzie nam przeszkadzać. Z pewnościąjest
kowane prace. Po kilku to idealne urządzenie dla początkujących użytkowników.

DLA PROFESJONALISTÓW
Piotr Horodyński

PL-700 którą malujemy pojawia się około 3 mm

Tablet WACOM z 17 calowym ekranem LCD charaktery- „pod" naszym piórkiem. Jednak
zuje się bardzo wysoką jakością wykonania, doskonałym na razie chyba nie ma innych
odwzorowaniem kolorów oraz szybką i dokładną reakcją na możliwości technicznych, po-
ruchy piórka. Rozdzielczość tabletu to 508 linii na cal, przy zwalających na stworzenie
rozpoznawalnych 512 poziomach nacisku. bardzo cienkiego i odpor-
Piórko, podobnie jak we wszystkich innych urządzeniach nego na nacisk ekra-
firmy WACOM jest bezbateryjne i bezprzewodowe. Posiada nu. Jakość wyświe-
gumkę oraz dwupozycyjny przełącznik. Rozdzielczość mo- tlacza jest doskonała,
nitora zintegrowanego z tabletem wynosi 1280 x 1024 pik- bardzo duża jasność, bar-
sele. Posiada on złącze cyfrowe DVI oraz analogowe VGA. dzo wysoki kontrast, bardzo duży
Tablet posiada odchylaną stopkę, która pozwala regulować kąt widzenia; niczym w wysokiej jako-
kąt ustawienia w zakresie 16-72 stopnie. Dzięki temu mo- ści monitorach. Należy tylko pamiętać o od-
żemy używać tablet zarówno jako monitor, przy korzystaniu powiednim ustawieniu w stosunku do źródeł świa-
np. z myszki i klawiatury, jak i jako cyfrową deskę kreślar- tła, gdyż podobnie jak w klasycznych monitorach, na
ską. Możliwe jest także całkowite zdjęcie stopki i położenie szybie pojawią się refleksy. Tablet w czasie pracy nagrzewa
tabletu płasko na stole lub na kolanach. Stopka wyposażo- się nieco, jednak po około godzinie pracy ciepło osiąga pe-
na jest w gumowe końcówki które doskonale zabezpiecza- wien poziom, którego już nie przekracza (najdłuższy czas
zdjęcie: Aleksandra Kot
ją tablet przed przesuwaniem się, czy spadnięciem z blatu testowania to około 10 godzin). Muszę tu zaznaczyć, że cie-
(sprawdzone na śliskim podłożu). Gniazda do połączenia pło to bynajmniej nie jest uciążliwe, nawet podczas długiej
z komputerem i zasilaniem ustawione są równolegle do po- pracy z tabletem na kolanach. Dla niektórych być może to
wierzchni blatu, kable są dodatkowo zabezpieczone przed będzie jeszcze jedna z bardzo wielu zalet tabletu. ®
przypadkowym wypadnięciem i ukryte pod klapką. Całość
sprzyja zachowaniu porządku.
Na stronach firmy Wacom, model PL-700 jest określa-
ny raczej jako urządzenie wskazujące, doskonałe do wyko-
rzystywania w czasie prezentacji biznesowych. Jako flago- Technologia Rezonans elektromagnetyczny
we narzędzie przeznaczone dla artystów wskazywane są Obszar roboczy 338 x 270 mm
modele serii Cintiq. Wydaje się do trochę krzywdzące dla
Rozdzielczość tabletu 0,05 mm na punkt
tego wspaniałego tabletu. Większość parametrów PL-700 (508 linii na cal)
jest wyższa, poza czasem reakcji plamki, jednak w prakty-
Dokładność tabletu ±0,5 mm, ±1 mm w narożnikach
ce nawet bardzo ekspresyjne malowanie jest natychmiast
Odczyt położenia piórka 5 mm nad powierzchnią ekranu-tabletu
odwzorowywane na monitorze. Tablet cechuje bardzo do-
bre odwzorowanie łuków, nawet przy szybkim prowadze- Szybkość odczytu położenia max. 205 punktów na sekundę
piórka
niu kursora. Piórko prowadzi się wygodnie, szybko i do-
kładnie reaguje ono na nacisk i daje charakterystyczny po- • • |
o
ślizg na szybie monitora. Jestem od wielu lat przyzwycza- Typ czułe na nacisk, bezprzewodowe, Dl

jony do pracy z tabletem, jednak mimo tego doświadczenia bezbateryjne

i pewnych przyzwyczajeń, nieco inny sposób prowadzenia Przyciski dwupozycyjny, programowalny
się piórka po szybie, bardzo szybko przypadł mi do gustu. przycisk oraz gumka
Nie muszę chyba wspominać o samym komforcie pra- Siła nacisku potrzebna do jego 20 g
cy z takim urządzeniem, chyba najbardziej przypominają- aktywacji

cym pracę w naturalnych mediach. Nagle kursor, charak- Ilość poziomów nacisku 512
terystyczny dla wszystkich aplikacji wskaźnik myszki, staje Żywotność końcówki piórka 10 milionów naciśnięć
się zbędny, wręcz zaczyna przeszkadzać. Właściwie jedy- Waga 16g
ny mankament tabletu to gruba szyba powodująca że farba

psć 63
uty/marzec 2004
 POZNAJEMY PHOTOSHOPA

INTERFEJS
Adobe Photoshop CE [okiadkatif @ 16,7% (RGB)]
|'fllk Edycja Obrazek Warstwa Zaznacz Filtr Widok Okno Pomoc
PASEK MENU
T
Pasek menu programu Photoshop [Z3 Automatyczny wybór warstwy Q Pokaż obwiednif i J f J J d

zawiera wszystkie opcje, ustawienia

oraz narzędzia, które możemy wyko-
rzystać podczas pracy z programem.
Menu podzielone jest w sposób
logiczny na główne kategorie: Plik
(File), Edycja (Edit), Obraz (Image), i- '
Warstwa (Layer), Zaznaczenie (Se-
lect), Filtr (Filter), Widok (View), Okno
(Window), Pomoc (Help). y
•1,

-i.
• OKNO SKALI DOKUMENTU
Okno skali dokumentu informuje nas
na bieżąco o tym w jakiej skali znaj-
duje się aktywny dokument (obrazek, u.
zdjęcie), nad którym właśnie pracu-
jemy. 100% oznacza rzeczywista '—* J

wielkość dokumentu, jednak gdy pra-

cujemy na dużym dokumencie, któ-
ry nie mieści się w oknie programu 1
w całości możemy zmienić jego ska-
lę w zależności od potrzeb.
J
42

INFORMACJE
O DOKUMENCIE
Jest to szybka podpowiedz na temat
dokumentu (obrazka, zdjęcia), nad
którym aktualnie pracujemy. O tym,
co będzie się pojawiało w tym miej-
scu możemy zadecydować sami
w zależności od tego, na jakich infor-
macjach najbardziej nam w danej
chwili zależy. Czy np. na wielkości
pliku, rozmiarze dokumentu czy aktu-
alnego aktywnego narzędzia.

• #,67X I & Dok: 24,9M(22,3M jt Klikni| i przeciągnij, aby prsssun^ó warstwf. Shift ogranie

WYBÓR RODZAJU • PASEK NARZĘDZI

O) INFORMACJI Pasek narzędzi grupuje wszystkie podstawowe narzędzia pro-

I
o.
O DOKUMENCIE
To tutaj decydujemy o czym informo-
i wał nas będzie Photoshop w oknie
Informacje o dokumencie. Do wybo-
ru mamy kilka opcji, które dosto-
sowujemy do aktualnych naszych
potrzeb.
gramu Photoshop, za pomocą których manipuluje się obrazka-
mi, np. narzędzia do malowania, rysowania, zaznaczania. Przy
ikonach na pasku narzędzi znajduje się mała strzałka, oznacza
ona, że w tym miejscu na pasku narzędziowym zgrupowano kil-
ka narzędzi, które są podobne pod względem funkcjonalności.
Aby uzyskać dostęp do ukrytych w danej chwili narzędzi, nale-
ży kliknąć ikonę odpowiedniego narzędzia prawym klawiszem
myszy lub dłużej przytrzymać wciśnięty lewy klawisz.

68
luty/marzec 2004
PHOTOSHOPA
PASEK OPCJr
Pasek opcji jest to zbiór opcji wybra-
nego narzędzia zgrupowanych w jed-
nym dobrze widocznym i łatwo
dostępnym miejscu. Jeżeli pod-
czas pracy zmienimy narzędzie,
pasek opcji dynamicznie zmieni swój
wygląd wyświetlając opcje, których
można użyć do dostosowania sposo-
bu działania tego narzędzia.

Historia ^ąnia '(awienia nar:ed:ia
OBSZAR ROBOCZY*
Obszar roboczy to cała przestrzeń
programu Photoshop, którą możemy
dowolnie sobie organizować. Otwie-
ramy w nim nasz dokument, możemy
na nim dowolnie rozmieszczać palety
i pasek narzędzi. Stanowi on dla nas
przestrzeń ograniczonąjedynie wiel-
kością ekranu.

AKTYWNY DOKUMENT •
Aktywnym dokumentem może być
zdjęcie lub obrazek, nad którym
w pracujemy. W programie Pho-
toshop możemy otworzyć w danej
chwili wiele dokumentów, jednak
aktywnym może być tylko jeden
z nich, w którym dokonujemy zmian,
gdzie rysujemy, malujemy, wklejamy
bądź wycinamy.

OKNO WSKAZÓWEK *
PROGRAMU
Jest to obszar, w którym dynamicz-
nie i na bieżąco Photoshop informu-
je nas o czynnościach jakie możemy
w danej chwili wykonać za pomocą
danego narzędzia. Stanowi to swego
rodzaju podręczną pomoc dla użyt-
• PALETY kowników, którzy poznają i uczą się
o
Palety są specjalnymi zestawami narzędzi lub ustawień progra- programu Photoshop. di
ro
mu Photoshop. Kiedy pierwszy raz uruchomimy program Palety •o
domyślnie ustawione są po prawej stronie ekranu. Ważną zaletą
Palet jest jednak możliwość ich przemieszczania na całym ekra-
nie programu. Każdy może dowolnie je rozmieścić, połączyć
z innymi paletami lub w razie potrzeby zupełnie ukryć. Zwiększa
to znacznie funkcjonalność i wygodę korzystania z programu.

?
69
luty/marzec 2004