PSD magazyn

Kl

fi\

NQ W

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

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

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

ni

ca

CL

O

TEMAT NUMERU

W

WEBDESIGN^ projektujemy layout strony kolory na WWW optymalizacja grafiki

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

•

•

ul. Bukowska 14 http://www.quedexx 62-080 Sierosław biuro@quedexxom dodatkowe informacje na stonie producenta: www.di

i

kom. H8 605 061 tcl.*48 61 8963 fax +48 61 8963 900 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 tworzeniu grafiki i obróbce zdjęć w programie Adobe Photoshop. Nie będziemy jednak pomijać innych tematów — zwłaszcza dotyczących nowości, jakie pojawiają się na naszym 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żemy Warn jak tworzyć teksturę przypominającą zardzewiałą powierzchnię, dowiecie się jak ręcznie wykonać metalowy obiekt pokryty kroplami wody, poznacie tajniki usuwania efektu mory z zeskanowanych zdjęć.

Nie przeoczyliśmy również nowości, jaka ostatnio pojawiła się na rynku — pakietu 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 Pracuje jako freelancer, od raku również w stałej współpracy z agencjami reklamowymi.

Danie! Sodkiewicz 19 lat, z powołania ;-) uczęszcza do Technikum Elektronicznego we Wrocławiu. Oprócz sprzętu komputerowego interesuje się także różnego rodzaju programami. szczególnie związanymi z tworzeniem stron internetowych i grafiką

Mariusz Dubielecki (Akira) Technik-Informatyk, interesuje się tworzeniem stron WWW, animacji, psychologią, muzyką rockową, pisaniem, szeroko pojętym sportem ze szczególnym uwzględnieniem i praktykowaniem kulturystyki i lekkoatletyki.

Dariusz Pasturczak Grafiką zajmuje się od przeszło 10 lat. Z Photoshopem pracuje od sześciu lat. Interesuje się zarówno grafiką 2D jak i 3D. także animacją. Obecnie pracuje jako Freelancer wykonując rozmaite projekty graficzne.

Rafał Dukaczewski Photoshopa używa od 6 lat. Zajmuje się tworzeniem grafiki do celów reklamowych, projektowaniem stron internetowych. logotypią.

Łukasz Pabian Grafiką komputerową interesuje się od kilku lat. W swoich ilustracjach stara się przekazywać to co w danej chwili odczuwa, posługując się abstrakcyjnym wyrazem przestrzeni, formy oraz koloru.

Większość jego prac można zobaczyć na stronie www.insane.all.pl Magdalena Cyrczak Grafikąi projektowaniem witryn internetowych zajmuje się od około 2 lat.

Portfolio: www.infranet.pl/magda

Piotr Horodyński Absolwent Akademii Sztuk Pięknych w Łodzi. Dziedzinąjego działalności jest malarstwo, grafika tradycyjna i komputerowa, multimedia i animacje.

Aleksandra Kot Absolwentka Wydziału Geografii i Studiów Regionalnych Uniwesytetu Warszawskiego, z zamiłowania podróżniczka i fotograf, grafiką komputerową (Photoshop, Flash, Bryce. Painter) zajmuje się od dwóch lat.

Waldemar Pruss Autor tutorialu p.t. ia tekstura.

Zardzewia-

Łukasz Zając Freelance designer z ponad dwuletnim doświadczeniem w projektowaniu graficznym i projektowaniu stron internetowych.

Trejderowski Tomasz Z wykształcenia metalurg, z zawodu programista, webdesigner i wykładowca, z zamiłowania —pisarz.

Pracuje jako wolny strzelec, tworząc serwisy internetowe, programy i aplikacje oraz wykładając na kursach komputerowych.

Marcin Sawicki Student III roku informatyki. Grafiką zajmuje się od niedawna bo od ok. 1.5 roku, w chwili obecnej poznaje Flasha. W swoich obecnych pracach wykorzystuję Photoshopa 7. Photolmpact 8. FreeHand MX oraz Flash MX. W przyszłości planuje poznać tajniki tworzenia 3D.

Lech Jaszowski Fotograf, nauczyciel w Policealnym Studium Fotograficznym, wykładowca w firmie informatycznej.

Tomasz Zelek Student drugiego roku Politechniki Koszalińskiej. Na co dzień pracuje m.in. jako grafik, zajmując się głównie tworzeniem stron WWW. Prowadzi serwis poświęcony Photoshopowi — www.graffik.pl.

Michał Szpilewski Grafiką zajmuje się od 5 lat, gównie na potrzeby poligrafii, od 2 lat współtworzy jedną z najdynamiczniej rozwijających się galerii internetowych —digart.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 Krople wody i nie tylko.

ŁUKASZ ZAJĄC

MAGDALENA CYRCZAK

Motyl

FOTOGRAFIA CYFROWA

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: Magdalena Cyrczak design@software.com.pl

DARIUSZ PASTURCZAK

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: Łukasz Pabian, insane@all.pl

RECENZJE Piuginy

Projekt typograficzny okładki: Marzena Turek-Gaś marzenat@software. com.pl

•- DARIUSZ PASTURCZAK

Książki •

Dział reklamy: reklama@software.com.pl tek: (22)860 18 79

MAGDALENA CYRCZAK PIOTR HORODYŃSKI

Prenumerata: Marzena Dmowska, pren@software.com.pl tek: (22) 860 17 67

Tablety DARIUSZ PASTURCZAK PIOTR HORODYŃSKI

GALERiA Galeria

digąrt.pl

POWSTAŁA PRZY WSPÓŁPRACY Z

W

Wyprodukowano w Polsce Druk: Stella Maris

Konkurs ROZWIĄZANIE KONKURSU „POCZTÓWKA Z WAKACJI"

POZNAJEMY PHOTOSHOPA p

* FAQ

"'

I?

Adres korespondencyjny: Software-Wydawnictwo Sp. z o. o., 00-190 Warszawa, ul. Lewartowskiego 6 e-mail: psd@software.com.pl, www.psdmag.org tel. (22) 860-18-81, fax (22) 860-17-71

Redakcja dokfada wszelkich starań, by publikowane w piśmie i na towarzyszących mu nośnikach informacje i programy były poprawne, 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 wymienia redakcja, Wszystkie znaki firmowe zawarte w piśmie są własnością odpowiednich 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 i użytkowaniu programów zamieszczonych na płycie CD dostarczonej z pismem.

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

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

Interfejs

?

luty/marzec 2004

O Ć)

-o /l

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 ekranu oraz ustawianie tapet, strona producenta: http://www.ultimatepaint.com

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ą. Aplikacja posiada efektz zmiany koloru, trybu mieszania, cienia, płaskorzeźby i wiele innych, strona producenta: http://www.extensis.com

Universe Image Creator 1.63 (Win) Program pozwalający na tworzenie realistycznych obrazów przypominających przestrzeń kosmiczną: planety, gwiazdy, rozbłyski świetlne i galaktyki. strona producenta: http://www.diardsoftware.com

Pro Motion Program do edycji grafiki - idealny do tworzenia grafiki do gier, ikon, a także animacji. strona producenta: http://www.cosmigo.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 zapisanych 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 wygodnym interfejsie użytkownika. Jak każdy tego typu program, pozwala zeskanować i obrobić zdjęcie. Efekty i filtry tworzy się przez podanie wzoru matematycznego, który modyfikuje współrzędne na obrazie, strona producenta: http://www.vicman.net

dfoto Klient Program dfoto.klient to narzędzie, które ma ułatwić przeglądanie (a w kolejnych wersjach również zarządzanie) kolekcji fotografii, edycję plików cyfrowych oraz zamawianie odbitek w serwisie dfoto.pl. Program wyposażono m.in. w funkcję bezstratnego obrotu plików jpg, seryjnego skalowania fotografii, przycinanie do formatów cyfrowych i tradycyjnych (możliwość wyboru proporcji kadrowania 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

PLUGINY

E>

o cb ra -o w

CL

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

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

Mystical Lighting (Win/Mac) Plugin pozwalający na wprowadzenie realistycznych efektów świetlnych. Zawiera 16 efektów wizualnych oraz takie udogodnienia jak: możliwość pracy na warstwach, nieograniczone cofanie czynności i maskowanie, strona producenta: http://www.autofx.com

Puzzle Pro 2.0 Plugin firmy AV Bros dający efekt układanki z puzzli. Szersza recenzja wewnątrz numeru (str. 29) strona producenta: http://www.avbros.com

DODATKI 25 ZDJĘĆ ROYALITY FREE od firmy UCE www.uce.pl

Filmy instruktażowe i pliki źródłowe pomocne przy wykonywaniu ćwiczeń zawartych w magazynie.

luty/marzec 2004

(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ługość 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, poprzez przeciągnięcie warstwy z pliku jpg na okno z naszą grafiką.

Wyrównujemy zdjęcie względem obrazka i dopracowujemy jego kolorystykę. Wybieramy z menu Obrazek>Dopasuj>Kolor selektywny (lmage>Adjust>Selective Color), następnie w oknie Kolor selektywny {Selective Color) wybieramy Niebieskości (Blues), ustawiamy suwaki 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 przezroczystości, do połowy wysokości.

Świetliste linie E1 o

I

•o

Aby wykonać łuki należy stworzyć zaznaczenie [/W] w postaci pionowej elipsy, na nowej warstwie wypełnić je jasnym kolorem, następnie przesunąć zaznaczenie tak by powstał najcieńszy łuk. Klawiszami [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 parametrem 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 maski na nasz obrazek ustawiając je na cienkich „gałęziach" wśród traw. Możliwe, że będzie potrzebne obracanie warstw by dopasować je do pozostałych części Edycja>Przekształć>Obróć (Edit> Transform>Rotate). Ciemne oczy wykonamy na nowej warstwie, narzędziem Pędzel (Brush) [B] zamalujemy wszystkie oczy kolorem RGB: [50,85,129], następnie zmieniamy tryb krycia miedzy warstwami na Mnożenie (Multiply).

Powielenie elementów Łączymy wszystkie warstwy — maski, ciemne oczy, kulę, trawę — w jedną warstwę. Następnie powielamy ją i przenosimy warstwę 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 motyla. 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 nanosimy na niąfiltr Rozmycie gaussowskie. Zmniejszamy przezroczystość do 30%. Kolorem RGB: [17,142,222] rysujemy drobne linie pędzlem [8] najlepiej o jak najmniejszym przekroju. Można jeszcze urozmaicić skrzydła poprzez malowanie pędzlami o nieregularnych 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ą polecenia Barwa/Nasycenie (Hue/Saturation) — Obrazek>Dopasuj>Barwa/ Nasycenie (lmage>Adjust>Hue/Saturation). ®

luty/marzec 2004

di •o

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.

Wysol-o-c Rozdzielcza

Menu, jakie stworzymy, będzie się składać z kilku połączonych ze sobą i utrzymanych w nowoczesnym stylu przycisków. Po najechaniu kursorem na wybrany guzik, zostanie on podświetlony, sam zaś przycisk 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 mamy konkretnego pomysłu, wybieramy dość standardowe rozmiary 121 na 17 pikseli. Kolejny wybór to kolor tła, w tym przypadku proponuję jasny odcień szarości np. #D4D4D4 (HTML Code). Aby nadać 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 jakości pliku JPG, będzie on służył jako szablon do tworzenia kolejnych klawiszy w menu.

393 11

W\ Zachowaj proporcje 0 Metoda POfiownegoprubko^nd

Dwu ze cienna

V-

Napisy

Dl T3

?Iridex

ń 10

-

-

••

a

•

•

-

-i

W zależności od tego z jakich działów składa się nasza strona, tworzymy odpowiednie napisy na przyciskach. Korzystając z przygotowanego wcześniej szablonu nanosimy na kolejne przyciski nazwy działów. W przedstawionym przykładzie menu będzie się składać z sześciu guzików: lndex, Newsy, Książki, Historia, Teksty i Kontakt.

Bardzo ważnym elementem, mającym ogromny wpływ na końcową estetykę naszego menu jest użyta w nim czcionka. Godnymi polecenia, eleganckimi krojami sąm.in. Tahoma i Verdana. Każdy stworzony 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 zapisaniem obrazka musimy spłaszczyć wszystkie warstwy, poprzez menu: Warstwa>Sptaszcz obrazek (Layer>Flatten Image).

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 utworzone 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 maksymalnie 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, posiadają bardzo przydatną dla webmasterów funkcję pozwalającą pociąć obrazek na mniejsze części i zapisać go w formie kodu HTML z tabelkami wypełnionymi naszym pociętym obrazkiem. Przed przystąpieniem do tego zadania należy upewnić się czy w menu Widok (View) jest zaznaczona opcja Dodatkowe (Extras) (można ją uaktywnić skrótem klawiszowym [Ctrl\+[H\). Następnie, za pomocą narzędzia Odcięcie (Slice) (skrót klawiszowy [K]), dokładnie obramowujemy każdy z przycisków. Aby zrobić to jak najdokładniej, należy skorzystać z maksymalnego powiększenia widoku.

Index

Dokładne wycinanie kolejnych obrazków jest bardzo ważne, tutaj bowiem 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 (File>5ave for Web), potwierdzamy czynność przyciskiem [Zapisz

Teksty

(Save)].

Newsy Książki Historia Kontakt

HTML Chwilowo możemy zamknąć Photoshopa, przechodzimy teraz do stworzonego przez Photoshopa pliku *.html (który przed chwilą zapisywaliśmy), gdzie znajduje się nasze menu.

Photoshop stworzył plik z rozszerzeniem *.html i folder, w którym znajduje się nasz pocięty obrazek. Otwieramy teraz ten plik html, za pomocą zwykłego notatnika lub jakiegoś edytora html (Dreamweaver, Pajączek). Na początku w znaczniku meta zamieniamy kodowanie strony z charset=windows-1250 na charset=iso-8859-2. Pierwszy poważniejszy problem na jaki się natkniemy to wykorzystanie naszych pociętych rysunków jako hiperłączy (linków). Po wpisaniu polecenia:

Index Newsy Książki Historia

<a href=""> </a>

Teksty

pomiędzy wybranym rysunkiem np. tak:

Kontakt

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

J s1 q

I

okaże się, że w przeglądarce internetowej menu po prostu się rozsypało. ,

luty/marzec 2004

11

WEBDESIGN

css Po pierwsze, nie możemy pozwolić na odstępy pomiędzy wpisywanymi 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 odstę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 poszczególnych elementów. Style również umożliwiają szybkie zmiany 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" type="text/css">

rel="StyleSheet"

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 katalogu, co odwołujący się do niego plik *.html.

Ciąg dalszy pracy z HTML-em Musimy teraz sprawdzić jakie nazwy posiadają rysunki przedstawiające nasze przyciski, które zostały pocięte i wrzucone do folderu 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 klikamy 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ądkowujemy 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 niepotrzebny odstęp (spację) lub niepoprawnie stworzyliśmy plik *.css.

Jeżeli wszystko działa, czas na ożywienie naszego menu.

RoIIover

f

Ó) ra •a

12

Index

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.

Stworzone przyciski zapisujemy w istniejącym już folderze Obrazki, nadając im nazwy np. newsy.gif. indexy.gif itd., nie zmieniając oczywiście tych pociętych wcześniej przez program. Jeżeli nie mamy pomysłu na zmianę wyglądu poszczególnych przycisków, polecam: przekreślenie wyrazu, pogrubienie czcionki czy przedstawioną w przykładzie 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 zatem znaleźć się po dwa GIF-y do każdego hiperłącza: jeden ze stanem przycisku przed, a drugi po najechaniu na niego kursorem.

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. menu_03.gif. Format ten (GIF) zajmuje mało miejsca, jednak uniemoż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żdego przycisku) a następnie kopiujemy GIF-a na nowo stworzone tło.

Za pomocą narzędzia o nazwie Różdżka (skrót klawiszowy [W]), zaznaczamy 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 zawartości nazwie (np. index.jpg).

Inde i

Index

El-

RoIIover w HTML Wracamy do edycji kodu HTML. Aby skrypt zadziałał np. na napisie „lndex" należy wpisać:

<a lirei="" onMouseOvei=mdex.src="Obrazki/index.ipg"1 onMouseOut=index.src="Obrazki/!liemi_03.giP"> <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 hiperłącza, czyli podstawowa wersja rysunku nazwy działu.

Aby móc używać na jednej stronie kilku efektów typu rollover musimy używać różnych nazw poszczególnych „akcji" dla każdego z hiperłączy. W tym przypadku rollover dotyczący przycisku „lndex" nazwiemy 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 łatwo 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 <!-- End ImageReady Slices --> Aby więc umieścić nasz rysunek na jakiejś stronie, wystarczy skopiować w odpowiednie miejsce kod tabeli znajdującej się pomiędzy wspomnianymi powyżej znacznikami.

Przy przenoszeniu menu do innego dokumentu, należy pamiętać o dokonaniu odpowiednich zmian w pliku *.css, do którego odwołuje się dana strona (wpisaniu linijki: IMG {border=0 p a d d i n g : 0px, Opx, Opx, Opx}). Pełny kod i rysunki przedstawionego w tutorialu menu można znaleźć na dołączonej do pisma płycie CD. •

luty/marzec 2004

}

lndex Newsy Książki Historia

Ol

o di

- -i i

I

CL

Teksty Kontakt

13

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. Promieniowanie to jest zamieniane na impulsy mózgowe w obrębie siateczki nerwu wzrokowego. Różne kolory są interpretowane jako fale o różnej długości. Fale o długości mniejszej niż 350 nanometrów to promieniowanie ultrafioletowe (ang. ultraviolet lub UV), zaś promieniowanie o długości fali wyższej niż 700 nanometrów to promienie podczerwone (ang. infrared lub IR).

I

KOLORY NA WWW D Spektrum zakresu długc^, Fal postrzeganych przez oko ludzkie jako poszczególne kolory

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 ilustracji, 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 systemami kolorów.

Dla mediów związanych z przedstawianiem obrazu (monitory, 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łączenie trzech podstawowych kolorów w tym systemie daje kolor biały.

Koło barw

W przypadku mediów stronicowych (druk, rysunki, malarstwo) mamy do czynienia z substraktywnym systemem kolorów, którego nazwa CMYK również utworzona została na podstawie nazw kolorów, odpowiednio są to: niebiesko-zielony (cyjan), purpurowy (magenta), żółty (yellow) i czarny (blacK, oznaczony przez K, dla odróżnienia od B — używanego dla oznaczenia koloru niebieskiego, blue w systemie RGB). Połączenie trzech podstawowych kolorów (oprócz) czarnego w tym systemie, daje w efekcie kolor czarny. System CMYK nadaje się lepiej do opisu barwy w druku, gdzie rola pochłaniania światła jest realizowana przez farbę drukarską, natomiast system RGB nadaje się lepiej do wyświetlania koloru (np. na monitorze), gdzie światło jest emitowane.

Ol 03 "O

W tym artykule zajmować się będziemy kolorami na stronach 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) punkcików, pogrupowanych po trzy — po jednym z każdego z wymienionych 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 punktów, a raczej nasze oko miksuje je, a my widzimy jeden konkretny kolor.

I :

v •\ l|

;

':• ;

Właśnie dzięki tej niedokładności ludzkiego oka, możliwe stało się zaprezentowanie bardzo dużej liczby

:

mniejsza liczba podana, tym ciemniej dany kolorowy punkt świeci. Dla przykładu, układ 0,0,255 oznacza, że punkty czerwony i zielony nie świecą wcale, a niebieski świeci w maksymalnej swojej intensywności — uzyskujemy kolor niebieski. W innym przykładzie, układ 255,255,0 — czyli punkty czerwony i zielony świecą z maksymalną intensywnością, a punkt niebieski nie świeci wcale - otrzymujemy czysty żółty kolor. Według analogicznej zasady, nieświecenie się żadnego z punktów, czyli układ 0,0,0 — daje kolor czarny, a świecenie się wszystkich trzech punktów z maksymalną 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" Określenie to ukute zostało w okresie, kiedy maksimum możliwości kart graficznych i monitorów było wyświetlanie 256 kolorów (czasy Windows 3.1 lub nawet wcześniejsze). Projektanci pierwszej wersji przeglądarek internetowych wyszli z założenia, że ok. 40 kolorów jest używanych do renderowania elementów systemowych (okna, klawisze, menu itp.). Po odjęciu tej liczby od 256 pozostało 216 kolorów, stanowiących właśnie ową wspomnianą paletę bezpiecznych kolorów przeglądarki.

Select foreground co tor:

| i kolorów przy użyciu trzech § podstawowych barw oraz ; wyświetlania J odpowiednio dobieranych inB Sposób tensywności świecenia każkolorów przez monitor j—/ y dej z tych barw. Każdy wspomniany punkt może świecić z 256 różnymi intensywnościami (lub 256 poziomami nasycenia) — od 0, gdzie dany punkt nie świeci wcale, do Czy ma sens ograniczać się więc do sto255 — w którym to przypadku wybrany punkt świeci ze swosowania na stronach WWW tylko kolorów ją maksymalną możliwą intensywnością.

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 kostawowe) wyświetlić prawie siedemnaście milionów róż- lorów? W tej kwestii zdania są podzielone. Po pierwsze należy podkreślić, że mówimy wyłącznie o kolorach elemennych kolorów.

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 świestępują nazwy tych kolorów w nazwie systemu RGB. Czyli najpierw podajemy intensywność świecenia koloru czerSZESNASTKOWY wonego, potem zielonego, a na końcu niebieskiego.SYSTEM Im |

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 kolejnych 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 przeliczanie 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 szesnastkowego. 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 systemu, bardzo łatwo jest zrozumieć sposób reprezentacji i zapisu liczb w tym systemie. Dla analogicznego przykładu przedstawionego powyżej, można napisać, że 28 m) = 1C(M), co należy rozumieć, iż liczbie 28 w systemie dziesiętnym odpowiada liczba 1C w systemie szesnastkowym. A dlaczego? Wszystko staje się jasne, jeśli, zgodnie z przekazaną powyżej wiedzą, zinterpretujemy liczbę ICjakojedence 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 kolejne cyfry numeruje się rosnącymi potęgami. Czyli liczbę trzycyfrową w systemie dziesiętnym rozbijemy 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, tylko, że pierwszą cyfrę z liczby trzycyfrowej przemnożymy przez 162, drugą przez 16', a trzecią przez 16°.

Dla liczby czterocyfrowej, rozbitej na cztery cyfry kolejne mnożenia w obu systemach będą przez 10 lub

?

luty/marzec 2004

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ść maksymalna to właśnie liczba 255. Konstrukcja komputerów wymusza stosowanie systemu szesnastkowego (lub dwójkowego) w praktycznie każdym przypadku, 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 jednocyfrowe (w systemie szesnastkowym) poprzedza się zerem -jest to takie jakby uzupełnienie, aby niezależnie od tego czy nasycenie danej barwy podstawowej jest niskie (np. 1O(mi = A(W:) czy wysokie, zawsze była ona zapisywana jako liczba dwucyfrowa. Użyte w artykule przykładowe kolory, byłyby więc zapisane w systemie szesnastkowym jako: 0000FF (niebieski, co odpowiada modelowi 00, 00, 255 nasycenia kolejno składowych czerwonej, zielonej i niebieskiej) lub FFFFOO (żółty, co odpowiada modelowi 255, 255, 00).

15

WEBDESIGN

cie nadal korzysta ze sprzętu ograniczonego do wyświetlania maksymalnie 256 kolorów. To jeden z argumentów przemawiają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) nawet „bezpieczne" kolory przestają być bezpieczne i nie są wyświetlane prawidłowo.

ascezy kolorystycznej, podczas gdy zbyt wielka ilość kolorów prawie zawsze prowadzi do niepowodzenia.

Reasumując, problem nieprawidłowego wyświetlania kolorów z większej palety niż 216 wydaje się już być przeszłością. Nie mniej nie można pominąć tego zagadnienia w artykule 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.

Gradient barw Jedną z metod jest zasada gradientu barw, czyli dobierania kolejnych kolorów uzupełniających z grupy kolorów stanowiących płynne przejście od wybranego koloru podstawowego 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 cieniowaniem, tak aby uzyskać lekkie odchylenie od podstawowej linii przejścia kolorów. Jednakże nawet pomimo zastosowania tych operacji uzupełniających, należy mieć na uwadze ryzyko uzyskania monotonii kolorów. Dodanie czerni lub bieli jako ostatniego z kolorów przejściowych może (aczkolwiek nie musi) poprawić ten efekt.

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", „MediumAquamarine" czy „MediumGolfenRodYellow". Ten sposób określania kolorów nie wszedł do oficjalnych specyfikacji języka HTML, ale powinien być prawidłowo interpretowany 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 zamierzchłym i niezalecanym sposobie określania koloru? Otóż, ma on wymiar wyłącznie komercyjny. Kiedy będziesz parał się tworzeniem serwisów internetowych w sposób profesjonalny (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ą odpowiadającą danemu kolorowi.

MIESZAMY KOLORY W zasadzie, właśnie ta część projektowania interfejsu graficznego (wyglądu) strony WWW jest najważniejsza i zarazem najtrudniejsza. Właściwy wygląd strony i dobór kolorów to sprawa, która „na dzień dobry" przyciąga lub odrzuca odwiedzającego.

Trudno jest udzielić właściwej i pełnej odpowiedzi na pytanie — ile kolorów użyć przy projektowaniu danego serwisu. Generalnie jednak obowiązuje jedna zasada, iż znacznie 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 mieszanin (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, zawsze pozostanie tylko dodatkiem do nośnika informacji, jakim 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ć. Czasami można uzyskać interesujące wyniki przy zastosowaniu

16

psd

luty/marzec 2004

DOBÓR KOLORÓW W tym miejscu mowa już o sytuacji, w której twórca wybrał jeden podstawowy kolor, którego będzie używał w serwisie. Omówimy kilka metod doboru kolorów uzupełniających do wybranego koloru podstawowego.

El Gradienty N x Kontrast kolorów Teoria kontrastu proponuje użycie kolorów kontrastujących ze sobą (może być to kontrast wartości — różne kolory 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łównie 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 uzyskania subtelnych efektów graficznych niż do podkreślenia lub uwypuklenia czegoś. Na przykład kilka kolorów kontrastują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 pamiętać, jest tak zwana „kolorowa ślepota" (można znaleźć inne tłumaczenia angielskiego określenia „colour blindness"). Niecałe 10% internautów ma lekką wadę wzroku, polegającą na niedostrzeganiu pewnych kolorów zestawionych 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 nieczytelna lub trudno dostrzegalna.

Przykładowo, zielony tekst na czerwonym tle lub czerwony 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. Natomiast układy biały-czarny i niebieski-żółty również są kolorami kontrastującymi, ale w tym przypadku czarny tekst na białym tle lub żółty tekst na niebieskim tle, są łatwe do odczytania.

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ą omawiane 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. ^ ZASTOSOWANIE: • Szyfrowanie poufnych -^, ^ danych i oprogramowania 0 Szyfrowanie poczty e-mail ~* Zabezpieczenie danych w razie kradzieży lub włamania przez Internet Sejf Wirtualny: zasada działania jak sejfu wmurowanego w ścianę *G DATA Software Sp. z o.o. w Szczecinku nie ponosi odpowiedzialności za używa ' programu TopSecret Next G. do ukrywania w komputerach nielegalnego (pirackiego)

Aspekt artystyczny to temat rzeka i w zasadzie jest to zagadnienie niewyczerpane. Szukającym bardziej szczegółowych czy rozszerzonych informacji, polecam serwis „Colours on the web", http://www.webwhirlers.com/colors/ oraz podobne opracowania internetowe. Nie spotkałem się z pozycją książkową, która by omawiała czy chociażby poruszała to zagadnienie. •

Ź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 Przewodnik „Colours on the web", httpJ/www. webwhirlers. com/colors/ Tomasz Trejderowski, „Po prostu Internet", Wydawnictwo Helion, Gliwice, grudzień 2001 r., ISBN 83-7197-681-X, Tomasz Trejderowski, „Po prostu Internet. Techniki zaawansowane". Wydawnictwo Helion, Gliwice, lipiec 2002 <.. ISBN 83-7191-670-4.

SOFTWARE

40

146, *

Sp. z o.o. ul. 28 Lutego 2 78-400 Szczecinek ®+48 94 372-96-50 i- +48 94 372-96-59 e-mail: biuro@gdata.pl handel@gdata.pl 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, wydaje się, iz szybki dostęp do internetu jest nadal kwestią przyszłości. Większość użytkowników internetu łączy się z nim nadal przez modemy, które osiągają małe prędkości transferu danych. Dlatego trzeba zadbać o to, aby nie umieścić zbyt dużej ilości grafiki na stronie, a także o to, by umieszczane pliki graficzne miały niewielkie rozmiary. Adobe Photoshop oraz inne dostępne obecnie programy do obróbki grafiki wyposażone są w narzędzia pozwalające zoptymalizować rozmiar tworzonych plików. Umieszczając elementy graficzne należy kierować się zasadą, iż strona powinna ładować 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żniejszych działów. Wprowadzenie zbyt dużej ilości odnośników wprowadzi chaos informacyjny i utrudni internaucie znalezienie 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 menu nawigacyjnego.

W stylu tradycyjnym menu umieszcza się po lewej stronie witryny. Są to przyciski lub łącza tekstowe do najważniejszych działów. Do tego sposobu nawigacji przyzwyczajona jest większość internautów, dlatego też trafiając na stronę z tak rozmieszczonym menu — poruszają się po niej intuicyjnie, co zdecydowanie ułatwia im odszukanie żądanej informacji. Za negatywy tego sposobu uważa się małą oryginalność projektu, a także dużą odległość, jaką musi pokonać kursor myszki od paska przewijania po prawej stronie do menu po lewej.

Alternatywą dla tego wyjścia jest umieszczenie menu po prawej stronie witryny. Zaleta — bliżej od paska przewijania do nawigacji po tej samej stronie. Jednak badacze internetu twierdzą, iż wzrok internauty łatwiej wyszukuje informacje znajdujące się po lewej stronie ekranu komputera i szybciej je dostrzega.

•f z zastosowaniem menu po prawej stronie

psć

luty/marzec 2004

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 zawierał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 zwykle menu tekstowym i służy głównie ułatwieniu nawigacji, gdy strona przewinięta jest w dół i powrót do górnego menu 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 zasadnicza część strony powinna mieć możliwość przewijania. Można wtedy wkomponować napisy — linki w atrakcyjną 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 kolejnych działów, wyjściem jest stworzenie tzw. menu kaskadowego opartego także na elementach graficznych (pro-

i stokątach o wybranej wielkości i kolorach), a „ożywionego" przez dodanie odpowiednich skryptów (pisanych np. w JavaScript). Działanie tego menu podobne jest do działania programów znanych użytkownikom systemu Windows. Dalsze odnośniki pozostają ukryte do momentu „najechania" na nie kursorem myszki lub kliknięcia. Kliknięcie lub „najechanie" myszką powoduje rozwinięcie się kolejnego paska z przyciskami.

H Zastosowanie menu kaskadowego

Innym wyjściem dla strony niezawierają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 — podnosi 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 wielu internautów skarży się na swego rodzaju natrętność elementó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 menu jest stosowanie przycisków, które w momencie „najechania" na nie kursorem myszki zmieniają swój kolor lub wypukłość.

Aby ułatwić internauH 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 obecnie 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ólnych działów witryny na danej podstronie. Ułatwi to odwiedzającym naszą stronę wzrokowe ogarnięcie tematyki strony, a także oddzielenie od siebie poszczególnych działów lub informacji, które chcemy wyszczególnić. Można to zrobić poprzez umieszczenie nagłówków w poszczególnych komórkach tabeli. Nagłówki raczej powinny charakteryzować się tym samym stylem (krój pisma, kolorystyka, kształt itd.). Poszczególne komórki tabeli możemy oddzielić od sie-

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ą ikonki — 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żemy umieścić ikonkę z flagą danego kraju. Wówczas odwiedzający nie ma wątpliwości, gdzie znajdzie stronę „mówiącą" w zrozumiałym dla niego języku. Warto też zrobić odnoś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ć,

NARZĘDZIA PRACY Bardzo przydatnym narzędziem do przygotowania grafiki internetowej jest np. Adobe Photoshop. Program ten bardzo ułatwia pracę w zakresie przygotowania graficznych elementów strony WWW. Dostępne w nowszych wersjach Photoshopa narzędzie Odcięcie pozwala „pociąć" przygotowany projekt na poszczególne obrazki — gotowe elementy strony WWW (np. na przyciski) i jednocześnie zachować je w warstwach. Ułatwia to modyfikację pojedynczego obrazka nawet bardzo złożonej graficznie strony WWW, bez konieczności modyfikacji pozostałych obrazków — części składowych strony. Na dodatek każde odcięcie z tego samego projektu można zapisać jako inny rodzaj pliku: Jpg, .g/7 lub .png. Przy pomocy Adobe Photoshop lub ImageReady z łatwością przygotujemy podświetlane 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ć internaucie poruszanie się po naszej witrynie. Jedną z żelaznych zasad stosowanych przez webmasterów powinna być „zasada dwóch klików". Polega ona na tym, iż za pomocą jedynie dwóch kliknięć internauta przenosi się do poszukiwanych informacji. Należy też zwrócić uwagę na kolorystykę witryny, w tym także na tło. Ciemne tło jest nastrojowe i tajemnicze, jednak podczas czytania większej ilości tekstu bardzo męczy wzrok.

Internet to coraz powszechniejsze medium, którego obraz jest nieodłącznym elementem. Obraz na stronach WWW prowadzi za rękę, skraca i ułatwia proces myślowy, 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. •

luty/marzec 2004

a w zależności ód tego w którym jego obszarze klikniemy — przenosi nas do wybranej informacji.

Najczęściej stosuje się to rozwiązanie w mapie będącej mapą kraju, regionu czy świata, dla pokazania punktów w których dana firma zaistniała, czy też ma swoje przedstawicielstwa, bądź do wyszukania informacji w obrębie danego regionu.

Zastanówmy się, czy zamiast rozwijanego menu (tzw. belki) z nazwami części kraju czy regionu nie lepiej stworzyć mapę obrazu z możliwością wybrania z niej interesującego internautę regionu.

o

Dl ro OT

o.

s 5

19

WEBDESIGN

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

Oryginał

Optymalizacja O

o

di T3

Optymalizacja 50

Optymalizacja 100

OPTYMALIZACJA GRAFIKI

Michał Szpile wski

Przeglądając setki stron internetowych na pewno niejednokrotnie spotkaliście się z obrazkami, 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" moowiedzieć, iż J e s t t0 takie opracowanie jakości obrazI 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. Warto 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 dyspozycji mamy 3 rozszerzenia obsługiwane przez przeglądarki internetowe: JPEG, GIF i PNG. Pokrótce opiszę każdy, podając jaki rodzaj grafiki najlepiej w nim zapisać.

Zacznę od formatu zdecydowanie najczęściej spotykanego — JPEG (Joinł Photographic Experts Group). Format ten obsługuje 24-bitowe kolory co pozwala na zachowanie 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órczym usuwaniu danych. Metodę taką nazywa się stratną. Nie jesteśmy w stanie określić, w której części obrazka znajduje się przykładowo mały tekst, dla którego utrata jakości sprawi, iż stanie się on nieczytelny. Adobe Photoshop 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 kolor, który zastąpi przeźroczyste piksele (opcja Matte).

Kolejnym formatem, którego użyć możemy tworząc grafikę 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 logotypów, ikon czy też ilustracji zawierających tekst. Przy jego pomocy możemy zapisać obraz, który maksymalnie zawiera 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 Graphics). 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 rozszerzeniem.

Format PNG-8 możemy śmiało porównać do GIF'a. Podobnie obsługuje on 8-bitowy kolor i przezroczystość. Posiada on jednak bardziej zaawansowane schematy kompresji niż GIF co pozwala na zmniejszenie objętości zapisywanego obrazka nawet o 30% (w zależności od wzorków kolorów). Trzeba tu dodać, że format ten używa kompresji bezstratnej. Oznacza to, że wszystkie dane zostają zachowane (jeżeli zapis będzie z 24-bitowego koloru do 8-bitowego, 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ść kolorów, prawie zawsze lepszy będzie GIF. Warto więc porównać oba te formaty przed zapisem.

Format PNG-24 natomiast obsługuje 24-bitowy kolor podobnie 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ływa 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 obrazka 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żenie jakości nie powodując zmiany objętości B. Warto również zwrócić uwagę czy w naszym obrazku występują przejścia tonalne S. Od tego zależy czy pokusimy się o wybór GIF, PNG-8 czy JPEG lub PNG-24. W przypadku pierwszej grupy, czyli formatów, które obsługują maksymalnie do 256 kolorów przejścia tonalne wyraźnie tracą płynność co sprawia, iż nasza grafika znacznie traci na jakoś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.

JPEG

GIF

B Przejścia tonalne w formacie JPEG i GIF

o

gi

"• u)

O.

W momencie gdy nasz serwis odwiedzany jest przez coraz większą ilość osób, powinniśmy pamiętać, że nie wszyscy posiadają przeglądarki, które obsługują format PNG. Przykładowo przeglądarka Microsoft Internet Explorer obsługuje go dopiero od wersji 4.0. Warto więc umieścić alternatywną wersję w postaci JPEG czy GIF aby wszyscy użytkownicy mieli szansę zobaczyć grafikę.

?

luty/marzec 2004

21

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 przypadku 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 strony powinniśmy pamiętać by miała ona jak najbardziej powtarzany 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 koloró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 wzbogacenie naszej grafiki przy pomocy jednego pliku, który zostanie wyświetlony w kilku miejscach. Warto tu użyć plików z przeźroczystymi pikselami, które pozwolą na to by nasz obrazek komponował się bez problemów z każdym tłem.

I I Przykładowy wzorek (pattern)

•

DZIELENIE OBRAZKA

o

Dl ra "O

22

OBJĘTOŚĆ GRAFIKI A HTML Przy pomocy umiejętnego korzystania z HTML-a jesteśmy w stanie wpłynąć na rozmiar naszej grafiki. Zademonstruję 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 przycisku B. Możemy to zrobić przy pomocy 2 obrazków o jednakowych rozmiarach i tabelki. Pierwszym obrazkiem musi być tło przycisku, przykładowo może to być przejście tonalne (plik w formacie JPEG), drugi obrazek to tekst, który zostanie naniesiony na przycisk, musi on mieć przeźroczyste 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 stworzone 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 stworżeniu obrazka o dowolnej wysokości (w naszym przypadku 5 pikseli) i szerokości równej 1 piksel. Tak utworzony obrazek możemy wgrać na naszą WWW nadając mu dowolną szerokość. Uzyskamy w ten sposób linie o dowolnej szerokości, której rozmiar podczas zapisu nie przekroczy 70 bajtó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 zoptymalizowana 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.

Jednym z etapów, który jest zarazem konieczny, jak i bardzo przydatny, jest podzielenie grafiki. Możemy to zrobić przy pomocy narzędzia Slice Tool jak i kopiując poszczególne elementy a następnie wklejając je do nowego okna i zapisując.

Odpowiednie podzielenie obrazka daje nam większą kontrolę nad optymalizacją poszczególnych elementów. Nie jest to jednak jedyna zaleta, większa ilość elementów interfejsu 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ą pociętych elementów, zbyt duża ilość spowoduje, iż na starszych komputerach nasza strona będzie się znacznie wolniej otwierała, przesuwała, ponieważ przeglądarka będzie musiała przeanalizować dodatkowe linijki kodu.

•?s<!

luty/marzec 2004

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 internecie można znaleźć wiele ciekawych, niejednokrotnie darmowych programów do optymalizacji, które dodatkowo pozwolą nam odchudzić naszą grafikę. Kilka z nich zamieściliśmy na CD dołączonym do naszego magazynu. •

Marcin Sawicki

Co zrobić, aby nasza strona nie ginęła w gąszczu stron internetowych? Co zrobić by witryna trafiała do jak największej ilości internautów?

Można oczywiście wydać krocie na wielką kam1

S

o di ra

E

13 l/l O.

i

panię reklamową, która z pewnością przyniesie zamierzone efekty, ale co zrobić, gdy nie posiadamy tak dużego kapitału? Co zrobić, jeżeli nasza strona nie jest komercyjna i nie stać nas na jakąkolwiek reklamę?

24

psi

Czy stoimy na przegranej pozycji? Nie! W tym momencie możejMy, a nawet powinniśmy skorzystać z pozycjonowa. Jest to najlepsza, najskuteczniejsza i stosunkowo tania metoda zwiększenia liczby odwiedzin witryny i jej promocji w Internecie. Pozycjonowanie polega na takiej modyfikacji kodu witryny internetowej pod kątem wyszukiwarki, 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 wyników wyszukiwania.

Jedynym minusem pozycjonowania jest fakt, iż na efekty tego zabiegu można czekać nawet do kilku miesięcy...

Jest to uwarunkowane samą wyszukiwarką, a ściślej mówiąc okresem, jaki mija od rejestracji witryny w wyszukiwarce a jej faktycznemu zaindeksowaniu. Okres ten jest różny dla różnych wyszukiwarek i może trwać od kilku dni do kilku miesięcy. Pozycjonowanie nie zagwarantuje nam, że nasza strona będzie ukazywała się na danej pozycji w liście wyników niezmiennie. Po kilku miesiącach jest nawet pewne, że nasza strona „spadnie w rankingu". Spowodowane jest to tym, że coraz więcej osób i firm korzysta z tej metody promocji witryn. Na szczęście sąto zazwyczaj niewielkie spadki i można szybko powrócić na „swoje" miejsce po ponownym pozycjonowaniu. Teraz, kiedy ogólne wiadomości mamy już opanowane przyszedł czas na konkrety...

6456487347O grafika z kolekcji Infinity

Wiemy już, że zaprojektowanie i wykonanie witryny internetowej (choćby jej jakość stała na najwyższym poziomie) to bynajmniej nie koniec naszej pracy. Aby witryna generowała jakikolwiek ruch musimy „powiadomić" o jej istnieniu internautów. Aby jednak czynność ta przyniosła zamierzone efekty musimy podejść do sprawy szerzej. Musimy poznać 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ę wyszukiwarek, 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łówka w skład której wchodzą Yahoo, Google, Alta Vista, Inktomi, GoTo generują 90% ruchu internetowego pochodzącego z wyszukiwarek. Pod względem funkcjonalności wyszukiwarki możemy podzielić na dwa typy: Katalogi — są to witryny internetowe, które są filtrowane przez ludzi przeglądających każdą zgłoszoną stronę i decydujących czy dana witryna spełnia kryteria i nadaje się do umieszczenia jej w listingu. Hierarchia katalogów jest identyczna jak ta którą znamy z naszych własnych PC-tów, katalogi podzielone są na kategorie i podkategorie ułatwiające i umożliwiające łatwe spenetrowanie ba-

zy danych w celu odszukania interesujących nas witryn bądź stron internetowych. Do najbardziej znanych serwisów opartych na strukturze katalogowej możemy zaliczyć Yahoo, LookSmart czy Open Directory Project.

Wyszukiwarki — te serwisy z kolei programatycznie aktualizują swoje bazy danych. Obsługiwane są automatycznie 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 dane o nowo odkrytych stronach internetowych. Wyszukiwarki indeksują strony w oparciu o informacje zawarte w dokumencie 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ą rzeczą, którą należy zmodyfikować w ramach pozycjonowania strony. Strony wejściowe to nic innego jak nasze „strony główne". Z założenia służą one do przyciągania szperaczy 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.

Ol

o di

Z tego powodu projektant witryny powinien bardzo dokł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 skuteczność pozycjonowania.

Słowa kluczowe — wybór słów kluczowych jest podstawą każdego pozycjonowania stron internetowych. Jeżeli w tym momencie popełnimy błąd to w najlepszym wypadku nasza strona będzie miała mierną „oglądalność" w najgorszym... 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ć podczas doboru słów kluczowych. W momencie doboru tychże stów uwagę należy zwrócić na takie zagadnienia jak: poznanie 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 oferowane za pomocą naszej witryny. Często zdarza się bowiem, ostatnimi czasy, że ludzie zajmujący się stronami internetowymi, 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 „zwykłego" internauty. Wybór języka potocznego, zrozumiałego dla większości ludzi staje się więc pierwszą rzeczą w drodze do poprawnego i skutecznego pozycjonowania strony.

Wskazówka Z własnego doświadczenia wiem, że warto jest działać w myśl zasady mówiącej, że człowiek nie jest nieomylny. Warto, więc obok „właściwych" słów kluczowych, wpisać ich błędne formy. Nie gwarantuje to wzrostu skuteczności pozycjonowania, ale na pewno nie zaszkodzi.

Poznanie grupy docelowej jest nie mniej ważnym czynnikiem decydującym o doborze słów kluczowych. Bardzo prosto jest wytłumaczyć ten stan rzeczy: innego słownictwa używają ludzie młodzi, aktywnie spędzający czas, a innego poważni, szanowani, ustatkowani biznesmeni. Inaczej wygląda strona przeznaczona dla męskich odbiorców a inaczej dla damskiej części wirtualnej społeczności. Inną formę przybierze zatem witryna kierowana do 5-10 latków a inaczej do 15-20 latków.

kątem pozycjonowania jest znacznik <META>. Znaczniki te służą do zawierania w nich danych opisujących zawartość 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 utworzenia pliku HTML użyliśmy jakiegoś programu (MS FrontPage, 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ą znacznikó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 _ programu

g e n e m jacego">

<META name- "Keywords"kontent= "komputery, części komputerowe, akcesoria komputerowe, najnowsze, najtańsze"> <META name- "Description" content^ "Czesci komputerowe - najnowsze i najtańsze"> <META name="Autor" content-"Marcin Sawicki" >

Po wybraniu słów kluczowych należy przystąpić do optymalizacji stron dla szperaczy wyszukiwarek. Aby optymalizacja była naprawdę „optymalna" należy przestrzegać poniższych zasad:

<META name= "Copyright" content= "2003 UCT" >

•

</HTML>

<META name="Date" content= "2003-07-07" > </HEAD> <BODY> </BODY>

•

pozycja słowa kluczowego w dokumencie HTML — wyszukiwarki wyżej zazwyczaj oceniają strony internetowe, które swoje słowa kluczowe zawierają w tytule bądź pierwszej linijce tekstu. Pamiętajmy, im bliżej górnej części dokumentu HTML, tym lepiej! pozycja słowa kluczowego w sekcji — sekcją nazywamy obszar pomiędzy znacznikami <TITLE>, <H1> czy <BODY>. Aby słowo kluczowe było oceniane przez szperacza jak najlepiej powinno znajdować się jak najbliżej początku w każdej sekcji oraz w możliwie największej 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 T3

Przykład 1: <TITLE>części

o. g

tańsze </TITLE>

g

Przykład 2:

komputerowe

—

najnowsze

i

naj-

<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

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 kluczowe. 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 witryny (lub strony) internetowej. Jest to tekst który wyświetlany jest w wynikach wyszukiwarek, dlatego pisząc ten tekst musimy 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 zazwyczaj przez programistów w celu opisu kodu oraz ułatwienia jego późniejszego odczytu. Komentarze nie są wyświetlane i nie wpływają w żaden sposób na atrakcyjność strony internetowej. Niektóre wyszukiwarki mogąje jednak odczytywać i w tym upatrujemy nasze możliwości wykorzystania tej niewielkiej „luki".

Komentarze HTML otwierane są symbolami <! — i zamykane —>. 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 rzeczowe komentarze są o wiele lepsze niż długie zawierające niewiele przydatnych informacji „wypracowania". Komentarze możemy umieszczać w dowolnym miejscu dokumentu HTML. Jako treść komentarza powinniśmy używać jak największej 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 jasnej treści i dobrze sformułowane stylistycznie.

Kolejną techniką przydatną podczas pozycjonowania stron jest zastosowanie tzw. ukrytych pól wejściowych. 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" value="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>). Ukryte pola nie są wyświetlane przez wszystkie przeglądarki 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 > . Znacznik <IMG> może „współpracować" z wieloma atrybutami, najbardziej nas interesującym ze względów pozycjonowania stron jest jednak atrybut alt (skrót od angielskiego alternative). 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 obrazków, a dodatkowo jeżeli jesteśmy użytkownikami Internet Explorer tekst ten będzie wyświetlany po najechaniu kursorem myszki na obrazek.

Typowy znacznik <IMG> wygląda tak jak ten przedstawiony poniżej:

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 Internetu, 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 artykuł, dlatego przedstawię tutaj jedynie ogólny zarys zgłaszania 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 polskich internatów wyszukiwarki. Nie należy jednak zapominać 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 najszybszych witryn, jeżeli chodzi o indeksowanie nowych stron.

Warto wiedzieć, że wielkość liter nie ma tutaj znaczenia dla mechanizmu wyszukiwania. Aby dodać stronę do wyszukiwarki należy udać się na stronę: http://www.google.pl/intl/ pl/addurl.html.

Onet.pl — wyszukiwarka Onetu — największego polskiego portalu internetowego jest skarbnicą polskich stron internetowych. Wyszukiwarka ta jest ściśle powiązana z Alta Vistą oraz Inktomi. Ważną informacją dla osób pozycjonujących strony jest fakt, iż wyszukiwarka Onetu wykorzystuje mechanizm zapobiegający „sztucznemu podwyższaniu wartości strony". Polega to na tym, że szperacz odczytuje 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 sklep,

name="Keywords"

content= "sklep,

sklep">

ten zapis byłby gorzej oceniony niż zapis wyglądający jak ten poniżej:

O) o ci)

<IMG border="0" src = "czescikomputerowe.jpg" width="350" height="378">

<META

name= "Keywords"

content-"sklep

kom-

puterowy" >.

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 atrybutem alt:

Wszelkie informacje i szczegółowe zasady zgłaszania stron do powyższej wyszukiwarki można odnaleźć na stronie http://szukaj.onet.pl/pomoc/dodaj.html. 9

luty/marzec 2004

27

POZNAJEMY PHOTOSHOPA

Czym t^k naprawdę są Akcje?

Akcje (Actions) są to gotowe zestawy wykonywanych poleceń. W rzeczywistości Akcje są plikami tekstowymi. Kiedy nagrywamy Akcję i zapisujemy ją w folderze, Photoshop kopiuje to (listę wszystkich poleceń w Akcji) i nadaje rozszerzenie .atn. Kiedy wczytujemy folder z akcjami, Photoshop wczytuje plik .atn, odtwarzając wszystkie polecenia w nim zapisane. Akcje można nagrać, klikając w panelu Akcje 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 samego 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 linii telewizyjnych) Na początek należy przygotować sobie wzorek linii.

W tym celu tworzymy dokument o wymiarach 1 na 4 piksele 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.

01

o

O)

I

ra

o.

28

W jaki sposób zainstalować nowe filtry i gradienty?

Filtry z reguły kopiuje się do katalogu ..Photoshop\PlugIns. Można sobie tam utworzyć również dodatkowe katalogi, 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 podać ścieżkę dostępu do wyżej opisanego katalogu. Nam pozostaje tylko użytkować nowe filtry i tworzyć piękne grafiki.

Gradienty instaluje się podobnie, należy podać ścieżkę dostępu do katalogu: ..Photoshop\Presets\Gradients. Po uruchomieniu Photoshopa nowe gradienty można załadować wybierając narzędzie Gradient (Gradient Tool).

Jak stworzyć obrazek w jednym odcieniu, np. w sepii?

Aby nadać obrazkowi jednolity odcień należy wybrać polecenie Barwa/Nasycenie (Hue/Saturation) — [Ctrl]+[U].

Następnie suwakami: Barwa (Hue), Nasycenie (Saturation) i Jasność (Brightness) należy zmieniać wartości parametrów dopóki obrazek nie nabierze pożądanego odcienia.

Należy również pamiętać o włączeniu opcji Koloruj (Colorize), aby na bieżąco mieć podgląd obrazka.

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żywane na wszystkich platformach. Minusem jest to, że FilterFactory jest raczej wolny, ograniczony i nie do końca intuicyjny. 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 Photoshop Software Developer's Kit (SDK) i samodzielne napisanie 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 platformy. Metoda ta jest najpełniejsza i najszybsza, ale wymaga pewnej znajomości programowania w języku C i manipulacji 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 skopiowane Akcje do innego katalogu na komputerze, ale poza katalog Photoshopa, część Akcji można pozostawić, jeżeli chcemy żeby wczytywane były automatycznie. Menu Akcji pojawi 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 przezroczystym tłem (Transparent) i wpisać tekst na pierwszej warstwie. 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 dowolnie 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świetlenie Globalne (Use Global Light). Jeżeli chodzi o świecący tekst należy w pierwszych fazach postępować, jak w przypadku cieniowania, ale dalej zamiast użycia cienia, używamy 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 zapoznanie się choć zjednym z nich.

Pluginy — recenzje Jeśli kiedykolwiek chcieliśmy uzyskać efekt układanki (puzzli) to trzeba było się na-

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 traktowanie czcionek przez Photoshop. Należy odszukać plik lntlFontDB.txt (ulokowany w podkatalogu ..\CESupport) i dodać 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.

męczyć. Ewentualnie można było wykorzystać jeden ze styli dostępnych w podstawowej palecie Photoshopa. Jednak w tym przypadku efekt nie zawsze będzie zadowalają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ńcowego 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 Caussian 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-

# przykład wpisu dla Photoshop CE dla Windows

mów chcieli uzyskać efekt układanki na naszej pracy. W tej kwestii jego możliwości są

"FuturaMdPL-Regular" type-wince unicode-0

ogromne. Jednak osiągnięcie nim jakichś innych efektów będzie prawie niemożliwe. Je-

"FuturaMdPL-Italic" type-wince unicode = 0

śli zatem lubicie dodawać efekty typu „puzzle" do Waszych prac, to Puzzle Pro 2.0 bę-

"BaskervillePL-Roman" type=wince unicode-0

dzie idealnym wyborem. Jeśli nie, to warto choćby go przetestować. producent: AV BROS

"BaskervillePL-Italic" type-wince unicode-0 "BaskervillePL-Bold" type-wince unicode = 0 "BaskervillePL-BoldItalic" type-wince unicode = 0

# 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 fragmentów obrazka i kadrowania. Wybieramy narzędzie Kadruj (Crop) i rysujemy nim prostokąt, w którego centrum powinien być wybrany przez nas fragment zdjęcia. Aby dokonać kadrowania, po narysowaniu prostokąta wciskamy na klawiaturze przycisk [Enter]. Narzędzie Crop zostało wyposażone również w możliwość nadawania proporcji kadrowanemu zdjęciu.

PAGE CURL 1.2 Uzyskanie efektu zawiniętego rogu przy pomocy programu Photoshop nie powinno sprawić problemów nawet jego mało zaawansowanym użytkownikom. Co nie oznacza, że jest to proste i niepochłaniające zbyt wielkich ilości czasu. Jednak nie musimy się męczyć. Wystarczy zaopatrzyć się we „wtyczkę" firmy AV Bros — Page Curl 1.2.

Po zainstalowaniu tego filtru „zagniemy" rogi każdej kartki przy pomocy zaledwie kilku 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 krawędzi obrazka?

W tym celu w trakcie rysowania linii należy trzymać wciśnięty przycisk [Shift].

pu efektu nie potrzeba setek opcji. Po wybraniu filtra od razu możemy wybrać który z czterech rogów naszej ilustracji chcemy zawinąć. Jeśli nie interesują nas standardowe ustawienia to możemy zmienić kąt pod jakim będzie zawijany róg, oraz poziom 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?

Należy utworzyć nowy obrazek, który ma przezroczyste tło i można przystąpić do rysowania — to jest prosta metoda gdy chcemy utworzyć nowy, niezbyt skomplikowany rysunek. Po utworzeniu rysunku należy zapisać go jako plik z rozszerzeniem .gil Drugą możliwościąjestedytowanie już wcześniej utworzonego rysunku. W tym celu otwieramy dowolny rysunek i ustawiamy tryb kolorów obrazka na tryb indeksowany — menu Obrazek/Tryb/Kolor Indeksowany (lmage/Mode/lndexed Color). Za pomocą Magicznej różdżki (Magie Wand) lub innego narzędzia selekcji, zaznaczamy te fragmenty, które mają być przeźroczyste i wciskamy klawisz [Delete]. Dla dokładniejszego zaznaczenia można powiększyć rysunek posługując się lupą.

możliwości są ograniczone. Po kilku minutach eksperymentów zobaczymy wszelkie możliwe warianty jakie możemy uzyskać. Jednak warto zaznaczyć, iż efekt końcowy zawsze jest zadowalający. producent: AV BROS

Marcin Wardęga Dariusz Pasturczak

NARZĘDZIA

Narzędzia

15 min film

pliki

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.

Oba narzędzia do zaznaczania posiadają własny pasek z ustawieniami, widoczny u góry ekranu. Po jego lewej stronie widzimy cztery ikony, umożliwiające kolejno: tworzenie nowej selekcji (New selection), dodawanie selekcji do już istniejącej (Add to selection), odejmowanie selekcji (Subtract from selection) i wyciąganie części wspólnej (Intersect with selection). Funkcja Wtapianie (Feather) pozwala na zmiękczenie brzegów zaznaczenia, domyślna wartość 0 pikseli oznacza, że krawędzie zaznaczonego obszaru będą wyglądały dokładnie tak, jak obramowanie selekcji.

Pozycja Wygładzony (Anti-aliased) odpowiada za wygładzanie 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 proporcji oraz Określona wielkość (Fixed Size) — umożliwiające podanie dokładnych wymiarów selekcji.

Narzędzie Różdżka (Magie Wand Tool) zaznacza obszary o identycznym lub zbliżonym odcieniu barw. Selekcję tworzy się, klikając w wybranym miejscu obrazu, co spowoduje 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 zostaną 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 elementu. Ciągły (Continuous) to funkcja pozwalająca zachować ciągłość zaznaczenia. Oznacza to, że zaznaczone zostaną piksele znajdujące się w pobliżu miejsca, które wskazaliśmy. Jeśli wyłączymy tę opcję, selekcji zostaną poddane wszystkie piksele znajdujące się na całym obrazku. Ostatnia pozycja Wszystkie warstwy (Use Ali Layerś) pozwala na zaznaczanie wybranych pikseli na wszystkich warstwach jednocześnie.

Dl

-o

s.

5

30

Podstawowym rodzajem zaznaczenia w Photoshopie jest 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, klikając na rysunku i przeciągając kursor myszy w przeciwległy róg przyszłej selekcji. Po zwolnieniu klawisza myszy naszym oczom ukaże się delikatne obramowanie w postaci migającej przerywanej linii. Od tej pory wszelkie zmiany, jakie będziemy wprowadzać na obrazie, ograniczone zostaną do zaznaczonego obszaru. Pozwala to na edycję jedynie fragmentu rysunku, bez naruszania przy tym jego pozostałej części.

luty/jfiarzec 2004

tu ai

Zaznaczanie proste Naszą pracę zaczniemy od wykonania prostego, owalnego zaznaczenia, obejmującego górną część kubka. Utworzoną selekcję możemy swobodnie przesuwać przy pomocy myszy i strzałek kursora tak, by znajdowała się ona w odpowiednim miejscu. Aby nie utracić 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 zaznaczenie 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ć jedną, zawierającą oba fragmenty. Klikamy na utworzonym wcześniej kanale 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 liniami prostymi. Zaznaczenie zawsze kończymy w miejscu, w którym je zaczęliśmy. Aby zaznaczyć boki kubka, klikamy z lewej strony górnej selekcji. Robimy to przy wciśniętym klawiszu [Shift], aby nie utracić dotychczasowego zaznaczenia. Następnie puszczamy [Shift] i klikamy 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, nasze 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 puszczamy 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 automatycznie, domyślnie co 10 pikseli. Wartość tę można zmienić na pasku ustawień narzędzia. o di ro

•

Odejmowanie selekcji

73 '

Pozostało nam jedynie wycięcie zaznaczenia znajdującego się wewnątrz ucha kubka. Skoro selekcje można do siebie dodawać, to można je również od siebie odejmować. Odejmowanie wykonujemy z klawiszem [Alt]. Najprościej zrobić to przy pomocy Lassa magnetycznego — wciskamy klawisz [Alt] i klikamy wewnątrz ucha, przesuwają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 film

Usuwanie efektu mory Lech Jaszowski

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 oryginał pod kątem 45 stopni z największą rozdzielczością optyczną, obsł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 początku naszej pracy musimy dokładnie zanalizować poszczególne kanały kolorów (używamy do tego celu kombinacji klawiszy: [Cfr/]+[7], [Ctr!\+[2] i [Cfr/]+[3]), następnie wybieramy najgorszy z nich. W naszym wypadku najwyraźniejszy wzór mory występuje w kanale niebieskim. Zastosujmy filtr Rozmyj gaussowsko (Gaussian Biur) o takiej wartości, aby wzór mory zniknął. W tym przykładzie użyliśmy wartoś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 parametrami 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 pierwszego, a wartość Próg (Threshold) powinna wynosić 0.

Kanał zielony i czerwony Po wykonaniu powyższych czynności przechodzimy do kanału zielonego 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 wybierzmy Filtr>Wyostrzanie>Wzmocnienie (Filter>Sharpen>Unsharp Mask) z parametrami odpowiednio: 200%; 0,5; 0. Teraz przechodzimy do kanału czerwonego. W kanale czerwonym ponownie zastosujemy Filtr>Rozmycie>Rozmyjgaussowsko (Filter>Blur>Gaussian Biur), ustawiając jego wartość na 0,8.

o

i

"O /l

32 . L.

Efekt końcowy Na koniec przechodzimy do widoku łącznego w trybie RGB, używając do tego kombinacji klawiszy [Cfr/]+[~] i wybieramy Filtr>Wyostrzanie>Wzmocnienie (Filter>Sharpen>Unsharp Mask), ustawiając parametry odpowiednio: 100%; 0,5; 0. Porównajmy wersję fotografii z morą i bez niej: wybierzmy Obrazek>Powiel (lmage>Duplicałe) i cofnijmy 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 początku. •

luty/marzec 2004

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żywotnie miejsce w panteonie sztuk wysokich. Tamte spory wygasł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 techniki ciemniowe oraz zwolenników nowoczesnych technologii, którzy zamiast kuwet z chemikaliami wolą monitor komputera. Pierwsi posługują się bardzo zasadnym argumentem, iż cyfrowa rejestracja 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 wystarczają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 tradycyjna będzie zawsze miała wierną grupę miłośników. Ale era fotografii cyfrowej już nastała, a jej niebywały rozwój fascynuje każdego, kto choć trochę interesuje się otaczającym go światem.

/'• I

Technologia cyfrowa jest odpowiedzią na takie potrzeby jak szybki 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 pracuje kilka dni nad „tym jednym" ujęciem - szybki podgląd efektów jest tu wręcz zbawienny. Jeszcze bardziej doniosłym faktem od samego powołania fotografii cyfrowej do życia jest jej udomowienie. Jak podają statystyki blisko 50% użytkowników aparatów na film deklaruje, ż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 zapracować niezależnie od tego z jakiego sprzętu korzystamy. Nowa technologia to nowe zagadnienia, nowa terminologia, a dalej, nowatorskie 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ŚĆ

OBIEKTYW

Sę w jakim formacie będziesz najczęściej robić odbitki Wymagana dla standardowej odbitki rozdzielczość wynosi 300 jdpLW zatem zdjęcie 2 MP (1600 x 1200) jest optymalne 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; rozdzielczość 4 MP (2272 x 1704) przeznaczona jest do odbitek formatu 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 wykonać odbitkę 15x21 cm i mniej wprawny obserwator nie odczuje różnicy w jakości. Pamiętaj, że nie warto zabijać się o kolejny milion pikseli.

Przeć zakupem aparatu należy zwróć uwagę na konstrukcję obiektywu — najlepiej by była szklana, a w całym układzie optycznym uwzględniono soczewki asferyczne lub niskodyspersyjne. Możliwość szybkiego zbliżenia to największy skarb fotografującego i podstawowe narzędzie pracy. Oceń jaki 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 cyfrowy — skadrować zdjęcie możesz już na komputerze.

JASNOŚĆ

ERGONOMIA

Drugi parametr w opisie obiektywu to jego jasność czyli największy 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) wynosi 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 doskonałe); F1,4; F2,0; F2,8; F4,0; F5,6; F8.0; F11.0 itd. Każda kolejna liczba tego ciągu oznacza 2-krotne zaciemnienie w stosunku do liczby poprzedniej. Najlepsze (i najdroższe) są obiektywy ze stałą jasnością dla całego zakresu ogniskowych.

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ą stabilnością oraz lepszymi parametrami optyki. Większe kompakty lub aparaty lustrzankopodobne (mniejsze niż zwykła lustrzanka, ale o podobnym kształcie) nie zmieszczą się w kieszeni, ale na pewno zrobisz nimi lepsze zdjęcia. A jeśli jesteś już szczęśliwym posiadaczem optyki systemowej (kolekcji obiektywów jednego producenta) — zainwestuj w lustrzankę cyfrową.

PODGLĄD

TRYBY PRACY

W kojTipaktach cyfrowych do podglądu fotografowanego obrazu można uzywac albo monitora LCD albo wizjera. Ten pierwszy sposób wtąze się z dużym zużyciem energii. Natomiast celowniki 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ą zmianą pozycji aparatu.

Aparat powinien być dobrany na wyrost w stosunku do Twoich aktualnych umiejętności. Nie równaj w dół, bo może się szybko okazać, ze kupiłeś model nie posiadający dokładnie tej funkcji jakiej potrzebujesz. Aparaty dzielą się na takie, które mają lub nie mają manualnych trybów ekspozycji. Chodzi tu o tryby: 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

CZUŁOŚĆ

Podczas fotografowania bardzo przydaje się też możliwość korekty parametrów obrazu. Oczywiście zmian można dokonać także na komputerze, ale praktyka pokazuje, że lepsze efekty osiągniemy korzystając z ustawień na poziomie aparatu.

Najczęściej spotykamy korektę ostrości, nasycenia oraz kontrastu. 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 przestrzeni barwnej (Adobe RGB, sRGB) istotnej przy wykorzystaniu zdjęć w poligrafii.

Bardzo istotnym, a często omijanym podczas zakupów parametrem aparatu cyfrowego jest oferowana czułość Zwykłe filmy 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 momencie, 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

o di ro •o

U) CL

i

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 dobrze leży w dłoni. Zwróć uwagę czy przyciski dobrze reagują na Twoje „polecenia". Oceń możliwość pracy jedną ręką oraz przydatność do długiej sesji fotograficznej.

LAMPA BŁYSKOWA

JAKOSC OBRAZU

Wbudowana lampa błyskowa jest bardzo pożądana. Jeśli chodzi o jej parametry to pierwszą sprawą jest jej moc, czyli zasięg skutecznego świecenia. Powinien on wynosić nie mniej niż 2.5 m. Ważną funkcją jest tu korekta mocy błysku czyli możliwość 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 (ryzyko przysłaniania lampy palcem). Najlepszym rozwiązaniem jest lampa zewnętrzna, ale żeby ją zastosować aparat musi posiadać stopkę akcesoriów. Skoro jesteś już zaawansowanym fotografem sprawdź typ realizowanego systemu pomiaru światła błyskowego (np. E-TTL) oraz zgodność z dedykowanymi lampami.

CENA

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 faktycznym wyzwoleniem migawki).

Warto też zwrócić uwagę na szybkość zapisu zdjęć na karcie pamięci — najlepiej wykonać serię i zbadać po jakim czasie aparat będzie gotowy do wykonania serii następnej. Każda grupa sprzętowa oferuje inne osiągi, dlatego najlepiej kierować się własnym odczuciem. Zasada „doboru na wyrost" ciągle obowiązuje...

Jakość obrazu jako najistotniejsza właściwość każdego aparatu powinna znaleźć się na samym początku naszego wykładu. 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ść odwzorowania kolorów, poziom nasycenia i kontrastu przy standardowych ustawieniach, płynność przejść tonalnych na płaszczyznach o mało zróżnicowanej palecie barw, poziom ziarnistoś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.

Jeśli wiesz już wszystko na temat swojego wymarzonego aparatu cyfrowego... kup skarbonkę. Niezmiennie największą wadą 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 cyfrowe są do kupienia już za 5500 PLN, ale przyda się jeszcze dodatkowy obiektyw. Pocieszeniem jest to, że można znaleźć coraz więcej ofert specjalnych, np. na aparaty wysokiej klasy, które są wycofywane z produkcji. Zapoznaj się z warunkami 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...

SZYBKOŚĆ

ZASILANIE

Zasilanie uważane jest powszechnie za piętę achillesową fotografii 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 dedykowany specjalnie do konkretnego modelu. Gwarantuje on dość spokojną pracę w terenie (nawet do 600 zdjęć). Jeśli w zestawie nie ma żadnego źródła zasilania powinniśmy od razu zainwestować w doładowywane baterie. Do pracy w pomieszczeniu idealne jest zasilanie sieciowe (oznaczenie DC-IN w opisie aparatu). Zasilacz rzadko jest częścią zestawu i trzeba go dokupić.

ZŁĄCZA

ro "a CL

36

Praktycznie wszystkie cyfrówki wyposażone są w złącze USB, za pomocą którego przerzucimy zdjęcia z aparatu do komputera. Jeśli zależy nam na szybkości to powinniśmy szukać sprzę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ę gumowa zaślepka przyczepiona na stałe do obudowy.

FORMATY Zwroc uwagę na formaty zapisu obrazu oraz poziomy kompresji 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 edycji obrazu.

luty/marzec 2004

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 klawiszy [Ctrl\+[O]. Następnie uaktywniamy okno warstw (Layers) za pomocą zakładki Window>Layers. Teraz, gdy już uaktywnione zostało okno warstw (Layers) możemy przystąpić do powielenia warstwy z naszym zdjęciem, która stanowi tło.

Powielanie warstw o di E

38

Aby powielić warstwę ze zdjęciem, klikamy na zakładkę Warstwa>Powiel warstwę... (Layer>Duplikate Layer...) i kolejno nadajemy jej jakąś nazwę. Aby nie pogubić się w warstwach i zachować przejrzystość oraz porządek, proponuję nadawać warstwom nazwy bezpośrednio związane z rzeczami i elementami, których dotyczą. 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 metamorfozie, a następnie warstwę z tak zmodyfikowanym kotem nałożyć ponownie na tło tzn. na warstwę z naszym zdjęciem.

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 pomocą narzędzia Flamaster (Edge Highlighter Tool) i po uprzednim ustawieniu odpowiedniej jego grubości, czyli Brush Size (proponujemy 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ładnoś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 elementy. Program wytnie jedynie wypełnione fragmenty zdjęcia (do wycię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 podkładu, czyli warstwy Background (warstwa z naszym nie przerabianym do tej pory jeszcze zdjęciem), na widok z kamery termowizyjnej. W związku z tym całe otoczenie - poza żywymi istotami i obiektami emitującymi ciepło - musimy ukazać w nocnych, ciemnych i niewątpliwie zimnych barwach. W tym celu, wyłączamy widoczność warstwy kotek poprzez kliknięcie na przycisk Wskazuje na widzialność 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 przyciskiem [OK].

Zmiana ostrości Teraz przystąpimy do drugiego i ostatniego etapu w procesie stylizacji naszego tła na widok termowizyjny. A mianowicie spowodujemy w niewielkim stopniu zmniejszenie ostrości obrazu, dzięki czemu 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ż rezultat, to całą operację standardowo musimy jedynie jeszcze potwierdzić przyciskiem [OK].

luty/marzec 2004

O) T3

39

EFEKTY

Termowizja Zmniejszamy ostrość obrazu na warstwie kotek. Czynność rozmazania w niewielkim stopniu naszego kotka jest niezbędna, gdyż chcemy w późniejszym procesie nakładania barw uzyskać plastyczny rozkład kolorów, które będą symbolizować różną ciepłotę i temperaturę 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 gaussowskie (Filter>Blur>Gaussian Biur). W tym przypadku wartością w zupeł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 obróbki. Klikamy jeszcze na przycisk Utwórz nową warstwę korekcyjną lub wypełnienia (Create new fill or adjustment layer) znajdujący się na samym dole w oknie Warstwy (Layers) - (przycisk ten symbolizowany 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 przezroczysta (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 jesteśmy zadowoleni z wyglądu naszego obiektu, możemy zadecydować o innym rozłożeniu barw i ich procentowym udziale w zdjęciu, poprzez kliknięcie na symbol wybranej wcześniej przez nas mapy 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 termowizyjnym kotkiem, tzn. będziemy teraz dodawać lub odejmować — według własnego uznania i gustu — intensywność kolorów, z których składa się nasz obiekt. W tym celu klikamy i zaznaczamy warstwę kotek, by następnie posłużyć się zakładką Obrazek>Dopasuj>Jasność/Kontrast(lmage>Adjustments>Brightness/Contrast). Za pomocą suwaków Jasność/Kontrast (Brightness/ Contrast) ustawiamy odpowiednie wartości i potwierdzamy [OK].

Dl O

di ra

E

Paski Teoretycznie w tym momencie zakończyliśmy naszą pracę i możemy już ją zapisać. Ale czy czegoś jeszcze nie brakuje? Przecież nie możemy zapomnieć o paskach, które występują w obrazie telewizyjnym. 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 odpowiednie wartości: Szerokość (Width): 1 piksel; Wysokość (Height): 2 piksele; Wypełnienie (Contents): Biały (White) i zatwierdzamy przyciskiem [OK].

40

luty/marzec 2004

>s

CD

Zaznaczenie Powiększamy maksymalnie nowo utworzony rysunek, używając narzędzia Lupa (Zoom Tool). Narzędzie to możemy także wywołać, używając skrótu klawiszowego [Z]. Następnie klikamy prawym przyciskiem myszy na narzędzie Marquee Tool (znajduje się ono w lewym górnym rogu okna z narzędziami) i wybieramy Rectangular

'

Name UMM-1 • knagi S i n PresetSees

—

~

CD [ ""canoe* )

Gistom Wtfth 1

Marguee Tool.

Wzorek Zaznaczamy połowę naszego nowego rysunku. Następnie używamy 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żywamy 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ępujące wartości: Layers - SoftLight; Opacity: 15%. Z wymienionymi opcjami możemy poeksperymentować w celu uzyskania optymalnego efektu. Wartości, które zaznaczyliśmy, w tym wypadku najlepiej nadawały się do wybranego zdjęcia. Ostatnią czynnością, jaką wykonamy, 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-

_

.'

luty/marzec 2004

41

EFEKTY

(V) 30 min

a.

Krople wody i nie tylko

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 gaussowskie (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ść regulujemy poleceniami Obrazek>Dopasuj>Jasność/Kontrast (lmage> Adjustments>Brightness/Contrasf) oraz Obrazek>Dopasuj>Barwa/ Nasycenie (lmage>Adjustments>Hue/Saturation). Klikamy na warstwę 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 kolorem 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ą selekcję 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ą koIo2. Będąc na tej warstwie wybieramy zaznaczenie owalne i rysujemy 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ę nazywamy sitko. Dla ułatwienia pracy ukrywamy warstwy sitko i koio2, klikają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ępnie 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 zaznaczenia 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ń wewnę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 wartości pozostawiamy bez zmian. Usuwamy zaznaczenie [Ctrl]+[D].

Przechodzimy do warstwy kolo2, wczytujemy selekcję k2 i stosujemy 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ą narzędzia Gradient (Gradient Tool) [G] wypełniamy selekcję gradientem tak jak na rysunku. Następnie wybieramy polecenie Warstwa>Styl warstwy>Faza i płaskorzeźba (Layer>Layer Style>Bevel and Emboss) 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), ustawiając Wielkość (Size) na 29.

psc!

luty/marzec 2004

E? o ch 03

E

"O

I/)

43

EFEKTY

Otwory w sitku Za pomocą Zaznaczenia owalnego (Eliptic Marquee) na warstwie sitko 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 usuwamy zawartość zaznaczenia. Za pomocą narzędzia Pióro (Pen) [P] rysujemy niewielki trójkąt o zaokrąglonych wierzchołkach, zamieniamy ścieżkę na selekcję, klikając prawym klawiszem myszy na symbolu ścieżki w palecie Ścieżki (Paths) i wybierając polecenie Utwórz zaznaczenie (Make Selection). Umieszczamy trójkąt tak jak na rysunku, usuwamy jego zawartość i powtarzamy czynność kilka razy, przesuwają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 osobnej warstwie w celu łatwiejszego nanoszenia poprawek. Aby nieco 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 wielkości kropel rysujemy dowolną ilość kształtów pokrywających elementy 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 zamienić 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 wybieramy 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łękitny. 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

Aby krople wody na zlewie były bardziej realistyczne, zaznaczamy wszystkie krople na warstwie krople i przechodzimy do warstwy koloT. Wybieramy narzędzie Smużenie (Smudge) [R] i zniekształcamy nieco 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 gaussowskie (Filter>Blur>Gaussian Biur), w którym ustawiamy opcję Promień (Radius) 2-3 piksele. ®

i/)

o.

S g

44

luty/marzec 2004

WEBDESIGN

30 min

film

Interfejs

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 gradientem radialnym z koloru jaśniejszego niż wcześniejszy do przezroczystości i podobnie na dole kolorem ciemniejszym od poprzedniego użytego w pierwszym gradiencie. W tutorialu będziemy używać stylu 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

o

di 03

46

Za pomocą linii pomocniczych [Cf/7]+[R] tworzymy krzyż (środek umieszczamy w centrum okręgu). Ze środka rysujemy kolejny okrąg narzędziem Elipsa (Elipsę Tool) [U] — mniejszy od poprzedniego, 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ół zmniejszają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łniamy kolorem ciemnoszarym. Zmniejszamy zaznaczenie o 1 piksel — Zaznacz>Zmień>Zawężanie (Select>Modify>Contract). Wycinamy zaznaczenie [Cfr/]+[X] i nakładamy na warstwę Styl 1.

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 przyciski. Nanosimy Styl 1. Możemy na mniejszy okrąg nałożyć kilka gradientów, tak jak w pierwszym kroku by uzyskać wypukłość przycisku.

Przyciski cd.

Na poszczególnych przyciskach tworzymy odpowiadające im symbole (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 sprawiają wrażenie jakby się zagłębiały w przyciskach.

Wypełnienie Tworzymy zaznaczenie o średnicy 12 pikseli i wypełniamy je gradientem 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 w zaznaczeniu [Cfr/]+[X]. Na niższą warstwę (zielony owal) nakładamy Styl: Cień wewnętrzny (Odległość: 0, Wielkość 10) (Inner Shadow (Distance: 0, Size 10)) oraz Faza i Płaskorzeźba (Styl: Faza zewnętrzna, Głębia: 1%, Wielkość: 2) (Bevel and Emboss (Style: Outer bevel, Depth: 1%, S/że: 2)).

4 4

Przyciski cd.

Wokół każdej zielonej kulki nanosimy zaznaczenie, wypełniamy je na nowej warstwie szarym kolorem, zmniejszamy o 1 piksel i wycinamy, nanosimy Styl 1 na obręcz wokół kulek. Dodatkowo zmniejszamy Krycie (Opacity) do 60%. Wokół wszystkich kulek tworzymy elipsę narzędziem Elipsa [M], którą ścinamy z dołu inną elipsą, poprzez narysowanie 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 kolejnym ściąć [Cfr/]+[X] niepotrzebny obszar. Aby nadać bardziej gładki wyraz tego kształtu zaznaczamy warstwę — klikamy myszą na daną warstwę z okna Layers przytrzymując [Ctrl], a następnie wybieramy z menu Zaznacz>Zmień>Wygładzanie (Select>Modify>Smooth).

o di

Gradient

ra

Na najniższej warstwie ze środka krzyża tworzymy owalne zaznaczenie o średnicy 200 pikseli i wypełniamy je gradientem od koloru RGB: [84,108,145] do koloru RGB: [132,171,228]. Na nowej warstwie tworzymy 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).

luty/marzec 2004

•o

47

WEBDESIGN

Gradient cd.

Ze środka tworzymy zaznaczenie o średnicy 175 pikseli, odwracamy 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 niepotrzebną 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>Zawężanie (5 pikseli)). Na nowej warstwie wypełniamy zaznaczenie ciemnym kolorem, kopiujemy warstwy z zielonymi kulkami i przestawiamy 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 stronie 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 wypeł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 szarego. 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 ciemnym 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 koloru RGB: [7,81,148].

Sil

o.

s

Podkład cd.

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 nakładamy ten sam Styl 1. Zaznaczamy okrąg o średnicy 200 pikseli ze środka pierwszego krzyża i wypełniamy go ciemnym niebieskim.

Zaznaczamy warstwę ze ściętym prostokątem, odwracamy zaznaczenie i ścinamy wcześniej wypełniony okrąg. Zmniejszamy Krycie (Opacity) do 10% i zmieniamy tryb krycia na Mnożenie (Multiply).

Podkład cd.

Zaznaczamy z [Ctrl] warstwę, gdzie wystają z lewej i z prawej strony jej szare fragmenty, zwiększamy zaznaczenie o 2 piksele i wypeł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ół ciemnym 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ń formujemy wyświetlacz interfejsu. Zaznaczamy wyświetlacz i wybieramy z menu Zaznacz>Zmień>Wygładzanie (Select>Modify>Smooth (5 pikseli)) by wygładzić kąty. Odwracamy zaznaczenie [Ctrl\+[Shift]+[f\ i ścinamy niepotrzebne rogi. Zaznaczamy warstwę szarego prostokąta z [Ctrl] i na nowej warstwie wypełniamy go ciemniejszym 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 wybieramy z menu Zaznacz>Wtapianie (Select>Feather (8 pikseli)) i ścinamy zaznaczenie. Znów zaznaczamy szary prostokąt i wybieramy z menu Zaznacz>Przekształć zaznaczenie (Select>Transform Selection), ustawiamy Skalowanie na 90% dla szerokości i wysokości. Na kolejnej 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 naszego interfejsu, zaznaczamy z [Ctrl] zieloną warstwę i tworzymy nową warstwę. Wybieramy z menu Edycja>Wypełnij (Edit>Fill...), ustawiamy na Wzorek (Pattern) i z dostępnych deseni wybieramy ten, który przed chwilą stworzyliśmy. Zmniejszamy krycie na naszym scanline do 25% i sposób przenikania na Mnożenie (Multiply).

Ostatnie poprawki Zaznaczamy warstwę z niebieskim podkładem używając [Ctrl], następnie używając Lasso wielokątne (Polygonal Lasso Tool) [L] ścinamy zaznaczenie wzdłuż skośnych linii. Używamy do tego [Alt] żeby 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 przezroczystości, następnie przesuwamy zaznaczenie o kilkanaście punktów w dół i usuwamy zbędny obszar gradientu. 9

luty/marzec 2004

Ol

o di ra E "a

49

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 piskeli; 150 dpi; RGB. Wybieramy narzędzie Pióro (Pen) i tworzymy obrys 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 zaznaczenie (Make Selection) i wypełniamy je na czarno, na nowo utworzonej warstwie. Zaznaczenie zapisujemy jako skrzydło. Aby skrzydł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

di T3

50

Zaczynamy tworzyć właściwy wzór na skrzydle. Zaznaczamy obszar czarnego wypełnienia ([Cfrf]+kliknięcie lewym przyciskiem 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ępnie z lewej strony narzędziem Lasso, tak aby krawędź zaznaczenia 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.

luty/marzec 2004

Rysowanie żyłek na skrzydle Teraz musimy utworzyć fakturę ciemnych żyłek na skrzydle motyla, ż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 charakterystycznej tekstury, więc duża dokładność nie jest w tym wypadku wymagana. W związku z tym rysujemy użytkowanie za pomocą 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 faktura 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ńczowa faktura, a wartość wypukłości ustawiamy na 14.

Powierzchnia skrzydła Tworzymy nową warstwę nad poprzednimi. Nazywamy ją tekstura. 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ątowy sposób nakładania gradientu (Angle Gradient). Gradient aplikujemy, jako początkowy punkt wybierając prawy górny róg skrzydł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 utworzeniem warstwy tekstura (ok. 10).

C

Tekstura powierzchni skrzydła Kopiujemy warstwę tekstury. Umieszczamy ją nad warstwą czarny podkład i nazywamy ciemna tekstura. Wypełnienie (F/7/) ustawiamy na 30%. Pod nią tworzymy warstwę pomarańczowy nalot. 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

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

luty/marzec 2004

di "O

o.

51

EFEKTY

iii

Tworzymy drugie skrzydło Duplikujemy warstwy, z których stworzone jest skrzydło i nazywamy je prawe. Wybieramy Edycja>Przekształć>Odbij poziomo {Edits>Transform>Flip Horizontal) i przesuwamy na pożądane miejsce. Sprawdzamy, czy kształt utworzonych skrzydeł nam odpowiada. Następnie duplikujemy obydwa zestawy warstw.

Ustawiamy ponad poprzednimi i kolejno „spłaszczamy" poleceniem Warstwa>Złącz widoczne (Layer>Merge Visible). Nie połączone 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 odwłok. Tworzymy zaznaczenie w pożądanych przez nas proporcjach i kształcie, wypełniamy je czarnym kolorem i korygujemy utworzony kształt. Tworzymy następną warstwę oczy. Rysujemy kształt oka owalnym zaznaczeniem i wypełniamy radialnym gradientem utworzonym 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 celu 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 warstwy 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ępnie obrysowujemy ją pędzlem: Obrysuj ścieżkę >Pędzel (Stroke Path>Brush) z zaznaczoną opcją Symulacja nacisku (Simulate pressure). Ścieżkę czułka odwracamy horyzontalnie, ustawiamy we właściwym miejscu i ponownie obrysowujemy. Identyczne czynności wykonujemy dla odnóży,

Ol

o

di ro

-a o.

3 S

52

Tworzymy cień Wszystkie elementy odwłoka kopiujemy na nową warstwę i ustawiamy ją na samym dole. Stosujemy opcje: Obrazek>Dopasuj>Usuń kolor (lmage>Adjustments>Desaturate), a następnie Próg (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>Transform>Distort), tak aby był naturalny. Na warstwie ze skrzydłami aplikujemy cień poleceniem Warstwa>Styl warstwy>Cień (Layer>Layer Style>Drop Shadow), dostosowując go do tonu cienia odwłoka. ®

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ę zrealizować. 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 Photoshop 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?

Przedstawiamy Warn sylwetkę Bartka Kozłowskiego — znakomitego grafika i projektanta.

To że wyszły spod mojej ręki. Przedstawiają 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 wyrenderujesz lub nie narysujesz to jej nie masz! Czasem oddaję prace nad „klockami" innym bardziej utalentowanym w różnych technikach graficznych oso-

bom i staram się ich naprowadzić na moją wizję rysowanego/malowanego detalu. Nie mam kompleksu 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 przetworzę, pokoloruję i będzie ładnie (śmiech). Druga sprawa, 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ć nietknięte. Podziwiam artystów analityków, którzy posiadają 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 sympatyczny proces! Jedynym jego wrogiem jest czas, hektolitry kawy potrzebne do zakończenia zadania i związane przez klienta ręce... Ale kto by się tam przejmował takimi drobiazgami:) Aha, byłbym zapomniał, pracuję 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ś takiego... lekkiego, ładnego... spójnego" Dobre prawda?

Miał być detal który kojarzy się z transportacją, przewozem, 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: dmuchawce! Super transport za darmochę! Może czasem nie zgodnie z rozkładem jazdy i kierunkiem, ale chyba jest to dosyć lekkie i ładne. Nabazgrałem na kartce papieru jak to widzę, pod jakim kątem fotka czy z bliska czy z daleka, Adam zrobił zdjęcie dmuchawca (cyfrakiem FujiS2 pro) pogłaskaliśmy obrazek w Photoshopie, dopracowaliśmy liternictwo i kolorystykę (udało się przekonać klienta, że już czas trochę „odjechać" od zieleni) i tadaaaa... karta jak się patrzy! Nie opowiem wam o kilku wątkach pobocznych, wokół których się kręciłem zanim na to wpadłem. Chodziły mi po głowie jakieś „globusy", „statki", „karawany" ale szósty zmysł mówił mi: „jeszcze trochę wysiłku kolego... rusz mózgownicą!"

W: BANK BFH 4H&1

BANKPBK'

Bank Przemystowo-Handlowy PBK SA

PROSFERA Kraków KLUB HANDLU ZAGRANICZNEGO

B Co lub kto jest dla Ciebie inspiracją?

Muzyka, sny, słońce za oknem, fotografia, malarstwo, (uwielbiam Boscha, Klimta, Miro). Fascynuje mnie kino — zapominam na trochę o rzeczywistości — uwielbiam komiksowych superbohaterów walczących z całym światem :)

BARTEK KOZŁOWSKI

Urodzony w 1974 roku, grafik, projektant, wykładowca.

Obecnie współwłaściciel Ośrodka Szkoleniowego i Studia Projektowego PROSFERA w Krakowie. Uczy obsługi aplikacji graficznych i zasad prepressu.

Projektuje w duecie ze swoim przyjacielem Krzysztofem Stankiewiczem.

B Czym się zajmujesz po godzinach?

Chronicznym poprawianiem samopoczucia. Jeżdżę na desce, gram w koszykówkę. Ciągle słucham muzyki, bez niej jestem kaleki (Seal, Soyka, polski HH (pochodzę z Kielc) Faith No Morę, Kosheen — straszny mam rozrzut:) Rozmawiała Magdalena Cyrczak

styczeń 2004

o ra /l

55

NOWOŚCI

dobę podobnie jak inni producenci oprogramowania przyzwyczaili nas, że wraz z nowymi wersjami ich programów 'trzymujemy większe możliwości lub niekiedy zupełnie nowe programy. Nie inaczej jest w przypadku najnowszej odsł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.

INFORMACJA producent: Adobe cena: 649.00 $ (petna wersja) 169.00$(upgradezPS7.0)

Na początek niemiła wiadomość dla użytkowników starszych systemów operacyjnych. Photoshop CS nie uruchomi się na systemach innych niż Windows 2000 wraz z Service Pack 3 lub Windows XP z Service Packi. Niestety osoby pracujące na Windows 98 lub innym, nie będącym XP lub 2000 nie będą miały możliwości nawet zainstalowania Photoshop CS. Jest to lekko bolesne, ale może w ten sposó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 raczej ewolucja niż rewolucja. Dodano możliwość przekonfigurowania skrótów klawiszowych, choć zasadniczo większość 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-

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). Photoshop CS daje nam możliwość zarządzania nimi (Layers Compś). W Praktyce oznacza to, że w jednym pliku możemy mieć zachowanych kilka wariantów jednej grafiki i swobodnie zmieniać je przy pomocy kilku kliknięć myszką. Taką możliwość mieliśmy już w poprzednich wersjach, jednak tutaj 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 dodaniu obsługi ogromnych formatów potrzebnych np. do produkcji billboardów. W PS CS mamy możliwość stworzenia ilustracji nawet o wymiarach 300,000 na 300,000 pikseli z 56 kanałami.

Jest także możliwość

tworzenia oraz edytowania tekstu na krzywych oraz kształtach.

W tym celu Photoshop wykorzystuje 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", natomiast 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 plików, a następnie do bardziej przyjaznych plików wideo.

IMAGEREADY CS Warto również przyjrzeć się młodszemu bratu czyli ImageReady CS. Podobnie jak w Photoshopie, tak i w nim zaszły zmiany. Ulepszono edycje drobnych elementów, jak przyciski

o di ro "O

o. g g

Piocesoi lntel'p Pentium R III lub 4 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

3 czy tekst oraz współpracę z Photoshopem. Teraz „skoki" pomiędzy tymi dwoma aplikacjami są o wiele szybsze, jednak aby tak się działo wymagany jest szybki procesor z serii Pentium 4 (lub procesory G4, G5 w przypadku komputerów Macintosh).

Jednak najważniejszą i zarazem najciekawszą nowością ImageReady CS jest możliwość eksportu plików do formatu Flasha (SWF). Ponieważ Flash nie obsługuje importu wielowarstwowych plików PSD, przeniesienie pliku Phqtoshopa 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ć dany plik PSD do SWF, a następnie wczytać go w programie Flash. Eksportowane projekty zachowują wszystkie swoje wartości oraz ustawienia, jednak są odpowiednio konwertowane, aby można było jak najwygodniej pracować na nich we Flashu.

Ponadto ImageReady z dopiskiem CS pozwala na dodawanie plików SWF (głównie wariacji tekstowych) do plików HTML (a nawet XHTML), które sam tworzy. Usprawniono możliwości cięcia grafiki na potrzeby stron www. Teraz jest możliwość ukrycia konkretnych wycinków, dzięki temu jeśli nie ma potrzeby to nie zostaną one zawarte w kodzie HTML.

Być może za jakiś czas pojawi się jakiś patch, jednak wątpię. Więc nie pozostaje nic innego jak zmienić system na Windows XP a następnie zamienić Photoshop 7.0 na wersję CS. ©

Sk Galeria filtrów

PODSUMOWANIE Nowy Photoshop jest godnym następcą wersji 7.0. Posiada 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 prezentacji w postaci plików PDF. Jedynym minusem nowej wersji jest fakt, że posiadacze 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

Zarządzanie warstwami (Layer Comps)

o ó> m E

Tekst na ścieżce

l/> O.

Automatyczne łączenie zdjęć

5

Podwarstwy 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

luty/marzec 2004

57

KLASYCZNE EFEKTY

15 min film

TEKSTURA

pliki

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ę zardzewiał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 pikseli. 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 zardzewiałej blachy. Po otwarciu tego obrazka klikamy na niego lewym przyciskiem myszy i — trzymając ten przycisk cały czas — przesuwamy obrazek do dokumentu, który utworzyliśmy wcześniej. Mamy teraz dokument z tłem dla naszej tekstury, którą zamierzamy stworzyć.

Duplikowanie

Ol

o

Ol

ra

Po utworzeniu tła duplikujemy warstwę ze zdjęciem, które uprzednio wczytaliśmy. Możemy to zrobić za pomocą kombinacji klawiszy [Ctrl]+[J], albo klikając prawym przyciskiem myszy na warstwie z blachą, a z menu, które się ukaże wybieramy Powiel warstwę (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ę pojawi, Jasność (Brightness) ustawiamy na +30 i Kontrast (Contrast) ustawiamy też na +30.

Wycinanie

•a

a.

S g

Następnie z przybornika narzędzi wybieramy narzędzie Lasso i za jego 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 zaznaczenia 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 zaznaczenie. Klikamy na nią w oknie Warstwy (Layers) prawym przyciskiem myszy i z widocznego menu wybieramy Opcje warstwy {Layer Properties). W oknie, które się pojawi, klikamy po lewej stronie 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 bardziej realistycznie.

Powierzchnia cz. 1 W tym kroku zaczniemy etap pracy związany z poprawianiem kolorów. Otwórzmy więc zdjęcie o nazwie mur.tif\ przenieśmy je do naszego 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 krycie na Nakładka (Overlay). Dzięki temu tekstura nabrała kolorów, jednak należy jeszcze nad nią popracować, aby nabrała bardziej realistycznego wyglądu.

Powierzchnia cz. 2 W celu polepszenia i zbliżenia się do jak najlepszego efektu, otwieramy 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 następnych krokach.

Korekcja kolorów Aby dokonać korekcji kolorów w oknie Warstwy, klikamy na biało-czarne kółko znajdujące się na dole palety i z listy, która się ukaże, wybieramy Krzywe (Cun/es). Jest to narzędzie, które oferuje znacznie bardzie 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ą widać w lewym okienku, mniej więcej tak jak na ilustracji — w ten sposó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 klikamy na biało-czarnym kółku u dołu okna Warstwy i z listy wybieramy 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ę. •

luty/marzec 2004

59

NARZĘDZIA

5 min

Jak zrobić własn Łukasz Zając

film

pliki

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.

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 pikseli. 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 naszym 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ł żadnego znaczenia.

Łączenie warstw Musimy teraz połączyć wszystkie warstwy. W tym celu klikamy na Warstwa>Złącz widoczne (Layer>Merge Visible) lub po prostu wciskamy kombinację klawiszy [Ctri\+[Shiff\+[E\. Zawsze musimy pamiętać o tym, aby łączyć wszystkie warstwy jeszcze przed tworzeniem nowego 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 nowy dokument: Plik>Nowy (File>New), wybieramy dla niego dowolne parametry. Z okna Narzędzia (Tools) wybieramy narzędzie Pędzel (Brush Tool) i wybieramy nasz pędzelek. Ustawiamy teraz średnicę pędzla (Master Diameter) na np. 50 pikseli, wybieramy dowolny kolor. Gotowe, możemy już wypróbować nowo utworzony pędzel.

Oczywiście możemy tworzyć pędzle o przeróżnych kształtach i wielkości — zależnie od potrzeb i fantazji.

— B

o di "O

60

!r

,. Wczytywanie pędzli Wczytujemy plik Design-Extra!.abr (znajduje się na płycie CD dołączonej do magazynu). Z palety wyboru kształtu pędzla wybieramy Wczytaj Pędzle (Load Brushes) i szukamy pliku Pędzelek 2, ustawiamy Główną Średnicę (Master Diameter) na 55 pikseli. Na pasku opcji narzędzi klikamy na Pędzle. Zaznaczamy pole Dynamika kształtu (Shape Dynamics), w opcjach wybieramy Wahanie rozmiaru (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. •

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ł

Książka jest zestawieniem tutoriali opisujących najbardziej popularne efekty specjalne, jakie można osiągnąć w Adobe Photoshop 7.0. Autor — Scott Kelby — redaktor 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ągane przy użyciu filtrów jakie oferuje Photoshop, zaawansowane techniki pracy z tekstem, 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 ilustracjami, co zdecydowanie ułatwia zrozumienie procesu jego tworzenia. Oprócz tutoriali na każdej stronie czytelnik znajdzie praktyczne porady i przydatne skróty klawiaturowe. 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łoby znacznie ułatwić czytelnikom ich przyswojenie.

Magdalena Cyrczak

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 adresowana jest przede wszystkim do początkujących grafików komputerowych, 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 przygotowywania obrazu do obróbki i do druku, sekrety tworzenia grafiki na potrzeby internetu, filtry, narzędzia selekcji, pracę na warstwach oraz korygowanie kolorystyki, jasnoś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 — ilustracjami. 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ęczni za taką „ściągawkę".

Książka na pewno ułatwi pierwsze kroki w poznawaniu programu i zachęci do dalszej 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ętnoś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łaszcza w przypadku publikacji poświęconych ćwiczeniom praktycznym bardzo przydatne 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.

o

01

3!

Piotr Horodyński

•?s<!

luty/marzec 2004

61

RECENZJE

Recenzje tabletów

Dariusz Pasturczak

*

INTU0S2 Rodzina tabletów Intuos2 liczy sobie pięciu członków różniących się rozmiarami (A6, A5, A4 regular, A4 oversize oraz A3) obszaru roboczego. My dostaliśmy do testów wersje o rozmiarach A4. W skład zestawu wchodzi nie wymagające baterii piórko oraz także nie posiadająca dodatkowego zasilania mysz o nazwie 4D i sam tablet, czyli miejsce na którym będziemy rysować.

Zaletą zestawu jest możliwość swobodnego używania zarówno piórka jak i myszki. Stało się to możliwe dzięki usunięciu kabli łączących je z tabletem. Mimo braku „smyczy" każdy z urządzeń nie wymaga wymiany baterii, gdyż działają one bez żadnego wewnętrznego źródła energii. Jest to niewątpliwie ogromny plus, dzięki któremu nie jesteśmy zmuszeni kupować co kilkanaście dni baterii aby można było korzystać z zestawu.

Ponadto zarówno mysz jak i piórko posiada własny, unikalny system wykrywania o nazwie TolllD. W praktyce oznacza to, że narzędzie po dotknięciu tabletu jest automatyczne wykrywane, rozpoznawane i gotowe do użycia oraz konfiguracji.

ne możliwości przy korzystaniu z takich programów jak Painter, Aura czy Photoshop.

Myszka 4D posiada cztery programowalne przyciski (stad nazwa 4D) oraz scroll. Mimo iż nie jest optyczna sprawuje się bardzo dobrze i jest stosunkowo dokładna. Niestety jej konstrukcja nie przewiduje użycia na innej powierzchni niż tablet.

Wymiary tabletu to: 456 x 361 x 14 mm, natomiast obszar roboczy na którym możemy pracować to 304,8 x 240,6 mm. Te rozmiary powodują, że rysuje się na nim swobodnie i przyjemnie. Nie brak nam miejsca i zasadniczo taka powierzchnia powinna wystarczyć nawet do bardzo skomplikowanych ilustracji czy projektów.

Intuos2 to znakomity zestaw do tworzenia cyfrowych ilustracji, jego możliwości są ograniczone jedynie naszym talentem i zapałem do pracy.

Piórko Intuos2 posiada wygodną i energonomiczną budowę, dzięki czemu leży w dłoni wręcz idealnie. Jest stosunkowo lekkie i zarazem bardzo precyzyjne, posiada 1024 poziomy 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

Rozdzielczość

GRAPMRE2 USB DC 1000

2540 dpi

1000 dpi

Folia ruchoma

jest

jest

Podłączenie

wersja P (RS-232C), wersja U (SSB)

USB

Poziomy nacisku

1024

512

W skład zestawu Graphire2 wchodzi: bezkulkową myszkę (działająca bez baterii), nie wymagające baterii oraz innego zasilania, czułe na nacisk piórko oraz podkładka do rysowania czyli „tablet" o —jak twierdzą twórcy — bardzo nowoczesnym kształcie.

Menu ponad obszarem roboczym

tak

Dwuściezkowatość

tak

Pole szybkiego wyboru

tak

Podstawka do piórka

tak. oddzielny element

Waga

1600 g

426 g

Parametry piórka

Zasilanie

160x14 mm

145A14 mm

bezbateryjne

bezbateryjne bezprzewodowe

Dl

Podłączenie

bezprzewodowe

ó\

Poziomy nacisku

1024

512

Gumka czuła na nacisk

tak

tak tak/2

o

I

o.

g 5

Boczne przyciski/ilość

tak/2

Kod Tool ID

tak

Waga

17 g

Oprogramowanie

Pamtei Classic

Pamter Classic. Cybei Sign, Pen Office SE. Pen Toois

Gwarancja

24 miesiące

24 miesiące

Cena

2574 PLN

469 PLN

nie

'ug

62 luty/marzec 2004

Jedną z zalet zestawu jest możliwość swobodnego używania zarówno piórka, jak i myszki. Jest to możliwe dzięki usunięciu z konstrukcji zbędnych i ograniczających możliwości kabli łączących je z tabletem czy też komputerem, do którego jest podłączony zestaw. Warto zaznaczyć, że oba manipulatory nie wymagają również instalacji oraz okresowej wymiany baterii, gdyż działają one bez jakiegokolwiek wewnętrznego źródła energii. Jest to niewątpliwie ogromny plus, dzięki któremu nie jesteśmy zmuszeni kupować czy też ładować co kilka tygodni baterie, aby można było swobodnie pracować.

Piórko dołączane do Graphite2 jest smukłe i dobrze leży w dłoni. Jest bardzo lekkie i poręczne, posiada 512 poziomów nacisku, co powinno wystarczyć do wszelkiego rodzaju szkiców elektronicznych czy też podpisów. Posiada także dwupozycyjny przycisk, którym można swobodnie zaprogramować oraz gumkę.

Myszka jest bezkulkową, choć nie optyczna i podobnie jak piórko jest bezprzewodowa. Posiada 3 programowalne przyciski. Wadą jest to, że nie ma możliwości używania jej na innym podłożu niż tablet.

•O

•2

Sam tablet, czyli podłoże służące do rysowania, łącznie ze stojakiem na piórko ma wymiary 225x210x7,5 mm i podłącza się go do portu USB. Niestety realne miejsce pracy jest stosunkowo małe i raczej trudno jest stworzyć na niej bardziej skomplikowane prace. Po kilku

godzinach pracy doszedłem do dwóch wniosków: po pierwsze: do wszystkiego można się przyzwyczaić, a po drugie: tablet został stworzony z myślą o bankach, gdzie lada dzień będziemy używać podpisu elektronicznego Praca z zestawem Graphire2 jest przyjemna, jednak stawia spore ograniczenia. Szczególnie odczuwalne będzie to dla osób przyzwyczajonych do rysowania na formatach co najmniej A4 - będzie im brakować miejsca. Dlatego przed ewentualnym zakupem warto rozważyć możliwość przetestowania go w sklepie, by sprawdzić czy taka mała powierzchnia nie będzie nam przeszkadzać. Z pewnościąjest to idealne urządzenie dla początkujących użytkowników.

DLA PROFESJONALISTÓW Piotr Horodyński

PL-700 Tablet WACOM z 17 calowym ekranem LCD charakteryzuje się bardzo wysoką jakością wykonania, doskonałym odwzorowaniem kolorów oraz szybką i dokładną reakcją na ruchy piórka. Rozdzielczość tabletu to 508 linii na cal, przy rozpoznawalnych 512 poziomach nacisku.

Piórko, podobnie jak we wszystkich innych urządzeniach firmy WACOM jest bezbateryjne i bezprzewodowe. Posiada gumkę oraz dwupozycyjny przełącznik. Rozdzielczość monitora zintegrowanego z tabletem wynosi 1280 x 1024 piksele. Posiada on złącze cyfrowe DVI oraz analogowe VGA. Tablet posiada odchylaną stopkę, która pozwala regulować kąt ustawienia w zakresie 16-72 stopnie. Dzięki temu możemy używać tablet zarówno jako monitor, przy korzystaniu np. z myszki i klawiatury, jak i jako cyfrową deskę kreślarską. Możliwe jest także całkowite zdjęcie stopki i położenie tabletu płasko na stole lub na kolanach. Stopka wyposażona jest w gumowe końcówki które doskonale zabezpieczają tablet przed przesuwaniem się, czy spadnięciem z blatu (sprawdzone na śliskim podłożu). Gniazda do połączenia z komputerem i zasilaniem ustawione są równolegle do powierzchni blatu, kable są dodatkowo zabezpieczone przed przypadkowym wypadnięciem i ukryte pod klapką. Całość sprzyja zachowaniu porządku.

Na stronach firmy Wacom, model PL-700 jest określany raczej jako urządzenie wskazujące, doskonałe do wykorzystywania w czasie prezentacji biznesowych. Jako flagowe narzędzie przeznaczone dla artystów wskazywane są modele serii Cintiq. Wydaje się do trochę krzywdzące dla tego wspaniałego tabletu. Większość parametrów PL-700 jest wyższa, poza czasem reakcji plamki, jednak w praktyce nawet bardzo ekspresyjne malowanie jest natychmiast odwzorowywane na monitorze. Tablet cechuje bardzo dobre odwzorowanie łuków, nawet przy szybkim prowadzeniu kursora. Piórko prowadzi się wygodnie, szybko i dokładnie reaguje ono na nacisk i daje charakterystyczny poślizg na szybie monitora. Jestem od wielu lat przyzwyczajony do pracy z tabletem, jednak mimo tego doświadczenia i pewnych przyzwyczajeń, nieco inny sposób prowadzenia się piórka po szybie, bardzo szybko przypadł mi do gustu.

Nie muszę chyba wspominać o samym komforcie pracy z takim urządzeniem, chyba najbardziej przypominającym pracę w naturalnych mediach. Nagle kursor, charakterystyczny dla wszystkich aplikacji wskaźnik myszki, staje się zbędny, wręcz zaczyna przeszkadzać. Właściwie jedyny mankament tabletu to gruba szyba powodująca że farba

którą malujemy pojawia się około 3 mm „pod" naszym piórkiem. Jednak na razie chyba nie ma innych możliwości technicznych, pozwalających na stworzenie bardzo cienkiego i odpornego na nacisk ekranu. Jakość wyświetlacza jest doskonała, bardzo duża jasność, bardzo wysoki kontrast, bardzo duży kąt widzenia; niczym w wysokiej jakości monitorach. Należy tylko pamiętać o odpowiednim ustawieniu w stosunku do źródeł światła, gdyż podobnie jak w klasycznych monitorach, na szybie pojawią się refleksy. Tablet w czasie pracy nagrzewa się nieco, jednak po około godzinie pracy ciepło osiąga pewien poziom, którego już nie przekracza (najdłuższy czas zdjęcie: Aleksandra Kot testowania to około 10 godzin). Muszę tu zaznaczyć, że ciepło to bynajmniej nie jest uciążliwe, nawet podczas długiej pracy z tabletem na kolanach. Dla niektórych być może to będzie jeszcze jedna z bardzo wielu zalet tabletu. ®

Technologia

Rezonans elektromagnetyczny

Obszar roboczy

338 x 270 mm

Rozdzielczość tabletu

0,05 mm na punkt (508 linii na cal)

Dokładność tabletu

±0,5 mm, ±1 mm w narożnikach

Odczyt położenia piórka

5 mm nad powierzchnią ekranu-tabletu

Szybkość odczytu położenia piórka

max. 205 punktów na sekundę •

•

Typ

czułe na nacisk, bezprzewodowe, bezbateryjne

Przyciski

dwupozycyjny, programowalny przycisk oraz gumka

Siła nacisku potrzebna do jego aktywacji

20 g

Ilość poziomów nacisku

512

Żywotność końcówki piórka

10 milionów naciśnięć

Waga

16g

psć

uty/marzec 2004

|

o Dl

63

POZNAJEMY PHOTOSHOPA

INTERFEJS PASEK MENU

Pasek menu programu Photoshop zawiera wszystkie opcje, ustawienia oraz narzędzia, które możemy wykorzystać podczas pracy z programem.

Menu podzielone jest w sposób logiczny na główne kategorie: Plik (File), Edycja (Edit), Obraz (Image), Warstwa (Layer), Zaznaczenie (Select), Filtr (Filter), Widok (View), Okno (Window), Pomoc (Help).

Adobe Photoshop CE [okiadkatif @ 16,7% (RGB)] |'fllk Edycja Obrazek Warstwa Zaznacz Filtr Widok Okno Pomoc T

[Z3 Automatyczny wybór warstwy

Q Pokaż obwiednif i J f J J

d

i- '

y •1,

-i.

• OKNO SKALI DOKUMENTU Okno skali dokumentu informuje nas na bieżąco o tym w jakiej skali znajduje się aktywny dokument (obrazek, zdjęcie), nad którym właśnie pracujemy. 100% oznacza rzeczywista wielkość dokumentu, jednak gdy pracujemy na dużym dokumencie, który nie mieści się w oknie programu w całości możemy zmienić jego skalę w zależności od potrzeb.

u.

'—* J

1

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 miejscu możemy zadecydować sami w zależności od tego, na jakich informacjach najbardziej nam w danej chwili zależy. Czy np. na wielkości pliku, rozmiarze dokumentu czy aktualnego aktywnego narzędzia.

• #,67X I &

O)

I

o.

i

68

WYBÓR RODZAJU INFORMACJI O DOKUMENCIE

To tutaj decydujemy o czym informował nas będzie Photoshop w oknie Informacje o dokumencie. Do wyboru mamy kilka opcji, które dostosowujemy do aktualnych naszych potrzeb.

Dok: 24,9M(22,3M

• PASEK NARZĘDZI

jt Klikni| i przeciągnij, aby prsssun^ó warstwf. Shift ogranie

Pasek narzędzi grupuje wszystkie podstawowe narzędzia programu Photoshop, za pomocą których manipuluje się obrazkami, 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 kilka 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.

luty/marzec 2004

PHOTOSHOPA PASEK OPCJr

Pasek opcji jest to zbiór opcji wybranego narzędzia zgrupowanych w jednym dobrze widocznym i łatwo dostępnym miejscu. Jeżeli podczas pracy zmienimy narzędzie, pasek opcji dynamicznie zmieni swój wygląd wyświetlając opcje, których można użyć do dostosowania sposobu działania tego narzędzia.

OBSZAR ROBOCZY*

Historia ^ąnia '(awienia nar:ed:ia

Obszar roboczy to cała przestrzeń programu Photoshop, którą możemy dowolnie sobie organizować. Otwieramy w nim nasz dokument, możemy na nim dowolnie rozmieszczać palety i pasek narzędzi. Stanowi on dla nas przestrzeń ograniczonąjedynie wielkością ekranu.

AKTYWNY DOKUMENT •

Aktywnym dokumentem może być zdjęcie lub obrazek, nad którym w pracujemy. W programie Photoshop 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

• PALETY Palety są specjalnymi zestawami narzędzi lub ustawień programu Photoshop. Kiedy pierwszy raz uruchomimy program Palety domyślnie ustawione są po prawej stronie ekranu. Ważną zaletą Palet jest jednak możliwość ich przemieszczania na całym ekranie 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.

?

luty/marzec 2004

Jest to obszar, w którym dynamicznie i na bieżąco Photoshop informuje 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żytkowników, którzy poznają i uczą się programu Photoshop.

o di ro •o

69