Kl fi\ NQ W V C W vicman<s ph. t Editr 7.2 Page Curl 1.2- Puzzle Pr 2.0 FILMY INSTRUKTAŻOWE DO TUTORIALI ZDJĘCIA ROYALITY FREE NR 01/2004 (1) CENA 29,80 PLN VAT 0% NAKŁAD 6000 egz. www.psdmag.rg MAGAZYN UŻYTKOWNIKÓW PROGRAMU ADOBE PHOTOSHOP I c ni ca CL TEMAT NUMERU W ^ WEBDESIGN^ prjektujemy layut strny klry na WWW ptymalizacja grafiki O z O 1 < PHOTO c nweg Ftgrafia cyfrwa kupujemy aparat
rzwijaj się Twja praca. Twja drga. Pznaj 3ds max 6. Biegnij d przdu razem z elastycznymi, bgatymi w mżliwści mdelwania 3D, animacji i renderingu narzędziami 3ds max6. Z nwym systemem cząstek, zintegrwanym rendererem mental ray.ultranwczesnym schematicview. vertex paint. reactr 2stuntman and vehicle dynamics, wzmcnina integracją z nwym Autcad 2004, rdziną Autdesk 1) VIZ. frmatami.dwg. DXF i IGES 3ds max 6 wspmaga prdukcję gier pst prdukcję wizualizację i design Dzięki niesamwitym mżliwścim 3ds max 6 wykracza dalek pza urki starych dbrych czasów Odwiedź nas na pkazie 3ds max Quedex i ul. Bukwska 14 http://www.quedexx 62-080 Siersław biur@quedexxm ddatkwe infrmacje na stnie prducenta: www.di km. H8 605 061 tcl.*48 61 8963 fax +48 61 8963 900 i/prducts/3dsmax6
Od redakcji Mam przyjemnść przedstawić Warn pierwszy numer z serii.psd. Pism pwstał dzięki Waszym sugestim i uwagm. W głównej mierze pświęcne jest twrzeniu grafiki i bróbce zdjęć w prgramie Adbe Phtshp. Nie będziemy jednak pmijać innych tematów zwłaszcza dtyczących nwści, jakie pjawiają się na naszym rynku. Tematem pierwszeg numeru jest webdesign, czyli sztuka prjektwania i przygtwywania grafiki na ptrzeby internetu. Nie bez przyczyny użyłam tu słwa sztuka" grafików jest wielu, natmiast dbrych grafików niestety duż mniej... Zaprjektwanie grafiki na ptrzeby WWW t pważne wyzwanie i nie każdy umie mu sprstać. Mam nadzieję, iż artykuły pświęcne temu zagadnieniu pmgą Warn w świadmym prjektwaniu witryn internetwych. Mżecie przeczytać między innymi ptymalizacji plików graficznych, twrzeniu funkcjnalneg layutu strny internetwej i pzycjnwaniu strn. Oprócz teg zapraszam d wyknywania tutriaii w pierwszym numerze pkażemy Warn jak twrzyć teksturę przypminającą zardzewiałą pwierzchnię, dwiecie się jak ręcznie wyknać metalwy biekt pkryty krplami wdy, pznacie tajniki usuwania efektu mry z zeskanwanych zdjęć. Nie przeczyliśmy również nwści, jaka statni pjawiła się na rynku pakietu Adbe Creative Suitę w.psd mżecie przeczytać zmianach, jakie firma Adbe wprwadziła w prgramie Phtshp CS. Na dłącznej d pisma płycie CD szczególną atrakcjąjest zestaw 25 zdjęć Ryality Free, które z pewnścią przydadzą się Warn przy realizacji własnych prjektów. Życzę miłej lektury Magdalena Cyrczak magda@sftware.cm.pl
Magdalena Tmczyk Pracuje jak freelancer, d raku również w stałej współpracy z agencjami reklamwymi. Danie! Sdkiewicz 19 lat, z pwłania ;-) uczęszcza d Technikum Elektrniczneg we Wrcławiu. Oprócz sprzętu kmputerweg interesuje się także różneg rdzaju prgramami. szczególnie związanymi z twrzeniem strn internetwych i grafiką Mariusz Dubielecki (Akira) Technik-Infrmatyk, interesuje się twrzeniem strn WWW, animacji, psychlgią, muzyką rckwą, pisaniem, szerk pjętym sprtem ze szczególnym uwzględnieniem i praktykwaniem kulturystyki i lekkatletyki. Dariusz Pasturczak Grafiką zajmuje się d przeszł 10 lat. Z Phtshpem pracuje d sześciu lat. Interesuje się zarówn grafiką 2D jak i 3D. także animacją. Obecnie pracuje jak Freelancer wyknując rzmaite prjekty graficzne. Rafał Dukaczewski Phtshpa używa d 6 lat. Zajmuje się twrzeniem grafiki d celów reklamwych, prjektwaniem strn internetwych. lgtypią. Łukasz Pabian Grafiką kmputerwą interesuje się d kilku lat. W swich ilustracjach stara się przekazywać t c w danej chwili dczuwa, psługując się abstrakcyjnym wyrazem przestrzeni, frmy raz klru. Większść jeg prac mżna zbaczyć na strnie www.insane.all.pl Pitr Hrdyński Abslwent Akademii Sztuk Pięknych w Łdzi. Dziedzinąjeg działalnści jest malarstw, grafika tradycyjna i kmputerwa, multimedia i animacje. Magdalena Cyrczak Grafikąi prjektwaniem witryn internetwych zajmuje się d kł 2 lat. Prtfli: www.infranet.pl/magda Aleksandra Kt Abslwentka Wydziału Gegrafii i Studiów Reginalnych Uniwesytetu Warszawskieg, z zamiłwania pdróżniczka i ftgraf, grafiką kmputerwą (Phtshp, Flash, Bryce. Painter) zajmuje się d dwóch lat. Waldemar Pruss Autr tutrialu p.t. ia tekstura. Zardzewia- Łukasz Zając Freelance designer z pnad dwuletnim dświadczeniem w prjektwaniu graficznym i prjektwaniu strn internetwych. Trejderwski Tmasz Z wykształcenia metalurg, z zawdu prgramista, webdesigner i wykładwca, z zamiłwania pisarz. Pracuje jak wlny strzelec, twrząc serwisy internetwe, prgramy i aplikacje raz wykładając na kursach kmputerwych. Marcin Sawicki Student III rku infrmatyki. Grafiką zajmuje się d niedawna b d k. 1.5 rku, w chwili becnej pznaje Flasha. W swich becnych pracach wykrzystuję Phtshpa 7. Phtlmpact 8. FreeHand MX raz Flash MX. W przyszłści planuje pznać tajniki twrzenia 3D. Lech Jaszwski Ftgraf, nauczyciel w Plicealnym Studium Ftgraficznym, wykładwca w firmie infrmatycznej. Tmasz Zelek Student drugieg rku Plitechniki Kszalińskiej. Na c dzień pracuje m.in. jak grafik, zajmując się głównie twrzeniem strn WWW. Prwadzi serwis pświęcny Phtshpwi www.graffik.pl. Michał Szpilewski Grafiką zajmuje się d 5 lat, gównie na ptrzeby pligrafii, d 2 lat współtwrzy jedną z najdynamiczniej rzwijających się galerii internetwych digart.pl psi
STYCZEŃ Temat numeru WEBDESIGN Twrzymy menu DANIEL SODKIEWłCZ Klry na WWW TOMASZ TREJDEROWSKI Layut MAGDALENA TOMCZYK Optymalizacja grafiki MICHAŁ SZPILEWSKI Pzycjnwanie strn WWW MARCIN SAWICKI Interfejs 3D ŁUKASZ FABIAN Prjekt: Okładka ŁUKASZ FABIAN NARZĘDZIA EFEKTY Efekt termwizji MARIUSZ DUBIELECKI Narzędzia selekcji TOMASZ ZELEK Jak zrbić własny pędzel ŁUKASZ ZAJĄC FOTOGRAFIA CYFROWA Usuwanie efektu mry LECH JASZOWSKI Ftgrafia cyfrwa Kupujemy aparat DOMINIK MACIASZEK Krple wdy i nie tylk. MAGDALENA CYRCZAK Mtyl RAFAŁ DUKACZEWSKI KLASYCZNE EFEKTY Zardzewiała tekstura WALDEMAR PRUSS luty/marzec
? ai SYLWETKA Bartek Kzłwski NOWOŚCI Phtshp CS c nweg? DARIUSZ PASTURCZAK jest wydawany przez Sftware-Wydawnictw Sp. z.. Redaktr naczelna: Magdalena Cyrczak design@sftware.cm.pl Prducent: Marta Kurpiewska, marta@sftware.cm.pl Opracwanie CD: Magdalena Cyrczak design@sftware.cm.pl Skład: Agnieszka Wawrzyniecka, agaw@sftware.cm.pl RECENZJE Piuginy - DARIUSZ PASTURCZAK Prjekt graficzny kładki: Łukasz Pabian, insane@all.pl Prjekt typgraficzny kładki: Marzena Turek-Gaś marzenat@sftware. cm.pl Książki MAGDALENA CYRCZAK PIOTR HORODYŃSKI Dział reklamy: reklama@sftware.cm.pl tek: (22)860 18 79 Tablety DARIUSZ PASTURCZAK PIOTR HORODYŃSKI Prenumerata: Marzena Dmwska, pren@sftware.cm.pl tek: (22) 860 17 67 W GALERiA Galeria POWSTAŁA PRZY WSPÓŁPRACY Z Knkurs ROZWIĄZANIE KONKURSU POCZTÓWKA Z WAKACJI" POZNAJEMY PHOTOSHOPA p * FAQ "' MARCIN WARDĘGA digąrt.pl Adres krespndencyjny: Sftware-Wydawnictw Sp. z.., 00-190 Warszawa, ul. Lewartwskieg 6 e-mail: psd@sftware.cm.pl, www.psdmag.rg tel. (22) 860-18-81, fax (22) 860-17-71 Wyprdukwan w Plsce Druk: Stella Maris Redakcja dkfada wszelkich starań, by publikwane w piśmie i na twarzyszących mu nśnikach infrmacje i prgramy były pprawne, jednakże nie bierze dpwiedzialnści za efekty wykrzystania ich; nie gwarantje także pprawneg dziafania prgramów shareware, freeware i public dmain. Uszkdzne pdczas wysytki ptyty wymienia redakcja, Wszystkie znaki firmwe zawarte w piśmie są własnścią dpwiednich firm i zstały użyte wyłącznie w celach infrmacyjnych. Deklarwana wyskść nakładu bejmuje również ddruki. Redakcja nie udziela pmcy technicznej w instalwaniu i użytkwaniu prgramów zamieszcznych na płycie CD dstarcznej z pismem. Płytę CD dłączną d magazynu przetestwan prgramem AntiWenKit firmy G DATA Sftware Sp. z.. Sprzedaż aktualnych lub archiwalnych numerów pisma p innej cenie niż wydrukwana na kładce bez zgdy wydawcy jest działaniem na jeg szkdę i skutkuje dpwiedzialnścią sądwą. O Ć) - /l I? Interfejs
Opis CD DEMO Ultimate Paint v2.83 (Win) Prgram d bróbki brazu, któreg funkcjnalnść mżna rzszerzyć pprzez pluginy. Umżliwia ryswanie i edycję własnych brazów, twrzenie strn HTML ze zdjęciami, przesyłanie grafik e-mailem, rbienie zrzutów ekranu raz ustawianie tapet, strna prducenta: http://www.ultimatepaint.cm Universe Image Creatr 1.63 (Win) Prgram pzwalający na twrzenie realistycznych brazów przypminających przestrzeń ksmiczną: planety, gwiazdy, rzbłyski świetlne i galaktyki. strna prducenta: http://www.diardsftware.cm PhtFrame 2.5 (Win/Mac) PhtFrame pzwala na prjektwanie wyskiej jakści ramek i bramwań dla Twich brazów. Mżna wybrać ramkę z gtwych szablnów lub zrbić własną. Aplikacja psiada efektz zmiany klru, trybu mieszania, cienia, płaskrzeźby i wiele innych, strna prducenta: http://www.extensis.cm Pr Mtin Prgram d edycji grafiki - idealny d twrzenia grafiki d gier, ikn, a także animacji. strna prducenta: http://www.csmig.cm WERSJA 30-DNIOWA Adbe Phtshp 7.0 (Win/Mac) 30-dniwa wersja sztandarwag prgramu d twrzenia i edycji grafiki, strna prducenta: http://www.adbe.cm FREEWARE Adbe Acrbat Reader 5.0.5 PL (Win/Mac) Prgram umżliwiający przeglądanie dkumentów zapisanych jak PDF (Prtable Dcument Frmat), strna prducenta: http://www.adbe.cm VCW VicMan's Pht Editr 7.2 (Win) Darmwy prgram d bróbki brazów ciekawym i wygdnym interfejsie użytkwnika. Jak każdy teg typu prgram, pzwala zeskanwać i brbić zdjęcie. Efekty i filtry twrzy się przez pdanie wzru matematyczneg, który mdyfikuje współrzędne na brazie, strna prducenta: http://www.vicman.net dft Klient Prgram dft.klient t narzędzie, które ma ułatwić przeglądanie (a w klejnych wersjach również zarządzanie) klekcji ftgrafii, edycję plików cyfrwych raz zamawianie dbitek w serwisie dft.pl. Prgram wypsażn m.in. w funkcję bezstratneg brtu plików jpg, seryjneg skalwania ftgrafii, przycinanie d frmatów cyfrwych i tradycyjnych (mżliwść wybru prprcji kadrwania 2:3 lub 3:4, krektę barwy, kntrastu, nasycenia. Prgram bsługuje następujące frmaty: JPG, TIF, BMP, PCX, PNG, TGA strna prducenta: http://www.dft.pl PLUGINY Andrew's plugins (Win) Zestaw przykładwych gradientów, styli, pędzli, wzrków, pluginów i efektów współdziałających z Phtshpem. strna prducenta: http://www.graphicxtras.cm Page Curl 1.2 Plugin umżliwiający stwrzenie efektu zawinięteg rgu kartki. Szersza recenzja wewnątrz numeru (str. 29) strna prducenta: http://www.avbrs.cm E> cb ra - w CL Mystical Lighting (Win/Mac) Plugin pzwalający na wprwadzenie realistycznych efektów świetlnych. Zawiera 16 efektów wizualnych raz takie udgdnienia jak: mżliwść pracy na warstwach, niegraniczne cfanie czynnści i maskwanie, strna prducenta: http://www.autfx.cm Puzzle Pr 2.0 Plugin firmy AV Brs dający efekt układanki z puzzli. Szersza recenzja wewnątrz numeru (str. 29) strna prducenta: http://www.avbrs.cm DODATKI 25 ZDJĘĆ ROYALITY FREE d firmy UCE www.uce.pl Filmy instruktażwe i pliki źródłwe pmcne przy wyknywaniu ćwiczeń zawartych w magazynie.
(Cd2)
!r OKŁADKA W^r i i i 20 min pliki Łukasz Pabian Wielkrtnie zdarza się, że współczesnym twórcm przestaje już wystarczać tylk Phtshp. Dlateg sięgają d zupełnie innych prgramów tak by ich prjekty nabrały zupełnie nweg wyrazu. Łącząc techniki stswane w grafice trójwymiarwej raz grmne mżliwści Adbe Phtshp mżna pszerzyć swje grafiki zupełnie nwe hryznty. Tł Twrzymy nwy plik PlilNwy... (File>New...) wymiarach: długść 990 pikseli i wyskść 1400 pikseli. Następnie wypełnij całą pwierzchnie brazka gradientem linearnym (pinw) d klru RGB: [212,227,253] d klru RGB: [240,245,255]. Nieb w tle Pbieramy ftgrafię nieba i nansimy ją na nasz brazek, pprzez przeciągnięcie warstwy z pliku jpg na kn z naszą grafiką. Wyrównujemy zdjęcie względem brazka i dpracwujemy jeg klrystykę. Wybieramy z menu Obrazek>Dpasuj>Klr selektywny (lmage>adjust>selective Clr), następnie w knie Klr selektywny {Selective Clr) wybieramy Niebieskści (Blues), ustawiamy suwaki na wartściach CMYK: [+79%][+6%][+14%][+19%]. Zmieniamy tryb krycia na Ostre światł (Hard Lighf). Wybieramy gumkę [E], zmieniamy na jeden ze zmiękcznych pędzli i ustawiamy jej rzmiar na kł 450 pikseli. Wycieramy dlną cześć zdjęcia, tak by zstał tylk nieb. Wybieramy z menu Filtr>Artystyczny>Suchy pędzel (Filter>Artistic>Paint Daubs), ustawiamy suwaki: Rzmiar pędzla (Brush size) na 12, Szczegół (Sharpness) na 7. Na klejnej warstwie rysujemy gradient linearny z dłu d klru białeg d przezrczystści, d płwy wyskści. Świetliste linie E 1 I Aby wyknać łuki należy stwrzyć zaznaczenie [/W] w pstaci pinwej elipsy, na nwej warstwie wypełnić je jasnym klrem, następnie przesunąć zaznaczenie tak by pwstał najcieńszy łuk. Klawiszami [Cf/7]+[X] wycinamy nieptrzebną przestrzeń. Kpiujemy tę warstwę czterkrtnie pprzez przeciągnięcie jej na iknę twrzenia nwej warstwy w zakładce Warstwy (Layers). Pcząwszy d najwyższej warstwy każdy łuk pddajemy filtrwi Rzmyciu gausswskiemu Filtr>Rzmycie gausswskie (Gaussian Biur (Filter>Blur>Gaussian Biur), przy czym każda niższa warstwa pwinna mieć większy współczynnik rzmycia. Pierwsze nałżenie filtru pwinn być z parametrem Prmień (Radius) 2 piksele. Mżna zgrupwać warstwy
C lub też płączyć je w jedną. Następnie pwielamy t zgrupwanie lub warstwę i bracamy kilka stpni Edycja>Przekształć>Obróć (Edit> TransfrrrRtate). Nałżenie trójwymiarwych biektów Pbieramy z CD brazki kuia.tif, frawa.tif (pliki wygenerwane przez 3ds max). Nansimy kule i trawę na brazek, tak by kula była na niższej warstwie. Ustawiamy trawę, tak by jej dół wychdził z góry kuli z twru. Gumką należy usunąć nieptrzebny fragment pdstawy trawy, tak by sprawiała wrażenie wyrastania z kuli. Nałżenie masek Pbieramy z CD brazki maska1.tif razmaska2.tif (p\\k wygenerwany przez 3ds max raz Pser). Za pmcą narzędzia Lass (Lass Tl) [L] wycinamy tylną część głwy, tak by pwstał nam kntur zarówn w jednej, jak i drugiej masce. Nansimy maski na nasz brazek ustawiając je na cienkich gałęziach" wśród traw. Mżliwe, że będzie ptrzebne bracanie warstw by dpaswać je d pzstałych części Edycja>Przekształć>Obróć (Edit> Transfrm>Rtate). Ciemne czy wyknamy na nwej warstwie, narzędziem Pędzel (Brush) [B] zamalujemy wszystkie czy klrem RGB: [50,85,129], następnie zmieniamy tryb krycia miedzy warstwami na Mnżenie (Multiply). Pwielenie elementów Łączymy wszystkie warstwy maski, ciemne czy, kulę, trawę w jedną warstwę. Następnie pwielamy ją i przensimy warstwę pniżej tej z kwiatem". Przesuwamy ją w praw i pwyżej. Zmniejszamy kł 85% Edycja>Przeksztalć>5kaluj (Edit> Transfrm>Sca!e) i nansimy na tę warstwę efekt rzmycia gausswskieg Fi!r>Rzmycie>Rzmycie gausswskie (F//fer> Btur>Gaussian Biur). Pwtarzamy te czynnści jeszcze dwa razy, za każdym razem zwiększając stpień rzmycia gausswskieg. Aby uzyskać cienie pd kulami, narzędziem Pędzel (Brush) [B] typu miękkieg na nwej warstwie punktw będziemy zaznaczać cienie. Ryswanie mtyla Narzędziem Pędzel [B] małym przekrju brysujemy skrzydł mtyla. Następnie zewnętrzną część skrzydła zamalwujemy czarnym klrem, a wewnętrzną ciemnym niebieskim RGB: [38,57,152], Aby uzyskać nierówne rzprwadzenie klru należy zastswać pędzle nierównych krawędziach. Na nwej warstwie, jasnym niebieskim RGB: [17,170,245] zamalwujemy część pwierzchni, na której jest niebieski (ciemny). Psługując się narzędziem Rzmycie (Smudge) [R] uzyskamy rzmazanie pciągnięcia. Pwielamy tę warstwę i nansimy na niąfiltr Rzmycie gausswskie. Zmniejszamy przezrczystść d 30%. Klrem RGB: [17,142,222] rysujemy drbne linie pędzlem [8] najlepiej jak najmniejszym przekrju. Mżna jeszcze urzmaicić skrzydła pprzez malwanie pędzlami nieregularnych kńcach. Łączymy warstwy składające się na skrzydła i pwielamy tę warstwę. Narzędziem Zniekształć Edycja>Przekszta!ć>Znieksz tałć (Edit>Transfrm>Disrt) zmieniamy ułżenie drugieg skrzydła. Na klejnej warstwie dryswujemy jeszcze główkę i czułki. Warstwy te mżna płączyć i zmieniać ich klrystykę za pmcą plecenia Barwa/Nasycenie (Hue/Saturatin) Obrazek>Dpasuj>Barwa/ Nasycenie (lmage>adjust>hue/saturatin). di
WEBDESIGN 15 min a. film TWO pliki Daniel Sdkiewicz Nie musisz znać Fiasha aby stwrzyć ciekawe i animwane menu d własnej strny www. Jedyne czeg będziesz ptrzebwać t prgramu graficzneg Phtshp w minimalnej wersji 5.5 i chęci przeczytania teg artykułu. Tutrial ten przeprwadzi Cię przez prces twrzenia menu za pmcą narzędzi Slice, skryptów Rllver i nieskmplikwaneg kdu HTML. Jeżeli nie masz zielneg pjęcia chćby jednym z pwyższych pjęć, nie musisz się przejmwać pniższe krki pisujące dkładnie każdą czynnść, przeprwadzą Cię przez cały ten prces. Cel, Twrzymy przycisk. Wysl--c 393 Rzdzielcza 11 W\ Zachwaj prprcje 0 Metda POfiwnegprubk^nd Dwu ze cienna V- Menu, jakie stwrzymy, będzie się składać z kilku płącznych ze sbą i utrzymanych w nwczesnym stylu przycisków. P najechaniu kursrem na wybrany guzik, zstanie n pdświetlny, sam zaś przycisk będzie sprawiał wrażenie trójwymiarweg. Aby rzpcząć pracę uruchamiamy prgram Phtshp. Pierwsze c należy ustalić t wielkść naszeg przycisku. Jeżeli nie mamy knkretneg pmysłu, wybieramy dść standardwe rzmiary 121 na 17 pikseli. Klejny wybór t klr tła, w tym przypadku prpnuję jasny dcień szarści np. #D4D4D4 (HTML Cde). Aby nadać naszemu rysunkwi efekt trójwymiarwści należy naryswać przy górnej i lewej krawędzi jasną linię szerkści 1 piksela np. w klrze jasnej barwie: #F3F3F3. Zapisujemy nasz przycisk w wyskiej jakści pliku JPG, będzie n służył jak szabln d twrzenia klejnych klawiszy w menu. Napisy Dl T3 ń?iridex - - a - -i W zależnści d teg z jakich działów składa się nasza strna, twrzymy dpwiednie napisy na przyciskach. Krzystając z przygtwaneg wcześniej szablnu nansimy na klejne przyciski nazwy działów. W przedstawinym przykładzie menu będzie się składać z sześciu guzików: lndex, Newsy, Książki, Histria, Teksty i Kntakt. Bardz ważnym elementem, mającym grmny wpływ na kńcwą estetykę naszeg menu jest użyta w nim czcinka. Gdnymi plecenia, eleganckimi krjami sąm.in. Tahma i Verdana. Każdy stwrzny przycisk zapisujemy sbn w jednym katalgu, staramy się także aby napisy na każdym z rysunków znajdwały się w tej samej dległści d górnej, dlnej i (szczególnie) lewej krawędzi. Przed zapisaniem brazka musimy spłaszczyć wszystkie warstwy, pprzez menu: Warstwa>Sptaszcz brazek (Layer>Flatten Image). 10
Składamy menu Otwieramy wszystkie utwrzne przyciski, a następnie ustalamy na jakim tle zstaną ne umieszczne. W naszym przykładzie będzie t niewielki prstkąt wymiarach: 123 na 109 pikseli. Przy przyciskach wymiarach 121 na 17, p lewej i prawej strnie przycisków będzie wystawał 1 piksel tła, zaś w pinie pmiędzy klejnymi przyciskami, raz na samej górze i dle, także będzie jeden piksel tła. Aby nasz pdkład dróżniał się d samych guzików najlepiej nadać mu jakiś ciemniejszy klr, np. cierny dcień szarści #9C9C9C. Na utwrzne tł wklejamy wcześniej stwrzne przyciski, ustawiając je, każde w dległści 1 piksel d krawędzi i następneg przycisku. Aby dkładnie móc rzmieszczać wklejne biekty, należy maksymalnie pwiększyć (zrbić zbliżenie) naszeg brazka. P złżeniu całści, zapisujemy menu w sbnym flderze. Pierwsze cięcie Wszystkie wersje Phtshpa, pcząwszy d numeru 5.5, psiadają bardz przydatną dla webmasterów funkcję pzwalającą pciąć brazek na mniejsze części i zapisać g w frmie kdu HTML z tabelkami wypełninymi naszym pciętym brazkiem. Przed przystąpieniem d teg zadania należy upewnić się czy w menu Widk (View) jest zaznaczna pcja Ddatkwe (Extras) (mżna ją uaktywnić skrótem klawiszwym [Ctrl\+[H\). Następnie, za pmcą narzędzia Odcięcie (Slice) (skrót klawiszwy [K]), dkładnie bramwujemy każdy z przycisków. Aby zrbić t jak najdkładniej, należy skrzystać z maksymalneg pwiększenia widku. Dkładne wycinanie klejnych brazków jest bardz ważne, tutaj bwiem wyznaczamy aktywny bszar naszych przycisków. Niezbędna jest więc dkładnść c d piksela. Pcięcie naszeg brazka kńczymy zapisując g pprzez plecenie: Plik>Zapisz dla Weba (File>5ave fr Web), ptwierdzamy czynnść przyciskiem [Zapisz (Save)]. Index Newsy Książki Histria Teksty Kntakt HTML Chwilw mżemy zamknąć Phtshpa, przechdzimy teraz d stwrzneg przez Phtshpa pliku *.html (który przed chwilą zapisywaliśmy), gdzie znajduje się nasze menu. Phtshp stwrzył plik z rzszerzeniem *.html i flder, w którym znajduje się nasz pcięty brazek. Otwieramy teraz ten plik html, za pmcą zwykłeg ntatnika lub jakiegś edytra html (Dreamweaver, Pajączek). Na pczątku w znaczniku meta zamieniamy kdwanie strny z charset=windws-1250 na charset=is-8859-2. Pierwszy pważniejszy prblem na jaki się natkniemy t wykrzystanie naszych pciętych rysunków jak hiperłączy (linków). P wpisaniu plecenia: <a href=""> </a> pmiędzy wybranym rysunkiem np. tak: <a href=""> <IMG SRC="Obrazki/menu_03.gif" WIDTH=121 HEIGHT=17 ALT=""> Index Newsy Książki Histria Teksty Kntakt J s 1 q I każe się, że w przeglądarce internetwej menu p prstu się rzsypał., 11
WEBDESIGN css P pierwsze, nie mżemy pzwlić na dstępy pmiędzy wpisywanymi kdami, każda bwiem spacja jest pstrzegana jak znak, a t burzy układ całej tabeli. Szczególnie trzeba uważać, aby nie był dstępów pmiędzy pleceniami <a href=""> i </a>, a znajdującym się wewnątrz nich rysunkiem. Aby brazki z hiperłączami nie były w żaden spsób zniekształcane musimy utwrzyć style. Skrzystamy zatem z Kaskadwych Arkuszy Stylów Cascading Style Sheets (CSS). Stswanie styli uniezależni nas d rdzaju przeglądarki, jakiej będzie używała sba glądająca nasze menu, gdyż w stylach mżemy zdefiniwać np. wielkść fntu, marginesy, klr tła dla pszczególnych elementów. Style również umżliwiają szybkie zmiany w frmatwaniu wielu elementów HTML, gdyż zmiana ta dbywa się wówczas w jednym miejscu. Aby wprwadzić style d naszeg dkumentu w pliku *.html z tabelą, pmiędzy znaczniki HEAD należy wpisać: <LINK href="style.css" type="text/css"> rel="stylesheet" Następnie twrzymy plik tekstwy, w którym umieszczamy linijkę: IMG {brder=0 padding: 0px, Opx, Opx, Opx} patrz screen. Następnie zapisujemy g jak style.css w tym samym katalgu, c dwłujący się d nieg plik *.html. Ciąg dalszy pracy z HTML-em Musimy teraz sprawdzić jakie nazwy psiadają rysunki przedstawiające nasze przyciski, które zstały pcięte i wrzucne d flderu Obrazki. Aby t zrbić twieramy nasz plik *.html w przeglądarce, następnie najeżdżamy na każdy z przycisków menu kursrem i klikamy na nim prawym przyciskiem myszy, wybieramy z menu pcję Właściwści". Zapamiętujemy nazwę każdeg z przycisków (patrz ilustracja), p czym przechdzimy d kdu html i przyprządkwujemy każdemu z nich hiperłącza identycznie jak przedstawin t w krku 6. Mżemy teraz sprawdzić pprawnść działania naszeg dzieła w przeglądarce internetwej. Jeżeli występują jakieś prblemy w wyświetlaniu grafiki, najprawdpdbniej w kdzie HTML zrbiliśmy nieptrzebny dstęp (spację) lub niepprawnie stwrzyliśmy plik *.css. Jeżeli wszystk działa, czas na żywienie naszeg menu. RIIver f Ó) ra a Index D teg celu zastsujemy najprstszy skrypt typu Rllver, który zmienia grafikę w mmencie, gdy kursr znajdzie się nad nią. Najpierw jednak w Phtshpie twieramy rysunki przedstawiające nazwy pszczególnych działów (te, którym przed chwilą nadawaliśmy hiperłącza) i przekształcamy je w taki spsób jaki chcemy, aby wyglądały p najechaniu na nie strzałką kursra. Stwrzne przyciski zapisujemy w istniejącym już flderze Obrazki, nadając im nazwy np. newsy.gif. indexy.gif itd., nie zmieniając czywiście tych pciętych wcześniej przez prgram. Jeżeli nie mamy pmysłu na zmianę wyglądu pszczególnych przycisków, plecam: przekreślenie wyrazu, pgrubienie czcinki czy przedstawiną w przykładzie zmianę klru tła (np. na jasn-żółty #EEEEA6). Ważne, żeby nie przesadzić z ilścią efektów rllver, gdyż wówczas nasza strna mże zacząć przypminać jarmark. W flderze Obrazki pwinny zatem znaleźć się p dwa GIF-y d każdeg hiperłącza: jeden ze stanem przycisku przed, a drugi p najechaniu na nieg kursrem. 12
dl Zmiana klru przycisków W Phtshpie twieramy pliki z przyciskami, znajdującymi się w stwrznym przez prgram flderze nazwie Obrazki. Otwieramy wybrany przycisk, który zstał zapisany z rzszerzeniem *.gif, np. menu_03.gif. Frmat ten (GIF) zajmuje mał miejsca, jednak uniemżliwia n ddawanie d brazka ddatkwych klrów. Musimy więc stwrzyć w Phtshpie nwy braz identycznej wielkści jak nasz przycisk (wielkść sprawdzamy pleceniem Obrazek> Wielkść brazka... (lmage>lmage Size); przy dkładnym wycięciu przycisków (Krk 5), brazek pwinien mieć rzmiary 121 na 17 pikseli, aby wyeliminwać pmyłkę, sprawdzamy wielkść każdeg przycisku) a następnie kpiujemy GIF-a na nw stwrzne tł. Za pmcą narzędzia nazwie Różdżka (skrót klawiszwy [W]), zaznaczamy całe szare ple przycisku i klrujemy je na żółty klr #EEEEA6). Pklrwane przyciski zapisujemy w flderze Obrazki, z dwlnym rzszerzeniem (najlepiej GIF lub JPEG), ale mówiącej ich zawartści nazwie (np. index.jpg). Inde i Index El- RIIver w HTML Wracamy d edycji kdu HTML. Aby skrypt zadziałał np. na napisie lndex" należy wpisać: <a href="" nmuseover='index.src="obrazki/index.jpg"' nmuseout='index.src="obrazki/menu_03.gif"'> <IMG SRC="Obrazki/menu_03.gif" name="index" WIDTH=121 HEIGHT=17 ALT="index"> <a lirei="" nmuseovei=mdex.src="obrazki/index.ipg" 1 nmuseout=index.src="obrazki/!liemi_03.gip"> <IMG SRC="Obraz3d/memi_03.gif" name="ujde.v WIDTH=121 HEIOHT=17 ALT=" "> Gdzie: newsy.gif - przycisk p najechaniu kursra, menu_03_03.gif- przycisk p puszczeniu przez kursr bszaru hiperłącza, czyli pdstawwa wersja rysunku nazwy działu. Aby móc używać na jednej strnie kilku efektów typu rllver musimy używać różnych nazw pszczególnych akcji" dla każdeg z hiperłączy. W tym przypadku rllver dtyczący przycisku lndex" nazwiemy np. index.src, c musimy pdać w sekcji name="index". Przepisując pwyższy kd należy zwrócić uwagę na znaki: ' raz ". Przy niektórych nazwach ba te symble występują kł siebie i łatw się pmylić. Wstawiamy menu na strnę W dkumencie html stwrznym przez prgram Phtshpa, tabelka z pciętym menu rzpczyna się d wpisu: <!-- ImageReady Slices (menu_03.gif) --> a kńczy na <!-- End ImageReady Slices --> Aby więc umieścić nasz rysunek na jakiejś strnie, wystarczy skpiwać w dpwiednie miejsce kd tabeli znajdującej się pmiędzy wspmnianymi pwyżej znacznikami. Przy przenszeniu menu d inneg dkumentu, należy pamiętać dknaniu dpwiednich zmian w pliku *.css, d któreg dwłuje się dana strna (wpisaniu linijki: IMG {brder=0 padding: 0px, Opx, Opx, Opx}). Pełny kd i rysunki przedstawineg w tutrialu menu mżna znaleźć na dłącznej d pisma płycie CD. } lndex Newsy Książki Histria Teksty Kntakt - -i i Ol di I CL 13
WEBDESIGN /z. fizyczneg punktu widzenia, klry t spsób w jaki mózg / zzłwieka interpretuje prmieniwanie elektrmagnetyczne dłiinn4ri fali w zakresie 350 d 700 nanmetrów. Prmieniwanie t jest zamieniane na impulsy mózgwe w brębie siateczki nerwu wzrkweg. Różne klry są interpretwane jak fale różnej długści. Fale długści mniejszej niż 350 nanmetrów t prmieniwanie ultrafiletwe (ang. ultravilet lub UV), zaś prmieniwanie długści fali wyższej niż 700 nanmetrów t prmienie pdczerwne (ang. infrared lub IR). KOLORY I D Spektrum zakresu długc^, Fal pstrzeganych przez k ludzkie jak pszczególne klry Tmasz Trejderwski NA WWW Określenia klr" używamy kilkanaście lub kilkadziesiąt razy dziennie, w praktycznie wszystkich aspektach. Ale czy kiedyklwiek zastanawialiśmy się czym tak naprawdę są klry i jak ich świadmie używać? KOŁO BARW Jest t rzwiązanie umwne plegające na wygięciu spektrum klrów zaprezentwaneg na pwyższej ilustracji, w ten spsób, że czerwień i filet stykają się ze sbą. W praktyce kł klrów jest użyteczne przy wyjaśnianiu jakjeden klrjest pwiązany z następnym raz przy pisie mechanizmów twrzenia nwych klrów przez mieszanie dwóch i więcej klrów już istniejących. Ol 03 "O Kł barw KOLORY PODSTAWOWE W życiu cdziennym mamy d czynienia z dwma systemami klrów. Dla mediów związanych z przedstawianiem brazu (mnitry, wyświetlacze LCD, telewizry) bwiązuje system RGB, któreg nazwa pwstała d pierwszych liter nazw twrzących g klrów pdstawwych, w tym przypadku: czerwneg (red), zielneg (green) i niebieskieg (blue). Jest t tak zwany addytywny system klrów. Płączenie trzech pdstawwych klrów w tym systemie daje klr biały. W przypadku mediów strnicwych (druk, rysunki, malarstw) mamy d czynienia z substraktywnym systemem klrów, któreg nazwa CMYK również utwrzna zstała na pdstawie nazw klrów, dpwiedni są t: niebiesk-zielny (cyjan), purpurwy (magenta), żółty (yellw) i czarny (black, znaczny przez K, dla dróżnienia d B używaneg dla znaczenia klru niebieskieg, blue w systemie RGB). Płączenie trzech pdstawwych klrów (prócz) czarneg w tym systemie, daje w efekcie klr czarny. System CMYK nadaje się lepiej d pisu barwy w druku, gdzie rla pchłaniania światła jest realizwana przez farbę drukarską, natmiast system RGB nadaje się lepiej d wyświetlania klru (np. na mnitrze), gdzie światł jest emitwane. W tym artykule zajmwać się będziemy klrami na strnach WWW, które są wyświetlane na ekranach mnitrów, 14 psd
paneli LCD i telewizrów, zatem skupimy się wyłącznie na mdelu RGB. JAK MONITOR WYŚWIETLA KOLORY? Jeśli przyjrzysz się z bliska mnitrwi lub telewizrwi (w tym pierwszym przypadku niezbędne mże kazać się użycie szkła pwiększająceg) ujrzysz tysiące klrwych (a dkładnie: czerwnych, zielnych i niebieskich) punkcików, pgrupwanych p trzy p jednym z każdeg z wymieninych klrów. Rzmiar tych punkcików raz ich ścisłe upakwanie pwdują, że pdczas spglądania na ekran z nrmalnej dległści nie rzróżniamy pjedynczych punktów, a raczej nasze k miksuje je, a my widzimy jeden knkretny klr. Właśnie dzięki tej niedv kładnści ludzkieg ka, m- \ żliwe stał się zaprezent- I: ; l wanie bardz dużej liczby ': : i klrów przy użyciu trzech ; pdstawwych barw raz ; J dpwiedni dbieranych inj / tensywnści świecenia każy dej z tych barw. Każdy wspmniany punkt mże świecić z 256 różnymi intensywnściami (lub 256 pzimami B Spsób wyświetlania klrów przez mnitr nasycenia) d 0, gdzie dany punkt nie świeci wcale, d 255 w którym t przypadku wybrany punkt świeci ze swją maksymalną mżliwą intensywnścią. Łatw jest więc bliczyć, że 256 stanów świecenia każdeg z trzech klrów, przemnżne przez siebie, daje liczbę: 256*256*256=16777216. Czyli, wykrzystując niedkładnść ludzkieg ka, mżna (mieszając trzy barwy pdstawwe) wyświetlić prawie siedemnaście milinów różnych klrów. Intensywnść świecenia (0-255) każdeg z trzech pdstawwych klrów, pdaje się w klejnści takiej jak występują nazwy tych klrów w nazwie systemu RGB. Czyli najpierw pdajemy intensywnść świecenia klru czerwneg, ptem zielneg, a na kńcu niebieskieg. Im mniejsza liczba pdana, tym ciemniej dany klrwy punkt świeci. Dla przykładu, układ 0,0,255 znacza, że punkty czerwny i zielny nie świecą wcale, a niebieski świeci w maksymalnej swjej intensywnści uzyskujemy klr niebieski. W innym przykładzie, układ 255,255,0 czyli punkty czerwny i zielny świecą z maksymalną intensywnścią, a punkt niebieski nie świeci wcale - trzymujemy czysty żółty klr. Według analgicznej zasady, nieświecenie się żadneg z punktów, czyli układ 0,0,0 daje klr czarny, a świecenie się wszystkich trzech punktów z maksymalną intensywnścią, czyli układ 255,255,255 daje klr biały. A przynajmniej taki klr pstrzega nasze k, gdyż w rzeczywistści t są nadal trzy pdstawwe klry: czerwny, zielny i niebieski. BEZPIECZNE KOLORY PRZEGLĄDARKI" Określenie t ukute zstał w kresie, kiedy maksimum mżliwści kart graficznych i mnitrów był wyświetlanie 256 klrów (czasy Windws 3.1 lub nawet wcześniejsze). Prjektanci pierwszej wersji przeglądarek internetwych wyszli z załżenia, że k. 40 klrów jest używanych d renderwania elementów systemwych (kna, klawisze, menu itp.). P djęciu tej liczby d 256 pzstał 216 klrów, stanwiących właśnie wą wspmnianą paletę bezpiecznych klrów przeglądarki. Select fregrund c tr: Czy ma sens graniczać się więc d stswania na strnach WWW tylk klrów Orily Web Llrs należących d tej grupy 216 bezpiecznych także becnie, gdy karty graficzne i mnitry bez prblemów wyświetlają braz, D Bezpieczne klry w 16, 24 czy nawet 32 bitach, składający się z milinów klrów? W tej kwestii zdania są pdzielne. P pierwsze należy pdkreślić, że mówimy wyłącznie klrach elementów niegraficznych (tekst, tł, bramwanie itp.). Obecnie zakłada się, że mniej niż 5% użytkwników na całym świe- SYSTEM SZESNASTKOWY Aby móc zapisywać klry na strnach WWW, niezbędne jest pznanie przynajmniej pdstaw szesnastkweg systemu liczbweg, gdyż takim właśnie peruje się w języku HTML i w arkuszach CSS. Jakklwiek, c będzie pkazane w dalszej części artykułu, mżliwe jest zapisanie każdeg klru w systemie dziesiętnym, zalecane jest panwanie i stswanie wyłącznie systemu szesnastkweg. W systemie dziesiętnym pdstawą jest liczba dziesięć. Każdą liczbę mżna zapisać w pstaci klejnych ptęg liczby dziesięć. Przykładw, liczbę 28 mżna zinterpretwać jak dwa-siem i zapisać w pstaci: 2x10 1 +8x10"=2x10+8x1=20+8=28. W systemie szesnastkwym reprezentacja i przeliczanie liczby jest identyczne, z jedyną różnicą, że pdstawą teg systemu jest liczba 16. Aby t siągnąć niezbędne jest wprwadzenie ddatkwych cyfr", które prócz pdstawwych dziesięciu cyfr systemu dziesiętneg (0 9) uzupełnią też d 15 wszystkie pdstawwe cyfry" systemu szesnastkweg. Mamy więc: A=10, B=11, C=12, D=13, E=14 i F - 15. Znaki d Ad F są traktwane jak brakujące cyfry" systemu szesnastkweg. Wiedząc, że jedyną różnicą jest pdstawa systemu, bardz łatw jest zrzumieć spsób reprezentacji i zapisu liczb w tym systemie. Dla analgiczneg przykładu przedstawineg pwyżej, mżna napisać, że 28 = 1C m) (M), c należy rzumieć, iż liczbie 28 w systemie dziesiętnym dpwiada liczba 1C w systemie szesnastkwym. A dlaczeg? Wszystk staje się jasne, jeśli, zgdnie z przekazaną pwyżej wiedzą, zinterpretujemy liczbę ICjakjedence i zapiszemy w pstaci 1x16'+Cx16"=1x16+Cx1 ={ cyfrze" C dpwiada liczba 12) = 1x16+12x1=16 +12=28. Łatw mżna zauważyć, że w bu systemach klejne cyfry numeruje się rsnącymi ptęgami. Czyli liczbę trzycyfrwą w systemie dziesiętnym rzbijemy na trzy cyfry, mnżne przez liczbę dziesięć pdniesiną klejn d ptęgi 2 (pierwsza cyfra d lewej), 1 (druga cyfra d lewej) i 0 (trzecia cyfra). W systemie szesnastkwym zrbimy tak sam, tylk, że pierwszą cyfrę z liczby trzycyfrwej przemnżymy przez 16 2, drugą przez 16', a trzecią przez 16. Dla liczby cztercyfrwej, rzbitej na cztery cyfry klejne mnżenia w bu systemach będą przez 10 lub 16 pdniesine d ptęgi 3, ptem 2, 1 i na kńcu d ptęgi 0. Łatw zauważyć, że 255 (m = FF (m). Tu d razu mamy dpwiedź dlaczeg intensywnść maksymalna t właśnie liczba 255. Knstrukcja kmputerów wymusza stswanie systemu szesnastkweg (lub dwójkweg) w praktycznie każdym przypadku, zamiast systemu dziesiętneg. A liczba 255 t w systemie szesnastkwym największa liczba, jaką mżna zapisać przy użyciu tylk dwóch cyfr". Wart jeszcze pamiętać, iż liczby jedncyfrwe (w systemie szesnastkwym) pprzedza się zerem -jest t takie jakby uzupełnienie, aby niezależnie d teg czy nasycenie danej barwy pdstawwej jest niskie (np. 1O (mi = A (W: ) czy wyskie, zawsze była na zapisywana jak liczba dwucyfrwa. Użyte w artykule przykładwe klry, byłyby więc zapisane w systemie szesnastkwym jak: 0000FF (niebieski, c dpwiada mdelwi 00, 00, 255 nasycenia klejn składwych czerwnej, zielnej i niebieskiej) lub FFFFOO (żółty, c dpwiada mdelwi 255, 255, 00).? 15
WEBDESIGN cie nadal krzysta ze sprzętu graniczneg d wyświetlania maksymalnie 256 klrów. T jeden z argumentów przemawiający za tym, żeby nie przejmwać się już becnie bezpiecznymi" klrami i stswać takie, na jakie w danym prjekcie jest zaptrzebwanie. Pnadt udwdnin, że w ekstremalnych warunkach (na starym i egztycznym sprzęcie raz w nietypwej knfiguracji karty graficznej) nawet bezpieczne" klry przestają być bezpieczne i nie są wyświetlane prawidłw. Reasumując, prblem nieprawidłweg wyświetlania klrów z większej palety niż 216 wydaje się już być przeszłścią. Nie mniej nie mżna pminąć teg zagadnienia w artykule klrach na strnach WWW jak, że mże t być rzwiązanie niektórych prblemów z wyświetlaniem strn internetwych, zwłaszcza na starszych kmputerach. NAZWY KOLORÓW Kilka lat temu, kiedy przeglądarki firmy Netscape były widącymi na rynku, firma ta zdefiniwała 140 angielskich nazw klrów, które mgły być stswane zamiast wartści szesnastkwych. W wielu przypadkach nazwy te były bardz dziwne, jak na przykład BlanchedAlmnd", MediumAquamarine" czy MediumGlfenRdYellw". Ten spsób kreślania klrów nie wszedł d ficjalnych specyfikacji języka HTML, ale pwinien być prawidłw interpretwany przez większść przeglądarek nawet w najnwszych wersjach. Obecnie zdecydwanie zaleca się jednak stswanie wyłącznie ntacji szesnastkwej. Pytanie więc, p c wspminać jeszcze tak zamierzchłym i niezalecanym spsbie kreślania klru? Otóż, ma n wymiar wyłącznie kmercyjny. Kiedy będziesz parał się twrzeniem serwisów internetwych w spsób prfesjnalny (zarbkw), przyjdzie d ciebie klient i pwie, że chce mieć dcień w klrze rdzaw-śliwkwym. Nie licz na t, że pwie pprszę treść w klrze #ca459f". Dbrze jest wtedy znać jedną, ustalną wartść szesnastkwą dpwiadającą danemu klrwi. MIESZAMY KOLORY W zasadzie, właśnie ta część prjektwania interfejsu graficzneg (wyglądu) strny WWW jest najważniejsza i zarazem najtrudniejsza. Właściwy wygląd strny i dbór klrów t sprawa, która na dzień dbry" przyciąga lub drzuca dwiedzająceg. Trudn jest udzielić właściwej i pełnej dpwiedzi na pytanie ile klrów użyć przy prjektwaniu daneg serwisu. Generalnie jednak bwiązuje jedna zasada, iż znacznie większe ryzyk niepwdzenia (siągnięcia brzydkieg efektu kńcweg) jest w przypadku użycia zbyt dużej ilści klrów niż gdy użyje się zbyt małej ilści klrów. Strna zawierająca zbyt duż klrów lub zbyt duż mieszanin (grup) klrów jest przede wszystkim nużąca i męcząca dla czu. Pnadt znacznie utrudnia dnalezienie infrmacji, której dbirca pszukuje w naszym serwisie. A nie wln zapminać, że spłecznść internetwa jest spłecznścią infrmacji. Oprawa graficzna, jakklwiek piękna, rzbudwana i dpracwana w szczegółach, zawsze pzstanie tylk ddatkiem d nśnika infrmacji, jakim pwinna być nasza strna WWW. Z drugiej strny, prawa graficzna zawierająca zbyt mał klrów mże być pstrzegana jak nudząca, pusta, czy niedpracwana. Jednakże nie zawsze tak musi być. Czasami mżna uzyskać interesujące wyniki przy zastswaniu ascezy klrystycznej, pdczas gdy zbyt wielka ilść klrów prawie zawsze prwadzi d niepwdzenia. DOBÓR KOLORÓW W tym miejscu mwa już sytuacji, w której twórca wybrał jeden pdstawwy klr, któreg będzie używał w serwisie. Omówimy kilka metd dbru klrów uzupełniających d wybraneg klru pdstawweg. Gradient barw Jedną z metd jest zasada gradientu barw, czyli dbierania klejnych klrów uzupełniających z grupy klrów stanwiących płynne przejście d wybraneg klru pdstawweg d czerni lub bieli. P wybraniu kilku klrów z tej linii, dbrym pmysłem jest ptraktwanie każdeg lub części z nich peracjami zmiany natężenia, nasycenia czy cieniwaniem, tak aby uzyskać lekkie dchylenie d pdstawwej linii przejścia klrów. Jednakże nawet pmim zastswania tych peracji uzupełniających, należy mieć na uwadze ryzyk uzyskania mntnii klrów. Ddanie czerni lub bieli jak statnieg z klrów przejściwych mże (aczklwiek nie musi) pprawić ten efekt. El Gradienty N x Kntrast klrów Teria kntrastu prpnuje użycie klrów kntrastujących ze sbą (mże być t kntrast wartści różne klry lub na przykład kntrast natężenia te same klry) dla pdkreślenia różnic lub uwypuklenia elementów isttnych. Kntrast mże być duży lub mały. Z reguły stsuje się duży kntrast pmiędzy klrem tekstu, a klrem tła. Należy jednak uważać, że zbyt duży kntrast lub nieprawidłw dbrane klry kntrastujące ze sbą, mgą prwadzić d uczucia nieprządku i bałaganu. Biel i czerń twrzą ze sbą najsilniejszy kntrast wśród klrów El. Kntrast jest głównie stswany d uwypuklenia dużych różnic, np. pmiędzy tekstem a tłem. Duży kntrast jest przyjemnym efektem dla ka, za t mały kntrast mże psłużyć d pdkreślenia subtelnych różnic np. w tle. El Najsilniejszy kntrast twrzą biel i czerń. Kntrast nasycenia raczej bywa wykrzystywany d uzyskania subtelnych efektów graficznych niż d pdkreślenia lub uwypuklenia czegś. Na przykład kilka klrów kntrastujących przez natężenie, przedstawinych w zestawieniu z szarym tłem mże być interpretwany przez ludzki wzrk jak przezrczystść H 16 psd
B Klry mniejszym nasyceniu mgą być pstrzegane jak przezrczyste. KOLOROWA ŚLEPOTA" Ostatnią sprawą w aspekcie klrów, której należy pamiętać, jest tak zwana klrwa ślepta" (mżna znaleźć inne tłumaczenia angielskieg kreślenia clur blindness"). Niecałe 10% internautów ma lekką wadę wzrku, plegającą na niedstrzeganiu pewnych klrów zestawinych w pewnych kmbinacjach. Niewłaściwe zestawienie klru tekstu i tła mże spwdwać, że treść zawarta na twjej strnie WWW będzie dla tych sób praktycznie nieczytelna lub trudn dstrzegalna. Przykładw, zielny tekst na czerwnym tle lub czerwny tekst na niebieskim tle, jest trudny d przeczytania nawet dla sób pzbawinych pisywanej wady, mim, że ba te układy klrów stanwią świetny przykład kntrastu. Natmiast układy biały-czarny i niebieski-żółty również są klrami kntrastującymi, ale w tym przypadku czarny tekst na białym tle lub żółty tekst na niebieskim tle, są łatwe d dczytania. D Czarny tekst na białym tle raz żółty tekst na niebieskim tle są czytelne i przyjemne dla ka. W zasadzie techniczny aspekt klrów na strnach WWW zstał w artykule wyczerpany. Dla sób chcących uzyskać ddatkwe infrmacje, plecam książki z zakresu HTML i CSS, szczególnie, gdy ba te zagadnienia są mawiane w jednej pzycji, gdyż z reguły autr kładzie wtedy nacisk na wspólne wykrzystanie bu raz na subtelne różnice między nimi. Aspekt artystyczny t temat rzeka i w zasadzie jest t zagadnienie niewyczerpane. Szukającym bardziej szczegółwych czy rzszerznych infrmacji, plecam serwis Clurs n the web", http://www.webwhirlers.cm/clrs/ raz pdbne pracwania internetwe. Nie sptkałem się z pzycją książkwą, która by mawiała czy chciażby pruszała t zagadnienie. Źródła infrmacji wykrzystane w artykule: ^ ZASTOSOWANIE: Szyfrwanie pufnych -^, ^ danych i prgramwania 0 Szyfrwanie pczty e-mail ~* Zabezpieczenie danych w razie kradzieży lub włamania przez Internet Sejf Wirtualny: zasada działania jak sejfu wmurwaneg w ścianę *G DATA Sftware Sp. z.. w Szczecinku nie pnsi dpwiedzialnści za używa ' prgramu TpSecret Next G. d ukrywania w kmputerach nielegalneg (pirackieg) Wielka Internetwa Encyklpedia Multimedialna: hasł CMYK, dstępne pd adresem: http://wiem.net.pl/wiem/ 009989.html Przewdnik Clurs n the web", httpj/www. webwhirlers. cm/clrs/ Tmasz Trejderwski, P prstu Internet", Wydawnictw Helin, Gliwice, grudzień 2001 r., ISBN 83-7197-681-X, Tmasz Trejderwski, P prstu Internet. Techniki zaawanswane". Wydawnictw Helin, Gliwice, lipiec 2002 <.. ISBN 83-7191-670-4. 146, 40 * SOFTWARE Sp. z.. ul. 28 Luteg 2 78-400 Szczecinek +48 94 372-96-50 i- +48 94 372-96-59 e-mail: biur@gdata.pl handel@gdata.pl http://www.gdata.pl SZUKAJ NASZYCH PRODUKTÓW W: RENOMOWANYCH SKLEPACH, HURTOWNIACH I HIPERMARKETACH
WEBDESIGN LAYOUT NAWIGACJA NA STRONIE WWW Magdalena Tmczyk Jeśli naszym celem jest stwrzenie przejrzystej witryny internetwej, wykrzystajmy grafikę d wsparcia czytelnej nawigacji. Elementy graficzne umieszczamy na strnie, p t, by przykuć uwagę internauty i zatrzymać g na dłużej. Trzeba jednak pamiętać, że przeładwanie strny elementami graficznymi utrudni wędrwanie p niej i mżemy siągnąć efekt dkładnie dwrtny zrazić czytelnika d swjej strny. Obserwując rzwój internetu w Plsce i na świecie, wydaje się, iz szybki dstęp d internetu jest nadal kwestią przyszłści. Większść użytkwników internetu łączy się z nim nadal przez mdemy, które siągają małe prędkści transferu danych. Dlateg trzeba zadbać t, aby nie umieścić zbyt dużej ilści grafiki na strnie, a także t, by umieszczane pliki graficzne miały niewielkie rzmiary. Adbe Phtshp raz inne dstępne becnie prgramy d bróbki grafiki wypsażne są w narzędzia pzwalające zptymalizwać rzmiar twrznych plików. Umieszczając elementy graficzne należy kierwać się zasadą, iż strna pwinna ładwać się nie dłużej niż minutę przy prędkści 28,8 kb/s. STANDARDOWE MENU Twrząc menu strny należy pamiętać tym, aby lista dnśników d pdstrn graniczała się d najważniejszych działów. Wprwadzenie zbyt dużej ilści dnśników wprwadzi chas infrmacyjny i utrudni internaucie znalezienie infrmacji. Obecnie mżna wyróżnić kilka rdzajów stylów prjektwania strn WWW. Jednym z dróżniających te style elementów jest miejsce zamieszczenia menu nawigacyjneg. W stylu tradycyjnym menu umieszcza się p lewej strnie witryny. Są t przyciski lub łącza tekstwe d najważniejszych działów. D teg spsbu nawigacji przyzwyczajna jest większść internautów, dlateg też trafiając na strnę z tak rzmieszcznym menu pruszają się p niej intuicyjnie, c zdecydwanie ułatwia im dszukanie żądanej infrmacji. Za negatywy teg spsbu uważa się małą ryginalnść prjektu, a także dużą dległść, jaką musi pknać kursr myszki d paska przewijania p prawej strnie d menu p lewej. Alternatywą dla teg wyjścia jest umieszczenie menu p prawej strnie witryny. Zaleta bliżej d paska przewijania d nawigacji p tej samej strnie. Jednak badacze internetu twierdzą, iż wzrk internauty łatwiej wyszukuje infrmacje znajdujące się p lewej strnie ekranu kmputera i szybciej je dstrzega. Dla bu pwyższych spsbów istnieje pewne ryzyk pdczas budwania strn partych na tzw. ramkach, gdzie layut knkretnej strny sknstruwany jest z kilku (zwykle dwóch lub trzech) strn wbudwanych w ramki i widcznych jedncześnie dla użytkwnika. Otóż, gdy menu będzie zawierał zbyt długą listę dnśników, wówczas część z nich mże nie być widczna przy glądaniu strny w mniejszej rzdzielczści, a wprwadzenie paska przewijania zepsuje efekt wizualny całej strny. Jednym z craz częściej używanych frmatów strny WWW jest frmat gazetwy, w którym menu nawigacyjne w pstaci przycisków umieszcza się u góry strny, zwykle pd bannerem reklamwym, jakąś drbną grafiką zdbną i lg firmy. Menu umieszczane na dle witryny jest zwykle menu tekstwym i służy głównie ułatwieniu nawigacji, gdy strna przewinięta jest w dół i pwrót d górneg menu wymaga jej przewinięcia. Jednak mżna spróbwać tak sknstruwać strnę, aby menu główne znajdwał się na dle strny (jednak wtedy musi pzstać nieruchme, bez mżliwści przewinięcia dlnej części strny), natmiast zasadnicza część strny pwinna mieć mżliwść przewijania. Mżna wtedy wkmpnwać napisy linki w atrakcyjną grafikę, pamiętając jednak tym, by nie zgubiły się w jej nadmiarze. Layut niestandardwy na dle strny MENU INNE ROZWIĄZANIA Jeśli strna zawiera bardz duż dnśników d klejnych działów, wyjściem jest stwrzenie tzw. menu kaskadweg parteg także na elementach graficznych (pr- f z zastswaniem menu p prawej strnie psć
i stkątach wybranej wielkści i klrach), a żywineg" przez ddanie dpwiednich skryptów (pisanych np. w JavaScript). Działanie teg menu pdbne jest d działania prgramów znanych użytkwnikm systemu Windws. Dalsze dnśniki pzstają ukryte d mmentu najechania" na nie kursrem myszki lub kliknięcia. Kliknięcie lub najechanie" myszką pwduje rzwinięcie się klejneg paska z przyciskami. H Zastswanie menu kaskadweg Innym wyjściem dla strny niezawierającej zbyt dużej ilści dnśników jest też stwrzenie tzw. pływająceg menu, które spada" w dół wraz z przewijaniem strny w dół lub dwrtnie pdnsi się d góry w mmencie pwrtu d góry strny. W takim menu wykrzystujemy zwykłe przyciski graficzne twrzne d typwych strn WWW. Zaletą teg spsbu jest t, że menu nawigacyjne zawsze mamy pd ręką". Jednak wielu internautów skarży się na sweg rdzaju natrętnść elementów, które jakby przyklejają" się d myszy i śledzą każdy ruch użytkwnika. PRZYCISKI NAWIGACYJNE Ważnym elementem ułatwiającym nawigację w różnych rdzajach menu jest stswanie przycisków, które w mmencie najechania" na nie kursrem myszki zmieniają swój klr lub wypukłść. Aby ułatwić internau- H Różne rdzaje przycisków cie wybór klejnej pdstrny z listy przycisków menu, mżna też wyróżnić przycisk strny, na której becnie się znajduje (np. zmienić jeg klr, wypukłść lub pdświetlenie). ROZPLANOWANIE STRONY - GRAFIKA ODDZIELAJĄCA OD SIEBIE DZIAŁY STRON Jeśli twrzymy witrynę w frmacie gazetwym (menu u góry strny, reszta strna pdzielna jest na klumny i wiersze), wskazane jest ddzielenie d siebie pszczególnych działów witryny na danej pdstrnie. Ułatwi t dwiedzającym naszą strnę wzrkwe garnięcie tematyki strny, a także ddzielenie d siebie pszczególnych działów lub infrmacji, które chcemy wyszczególnić. Mżna t zrbić pprzez umieszczenie nagłówków w pszczególnych kmórkach tabeli. Nagłówki raczej pwinny charakteryzwać się tym samym stylem (krój pisma, klrystyka, kształt itd.). Pszczególne kmórki tabeli mżemy ddzielić d siebie delikatnymi liniami, krpkami, lub czymś c w subtelny spsób ddzieli pszczególne działy. INNE ELEMENTY GRAFICZNE UŁATWIAJĄCE NAWIGACJĘ Częst stswanymi elementami graficznymi są iknki brazki kjarzące się z kreślnymi czynnściami, np. kliknięciem ikny kperty twrzymy strnę prwadzącą d pczty elektrnicznej, znak zapytania przeniesie nas d systemu pmcy, dmek ustawi glądaną strnę jak startwą, a iknka flderu dda strnę d ulubinych. Kiedy twrzymy strnę wieljęzyczną, t zamiast napisów mżemy umieścić iknkę z flagą daneg kraju. Wówczas dwiedzający nie ma wątpliwści, gdzie znajdzie strnę mówiącą" w zrzumiałym dla nieg języku. Wart też zrbić dnśnik z lg firmy umieszczneg na każdej z pdstrn (mże t być mapa brazu). Ułatwi t internaucie pwrót d strny głównej w dwlnym mmencie. Są t rzwiązania ppularne i częst stswane na strnach internetwych. Mże są mał ryginalne, ale należą d tych elementów, dzięki którym dwiedzający pruszają się p strnach intuicyjnie - a t między innymi chdzi! NARZĘDZIA PRACY Bardz przydatnym narzędziem d przygtwania grafiki internetwej jest np. Adbe Phtshp. Prgram ten bardz ułatwia pracę w zakresie przygtwania graficznych elementów strny WWW. Dstępne w nwszych wersjach Phtshpa narzędzie Odcięcie pzwala pciąć" przygtwany prjekt na pszczególne brazki gtwe elementy strny WWW (np. na przyciski) i jedncześnie zachwać je w warstwach. Ułatwia t mdyfikację pjedynczeg brazka nawet bardz złżnej graficznie strny WWW, bez kniecznści mdyfikacji pzstałych brazków części składwych strny. Na ddatek każde dcięcie z teg sameg prjektu mżna zapisać jak inny rdzaj pliku: Jpg,.g/7 lub.png. Przy pmcy Adbe Phtshp lub ImageReady z łatwścią przygtujemy pdświetlane przyciski lub mapy brazu. Pamiętajmy tym, że braz częst ddziałuje bardziej niż słw. Wykrzystajmy grafikę na strnach w taki spsób, aby ułatwić i uprzyjemnić internaucie pruszanie się p naszej witrynie. Jedną z żelaznych zasad stswanych przez webmasterów pwinna być zasada dwóch klików". Plega na na tym, iż za pmcą jedynie dwóch kliknięć internauta przensi się d pszukiwanych infrmacji. Należy też zwrócić uwagę na klrystykę witryny, w tym także na tł. Ciemne tł jest nastrjwe i tajemnicze, jednak pdczas czytania większej ilści tekstu bardz męczy wzrk. Internet t craz pwszechniejsze medium, któreg braz jest niedłącznym elementem. Obraz na strnach WWW prwadzi za rękę, skraca i ułatwia prces myślwy, który niejak dzieje się pza świadmścią dwiedzająceg witrynę. Zestaw zawartych tu wskazówek wart wziąć pd uwagę pdczas prjektwania strny WWW jak pierwszy krk d twrzenia funkcjnalnej strny internetwej. Mapy brazu Mapa brazu t nic inneg, jak brazek p którym mżna klikać, a w zależnści ód teg w którym jeg bszarze klikniemy przensi nas d wybranej infrmacji. Najczęściej stsuje się t rzwiązanie w mapie będącej mapą kraju, reginu czy świata, dla pkazania punktów w których dana firma zaistniała, czy też ma swje przedstawicielstwa, bądź d wyszukania infrmacji w brębie daneg reginu. Zastanówmy się, czy zamiast rzwijaneg menu (tzw. belki) z nazwami części kraju czy reginu nie lepiej stwrzyć mapę brazu z mżliwścią wybrania z niej interesująceg internautę reginu. Dl r OT. s 5 19