Kl fi\ V C W v i c M a n < s p h o . t o Editor 7.2 • Page Curl 1 . 2 - Puzzle Pro 2.0NQ W FILMY INSTRUKTAŻOWE DO TUTORIALI • ZDJĘCIA ROYALITY FREE

NR 01/2004 (1) CENA 29,80 PLN VAT 0% NAKŁAD 6000 egz.

MAGAZYNUŻYTKOWNIKÓWPROGRAMUADOBE PHOTOSHOP

www.psdmag.org

oIco

nica

CL

O

z

O

1<

TEMAT NUMERU W ^

W E B D E S I G N ^projektujemy layout stronykolory na WWWoptymalizacja grafiki

PHOTOco nowego

Fotografia cyfrowakupujemy aparat

rozwijaj sięTwoja praca. Twoja droga. Poznaj 3ds max 6.

Biegnij do przodu razem z elastycznymi, bogatymi w możliwości modelowania 3D, animacjii 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 postprodukcję wizualizację i designDzięki niesamowitym możliwościom 3ds max 6 wykracza daleko poza uroki starych dobrych czasów

Odwiedź nas na pokazie 3ds maxQ u e d e x • • iul. Bukowska 14 http://www.quedexx62-080 Sierosław biuro@quedexxomdodatkowe informacje na stonie producenta: www.di

kom. H8 605 061tcl.*48 61 8963fax +48 61 8963 900

i/products/3dsmax6

Od redakcjiMam przyjemność przedstawić Warn pierwszy numer z serii .psd. Pismo powsta-

ło dzięki Waszym sugestiom i uwagom. W głównej mierze poświęcone jest tworze-niu grafiki i obróbce zdjęć w programie Adobe Photoshop. Nie będziemy jednak po-mijać innych tematów — zwłaszcza dotyczących nowości, jakie pojawiają się na na-szym rynku.

Tematem pierwszego numeru jest webdesign, czyli sztuka projektowaniai 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 umiemu sprostać. Mam nadzieję, iż artykuły poświęcone temu zagadnieniu pomogą Warnw świadomym projektowaniu witryn internetowych. Możecie przeczytać międzyinnymi o optymalizacji plików graficznych, tworzeniu funkcjonalnego layoutu stronyinternetowej i pozycjonowaniu stron.

Oprócz tego zapraszam do wykonywania tutoriaii — w pierwszym numerze pokaże-my Warn jak tworzyć teksturę przypominającą zardzewiałą powierzchnię, dowiecie sięjak ręcznie wykonać metalowy obiekt pokryty kroplami wody, poznacie tajniki usuwa-nia efektu mory z zeskanowanych zdjęć.

Nie przeoczyliśmy również nowości, jaka ostatnio pojawiła się na rynku — pakie-tu Adobe Creative Suitę — w .psd możecie przeczytać o zmianach, jakie firma Adobewprowadziła w programie Photoshop CS.

Na dołączonej do pisma płycie CD szczególną atrakcjąjest zestaw 25 zdjęć RoyalityFree, które z pewnością przydadzą się Warn przy realizacji własnych projektów.

Życzę miłej lekturyMagdalena Cyrczakmagda@software.com.pl

Magdalena TomczykPracuje jako freelancer, od ra-ku również w stałej współpracyz agencjami reklamowymi.

Mariusz Dubielecki (Akira)Technik-Informatyk, interesuje siętworzeniem stron WWW, anima-cji, psychologią, muzyką rockową,pisaniem, szeroko pojętym spor-tem ze szczególnym uwzględnie-niem i praktykowaniem kulturysty-ki i lekkoatletyki.

Danie! Sodkiewicz19 lat, z powołania ;-) uczęsz-cza do Technikum Elektroniczne-go we Wrocławiu. Oprócz sprzętukomputerowego interesuje się tak-że różnego rodzaju programami.szczególnie związanymi z tworze-niem stron internetowych i grafiką

Dariusz PasturczakGrafiką zajmuje się od przeszło10 lat. Z Photoshopem pracuje odsześciu lat. Interesuje się zarów-no grafiką 2D jak i 3D. także ani-macją. Obecnie pracuje jako Fre-elancer wykonując rozmaite pro-jekty graficzne.

Rafał DukaczewskiPhotoshopa używa od 6 lat. Zaj-muje się tworzeniem grafiki docelów reklamowych, projektowa-niem stron internetowych. logo-typią.

Łukasz PabianGrafiką komputerową interesujesię od kilku lat. W swoich ilustra-cjach stara się przekazywać to cow danej chwili odczuwa, posługu-jąc się abstrakcyjnym wyrazemprzestrzeni, formy oraz koloru.Większość jego prac można zoba-czyć na stronie www.insane.all.pl

Piotr HorodyńskiAbsolwent Akademii Sztuk Pięk-nych w Łodzi. Dziedzinąjego dzia-łalności jest malarstwo, grafika tra-dycyjna i komputerowa, multime-dia i animacje.

Aleksandra KotAbsolwentka Wydziału Geografiii Studiów Regionalnych Uniwesy-tetu Warszawskiego, z zamiłowa-nia podróżniczka i fotograf, gra-fiką komputerową (Photoshop,Flash, Bryce. Painter) zajmuje sięod dwóch lat.

Łukasz ZającFreelance designer z ponad dwu-letnim doświadczeniem w projek-towaniu graficznym i projektowaniustron internetowych.

Marcin SawickiStudent III roku informatyki. Grafi-ką zajmuje się od niedawna bo odok. 1.5 roku, w chwili obecnej po-znaje Flasha. W swoich obecnychpracach wykorzystuję Photoshopa7. Photolmpact 8. FreeHand MXoraz Flash MX. W przyszłości pla-nuje poznać tajniki tworzenia 3D.

Tomasz ZelekStudent drugiego roku Politechniki Koszalińskiej. Na codzień pracuje m.in. jako grafik, zajmując się głównie two-rzeniem stron WWW. Prowadzi serwis poświęcony Photo-shopowi — www.graffik.pl.

Magdalena CyrczakGrafikąi projektowaniem witryn in-ternetowych zajmuje się od oko-ło 2 lat.Portfolio: www.infranet.pl/magda

Waldemar PrussAutor tutorialu p.t.ia tekstura.

Zardzewia-

Trejderowski TomaszZ wykształcenia metalurg, z zawo-du programista, webdesigner i wy-kładowca, z zamiłowania —pisarz.Pracuje jako wolny strzelec, two-rząc serwisy internetowe, progra-my i aplikacje oraz wykładając nakursach komputerowych.

Lech JaszowskiFotograf, nauczyciel w PolicealnymStudium Fotograficznym, wykła-dowca w firmie informatycznej.

Michał SzpilewskiGrafiką zajmuje się od 5 lat, gównie na potrzeby poligrafii,od 2 lat współtworzy jedną z najdynamiczniej rozwijającychsię galerii internetowych —digart.pl

psiluty/marzec 2004

STYCZEŃ

Temat numeru — WEBDESIGNTworzymy menuDANIEL SODKIEWłCZ

Kolory na WWWTOMASZ TREJDEROWSKI

LayoutMAGDALENA TOMCZYK

Optymalizacja grafikiMICHAŁ SZPILEWSKI

Pozycjonowanie stron WWWMARCIN SAWICKI

Interfejs 3DŁUKASZ FABIAN

Projekt: OkładkaŁUKASZ FABIAN

EFEKTY

NARZĘDZIA

Narzędzia selekcjiTOMASZ ZELEK

Jak zrobić własny pędzelŁUKASZ ZAJĄC

FOTOGRAFIA CYFROWA

Usuwanie efektu moryLECH JASZOWSKI

Fotografia cyfrowaKupujemy aparatDOMINIK MACIASZEK

Efekt termowizjiMARIUSZ DUBIELECKI

Krople wody i nie tylko.MAGDALENA CYRCZAK

MotylRAFAŁ DUKACZEWSKI

KLASYCZNE EFEKTY

Zardzewiała teksturaWALDEMAR PRUSS

luty/marzec

•a i

SYLWETKA

Bartek Kozłowski

NOWOŚCI

Photoshop CS — co nowego?DARIUSZ PASTURCZAK

RECENZJE

Piuginy•- DARIUSZ PASTURCZAK

Książki• MAGDALENA CYRCZAK

PIOTR HORODYŃSKI

TabletyDARIUSZ PASTURCZAK

PIOTR HORODYŃSKI

GALERiA

GaleriaPOWSTAŁA PRZY WSPÓŁPRACY Z

W KonkursROZWIĄZANIE KONKURSU

„POCZTÓWKA Z WAKACJI"

POZNAJEMY PHOTOSHOPA

p* FAQ"' MARCIN WARDĘGA

digąrt.pl

jest wydawany przezSoftware-Wydawnictwo Sp. z o.o.

Redaktor naczelna:Magdalena Cyrczak

design@software.com.pl

Producent:Marta Kurpiewska,

marta@software.com.pl

Opracowanie CD:Magdalena Cyrczak

design@software.com.pl

Skład:Agnieszka Wawrzyniecka,

agaw@software.com.pl

Projekt graficzny okładki:Łukasz Pabian,insane@all.pl

Projekt typograficzny okładki:Marzena Turek-Gaś

marzenat@software. com.pl

Dział reklamy:reklama@software.com.pl

tek: (22)860 18 79

Prenumerata:Marzena Dmowska,

pren@software.com.pltek: (22) 860 17 67

Adres korespondencyjny:Software-Wydawnictwo Sp. z o. o.,

00-190 Warszawa, ul. Lewartowskiego 6e-mail: psd@software.com.pl,

www.psdmag.orgtel. (22) 860-18-81, fax (22) 860-17-71

Wyprodukowano w PolsceDruk: Stella Maris

Redakcja dokfada wszelkich starań, by publikowane w piśmie i natowarzyszą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 ptytywymienia redakcja,Wszystkie znaki firmowe zawarte w piśmie są własnością odpo-wiednich firm i zostały użyte wyłącznie w celach informacyjnych.Deklarowana wysokość nakładu obejmuje również dodruki.Redakcja nie udziela pomocy technicznej w instalowaniui użytkowaniu programów zamieszczonych na płycie CDdostarczonej z pismem.

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

Sprzedaż aktualnych lub archiwalnych numerów pisma po innejcenie niż wydrukowana na okładce — bez zgody wydawcy—jestdziałaniem na jego szkodę i skutkuje odpowiedzialnością sądową.

OĆ)

-o/l

I? Interfejs

?luty/marzec 2004

Opis CD

DEMO

Ultimate Paint v2.83 (Win)Program do obróbki obrazu, którego funkcjonalność moż-na rozszerzyć poprzez pluginy. Umożliwia rysowaniei edycję własnych obrazów, tworzenie stron HTML ze zdję-ciami, przesyłanie grafik e-mailem, robienie zrzutów ekra-nu oraz ustawianie tapet,strona producenta: http://www.ultimatepaint.com

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

PhotoFrame 2.5 (Win/Mac)PhotoFrame pozwala na projektowanie wysokiej jakościramek i obramowań dla Twoich obrazów. Można wybraćramkę z gotowych szablonów lub zrobić własną. Aplika-cja posiada efektz zmiany koloru, trybu mieszania, cienia,płaskorzeźby i wiele innych,strona producenta: http://www.extensis.com

Pro MotionProgram do edycji grafiki - idealny do tworzenia grafiki dogier, 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 zapi-sanych jako PDF (Portable Document Format),strona producenta: http://www.adobe.com

VCW VicMan's Photo Editor 7.2 (Win)Darmowy program do obróbki obrazów o ciekawym i wy-godnym interfejsie użytkownika. Jak każdy tego typu pro-gram, pozwala zeskanować i obrobić zdjęcie. Efekty i fil-try tworzy się przez podanie wzoru matematycznego, któ-ry modyfikuje współrzędne na obrazie,strona producenta: http://www.vicman.net

dfoto KlientProgram dfoto.klient to narzędzie, które ma ułatwić prze-glądanie (a w kolejnych wersjach również zarządzanie)kolekcji fotografii, edycję plików cyfrowych oraz zama-wianie odbitek w serwisie dfoto.pl. Program wyposażonom.in. w funkcję bezstratnego obrotu plików jpg, seryjne-go skalowania fotografii, przycinanie do formatów cyfro-wych i tradycyjnych (możliwość wyboru proporcji kadro-wania 2:3 lub 3:4, korektę barwy, kontrastu, nasycenia.Program obsługuje następujące formaty: JPG, TIF, BMP,PCX, PNG, TGAstrona producenta: http://www.dfoto.pl

PLUGINY

E>ocbra

-owCL

Andrew's plugins (Win)Zestaw przykładowych gradientów, styli, pędzli, wzorków,pluginów i efektów — współdziałających z Photoshopem.strona producenta: http://www.graphicxtras.com

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

Page Curl 1.2Plugin umożliwiający stworzenie efektu zawiniętego rogukartki. Szersza recenzja wewnątrz numeru (str. 29)strona producenta: http://www.avbros.com

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

DODATKI

25 ZDJĘĆ ROYALITY FREE od firmy UCEwww.uce.pl

Filmy instruktażowe i pliki źródłowe pomocne przy wyko-nywaniu ć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

E1

o

I•o

Tworzymy nowy plik PliloNowy... (File>New...) o wymiarach: dłu-gość 990 pikseli i wysokość 1400 pikseli. Następnie wypełnij ca-łą powierzchnie obrazka gradientem linearnym (pionowo) od koloruRGB: [212,227,253] do koloru RGB: [240,245,255].

Niebo w tle

Pobieramy fotografię nieba i nanosimy ją na nasz obrazek, po-przez przeciągnięcie warstwy z pliku jpg na okno z naszą grafiką.Wyrównujemy zdjęcie względem obrazka i dopracowujemy jego ko-lorystykę. Wybieramy z menu Obrazek>Dopasuj>Kolor selektywny(lmage>Adjust>Selective Color), następnie w oknie Kolor selektyw-ny {Selective Color) wybieramy Niebieskości (Blues), ustawiamy su-waki na wartościach CMYK: [+79%][+6%][+14%][+19%]. Zmieniamytryb krycia na Ostre światło (Hard Lighf). Wybieramy gumkę [E],zmieniamy na jeden ze zmiękczonych pędzli i ustawiamy jej rozmiarna 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 warstwierysujemy gradient linearny z dołu od koloru białego do przezroczy-stości, do połowy wysokości.

Świetliste linie

Aby wykonać łuki należy stworzyć zaznaczenie [/W] w postaci piono-wej elipsy, na nowej warstwie wypełnić je jasnym kolorem, następnieprzesunąć 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 nowejwarstwy w zakładce Warstwy (Layers). Począwszy od najwyższejwarstwy każdy łuk poddajemy filtrowi Rozmyciu gaussowskiemuFiltr>Rozmycie gaussowskie (Gaussian Biur (Filter>Blur>GaussianBiur), przy czym każda niższa warstwa powinna mieć większywspółczynnik rozmycia. Pierwsze nałożenie filtru powinno być z pa-rametrem Promień (Radius) 2 piksele. Można zgrupować warstwy

luty/marzec 2004

C

lub też połączyć je w jedną. Następnie powielamy to zgrupowanielub 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 przez3ds max). Nanosimy kule i trawę na obrazek, tak by kula była naniższej warstwie. Ustawiamy trawę, tak by jej dół wychodził z górykuli — z otworu. Gumką należy usunąć niepotrzebny fragmentpodstawy 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ł namkontur zarówno w jednej, jak i drugiej masce. Nanosimy ma-ski na nasz obrazek ustawiając je na cienkich „gałęziach" wśródtraw. Możliwe, że będzie potrzebne obracanie warstw by dopaso-wać je do pozostałych części Edycja>Przekształć>Obróć (Edit>Transform>Rotate). Ciemne oczy wykonamy na nowej warstwie, na-rzędziem Pędzel (Brush) [B] zamalujemy wszystkie oczy koloremRGB: [50,85,129], następnie zmieniamy tryb krycia miedzy warstwa-mi na Mnożenie (Multiply).

Powielenie elementów

Łączymy wszystkie warstwy — maski, ciemne oczy, kulę, tra-wę — w jedną warstwę. Następnie powielamy ją i przenosimy war-stwę poniżej tej z „kwiatem". Przesuwamy ją w prawo i powyżej.Zmniejszamy o około 85% Edycja>Przeksztalć>5kaluj (Edit>Transform>Sca!e) i nanosimy na tę warstwę efekt rozmyciagaussowskiego 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] typumiękkiego na nowej warstwie punktowo będziemy zaznaczać cienie.

Rysowanie motyla

Narzędziem Pędzel [B] o małym przekroju obrysujemy skrzydło mo-tyla. Następnie zewnętrzną część skrzydła zamalowujemy czarnymkolorem, a wewnętrzną ciemnym niebieskim RGB: [38,57,152], Abyuzyskać nierówne rozprowadzenie koloru należy zastosować pędzleo nierównych krawędziach. Na nowej warstwie, jasnym niebieskimRGB: [17,170,245] zamalowujemy część powierzchni, na której jestniebieski (ciemny). Posługując się narzędziem Rozmycie (Smudge)[R] uzyskamy rozmazanie pociągnięcia. Powielamy tę warstwę i na-nosimy na niąfiltr Rozmycie gaussowskie. Zmniejszamy przezro-czystość do 30%. Kolorem RGB: [17,142,222] rysujemy drobne liniepędzlem [8] najlepiej o jak najmniejszym przekroju. Można jeszczeurozmaicić skrzydła poprzez malowanie pędzlami o nieregularnychkońcach. Łączymy warstwy składające się na skrzydła i powielamytę warstwę. Narzędziem Zniekształć — Edycja>Przekszta!ć>Zniekształć (Edit>Transform>Disort) zmieniamy ułożenie drugiego skrzydła.Na kolejnej warstwie dorysowujemy jeszcze główkę i czułki. Warstwyte można połączyć i zmieniać ich kolorystykę za pomocą polece-nia Barwa/Nasycenie (Hue/Saturation) — Obrazek>Dopasuj>Barwa/Nasycenie (lmage>Adjust>Hue/Saturation). ®

di

•o

luty/marzec 2004

WEBDESIGN

15 min

a.film

pliki

TWO

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 393

Rozdzielcza 11

W\ Zachowaj proporcje

0 Metoda POfiownegoprubko^nd Dwu ze cienna V-

Menu, jakie stworzymy, będzie się składać z kilku połączonych ze so-bą i utrzymanych w nowoczesnym stylu przycisków. Po najechaniukursorem na wybrany guzik, zostanie on podświetlony, sam zaś przy-cisk będzie sprawiał wrażenie trójwymiarowego. Aby rozpocząć pracęuruchamiamy program Photoshop.Pierwsze co należy ustalić to wielkość naszego przycisku. Jeżeli niemamy konkretnego pomysłu, wybieramy dość standardowe rozmia-ry 121 na 17 pikseli. Kolejny wybór to kolor tła, w tym przypadku pro-ponuję jasny odcień szarości np. #D4D4D4 (HTML Code). Aby nadaćnaszemu rysunkowi efekt trójwymiarowości należy narysować przygórnej i lewej krawędzi jasną linię o szerokości 1 piksela np. w kolorzeo jasnej barwie: #F3F3F3. Zapisujemy nasz przycisk w wysokiej ja-kości pliku JPG, będzie on służył jako szablon do tworzenia kolejnychklawiszy w menu.

Napisy

Dl

T3

?Iridex- - •• a • • - -i

ń

W zależności od tego z jakich działów składa się nasza strona, two-rzymy odpowiednie napisy na przyciskach. Korzystając z przygotowa-nego wcześniej szablonu nanosimy na kolejne przyciski nazwy dzia-łów. W przedstawionym przykładzie menu będzie się składać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 polece-nia, eleganckimi krojami sąm.in. Tahoma i Verdana. Każdy stworzo-ny przycisk zapisujemy osobno w jednym katalogu, staramy się takżeaby napisy na każdym z rysunków znajdowały się w tej samej odległo-ści od górnej, dolnej i (szczególnie) lewej krawędzi. Przed zapisa-niem obrazka musimy spłaszczyć wszystkie warstwy, poprzez menu:Warstwa>Sptaszcz obrazek (Layer>Flatten Image).

10luty/marzec 2004

Składamy menu

Otwieramy wszystkie utworzone przyciski, a następnie ustalamy najakim tle zostaną one umieszczone. W naszym przykładzie będzie toniewielki prostokąt o wymiarach: 123 na 109 pikseli. Przy przyciskacho wymiarach 121 na 17, po lewej i prawej stronie przycisków będziewystawał 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 naszpodkład odróżniał się od samych guzików najlepiej nadać mu jakiściemniejszy kolor, np. cierny odcień szarości #9C9C9C. Na utworzo-ne tło wklejamy wcześniej stworzone przyciski, ustawiając je,każde w odległości o 1 piksel od krawędzi i następnego przycisku.Aby dokładnie móc rozmieszczać wklejone obiekty, należy maksymal-nie powiększyć (zrobić zbliżenie) naszego obrazka. Po złożeniu cało-ści, zapisujemy menu w osobnym folderze.

Pierwsze cięcie

Wszystkie wersje Photoshopa, począwszy od numeru 5.5, posiada-ją bardzo przydatną dla webmasterów funkcję pozwalającą pociąć ob-razek na mniejsze części i zapisać go w formie kodu HTML z tabelka-mi wypełnionymi naszym pociętym obrazkiem. Przed przystąpieniemdo tego zadania należy upewnić się czy w menu Widok (View) jest za-znaczona opcja Dodatkowe (Extras) (można ją uaktywnić skrótemklawiszowym [Ctrl\+[H\). Następnie, za pomocą narzędzia Odcięcie(Slice) (skrót klawiszowy [K]), dokładnie obramowujemy każdy z przy-cisków. Aby zrobić to jak najdokładniej, należy skorzystać z maksy-malnego powiększenia widoku.

Dokładne wycinanie kolejnych obrazków jest bardzo ważne, tutaj bo-wiem wyznaczamy aktywny obszar naszych przycisków. Niezbędnajest 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(Save)].

Index

Newsy

Książki

Historia

Teksty

Kontakt

HTML

Chwilowo możemy zamknąć Photoshopa, przechodzimy teraz dostworzonego przez Photoshopa pliku *.html (który przed chwilą zapi-sywaliśmy), gdzie znajduje się nasze menu.Photoshop stworzył plik z rozszerzeniem *.html i folder, w którym znaj-duje się nasz pocięty obrazek. Otwieramy teraz ten plik html, za po-mocą zwykłego notatnika lub jakiegoś edytora html (Dreamweaver,Pajączek). Na początku w znaczniku meta zamieniamy kodowaniestrony z charset=windows-1250 na charset=iso-8859-2. Pierwszy po-ważniejszy problem na jaki się natkniemy to wykorzystanie naszychpociętych rysunków jako hiperłączy (linków). Po wpisaniu polecenia:

<a href=""> </a>

pomiędzy wybranym rysunkiem np. tak:

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

Index

Newsy

Książki JHistoria

Teksty

Kontakt

s1

q

I

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

luty/marzec 200411

WEBDESIGN

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

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

type="text/css">

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

Ciąg dalszy pracy z HTML-em

Musimy teraz sprawdzić jakie nazwy posiadają rysunki przedsta-wiające nasze przyciski, które zostały pocięte i wrzucone do folde-ru Obrazki. Aby to zrobić otwieramy nasz plik *.html w przeglądarce,następnie najeżdżamy na każdy z przycisków menu kursorem i kli-kamy na nim prawym przyciskiem myszy, wybieramy z menu opcję„Właściwości". Zapamiętujemy nazwę każdego z przycisków (patrzilustracja), po czym przechodzimy do kodu html i przyporządkowu-jemy każdemu z nich hiperłącza — identycznie jak przedstawiono tow kroku 6.

Możemy teraz sprawdzić poprawność działania naszego dzieław przeglądarce internetowej. Jeżeli występują jakieś problemy w wy-świetlaniu grafiki, najprawdopodobniej w kodzie HTML zrobiliśmy nie-potrzebny odstęp (spację) lub niepoprawnie stworzyliśmy plik *.css.Jeżeli wszystko działa, czas na ożywienie naszego menu.

RoIIover

fÓ)

ra

•aIndex

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ącenazwy poszczególnych działów (te, którym przed chwilą nadawaliśmyhiperłą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 pomy-słu na zmianę wyglądu poszczególnych przycisków, polecam: prze-kreślenie wyrazu, pogrubienie czcionki czy przedstawioną w przykła-dzie zmianę koloru tła (np. na jasno-żółty #EEEEA6). Ważne, żebynie przesadzić z ilością efektów rollover, gdyż wówczas nasza stronamoże zacząć przypominać jarmark. W folderze Obrazki powinny za-tem znaleźć się po dwa GIF-y do każdego hiperłącza: jeden ze sta-nem przycisku przed, a drugi po najechaniu na niego kursorem.

12luty/marzec 2004

d l

Zmiana koloru przycisków

W Photoshopie otwieramy pliki z przyciskami, znajdującymi sięw stworzonym przez program folderze o nazwie Obrazki. Otwieramywybrany przycisk, który został zapisany z rozszerzeniem *.gif, np.menu_03.gif. Format ten (GIF) zajmuje mało miejsca, jednak unie-możliwia on dodawanie do obrazka dodatkowych kolorów. Musimywię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 17pikseli, aby wyeliminować pomyłkę, sprawdzamy wielkość każde-go 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]), za-znaczamy całe szare pole przycisku i kolorujemy je na żółty kolor#EEEEA6).

Pokolorowane przyciski zapisujemy w folderze Obrazki, z dowolnymrozszerzeniem (najlepiej GIF lub JPEG), ale o mówiącej o ich za-wartoś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 href=""

onMouseOver='index.src="Obrazki/index.jpg"'onMouseOut='index.src="Obrazki/menu_03.gif"'><IMG SRC="Obrazki/menu_03.gif" name="index"

WIDTH=121 HEIGHT=17 ALT="index">

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

Wstawiamy menu na stronę

W dokumencie html stworzonym przez program Photoshopa, tabelkaz 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 sko-piować w odpowiednie miejsce kod tabeli znajdującej się pomiędzywspomnianymi powyżej znacznikami.Przy przenoszeniu menu do innego dokumentu, należy pamiętaćo dokonaniu odpowiednich zmian w pliku *.css, do którego odwołujesię dana strona (wpisaniu linijki: IMG {border=0 padding: 0px,Opx, Opx, Opx}). Pełny kod i rysunki przedstawionego w tutorialumenu można znaleźć na dołączonej do pisma płycie CD. •

<a lirei=""onMouseOvei=mdex.src="Obrazki/index.ipg"1

onMouseOut=index.src="Obrazki/!liemi_03.giP"><IMG SRC="Obraz3d/memi_03.gif" name="ujde.VWIDTH=121 HEIOHT=17 ALT=" ">

}lndex

Newsy

KsiążkiHistoria

Teksty

Kontakt

- -ii

Olodi

ICL

luty/marzec 200413

WEBDESIGN

/z. fizycznego punktu widzenia, kolory to sposób w jaki mózg/ zzłowieka interpretuje promieniowanie elektromagnetyczne

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

KOLORY ID Spektrum zakresu długc^, Fal postrzeganych przez oko ludzkiejako poszczególne kolory

Tomasz Trejderowski NA WWW

Ol03

"O

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 BARWJest to rozwiązanie umowne polegające na wygięciu

spektrum kolorów zaprezentowanego na powyższej ilustra-cji, w ten sposób, że czerwień i fiolet stykają się ze sobą.W praktyce koło kolorów jest użyteczne przy wyjaśnianiujakjeden kolorjest powiązany z następnym oraz przy opisiemechanizmów tworzenia nowych kolorów przez mieszaniedwóch i więcej kolorów już istniejących.

KOLORY PODSTAWOWEW życiu codziennym mamy do czynienia z dwoma syste-

mami kolorów.Dla mediów związanych z przedstawianiem obrazu (mo-

nitory, wyświetlacze LCD, telewizory) obowiązuje systemRGB, którego nazwa powstała od pierwszych liter nazwtworzących go kolorów podstawowych, w tym przypadku:czerwonego (red), zielonego (green) i niebieskiego (blue).Jest to tak zwany addytywny system kolorów. Połącze-nie trzech podstawowych kolorów w tym systemie daje ko-lor biały.

W przypadku mediów stronicowych (druk, rysunki, malar-stwo) mamy do czynienia z substraktywnym systemem ko-lorów, którego nazwa CMYK również utworzona została napodstawie nazw kolorów, odpowiednio są to: niebiesko-zie-lony (cyjan), purpurowy (magenta), żółty (yellow) i czarny(blacK, oznaczony przez K, dla odróżnienia od B — używa-nego dla oznaczenia koloru niebieskiego, blue w systemieRGB). Połączenie trzech podstawowych kolorów (oprócz)czarnego w tym systemie, daje w efekcie kolor czarny. Sys-tem CMYK nadaje się lepiej do opisu barwy w druku, gdzierola pochłaniania światła jest realizowana przez farbę dru-karską, natomiast system RGB nadaje się lepiej do wyświe-tlania koloru (np. na monitorze), gdzie światło jest emito-wane.

W tym artykule zajmować się będziemy kolorami na stro-nach WWW, które są wyświetlane na ekranach monitorów,

Koło barw

14 psdluty/marzec 2004

paneli LCD i telewizorów, zatem skupimy się wyłącznie namodelu RGB.

JAK MONITOR WYŚWIETLA KOLORY?Jeśli przyjrzysz się z bliska monitorowi lub telewizorowi

(w tym pierwszym przypadku niezbędne może okazać sięużycie szkła powiększającego) ujrzysz tysiące kolorowych(a dokładnie: czerwonych, zielonych i niebieskich) punkci-ków, pogrupowanych po trzy — po jednym z każdego z wy-mienionych kolorów. Rozmiar tych punkcików oraz ich ścisłeupakowanie powodują, że podczas spoglądania na ekranz normalnej odległości nie rozróżniamy pojedynczych punk-tów, a raczej nasze oko miksuje je, a my widzimy jeden kon-kretny kolor.

Właśnie dzięki tej niedo-v kładności ludzkiego oka, mo-•\ żliwe stało się zaprezento-

I: ; l | wanie bardzo dużej liczby

':• : | i kolorów przy użyciu trzech; | § podstawowych barw oraz

; J odpowiednio dobieranych in-j—/ tensywności świecenia każ-y dej z tych barw. Każdy wspo-

mniany punkt może świecićz 256 różnymi intensywno-ściami (lub 256 poziomami

nasycenia) — od 0, gdzie dany punkt nie świeci wcale, do255 — w którym to przypadku wybrany punkt świeci ze swo-ją maksymalną możliwą intensywnością.

Łatwo jest więc obliczyć, że 256 stanów świecenia każ-dego z trzech kolorów, przemnożone przez siebie, daje licz-bę: 256*256*256=16777216. Czyli, wykorzystując niedo-kładność ludzkiego oka, można (mieszając trzy barwy pod-stawowe) wyświetlić prawie siedemnaście milionów róż-nych kolorów.

Intensywność świecenia (0-255) każdego z trzech pod-stawowych kolorów, podaje się w kolejności takiej jak wy-stępują nazwy tych kolorów w nazwie systemu RGB. Czy-li najpierw podajemy intensywność świecenia koloru czer-wonego, potem zielonego, a na końcu niebieskiego. Im

B Sposób wyświetlaniakolorów przez monitor

mniejsza liczba podana, tym ciemniej dany kolorowy punktświeci. Dla przykładu, układ 0,0,255 oznacza, że punk-ty czerwony i zielony nie świecą wcale, a niebieski świe-ci w maksymalnej swojej intensywności — uzyskujemy ko-lor niebieski. W innym przykładzie, układ 255,255,0 — czylipunkty czerwony i zielony świecą z maksymalną intensyw-nością, a punkt niebieski nie świeci wcale - otrzymujemyczysty żółty kolor. Według analogicznej zasady, nieświece-nie się żadnego z punktów, czyli układ 0,0,0 — daje kolorczarny, a świecenie się wszystkich trzech punktów z mak-symalną intensywnością, czyli układ 255,255,255 — dajekolor biały. A przynajmniej taki kolor postrzega nasze oko,gdyż w rzeczywistości to są nadal trzy podstawowe kolory:czerwony, zielony i niebieski.

Select foreground co tor:

„BEZPIECZNE KOLORYPRZEGLĄDARKI"

Określenie to ukute zostało w okre-sie, kiedy maksimum możliwości kart gra-ficznych i monitorów było wyświetlanie256 kolorów (czasy Windows 3.1 lub na-wet wcześniejsze). Projektanci pierwszejwersji przeglądarek internetowych wyszliz założenia, że ok. 40 kolorów jest uży-wanych do renderowania elementów sys-temowych (okna, klawisze, menu itp.). Poodjęciu tej liczby od 256 pozostało 216 ko-lorów, stanowiących właśnie ową wspo-mnianą paletę bezpiecznych kolorówprzeglądarki.

Czy ma sens ograniczać się więc do sto-sowania na stronach WWW tylko kolorównależących do tej grupy 216 bezpiecznychtakże obecnie, gdy karty graficzne i mo-nitory bez problemów wyświetlają obraz,w 16, 24 czy nawet 32 bitach, składający się z milionów ko-lorów? W tej kwestii zdania są podzielone. Po pierwsze na-leży podkreślić, że mówimy wyłącznie o kolorach elemen-tów niegraficznych (tekst, tło, obramowanie itp.). Obecniezakłada się, że mniej niż 5% użytkowników na całym świe-

Orily Web Lolors

D Bezpieczne kolory

SYSTEM SZESNASTKOWY

Aby móc zapisywać kolory na stronach WWW,niezbędne jest poznanie przynajmniej podstawszesnastkowego systemu liczbowego, gdyż takimwłaśnie operuje się w języku HTML i w arkuszachCSS. Jakkolwiek, co będzie pokazane w dalszej czę-ści artykułu, możliwe jest zapisanie każdego koloruw systemie dziesiętnym, zalecane jest opanowaniei stosowanie wyłącznie systemu szesnastkowego.

W systemie dziesiętnym podstawą jest liczbadziesięć. Każdą liczbę można zapisać w postaci ko-lejnych potęg liczby dziesięć. Przykładowo, liczbę28 można zinterpretować jako dwa-osiem i zapisaćw postaci: 2x101+8x10"=2x10+8x1=20+8=28.

W systemie szesnastkowym reprezentacja i prze-liczanie liczby jest identyczne, z jedyną różnicą, żepodstawą tego systemu jest liczba 16. Aby to osią-gnąć niezbędne jest wprowadzenie dodatkowych„cyfr", które oprócz podstawowych dziesięciu cyfrsystemu dziesiętnego (0—9) uzupełnią też do 15wszystkie podstawowe „cyfry" systemu szesnastko-wego. Mamy więc: A=10, B=11, C=12, D=13, E=14i F - 15. Znaki od Ado F są traktowane jako brakują-ce „cyfry" systemu szesnastkowego.

Wiedząc, że jedyną różnicą jest podstawa syste-mu, bardzo łatwo jest zrozumieć sposób reprezen-tacji i zapisu liczb w tym systemie. Dla analogiczne-go przykładu przedstawionego powyżej, można na-pisać, że 28 m) = 1C(M), co należy rozumieć, iż licz-bie 28 w systemie dziesiętnym odpowiada liczba 1Cw systemie szesnastkowym. A dlaczego? Wszyst-ko staje się jasne, jeśli, zgodnie z przekazaną po-wyżej wiedzą, zinterpretujemy liczbę ICjakojeden-ce i zapiszemy w postaci 1x16'+Cx16"=1x16+Cx1={„cyfrze" C odpowiada liczba 12) = 1x16+12x1=16+12=28.

Łatwo można zauważyć, że w obu systemach ko-lejne cyfry numeruje się rosnącymi potęgami. Czy-li liczbę trzycyfrową w systemie dziesiętnym rozbi-jemy na trzy cyfry, mnożone przez liczbę dziesięćpodniesioną kolejno do potęgi 2 (pierwsza cyfra odlewej), 1 (druga cyfra od lewej) i 0 (trzecia cyfra).W systemie szesnastkowym zrobimy tak samo, tyl-ko, że pierwszą cyfrę z liczby trzycyfrowej przemno-żymy przez 162, drugą przez 16', a trzecią przez 16°.Dla liczby czterocyfrowej, rozbitej na cztery cyfry ko-lejne mnożenia w obu systemach będą przez 10 lub

16 podniesione do potęgi 3, potem 2, 1 i na końcudo potęgi 0.

Łatwo zauważyć, że 255(m = FF(m). Tu od razumamy odpowiedź dlaczego intensywność maksy-malna to właśnie liczba 255. Konstrukcja kompute-rów wymusza stosowanie systemu szesnastkowego(lub dwójkowego) w praktycznie każdym przypad-ku, zamiast systemu dziesiętnego. A liczba 255 tow systemie szesnastkowym największa liczba, jakąmożna zapisać przy użyciu tylko dwóch „cyfr".

Warto jeszcze pamiętać, iż liczby jednocyfro-we (w systemie szesnastkowym) poprzedza się ze-rem -jest to takie jakby uzupełnienie, aby niezależ-nie od tego czy nasycenie danej barwy podstawo-wej jest niskie (np. 1O(mi = A(W:) czy wysokie, zawszebyła ona zapisywana jako liczba dwucyfrowa. Uży-te w artykule przykładowe kolory, byłyby więc zapi-sane w systemie szesnastkowym jako: 0000FF (nie-bieski, co odpowiada modelowi 00, 00, 255 nasyce-nia kolejno składowych czerwonej, zielonej i niebie-skiej) lub FFFFOO (żółty, co odpowiada modelowi255, 255, 00).

?

luty/marzec 200415

WEBDESIGN

cie nadal korzysta ze sprzętu ograniczonego do wyświetla-nia maksymalnie 256 kolorów. To jeden z argumentów prze-mawiający za tym, żeby nie przejmować się już obecnie„bezpiecznymi" kolorami i stosować takie, na jakie w danymprojekcie jest zapotrzebowanie. Ponadto udowodniono,że w ekstremalnych warunkach (na starym i egzotycznymsprzęcie oraz w nietypowej konfiguracji karty graficznej) na-wet „bezpieczne" kolory przestają być bezpieczne i nie sąwyświetlane prawidłowo.

Reasumując, problem nieprawidłowego wyświetlania ko-lorów z większej palety niż 216 wydaje się już być przeszło-ścią. Nie mniej nie można pominąć tego zagadnienia w ar-tykule o kolorach na stronach WWW—jako, że może to byćrozwiązanie niektórych problemów z wyświetlaniem stroninternetowych, zwłaszcza na starszych komputerach.

NAZWY KOLORÓWKilka lat temu, kiedy przeglądarki firmy Netscape były

wiodącymi na rynku, firma ta zdefiniowała 140 angielskichnazw kolorów, które mogły być stosowane zamiast warto-ści szesnastkowych. W wielu przypadkach nazwy te byłybardzo dziwne, jak na przykład „BlanchedAlmond", „Mediu-mAquamarine" czy „MediumGolfenRodYellow". Ten spo-sób określania kolorów nie wszedł do oficjalnych specyfi-kacji języka HTML, ale powinien być prawidłowo interpreto-wany przez większość przeglądarek nawet w najnowszychwersjach.

Obecnie zdecydowanie zaleca się jednak stosowanie wy-łącznie notacji szesnastkowej.

Pytanie więc, po co wspominać jeszcze o tak zamierz-chłym i niezalecanym sposobie określania koloru? Otóż,ma on wymiar wyłącznie komercyjny. Kiedy będziesz pa-rał się tworzeniem serwisów internetowych w sposób profe-sjonalny (zarobkowo), przyjdzie do ciebie klient i powie, żechce mieć odcień w kolorze rdzawo-śliwkowym. Nie licz nato, że powie „poproszę o treść w kolorze #ca459f". Dobrzejest wtedy znać jedną, ustaloną wartość szesnastkową od-powiadającą danemu kolorowi.

MIESZAMY KOLORYW zasadzie, właśnie ta część projektowania interfejsu

graficznego (wyglądu) strony WWW jest najważniejsza i za-razem najtrudniejsza. Właściwy wygląd strony i dobór kolo-rów to sprawa, która „na dzień dobry" przyciąga lub odrzu-ca odwiedzającego.

Trudno jest udzielić właściwej i pełnej odpowiedzi na py-tanie — ile kolorów użyć przy projektowaniu danego serwi-su. Generalnie jednak obowiązuje jedna zasada, iż znacz-nie większe ryzyko niepowodzenia (osiągnięcia brzydkiegoefektu końcowego) jest w przypadku użycia zbyt dużej ilościkolorów niż gdy użyje się zbyt małej ilości kolorów.

Strona zawierająca zbyt dużo kolorów lub zbyt dużo mie-szanin (grup) kolorów jest przede wszystkim nużąca i mę-cząca dla oczu. Ponadto znacznie utrudnia odnalezienieinformacji, której odbiorca poszukuje w naszym serwisie.A nie wolno zapominać, że społeczność internetowa jestspołecznością informacji. Oprawa graficzna, jakkolwiekpiękna, rozbudowana i dopracowana w szczegółach, za-wsze pozostanie tylko dodatkiem do nośnika informacji, ja-kim powinna być nasza strona WWW.

Z drugiej strony, oprawa graficzna zawierająca zbyt ma-ło kolorów może być postrzegana jako nudząca, pusta, czyniedopracowana. Jednakże nie zawsze tak musi być. Cza-sami można uzyskać interesujące wyniki przy zastosowaniu

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

DOBÓR KOLORÓWW tym miejscu mowa już o sytuacji, w której twórca wy-

brał jeden podstawowy kolor, którego będzie używał w ser-wisie. Omówimy kilka metod doboru kolorów uzupełniają-cych do wybranego koloru podstawowego.

Gradient barwJedną z metod jest zasada gradientu barw, czyli dobiera-

nia kolejnych kolorów uzupełniających z grupy kolorów sta-nowiących płynne przejście od wybranego koloru podsta-wowego do czerni lub bieli. Po wybraniu kilku kolorów z tejlinii, dobrym pomysłem jest potraktowanie każdego lub czę-ści z nich operacjami zmiany natężenia, nasycenia czy cie-niowaniem, tak aby uzyskać lekkie odchylenie od podsta-wowej linii przejścia kolorów. Jednakże nawet pomimo za-stosowania tych operacji uzupełniających, należy mieć nauwadze ryzyko uzyskania monotonii kolorów. Dodanie czer-ni lub bieli jako ostatniego z kolorów przejściowych może(aczkolwiek nie musi) poprawić ten efekt.

El Gradienty

Kontrast kolorów N x

Teoria kontrastu proponuje użycie kolorów kontrastują-cych ze sobą (może być to kontrast wartości — różne kolo-ry lub na przykład kontrast natężenia — te same kolory) dlapodkreś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łowodobrane kolory kontrastujące ze sobą, mogą prowadzić douczucia nieporządku i bałaganu. Biel i czerń tworzą ze sobąnajsilniejszy kontrast wśród kolorów El. Kontrast jest głów-nie stosowany do uwypuklenia dużych różnic, np. pomię-dzy tekstem a tłem. Duży kontrast jest przyjemnym efektemdla oka, za to mały kontrast może posłużyć do podkreśleniasubtelnych różnic np. w tle.

El Najsilniejszy kontrast tworzą biel i czerń.

Kontrast nasycenia raczej bywa wykorzystywany do uzy-skania subtelnych efektów graficznych niż do podkreślenialub uwypuklenia czegoś. Na przykład kilka kolorów kontra-stujących przez natężenie, przedstawionych w zestawieniuz szarym tłem może być interpretowany przez ludzki wzrokjak przezroczystość H

16 psdluty/marzec 2004

B Kolory o mniejszym nasyceniu mogą być postrzegane jakoprzezroczyste.

„KOLOROWA ŚLEPOTA"Ostatnią sprawą w aspekcie kolorów, o której należy pa-

miętać, jest tak zwana „kolorowa ślepota" (można znaleźćinne tłumaczenia angielskiego określenia „colour blind-ness"). Niecałe 10% internautów ma lekką wadę wzroku,polegającą na niedostrzeganiu pewnych kolorów zestawio-nych w pewnych kombinacjach. Niewłaściwe zestawieniekoloru tekstu i tła może spowodować, że treść zawarta natwojej stronie WWW będzie dla tych osób praktycznie nie-czytelna lub trudno dostrzegalna.

Przykładowo, zielony tekst na czerwonym tle lub czerwo-ny tekst na niebieskim tle, jest trudny do przeczytania nawetdla osób pozbawionych opisywanej wady, mimo, że oba teukłady kolorów stanowią świetny przykład kontrastu. Nato-miast układy biały-czarny i niebieski-żółty również są kolo-rami kontrastującymi, ale w tym przypadku czarny tekst nabiałym tle lub żółty tekst na niebieskim tle, są łatwe do od-czytania.

D Czarny tekst na białym tle oraz żółty tekst na niebieskim tle sączytelne i przyjemne dla oka.

W zasadzie techniczny aspekt kolorów na stronachWWW został w artykule wyczerpany. Dla osób chcącychuzyskać dodatkowe informacje, polecam książki z zakresuHTML i CSS, szczególnie, gdy oba te zagadnienia są oma-wiane w jednej pozycji, gdyż z reguły autor kładzie wtedynacisk na wspólne wykorzystanie obu oraz na subtelne róż-nice między nimi.

Aspekt artystyczny to temat rzeka i w zasadzie jest to za-gadnienie niewyczerpane. Szukającym bardziej szczegóło-wych czy rozszerzonych informacji, polecam serwis „Colo-urs on the web", http://www.webwhirlers.com/colors/ orazpodobne opracowania internetowe. Nie spotkałem się z po-zycją książkową, która by omawiała czy chociażby poru-szała to zagadnienie. •

Źródła informacji wykorzystane w artykule:

^ ZASTOSOWANIE:• Szyfrowanie poufnych -^,

^ danych i oprogramowania0 Szyfrowanie poczty e-mail~* Zabezpieczenie danych

w razie kradzieży lubwłamania przez InternetSejf Wirtualny: zasada działaniajak sejfu wmurowanego w ścianę*G DATA Software Sp. z o.o.w Szczecinku nie ponosiodpowiedzialności za używa 'programu TopSecret Next G.do ukrywania w komputerachnielegalnego (pirackiego)

Wielka Internetowa Encyklopedia Multimedialna: hasłoCMYK, dostępne pod adresem: http://wiem.onet.pl/wiem/009989.htmlPrzewodnik „Colours on the web",httpJ/www. webwhirlers. com/colors/Tomasz Trejderowski, „Po prostu Internet", WydawnictwoHelion, Gliwice, grudzień 2001 r., ISBN 83-7197-681-X,Tomasz Trejderowski, „Po prostu Internet. Techni-ki zaawansowane". Wydawnictwo Helion, Gliwice, lipiec2002 <.. ISBN 83-7191-670-4.

1 4 6 , 4 0 *

SOFTWARE

Sp. z o.o.ul. 28 Lutego 2

78-400 Szczecinek®+48 94 372-96-50i- +48 94 372-96-59

e-mail: biuro@gdata.plhandel@gdata.pl

http://www.gdata.pl

SZUKAJ NASZYCH PRODUKTÓW W:RENOMOWANYCH SKLEPACH, HURTOWNIACH I HIPERMARKETACH

WEBDESIGN

LAYOUT

NAWIGACJANA STRONIE WWW

Magdalena Tomczyk

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

grafikę do wsparcia czytelnej nawigacji. Elementy graficzne umieszczamy na stronie,

po to, by przykuć uwagę internauty i zatrzymać go na dłużej. Trzeba jednak pamiętać,

że przeładowanie strony elementami graficznymi utrudni wędrowanie po niej i możemy

osiągnąć efekt dokładnie odwrotny — zrazić czytelnika do swojej strony.

Obserwując rozwój internetu w Polsce i na świecie, wyda-je się, iz szybki dostęp do internetu jest nadal kwestią przy-szłości. Większość użytkowników internetu łączy się z nimnadal przez modemy, które osiągają małe prędkości trans-feru danych. Dlatego trzeba zadbać o to, aby nie umieścićzbyt dużej ilości grafiki na stronie, a także o to, by umiesz-czane pliki graficzne miały niewielkie rozmiary. Adobe Pho-toshop oraz inne dostępne obecnie programy do obróbkigrafiki wyposażone są w narzędzia pozwalające zoptymali-zować rozmiar tworzonych plików. Umieszczając elementygraficzne należy kierować się zasadą, iż strona powinna ła-dować się nie dłużej niż minutę przy prędkości 28,8 kb/s.

STANDARDOWE MENUTworząc menu strony należy pamiętać o tym, aby lista

odnośników do podstron ograniczała się do najważniej-szych działów. Wprowadzenie zbyt dużej ilości odnośnikówwprowadzi chaos informacyjny i utrudni internaucie znale-zienie informacji. Obecnie można wyróżnić kilka rodzajówstylów projektowania stron WWW. Jednym z odróżniają-cych te style elementów jest miejsce zamieszczenia me-nu nawigacyjnego.

W stylu tradycyjnym menu umieszcza się po lewej stroniewitryny. Są to przyciski lub łącza tekstowe do najważniej-szych działów. Do tego sposobu nawigacji przyzwyczajo-na jest większość internautów, dlatego też trafiając na stro-nę z tak rozmieszczonym menu — poruszają się po niej in-tuicyjnie, co zdecydowanie ułatwia im odszukanie żądanejinformacji. Za negatywy tego sposobu uważa się małą ory-ginalność projektu, a także dużą odległość, jaką musi poko-nać kursor myszki od paska przewijania po prawej stroniedo menu po lewej.

Alternatywą dla tego wyjściajest umieszczenie menu po pra-wej stronie witryny. Zaleta — bli-żej od paska przewijania do na-wigacji po tej samej stronie. Jed-nak badacze internetu twierdzą,iż wzrok internauty łatwiej wy-szukuje informacje znajdującesię po lewej stronie ekranu kom-putera i szybciej je dostrzega.

Dla obu powyższych sposobów istnieje pewne ryzykopodczas budowania stron opartych na tzw. ramkach, gdzielayout konkretnej strony skonstruowany jest z kilku (zwykledwóch lub trzech) stron wbudowanych w ramki i widocznychjednocześnie dla użytkownika. Otóż, gdy menu będzie za-wierało zbyt długą listę odnośników, wówczas część z nichmoże nie być widoczna przy oglądaniu strony w mniejszejrozdzielczości, a wprowadzenie paska przewijania zepsujeefekt wizualny całej strony.

Jednym z coraz częściej używanych formatów stronyWWW jest format gazetowy, w którym menu nawigacyjnew postaci przycisków umieszcza się u góry strony, zwyklepod bannerem reklamowym, jakąś drobną grafiką ozdobnąi logo firmy. Menu umieszczane na dole witryny jest zwy-kle menu tekstowym i służy głównie ułatwieniu nawigacji,gdy strona przewinięta jest w dół i powrót do górnego me-nu wymaga jej przewinięcia. Jednak można spróbować takskonstruować stronę, aby menu główne znajdowało się nadole strony (jednak wtedy musi pozostać nieruchome, bezmożliwości przewinięcia dolnej części strony), natomiast za-sadnicza część strony powinna mieć możliwość przewija-nia. Można wtedy wkomponować napisy — linki w atrakcyj-ną grafikę, pamiętając jednak o tym, by nie zgubiły się w jejnadmiarze.

Layout niestandardowy — na dole strony

MENU — INNE ROZWIĄZANIAJeśli strona zawiera bardzo dużo odnośników do kolej-

nych działów, wyjściem jest stworzenie tzw. menu kaska-dowego opartego także na elementach graficznych (pro-

•f z zastosowaniem menu po prawej stronie psćluty/marzec 2004

stokątach o wybranej wielkości i kolorach), a „ożywionego"przez dodanie odpowiednich skryptów (pisanych np. w Ja-vaScript). Działanie tego menu podobne jest do działaniaprogramów znanych użytkownikom systemu Windows. Dal-sze odnośniki pozostają ukryte do momentu „najechania"na nie kursorem myszki lub kliknięcia. Kliknięcie lub „naje-chanie" myszką powoduje rozwinięcie się kolejnego paskaz przyciskami.

H Zastosowanie menu kaskadowego

Innym wyjściem dla strony niezawie-rającej zbyt dużej ilości odnośników jestteż stworzenie tzw. pływającego menu, które „spada" w dółwraz z przewijaniem strony w dół lub odwrotnie — podno-si się do góry w momencie powrotu do góry strony. W takimmenu wykorzystujemy zwykłe przyciski graficzne tworzonedo typowych stron WWW. Zaletą tego sposobu jest to, żemenu nawigacyjne zawsze mamy „pod ręką". Jednak wie-lu internautów skarży się na swego rodzaju natrętność ele-mentów, które jakby „przyklejają" się do myszy i śledzą każ-dy ruch użytkownika.

PRZYCISKI NAWIGACYJNEWażnym elementem

ułatwiającym nawigacjęw różnych rodzajach me-nu jest stosowanie przy-cisków, które w momen-cie „najechania" na niekursorem myszki zmie-niają swój kolor lub wy-pukłość.

Aby ułatwić internau-H Różne rodzaje przycisków cie wybór kolejnej pod-

strony z listy przyciskówmenu, można też wyróżnić przycisk strony, na której obec-nie się znajduje (np. zmienić jego kolor, wypukłość lub pod-świetlenie).

ROZPLANOWANIE STRONY - GRAFIKAODDZIELAJĄCA OD SIEBIE DZIAŁY STRON

Jeśli tworzymy witrynę w formacie gazetowym (menuu góry strony, reszta strona podzielona jest na kolumnyi wiersze), wskazane jest oddzielenie od siebie poszczegól-nych działów witryny na danej podstronie. Ułatwi to odwie-dzającym naszą stronę wzrokowe ogarnięcie tematyki stro-ny, a także oddzielenie od siebie poszczególnych działówlub informacji, które chcemy wyszczególnić. Można to zro-bić poprzez umieszczenie nagłówków w poszczególnychkomórkach tabeli. Nagłówki raczej powinny charakteryzo-wać się tym samym stylem (krój pisma, kolorystyka, kształtitd.). Poszczególne komórki tabeli możemy oddzielić od sie-

bie delikatnymi liniami, kropkami, lub czymś co w subtelnysposób oddzieli poszczególne działy.

INNE ELEMENTY GRAFICZNEUŁATWIAJĄCE NAWIGACJĘ

Często stosowanymi elementami graficznymi są ikon-ki — obrazki kojarzące się z określonymi czynnościami,np. kliknięciem ikony koperty otworzymy stronę prowadzą-cą do poczty elektronicznej, znak zapytania przeniesie nasdo systemu pomocy, domek ustawi oglądaną stronę jakostartową, a ikonka folderu doda stronę do ulubionych. Kiedytworzymy stronę wielojęzyczną, to zamiast napisów może-my umieścić ikonkę z flagą danego kraju. Wówczas odwie-dzający nie ma wątpliwości, gdzie znajdzie stronę „mówią-cą" w zrozumiałym dla niego języku. Warto też zrobić od-nośnik z logo firmy umieszczonego na każdej z podstron(może to być mapa obrazu). Ułatwi to internaucie powrót dostrony głównej w dowolnym momencie. Są to rozwiązaniapopularne 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-icyjnie - a o to między innymi chodzi!

NARZĘDZIA PRACYBardzo przydatnym narzędziem do przygotowania grafi-

ki internetowej jest np. Adobe Photoshop. Program ten bar-dzo ułatwia pracę w zakresie przygotowania graficznychelementów strony WWW. Dostępne w nowszych wersjachPhotoshopa narzędzie Odcięcie pozwala „pociąć" przygo-towany projekt na poszczególne obrazki — gotowe elemen-ty strony WWW (np. na przyciski) i jednocześnie zachowaćje w warstwach. Ułatwia to modyfikację pojedynczego ob-razka nawet bardzo złożonej graficznie strony WWW, bezkonieczności modyfikacji pozostałych obrazków — częściskładowych strony. Na dodatek każde odcięcie z tego sa-mego projektu można zapisać jako inny rodzaj pliku: Jpg,.g/7 lub .png. Przy pomocy AdobePhotoshop lub ImageReady z ła-twością przygotujemy podświe-tlane przyciski lub mapy obrazu.

Pamiętajmy o tym, że obrazczęsto oddziałuje bardziej niżsłowo. Wykorzystajmy grafikęna stronach w taki sposób, abyułatwić i uprzyjemnić internau-cie poruszanie się po naszej wi-trynie. Jedną z żelaznych zasadstosowanych przez webmaste-rów powinna być „zasada dwóchklików". Polega ona na tym, iż zapomocą jedynie dwóch kliknięć inter-nauta przenosi się do poszukiwanych in-formacji. Należy też zwrócić uwagę na ko-lorystykę witryny, w tym także na tło. Ciemne tłojest nastrojowe i tajemnicze, jednak podczas czytania więk-szej ilości tekstu bardzo męczy wzrok.

Internet to coraz powszechniejsze medium, którego ob-raz jest nieodłącznym elementem. Obraz na stronachWWW prowadzi za rękę, skraca i ułatwia proces myślowy,który niejako dzieje się poza świadomością odwiedzającegowitrynę. Zestaw zawartych tu wskazówek warto wziąć poduwagę podczas projektowania strony WWW jako pierwszykrok do tworzenia funkcjonalnej strony internetowej. •

i

Mapy obrazuMapa obrazu to nic innego, jakobrazek po którym można klikać,a w zależności ód tego w którymjego obszarze klikniemy — prze-nosi nas do wybranej informacji.Najczęściej stosuje się to rozwią-zanie w mapie będącej mapąkraju, regionu czy świata, dlapokazania punktów w którychdana firma zaistniała, czy teżma swoje przedstawicielstwa,bądź do wyszukania informacjiw obrębie danego regionu.

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

oDlro

OTo.s5

luty/marzec 200419

WEBDESIGN

D Przykłady różnego

stopnia optymalizacji pliku

JPEG

odi

T3

Oryginał

Optymalizacja O Optymalizacja 50 Optymalizacja 100

OPTYMALIZACJAGRAFIKIMichał Szpile wski

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

razkami, które mimo małych rozmiarów i dobrego łącza wgrywały się zbyt długo, czy też

z takimi, których zła jakość sprawiała, iż były one nieczytelne. Można śmiało powiedzieć,

iż przyczyną tego jest zła optymalizacja zapisu lub jej całkowity brak.

20luty/marzec 2004

[Chcąc zdefiniować zagadnienie „optymalizacja zapisu" mo-owiedzieć, iż J e s t t0 takie opracowanie jakości obraz-

I przyczyni się do zmniejszenia jego objętości bezwyraźnej utraty jakości. Proces ten jest na pewno jednymz ważniejszych podczas tworzenia grafiki pod WWW. War-to posiedzieć nad nim trochę dłużej niż kilka minut. Polecamró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Ć PRZYZAPISIE?

Pierwszą rzeczą, którą powinniśmy zająć się podczasoptymalizacji obrazka jest wybór formatu zapisu. Do dyspo-zycji mamy 3 rozszerzenia obsługiwane przez przeglądarkiinternetowe: JPEG, GIF i PNG. Pokrótce opiszę każdy, po-dając jaki rodzaj grafiki najlepiej w nim zapisać.

Zacznę od formatu zdecydowanie najczęściej spotyka-nego — JPEG (Joinł Photographic Experts Group). For-mat ten obsługuje 24-bitowe kolory co pozwala na zacho-wanie szerokiego zakresu kolorów. Przyczynia się to doidealnych przejść tonalnych występujących przykładowow zdjęciach. Kompresja tego formatu polega na wybiór-czym usuwaniu danych. Metodę taką nazywa się strat-ną. Nie jesteśmy w stanie określić, w której części obraz-ka znajduje się przykładowo mały tekst, dla którego utra-ta jakości sprawi, iż stanie się on nieczytelny. Adobe Pho-toshop pozwala nam ustalić stopień optymalizacji w skaliod Odo 100. B

Wadą tego formatu jest na pewno to, iż nie obsługuje onprzezroczystości tła. Obszar przezroczysty zostaje zastą-piony kolorem matowym. Można jednak ustalić własny ko-lor, który zastąpi przeźroczyste piksele (opcja Matte).

Kolejnym formatem, którego użyć możemy tworząc grafi-kę dla potrzeb sieci jest GIF (Graphics Interchange Format).Format ten używa 8-bitowego koloru. Zachowuje on dobrąjakość jeżeli w naszym obrazku znajduje się obszar wypeł-niony jednym kolorem. Idealnie nadaje się on do zapisu lo-gotypów, ikon czy też ilustracji zawierających tekst. Przy je-go pomocy możemy zapisać obraz, który maksymalnie za-wiera 256 kolorów.

Format ten ma wiele zalet. Na pewno największą jest to,iż można go animować (przykładowo przy pomocy ImageReady). Kolejnym jego plusem jest obsługa przezroczysto-ści, krawędzie obrazka wtopione zostają w tło strony B.

Ostatnim formatem jest PNG (Portable Network Graph-ics). Występuje on w 2 wersjach, PNG-8 i PNG-24. Jestto format stosunkowo młody, co sprawia, iż jeszcze niewszystkie przeglądarki internetowe go obsługują. Dlategowarto pomyśleć czy nie lepiej jest zastąpić go innym roz-szerzeniem.

Format PNG-8 możemy śmiało porównać do GIF'a. Po-dobnie obsługuje on 8-bitowy kolor i przezroczystość. Po-siada on jednak bardziej zaawansowane schematy kompre-sji niż GIF co pozwala na zmniejszenie objętości zapisywa-nego obrazka nawet o 30% (w zależności od wzorków ko-lorów). Trzeba tu dodać, że format ten używa kompresjibezstratnej. Oznacza to, że wszystkie dane zostają zacho-wane (jeżeli zapis będzie z 24-bitowego koloru do 8-bitowe-go, jakość obrazka na pewno ulegnie pogorszeniu).

Musimy również pamiętać, że format PNG nie zawszejest lepszy od GIF. Jeżeli nasz obrazek ma małą ilość kolo-rów, prawie zawsze lepszy będzie GIF. Warto więc porów-nać oba te formaty przed zapisem.

Format PNG-24 natomiast obsługuje 24-bitowy kolor po-dobnie jak JPEG. Posiada on jednak wiele dodatkowychcech. Format ten korzysta z kompresji bezstratnej. Pozwalana zapisywanie obrazka, który zawiera zarówno ilustracjejak i tekst. Zachowuje on idealnąostrość szczegółów. Wpły-wa to jednak na objętość pliku, która jest zwykle większa niżw przypadku JPEG.

Obsługa przezroczystości jest na pewno największymwalorem tego formatu. Obsługuje on aż 256 poziomówprzezroczystości co pozwala na idealne wtopienie obraz-ka w tło strony WWW.

O CZYM POWINNIŚMY PAMIĘTAĆ?Jedną z ważniejszych rzeczy przy optymalizacji zapisu

jest plik wyjściowy, który zapisujemy. Powinniśmy pamię-tać, iż zapisując do JPEG-a nasz obraz jest stratny a każ-de jego kolejne zapisanie z kopii przyczynia się do obniże-nie jakości nie powodując zmiany objętości B.

Warto również zwrócić uwagę czy w naszym obrazku wy-stępują przejścia tonalne S. Od tego zależy czy pokusimysię o wybór GIF, PNG-8 czy JPEG lub PNG-24. W przypad-ku pierwszej grupy, czyli formatów, które obsługują mak-symalnie do 256 kolorów przejścia tonalne wyraźnie tracąpłynność co sprawia, iż nasza grafika znacznie traci na ja-kości.

Oryginał Kopia

B Straty jakości przy zapisie z kolejnych kopii pliku

Kopia z kopii

Jeżeli w naszej grafice znajduje się dużo obszarówwypełnionych jednolitym kolorem, optymalnym formatemzapisu będzie GIF bądź PNG-8. Dodatkowo pozwalają namone na obniżenie ilości kolorów w palecie z 256 nawet do1 koloru.

JPEG GIF

B Przejścia tonalne w formacie JPEG i GIF

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

ogi

"•u)O.

?

luty/marzec 200421

WEBDESIGN

CZYM POWINNIŚMY SIĘ KIEROWAĆTWORZĄC GRAFIKĘ DLA WWW?

Optymalizacja grafiki dla Weba to nie tylko sam etapzapisu 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 JPEGpowinniśmy wiedzieć, iż wszelkie rozmycia przyczynią siędo pomniejszenia jego objętości. Warto więc w przypad-ku zdjęć wyselekcjonować obszary mniej ważne i rozmyćgo tak by tworzyły spójną całość S. Dokładniejszy opis tejczynności znajdziesz na CD dodanym do tego numeru.

H Zapis obrazka w formacie JPEG bez rozmycia i z rozmyciem mniej istotnych fragmentów;pozwala to na zmniejszecnie objętości pliku.

Przy projektowaniu grafiki takiej jak przycisk czy tło stro-ny powinniśmy pamiętać by miała ona jak najbardziej po-wtarzany wzorek tzw. pattern B i powierzchnie o stałymkolorze. Musimy również zadbać by ilość kolorów użytychw obrazku była jak najmniejsza (maksymalnie 256 kolo-rów), nadająca się do zapisu w trybie 8-bitowym, czyli GIFlub PNG-8.

Pamiętać powinniśmy również byużyć jak najwięcej powtarzających sięelementów. Pozwoli nam to na wzbo-gacenie naszej grafiki przy pomo-cy jednego pliku, który zostanie wy-świetlony w kilku miejscach. Warto tuużyć plików z przeźroczystymi pikse-lami, które pozwolą na to by nasz ob-razek komponował się bez proble-mów z każdym tłem.

•II Przykładowy wzorek (pattern)

oDlra

"O

DZIELENIE OBRAZKAJednym z etapów, który jest zarazem konieczny, jak i bar-

dzo przydatny, jest podzielenie grafiki. Możemy to zrobićprzy pomocy narzędzia Slice Tool jak i kopiując poszcze-gólne elementy a następnie wklejając je do nowego oknai zapisując.

Odpowiednie podzielenie obrazka daje nam większąkontrolę nad optymalizacją poszczególnych elementów. Niejest to jednak jedyna zaleta, większa ilość elementów in-terfejsu naszej strony może być wgrywana jednocześnie,co znacznie wpływa na całkowity czas załadowania strony.Powinniśmy jednak pamiętać by nie przesadzić z ilością po-ciętych elementów, zbyt duża ilość spowoduje, iż na star-szych komputerach nasza strona będzie się znacznie wol-niej otwierała, przesuwała, ponieważ przeglądarka będziemusiała przeanalizować dodatkowe linijki kodu.

OBJĘTOŚĆ GRAFIKI A HTMLPrzy pomocy umiejętnego korzystania z HTML-a jeste-

śmy w stanie wpłynąć na rozmiar naszej grafiki. Zademon-struję 2 przykłady wykorzystania kodu do pomniejszeniaobjętości naszej grafiki. Więcej przykładów jak również teopisane znajdziesz na płycie CD dołączonej do numeru.

Pierwszym ważnym sposobem na pomniejszenie objęto-ści naszego obrazka jest stworzenie 2 warstwowego przy-cisku B. Możemy to zrobić przy pomocy 2 obrazków o jed-nakowych rozmiarach i tabelki. Pierwszym obrazkiem mu-si być tło przycisku, przykładowo może to być przejście to-nalne (plik w formacie JPEG), drugi obrazek to tekst, któryzostanie naniesiony na przycisk, musi on mieć przeźroczy-ste tło, by widać było przejście tonalne „(plik w formacie GIF). Kolejna czynność _Ąto stworzenie tabelki, w której komórkama wymiary dokładnie takie jak stworzo-ne obrazki. Wystarczy jako jej tło wgraćplik JPEG i wstawić do niej obrazek GIF,który będzie zarazem linkiem. Pozwolinam to na kilkakrotne wykorzystywanietła przycisku, które waży znacznie wię-cej niż sam tekst.

Kolejnym efektem jest stworzenie li-nii ozdobnej. Efekt ten polega na stwo-

Tłojpeg

,PSD

Tekst gif

Gotowy przycisk

H Dwuwarstwowyprzycisk

rżeniu obrazka o dowolnej wysokości (w naszym przypad-ku 5 pikseli) i szerokości równej 1 piksel. Tak utworzony ob-razek możemy wgrać na naszą WWW nadając mu dowolnąszerokość. Uzyskamy w ten sposób linie o dowolnej szero-kości, której rozmiar podczas zapisu nie przekroczy 70 baj-tów (zapisany w formacie GIF) B.

ILE POWINNA. WAŻYĆ GRAFIKA?Wyznaczając granice objętości naszej grafiki powinni-

śmy wziąć pod uwagę kilka kryteriów. Pierwsze i zarazemnajbardziej istotne jest łącze, do którego podpięty jest naszserwer WWW. Im jego przepustowość jest mniejsza tymwięcej starań musimy włożyć w to, by nasza grafika zop-tymalizowana była maksymalnie. Pod uwagę powinniśmyrównież wziąć ilość tekstu i dodatkowych obrazków, któraznajdzie się w części merytorycznej naszej strony.

B Tworzenie linii na zasadzie powielania małego fragmentu.

Chcąc podać wielkość liczbowo powinniśmy zadbać bynasza grafika nie przekroczyła 80 KB. Warto postawić sięwówczas na miejscu osoby, która łączy się z Internetemprzy pomocy zwykłego modemu 56,6 Kbps.

INNE PROGRAMYNie powinniśmy ograniczać się jednak tylko i wyłącznie

do optymalizacji przy pomocy Adobe Photoshop. W interne-cie można znaleźć wiele ciekawych, niejednokrotnie darmo-wych programów do optymalizacji, które dodatkowo pozwo-lą nam odchudzić naszą grafikę. Kilka z nich zamieściliśmyna CD dołączonym do naszego magazynu. •

22 •?s<!luty/marzec 2004

S1

odiraE

13l/lO.

i

Marcin Sawicki

Co zrobić, aby nasza strona nie ginęła w gąsz-

czu stron internetowych? Co zrobić by witryna

trafiała do jak największej ilości internautów?

Można oczywiście wydać krocie na wielką kam-

panię reklamową, która z pewnością przynie-

sie 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ę?

Czy stoimy na przegranej pozycji? Nie! W tym momenciemożejMy, a nawet powinniśmy skorzystać z pozycjonowa-

. Jest to najlepsza, najskuteczniejsza i stosunko-wo tania metoda zwiększenia liczby odwiedzin witryny i jejpromocji w Internecie. Pozycjonowanie polega na takiej mo-dyfikacji kodu witryny internetowej pod kątem wyszukiwarki,aby po wpisaniu słowa bądź wyrażenia, nasza strona byławyświetlana możliwie na jak najwyższym miejscu na liściewyników wyszukiwania.

Jedynym minusem pozycjonowania jest fakt, iż na efek-ty 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 wyszukiwar-ce a jej faktycznemu zaindeksowaniu. Okres ten jest różnydla różnych wyszukiwarek i może trwać od kilku dni do kilkumiesięcy. Pozycjonowanie nie zagwarantuje nam, że naszastrona będzie ukazywała się na danej pozycji w liście wyni-ków niezmiennie. Po kilku miesiącach jest nawet pewne, żenasza strona „spadnie w rankingu". Spowodowane jest totym, że coraz więcej osób i firm korzysta z tej metody pro-mocji witryn. Na szczęście sąto zazwyczaj niewielkie spad-ki i można szybko powrócić na „swoje" miejsce po ponow-nym pozycjonowaniu. Teraz, kiedy ogólne wiadomości ma-my już opanowane przyszedł czas na konkrety...

24 psi

6456487347Ografika z kolekcji Infinity

Wiemy już, że zaprojektowanie i wykonanie witryny inter-netowej (choćby jej jakość stała na najwyższym poziomie)to bynajmniej nie koniec naszej pracy. Aby witryna genero-wała jakikolwiek ruch musimy „powiadomić" o jej istnieniuinternautów. Aby jednak czynność ta przyniosła zamierzo-ne efekty musimy podejść do sprawy szerzej. Musimy po-znać działanie i typy wyszukiwarek, ponieważ to pod ich ką-tem będziemy modyfikować kod stron internetowych.

TYPY WYSZUKIWAREKObecnie mamy w Internecie niezliczoną liczbę wyszuki-

warek, powstają ich tysiące a liczba ta stale wzrasta. Naszczęście dla webmasterów, ruch w Internecie skupia się nakilku największych i najpopularniejszych. Ta ścisła czołów-ka w skład której wchodzą Yahoo, Google, Alta Vista, Inkto-mi, GoTo generują 90% ruchu internetowego pochodzące-go z wyszukiwarek. Pod względem funkcjonalności wyszu-kiwarki możemy podzielić na dwa typy:

Katalogi — są to witryny internetowe, które są filtro-wane przez ludzi przeglądających każdą zgłoszoną stro-nę i decydujących czy dana witryna spełnia kryteria i na-daje się do umieszczenia jej w listingu. Hierarchia katalo-gów jest identyczna jak ta którą znamy z naszych własnychPC-tów, katalogi podzielone są na kategorie i podkatego-rie ułatwiające i umożliwiające łatwe spenetrowanie ba-

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

Wyszukiwarki — te serwisy z kolei programatycznie ak-tualizują swoje bazy danych. Obsługiwane są automatycz-nie przez programy, potocznie nazywane szperaczami,wyszukujące w Internecie zawartość, którą można dodaćdo baz danych wyszukiwarek.

Szperacz podąża w ślad łącz Internetowych i zapisuje da-ne o nowo odkrytych stronach internetowych. Wyszukiwar-ki indeksują strony w oparciu o informacje zawarte w doku-mencie HTML, z tego też powodu witryny oparte w całościna Flashu wymagają większej pomysłowości.

Strony wejściowe tzw. doorway-pages są pierwszą rze-czą, którą należy zmodyfikować w ramach pozycjonowa-nia strony. Strony wejściowe to nic innego jak nasze „stro-ny główne". Z założenia służą one do przyciągania szpera-czy wyszukiwarek i do przekazywania im jak największejilości danych dotyczących naszej witryny. Strony wejściowesą najważniejszym elementem naszej witryny, zarówno zewzględu na szperacze jak i ze względu na internatów, któ-rzy to właśnie na naszą stronę wejściową trafiają najpierw.

Z tego powodu projektant witryny powinien bardzo do-kładnie przemyśleć i zaprojektować wygląd strony wejścio-

Olodi

?luty/marzec 2004

25

WEBDESIGN

WskazówkaZ własnego doświadczenia wiem,że warto jest działać w myśl za-sady mówiącej, że człowiek niejest nieomylny. Warto, więc obok„właściwych" słów kluczowych,wpisać ich błędne formy. Nie gwa-rantuje to wzrostu skutecznościpozycjonowania, ale na pewnonie zaszkodzi.

oó>ra

T3

o.g

g

wej, ponieważ od niej zależeć będzie w dużej mierze sku-teczność pozycjonowania.

Słowa kluczowe — wybór słów kluczowych jest pod-stawą każdego pozycjonowania stron internetowych. Jeże-li w tym momencie popełnimy błąd to w najlepszym wypad-ku nasza strona będzie miała mierną „oglądalność" w naj-gorszym... nie będzie jej miała wcale. Dlatego postaram sięjak najlepiej będę potrafił wyjaśnić w jaki sposób dobieraćoraz o czym należy pamiętać a czego się wystrzegać pod-czas doboru słów kluczowych. W momencie doboru tych-że stów uwagę należy zwrócić na takie zagadnienia jak: po-znanie oferowanych usług, produktów bądź zawartości orazpoznanie grupy docelowej.

Przez poznanie swojej własnej oferty rozumie się język,jakim posługujemy się określając produkty bądź usługi ofe-rowane za pomocą naszej witryny. Często zdarza się bo-wiem, ostatnimi czasy, że ludzie zajmujący się stronami in-ternetowymi, obracając się w swoim własnym środowisku„przesiąkają" owym hermetycznym językiem i jako słowakluczowe wybierają doskonale znane sobie wyrazy bądźwyrażenia, ale zupełnie nieznane i niezrozumiałe dla „zwy-kłego" internauty. Wybór języka potocznego, zrozumiałegodla większości ludzi staje się więc pierwszą rzeczą w dro-dze do poprawnego i skutecznego pozycjonowania strony.

Poznanie grupy docelowej jest nie mniej ważnym czyn-nikiem decydującym o doborze słów kluczowych. Bardzoprosto jest wytłumaczyć ten stan rzeczy: innego słownic-twa używają ludzie młodzi, aktywnie spędzający czas, a in-nego poważni, szanowani, ustatkowani biznesmeni. Inaczejwygląda strona przeznaczona dla męskich odbiorców a in-aczej dla damskiej części wirtualnej społeczności. Inną for-mę przybierze zatem witryna kierowana do 5-10 latków a in-aczej do 15-20 latków.

Po wybraniu słów kluczowych należy przystąpić do opty-malizacji stron dla szperaczy wyszukiwarek. Aby optymali-zacja była naprawdę „optymalna" należy przestrzegać po-niższych zasad:

• pozycja słowa kluczowego w dokumencie HTML —wyszukiwarki wyżej zazwyczaj oceniają strony interne-towe, które swoje słowa kluczowe zawierają w tytulebądź pierwszej linijce tekstu. Pamiętajmy, im bliżej gór-nej części dokumentu HTML, tym lepiej!

• pozycja słowa kluczowego w sekcji — sekcją nazy-wamy obszar pomiędzy znacznikami <TITLE>, <H1>czy <BODY>. Aby słowo kluczowe było oceniane przezszperacza jak najlepiej powinno znajdować się jak naj-bliżej początku w każdej sekcji oraz w możliwie najwięk-szej ich liczbie (sekcji).

Gdyby naszym słowem kluczowym było wyrażenie „czę-ści komputerowe" to w przykładzie pierwszym uzyskałobyono wyższą pozycję niż w przykładzie drugim.

Przykład 1:<TITLE>części komputerowe — najnowsze i naj-

tańsze </TITLE>

Przykład 2:<TITLE>najnowsze i najtańsze części komputerowe</

TITLE>

Następnym elementem, którym się zajmiemy na naszejdrodze do optymalnego przygotowania naszej witryny pod

kątem pozycjonowania jest znacznik <META>. Znacznikite służą do zawierania w nich danych opisujących zawar-tość witryny. <META> opisuje jednak nie tylko zawartośćwitryny, lecz również takie elementy jak autora, generatorpliku HTML czy datę utworzenia pliku. Jeżeli do utworze-nia pliku HTML użyliśmy jakiegoś programu (MS FrontPa-ge, Pajączek) to znacznik <META> będzie zawierał o tyminformacje:

<META name = "GENERATOR" c o n t e n t = " t u _ na-

zwa _programu">

Aby zademonstrować działanie znaczników <META>przedstawię pustą stronę HTML, która posiadać będzieszczegółowy opis jej finalnej wersji za pomocą znaczni-ków <META>.

•-.HTMIT-

< HEAL

<TITLE>F imr jd. ^rona klepu komputerowe-

go </TITLE->

<META htti.-t- { n 7-"" ntent-Type"

content= "test/html; charset=iso-8859-2" >

<META name-"GENERATOR" content- "nazwa _ pro-

gramu genem jacego">

<META name- "Keywords"kontent= "kompute-

ry, części komputerowe, akcesoria komputerowe,

najnowsze, najtańsze">

<META name- "Description" content^ "Czesci

komputerowe - najnowsze i najtańsze">

<META name="Autor" content-"Marcin Sawicki" >

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

<META name="Date" content= "2003-07-07" >

</HEAD>

<BODY>

</BODY>

</HTML>

Jak widać znaczniki <META> umieszczamy w sekcji < H E -A D > , czyli pomiędzy znacznikiem <HEAD> a </HEAD>.

Najważniejsze znaczniki <META> to name = "Keywords"(znacznik słów kluczowych) oraz name="Descr ipt ion"(znacznik opisu strony).

<META> Keywords — tu umieszczamy nasze słowa klu-czowe. Pamiętajmy o zasadach które należy zachować abyoptymalnie dobrać nasze słowa kluczowe (mowa o nich by-ła wcześniej).

<META> Description — służy do opisu zawartości witry-ny (lub strony) internetowej. Jest to tekst który wyświetlanyjest w wynikach wyszukiwarek, dlatego pisząc ten tekst mu-simy pamiętać, że w dużej mierze to od jego jakości zależećbędzie czy internauta kliknie na nasz link czy też przejdziedo następnego. Opis musi być napisany w taki sposób aby

WskazówkaOptymalny opis to taki, który przykuwa uwagę i zachęca doodwiedzin witryny, w jego tekście znajdują się słowa kluczowe,a jego treść jest sensowną kontynuacją tytułu strony.

26luty/marzec 2004

zachęcał do odwiedzin, nie może być za długi (na ogół jestto 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ększeniejakości pozycjonowania strony są komentarze HTML.

Komentarze są to niewielkie teksty umieszczane zazwy-czaj przez programistów w celu opisu kodu oraz ułatwieniajego późniejszego odczytu. Komentarze nie są wyświetla-ne i nie wpływają w żaden sposób na atrakcyjność stronyinternetowej. Niektóre wyszukiwarki mogąje jednak odczy-tywać i w tym upatrujemy nasze możliwości wykorzystaniatej niewielkiej „luki".

Komentarze HTML otwierane są symbolami <! — i za-mykane —>. Pomiędzy tymi symbolami możemy umieścićdowolny tekst. Nie ma żadnych ograniczeń co do długościkomentarzy, ale pamiętajmy o tym, że krótsze, ale rzeczo-we komentarze są o wiele lepsze niż długie zawierająceniewiele przydatnych informacji „wypracowania". Komen-tarze możemy umieszczać w dowolnym miejscu dokumen-tu HTML.

Jako treść komentarza powinniśmy używać jak najwięk-szej ilości słów kluczowych, ale z samymi komentarzaminie należy przesadzać, ich nadmierna ilość może okazaćsię przeszkodą w odczycie kodu i ewentualnej późniejszejz nim pracy. Treścią komentarza powinno być zdanie o ja-snej treści i dobrze sformułowane stylistycznie.

Kolejną techniką przydatną podczas pozycjonowa-nia stron jest zastosowanie tzw. ukrytych pól wejścio-wych. Jest to technika pozwalająca na dodanie większejilości informacji ze słowami kluczowymi do dokumentuHTML. W tym celu wykorzystamy atrybuty name i value.Oto przykład takiego zabiegu:

<INPUT type="Hidden" name="komputer" valu-

e="części komputerowe, akcesoria komputero-

we, komputery, PCty">

Miejsce w których należy umieszczać ukryte pola wej-ściowe to główna część dokumentu (sekcja <BODY>). Ukry-te pola nie są wyświetlane przez wszystkie przeglądar-ki i nie wpływają w żadnym stopniu na wygląd strony bądźjakość kodu. Ostatnim elementem, którego modyfikacjapodnosi jakość pozycjonowania są znaczniki obrazków.A ściślej rzecz biorąc atrybut alt znacznika < I M G > . Znacz-nik <IMG> może „współpracować" z wieloma atrybutami,najbardziej nas interesującym ze względów pozycjonowa-nia stron jest jednak atrybut alt (skrót od angielskiego al-ternative). Atrybut ten określa tekst jaki będzie wyświetlanyw momencie ładowania obrazka lub gdy użytkownik wyłą-czył w swojej przeglądarce możliwość wyświetlania obraz-ków, a dodatkowo jeżeli jesteśmy użytkownikami InternetExplorer tekst ten będzie wyświetlany po najechaniu kurso-rem myszki na obrazek.

Typowy znacznik < I M G > wygląda tak jak ten przedsta-wiony poniżej:

<IMG border="0" src = "czescikomputerowe.jpg"

width="350" height="378">

Znacznik ten zawiera takie informacje jak: wysokość,szerokość, rozmiar obramowania obrazka, a także określasam obrazek przeznaczony do wyświetlenia.

A oto przykład tego samego znacznika z dodanym atry-butem alt:

GooglePolska

D Logo najpopularniejszej wyszukiwarki na świecie: Google

<IMG border="0" src= "czescikomputerowe .jpg"

width="350" height="378" alt="najnowsze i najtań-

sze części komputerowe">

Teraz, gdy nasza witryna jest już gotowa na podbój In-ternetu, gdy jest dopracowana pod każdym względem orazzoptymalizowana pod kątem pozycjonowania nadszedłczas na jej zgłoszenie do wyszukiwarek. Niestety jest tobardzo szeroki temat, który nadawałby się na oddzielny ar-tykuł, dlatego przedstawię tutaj jedynie ogólny zarys zgła-szania witryn bez zagłębiania się w szczegóły.

Z przyczyn praktycznych skupię się teraz tylko na dwóchwyszukiwarkach: Google oraz Onet.pl. Wybór był bardzoprosty, są to bowiem dwie najbardziej popularne wśród pol-skich internatów wyszukiwarki. Nie należy jednak zapomi-nać o Yahoo, Alta Vista, Inktomi, GoTO.com czy Dmoz.org.

Google — jest to jedna z młodszych wyszukiwareka jednocześnie jedna z najbardziej dynamicznie rozwijają-cych się. Stale powiększa swoją własną bazę danych, a jejobecny stan wskazuje na ponad 3 mld zindeksowanychstron! Do indeksowania Google używa szperacza o nazwieGooglebot. Wyszukiwarka ta jest obecnie jedną z najszyb-szych witryn, jeżeli chodzi o indeksowanie nowych stron.Warto wiedzieć, że wielkość liter nie ma tutaj znaczenia dlamechanizmu wyszukiwania. Aby dodać stronę do wyszuki-warki należy udać się na stronę: http://www.google.pl/intl/pl/addurl.html.

Onet.pl — wyszukiwarka Onetu — największego pol-skiego portalu internetowego jest skarbnicą polskich stroninternetowych. Wyszukiwarka ta jest ściśle powiązana z Al-ta Vistą oraz Inktomi. Ważną informacją dla osób pozycjo-nujących strony jest fakt, iż wyszukiwarka Onetu wykorzy-stuje mechanizm zapobiegający „sztucznemu podwyższa-niu wartości strony". Polega to na tym, że szperacz od-czytuje zawartość poszczególnych pól i jeżeli wykryje np.powtarzające się słowa kluczowe to taka witryna znajdziesię na oddalonym miejscu w stosunku do strony zawierają-cej jedno takie słowo. Posługując się naszym przykłademsklepu komputerowego wyglądałoby to mniej więcej tak:

<META name="Keywords" content= "sklep,

sklep, sklep">

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

<META name= "Keywords" content-"sklep kom-

puterowy" >.

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

O)oci)

luty/marzec 200427

01oO)raIo.

POZNAJEMY PHOTOSHOPA

Czym t^k naprawdę są Akcje?Akcje (Actions) są to gotowe zestawy wykonywanych po-

leceń. W rzeczywistości Akcje są plikami tekstowymi. Kie-dy nagrywamy Akcję i zapisujemy ją w folderze, Photoshopkopiuje to (listę wszystkich poleceń w Akcji) i nadaje roz-szerzenie .atn. Kiedy wczytujemy folder z akcjami, Photo-shop wczytuje plik .atn, odtwarzając wszystkie poleceniaw nim zapisane. Akcje można nagrać, klikając w panelu Ak-cje przycisk nagrywania.

Jak wtopić nową warstwę w tło?Należy zaznaczyć naszą warstwę (kliknąć w okienku

Warstwy (Layers) na naszą warstwę trzymając jednocze-śnie wciśnięty przycisk [Ctrl]) albo zaznaczyć, za pomocąnp. Lassa lub innego narzędzia, wybraną część warstwy.Kolejnym krokiem jest wejście w menu górne w Zaznacz/Odwrotność (Select/lnverse), następnie wybranie z tego sa-mego menu Wtapianie (Feather) i podanie wartości, którabędzie nam odpowiadała. Na zakończenie należy wciskaćklawisz [DEL], aż osiągnie się pożądany efekt.

Jak wypełnić zaznaczenie swoim obrazem? (np. efekt li-nii telewizyjnych)

Na początek należy przygotować sobie wzorek linii.W tym celu tworzymy dokument o wymiarach 1 na 4 pikse-le i przezroczystym tle, oczywiście podane wymiary moż-na sobie modyfikować w zależności od potrzeb. Czarnymołówkiem o grubości 1 piksela zamalowujemy dwa górnepiksele. Rysunek zapisujemy jako wzorek poprzez Edycja/Zdefiniuj wzorek (Edit/Define Pattern). Kolejnym krokiemjest zaznaczenie pola, które chcemy wypełnić. Wypełniamyprzez Edycja/Wypełnij, zmieniając w jego ustawieniach Źró-dło (F/7/) na Wzorek (Pattern), a Wzorek (Pattern) na nasz.

W jaki sposób zainstalować nowe filtry i gradienty?Filtry z reguły kopiuje się do katalogu ..Photoshop\Plug-

Ins. Można sobie tam utworzyć również dodatkowe katalo-gi, jeżeli chce się mieć filtry podpisane i posegregowane.Program Photoshop przy starcie przeszukuje ten katalog byznaleźć nowe Pluginy. Niektóre firmy robiące filtry oferująwersje instalacyjne filtrów, więc co za tym idzie należy po-dać ścieżkę dostępu do wyżej opisanego katalogu. Nam po-zostaje tylko użytkować nowe filtry i tworzyć piękne grafiki.Gradienty instaluje się podobnie, należy podać ścieżkę do-stępu do katalogu: ..Photoshop\Presets\Gradients. Po uru-chomieniu 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ć po-

lecenie Barwa/Nasycenie (Hue/Saturation) — [Ctrl]+[U].Następnie suwakami: Barwa (Hue), Nasycenie (Saturation)i Jasność (Brightness) należy zmieniać wartości parame-trów dopóki obrazek nie nabierze pożądanego odcienia.Należy również pamiętać o włączeniu opcji Koloruj (Colori-ze), aby na bieżąco mieć podgląd obrazka.

Jak zrobić własne pluginy?Najprostszą metodą zrobienia nowych filtrów jest użycie

wtyczki FilterFactory z płyty instalacyjnej Photoshopa. Maona tę zaletę, że zapisywane opisy plików mogą być uży-wane na wszystkich platformach. Minusem jest to, że Filter-Factory jest raczej wolny, ograniczony i nie do końca intu-icyjny. Pewne interesujące efekty można także uzyskać zapomocą wbudowanego filtru Custom, a jego pliki ustawieńrównież są przenośne.

Najbardziej elastyczną metodą jest zainstalowanie Pho-toshop Software Developer's Kit (SDK) i samodzielne na-pisanie wtyczek w języku C. Tak napisana wtyczka działaćbędzie tylko na pojedynczej platformie, ale zawsze możnaprzekompilować ją i zrobić wersję również na inne platfor-my. Metoda ta jest najpełniejsza i najszybsza, ale wyma-ga pewnej znajomości programowania w języku C i mani-pulacji obrazu.

Dlaczego nie można otworzyć menu Akcji?Problem, który ma większość użytkowników Photoshopa,

ale jest na niego sposób. Jeżeli w katalogu Photoshopa jestzapisane zbyt dużo akcji, menu Akcji staje się nieaktywne.Rozwiązanie jest proste. Należy przenieść nowo skopiowa-ne Akcje do innego katalogu na komputerze, ale poza kata-log Photoshopa, część Akcji można pozostawić, jeżeli chce-my żeby wczytywane były automatycznie. Menu Akcji po-jawi się i będzie można wczytać nowe Akcje z dowolnegomiejsca w komputerze.

Jak zrobić cień do tekstu lub świecący tekst?Należy w tym celu utworzyć nowy dokument z przezro-

czystym tłem (Transparent) i wpisać tekst na pierwszej war-stwie. Przejść do menu górnego Warstwa/Styl warstwy/Cień (Layer/Layer Style/Drop Shadow lub Inner Shadow).Pojawi się okno z ustawieniami cieniowania, można dowol-nie ustawić cień w zależności od potrzeb, kierunek padaniaświatła, rozproszenie itd.

Jeżeli nie chcemy żeby światło na naszym rysunku by-ło tylko z jednego kierunku należy wyłączyć Oświetle-nie Globalne (Use Global Light). Jeżeli chodzi o świecącytekst należy w pierwszych fazach postępować, jak w przy-padku cieniowania, ale dalej zamiast użycia cienia, używa-my opcji Blask wewnętrzny (Inner Glow) i Blask zewnętrzny(Outer Glow). Kolor światła należy sobie wybrać w zależno-ści od potrzeb.

Jak zaznaczyć cały obraz w jednej warstwie?Do zaznaczenia obrazu w warstwie należy najechać

kursorem na naszą warstwę w oknie Warstwy (Layers),a następnie trzymając przycisk [Ctrl] kliknąć na nią. Moż-na w następnych krokach tworzenia grafiki wykorzystać tozaznaczenie przełączając się na inne warstwy i wypełnić topole np. jakimś kolorem.

Wszystkie skróty klawiaturowe są opisane praktyczniew każdym podręczniku do Photoshopa. Polecam zapozna-nie się choć zjednym z nich.

28luty/marzec 2004

Pluginy — recenzje

Co zrobić, jeżeli nie można uzyskać polskich znakóww niektórych czcionkach np.: w postscriptowych firmyBitstream używanych z Photoshop 6.x lub 7.x CE

Problem wynika z kodowania czcionki. Rozwiązaniemjest dopisanie informacji zmieniających domyślne trakto-wanie czcionek przez Photoshop. Należy odszukać pliklntlFontDB.txt (ulokowany w podkatalogu ..\CESupport) i do-dać odpowiednie wpisy dla wszystkich interesujących nasczcionek. Należy używać nazwy PostScript danej czcionki— podanie złej nazwy spowoduje, że czcionka nadal będzieżle funkcjonowała.

# przykład wpisu dla Photoshop CE dla Windows"FuturaMdPL-Regular" type-wince unicode-0

"FuturaMdPL-Italic" type-wince unicode = 0

"BaskervillePL-Roman" type=wince unicode-0

"BaskervillePL-Italic" type-wince unicode-0

"BaskervillePL-Bold" type-wince unicode = 0

"BaskervillePL-BoldItalic" type-wince unicode = 0

# 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 przypadkuInDesign).

Jak wykadrować zdjęcie?Narzędzie Kadrowanie (Crop) służy do wycinania frag-

mentów obrazka i kadrowania. Wybieramy narzędzie Ka-druj (Crop) i rysujemy nim prostokąt, w którego centrum po-winien być wybrany przez nas fragment zdjęcia. Aby doko-nać kadrowania, po narysowaniu prostokąta wciskamy naklawiaturze przycisk [Enter]. Narzędzie Crop zostało wypo-sażone również w możliwość nadawania proporcji kadrowa-nemu zdjęciu.

Jak narysować linię równoległą lub prostopadłą do kra-wędzi obrazka?

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

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 meto-da gdy chcemy utworzyć nowy, niezbyt skomplikowany rysu-nek. Po utworzeniu rysunku należy zapisać go jako plik z roz-szerzeniem .gil

Drugą możliwościąjestedytowanie już wcześniej utworzo-nego rysunku. W tym celu otwieramy dowolny rysunek i usta-wiamy tryb kolorów obrazka na tryb indeksowany — menuObrazek/Tryb/Kolor Indeksowany (lmage/Mode/lndexed Co-lor). Za pomocą Magicznej różdżki (Magie Wand) lub inne-go narzędzia selekcji, zaznaczamy te fragmenty, które mająbyć przeźroczyste i wciskamy klawisz [Delete]. Dla dokład-niejszego zaznaczenia można powiększyć rysunek posługu-jąc się lupą.

Marcin Wardęga

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

męczyć. Ewentualnie można było wykorzystać jeden ze styli dostępnych w podstawo-

wej palecie Photoshopa. Jednak w tym przypadku efekt nie zawsze będzie zadowala-

jący. Wtedy warto zaopatrzyć się w plugin firmy AV Bros — Puzzle Pro 2.0. Pozwala on

na uzyskanie efektu układanki na każdej wczytanej do Photoshopa ilustracji. Menu jest

proste i czytelne, bez trudu odnajdziemy w nim opcje jak zmiana wielkości kawałków

układanki, ich grubość, rozmiar kolumn i wierszy. Jest także możliwość zmiany kształtu

elementów układanki jaka ma się pojawić na naszej ilustracji. W zakładkach Se/ect oraz

Adjust znajdują się bardziej zaawansowane opcje pozwalające zmienić wygląd końco-

wego efektu. Jest możliwość wypełniania poszczególnych kawałków innymi kolorami

(Color overlay), nadanie efektu płaskorzeźby (Bevel), rozmycia (Motion Biur lub Caus-

sian Biur) czy też całkowitego usunięcia wybranych kawałków.

Plugin Puzzle Pro 2.0 daje nam sporo możliwości, jeśli będziemy szybko i bez proble-

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

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

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

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

producent: AV BROS

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

cza, ż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 kil-

ku kliknięć myszką.

Okno dialogowe jest bardzo proste w obsłudze. Wynika to z faktu, że do tego ty-

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

dowe 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

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

Dariusz Pasturczak

NARZĘDZIA

15 min

film

pliki

Narzędzia

y ; Tomasz Zelek

Każdy program graficzny, zarówno taki,

który przeznaczony jest do tworzenia grafiki

2D/3D czy animacji, posiada paletę będącą

/zbiorem narzędzi, umożliwiających edycję

obrazu. Przyjrzymy się bliżej narzędziom

• selekcji w Photoshopie 7.0, czyli zaznaczaniu

prostokątnemu, eliptycznemu, swobodnemu

oraz różdżce.

Dl

-o

s.5

Podstawowym rodzajem zaznaczenia w Photoshopie jestelekcja prostokątna i owalna. Do jej wykonania służąlarzędzia Zaznaczanie prostokątne (Rectangular Marquee

Tool) oraz Zaznaczanie eliptyczne (Elliptical Marquee Tool).Oba działają na podobnej zasadzie, a jedyną różnicą mię-dzy nimi jest kształt zaznaczenia, które wykonujemy, kli-kając na rysunku i przeciągając kursor myszy w przeciw-legły róg przyszłej selekcji. Po zwolnieniu klawisza myszynaszym oczom ukaże się delikatne obramowanie w posta-ci migającej przerywanej linii. Od tej pory wszelkie zmiany,jakie będziemy wprowadzać na obrazie, ograniczone zosta-ną do zaznaczonego obszaru. Pozwala to na edycję jedy-nie fragmentu rysunku, bez naruszania przy tym jego pozo-stałej części.

Oba narzędzia do zaznaczania posiadają własny pasekz ustawieniami, widoczny u góry ekranu. Po jego lewej stro-nie widzimy cztery ikony, umożliwiające kolejno: tworzenienowej selekcji (New selection), dodawanie selekcji do jużistniejącej (Add to selection), odejmowanie selekcji (Sub-tract from selection) i wyciąganie części wspólnej (Inter-sect with selection). Funkcja Wtapianie (Feather) pozwa-la na zmiękczenie brzegów zaznaczenia, domyślna war-tość 0 pikseli oznacza, że krawędzie zaznaczonego obsza-ru będą wyglądały dokładnie tak, jak obramowanie selekcji.Pozycja Wygładzony (Anti-aliased) odpowiada za wygła-dzanie brzegów zaznaczenia, natomiast Style za jego styl.Dostępne mamy trzy style: Zwykły (Normal) — swobodnezaznaczanie prostokątów i owali, Stałe proporcje boków(Fixed Aspect Ratio) — zaznaczanie z zachowaniem pro-porcji oraz Określona wielkość (Fixed Size) — umożliwiają-ce podanie dokładnych wymiarów selekcji.

Narzędzie Różdżka (Magie Wand Tool) zaznacza obsza-ry o identycznym lub zbliżonym odcieniu barw. Selekcjętworzy się, klikając w wybranym miejscu obrazu, co spo-woduje zaznaczenie wszystkich pikseli posiadających kolorzbliżony do tego, jaki posiadał wskazany punkt. Tolerancjękolorów zmieniamy w opcjach narzędzia — im będzie onawiększa, tym więcej pikseli zostanie zaznaczonych. Jeżelipodamy wartość 0, wówczas na rysunku zaznaczone zosta-ną piksele posiadające dokładnie taki kolor, jak wskazanyprzez nas. Opcja Wygładzony (Anti-aliased) odpowiada zawygładzanie krawędzi selekcji, warto ją zaznaczyć, jeśli niechcemy uzyskać poszarpanych brzegów danego elemen-tu. Ciągły (Continuous) to funkcja pozwalająca zachowaćciągłość zaznaczenia. Oznacza to, że zaznaczone zosta-ną piksele znajdujące się w pobliżu miejsca, które wskaza-liśmy. Jeśli wyłączymy tę opcję, selekcji zostaną poddanewszystkie piksele znajdujące się na całym obrazku. Ostat-nia pozycja Wszystkie warstwy (Use Ali Layerś) pozwala nazaznaczanie wybranych pikseli na wszystkich warstwachjednocześnie.

30luty/jfiarzec 2004

tuai

Zaznaczanie proste

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

Lasso wielokątne

Do zaznaczenia boków kubka wykorzystamy Lasso wielokątne{Polygonal Lasso Tool), umożliwiające wykonywanie swobodnych,wielobocznych zaznaczeń. Selekcję tworzymy klikając w miejscu bę-dącym jej początkiem, i stawiając kolejne punkty, które połączymy li-niami prostymi. Zaznaczenie zawsze kończymy w miejscu, w którymje zaczęliśmy. Aby zaznaczyć boki kubka, klikamy z lewej strony gór-nej selekcji. Robimy to przy wciśniętym klawiszu [Shift], aby nie utra-cić dotychczasowego zaznaczenia. Następnie puszczamy [Shift] i kli-kamy kolejno z lewej i prawej strony dolnej selekcji, potem z prawejstrony 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 miejsca0 największej różnicy barw — działa ono niemal automatycznie, na-sze zadanie ogranicza się do prowadzenia kursora wzdłuż krawę-dzi obiektu. Przystępujemy do zaznaczania trzymając klawisz [Shift]1 klikając w miejscu będącym początkiem ucha. Następnie puszcza-my zarówno [Shift], jak i klawisz myszy, i przesuwamy kursor wzdłużobiektu, obrysowując całe ucho kubka. Lasso magnetyczne dzia-ła podobnie jak wielokątne, ale tu Photoshop stawia punkty automa-tycznie, domyślnie co 10 pikseli. Wartość tę można zmienić na paskuustawień narzędzia.

•Odejmowanie selekcji

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

odiro

73 '

?luty/marzec 2004

31

FOTOGRAFIA CYFROWA

10 min

film

pliki

Usuwanie efektu moryLech Jaszowski

Efektem mory nazywamy występowanie charakterystycznej siatki w postaci szarych punktów

powstałe wskutek interferencji siatek punktów lub linii rastrowych wykonywanej kliszy z liniami

rastra oryginału. Tutonal ten pokaże Wam jak ten nieestetyczny efekt usunąć.

Analiza kolorów

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

Poprawianie ostrości obrazy

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

Kanał zielony i czerwony

o

i"O/l

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

Efekt końcowy

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

32

. L.luty/marzec 2004

FOTOGRAFIACYFROWAKupujemy aparatDominik Maciaszek

/'• I

Fotografia jako technika rejestrowania obrazu ma za sobą blisko150-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ąjakowielkie zagrożenie dla malarstwa, by po czasie przyznać jej doży-wotnie miejsce w panteonie sztuk wysokich. Tamte spory wyga-sły gdy fotografia stała się częścią życia codziennego, głównie zasprawą fotograficznych ilustracji prasowych, ale zastąpiły je noweo dość podobnej naturze. Obecnie jesteśmy świadkami decydują-cego starcia tradycjonalistów, którzy uznają tylko klasyczne tech-niki ciemniowe oraz zwolenników nowoczesnych technologii, któ-rzy zamiast kuwet z chemikaliami wolą monitor komputera. Pierw-si posługują się bardzo zasadnym argumentem, iż cyfrowa reje-stracja obrazu nie dorównuje jakością zapisowi na błonie filmowej.Drudzy mają rację mówiąc, że jest to jakość w zupełności wystar-czająca, a atuty takie jak szybkość pracy, możliwości edycji obrazuczy znacznie tańsza eksploatacja zdecydowanie przeważają. Moż-na się domyślać, że tak jak nie umarło malarstwo, tak fotografia tra-dycyjna będzie zawsze miała wierną grupę miłośników. Ale era foto-grafii cyfrowej już nastała, a jej niebywały rozwój fascynuje każde-go, kto choć trochę interesuje się otaczającym go światem.

Technologia cyfrowa jest odpowiedzią na takie potrzeby jak szyb-ki przekaz danych i natychmiastowa informacja. Klasycznym jużprzykładem jest tu zdjęcie wykonane przez fotoreportera na liniifrontu, które po 5 minutach publikuje się w sieci, a po następnychpięciu jest gotowe do druku wielkonakładowego. Inny przykład topraca w studio reklamowym, gdy kilkunastoosobowa ekipa pracu-je kilka dni nad „tym jednym" ujęciem - szybki podgląd efektów jesttu wręcz zbawienny. Jeszcze bardziej doniosłym faktem od same-go powołania fotografii cyfrowej do życia jest jej udomowienie. Jakpodają statystyki blisko 50% użytkowników aparatów na film dekla-ruje, że w razie usterki wymienią go na sprzęt cyfrowy.

Niezależnie od tego czy zaliczamy się do grona entuzjastówczy przeciwników „cyfry" warto pamiętać, że aparat cyfrowy toprzede wszystkim narzędzie, a sposób jego wykorzystania zależywyłącznie od pomysłowości i warsztatu fotografującego. Możliwośćnatychmiastowego podglądu obrazu na ekranie aparatu to skarb dlapoczątkujących fotoamatorów, ale z drugiej strony, jak mówi starepowiedzenie, nic tak nie motywuje do nauki jak kilka zmarnowanychrolek filmu. Słowem, na wyniki i zadowalające efekty trzeba zapra-cować niezależnie od tego z jakiego sprzętu korzystamy. Nowatechnologia to nowe zagadnienia, nowa terminologia, a dalej, nowa-torskie podejście do tematu i sposobu pracy. W prezentowanych tuartykułach postaramy się przybliżyć tematykę związaną z cyfrowąrejestracją i przetwarzaniem obrazu oraz sztuką fotografii, także tejtradycyjnej, w ogóle.

Parametry aparatów cyfrowych

ROZDZIELCZOŚĆSę w jakim formacie będziesz najczęściej robić od-

bitki Wymagana dla standardowej odbitki rozdzielczość wyno-si 300 jdpLW zatem zdjęcie 2 MP (1600 x 1200) jest optymal-ne dla-odbitki 1 0 x 1 5 cm; zdjęcie z aparatu o rozdzielczości3 MP (2048 x 1536) odpowiada odbitce 13 x 18 cm; rozdziel-czość 4 MP (2272 x 1704) przeznaczona jest do odbitek for-matu 18 x 24cm; 5 MP (2560 x 1920) wystarczy do wydrukówA4. Są to wartości optymalne, ale można dopuścić tu pewnątolerancję, np. z pliku o wymiarach 1600 x 1200 można wyko-nać odbitkę 15x21 cm i mniej wprawny obserwator nie odczu-je różnicy w jakości. Pamiętaj, że nie warto zabijać się o kolej-ny milion pikseli.

OBIEKTYWPrzeć zakupem aparatu należy zwróć uwagę na konstruk-cję obiektywu — najlepiej by była szklana, a w całym ukła-dzie optycznym uwzględniono soczewki asferyczne lub ni-skodyspersyjne. Możliwość szybkiego zbliżenia to największyskarb fotografującego i podstawowe narzędzie pracy. Oceń ja-ki zakres ogniskowych jest Ci potrzebny. Do fotografii we wnę-trzach najlepszy jest obiektyw szerokokątny (np. 28 mm); dozdjęć przyrodniczych przydaje się teleobiektyw (np. 200 mm).Pamiętaj, że ogniskowa większa niż 200mm będzie wymagałazastosowania dobrego statywu. Nie zwracaj uwagi na zoom cy-frowy — skadrować zdjęcie możesz już na komputerze.

ERGONOMIAJeśli lubisz mieć aparat zawsze przy sobie, rozejrzyj się zaczymś dyskretnym. Obecnie nawet miniaturowe konstrukcjeoferują taką samą funkcjonalność jak ich większe odpowiedniki.Jednak pokaźmejsze rozmiary obudowy wiążą się z lepszą sta-bilnością oraz lepszymi parametrami optyki. Większe kompaktylub aparaty lustrzankopodobne (mniejsze niż zwykła lustrzan-ka, ale o podobnym kształcie) nie zmieszczą się w kieszeni, alena pewno zrobisz nimi lepsze zdjęcia. A jeśli jesteś już szczęśli-wym posiadaczem optyki systemowej (kolekcji obiektywów jed-nego producenta) — zainwestuj w lustrzankę cyfrową.

JASNOŚĆDrugi parametr w opisie obiektywu to jego jasność czyli najwięk-szy dostępny otwór przysłony. Inaczej można to wyjaśnić jakostratę światła generowaną przez konstrukcję optyki. Im większaliczba tym jasność gorsza. Np. symbol 35-105 mm F2.8-F4.5oznacza, że jasność przy najszerszym ujęciu (35 mm) wyno-si F2,8, a przy maksymalnym zbliżeniu (105 mm) wynosi F4,5.Ciąg wartości przysłony jest następujący: F1,0 (światło dosko-nałe); F1,4; F2,0; F2,8; F4,0; F5,6; F8.0; F11.0 itd. Każda kolej-na liczba tego ciągu oznacza 2-krotne zaciemnienie w stosun-ku do liczby poprzedniej. Najlepsze (i najdroższe) są obiektywyze stałą jasnością dla całego zakresu ogniskowych.

PODGLĄDW kojTipaktach cyfrowych do podglądu fotografowanego obra-zu można uzywac albo monitora LCD albo wizjera. Ten pierw-szy sposób wtąze się z dużym zużyciem energii. Natomiast ce-lowniki optyczne czyli zwykłe „okienka podglądowe" cierpiąnajczęściej na wadę paralaksy. Wynika ona z tego, że obrazw celowniku nie jest dokładnie tym, który „widzi" aparat przezoko obiektywu. Wybawieniem są tu wizjery elektroniczne (EVFod ang. Electronic Viewfinder), które są pomniejszoną wersjąmonitora i wyświetlają obraz rzeczywisty. Jeśli zdecydujemy sięna takie rozwiązanie zwróćmy uwagę na częstotliwość odświe-żania obrazu — powinna ona nadążać nawet za szybką zmia-ną pozycji aparatu.

TRYBY PRACYAparat powinien być dobrany na wyrost w stosunku do Twoichaktualnych umiejętności. Nie równaj w dół, bo może się szyb-ko okazać, ze kupiłeś model nie posiadający dokładnie tej funk-cji jakiej potrzebujesz. Aparaty dzielą się na takie, które ma-ją lub nie mają manualnych trybów ekspozycji. Chodzi tu o try-by: priorytetu czasu, priorytetu migawki oraz manualny (ręczneustawienie obu parametrów). Modele posiadające wyłącznieprogram Auto oraz kilka programów tematycznych (Portret,Krajobraz itd.) przeznaczone są dla początkujących lub mniejwymagających użytkowników. Sam zdecyduj czy... będziesz donich należeć także pół roku po zakupie aparatu.

CZUŁOŚĆBardzo istotnym, a często omijanym podczas zakupów para-metrem aparatu cyfrowego jest oferowana czułość Zwykłe fil-my mają stałą wrażliwość, np. ISO 100 do zdjęć w słonecznychplenerach lub ISO 400 do zdjęć w pomieszczeniach. Cyfrówkapowinna posiadać opcję zmiany czułości w dowolnym momen-cie, a specyfikacja sprzętu określa maksymalny jej zakres.Dobre aparaty amatorskie dysponują wartościami od ISO 50do ISO 400. Pamiętajmy przy tym, że im większa czułość tymwiększa ziarnistość obrazu, a zatem nie tylko górny parametrjest istotny.

KOREKTAPodczas fotografowania bardzo przydaje się też możliwość ko-rekty parametrów obrazu. Oczywiście zmian można dokonaćtakże na komputerze, ale praktyka pokazuje, że lepsze efek-ty osiągniemy korzystając z ustawień na poziomie aparatu.Najczęściej spotykamy korektę ostrości, nasycenia oraz kon-trastu. Niektóre aparaty posiadają też funkcję zmiany tonacji,a także tryby kolorów (czarno-białe, sepia). Ważne jest też iluskokowa jest korekta (przynajmniej od -1 do +1 dla każdegoparametru. Zaawansowane aparaty oferują także wybór prze-strzeni barwnej (Adobe RGB, sRGB) istotnej przy wykorzysta-niu zdjęć w poligrafii.

odiro

•oU)CL

i

psdluty/marzec 2004

FOTOGRAFIA CYFROWA

ro

"aCL

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 znalezienieokreślonej funkcji nie nastręcza problemów lub czy aparat do-brze leży w dłoni. Zwróć uwagę czy przyciski dobrze reagują naTwoje „polecenia". Oceń możliwość pracy jedną ręką oraz przy-datność do długiej sesji fotograficznej.

JAKOSC OBRAZUJakość obrazu jako najistotniejsza właściwość każdego apa-ratu powinna znaleźć się na samym początku naszego wykła-du. Niestety, trudno jest ocenić ją podczas zakupów, a zatemmusisz poświęcić trochę czasu na lekturę dostępnych testówi oglądanie tzw. sampli. Zwróć wtedy uwagę na wierność od-wzorowania kolorów, poziom nasycenia i kontrastu przy stan-dardowych ustawieniach, płynność przejść tonalnych na płasz-czyznach o mało zróżnicowanej palecie barw, poziom ziarni-stości przy wysokich czułościach oraz ostrość. Możesz pobraćfotografię zrobioną testowanym modelem w pełnej rozdzielczo-ści i wykonać tradycyjną odbitkę. Przekonaj się czy jakość zdję-cia spełnia Twoje oczekiwania.

CENAJeśli wiesz już wszystko na temat swojego wymarzonego apa-ratu cyfrowego... kup skarbonkę. Niezmiennie największą wa-dą zaawansowanego sprzętu jest jego wysoka cena. Obecnieminimalny koszt przyzwoitego aparatu będzie nie mniejszy niż1500 PLN. Jeśli myślisz o czymś poważniejszym przygotuj sięna wydatek rzędu 3000-4000 PLN. Najtańsze lustrzanki cyfro-we są do kupienia już za 5500 PLN, ale przyda się jeszcze do-datkowy obiektyw. Pocieszeniem jest to, że można znaleźćcoraz więcej ofert specjalnych, np. na aparaty wysokiej kla-sy, które są wycofywane z produkcji. Zapoznaj się z warunka-mi gwarancji, dołączanymi akcesoriami i sprawnością sprzętuprzed zakupem. Jeśli poświęcisz na to trochę czasu będzieszcieszyć się swoim aparatem przed długie lata. Przynajmniej doczasu aż zauroczy Cię jakaś nowinka...

ZŁĄCZAPraktycznie wszystkie cyfrówki wyposażone są w złącze USB,za pomocą którego przerzucimy zdjęcia z aparatu do kompute-ra. 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 opisiezłącz aparatu oznacza, że istnieje opcja podłączenia zasilaniasieciowego. Jako miłośnik sportów ekstremalnych powinieneśzwrócić uwagę na to czy złącza aparatu są dobrze osłonięteprzed czynnikami zewnętrznymi. Najlepiej sprawdza się gumo-wa zaślepka przyczepiona na stałe do obudowy.

LAMPA BŁYSKOWAWbudowana lampa błyskowa jest bardzo pożądana. Jeśli cho-dzi o jej parametry to pierwszą sprawą jest jej moc, czyli za-sięg skutecznego świecenia. Powinien on wynosić nie mniej niż2.5 m. Ważną funkcją jest tu korekta mocy błysku czyli możli-wość zmniejszenia lub zwiększenia intensywności świecenia.Sprawdź też czy lampa nie jest ulokowana za blisko obiektywu(ryzyko „czerwonych oczu") lub zbyt blisko boku aparatu (ryzy-ko przysłaniania lampy palcem). Najlepszym rozwiązaniem jestlampa zewnętrzna, ale żeby ją zastosować aparat musi posia-dać stopkę akcesoriów. Skoro jesteś już zaawansowanym fo-tografem sprawdź typ realizowanego systemu pomiaru światłabłyskowego (np. E-TTL) oraz zgodność z dedykowanymi lam-pami.

SZYBKOŚĆNa funkcjonalność aparatu składają się obsługa oraz szybkośćjego działania. Chodzi tu po pierwsze o czas startowy, czyliokres od włączenia aparatu do osiągnięcia pełnej gotowości dopracy. Kolejną sprawąjest szybkość pomiaru ostrości oraz czasopóźnienia migawki (okres między naciśnięciem spustu, a fak-tycznym wyzwoleniem migawki).Warto też zwrócić uwagę na szybkość zapisu zdjęć na kar-cie pamięci — najlepiej wykonać serię i zbadać po jakim cza-sie aparat będzie gotowy do wykonania serii następnej. Każdagrupa sprzętowa oferuje inne osiągi, dlatego najlepiej kiero-wać się własnym odczuciem. Zasada „doboru na wyrost" cią-gle obowiązuje...

ZASILANIEZasilanie uważane jest powszechnie za piętę achillesową fo-tografii cyfrowej. Niemniej w ostatnim czasie producenci robiąwiele by zmienić ten stan rzeczy. Dobrze jeśli zestaw zawieraakumulatory oraz ładowarkę Czasem są to „paluszki" NiMH,ale jeszcze lepiej gdy dostaniemy akumulator litowo-jonowy de-dykowany specjalnie do konkretnego modelu. Gwarantuje ondość spokojną pracę w terenie (nawet do 600 zdjęć). Jeśli w ze-stawie nie ma żadnego źródła zasilania powinniśmy od razu za-inwestować w doładowywane baterie. Do pracy w pomieszcze-niu idealne jest zasilanie sieciowe (oznaczenie DC-IN w opisieaparatu). Zasilacz rzadko jest częścią zestawu i trzeba go do-kupić.

FORMATYZwroc uwagę na formaty zapisu obrazu oraz poziomy kom-presji plików JPEG. Dobrze jeśli są to przynajmniej trzy róż-ne jakości Pozwoli to na sensowne gospodarowanie pamięcią.Niektóre aparaty cyfrowe oferują także zapis bezstratny RAWoraz TIFF, które to przeznaczone są do zaawansowanej edy-cji obrazu.

36luty/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

odiE

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

Powielanie warstw

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

38luty/marzec 2004

/o

.OJ

Obrysowywanie obiektu

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

Wypełnienie

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

Podkład

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

Dopasowywanie kolory

Następnie przechodzimy do ustawień Barwy i Nasycenia. Kolejnowybieramy 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ępniewszystkie nasze ustawienia i całą operację zatwierdzamy przyci-skiem [OK].

Zmiana ostrości

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

O)

T3

luty/marzec 200439

EFEKTY

Termowizja

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

Termowizja cd.

DlOdiraE

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

Kolory

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

Ustawienie jasności

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

Paski

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

40luty/marzec 2004

>s

CD

Zaznaczenie

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

Wzorek

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

Wypełniania wzorkiem

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

Zapisanie pracy

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

Name

• knagi S i n

PresetSees

UMM-1

Gistom

Wtfth 1

' CD— ~ [ ""canoe* )

S1

oro

•D

8.5

[SIL- _ . '

luty/marzec 200441

EFEKTY

(V)

30 min

a.film

Krople wody i nie tylko

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 to800 na 600 pikseli. Ustawiamy kolor narzędzia i tła na domyślny [D],Domyślnie utworzoną warstwę odblokowujemy poprzez dwukrotnekliknięcie na niej myszką i nazywamy ją np. f/o. Następnie na warstwief/o stosujemy filtr Filtr>Rendering>Chmury (Filter>Render>Clouds).Otrzymujemy w ten sposób efekt czarno-białych chmur, który będziestanowić tło dla pozostałych elementów.

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

Ol

Tworzymy obrys

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

Sitko

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

Metalowa powierzchnia

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

Metalowa powierzchnia cd.

Będąc cały czas na warstwie kolol, klikamy na zakładkę Cień we-wnętrzny (Inner Shadow) i Cień (Drop Shadow) i wszystkie opcjepozostawiamy bez zmian. Na koniec wybieramy jeszcze opcjęSatyna (Satin) i ustawiamy Krycie (Opacity) na 20%, pozostałe war-tości pozostawiamy bez zmian. Usuwamy zaznaczenie [Ctrl]+[D].Przechodzimy do warstwy kolo2, wczytujemy selekcję k2 i stosuje-my Filtr>Rendeńng>Chmury (Filter>Render>Clouds), a następnie zapomocą opcji Jasność/Kontrast (Brightness/Contrast) przyciemniamyobraz i zwiększamy kontrast.

Trójwymiarowość

Będąc na warstwie sitko, zaznaczamy cały element i za pomocą na-rzędzia Gradient (Gradient Tool) [G] wypełniamy selekcję gradientemtak jak na rysunku. Następnie wybieramy polecenie Warstwa>Stylwarstwy>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ępniewybieramy polecenie Warstwa>Styl warstwy>Blask wewnętrzny(Layer>Layer Style>lnner Glow) i ustawiamy Wielkość (S/że) na 4.Dodajemy Cień (Drop Shadow), ustawiając Wielkość (Size) na 5,Odległość(Distance) na 5 i Cień wewnętrzny (Inner Shadow), ustawia-jąc Wielkość (Size) na 29.

E?och03

E"OI/)

psc!luty/marzec 2004

43

EFEKTY

Otwory w sitku

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

Cienie i odblaski

m

Następnie ręcznie w pewnych miejscach możemy dodać cienie lubodblaski za pomocą cienkiego pędzla o promieniu 2-3 piksele oraznarzędzia Rozmycie (Biur Tool) [R], którym rozmywamy otrzymanepowierzchnie. Proponuję, aby cienie/odblaski umieszczać na osob-nej warstwie w celu łatwiejszego nanoszenia poprawek. Aby nie-co postarzyć otrzymany zlew, klikamy na warstwę koło 1 i wybieramyFiltr>Szum>Kurz i rysy (Filter>Noise>Dust & Scratches). Ustawiamyopcje: Promień (Radius) na 1, Próg (Threshold) na 20. Czynności tepowtarzamy także dla warstwy sitko.

Kształt kropel

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

Nadajemy kroplom głębię

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

odi

"Oi/)o.S

g

Ostatnie poprawki

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

44luty/marzec 2004

WEBDESIGN

30 min

film

Interfejsw 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

odi03

Tworzymy nowy plik i zaznaczamy owalny obszar narzędziemZaznaczenie eliptyczne {Eliptical Marquee Tool) [M], który wypełniamygradientem liniowym z jasnego do ciemnoszarego. Żeby podkreślićtrójwymiar, na górze na nowej warstwie wypełniamy zaznaczenie gra-dientem radialnym z koloru jaśniejszego niż wcześniejszy do przezro-czystości i podobnie na dole kolorem ciemniejszym od poprzedniegoużytego w pierwszym gradiencie. W tutorialu będziemy używać sty-lu warstwy: Styl 7. Faza i Płaskorzeźba (Styl: Płaskorzeźba, Głębia: 1,Wielkość: 1, Kierunek: Do dołu) (Bevel and Emboss (Style: Emboss,Depth: 1, Size: 1, Direction: Down)).

Kształt interfejsu

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

46luty/marzec 2004

t o

Przyciski

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

Przyciski cd.

Na poszczególnych przyciskach tworzymy odpowiadające im symbo-le (za pomocą narzędzia Zaznaczenie (Marquee) [M] lub Pióro (Pen)[U]). Wypełniamy każdy ze znaczków kolorem RGB: [42,78,128] i nawarstwę 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: OuterBevel, Direction: Down, Depth: 11%, Size: 1)). Teraz symbole spra-wiają wrażenie jakby się zagłębiały w przyciskach.

Wypełnienie

Tworzymy zaznaczenie o średnicy 12 pikseli i wypełniamy je gradien-tem linearnym z góry od koloru RGB: [95,134,56] do koloru RGB:[120,226,17], Zmniejszamy zaznaczenie o 1 piksel Zaznacz>Zmień>Zawężanie i na nowej warstwie wypełniamy je kolorem białym,przesuwamy zaznaczenie o kilka punktów w dół i wycinamy to co jestw zaznaczeniu [Cfr/]+[X]. Na niższą warstwę (zielony owal) nakłada-my Styl: Cień wewnętrzny (Odległość: 0, Wielkość 10) (Inner Shadow(Distance: 0, Size 10)) oraz Faza i Płaskorzeźba (Styl: Faza zewnętrz-na, Głębia: 1%, Wielkość: 2) (Bevel and Emboss (Style: Outer bevel,Depth: 1%, S/że: 2)).

4 4

Przyciski cd.

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

Gradient

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

odira

•o

luty/marzec 200447

WEBDESIGN

Gradient cd.

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

Podkład

o.

s

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

Podkład cd.

Ze środka krzyża zaznaczamy obszar o średnicy 200 pikseli i wypeł-niamy na nowej warstwie gradientem od jasnego do ciemnego szare-go. Zaznaczamy niebieską warstwę ściętą z lewej i prawej strony,z menu wybieramy Zaznacz>Zmień>Rozszerzanie (Select>Modify>Expand (1 piksel)). Na nowej warstwie wypełniamy zaznaczenie ciem-nym szarym, zmniejszamy o 1 piksel i wycinamy (krok 2). Nakładamyna 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ątwypełniony gradientem linearnym od koloru RGB: [92,156,235] do ko-loru RGB: [7,81,148].

Sil Podkład cd.

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

Podkład cd.

Zaznaczamy z [Ctrl] warstwę, gdzie wystają z lewej i z prawej stro-ny jej szare fragmenty, zwiększamy zaznaczenie o 2 piksele i wy-pełniamy ciemnym kolorem. Nakładamy na warstwę styl Fazai 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 psdluty/marzec 2004

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

Wyświetlacz

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

Gradient

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

Tworzymy deseń

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

Ostatnie poprawki

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

OlodiraE"a

luty/marzec 200449

EFEKTY

30 min

a.film

Rafał Dukaczewski

Szukając zdjęć mających wzbogacić nasz projekt, często nie zastanawiamy się, że

w czasie, który na to poświęciliśmy, sami moglibyśmy stworzyć taki element. Nie tylko podobny,

ale wręcz dokładnie taki, jakiego szukamy, łatwy do późniejszego przetwarzania i co ważne —- za

darmo. Czasami zapominamy, jak elastycznymi i wygodnymi narzędziami dysponuje Photoshop.

Przy wykorzystaniu jego filtrów, mieszania warstw i stylów warstw, okazuje się, że nasz wkład

w proces twórczy może być całkiem niewielki.

Rysujemy skrzydło motyla

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

odi

T3

Rysujemy wzór na skrzydle

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

50luty/marzec 2004

Rysowanie żyłek na skrzydle

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

Tworzenie nowej warstwy

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

Powierzchnia skrzydła

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

Tekstura powierzchni skrzydła

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

C

Ozdabianie skrzydła

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

DlOdi

"Oo.

luty/marzec 200451

EFEKTY

iii Tworzymy drugie skrzydło

Olodiro

-ao.3S

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

odwłok i oczy

Włączamy narzędzie Zaznaczanie eliptyczne (Eliptical Marquee)i nad poprzednimi warstwami tworzymy nową warstwę o nazwie od-włok. Tworzymy zaznaczenie w pożądanych przez nas proporcjachi kształcie, wypełniamy je czarnym kolorem i korygujemy utworzo-ny kształt. Tworzymy następną warstwę oczy. Rysujemy kształt okaowalnym zaznaczeniem i wypełniamy radialnym gradientem utwo-rzonym z barw: #CCC790, #5A5540. Podobnie tworzymy drugieoko. Możemy nałożyć na nie teksturę Warstwa >Styl warstwy>Na-łożenie wzorka (Layer>Layer Style> Pattern Overlay). Wybieramynp. wzór Cells z palety Wzorki (Patterns) w trybie mieszania jakoNakładka (Overlay) i skali 9%.

gm Rysyjemy detale i łączymy części

m

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

Rysujemy czułki i odnóża

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

Tworzymy cień

Wszystkie elementy odwłoka kopiujemy na nową warstwę i ustawia-my 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>Trans-form>Distort), tak aby był naturalny. Na warstwie ze skrzydłami apli-kujemy cień poleceniem Warstwa>Styl warstwy>Cień (Layer>LayerStyle>Drop Shadow), dostosowując go do tonu cienia odwłoka. ®

52luty/marzec 2004

i

\Jl

Przedstawiamy Warn sylwetkę Bartka Kozłowskiego

— znakomitego grafika i projektanta.

Jakie są Twoje najważniejsze osiągnięciai nagrody?

Najważniejszą nagrodą dla mnie jest własna aprobata do tego co projektuję. Lubię piękne rzeczy i nicinnego nie sprawia mi satysfakcji jak otaczanie sięnimi i wyobrażenia o tym co, jeszcze mogę zreali-zować. Cieszy mnie, że pomogłem wielu ludziomwystartować w dobrym kierunku :)

Jak wygląda Twoje miejsce pracy? Jakiegosprzętu i jakich programów używasz? W jakim,programie najchętniej pracujesz?

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

Czym charakteryzują się Twoje prace, co jeodróżnia od innych?

To że wyszły spod mojej ręki. Przedstawiająpunkt widzenia, moją perspektywę i kolorystykę.W projektowaniu najtrudniejszą rzeczą jest dla mnieskompletowanie perfekcyjnych detali „klocków" całejukładanki tak aby sprostały moim wyobrażeniom.Materia to oporna, bo jeśli potrzebujesz zabójczogroźnej wieży rodem z Tolkiena to jak jej nie wyren-derujesz lub nie narysujesz to jej nie masz! Czasemoddaję prace nad „klockami" innym bardziej utalen-towanym w różnych technikach graficznych oso-

bom i staram się ich naprowadzić na moją wizjęrysowanego/malowanego detalu. Nie mam komplek-su omnibusa i wiem, że przez to całość jest bardzoatrakcyjna, bo moi „klockarze" wkładają w to tyle sercaile się da. Ja za to „pan i władca" łaskawie to przetwo-rzę, pokoloruję i będzie ładnie (śmiech). Druga spra-wa, która mnie drażni to brak kontroli nad tym co jużjest dobrze a co nie. Czasem za długo wpatruję się wjeden projekt i zmieniam coś co powinno pozostać nie-tknięte. Podziwiam artystów analityków, którzy posia-dają całość projektu od początku w głowie i wiedząkiedy przestać! Ja ciągle coś zmieniam, wywracam,jestem zadowolony potem już nie i powiem Warn cośw sekrecie... wcale nie boję się do tego przyznać!Tworzenie podczas tworzenia — bardzo sympatycz-ny proces! Jedynym jego wrogiem jest czas, hekto-litry kawy potrzebne do zakończenia zadania i zwią-zane przez klienta ręce... Ale kto by się tam przejmo-wał takimi drobiazgami:) Aha, byłbym zapomniał, pra-cuję w nocy, tylko wtedy potrafię się skupić, nawet jakzaciemnię sobie pomieszczenie w dzień, rytm miastai jego „bicie" nie pozwalają pracować. No i jeszcze tetelefony, dzwonią i dzwonią...

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

Opowiem Warn jak projektowałem kartę plastikowądla banku. Założenia były takie: „wie Pan... coś takie-go... lekkiego, ładnego... spójnego" Dobre prawda?Miał być detal który kojarzy się z transportacją, prze-wozem, eksportem/importem. Uznałem, że wszystkojest bardzo oklepane i przypomniałem sobie muchętaką małą owocówkę, którą widziałem latem lecącąbeztrosko na ...dmuchawcu! I to było olśnienie: dmu-chawce! Super transport za darmochę! Może czasemnie zgodnie z rozkładem jazdy i kierunkiem, ale chy-ba jest to dosyć lekkie i ładne. Nabazgrałem na kartcepapieru jak to widzę, pod jakim kątem fotka czy z bli-ska czy z daleka, Adam zrobił zdjęcie dmuchawca (cy-frakiem FujiS2 pro) pogłaskaliśmy obrazek w Photo-shopie, dopracowaliśmy liternictwo i kolorystykę (uda-ło się przekonać klienta, że już czas trochę „odjechać"od zieleni) i tadaaaa... karta jak się patrzy! Nie opo-wiem wam o kilku wątkach pobocznych, wokół którychsię kręciłem zanim na to wpadłem. Chodziły mi pogłowie jakieś „globusy", „statki", „karawany" ale szó-sty zmysł mówił mi: „jeszcze trochę wysiłku kolego...rusz mózgownicą!"

B Co lub kto jest dla Ciebie inspiracją?

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

B Czym się zajmujesz po godzinach?

Chronicznym poprawianiem samopoczucia. Jeżdżęna desce, gram w koszykówkę. Ciągle słucham muzy-ki, bez niej jestem kaleki (Seal, Soyka, polski HH (po-chodzę z Kielc) Faith No Morę, Kosheen — strasznymam rozrzut:)

Rozmawiała Magdalena Cyrczak

W: BANK BFH 4H&1 B A N K P B K '

Bank Przemystowo-Handlowy PBK SA

PROSFERAKraków

KLUB HANDLU ZAGRANICZNEGO

BARTEK KOZŁOWSKIUrodzony w 1974 roku, grafik,projektant, wykładowca.Obecnie współwłaściciel Ośrod-ka Szkoleniowego i Studia Pro-jektowego PROSFERA w Kra-kowie. Uczy obsługi aplikacjigraficznych i zasad prepressu.Projektuje w duecie ze swoimprzyjacielem Krzysztofem Stan-kiewiczem.

ora

/l

styczeń 200455

NOWOŚCI

INFORMACJAproducent: Adobecena:649.00 $ (petna wersja)169.00$(upgradezPS7.0)

odiro

"Oo.gg

dobę podobnie jak inni producenci oprogramowania przy-zwyczaili nas, że wraz z nowymi wersjami ich programów

'trzymujemy większe możliwości lub niekiedy zupełnie no-we programy. Nie inaczej jest w przypadku najnowszej od-słony sztandarowej aplikacji Photoshop. Zamiast cyferki 8 wtytule jest skrót CS (Creative Suitę). Czy to nowa moda nanazwy, czy też początek nowej serii produktów? Nie jest toważne, liczą się możliwości programu.

Na początek niemiła wiadomość dla użytkowników star-szych systemów operacyjnych. Photoshop CS nie urucho-mi się na systemach innych niż Windows 2000 wraz z Servi-ce Pack 3 lub Windows XP z Service Packi. Niestety oso-by pracujące na Windows 98 lub innym, nie będącym XPlub 2000 nie będą miały możliwości nawet zainstalowaniaPhotoshop CS. Jest to lekko bolesne, ale może w ten spo-sób Adobe próbuje nakłonić swych klientów do przejścia nanowsze systemy operacyjne?

Wymagania systemowe nie zmieniły się zbytnio. Wzrosłajedynie pamięciożerność, nieznacznie ale jednak.

CO NOWEGO?Zmian w stosunku do wersji 7.0 jest sporo, choć jest to ra-

czej ewolucja niż rewolucja. Dodano możliwość przekonfi-gurowania skrótów klawiszowych, choć zasadniczo więk-szość osób używa podstawowych skrótów.

Rozbudowano menu poszczególnych filtrów,poprzez dodanie galerii. Teraz nie jeste-śmy zmuszeni do sprawdzania,jak będzie wyglądałefekt wybrane-

Po otwarciu okna dialogowego, automatycznie pojawia sięmini galeria, w której na jednym z podstawowych obrazkówsą pokazane najważniejsze warianty danego efektu —jestto spore ułatwienie. Ponadto części filtrów można użyć nailustracjach zapisanych w trybie 48 bitowego koloru. Doszłytakże nowe filtry fotograficzne.

Kilka zmian zaszło w obsłudze warstw (Layers). Pho-toshop CS daje nam możliwość zarządzania nimi (LayersCompś). W Praktyce oznacza to, że w jednym pliku może-my mieć zachowanych kilka wariantów jednej grafiki i swo-bodnie zmieniać je przy pomocy kilku kliknięć myszką. Takąmożliwość mieliśmy już w poprzednich wersjach, jednak tu-taj zostało to dopracowane niemalże do perfekcji. Ponadtododano podwarstwy, które jeszcze bardziej powinny ułatwićtworzenie skomplikowanych i wielowarstwowych projektów.A skoro jesteśmy przy projektach to warto zaznaczyć o do-daniu obsługi ogromnych formatów potrzebnych np. doprodukcji billboardów. W PS CS mamy możli-wość stworzenia ilustracji nawet o wy-miarach 300,000 na 300,000 pik-seli z 56 kanałami.

Jest także mo-żliwość

56

tworze-nia oraz edy-

towania tekstu nakrzywych oraz kształtach.

W tym celu Photoshop wykorzystu-je moduł z Ilustratora, co pozwala na szybki,

bezbolesny eksport do tego programu.

PHOTOSHOP DLA FILMOWCÓW?Wersja CS pozwala na tworzenie obrazów ze ścieżką

czasu (time linę) oraz obsługuje niekwadratowe piksele (jakwiadomo piksele na ekranie monitora są „kwadratowe", na-tomiast na ekranie telewizora „okrągłe"). Dzięki czemu mo-żemy przygotować niezbędne elementy graficzne i od razueksportować je do programów wideo z rodziny Adobe czyliPremierę lub After Effects, bez potrzeby konwersji. Jest tak-że możliwość eksportowania poszczególnych warstw do pli-ków, a następnie do bardziej przyjaznych plików wideo.

IMAGEREADY CSWarto również przyjrzeć się młodszemu bratu czyli Ima-

geReady CS.Podobnie jak w Photoshopie, tak i w nim zaszły zmia-

ny. Ulepszono edycje drobnych elementów, jak przyciski

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 monitorilorowy z możliwością pracy z rozdzielczością 1024x768 lub większą

Napęd CD-ROM

luty/marzec 2004

3

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

Jednak najważniejszą i zarazem najciekawszą nowościąImageReady CS jest możliwość eksportu plików do forma-tu Flasha (SWF). Ponieważ Flash nie obsługuje importu wie-lowarstwowych plików PSD, przeniesienie pliku Phqtosho-pa posiadającego kilkanaście warstw może zająć godziny.Dzięki ImageReady teraz taka operacja zajmie co najmniejkilka minut i kliknięć myszką. Wystarczy wyeksportować da-ny plik PSD do SWF, a następnie wczytać go w programieFlash. Eksportowane projekty zachowują wszystkie swojewartości oraz ustawienia, jednak są odpowiednio konwer-towane, aby można było jak najwygodniej pracować na nichwe Flashu.

Ponadto ImageReady z dopiskiem CS pozwala na do-dawanie plików SWF (głównie wariacji tekstowych) do pli-ków HTML (a nawet XHTML), które sam tworzy. Uspraw-niono możliwości cięcia grafiki na potrzeby stron www. Te-raz jest możliwość ukrycia konkretnych wycinków, dziękitemu jeśli nie ma potrzeby to nie zostaną one zawarte w ko-dzie HTML.

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

Sk Galeria filtrów

PODSUMOWANIENowy Photoshop jest godnym następcą wersji 7.0. Posia-

da całkiem sporo przydatnych zmian i nowych możliwości.O kilku z nich nie wspomniałem w tym artykule, jak choćbyo rozbudowanej przeglądarce plików, czy też o dzieleniu sięswoimi projektami z innymi grafikami przy pomocy prezenta-cji w postaci plików PDF.

Jedynym minusem nowej wersji jest fakt, że posiada-cze starszych systemów nie będą mogli go przetestować.

Konfigurowalne skróty klawiaturowe

Rozbudowane o edycję i przeszukiwanie moduł metadanych XMP

Możliwość pracy z obrazem pełnoekranowym

Paleta histogramów

Przetwarzanie wsadowe plików

Plik z historią pracy nad dokumentem

Galeria filtrów

Rozszerzona obsługa skryptów

Korekcja świateł i cieni

Kamera RAW

Filtry pracujące w trybie 48 bitowego koloru

Automatyczne kadrowanie

Filtry fotograficzne

Rozmycie soczewkowe

Automatyczne łączenie zdjęć

Zarządzanie warstwami (Layer Comps)

Tekst na ścieżce

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

i Cięcie grafiki w ImageReady CS

oó>mE

l/>O.

5

B Ulepszona przeglądarka plików w PS CS

luty/marzec 200457

KLASYCZNE EFEKTY

15 min

film

pliki TEKSTURAWaldemar Pruss

Photoshop to potężne narzędzie do tworzenia grafiki. Jest on także nieoceniony dla projektantów

3D. Dzięki niemu mogą tworzyć realistyczne tekstury, które później nałożą na stworzone obiekty

i modele. W poniższym tutorialu zaprezentujemy, w jaki sposób można stworzyć teksturę zardze-

wiałej blachy przy pomocy zdjęć zrobionych aparatem cyfrowym (są one zamieszczone na płycie

CD dołączonej do magazynu). Oczywiście nie trzeba wykorzystywać tych samych zdjęć — można

użyć własnych.

. - U J

Tworzymy tło

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

Duplikowanie

OloOlra

•aa.Sg

Po utworzeniu tła duplikujemy warstwę ze zdjęciem, które uprzed-nio wczytaliśmy. Możemy to zrobić za pomocą kombinacji klawi-szy [Ctrl]+[J], albo klikając prawym przyciskiem myszy na war-stwie z blachą, a z menu, które się ukaże wybieramy Powiel war-stwę (Duplicate Layer). Musimy zduplikowane zdjęcie wyostrzyć.Wybieramy z menu u góry Obrazek>Dopasuj>Jasność/Kontrast(lmage>Adjustments>Brightness/Contrast). W oknie, które się poja-wi, Jasność (Brightness) ustawiamy na +30 i Kontrast (Contrast) usta-wiamy też na +30.

Wycinanie

Następnie z przybornika narzędzi wybieramy narzędzie Lasso i za je-go pomocą na powielonej warstwie rysujemy zaznaczenie, tak jakwidać na rysunku, albo inne dowolne — według naszego uznania.Następnie wciskamy przycisk [Delete], co spowoduje wycięcie zazna-czenia i utworzy dziurę, nad która będziemy pracować w następnymkroku. Dzięki temu zabiegowi nasza grafika będzie wyglądała bardziejrealistycznie.

N

wm Pęknięcie

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

Powierzchnia cz. 1

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

Powierzchnia cz. 2

W celu polepszenia i zbliżenia się do jak najlepszego efektu, otwie-ramy zdjęcie o nazwie blach.tifi również przenosimy je do naszegodokumentu. Następnie — tak jak w poprzednim kroku — ustawiamykrycie, ale tym razem jako Mnożenie (Multiply). Tym razem teksturazrobiła się ciemniejsza i nie wygląda zbyt ładnie. Poprawimy to w na-stępnych krokach.

Korekcja kolorów

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

Wyostrzanie

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

O

So6)ra

•o

luty/marzec 200459

5 min

film

pliki

NARZĘDZIA

Jak zrobić własnŁukasz Zając

Czy nie potrzebujesz pędzelka o innym niż domyślny wzorze? Na pewno

niestandardowy kształt końcówki ~ inny niż oferuje program Adobe "^lotoshop.

W tym tutonalu dowiesz się jak samemu wykonać własny pędzel.

Ci niezbędny

Tworzenie wzoru pędzla

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

Łączenie warstw

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

Testowanie pędzla

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

Bodi

"O

— ! 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 wybiera-my Wczytaj Pędzle (Load Brushes) i szukamy pliku Pędzelek 2, usta-wiamy Główną Średnicę (Master Diameter) na 55 pikseli. Na pa-sku opcji narzędzi klikamy na Pędzle. Zaznaczamy pole Dynamikakształtu (Shape Dynamics), w opcjach wybieramy Wahanie rozmia-ru (Size Jitter), Kontrola: Zanik (Control: Fade) — ustawiamy na 40.Zaznaczamy pole Inne dynamiki (Other Dynamics), Wahanie krycia(Opacity Jitter) ustawiamy na 45%, Kontrola: Zanik (Control: Fade)— ustawiamy na 25. W ten sposób uzyskujemy efekt spadającychgwiazd. •

60 psdluty/marzec 2004

KSIĄŻKI — RECENZJEPhotoshop 7 Down & Dirty Tricks

• •##0Autor: Scott KelbyWydawnictwo: New RidersObjętość: 304 stronyISBN: 0735712379dostępna w wydawnictwie MikomCena: 162 zł

Książka jest zestawieniem tutoriali opisujących najbardziej popularne efekty spe-cjalne, jakie można osiągnąć w Adobe Photoshop 7.0. Autor — Scott Kelby — redak-tor pisma Photoshop User w przystępny sposób szczegółowo przedstawia międzyinnymi: techniki obróbki zdjęć (retusz, korekcja barwy i kontrastu), efekty 3D osiąga-ne przy użyciu filtrów jakie oferuje Photoshop, zaawansowane techniki pracy z tek-stem, tajniki efektów stosowanych na warstwach, metody i pomysły na tworzenieefektownych interfejsów.

Każdy z efektów został opisany krok po kroku i opatrzony kolorowymi ilustracja-mi, co zdecydowanie ułatwia zrozumienie procesu jego tworzenia. Oprócz tutorialina każdej stronie czytelnik znajdzie praktyczne porady i przydatne skróty klawiatu-rowe. Pozycja jest przeznaczona głównie do użytkowników, którzy stawiają pierwszekroki w Photoshopie. Brakuje jedynie płyty CD z wykonanymi projektami, co mogło-by znacznie ułatwić czytelnikom ich przyswojenie.

Magdalena Cyrczak

Photoshop 7. Ćwiczenia praktyczne

Autor: Łukasz OberlanObiętość: 104 stronyWydawnictwo: HelionISBN: 83-7197-876-6Cena: 12 zł

Photoshop 7

Książka adresowana jest przede wszystkim do początkujących grafików kompute-rowych, amatorów chcących zgłębić tajniki 7 wersji Photoshopa, jednak informacjew niej zawarte mogą być wykorzystane zarówno w projektach niekomercyjnych, jaki w pracy zawodowej. Wykonanie opisanych ćwiczeń pomoże utrwalić podstawowąwiedzę o tym programie. Poznamy m.in. techniki obróbki i retuszu fotografii, łączniez poprawianiem jakości zniszczonych zdjęć, kadrowanie obrazu, podstawy przygo-towywania obrazu do obróbki i do druku, sekrety tworzenia grafiki na potrzeby inter-netu, filtry, narzędzia selekcji, pracę na warstwach oraz korygowanie kolorystyki, ja-sności i kontrastu. Przedstawione przykłady zastosowania Photoshopa 7 w praktyceopisane zostały w prosty i przystępny sposób, wzbogacone ważnymi wskazówkamipraktycznymi i zobrazowane licznymi — niestety tylko czarno-białymi — ilustracja-mi. Cenne informacje, które będą przydatne w pracy z Photoshopem, zawarte sąrównież na końcu książki. Szkoda, że Autor wspominając w ćwiczeniach i swoichwskazówkach o skrótach klawiaturowych, nie podał w formie tabeli zestawienia tychnajważniejszych, zwłaszcza początkujący użytkownicy Photoshopa byliby wdzięcz-ni za taką „ściągawkę".

Książka na pewno ułatwi pierwsze kroki w poznawaniu programu i zachęci do dal-szej pracy, jednak nie pokaże nam wszystkich możliwości, jakie posiada Photoshopi wszystkich jego zastosowań. Czytelnicy chcący poszerzać swoją wiedzę i umiejęt-ności w tym kierunku powinni sięgnąć po ambitniejszą lekturę.

Niestety tym razem do książki nie został dołączony CD ROM — a szkoda. Zwłasz-cza w przypadku publikacji poświęconych ćwiczeniom praktycznym bardzo przydat-ne sąpiiki źródłowe do każdego omówionego projektu lub filmy przedstawiające krokpo kroku wykonywane czynności. Ważne jest także to, że w książce wykorzystanotylko angielską wersję programu.

Piotr Horodyński

•?s<!luty/marzec 2004

o01

3!

61

RECENZJE

Recenzje tabletówDariusz Pasturczak *

Dloó\

Io.

g5

INTU0S2Rodzina tabletów Intuos2 liczy sobie pięciu członków

różniących się rozmiarami (A6, A5, A4 regular, A4 oversizeoraz A3) obszaru roboczego. My dostaliśmy do testów wer-sje o rozmiarach A4. W skład zestawu wchodzi nie wyma-gające baterii piórko oraz także nie posiadająca dodatkowe-go zasilania mysz o nazwie 4D i sam tablet, czyli miejsce naktórym będziemy rysować.

Zaletą zestawu jest możliwość swobodnego używaniazarówno piórka jak i myszki. Stało się to możliwe dzięki usu-nię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. Jestto niewątpliwie ogromny plus, dzięki któremu nie jesteśmyzmuszeni 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, uni-kalny system wykrywania o nazwie TolllD. W praktyceoznacza to, że narzędzie po dotknięciu tabletu jest automa-tyczne wykrywane, rozpoznawane i gotowe do użycia orazkonfiguracji.

Piórko Intuos2 posiada wygodną i energonomiczną budo-wę, dzięki czemu leży w dłoni wręcz idealnie. Jest stosun-kowo lekkie i zarazem bardzo precyzyjne, posiada 1024 po-ziomy czułości nacisku, ponadto jest aktywne nawet do 10mm nad poziomem tabletu. W praktyce daje nam to ogrom-

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

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

Wymiary tabletu to: 456 x 361 x 14 mm, natomiast ob-szar roboczy na którym możemy pracować to 304,8 x 240,6mm. Te rozmiary powodują, że rysuje się na nim swobod-nie i przyjemnie. Nie brak nam miejsca i zasadniczo takapowierzchnia powinna wystarczyć nawet do bardzo skom-plikowanych ilustracji czy projektów.

Intuos2 to znakomity zestaw do tworzenia cyfrowych ilu-stracji, jego możliwości są ograniczone jedynie naszym ta-lentem i zapałem do pracy.

Producent

Parametry tabletu

Format

Obszar roboczy

Wymiary

Rozdzielczość

Folia ruchoma

Podłączenie

Poziomy nacisku

Menu ponad obszarem roboczym

Dwuściezkowatość

Pole szybkiego wyboru

Podstawka do piórka

Waga

Parametry piórka

Zasilanie

Podłączenie

Poziomy nacisku

Gumka czuła na nacisk

Boczne przyciski/ilość

Kod Tool ID

Waga

Oprogramowanie

Gwarancja

Cena

WACOM

A4

9x12"(304,8x240,6mm)

456x361x14

2540 dpi

jest

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

1024

tak

tak

tak

tak. oddzielny element

1600 g

160x14 mm

bezbateryjne

bezprzewodowe

1024

tak

tak/2

tak

17 g

Pamtei Classic

24 miesiące

2574 PLN

WACOM

A6

4x5" (92,8x127.6)

225x210x7.5

1000 dpi

jest

USB

512

426 g

145A14 mm

bezbateryjne

bezprzewodowe

512

tak

tak/2

nie

' u g

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

24 miesiące

469 PLN

GRAPMRE2 USB DC 1000W skład zestawu Graphire2 wchodzi: bezkulkową mysz-

kę (działająca bez baterii), nie wymagające baterii oraz in-nego zasilania, czułe na nacisk piórko oraz podkładka dorysowania czyli „tablet" o —jak twierdzą twórcy — bardzonowoczesnym kształcie.

Jedną z zalet zestawu jest możliwość swobodnego uży-wania zarówno piórka, jak i myszki. Jest to możliwe dziękiusunięciu z konstrukcji zbędnych i ograniczających możli-wości kabli łączących je z tabletem czy też komputerem, doktórego jest podłączony zestaw. Warto zaznaczyć, że obamanipulatory nie wymagają również instalacji oraz okreso-wej wymiany baterii, gdyż działają one bez jakiegokolwiekwewnętrznego źródła energii. Jest to niewątpliwie ogrom-ny plus, dzięki któremu nie jesteśmy zmuszeni kupować czyteż ładować co kilka tygodni baterie, aby można było swo-bodnie pracować.

Piórko dołączane do Graphite2 jest smukłe i dobrze leżyw dłoni. Jest bardzo lekkie i poręczne, posiada 512 pozio-mów nacisku, co powinno wystarczyć do wszelkiego rodza-ju szkiców elektronicznych czy też podpisów. Posiada takżedwupozycyjny przycisk, którym można swobodnie zapro-gramować oraz gumkę.

Myszka jest bezkulkową, choć nie optyczna i podobniejak piórko jest bezprzewodowa. Posiada 3 programowalneprzyciski. Wadą jest to, że nie ma możliwości używania jejna innym podłożu niż tablet.

62luty/marzec 2004

Sam tablet, czyli pod-łoże służące do ryso-wania, łącznie ze stoja-kiem na piórko ma wy-miary 225x210x7,5 mmi podłącza się go do por-tu USB. Niestety realnemiejsce pracy jest sto-sunkowo małe i raczejtrudno jest stworzyć naniej bardziej skompli-kowane prace. Po kilku

godzinach pracy doszedłem do dwóch wniosków: po pierw-sze: 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 sta-wia spore ograniczenia. Szczególnie odczuwalne będzie todla osób przyzwyczajonych do rysowania na formatach conajmniej A4 - będzie im brakować miejsca. Dlatego przedewentualnym zakupem warto rozważyć możliwość prze-testowania go w sklepie, by sprawdzić czy taka mała po-wierzchnia nie będzie nam przeszkadzać. Z pewnościąjestto idealne urządzenie dla początkujących użytkowników.

•O

•2

DLA PROFESJONALISTÓWPiotr Horodyński

PL-700Tablet WACOM z 17 calowym ekranem LCD charaktery-

zuje się bardzo wysoką jakością wykonania, doskonałymodwzorowaniem kolorów oraz szybką i dokładną reakcją naruchy piórka. Rozdzielczość tabletu to 508 linii na cal, przyrozpoznawalnych 512 poziomach nacisku.

Piórko, podobnie jak we wszystkich innych urządzeniachfirmy WACOM jest bezbateryjne i bezprzewodowe. Posiadagumkę oraz dwupozycyjny przełącznik. Rozdzielczość mo-nitora zintegrowanego z tabletem wynosi 1280 x 1024 pik-sele. 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 korzystaniunp. z myszki i klawiatury, jak i jako cyfrową deskę kreślar-ską. Możliwe jest także całkowite zdjęcie stopki i położenietabletu płasko na stole lub na kolanach. Stopka wyposażo-na jest w gumowe końcówki które doskonale zabezpiecza-ją tablet przed przesuwaniem się, czy spadnięciem z blatu(sprawdzone na śliskim podłożu). Gniazda do połączeniaz komputerem i zasilaniem ustawione są równolegle do po-wierzchni blatu, kable są dodatkowo zabezpieczone przedprzypadkowym wypadnięciem i ukryte pod klapką. Całośćsprzyja zachowaniu porządku.

Na stronach firmy Wacom, model PL-700 jest określa-ny raczej jako urządzenie wskazujące, doskonałe do wyko-rzystywania w czasie prezentacji biznesowych. Jako flago-we narzędzie przeznaczone dla artystów wskazywane sąmodele serii Cintiq. Wydaje się do trochę krzywdzące dlatego wspaniałego tabletu. Większość parametrów PL-700jest wyższa, poza czasem reakcji plamki, jednak w prakty-ce nawet bardzo ekspresyjne malowanie jest natychmiastodwzorowywane na monitorze. Tablet cechuje bardzo do-bre odwzorowanie łuków, nawet przy szybkim prowadze-niu kursora. Piórko prowadzi się wygodnie, szybko i do-kładnie reaguje ono na nacisk i daje charakterystyczny po-ślizg na szybie monitora. Jestem od wielu lat przyzwycza-jony do pracy z tabletem, jednak mimo tego doświadczeniai pewnych przyzwyczajeń, nieco inny sposób prowadzeniasię piórka po szybie, bardzo szybko przypadł mi do gustu.Nie muszę chyba wspominać o samym komforcie pra-cy z takim urządzeniem, chyba najbardziej przypominają-cym pracę w naturalnych mediach. Nagle kursor, charak-terystyczny dla wszystkich aplikacji wskaźnik myszki, stajesię zbędny, wręcz zaczyna przeszkadzać. Właściwie jedy-ny mankament tabletu to gruba szyba powodująca że farba

którą malujemy pojawia się około 3 mm„pod" naszym piórkiem. Jednakna razie chyba nie ma innychmożliwości technicznych, po-zwalających na stworzeniebardzo cienkiego i odpor-nego na nacisk ekra-nu. Jakość wyświe-tlacza jest doskonała,bardzo duża jasność, bar-dzo wysoki kontrast, bardzo dużykąt widzenia; niczym w wysokiej jako-ści monitorach. Należy tylko pamiętać o od-powiednim ustawieniu w stosunku do źródeł świa-tła, gdyż podobnie jak w klasycznych monitorach, naszybie pojawią się refleksy. Tablet w czasie pracy nagrzewasię nieco, jednak po około godzinie pracy ciepło osiąga pe-wien poziom, którego już nie przekracza (najdłuższy czastestowania to około 10 godzin). Muszę tu zaznaczyć, że cie-pło to bynajmniej nie jest uciążliwe, nawet podczas długiejpracy z tabletem na kolanach. Dla niektórych być może tobędzie jeszcze jedna z bardzo wielu zalet tabletu. ®

zdjęcie: Aleksandra Kot

Technologia

Obszar roboczy

Rozdzielczość tabletu

Dokładność tabletu

Odczyt położenia piórka

Szybkość odczytu położeniapiórka

Typ

Przyciski

Siła nacisku potrzebna do jegoaktywacji

Ilość poziomów nacisku

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

Waga

psćuty/marzec 2004

Rezonans elektromagnetyczny

338 x 270 mm

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

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

5 mm nad powierzchnią ekranu-tabletu

max. 205 punktów na sekundę

• • |

czułe na nacisk, bezprzewodowe,bezbateryjne

dwupozycyjny, programowalnyprzycisk oraz gumka

20 g

512

10 milionów naciśnięć

16g

oDl

63

POZNAJEMY PHOTOSHOPA

INTERFEJSAdobe Photoshop CE [okiadkatif @ 16,7% (RGB)]

O)

Io.i

PASEK MENUPasek menu programu Photoshopzawiera wszystkie opcje, ustawieniaoraz narzędzia, które możemy wyko-rzystać podczas pracy z programem.Menu podzielone jest w sposóblogiczny na główne kategorie: Plik(File), Edycja (Edit), Obraz (Image),Warstwa (Layer), Zaznaczenie (Se-lect), Filtr (Filter), Widok (View), Okno(Window), Pomoc (Help).

• OKNO SKALI DOKUMENTUOkno skali dokumentu informuje nasna bieżąco o tym w jakiej skali znaj-duje się aktywny dokument (obrazek,zdjęcie), nad którym właśnie pracu-jemy. 100% oznacza rzeczywistawielkość dokumentu, jednak gdy pra-cujemy na dużym dokumencie, któ-ry nie mieści się w oknie programuw całości możemy zmienić jego ska-lę w zależności od potrzeb.

INFORMACJEO DOKUMENCIEJest to szybka podpowiedz na tematdokumentu (obrazka, zdjęcia), nadktórym aktualnie pracujemy. O tym,co będzie się pojawiało w tym miej-scu możemy zadecydować samiw zależności od tego, na jakich infor-macjach najbardziej nam w danejchwili zależy. Czy np. na wielkościpliku, rozmiarze dokumentu czy aktu-alnego aktywnego narzędzia.

WYBÓR RODZAJUINFORMACJIO DOKUMENCIETo tutaj decydujemy o czym informo-wał nas będzie Photoshop w oknieInformacje o dokumencie. Do wybo-ru mamy kilka opcji, które dosto-sowujemy do aktualnych naszychpotrzeb.

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

•1,

'—* J

1

42

y

-i.

u.

J

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

• PASEK NARZĘDZIPasek narzędzi grupuje wszystkie podstawowe narzędzia pro-gramu Photoshop, za pomocą których manipuluje się obrazka-mi, np. narzędzia do malowania, rysowania, zaznaczania. Przyikonach na pasku narzędzi znajduje się mała strzałka, oznaczaona, że w tym miejscu na pasku narzędziowym zgrupowano kil-ka narzędzi, które są podobne pod względem funkcjonalności.Aby uzyskać dostęp do ukrytych w danej chwili narzędzi, nale-ży kliknąć ikonę odpowiedniego narzędzia prawym klawiszemmyszy lub dłużej przytrzymać wciśnięty lewy klawisz.

68luty/marzec 2004

PHOTOSHOPA

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

• PALETYPalety są specjalnymi zestawami narzędzi lub ustawień progra-mu Photoshop. Kiedy pierwszy raz uruchomimy program Paletydomyślnie ustawione są po prawej stronie ekranu. Ważną zaletąPalet jest jednak możliwość ich przemieszczania na całym ekra-nie programu. Każdy może dowolnie je rozmieścić, połączyćz innymi paletami lub w razie potrzeby zupełnie ukryć. Zwiększato znacznie funkcjonalność i wygodę korzystania z programu.

PASEK OPCJrPasek opcji jest to zbiór opcji wybra-nego narzędzia zgrupowanych w jed-nym dobrze widocznym i łatwodostępnym miejscu. Jeżeli pod-czas pracy zmienimy narzędzie,pasek opcji dynamicznie zmieni swójwygląd wyświetlając opcje, którychmożna użyć do dostosowania sposo-bu działania tego narzędzia.

OBSZAR ROBOCZY*Obszar roboczy to cała przestrzeńprogramu Photoshop, którą możemydowolnie sobie organizować. Otwie-ramy w nim nasz dokument, możemyna nim dowolnie rozmieszczać paletyi pasek narzędzi. Stanowi on dla nasprzestrzeń ograniczonąjedynie wiel-kością ekranu.

AKTYWNY DOKUMENT •Aktywnym dokumentem może byćzdjęcie lub obrazek, nad którymw pracujemy. W programie Pho-toshop możemy otworzyć w danejchwili wiele dokumentów, jednakaktywnym może być tylko jedenz nich, w którym dokonujemy zmian,gdzie rysujemy, malujemy, wklejamybądź wycinamy.

OKNO WSKAZÓWEK *PROGRAMUJest to obszar, w którym dynamicz-nie i na bieżąco Photoshop informu-je nas o czynnościach jakie możemyw danej chwili wykonać za pomocądanego narzędzia. Stanowi to swegorodzaju podręczną pomoc dla użyt-kowników, którzy poznają i uczą sięprogramu Photoshop.

odiro

•o

?

luty/marzec 200469