Professional Documents
Culture Documents
MAGAZYN
UŻYTKOWNIKÓW^
PROGRAMU ADOBE
PHOTOSHOP
Cyfrowy sann
retusz alfoć sesyj
Chirurgia
Obróbka
ustawiaaie
<
KONK
WYGRAJ
ADOBE PHOTOSHOP CS
*m&
GIF - $ y
przegląd pr|gram-a INDEX: 383368
ISSN 1732-2200 02>
prace graf?
projekt opakowania na soki
771732 220028
r
Od redakcji
Fotografia cyfrowa w zaskakującym tempie wkracza w nasze życie. Aparaty cyfro-
we powoli wypierają klasyczne, a zdjęcia zamiast do albumu trafiają najczęściej na
płytę CD. Posiadając program do obróbki zdjęć, jedynie wyobraźnia może nas ogra-
niczać w tworzeniu nowych, atrakcyjniejszych fotografii. W tym numerze .psd najwię-
cej uwagi poświęciliśmy właśnie edycji zdjęć. W kilku tutorialach pokazaliśmy co zro-
bić, żeby zdjęcie wyglądało jak z okładki pisma o modzie, jak przygotować obraz głów-
ny i jak wykonać śmieszny fotomontaż. A dla prawdziwych entuzjastów aparatów cy-
frowych mamy nie lada gratkę — przegląd najnowszych aparatów zaprezentowanych
na targach PMA 2004.
W piśmie pojawiły się dwa nowe działy Protechnika i Portfolio. Pierwszy dotyczyć
będzie przygotowania prac do konkretnego zastosowania np. reklamy prasowej, czy
bilboardu. W tym numerze pokazujemy, jak wygląda proces projektowania kartonowe-
go opakowania na soki. W dziale Portfolio będziemy udzielać wskazówek, które pomo-
gą Warn przygotować dobrą prezentację swoich prac w Internecie. W piśmie znajdzie-
cie tutorial, który pokazuje jak przygotować znak chroniący nasze grafiki przed niele-
galnym ich wykorzystywaniem.
Zaczęła się wiosna — to dobra okazja, żeby przesłać znajomemu piękną kartkę
z życzeniami. W sieci możemy znaleźć dużo serwisów oferujących kartki okoliczno-
ściowe, ale wykonana własnoręcznie zrobi na pewno większe wrażenie na odbiorcy.
Zachęcam zatem do spróbowania swoich sił w projektowaniu własnej pocztówki.
Dla osób, które zajmują się projektowaniem animowanych GIFów, przygotowaliśmy
zestawienie najpopularniejszych programów do tego przeznaczonych. Zachęcam do
przeczytania tego artykułu, może wśród zaprezentowanych programów, będzie taki,
który i Warn przypasuje. Dodam, że wszystkie omawiane programy zamieszczone są
na płycie CD dołączonej do pisma.
Dodatkowo, na płycie znajdziecie zdjęcia Royality Free przygotowane do druku
w formacie A4, które można wykorzystać we własnych projektach.
Retusz portretów
AGNIESZKA WAWRZYN1ECKA
WEBDESIGN
o
Dl
ro
Emotikony pod lupą
o. TOMASZ ZELEK
s
Ukryte zdjęcia (CtrI+A Pictures)
MARIUSZ DUBIELECKI
kwiecień/maj 2004
1
t/1
Rozmieszczenie elementów
na stronie WWW
psd
jest wydawany przez
ŁUKASZ STRZELEC Software-Wydawnictwo Sp. z o.o.
Redaktor naczelna:
Agnieszka Wawrzyniecka
SYLWETKA agaw@software.com.pl
Redaktor:
kwiecień/maj 2004
Opis CD
WERSJA 30-DNIOWA
Adobe Photoshop CS (Win/Mac)
www.adobe.com
DODATKI
10 ZDJĘĆ ROYALITY FREE od firmy Photosubstnace Filmy instruktażowe i pliki źródłowe pomocne przy wyko-
www.photosubstance. com nywaniu ćwiczeń zawartych w magazynie.
kwiecień/maj 2004
(gl \ P h o t o s h o p CS wersja 30-dnjpwa
Pełne wersje: 10 ZDJĘĆ ROYALITY FREE
Xara3Dv.3 ;
Xara Webstyle v.2 Demo:
Do obróbki zdjęć:
>• Adesign; Ameri-lmager;
ImageWrap; Photogenics
_ Neo Paint; Pro Motion v.4.7
Photo Meister v.2.45a
GIF Movie gear v.4
, Activ GIF Creator v.2.1.8
\ Animate Me v.1.3
I Graphic_gale
I Do tworzenia GIFów:
' GIF Animator
Id Framerv.1.0.0
Patchwork v.1.1.
FontTwister v.1.3
Inne:
Panowear, Snlco v.1.5,
innedema: 360 Professional Suitę v.3.5
Y , „ ,n w c Pannorama factory v.3.1.
Adid J U V.J ... . _ __
Y y Micoroangelo v.5.58
XaraScreenMaker3D CD Label Designer. ^
Xara Webstyle v.4.0 FarteMorph
OKŁADKA
2 godziny
film
pliki
Łukasz Pabian
Łączenie obrazów jest jedną z pierwszych rzeczy, której próbuje każdy użytkownik programów
graficznych. Powstałe w ten sposób fotomontaże zazwyczaj nie bardzo wiadomo jak można wy-
korzystać. Nam udało się znaleźć jedno z rozwiązań, a mianowicie efekt ten wykorzystamy przy
tworzeniu okładki do naszego magazynu. Jakość efektu końcowego jest jedynie zależna od na-
szej wyobraźni, pomysłu i użytych zdjęć (W Internecie można znaleźć katalogi z darmowymi zdję-
ciami — zdjęcia użyte przy realizacji okładki pochodzą z serwisu www.sxc.hu). Poniższy tutońal
opisuje powstawanie wersji testowej (beta) naszej okładki — różni się ona w niewielkim stopniu
od finalnej wersji.
Ceglana ściana
kwiecień/maj 2004
zmniejszamy Krycie do 50%, czynność można powtórzyć by uzy-
skać zadowalający nas cień.
Kamienna ściana
Trawa
Manekin
kwiecień/maj 2004
OKŁADKA
Dodajemy zegar
Biedronki
10 kwiecień/maj 2004
J2
Graffiti i plamy
Ważka
m Ramka
kwiecień/maj 2004 11
EDYCJA ZDJEC
20 min
film
pliki
„'•••«.••.
\
Szybkie
wygładzanie skóry
Tomasz Urban
Zapewne nie raz zdarzyło się Warn poddać chwili zadumy przy oglądaniu zdjęcia pięknej
osoby, np, w czasopiśmie o modzie. Z ogromną dozą pewności zakładam, że nie mogliście
wyjść z podziwu, jak to możliwe, aby skóra modelki była tak niesamowicie aksamitna, atłasowa
i gładka? Czy to kwestia odpowiednio dobranego miękkiego oświetlenia? — owszem, w dużej
o mierze. A może niesamowitej jakości drogich kosmetyków?— Tak, bywają przydatne... Niemniej,
di
ra
E gdy skóra i inne fragmenty zdjęcia nadal pozostają niedoskonałe, niezbędną pomocą może
"O
okazać się możliwość poprawienia zdjęcia nieskomplikowanym trikiem w Photoshopie.
12 kwiecień/maj 2004
-B 52
s
•o
Rozmycie gaussowskie
Maska warstwy
Rozjaśnianie oczy
-o
kwiecień/maj 2004 13
EDYCJA ZDJĘĆ
20 min
film
Retusz portretów
Agnieszka Wawrzyniecka
Gdy robimy zdjęcie do dowodu osobistego, aibo prawa jazdy chcielibyśmy wyglądać na nim jak
najładniej. Dzięki Photoshopowi szybko i skutecznie możemy uatrakcyjnić nasz portret. Wystarczy
poznać kilka trików, dzięki którym twarz będzie bez plamek, czy krostek, nie będzie się świecić,
a zęby będą idealnie białe. Metody te sprawdzają się na każdym zdjęciu, wiec zachęcam do
poprawiania natury na własnych portretach.
USUWANIE PIEGÓW
Dużo ludzi uważa, że piegi odmładzają i dodają uroku, ja osobi-
ście swoich nie lubię i pewnie znajdą się ludzie, którzy myślą tak
jak ja. Jest kilka metod na usunięcie tych niechcianych plamek, za-
prezentuję dwie.
Pędzel korygyjący
Pędzel historii
14 kwiecień/maj 2004
o
ta.
WYGŁADZANIE CERY
Każdej kobiecie marzy się cera gładka jak u modelek na rekla-
mach różnego rodzaju kremów. Nie jest chyba sekretem, że tak
piękną cerę na zdjęciach zawdzięczają grafikom, którzy w umiejęt-
ny sposób ją wygładzają. W artykule „Szybkie wygładzanie" poka-
zana została jedna z metod na uzyskanie pięknej cery. Ja pokażę
trochę inną, ale równie efektowną.
Mediana
WYBIELANIE ZĘBÓW
Jeśli natura nie obdarzyła nas pięknymi, białymi zębami możemy
poprawić w Photoshopie ich wygląd w ciągu kilku minut.
Za pomocą dowolnego narzędzia do wykonywania selekcji (ja wy-
korzystałam Różdżkę (Magie Tool)) zaznaczamy interesujący
nas obszar. Ustawiamy Wtapianie (Feather) (Zaznacz>Wtapianie
Select>Feather) na 1 piksel. Następnie przechodzimy do menu
Obrazek>Dopasuj>Barwa/Nasycenie (lmage>Adjustments>Hue/
Saturation) wybieramy Żółcie (Yellows) i przesuwamy suwak Ol
kwiecień/maj 2004 15
[.l EDYCJA ZDJEC
20 min
KOBIETA
film
pliki
zmienną jest...,
czyli fotomontaż w Photoshopie
Magdalena Tomczyk
Czy kobietę można zmienić w mężczyznę bez przeprowadzania operacji plastycznej? Dzięki
czarodziejskim narzędziom Photoshopa jest to możliwe. Wystarczy odpowiednie zdjęcie i pomysł.
Ograniczeniem może być jedynie nasza własna wyobraźnia. Na dobry początek wykorzystajmy
zdjęcie załączone na płycie.
16 kwiecień/maj 2004
3
Wybielenie zębów
kwiecień/maj 2004 17
EDYCJA ZDJĘĆ
Rozjaśnienie rzęs
18 kwiecień/maj 2004
EDYCJA ZDJĘĆ
Tworzenie
20 min
obrazu
główne
film
pliki
Lech Jaszowski
Bez względu na to czy używamy aparatu cyfrowego, czy też iustrzanki, po zrobieniu zdjęć powin-
niśmy dołożyć wszelkich starań, aby nasze fotografie wyglądały jak najlepiej. Wszystkie czynno-
ści, które w tym celu powinniśmy wykonać, wiodą do utworzenia tzw. obrazu głównego. Obraz
główny jest plikiem graficznym o możliwie najlepszej jakości — punktem wyjścia do ewentualne-
go, późniejszego wykorzystania naszego zdjęcia we wszelkiego rodzaju projektach graficznych.
Artykuł ten opisze wszystkie czynności i zabiegi, które są niezbędne do otrzymania wcześniej
wspominanego obrazu głównego.
n Wypoziomowanie zdjęcia
Jeśli zrobione przez nas zdjęcie jest obrócone pod kątem 90°,
to do pozycji pionowej obracamy je wybierając: Obrazek>Obróć
obszar roboczy>90° w prawo (lub w lewo) (lmage>Rotate
Canvas>90° CW (lub CCW)). Jeżeli natomiast chcemy wypro-
stować linie horyzontu lub obrócić zdjęcie z innego względu, to
w tym celu wybieramy narzędzie Miarka (Measure Tool) i rysuje-
my linię prostą wzdłuż horyzontu (tutaj wzdłuż linii brzegowej je-
ziora) — parametr A na pasku narzędzi pokazuje kąt nachyle-
nia (1,3°—jednak nie trzeba go zapamiętywać). Kolejno wybiera-
my Obrazek>Obróć obszar roboczy>Swobodnie... (lmage>Rotate
Canvas>Arbitrary...) — dokładna wartość kąta i kierunek obrotu są
już wypełnione. Wystarczy wszystko zatwierdzić przyciskiem [OK].
Kadrowanie zdjęcia
20 kwiecień/maj 2004
t £
rzędzie Kadrowanie (Crop Tool) [C], zaznaczamy obszar, który ma O
być pozostawiony i zatwierdzamy całą operację klawiszem [Enter].
Po skadrowaniu należy zapisać plik pod inną nazwą, aby oryginał
móc jeszcze w inny sposób wykadrować w przyszłości.
Dopasowanie nasycenia k o l o r ó w
kwiecień/maj 2004 21
EDYCJA ZDJEC
Wyostrzenie zdjęcia
22 kwiecień/maj 2004
EDYCJA ZDJEC
a.
Tomasz Urban
film Jedną z częściej wykonywanych „operacji" na zdjęciach jest wycinanie obiektów z tła. Sposobów
na rozwiązanie tego zgryźliwego problemu w Photoshopie jest co najmniej kilka. Choć poziomem
pliki trudności nieznacznie od siebie odbiegają, toteż ich zastosowanie bywa różne. W poszczególnych
częściach artykułu przedstawię trzy sposoby na pozbycie się związanego z obiektem tła.
EKSTRAKT Z PAPIERU
Opcja Wydziel (Extract) dostępna w Photoshopie od wersji 6,
umożliwia nam szybką (wręcz odręczną) selekcję obiektu poprzez
zarysowanie jego krawędzi jaskrawym „flamastrem" oraz zdaniu
się na łaskę lub niełaskę algorytmu rozpoznawania kontrastu brze-
gów zaznaczenia. Niebywałą zaletą tego rozwiązania jest ogrom-
na szybkość wycinania, pomocna przy obróbce wielu plików, oraz
najszybsza z dostępnych w Photoshopie opcji separowania od tła
znienawidzonych przez grafików włosów. Wadąjest niska dokład-
ność algorytmu, kierująca użyteczność narzędzia w stronę wszela-
kiej maści grafik „ekranowych" (www, aplikacje itp.), gdzie oszukać
oko jest o wiele łatwiej.
Wydziel
Wypełnianie selekcji
•a!
24 kwiecień/maj 2004
E
MAGNETYCZNA POMARAŃCZA
Opcja Lasoo Magnetyczne (Magnetic lasso) umożliwia nam bardzo
szybkie obrysowanie ścieżką naszego obiektu. Dzięki regulowane-
mu obszarowi automatycznego przyciągania ścieżki do krawędzi
oraz ustawialnemu progowi kontrastu, dostajemy wygodne narzę-
dzie selekcji. W tym przypadku również zaletą jest szybkość, która
niestety nie idzie w parze z jakością. Kapryśny algorytm przyciąga-
nia do krawędzi przy mało kontrastowych spotkaniach tła z obiek-
tem, potrafi płatać figle.
Obrysowywanie krawędzi
Smacznego!
__ Zaznaczanie
U "\ Ol
Otwieramy plik buto.f/f znajdujący się na dołączonym do czasopi- O
sma CD 2. d>
03
Narzędziem Zaznaczenie eliptyczne (Eliptical Marquee) [M], lub E
[Shift]+[M] zaznaczmy okrągły obszar, którego krawędzie będą
zgrywały się z obłymi kształtami żarówki.
Wyciągamy prowadnice z linijek: pionowej i poziomej (jeśli
nie są włączone: [Ctrl]+[R] i ustawmy je w taki sposób, jak wi-
dać na rysunku. Jeśli mamy włączoną opcję Przyciągaj (Snap)
[Shift]+[Ctrl\+[;] prowadnice zostaną przyciągnięte zarówno do kra-
wędzi, jak i do środka obszaru zaznaczenia.
kwiecień/maj 2004 25
EDYCJA ZDJĘĆ
Narzędzie Pióro
Edycja krzywych
Tworzenie selekcji
26 kwiecień/maj 2004
Jak zrobić tekst wokół jakiegoś obiektu? Jak pozbyć się efei
Aby zrobić tekst wokół obiektu klikamy na ikonie z liter- Efekt tem można usunąć na kilka sposobów, np. przez za-
ką T {Type Tool), po czym piszemy wybrany tekst. Należy stosowanie Stempla (Clone Stamp Tool) lub bardzo szybką
jednak pamiętać, by tekst nie był za długi ponieważ istnie- metodą polegającą na wybraniu miękkiego Pędzla (Brush),
je możliwość, że nie zmieści nam się wokół przedmiotu, po- zamianie Trybu (Modę) na Barwa (Hue) i zamalowaniu czer-
za tym nie należy wpisywać od razu całego tekstu ponieważ wonych źrenic.
możliwość wygięcia napisu jest tylko do 180°. Kolejnym kro-
kiem, po napisaniu tekstu, jest otwarcie panelu Zniekształ- Jak połączyć wybrane warstwy?
cenie tekstu (Warp Text). W tym celu należy kliknąć na pa-
sku narzędzi na ikonke z literą T i strzałkami pod tą lite- Aby połączyć warstwy należy przejść do panelu Warstwy
rą Utwórz zakręcony tekst (Create warped text). Wybiera- (Layers), zaznaczyć wybrane przez nas warstwy (kliknąć
my Styl/Łuk (Style/Arć). Tam, suwakami można dostosować koło tego małego oczka (musi pojawić się spinacz w tym
promień łuku oraz efekt dla liter. miejscu) i wybrać z menu Warstwy>Połącz zaznaczone
(Layers>Merge Linker). Można też zrobić to w inny spo-
Jak zrobić obwódkę z przerywanej linii? sób. Powiedzmy, że chcemy zaznaczyć tylko niektóre war-
stwy, a pozostałe niech będą nie widoczne. W tym celu kli-
Do stworzenia takiej obwódki będzie potrzebna ścieżka. kamy w panelu Warstwy na oczko po lewej stronie danej
Najprościej ją zrobić wykorzystując narzędzie Kształt wła- warstwy (warstwa stanie się niewidoczna). Następnie prze-
sny {Custom Shape Tool), po wybraniu którego klikamy na chodzimy do menu Warstwy i wybieramy Połącz Widoczne
ikonie Ścieżki (Path) (wygląda jak stalówka w prostokącie). (Merge Visible)
Dzięki temu rysowany kształt będzie widoczny w postaci
ścieżki. Należy wybrać dowolny kształt i narysować go na Co oznacza „Żaden z pikseli nie jest zaznaczony w stop-
obrazku. Wybieramy Pędzel (Paint Brush Tool) i ustawiamy niu większym niż 50%, więc ramka zaznaczenia nie bę-
pędzel o kwadratowej końcówce, wielkości kilkunastu pik- dzie widoczna" („No pixels are morę than 50% selected.
seli. Następnie przechodzimy do palety Pędzle (Brushes), The selection edges will be not visible")?
gdzie w zakładce Kształt pędzla (Brush Tip Shape) zmniej-
szamy Zaokrąglenie (Roundness) do 25%, a Odstępy (Spa- Jest to typowy błąd — należy sprawdzić wartość Wtapia-
cing) zwiększamy do 150%. W zakładce Dynamiki kształtu nia (Feather) podczas zaznaczania, powinna być na 0 lub
(Shape Dynamice) ustawiamy Wahanie kąta (Angle Jitter) bardzo nisko.
na 0%, a Kontrola (Control) na Kierunek (Direction). Teraz
pozostaje udać się do palety Ścieżki (Paths), gdzie należy Dlaczego czcionka mimo zmiany jej punktacji nadal po-
kliknąć na ikonie Obrysuj ścieżkę pędzlem (Stroke path with zostaje duża? Jak temu zaradzić?
brush). Na koniec usuwamy ścieżkę i gotowe.
Czasem przy przenoszeniu z jednego obrazka do inne-
Jak nadać zdjęciu jeden odcień? go całej warstwy z tekstem pojawia się problem wielkości
czcionki, to jeden z możliwych przypadków —jest ich wię-
W celu nadania zdjęciu jednego odcienia należy wejść cej. Różne wielkości czcionek pisanych przy tej samej punk-
w menu Obrazek>Dostosuj>Barwa Nasycenie (lmage> tacji np. 8 i przy tej samej wielkości obrazka w pikselach
Adjustments>Hue Saturation). Zaznaczyć Koloruj (Colorize) (np. 500x500) są spowodowane różnymi rozdzielczościa-
i suwakami ustawić interesujący nas efekt. mi (wartościami pola Rozdzielczość Resolution). Jeśli w tym
tkwi problem, zmiana rozdzielczości dokumentu może po-
Jak można ze zdjęcia kolorowego zrobić zdjęcie tylko móc (przy wyłączonej opcji resample oczywiście).
z 2 kolorami np. czerwonym i żółtym ?
Jak podzielić obraz na równe mniejsze części?
W tym celu należy przełączyć tryb na skalę szarości —
Obrazek>Tryb>Skala szarości (lmage>Mode>Crayscale), Należy otworzyć zdjęcie i narzędziem Odcięcie (Slice To-
następnie wybrać Bichromię (Duotone), kliknąć na kolo- ol) kliknąć prawym klawiszem myszki na obrazku, wybiera-
ry znajdujące się tam i wybrać takie, które nas interesują jąc Podziel odcięcie (Divide Slice). W oknie ustawień mo-
(w tym przypadku będzie to czerwony i żółty). żemy teraz określić sposób, w jaki ma zostać podzielone
zdjęcie. Załóżmy, że chcemy uzyskać 10 równych części.
Czy istnieje możliwość skonwertowania plików Photo- Zaznaczamy Podziel poziomo 5 odcięć pionowo, równo roz- Ol
o
shop a (*.psd) do Flash'a? mieszczone (DMde Horizontally Into 5 slices down, evenly O)
m
spaced) oraz Podziel pionowo 2 odcięcia poziomo, równo E
Oczywiście, że istnieje możliwość skonwertowania plików rozmieszczone (DMde Vertically Into 5 slices down, evenly "O
i/)
Photoshop'a do Flash'a, do tego służą specjalne programy. spaced). Pierwsza opcja odpowiada za podział obrazu w po-
Jednym z nich jest PSD2FLA. Jednak lepszym rozwiąza- ziomie, druga w pionie. Po zatwierdzeniu zmian powinniśmy
niem jest zapisanie grafiki w formacie png, który jest „łatwo otrzymać zamierzony efekt. Kolejnym krokiem jest zapisa-
przyswajany" przez Flash'a. nie na potrzeby sieci Zapisz dla Weba... (Save for Web).
Marcin Wardęga
kwiecień/maj 2004 27
EFEKTY
(V)
45 min
tt-
film
pliki
Wiosna idzie!
Magdalena Cyrczak
Jest wiele okazji żeby wysłać kartkę z życzeniami do bliskiej osoby. Wówczas zazwyczaj sięgamy
po gotowe kartki w kiosku lub w Internecie. Ale zawsze przecież możemy zrobić taką kartkę sami.
Własnoręcznie wykonana kartka sprawi nam, jak również naszemu adresatowi o wiele więcej
radości i przyjemności. My będziemy mieli satysfakcję z wykonania oryginalnego, niepowtarzal-
nego projektu, natomiast adresat będzie się cieszył z otrzymania nieszablonowej, „wyróżniającej
się z tłumu" kartki. To jak będzie wyglądać nasza kartka zależy jedynie od naszej wyobraźni
i umiejętności. Poniższy artykuł pokaże jak stworzyć jedną z takich kartek.
Tematyka
D-
o Tematem kartki może być niemal wszystko, w zależności od oka-
di
03
zji z jakiej chcemy ją wysłać. Zastanówmy się najpierw co chce-
-a my na niej umieścić i zróbmy wstępne szkice. Najlepszym wyj-
5 ściem jest po prostu narysować to, co ma się znaleźć na projekcie.
Przygotujmy na przykład kartkę okolicznościową z okazji nadcho-
dzącej wiosny. Odejdźmy od komputera, a najlepiej pójdźmy na
spacer. Weźmy ze sobą kredki i papier — w celu naszkicowania te-
go co później przeniesiemy do komputera. Szkic nie musi być do-
kładny, ważne żeby powstał wstępny plan, według którego będzie-
28 kwiecień/maj 2004
my podejmować dalsze działania. Pozwoli nam to na określenie ja-
kie będą wzajemne relacje pomiędzy poszczególnymi elementami
projektu, da nam czas na zastanowienie się na co chcemy położyć Nazwa: jBez nazw^ 1
jj
Tworzymy plik o dowolnych rozmiarach, w zależności od tego jak
Rozdaefcsość: |72 j piks/cal
di
Tiyb: 1 Kolor RGB
duży będzie nasz projekt. W moim przypadku jest to 320 na 350
pikseli, RGB, białe tło. Ponieważ kartka jest przeznaczona do wy- '/wypełnienie
C Białe
syłania jej drogą elektroniczną ustalamy rozdzielczość na 72
<~ Kolor tła
pikseli/cal; jeśli natomiast chcemy przygotować projekt do druku —
rozdzielczość musi być większa: ok. 150 pikseli/cal dla zwykłej dru-
karki i ok. 300 pikseli/cal dla druku offsetowego. Nie przesadzajmy
z rozmiarami kartki, jeśli ma ona być wysyłana e-mailem — niech
mieści się na ekranie przy rozdzielczości 800 na 600 pikseli by
każdy mógł ją obejrzeć bez potrzeby przewijania zawartości ekra-
nu. Rozdzielczość 800 na 600 pikseli jest bowiem nadal używana
przez dużą grupę użytkowników.
Tło
Tworzymy wzorek
r c*
r o
Elementy tła — wzorek r Bs
? do pynfct.j poohod^ras j
ra
r o n
o.
my ją pomiędzy warstwami backgroundOI i background02, wybie- 5
ramy kolor narzędzia, taki jak kolor warstwy backgroundOl czyli
#23A223 i rysujemy niewielki prostokąt. Następnie wybieramy po-
lecenie Warstwa>Styl Warstwy>Natożenie wzorka (Layer>Layer
mm
Style>Pattern Overlay...) i wypełniamy go utworzonym przez nas
wzorkiem z parametrem Krycie (Opacity) 70-80%. Możemy sko-
kwiecień/maj 2004 29
łirr
EFEKTY
Szczegóły
TJ
Q_
30 kwiecień/maj 2004
(Elipsę) rysujemy okrąg (z wciśniętym klawiszem [Shift]), wybie-
ramy polecenie Warstwa>Styl warstwy (Layer>Layer Style) i na-
dajemy następujące parametry: Faza i płaskorzeźba... (Bevel and
Emboss...): Głębia (Depth) 430%, Wielkość (Size) 4, Zmiękczanie
(Soften) 16 i kolor dla cienia: #4D0303.
Następnie na nowej warstwie, którą nazywamy płatek za pomo-
cą narzędzia Pióro (Pen) rysujemy kształt jednego płatka stokrot-
ki, tworzymy zaznaczenie z selekcji i wypełniamy je kolorem bia-
łym. Wybieramy Styl warstwy i nadajemy jej Nałożenie gradientu
od koloru #B9BFCE do przezroczystości pod kątem 90°. Warstwę
płatek umieszczamy pod warstwą środek, następnie kopiujemy ją
kilkakrotnie i umieszczamy kolejne płatki kwiatu dookoła środka.
Wszystkie warstwy zawierające płatki i warstwę ze środkiem sto-
krotki łączymy ze sobą i spłaszczamy. Następnie całości nadajemy
styl Cień o parametrze krycia 40% i wielkości ok. 10.
Biedronka
m Obramowanie
Napisy
kwiecień/maj 2004 31
EFEKTY
IV)
20 min Emotikony
film
pod lupą
pliki
Tomasz Zelek
Użytkownikom Internetu zapewne nieobce jest pojęcie emotikony — małej ikonki mającej na
celu odzwierciedlenie emocji przy pisaniu tekstu. W niniejszym tutoriaiu spróbujemy stworzyć jej
większego brata - żółtą, kreskówkową główkę.
32 kwiecień/maj 2004
:p
tomatycznie zostanie dodana do naszej grupy. Na warstwie tej za-
znaczamy niewielki okrąg — Zaznaczanie eliptyczne (Elliptical
Marquee Tool), będący naszym okiem i wypełniamy go kolorem
białym za pomocą Wiadra z Farbą (Paint Bucked Tool). Następnie
dodajemy efekt Warstwa>Styl warstwy>Blask Wewnętrzny...
(Layer>Layer Style>lnner Glow...). Ustawiamy: Tryb mieszania
(Blend Modę) na Zwykły (Normal), Krycie (Opacity): 15%, Kolor:
czarny i Wielkość (Size): 40 pikseli. Ostatnią czynnością w tym
kroku będzie dodanie efektu Warstwa>Styl warstw>Blask ze-
wnętrzny... (Layer>Layer Style>Outer Glow...) z parametrami: Tryb
Mieszania: Zwykły (Normal), Krycie (Opacity): 40%, Kolor: czarny.
Tęczówka i źrenica
kwiecień/maj 2004 33
EFEKTY
34 kwiecień/maj 2004
EFEKTY
Ukryte zdjęcia
I 20 min
(Ctrl+A Pictures)
film
pliki
W poniższym artykule poznamy ciekawy i interesujący efekt, jakim są ukryte zdjęcia (po zazna-
czeniu specjalnie spreparowanego zdjęcia pojawia się drugie — wcześniej niewidoczne zdjęcie).
Nauczymy się jak przy niewielkiej ingerencji w warstwy, modyfikacji poziomu ich widoczności
i przy użyciu różnego rodzaju wzorów wypełnień, można otrzymać ciekawy, nieszablonowy a nie-
kiedy bardzo śmieszny efekt końcowy.
36 kwiecień/maj 2004
IM
dl
,:«
Dokonamy teraz jednej z kluczowych czynności, która jest nie- i Ustawienia wielki:
Szelokośt::pf™~" | piksef
zbędna do osiągnięcia zamierzonego przez nas celu — stworzy-
my odpowiedni wzór wypełnienia. Wypełnienie będzie stanowić
Wysokoś*fc|2 | pikseh
d
swoistego rodzaju kurtynę zasłaniającą jedno ze zdjęć. Natomiast " I *sM d
użycie odpowiedniego wzoru do wyżej wspomnianego wypełnie-
nia sprawi, że gdy zaznaczymy zdjęcie, to naszym oczom uka-
że się druga fotografia — wcześniej niewidoczna dla nas. W tym
celu otwieramy nowy dokument z następującymi parametrami
Szerokość (Width) i Wysokość (Height): 2 piksele, Rozdzielczość
(Resolution): 72 piksele/na cal, Tryb (Modę): RGB Color,
Wypełnienie (Contents): Przezroczyste (Transparent) i zatwierdza-
my nasze ustawienia przyciskiem [OK\.
Warstwa 2 — modyfikacja
kwiecień/maj 2004 37
EFEKTY
1
ramy plik z wspomnianym zdjęciem (ważne jest żeby wybra-
ne przez nas zdjęcia do stworzenia efektu byty tych samych roz-
miarów). Zaznaczamy całe zdjęcie używając Zaznacz>Wszystko
[Ctrl]+[A] i kopiujemy je przy pomocy Edycja>Kopiuj (Edit>Copy)
[Ctr!\+[C\. Możemy już zamknąć plik z drugim zdjęciem i wrócić do
właściwego dokumentu z naszą pracą.
<*„ yara
Na dołączonej do pisma płycie CD Na dołączonej do pisma pły-
znajduje się pełna wersja Xara 3D 3 war- cie CD znajduje się pełna wersja
ta $44,99+VAT — z możliwością upgrade Xara Webstyle 2 warta $69+VAT
do wersji Xara 3D 5, po obniżonej cenie — z możliwością upgrade do
— $34.99+VAT, czyli 20% taniej. (Upgra- wersji Xara Webstyle 4 (CD-
de dokonuje się przez link w programie, version) po obniżonej cenie —
albo przez stronę: http://www.xara.com/ $49+VAT. To prawie 30% taniej!
Ol
x3d3upgrade. asp ?p=wyda). (Upgrade dokonuje się przez
ra Oferta jest ważna do końca maja 2004 link w programie, albo przez
•a
w roku. Warunkiem otrzymania rabatu jest stronę: http://offer.xara.com/
CL
rejestracja programu Xara 3D 3 przez webstyle2/upgrade/wyda/).
5
link w programie, albo przez stronę http:// Oferta jest ważna do koń-
5
www.xara. com/x3d3offer. asp ?p=wyda. ca maja 2004 roku. Warunkiem
otrzymania rabatu jest rejestracja programu Xara Web-
style 2 przez link w programie, albo przez stronę: http://
offer.xara.com/webstyle2/imp/ lub http://offer.xara.com/
webstyle2/wyda/.
38 kwiecień/maj 2004
Przedstawiamy:
XARA!
Tomasz Trejderowski
Xara (www.xara.com) to już nie tylko rodzina pięciu (Xara X, liniami (Linę spacing), przesunięcie linii bazowej tekstu (Ba-
(ara3D, Webstyle, Menu Maker, Screenmaker 3D) dosko- seline shiff) czy wreszcie kerning czcionek.
nałych programów graficznych. Wraz z setkami przykła- Nie ma możliwości dodania własnych elementów graficz-
J dów, filmów, tutoriali oraz serwisami www.xaraonline.com, nych, czy w ogóle w jakikolwiek sposób dokonania ręcznych
www.buyfonts.com, www.talkgraphics.com i www.xarax- korekt generowanego obrazu. Można to wykonać jedynie
one.com mamy już do czynienia ze zjawiskiem czy wręcz w zewnętrznym programie (np. Photoshopie) po dokonaniu
całą społecznością grafików, którzy wybrali ten styl two- eksportu. Jest to najważniejsza cecha programu — przez
rzenia grafiki. Styl tak odmienny od stosowanego w Photo- jednych traktowana jako największa wada, a przez innych
shopie. Styl tak niepopularny wśród grafików-profesjona- jako największa zaleta. Taka jest po prostu idea tych dwóch
listów, a znajdujący tylu fanów i popularyzatorów wśród omawianych aplikacji z rodziny Xara. Wszystko zaczyna
początkujących twórców, iż nie sposób o nim nie wspo- się i kończy w obszarze modyfikacji istniejącego szablo-
mnieć. W artykule niniejszym omówimy dwa najpotężniej- nu. Można zmienić kąt, cień, oświetlenie, użytą czcionkę,
sze (i najstarsze — doczekały się najwięcej wznowień oraz kolor czy teksturę, ale żadne ręczne modyfikacje nie wcho-
zaliczyły największą liczbę pobrań) programy z tej rodzi- dzą w rachubę. Musisz to zaakceptować jako pewnik lub...
ny: Xara3D i Xara Webstyle. Najnowsze wersje obu są przestać używać program.
do pobrania ze strony producenta. Mamy także doskona- Zmiany nanoszone względem bazowego szablonu reali-
ły prezent wyłącznie dla czytelników .psd. Odrobinę star- zuje się przez modyfikację bardzo dużej liczby parametrów.
sze, ale za to pełne wersje obu omawianych programów Są one podzielone na osiem głównych okien edycyjnych.
zostały umieszczone na płycie CD dołączonej do niniej- Ich układ i kolejność jest bardzo logiczna, tak więc mno-
szego numeru! gość opcji staje się wyłącznie zaletą i wcale nie budzi uczu-
Oba programy, w odróżnieniu od Photoshopa, wykorzy- cia zagubienia nawet wśród zupełnie początkujących użyt-
stują nowy styl tworzenia grafiki — w oparciu o szablony. kowników.
Proces tworzenia, niezależnie od tego, czy tworzymy grafi- Dodatkowo, oprócz wspomnianych ośmiu okien pełnych
kę na potrzeby strony WWW, ulotki reklamowej czy do każ- modyfikatorów możemy zmieniać kolor, natężenie oraz roz-
dego innego celu, jest taki sam. Twórca wybiera tylko sza- mieszczenie źródeł trzech świateł oświetlających nasz trój-
blon bazowy, a następnie w serii kolejnych kroków usta- wymiarowy model oraz kolorystykę i intensywność cienia
la takie aspekty jak kolorystyka, oświetlenie, cieniowanie, jak również tła. Tło oraz model może być albo pokryte kolo-
czcionki, ułożenie. Następnie może dokonać eksportu goto- rem, albo teksturowane dowolną teksturą. Zmiany modyfi-
wego modelu do wielu popularnych formatów. Tak przy- katorów kształtu (wspomnianych w poprzednim akapicie)
gotowaną pracę można od razu wykorzystać jako gotowe dokonujemy poprzez zmianę wartości liczbowych w odpo-
dzieło lub potraktować jako podstawę wyjściową do dalszej wiednich oknach. Natomiast zmianę umieszczenia modelu
obróbki w Photoshopie bądź wykorzystania w bardziej zło- w trójwymiarowej przestrzeni oraz rozmieszczenia źródeł
żonej scenie. światła i cienia możemy dokonać przy użyciu myszki, tech-
niką przeciągnij-i-upuść {drag-and-drop).
Program ten, zgodnie z nazwąjest ukierunkowany na gra- File Edif View Options ffircdow Hs!p
ratio), pozycjonowanie (Align), odległość między kolejnymi Łt Główną zaletą programu jest olbrzymia ilość czynników, które wpływają na gotowy obraz lub animację
kwiecień/maj 2004 39
RECENZJE
Gotowe dzieło można wyeksportować do kilku popular- czasie należy albo zakupi licencję na tą wersję aplikacji,
nych formatów graficznych takich jak: Bitmapa, GIF, JPEG albo skorzystać z wcześniejszej dystrybucji tego programu,
czy PNG. Troszeczkę niepoważne jest dodanie opcji eks- odrobinę uboższej w opcje, ale za to pełnej. (Pełna wersja
portu do formatu ICO (ikona) czy CUR (kursor). Należy Xara 3D 3 dostępna na CD).
wziąć pod uwagę, że Windows (nawet w najnowszych wer-
sjach takich jak XP czy 2003) nie zbyt dobrze radzi sobie XARA WEBSTYLE &
z ikonami i kursorami (wskaźnikami myszki) większymi niż Xara Webstyle różni się od swej siostry — Xary3D — dia-
64x64 piksele. Więc używanie takiego program do tworze- metralnie. Przede wszystkim możliwe jest tworzenie znacz- ^ ^
nia tychże ikon i kursorów można by porównać do piele- nie większego wachlarza grafik. Od podstawowych jak kla-
nia ogródka dwa metry na dwa metry przy użyciu kombaj- wisze, bannery reklamowe, nagłówki płaskie, nagłówki trój-
nu Bizon. Nie mniej opcja taka istnieje. Jeśli ktoś wymiarowe, tła, linie separujące (dividers), ele-
chce może użyć programu Xara3D do tworzenia WSZYSTKO menty wypunktowania (bullets), logotypy czy
kursorów oraz ikon. Jest to więc niewątpliwy plus ZACZYNA SIĘ bannery reklamowe, po skomplikowane jak opra
tej aplikacji. I KOŃCZY W wy graficzne całych stron internetowych (lay
Nie bez znaczenia pozostają nowe opcje OBSZARZE outs), zestawy elementów graficznych (theme
dodane w najnowszej — piątej już odsłonie pro- MODYFIKACJ sets) czy systemy menu i nawigacyjne (NavBars
gramu. Xara3D 5 pozwala eksportować anima- I S T N I E J Ą C E G O & Menus). Mamy też prosty edytor fotografii
cję oraz statyczne ilustracje do formatu Flash. S Z A B L O N U . >• (szczegóły poniżej) oraz narzędzie do tworze-
Pomimo dużych obostrzeń (grafiki i animacje nia albumów fotografii — które z punktu widzenia
zapisane jako Vector Flash tracą bardzo wiele na jakości, grafika jest akceptowalne, ale dość słaba.
i producent: Xara zaś przy zapisie ich jako Bitmap Flash uzyskujemy pliki rzę- Druga podstawowa różnica polega na tym, iż mamy do
: Xara 3D 5 i du powyżej 1 MB, których używanie w Internecie mija się czynienia z obiektami wyłącznie płaskimi. Nawet wspo-
. cena: $44.99 (pełna wersja)
z celem) otrzymujemy w jednym programie możliwość two- mniane nagłówki trójwymiarowe są traktowane jak obiek-
Xara Webstyle 4
i cena: $69.00 (pełna wersja) rzenia obiektów i animacji w bardzo popularnym standar- ty płaskie. Pozostały jednak ustawienia dotyczące cienia,
dzie (ponad 500 milionów użytkowników) Flash. chociaż są znacznie uboższe. Można zmieniać rozmiesz-
Ważnym udogodnieniem (także dostępnym tylko w naj- czenie obiektu tylko na płaszczyźnie. Nie można obracać
nowszej wersji) jest możliwość otwarcia istniejącego obraz- obiektów, a o czymś takim jak zmiana oświetlenia — w ogó-
ka lub animacji (albo utworzenia nowego na podstawie le można zapomnieć.
szablonu), zmodyfikowania tylko wybranych parametrów, Poza tymi podstawowymi zmianami, obsługa programu
a następnie pobrania (odziedziczenia) ustawień dotyczą- jest zbliżona do Xary 3D. Wybierasz grupę, następnie wska-
cych animacji (Animation picker) lub wybranych parame- zujesz interesujący cię szablon oraz w serii kroków zmie-
trów wyglądu stylu (Style picker) z innego szablonu lub niasz takie parametry jak czcionka, kolory, tło, wytłoczenie
innego obrazka czy animacji. (bevel), cień i rozmiary. Ostatecznie zapisujesz grafikę, ale
Podsumowując — program ten to naprawdę rozbudowa- tylko w trzech formatach: GIF, JPEG i PNG.
ne narzędzie graficzne, które pozwala w kilka chwil przygo- Programu Webstyle również możesz używać przez 15 dni
tować nawet bardzo złożony obraz czy animację. Efekt pra- za darmo. Potem należy zakupić pełną najnowszą wersję ze
cy aplikacji możemy wykorzystać jako samoistny model na strony producenta lub zainstalować starszą, ale pełną wer-
stronę WWW czy do dokumentu albo użyć jako elementu sję — dostępną na naszym CD. Różnica polega na tym, że
składowego bardziej złożonej sceny, którą dalej będziemy po 15 dniach przestają działać wszystkie omówione wcze-
edytować — np. w Photoshopie. śniej elementy, poza Photo Editor. Autorzy programu na
Programu Xara3D w wersji niezarejestrowanej (trial) pierwszej stronie stwierdzają, iż Photo Editor to „podstawo-
można używać przez 15 dni od momentu instalacji. Po tym we narzędzie dla każdego webmastera, który chce umieścić
swoje zdjęcia na stronie internetowej". Sęk w tym, że jest
to tylko i wyłącznie slogan reklamowy. Photo Editor poza
Selecł the type ot web graphlc you want to create
Seieei Th0me Sets to view graphic coltectiotts
naprawdę podstawowymi narzędziami jak zmiana jakości
(jasności, saturacji, kontrastu, ostrości czy przezroczysto-
ści), kolorystyki, tła, obracania i przycinania oraz tworzenia
miniaturki, nie oferuje niczego błyskotliwego czy powalają-
cego na kolana. Wypada dosyć marnie przy średniej klasy
programach graficznych, a próba porównania go do Photo-
shopa to po prostu grzech :)
Niestety Xara Webstyle ma też wady. Do najważniejszych
należy fatalne wręcz wsparcie dla polskich znaków. Prawy
Dl klawisz [Alt] jest używany w ten sam sposób jak lewy (jako
O
cń skróty klawiaturowe), toteż wprowadzenie polskich liter jest
ro
bardzo utrudnione, a w niektórych przypadkach wręcz nie-
-o
n możliwe. Pozostaje jedynie wpisywanie tekstów w innym
programie np. Notatniku, kopiowanie ich do schowka i wkle-
janie do Xary. Także czcionki, które naprawdę zawierają
polskie znaki (oznaczone CE) w Xarze nie wyświetlają pra-
widłowo polskich liter — mimo, że w innych aplikacjach nie
ma z tym problemów. •
H Główne okno programu Xara Webstyle 4
40 kwiecień/maj 2004
PORTFOLIO
10 min
ZNAK
film GRAFICZNY
pliki chroniący
zdjęcie
Daniel Sodkiewicz
N;~. . • ..r)/e zgody przez autora procy na jej modyfikację oraz rozpowszechnianie, najdobitniej
uzmysławia naniesiona bczpoźiednk:- n:i rysunek zmk graficzny- elektroniczny podpis, mówiący
o prawoch do óan~:j nrau:^ .':.•:.;..'.•:•/r-?/; •••v-iJ.'-^.-v .-;•"•.-. hvorzenia wyzaj wspomnianego znaku wod-
nego, i-.n.-ry ;.<Hw3<sy pctfncjai::vch / r « ; 's-.::j>. r-;yjednoczesnym zachowaniu wizualnejatrakcy.-
znak wodny
42
kwiecień/maj 2004
Wtapianie znaky
m Końcowe poprawki
GMSA
SOFTWARE
Sp. z o.o.
146,40, ul. 28 Lutego 2
78-400 Szczecinek
®+48 94 372-96-50
i + 4 8 94 372-96-59
e-mail: biuro@gdata.pl
handel@gdata.pl
http://www.gdata.pl
ROJEKTOWANI
OPAKOWANIA
Liliana Soja
Czy zastanawialiście się kiedyś jak globalizacja wpływa
na nasze życie? Otóż przejawy jej są już widoczne w bar-
dzo wyspecjalizowanych niszach naszej działalności.
Przykładem niech będzie proces projektowania opako-
wań na soki. Projektant nie projektuje samodzielnie, ale
musi poddać się rygorowi działań marketingowych, które
wykształcają sztywne standardy. Dla jednych jest to uła-
twienie, a dla innych zbyt duże ograniczenie, szczególnie
dla tych bardziej kreatywnych wolnych ptaków. Czy to jest
dobre, czy złe? Oceńcie sami. Dodam tylko, że jakby cały
świat się temu poddał nie byłoby np. Benettona.
owanie jest szatą zewnętrzną produktu. Już na pierw- jest pewne, nie widać chęci do poszukiwań ciekawych |
szy rzut oka akceptujemy ją lub przechodzimy obok. Tym i nowatorskich rozwiązań plastycznych.
samym akceptujemy, lub nie, sam produkt ładnie lub kiep- Obecnie na świecie można zaobserwować różne podej-
sko ubrany. W tym przypadku apetyt rośnie już wraz ze ścia do projektowania opakowań: jedno w Stanach Zjedno-
spojrzeniem. Przyzwyczailiśmy się np. do kartonów na so- czonych, inne w Japonii. W USA w supermarketach rzuca-
ki w kształcie kubików, które wypełniają półki w supermar- ją się w oczy przede wszystkim znaki towarowe firm. Naj-
ketach. Są krzykliwe i agresywne. Rywalizują ze sobą in- ważniejsze jest wypromowanie „marki", której koncepcja
tensywnością kolorów i ostrą typografią. Producenci soków oparta jest na konsekwentnym budowaniu wizerunku pro-
starająsię za wszelką cenę przyciągnąć uwagę konsumen- duktu. Powszechnie panujący kult marki ma doprowadzić
ta. Jest to walka o sukces rynkowy produktu, który przekła- do jednego celu: za markowe produkty konsumenci wy-
da się na pieniądze. W walce tej w społeczeństwie nadpro- łożą więcej „kasy". Ten trend pojawia się w Europie wraz
dukcji bierze udział większość producentów. z potężnymi amerykańskimi sieciowymi agencjami rekla-
Niektóre opakowania zwracają uwagę słabą jakością, in- mowymi i zdaje się trwale zmieniać mentalność europej-
ne starają się przemawiać lepszym dizajnem i te właśnie czyków w podejściu do dizajnu opakowań. W tej dziedzinie
częściej trafiają do naszych koszyków. Stworzenie super Europa na naszych oczach amerykanizuje się. Do niedaw-
atrakcyjnego opakowania przyciągającego wzrok to nie na zwracano uwagę na urodę opakowania, jego kształt,
wszystko: najważniejsze zdają się być jego koszty produk- szatę graficzną oraz tworzywo, z którego było wykonane.
cji, które nie mogą być wysokie. Panuje powszechny ste- Konsumenci kupowali raczej opakowania, które podoba-
reotyp myślenia, że dobry projekt musi dużo kosztować. ły się, a nie markę. Dziś jednak nie Amerykanie czy Euro-
Niekoniecznie tak jest: dobry projekt to przede wszystkim pejczycy, ale Japończycy mają super nowoczesne, najbar-
dobry pomysł, który wyłania się ze współpracy producen- dziej wyrafinowane dizajnersko opakowania na świecie.
ta i jego brand menagera z dobrym, profesjonalnym pro-
jektantem. Wyprodukowanie złego opakowania kosztuje ty- AJEKTOWY
CT1 le samo co dobrego. Mimo to producenci bardzo niechętnie Projektowanie opakowania z prawdziwego zdarzenia
O odnoszą się do nowatorskich projektów. Decyzja wprowa- jest procesem złożonym. Jest to łańcuch wspólnych dzia-
dzenia na rynek ciekawego projektu wymaga bowiem wi- łań specjalistów z różnych dziedzin, w wyniku czego pro-
"D zjonerskiego myślenia, pewnego wyrobienia plastycznego, jektant dostaje do rąk tzw. brief projektowy. To w gestii fir-
dużej odwagi i ryzyka. Powszechnie panująca obecnie mo- my zlecającej jest skonstruowanie dobrego briefu, który
da na konkursy skierowane do przypadkowych studiów gra- określa cel marketingowy, jakim jest szybka i korzystna
ficznych niewiele tu pomoże. Najczęściej popełnianym błę- sprzedaż danego produktu. Brief stanowi podstawę zało-
dem jest subiektywna ocena projektów przez osoby odpo- żeń projektowych i wytyczną dla projektanta. Jest w nim
wiedzialne za akceptację nowego wizerunku produktów. Na zawarta analiza specyfiki samego produktu, oraz analiza
rynku polskim wybiera się sprawdzone wzorce, czyli to co i zdefiniowanie grupy docelowej, czyli jaki rodzaj konsu-
44 kwiecień/maj 2004
mentów ma dane opakowanie przyciągać. Brane są pod RYSUNEK TECHNICZNY FUNDAMENTEM
uwagę realia danego segmentu handlu, włącznie z pod- PROJEKTU
glądaniem konkurencji. Brief zawiera analizę marki, czyli Przyjrzyjmy się teraz, jak wygląda siatka rysunku tech-
pozycjonowanie, „osobowość" opakowania, tzn. jakie po- nicznego, która jest niezbędna do wykonywania naszego
winny być emocjonalnie przekazy projektowanego opako- projektu, bowiem zawiera wszystkie wymogi dotyczące wy-
wania, analizę ceny, jaka ma być w porównaniu z podob- miarowania i stanowi podstawę konstrukcji projektu karto-
nymi produktami funkcjonującymi na rynku, a także anali- nu (Rysunek I ł ) . Są tu wyraźnie zaznaczone: całkowite po-
zę rozmiarów i smaków oraz w jaki sposób produkt będzie le zadruku oraz wielkości jakie trzeba przyjąć na wszelkie
sprzedawany. Zadaniem projektanta jest więc przełoże- zagięcia, klejenie pudełka i inne. Rysunek techniczny siatki
nie języka strategii marketingowej na wizualny przekaz został stworzony w programie lllustrator, w którym też wy-
w postaci konkretnych, przejrzystych koncepcji plastycz- konujemy wszelkie elementy graficzne, typograficzne oraz
nych. Opakowanie produktu musi być atrakcyjne wizual- ilustracje wymagające dużej precyzji. Tworzymy grafikę
nie, przyciągające uwagę konsumenta i zachęcające go wektorową, która charakteryzuje się tym, że możemy ją do-
do kupna. wolnie skalować bez strat jakości. Oczywiście w programie
O
dl
Przód kartonu ro
Proces projektowania przeanalizujemy na przykładzie
T3
projektu systemu opakowań kartonowych na soki, stworzo-
nego przez studio projektowe Direct Design na pewien kon-
kurs w 2003 roku (Rysunek D ) . Nie będzie to projekt formy
wzorniczej, ale projekt szaty graficznej bazujący na ogólno- _l
dostępnej siatce rysunku technicznego kartonowego opa-
kowania przeznaczonego do pakowania płynnych produk-
tów spożywczych. 13 Rysunek techniczny siatki kartonu
kwiecień/maj 2004 45
PROTECHNIKA
E- Następne kioki przy tworzeniu kolażu - komponowanie S Projekt po zmontowaniu wszystkich elementów graficznych i typogra-
elementów grafiki na warstwach w Photoshopie ficznych
46 kwiecień/maj 2004
jest pomocnicza i umieszczamy na niej podkład siatki z ry-
sunkiem technicznym. Siatka dokładnie określi wymiary
i pozwoli na centrowanie elementów grafiki na konkretnych
polach. Warstwy zapewniają więc swobodę w manipulowa-
68 Sprawdź!
NOWYCH
29,60 zf
czonym i umieszczamy na ściśle określonym polu rysun-
ku technicznego naszego projektu pudełka. Kolaż zapi-
sany wcześniej w formacie TIFF, stanowiący globalne tło,
importujemy z Photoshopa. Następnie nanosimy wszyst-
kie niezbędne teksty. Jest tu duża swoboda w manipulacji
tekstem i z łatwością można dokonywać wszelkich korekt.
Ten etap pracy jest już czysto „rzemieślniczy" i z.a2>Nyc7.a\
najbardziej mozolny. Wydaje się często że korekty teksto-
120,00 zł
we nigdy się nie kończą. Projekt opakowania na prezenta-
cji powinien wyglądać jak gotowy produkt końcowy i dla-
tego dobrze jest wykonać jego prawdziwą makietę w ska-
li 1:1 lub wizualizacją 3D (Rysunek 0 ) . Ta ostatnia metoda
w związku ze spektakularnym rozwojem grafiki 3D zaczy-
na być już standardem. Na koniec przypomnienie — a jed- COMf
nak szata zdobi nie tylko człowieka, ale i produkty przez Programowanie
niego wytwarzane. ®
59,60 zł
dla każdego
13 Projekt finalny gotowy do ostatniego etapu
- separacji na kolory do druku
INFORMATYKA
Księgarnia Internetowa
księgarnia miemeiowa •
www.rin.com.pl
WEBDESIGN
(V)
30 min
film
pliki
Tomasz Zelek
Wybór gradienty
48 kwiecień/maj 2004
ar
ai
psi
kwiecień/maj 2004 49
Ifi.iUi
WEBDESIGN
Efekt końcowy
3
g
50 kwiecień/maj 2004
•N !
KSIĄŻKI — RECENZJE
Człowiek i jego znaki
Autor: Adrian Frutiger Adrian Frutiger to znakomity szwajcarski typograf i projektant krojów pism dru-
Objętość: 292 strony karskich, autorytet w dziedzinie przekazów i komunikacji wizualnej, laureat doktora-
ISBN: 83-85586-14-8 tu honoris causa.
Wydawnictwo: Do, Optima Książka „Człowiek i jego znaki" jest pierwszą od wielu lat tego typu pozycją w Pol-
Cena: 35 zł sce, stanowi wyczerpujący opis zarówno siły przekazu jak i historii podstawowych
form graficznych tworzonych przez różne kultury w różnych epokach. Autor wyja-
śnia etapy powstawania piktogramów, symboli oraz pisma, omawia zasady czytel-
i jego znaki ności i siłę oddziaływania znaków na odbiorcę, przedstawia zagadnienia powstawa-
nia różnych odmian krojów pisma. Przekonujemy się, że współczesna komunikacja
nie jest możliwa bez pomocy obrazów i symboli. Jednoczesne połączenie analizy wi-
zualnej z podłożem historycznym daje nowąjakość spojrzenia za zagadnienie emo-
cji wywoływanych przez znaki na człowieka oraz stanowi podstawę procesu projek-
towania znaku graficznego.
Treść została wzbogacona dużą ilością ilustracji wykonanych przez autora; rysun-
ki te udowadniają, że znak graficzny oraz jego przekaz jest uniwersalny i rozpozna-
wany wszędzie tam, gdzie słowo nie wystarcza lub jest niezrozumiałe.
Książka „Człowiek i jego znaki" to jedna z ważniejszych pozycji z dziedziny prze-
kazu wizualnego i obowiązkowa lektura zarówno dla zawodowych projektantów jak
i amatorów.
Magdalena Cyrczak
kwiecień/maj 2004 51
-fl
52 kwiecień/maj 2004
o tworzenia
graficznej, która warstw nie oferuje, niektórzy mówią nawet dłowo ustawioną przerwę 0,1 sekundy, zaś pierwsza i ostat-
o „malowaniu nogą zamiast ręką":). Pominiemy szczegóło- nia — 0,07 sekundy), ale są. Sytuacja jest na tyle wybiórcza,
wy opis obu tych mechanizmów, gdyż nie jest to tematyką że nie udało mi się sformułować konkretnych wniosków od
niniejszego artykułu. czego takie błędy w interpretacji mogą zależeć.
Połączenie możliwości odziedziczonych po Photoshopie Wspomniany silnik graficzny ImageReady ma jeszcze
z narzędziami do tworzenia animowanych GIFów daje nam jedną nieprzyjemną cechę — tym razem jednak występu-
potężne narzędzie, które można wykorzystać do tworzenia je ona też w niektórych innych programach, nie tylko w apli-
niewiarygodnych animacji oraz efektów w statycznych ob- kacjach ze stajni Adobe. Otóż wbudowane algorytmy opty-
razach. W praktyce jednak dochodzi się do zupełnie innego malizacji oferują czasami „ujemną optymalizację". Obrazek
wniosku. Na potrzeby tych mediów w których animowane stworzony w innym programie niż ImageReady po potrakto-
GIFy się wykorzystuje — czyli głównie stron internetowych waniu algorytmami optymalizacji zwiększa swój rozmiar, co
— nie jest potrzebna aż tak zaawansowana maszyneria ja- jest oczywistym zaprzeczeniem idei tego procesu.
ką oferuje ImageReady. Warto do tego dołożyć dość znacz- Podsumowując wszystkie wymienione powyżej cechy,
ne wymagania programu. Uruchomi się on bez problemów można dojść do wniosku, że jakkolwiek ImageReady jest
nawet na słabej maszynie. Ale pewne rozwiązania wystę- naprawdę dobrym, rozbudowanym i profesjonalnym narzę-
pujące (w wyniku błędu lub celowego działania programi- dziem, to na potrzeby Internetu — głównego medium w któ-
stów) w silniku graficznym powodują, że nawet na kompute- rym wykorzystuje się animowane GIFy — graficy mają do
rze z procesorem 1,5 GHz podgląd (animacja) tworzonych wykorzystania dużo bardziej wyspecjalizowane narzędzia.
GIFów jest skokowy. Opisowi kilku wybranych z nich poświęcimy dalszą część
Nieco denerwujący jest fakt, że ImageReady dość nie- niniejszego artykułu.
typowo interpretuje niektóre animacje GIF stworzone w in-
nych programach. W sytuacji gdy wszystkie klatki animacji GIF MOVIEGEAR4.0
mają ustawioną stałą długość przerwy pomiędzy wyświe- Zdecydowanie jeden z najlepszych programów do two-
tlaniem kolejnej — ImageReady nieprawidłowo odczytuje rzenia animowanych GIFów, przy czym — uwaga! —jest to
te wartości dla pierwszej lub ostatniej klatki. Różnice są na- wyłącznie narzędzie do sklejania animacji z gotowych poje-
prawdę minimalne, rzędu setnych części sekundy (w ana- dynczych klatek, przygotowanych w innym programie. Nie
lizowanym przypadku wszystkie kolejne klatki miały prawi- posiada ani narzędzi wspomagających tworzenie pojedyn-
• • a # s aa
D Ujemna optymalizacja w Image Ready O Główne okno programu GIF Movie Gear4.0
kwiecień/maj 2004
WEBDESIGN
czych klatek ani opcji generowania efektów na bazie jed- cych się na animację wynikową poprzez usunięcie co n-tej
nej klatki animacji czy przejść pomiędzy dwoma klatkami. klatki, co w niektórych przypadkach (animacje zawierające
Jednakże proces samego tworzenia animacji jest doskona- klatki różniące się między sobą minimalną ilością szczegó-
le wspierany przez wiele narzędzi, których trudno szukać łów) może znacząco zmniejszyć rozmiar pliku bez większe-
w innych programach. go ubytku dla efektu końcowego. Naprawdę bardzo potęż-
Zaczynając od samego początku. Przede wszystkim ne narzędzie!
jest to program, który łączy w sobie dwie funkcjonalno- Oczywiście wszel-
ści. Dzięki możliwości szybkiej zmiany palety (przy pierw- kie podstawowe na-
szym uruchomieniu programu — patrz ilustracja obok — rzędzia takie jak edy-
albo poprzez wybranie Edit>Preferences>Use) można cja palet kolorów, czy
dzięki niemu tworzyć zarówno animowane GIFy w pale- metody wyświetlania
cie ograniczonej (standardowo) do 256 kolorów, albo 24- kolejnych klatek, edy-
bitowe (True Color) ikony wprowadzone w systemie Win- cja komentarzy — to
dows XP. wszystko jest wbu-
B Optymalizacja animacji w programie GIF dowane także w GIF
Bardzo dobrze wspiera-
Movie Gear
ny jest sam proces dodawa- Movie Gear.
nia kolejnych klatek anima- Na koniec trzeba jeszcze wspomnieć o kompatybilności
cji. Autorzy programu słusz- programu z innymi formatami graficznymi. Począwszy od
nie wyszli z założenia, że nie wersji 4.0 jest ona naprawdę imponująca. Po pierwsze im-
zawsze kolejne klatki posia- port — animację możemy importować z pliku wideo (*.aw),
vn palette and color seSting?.
dają te same wymiary bądź animowanego wskaźnika myszki (*.ani) lub innej animacji
tą samą paletę barw. W sy- GIF. Zaś pojedyncze klatki z takich formatów jak: statycz-
tuacji w której dodajemy do ny obraz GIF, bitmapa, JPEG, format Photoshopa (*.psd),
B Wybór celu do jakiego będzie jednej animacji kolejne klat- PNG, wskaźnik myszki (*.cur) oraz ikona. Równie imponują-
używany program
ki pochodzące z różnych źró- co wygląda również eksport gotowej animacji do zewnętrz-
d e ł — GIF Movie Gear oferuje nam szereg opcji, dzięki któ- nych formatów (5ave as). Mamy to do wyboru wszyst-
rym (eksperymentując) możemy wybrać taką opcję migracji kie wymienione powyżej oraz dodatkowo animację Flash
dwóch różniących się palet barwnych, bądź taki mechanizm {*.swf). Tak, tak — dzięki GIF Movie Gear możemy na pod-
dostosowywania różnych rozmiarów klatek, aby wynikowa stawie animacji GIF tworzyć proste obiekty Flash, bez ko-
animacja jak najmniej na tym ucierpiała. nieczności uciekania się do innych programów!
Dzięki podzieleniu operacji dotyczących pojedynczej Program GIF Movie Gear jest typu Shareware. Można go
klatki i całej animacji na osobne menu — Frame i Animation używać bez zobowiązań przez 30 dni od pierwszej instala-
— możemy praktycznie każdą podstawową zmianę (przy- cji (jak zapewniają autorzy, deinstalacja i ponowna instala-
cięcie, edycja palety kolorów, zmiana rozmiaru, przesunię- cja nie wyzeruje licznika). Jego rejestracja kosztuje $39.95
cie, obrót) przeprowadzić zarówno na pojedynczej, zazna- i jest przeprowadzana dzięki bezpiecznej usłudze digi-
czonej klatce (lub kilku zaznaczonych jednocześnie — kla- buy.com. Preferowana jest płatność kartą kredytową po-
wisz [Ctrl] — klatkach), jak i na całej animacji. przez Internet. Inne formy zakupu są możliwe ale związane
Nareszcie mamy do czynienia z programem, w którym są z dodatkowymi kosztami procesowymi.
pojęcie „optymalizacja grafiki" nie sprowadza się tylko do
kliknięcia klawisza Optimize! Tutaj dostajemy do rąk kilka ANIMATEME 1.2
narzędzi nad którymi mamy pełną kontrolę dzięki rozbudo- To nie jest typowy program do „sklejania" animacji GIF
GIF Movie Gear 4.0 wanym parametrom sterującym. I tak — w oknie optymali- z pojedynczych klatek, przygotowanych w tym, czy innym
http://www.gamani. coml zacji kolorów widzimy zawsze dwa obrazki (aktualnie wy- programie. Ideą tego programu jest wykorzystanie skryp-
AnimateMe 1.2
braną klatką animacji, oczywiście z możliwością szybkiego tów animacyjnych. Wybierasz jeden obraz (File>Backgro-
http://www. wsoft-lab.com/
products/ przejścia do dowolnej innej) — oryginalny przed redukcją und image lub [F5]) jako tło — obraz bazowy (może to być
Active GIF Creator 2.18 kolorów oraz efekt zastosowania tejże redukcji. Naocznie Bitmapa, JPEG lub GIF — brak wsparcia dla PNG), a na-
http://www. wsoft-lab. coml więc możemy zobaczyć ile bajtów zyskujemy redukując ko- stępnie ustalasz serię efektów, które maja być zastosowane
products/agif/animateme/
lory o daną ilość oraz czy nie wpłynie to ujemnie na efekt do wybranego obrazu wraz z oczywiście parametrami okre-
końcowy —jakość animacji. Natomiast w oknie optymali-
zacji animacji możemy wybrać jakie operacje będą składa-
ły się na proces optymalizowania konkretnie wybranej ani-
macji. Do wyboru mamy tutaj połączenie (uśrednienie) pa-
let: globalnej i lokalnych palet każdej klatki, usunięcie palet
lokalnych (na trzy różne sposoby) i zastąpienie ich paletą
E>
o globalną dla całej animacji, obcięcie klatek do minimalnego
di
ra wymaganego prostokąta (usuwa zbyteczny przezroczysty
-a margines wokół klatek), zastąpienie pikseli powtarzających
54 kwiecień/maj 2004
o
OJ
ślającymi sposób zachodzenia i zachowanie się kolejnych by uzyskać dostęp do konkretnej klatki animacji. Ogólnie
efektów nakładanych na obraz bazowy. W każdej chwili mo- więc (na pierwszy i drugi rzut oka) ma się wrażenie bałaga-
żesz wyłączyć i włączyć dowolną liczbę efektów wśród już nu i zagubienia przez pierwsze kilkanaście bądź kilkadzie-
zdefiniowanych lub zmienić ich parametry. Do wyboru jest siąt minut korzystania z programu. To niewątpliwy minus
dziewięć efektów wraz z pokaźną grupą parametrów przy- w porównaniu do dobrze zorganizowanego i uporządkowa-
porządkowaną do każdego z nich. Jakkolwiek całość spra- nego GIF Movie Gear.
wia wrażenie zaawansowanego programu (według ilości Z drugiej jednak strony Active GIF Creator oferuje nam
parametrów na jakie można zmieniać generowaną anima- kilka narzędzi do bezpośredniej edycji (retuszu) każdej
cję) — efekt końcowy nie jest powalający. Głównym powo- klatki animacji. Mamy dwa rodzaje zaznaczeń: prostokąt-
dem jest tu ograniczenie samego GIFa do tylko 256 kolo- ne oraz (odrobinę kulejące) zaznaczenie typu lasso. Ma-
rów, co oczywiście bardzo ujemnie wpływa na typowe efek- my narzędzie powiększania i gumkę. Mamy także wszyst-
ty operujące na zmieniającej się palecie kolorów. kie podstawowe narzędzia służące do rysowania, znane
Program jest typu Shareware. Rejestracja kosztuje $25 z praktycznie każdego programu graficznego — od tak pro-
(jeśli zakupisz także opisywany poniżej Active GIF Cre- stego jak Paint do tak zaawansowanego jak Photoshop. To
ator— program AnimateMe będzie można nabyć po obni- bardzo duży plus, szczególnie dla tych grafików, którzy są
żonej cenie $19) i można jej dokonać poprzez serwisy Sha- przyzwyczajeni do wykonywania wszystkich operacji zwią-
relt lub RegNow. Szczegóły na stronie WWW producenta. zanych z tym samym procesem (tu: procesem tworzenia
Dopóki nie zarejestrujesz programu, nie możesz wyekspor- animowanych GIFów) w jednym i tym samym programie.
tować gotowej animacji do pliku GIF, a jedynie oglądać efek- Minusem programu natomiast są operacje wspierają-
ty w samym AnimateMe. Program jest dostępny w języku ce, takie jak: optymalizacja (tu funkcjonuje znacznie gorzej
angielskim oraz w kilku językach europejskich, ale bez pol- niż w GMG), eksport i import (znacznie mniej obsługiwa-
skiego. nych formatów) oraz rejestracja. Szczególnie na tą ostat-
nią rzecz pragnę zwrócić uwagę. Pojęcie shareware ozna-
ACTIVE GIF CREATOR 2.18 cza w skrócie Try Before You Buy — czyli spróbuj zanim ku-
Program pochodzi od tego samego producenta, co Ani- pisz. Zasada ta świetnie jest odzwierciedlona w GIF Movie
mateMe 1.2, lecz swoją funkcjonalnością jest porównywal- Gear — przez trzydzieści dni od instalacji możesz korzy-
ny do GIF Movie Gear i dlatego też omówimy ten program stać z programu bez jakichkolwiek ograniczeń. Tutaj nie-
poprzez porównanie do wspomnianego poprzednika. stety, zdaje się, że autorzy zapomnieli o tej zasadzie. Także
Active GIF Creator — w skrócie nazywany przez produ- pomimo, iż używasz programu Active GIF Creator w okre-
centa Agif — jest programem służącym do tworzenia ani- sie próbnym — o czym informują pojawiające się co jakiś
macji GIF poprzez ich „posklejanie" z pojedynczych kla- czas komunikaty, funkcjonalność programu jest ograniczo-
tek. Pierwszą rzeczą, która rzuca się w oczy jest dosyć du- na, czy wręcz żadna, jako, że do każdej stworzonej anima-
ża złożoność programu. Wszystkie podstawowe parametry cji jest dodawany napis „Agif — UNREGISTERED". Czyni
nie są (jak w przypadku GMG) podzielone na osobne okna, to stworzone w tym programie (nawet w okresie próbnym)
służące konkretnym celom tylko rozmieszczone w mniej lub animacje absolutnie nieprzydatnymi.
bardziej sensowny sposób na głównym oknie programu. Plusem programu Active GIF Creator jest być może do-
Ikony sterujące całym programem również w głównej mie- stępność narzędzi dodatkowych. Mamy tu proste narzędzie
rze występują na głównym oknie. Ponadto jest ich bardzo do tworzenia kolekcji obrazów, utworzenia z obrazka pseu-
dużo, są małe i dosyć nieczytelne. Do tego dochodzi pale- do-trójwymiarowego klawisza czy narzędzie do tworzenia
ta barw, której wszystkie 256 kolorów dostępnych w anima- aktywnych map obrazów (image-map), wykorzystywanych
cjach typu GIF postanowiono umieścić na jednym przewi- czasem na niektórych stronach WWW.
janym pasku, w dwóch rzędach. Korzystanie z takiej palety Program jest typu shareware. Rejestracja kosztuje $35
— polegające na ciągłym przewijaniu paska kolorów w jed- ($50 dla firm) i można jej dokonać poprzez serwisy Sharelt
ną i w drugą stronę — jak łatwo się domyśleć, jest bardzo lub RegNow. Szczegóły na stronie WWW producenta. Pro-
uciążliwe. Także kolejne klatki animacji są umieszczone po gram jest dostępny w języku angielskim oraz w wielu języ-
lewej stronie, w jednym (długim —jeśli dana animacja za- kach europejskich. Liczba dostępnych języków jest znacz-
wiera wiele klatek) pasku, który należy ciągle przewijać, nie większa niż w przypadku AnimateMe, lecz nadal braku-
je polskiego. Program ten można zarejestrować za darmo,
i Ąrmioton Tool* Help
jeśli wykona się dla producenta tłumaczenie na język pol-
E* + x • . ft9G
ski. To samo dotyczy programu AnimateMe.
Podsumowując: plusy tego programu nie są zbyt do-
strzegalne wśród jego minusów. Ponadto wszystko, co ofe-
ruje ponad możliwości opisywanego GIF Movie Gear, każ-
dy grafik znajdzie wśród podstawowych opcji lub rozsze- E1
rzających pluginów Photoshopa czy ImageReady. Jeśli o
Dl
ktoś decyduje się kupić dwa (lub więcej) programy do two- ro
rzenia animowanych GIFów — może rozważyć możliwość -o
nabycia także Active GIF Creator. Jeśli natomiast z powo-
dów finansowych lub innych względów chce nabyć tylko je-
den z programów — to bez zastanowienia powinien wybrać
omawiany wcześniej GIF Movie Gear. Porównanie obu tych
narzędzi wypada zdecydowanie na plus właśnie tego pro-
B Główne okno programu Active GIF Creator 2.18 gramu. •
kwiecień/maj 2004 55
WEBDESIGN
ROZMIESZCZENIE ELEMENTÓW
NA STRONIE WWW
Łukasz Strzelec
Stronę WWW można podzielić na kilka elementów, które menu po lewej stronie witryny. Odbiorcami witryn typu ho-
rozmlBszcza się w dowolny sposób — tworząc różnorodne me page są przede wszystkim znajomi ich autorów, a strony
icje. Głównymi elementami strony są: te mają charakter pokazowy, prezentujący wizerunek twór-
cy, dlatego też w tym przypadku można pomyśleć o czymś
niestandardowym, nieszablonowym — sprawić by strona
Zazwyczaj jest to stosunkowo spora po względem roz- stała się ciekawa, „inna" i niekonwencjonalna. Jednakże
miarów grafika (o niewielkiej wysokości, ale dużej szeroko- podkreślmy to raz jeszcze: Optymalnym rozwiązaniem jest
ści — szerokość witryny). Nie jest to jednak regutą, gdyż lo- umiejscowienie menu po lewej stronie naszej witryny.
go może stanowić również mały, jednakże mocno zauwa- Dobrym sposobem na urozmaicenie menu jest dodanie
żalny element graficzny. Przyjęło się jednak, że logotyp małych obrazków kojarzących się z danym tematem/dzia-
w Home Page'ach to zazwyczaj duża, przejrzysta grafika łem menu, co przedstawia poniższy Rysunek B.
(umieszczana w polu, obszarze Top witryny), której tema-
tem przewodnim są zainteresowania/hobby autora np. ro-
wer, samochód, komputer... itd.
Logo często składa się również z nazwy strony oraz jej
adresu, co widać na Rysunkach II i B.
56 kwiecień/maj 2004
BANNER STOPKA
Któż z nas nie miał problemów z poprawnym umiejsco- Ostatnim dość istotnym elementem, jest tzw. „stopka"
wieniem bannera tak, aby po pierwsze nie przeszkadzał czyli krótko mówiąc dane na temat autora strony. Zazwy-
i nie psuł dobrego wizerunku strony. A po drugie był zauwa- czaj zamieszczana jest tam informacja kto wykonał projekt
żalny — bo to przecież jego główne zadanie. Na wstępie graficzny (design/layout). Często też spotykany jest napis
podam dwa standardowe wersje rozmiarów bannera, któ- „wszystkie prawa zastrzeżone".
re przyjęły się na całym świecie i są najczęściej stosowa-
ne. Są to: 400 x 50 pikseli oraz trochę większy 468 x 60 pik- It is not meant to be read. Designt
ropy woijid look ii it was idserted.
oiiiy. It is not meant to te
seli. h,-.w *.py would bok. if it
Natomiast najczęściej stosowanymi rozwiązaniami w kwe-
stii rozmieszczania bannerów na stronach WWW są:
H Stopka
•• Umieszczanie bannera w Topie. Należy go wkompono-
wać tak, aby nie nachodził na inne elementu strony, jak EFEKTY
chociażby wcześniej opisane menu. W celu jeszcze większego uatrakcyjnienia naszej strony
można zastosować wiele ciekawych efektów. Jednym z nich
jest np. zrobienie logotypu w formie pociętych kwadratów
(obrazek niżej).
Company Mamę ' »»»»»•>»»»
ompany Warne
I
O Przykład umieszczenia bannera na dole strony
o
Efekt spinacza będzie atrakcyjnym dodatkiem na stronie WWW
m
Teraz musimy zadać sobie proste pytanie: "Co jest dla Wszystkie wyżej wymienione elementy są stosowany-
nas ważniejsze? Wygląd i lepsze wrażenie? Czy może lep- mi standardami w dzisiejszej dobie internetu. Warto cza-
sza skuteczność reklamowa?". Gdy znajdziemy już na to sem pomyśleć, popracować nad naszą stroną, aby zwięk-
pytanie odpowiedź, to zostaje jedynie zastosować jedną szyć jej efektywność i jakość. Zrobić coś czego nie mają in-
z dwóch proponowanych przeze mnie metod. Jednakże ni. Niech będzie ona niepowtarzalna, jedyna w swoim ro-
pragnę zauważyć, że w home pagach stosowana jest czę- dzaju — niech wyróżnia się w „tłumie". ©
ściej druga metoda, której efekt widać powyżej.
psć
kwiecień/maj 2004 57
aczęła się Twoja przygoda z grafiką, jak wyglą-
* dała pierwsza praca?
kwiecień/maj 2004 59
Fantazja
stawiłem na ilustracje, zacząłem dostawać zlecenia pra- ci, organizowanego przez UNESCO pt. Ratujmy Wenecję.
wie wyłącznie na rysunki. I o to mi zawsze chodziło. Dzi- Stoję tam w białej koszuli, najmniejszy, uczeń Szkoły Pod-
wię się tylko, że nie wpadłem na to wcześniej. stawowej nr 54, przyduszony aksamitką i robię mądrą mi-
Bardzo lubię projektować różne znaczki i logotypy. Przy- nę. Ta gazeta to jeden z moich największych skarbów, bo
pominają szyfry, w których trzeba zakodować pewną in- mniej więcej w tym czasie doszło do mnie, że umiem ryso-
formację, wać i mogę coś z tym zrobić. Dostałem wtedy super-kred-
W projektach internetowych najbardziej interesuje mnie ki świecowe, zwane też przez dorosłych tłustymi pastela-
zawsze nawigacja. Próbuję rożnych rzeczy i robię ekspe- mi. Używałem ich przez wiele lat, nawet do projektów na
rymenty. Jednym z nich był serwis dla Tomasza Gudzowa- studiach.
tego (www.tomasz-gudzowaty.pl). Tylko nie pytaj kto to ko-
dował... Jak spędzasz czas wolny, czy masz jakieś hobby po-
za grafiką?
Twoje prace zdobyły wiele nagród, która jest dla Cie-
bie najcenniejsza? Praca jest moim hobby. Wyjątkowo mało oryginalne zda-
nie, ale nic na to nie poradzę. Myślę o moim hobby nawet
Mam pożółkły egzemplarz Życia Warszawy z 1976 ro- podczas tak wyczerpującej i nudnej czynności jaką jest
ku. Na pierwszej stronie, po lewej, Edward Gierek ściska pływanie.
się z Helmutem Schmidtem. Po prawej zdjęcie tej samej
wielkości przedstawia siódemkę laureatów polskiego eta- Jakich wskazówek udzieliłbyś czytelnikom, którzy
pu międzynarodowego konkursu rysunkowego dla dzie- upatrują swoją przyszłość w grafice?
o
di
ro
TJ
Jeśli chcesz robić wyłącznie to co lubisz i chcesz być
V)
o.
PAWEŁ JONCA zadowolony z efektu - musisz być niezależny, czyli robić
g Urodził się 35 lat temu. wszystko sam. Ciężka sprawa, prawie niewykonalna.
g Na papierze architekt,
naprawdę ilustrator
i projektant. p.s. Nie jestem robotem, mam dziewczynę i jestem nor-
Prowadzi jednoosobowe malny :)
studio Pejot.
www.pejot.com Z Pawiem Jońcą rozmawiali:
Agnieszka Wawrzyniecka i Mariusz Dubielecki
60 kwiecień/maj 2004
FOTOGRAFIA CYFROWA
CANON
Za najważniejsze wydarzenie stajni Canon trzeba uznać
premierę modelu PowerShot Prol. Jest to znakomity roz-
budowany kompakt o konstrukcji przypominającej małą lu-
strzankę. Pierwszy wyróżnik to rozdzielczość 8 Mpx, drugi
to rewelacyjny obiektyw o ogniskowej 28-200mm i jasności
F2.4-F3.5. Czerwona obwódka wokół ostatniego pierście-
nia była dotąd zarezerwowana wyłącznie dla profesjonal-
nych wymiennych obiektywów serii L. Oznacza to najwyż-
szą jakość układu optycznego z elementami zapobiegają-
cymi powstawaniu typowych wad obrazu (krzywizny, roz-
bieżności kolorów, duszki). Prol przeznaczony jest dla
doświadczonych fotoamatorów i można go uznać za na-
stępcę bardzo popularnego modelu G5.
Druga ważna nowość Canona to PowerShot S1 IS.
Otwiera on nową linię kompaktów o bardzo rozbudowanej
optyce (obiektyw z 10-krotnym zoomem 37-370mm!) i roz-
szerzonej funkcji nagrywania filmów. Producent przedsta-
wia go jako połączenie kamery z aparatem cyfrowym i fak-
tycznie coś w tym jest. Sl IS fotografuje w maksymalnej roz-
dzielczości 2048 x 1536, a filmy nagrywa w formacie VGA
(640 x 480) w tempie 30 kl/sek. bez limitu długości uję-
U Nowy Canon PowerShot Pro1 podłączony do drukarki termosublimacyjnej CP300
62 kwiecień/maj 2004
poza rozdzielczością 6 Mpx i możliwością wy-
miany optyki, jest cena — ok 1000 dolarów ame-
rykańskich.
Nikon zgodnie z oczekiwaniami również pod-
niósł poprzeczkę do 8 Megapikseli. Mowa o roz-
budowanym kompakcie Coolpix 8700, który mo-
że pochwalić się także imponującą optyką (od-
powiednik 35-280mm F2.8-F4.2). Dla począt-
kujących przewidziano aż 12 programów te-
matycznych, a dla zaawansowanych odbiorców
wszystkie funkcje manualne znane z tradycyj-
nych lustrzanek. Przykładem na to, że w dobie
„cyfry" zainteresowanie koncernów fotograficznych
B Aparat cyfrowy Canon PowerShot Prol nie ogranicza się wyłącznie do aparatów, są inne nowo-
ści Nikona. Warto tu wymienić lampę SB-600 dedykowaną
cia. Taką funkcjonalność ma już wiele aparatów, ale S1 ma do aparatów cyfrowych, oprogramowanie Picture Project do
nad nimi jedną zasadniczą przewagę. Posiada wbudowany zarządzania plikami zdjęciowymi czy przenośny bank zdjęć
optyczny stabilizator obrazu (Image Stabilizer), który przy Nikon Coolwalker pełniący funkcję pojemnego dysku pod-
fotograficznych ujęciach tele, zapobiega wstrząsom, a pod- czas pracy w terenie.
czas kręcenia filmów zmiękcza ruch „kamery". To będzie
bez wątpienia hit sezonu letniego 2004. OLYMPUS
Ponadto japoński potentat pokazał na PM A 2004 jeszcze Olympus również postawił na wysoką rozdzielczość i tak
5 nowych aparatów kompaktowych {IXUS lis, 430, 500 oraz samo jak konkurenci postarał się o aparat 8-megapikselo-
PowerShot A75 i A3W). Są one typowym przykładem od- wy wyposażony w szerokokątny obiektyw o 5-krotnym zbli-
świeżenia starszych produktów, a ich wypuszczenie cieszy żeniu. Mowa o modelu CAMEDIA C-8080, który jest nowym
przede wszystkim dlatego, że poprzednicy strącana cenie. flagowcem japońskiej firmy. Oczywiście jako zaawansowa-
ny aparat kompaktowy posiada wszystkie funkcje jakich
NIKON spodziewamy się po aparacie z wysokiej półki.
Największy konkurent Canona również chciał pokazać Ponadto Olympus rozszerzył interesującą serię Ultra
się z jak najlepszej strony i chyba zrealizował zamiar. PMA Zoom, której specyfika polega na bardzo rozbudowanej
było pierwszą okazją do publicznej prezentacji zapowiada- optyce przy stosunkowo niewielkich gabarytach korpusu
nego wcześniej modelu Nikon D70. Jest on bezpośrednim aparatu. I tak CAMEDIA C-725 oferuje zbliżenie 8-krotne,
rywalem taniej lustrzanki Canon ESO 300D i już wstępny C-765 aż 10-krotne, a C-770 Movie poza potężnym obiek-
ogląd specyfikacji upewnia, że ma szansę na zwycięstwo tywem także rozbudowaną funkcjonalność trybu video,
w tej batalii. D70 oferuje pełną funkcjonalność o możliwościach zbliżonych do wspomnianego Canona Sl
z zaawansowanymi funkcjami fotograficz- IS. Uzupełnieniem najnowszej oferty firmy jest też kilka
nymi (3 rodzaje pomiaru światła, szeroki mniejszych, kieszonkowych kompaktów, które zgod-
zakres czułości, wybór rodzaju pomia- nie z przeznaczeniem mogą być zabierane „zawsze
ru ostrości itd.). Natomiast 300D po- i wszędzie".
siada wbudowane ograniczenia, któ-
re mogą zniechęcać bardziej wy- MINOLTA I FUJIFILM
robionych fotografów. Najwięk- W obozie Minolty (choć po niedawnej fu-
szym atutem D70 zji powinniśmy mówić o firmie Konica Mi-
nolta) za najbardziej doniosłe wydarze-
nie trzeba uznać ogłoszenie prac
nad lustrzanką Dynax 7 Digital. Po-
siadacze optyki systemowej Minol-
ty czekali na to od prawie 2 lat. Póki
co wiadomo, że aparat będzie oparty
na konstrukcji rewelacyjnej lustrzan-
i analogowej Dynax 7 i zostanie
wyposażony w sensor o roz-
dzielczości 6 Mpx. Więcej
szczegółów wkrótce.
Inne ciekawe premiery
koncernu Konica Minolta ro
"O
to DiMAGE A2 czyli kolej-
ny reprezentant rodziny 8 5
Megapikseli. Robi wrażenie 5
znakomity obiektyw o ogni-
skowej 28-200mm F2.8-F3.5,
który wspomagany jest przez
unikalny system redukcji wstrzą-
psd
kwiecień/maj 2004 63
FOTOGRAFIA CYFROWA
...I INNI
Udało nam się w największym skrócie wspomnieć o le-
dwie trzeciej części wszystkich modeli zaprezentowanych
na PMA 2004. Dodajmy do tego, że Kodak powiększył linię
kompaktową EasyShare, Sony pokazało kilka Cyber-sho-
tów, Pentax zaktualizował serię Optio, a HP otworzyło inte-
resującą linię R (Photosmart R707). Po kilka nowych modeli
Q Najnowszy przywiozły ze sobą takie firmy jak Panasonic, Casio, Kyoce-
sów. O ile in-
model firmy Olymus
- CAMEDIA C-8080 ni producenci ra, a nawet formalnie nieistniejący już Polaroid.
skupiają się w takich Jeśli dodamy do tego całą masę nowych obiektywów,
sytuacjach na korygo- oprogramowania do obróbki obrazu, drukarek, skanerów
waniu wstrząsów na pozio- i innych urządzeń mniej lub bardziej związanych z fotogra-
mie optyki, to rozwiązanie Minolty polega na wprawieniu fią, to obraz tego co wydarzyło się w pierwszych miesią-
w kontr-wibrację samej matrycy CCD. Poprzednik, model cach 2004 roku będzie prawie kompletny. Aby oddać ska-
DiMAGE A1 dowiódł już skuteczności tego systemu. War- lę zjawiska jakim jest fotografia cyfrowa możemy przywo-
to zwrócić także uwagę na DiMAGEZ2, kompakt z rozdziel- łać ostatnią grupę produktową— nośniki danych. Całkiem
czością4 Mpks i imponującym obiektywem 37-370mm. Pod niedawno mało komu śniły się karty pamięci większe niż
względem właściwości fotograficznych można powiedzieć, 512MB. A teraz? Lexar Media oraz SimpleTech mają już
że jest to aparat rodzinny z ambicjami. Ale jest coś jeszcze w ofercie karty CompactFlash o pojemności 8GB! Wszyst-
— Z2 rejestruje filmy wideo w rozdzielczości 800 x 600 i to kie opisane przez nas produkty powinny trafić do sprzeda-
bez ograniczeń długości ujęcia. ży jeszcze przed wakacjami. Pora więc zacząć poważne
Z kolei Fujifilm konsekwentnie rozwija własne rozwią- oszczędności. ®
zania technologiczne w przechwytywaniu obrazu. Senso-
CHCESZ K KSIĄ;
'o TANIEJ7
Zamów prenumeratę .psd, a będziesz mógł kupić
każdą z niżej wymienionych książek 2 0 % taniej
r
3D Studio Max R2. Ilustrowany poradnik Flash w zastosowaniach. Projekty praktyczne
Adobe (Ilustrator 10 PL. Ćwiczenia z... Grafika w sieci WWW. Proste rozwiązania
Photoshop 7
prosto - poglądowo - wnikliwie
20 min
Efekty tekstowe
Magdalena Cyrczak
film W tym artykule przedstawimy efekty tekstowe, które można łatwo wykonać w ciągu kilku minut.
Wykorzystują one przede wszystkim wbudowane narzędzia i filtry Photoshopa, natomiast raczej
nie wymagają zdolności manualnych, co sprawia, że są przydatne dla każdego.
TEKST 3D
Przesuwanie warstw
PŁONĄCY NAPIS
Filtr poruszenie
66 kwiecień/maj 2004
[OK\. Teraz wybieramy polecenie Obrazek>Tryb>Tabela Kolorów...
(lmage>Mode>Color Table...) i z rozwijanej listy wybieramy Ciało
Czarne (Black Body). Na koniec, aby efekt wyglądał bardziej reali-
stycznie możemy zduplikować istniejącą warstwę Warstwa>Powiel
warstwę... (Layer>Duplicate Layer...) i na tej, która znajduje się ni-
żej, zastosować filtr Filtr>Rozmycie>Rozmycie Gaussowskie...
(Filter>Blur>Gaussian Biur...)
WYCINANKA
Wycinanie napisu
Cień
LODOWY NAPIS
Nadanie efektów
Filtr Wiatr
kwiecień/maj 2004 67
Paweł Mucha
Tutońal ten ma na celu ukazanie możliwości programu Adobe Photoshop w zakresie sferycznego
zniekształcania obrazu, przydatnego na przykład przy tworzeniu efektu lupy. Na początku na-
uczymy się jak przy pomocy kilku narzędzi uzyskać ten efekt, a następnie do szkła powiększają-
cego dobudujemy korpus uzyskując realistyczną lupę.
Io.
sować efekt lupy. Najpierw należy zdecydować, którą część obrazu
chcemy poddać powiększeniu. Następnie z paska narzędzi wybie-
i ramy Zaznaczanie Eliptyczne {Elliptical Marquee Tool) i rysujemy
3 owal, który posłuży nam za soczewkę (by zakreślić idealny okrąg
przytrzymujemy klawisz [Shift]). Teraz klikamy prawym przyciskiem
myszy na zaznaczonym przez nas obszarze i wybieramy opcję
Warstwa przez kopiowanie (Layer via Copy). Nowo powstałej war-
stwie nadajemy nazwę Szkło.
68 kwiecień/maj 2004
s.
Powiększamy zaznaczenie
Tworzymy obudowę
Dodajemy rękojeść
psi
kwiecień/maj 2004 69
KLASYCZNE EFEKTY
ł-
nia, przytrzymując [Shift] przesunąć kursor do dolnego brzegu
— tak, jak to jest pokazane na rysunku — i tam zwolnić oba kla-
wisze. Kolejno wybieramy narzędzie Zaznaczanie Prostokątne
(Rectangular Marquee Tool). Przytrzymanie klawisza [Alt] podczas
zaznaczania, usuwa to co zakreślamy, z istniejącego już zazna-
czenia. Zmniejszamy więc w ten sposób maskę do kilku górnych
pikseli. Następnie zmieniamy kolor narzędzia (Foreground Color)
na biały i ponownie wykonujemy operację przy użyciu Gradient
(Gradient Tool).
Efekt końcowy •
S1
o
ra
"a
70 kwiecień/maj 2 0 0 4
POZNAJEMY PHOTOSHOPA
INTERFEJS PHOTOSHOPA
Adobe Photoshop CE • roktadka_psd_re(J>03.psd e 18,3% (Layer 20,RGBI]
I Plik Edycja Obrazek Warstwa Zaznacz Filtr Widok Okno Pomoc
O>*-
& LJ
*. T.
^ \
ii./.
aao
jemy. 100% oznacza rzeczywistą Informacje o dokumencie. Do wybo- w danej chwili wykonać za pomocą
wielkość dokumentu, jednak gdy pra- ru mamy kilka opcji, które dosto- danego narzędzia. Stanowi to swego
cujemy na dużym dokumencie, któ- sowujemy do aktualnych naszych rodzaju podręczną pomoc dla użyt-
ry nie mieści się w oknie programu potrzeb. kowników, którzy poznają i uczą się
w całości możemy zmienić jego ska- programu Photoshop.
lę w zależności od potrzeb.
kwiecień/maj 2004 71