PS2_projektowaniestron.pdf

(1697 KB) Pobierz
8887146 UNPDF
webdesign
projektowanie stron
Łukasz Pabian
Z
Projektowanie
stron
anim przystąpimy do prac związanych z projek-
towaniem strony, warto zastanowić się, o czym
będzie ta strona i z jakich elementów będzie się składać,
czego będziemy potrzebowali do wykonania projektu i –
co najważniejsze – jak będzie ten projekt wyglądał. Warto
sporządzić szkic strony na kartce papieru, opracować jej
układ, rozrysować sobie szkielet struktury strony.
czyłoby umieścić element, który informuje o danych
kategoriach, jakiś tekst i może jeden obrazek. Jednak
warto zastanowić się, czy nie udoskonalić strony, two-
rząc jednolity interfejs, gdzie wszystkie elementy (na-
główek, menu, część główna, stopka) będą ze sobą połą-
czone. Jednym z najważniejszych elementów części,
gdzie znajduje się treść, jest zaznaczenie miejsca, w któ-
rym się jest. Jest to istotny element ze względu na to, że
w przypadku rozbudowanych stron oglądającemu czę-
sto zdarza się zgubić. Bardzo często na stronach znajdu-
ją się różnego rodzaju strzałki, punkty, elementy dodat-
kowe, ramki, pełniące funkcję nawigacyjną, i które warto
uwzględnić w projekcie.
PODSTAWOWE ZASADY
Jest kilka zasad, o których warto pamiętać podczas
projektowania stron w Photoshopie:
internetowych
w pakiecie
• korzystamy z własnych pomysłów, staramy się jak
najmniej kopiować od innych;
• staramy się wprowadzać coraz to nowe kompozycje,
dalekie od sprawdzonych standardów (wciąż jednak
należy pamiętać o szybkości transmisji);
• podczas projektowania staramy się umieszczać każ-
dy nowy element na nowej warstwie, dzięki temu
uzyskujemy większą kontrolę nad projektem;
• staramy się używać ujednoliconych krojów czcio-
nek w projektach graicznych, ich niejednorodność
może przyciemnić sam projekt graiczny;
• staramy się projektować jednolitą kompozycję gra-
iczną tak, by każdy element tworzył całość z pozo-
stałymi;
• staramy się tworzyć projekt w myśl „diabeł tkwi
w szczegółach”, dbając o szczegółowość wyglądu
strony (czasem warto odczekać parę dni i wrócić do
projektu, można dzięki temu bardziej subiektywnie
popatrzeć na to, co się robi);
• gdy już mamy gotowy layout , należy pokazać go
innym, by mogli powiedzieć nam, co w nim trzeba
jeszcze dopracować.
Adobe
ELEMENTY STRONY INTERNETOWEJ
Na początek warto zastanowić się, jak i gdzie będą
porozmieszczane elementy na naszej stronie, w któ-
rym miejscu będzie menu, gdzie umieścimy treść głów-
ną, jak duży będzie nagłówek, a jak duża stopka. Rozwią-
zanie tych problemów przychodzi z czasem. Wraz z ilo-
ścią wykonanych stron nabiera się coraz większej wpra-
wy przy ich projektowaniu.
PRZYCISKI
W momencie, gdy projekt strony jest już opracowany,
trzeba zastanowić się, jak będą zachowywały się przyci-
ski w menu po najechaniu na nie myszką. Jeżeli będą to
tylko zmiany formatowania tekstu, to nie ma problemu.
Natomiast gdy będą podmieniały się graiki, to trzeba już
zastanowić się nad opracowaniem tych graik. Zazwy-
czaj sprowadza się to do skopiowania menu i opracowa-
nia wersji strony po najechaniu myszką na poszczegól-
ne jej elementy. W tym wypadku warto opracować sobie
i wypisać nazwy wszystkich kategorii i podstron tak, by
później nie tracić czasu na dorabianie graik.
Photoshop
MENU
Jednym z najważniejszych elementów strony inter-
netowej jest menu. Musi ono być przede wszystkim
dobrze widoczne. Przy rozbudowanych serwisach trze-
ba zastanowić się nad taką organizacją menu, aby łatwo
było dotrzeć do pożądanych opcji. Warto skupić się na
tym, by menu było proste, żeby nie zawierało zbyt wie-
lu opcji, w których można byłoby się zgubić. Odpowied-
nimi miejscami dla menu mogą być: lewa strona, prawa
strona, lub góra. Rzadko, albo w ogóle menu umiejsco-
wione jest na dole strony, gdyż zakłóca to odbiór strony
przez czytelnika, który przygotowany jest na to, że znaj-
dzie menu „tam gdzie zawsze”. Właściwie każdy element
wokół menu może być dowolnie dobrany, pod warun-
kiem, że nie będzie go przytłaczał.
Rozpoczynając proces projektowania
strony internetowej, zawsze należy zasta-
nowić się, co na niej będzie umieszczane.
Po jej stworzeniu nie ma sensu dokładać
coraz to nowych kategorii, które przyjdą
nam do głowy, ponieważ w pewnym
momencie zostanie całkowicie zatarta
idea strony.
NAGŁÓWEK
Nagłówek stał się elementem reprezentacyjnym danej
strony czy organizacji, która dzięki stronie chce się poka-
zać. Przedstawia on proil działalności osoby, irmy, orga-
nizacji itp. Najczęściej jest to kompozycja fotograii oraz
efektów graicznych, która ma na celu przyciągnąć uwa-
gę oglądającego. Ale czy to jest tak bardzo potrzebne?
Niekoniecznie. Ta część może zostać pusta, albo zawie-
rać niewielką ilość treści, może ona być również znacz-
nie większa niż się większości z nas wydaje, aby wzboga-
cić stronę o „coś innego”. Nic nie stoi na przeszkodzie, by
umieścić część lub całe menu w nagłówku. Wzbogaci to
konstrukcję strony, oczywiście jeżeli jest ku temu okazja.
CZĘŚĆ GŁÓWNA STRONY
Następnie należy opracować miejsce, w którym będzie-
my zamieszczać główną treść strony. Może się wydawać,
że jest to łatwa część projektowania, bo przecież wystar-
1 Projekt strony internetowej wykonany w Photoshopie
66
Artykuł został opublikowany w magazynie Design Extra!. Zapraszamy do lektury całego magazynu.
Szczegóły na stronie internetowej www.dsx.pl. Wszelkie prawa zastrzeżone.
Powielanie całości lub części artykułu bez zgody Wydawnictwa - zabronione.
www.dsx.pl Design Extra! Nr 5
Design Extra! Nr 5
www.dsx.pl
67
8887146.050.png 8887146.061.png 8887146.072.png 8887146.077.png 8887146.001.png
 
webdesign
projektowanie stron
Krok 1 Przygotowujemy tło
Krok 2 Dodajemy kolor i gradient do selekcji
Krok 5 Oddzielamy menu od reszty projektu
Krok 6 Ostatecznie wydzielamy menu
Tworzymy nowy obrazek
Plik–>Nowy (ang. File–>New)
lub [ Ctrl ]+[ N ]. Ustawiamy roz-
miary obrazka: długość 780,
szerokość 800. Wypełniamy
obrazek gradientem [ G ]
(jeżeli mamy ustawione
Wiadro z farbą (ang. Paint
Bucket) , wciskamy [ Shift ]+[ G ],
żeby przejść do gradientów)
z koloru RGB:[196,196,196] do
koloru RGB:[150,150,150].
Zaznaczeniem [ M ] ustawiamy
obszar 255x140 px, gdzie
będzie znajdować się menu,
i wypełniamy go kolorem
RGB:[255,198,0]. Do tego
użyjemy Wiadra z farbą (ang.
Paint Bucket), ; wciskamy
[ Shift ]+[ G ], żeby wrócić z gra-
dientu do Wiadro z farbą (ang.
Paint Bucket) . Bez zdejmowa-
nia zaznaczenia wybieramy
ponownie gradient radialny,
zmieniamy wartość pierwsze-
go koloru na RGB:[255,174,0],
a w opcjach gradientu
ustawiamy gradient radialny
z koloru do przeźroczystości
i wypełniamy zaznaczenie
na nowej warstwie tak, by
uzyskać efekt cieniowania.
Oddzielamy nagłówek i menu
od reszty projektu poprzez
wypełnienie obszaru 780x140
na najniższej warstwie, ale
nie niższej niż tło – gradient.
Powielamy dwukrotnie war-
stwę, gdzie wcześniej ryso-
waliśmy pionowe wgłębienie
Warstwa–>Powiel warstwę
(ang. Layer–>Duplikate),
a następnie przesuwamy ją
na lewy i prawy koniec menu.
Z prawej strony menu
zaznaczamy obszar 10x140 px
i wypełniamy go gradientem
liniowym z koloru szarego
RGB:[135,135,135] do przeźro-
czystości. Zmieniamy sposób
przenikania na Mnożenie
(ang. Multiply ) i zmniejsza-
my stopień krycia do 50%.
Duplikujemy tę warstwę
i przenosimy ją na lewą stronę
menu.
Oddzielamy nagłówek od
dolnej części, tworząc pas
szarego koloru o wymia-
rach 780x30 px. W górnej
części tworzymy wgłębie-
nie z jasnej i ciemnej linii.
Powielamy i przesuwamy na
dół. Poniżej i powyżej pasa
tworzymy cień na takiej
samej zasadzie jak w punkcie
poprzednim.
Zaznaczamy pod menu
obszar o długości 255 px
i przeciągamy zaznaczenie
do samego dołu. Wypełniamy
go gradientem z koloru RGB
[135,135,135] do koloru RGB
[109,109,109].
Krok 3 Dodajemy linie
Krok 4 Dopracowujemy elementy menu
Krok 7 Dodajemy lewą kolumnę
Krok 8 Kategorie w lewej kolumnie
Umieszczamy tekst menu,
wyrównując go do prawej
strony; rodzaj czcionki jest
dowolny. Umieszczamy
między opcjami menu dwie
linie o wysokości 1 px: górną
koloru szarego (nie za ciem-
ny) i dolną koloru białego,
a następnie zmniejszamy
stopień krycia do 40%.
Powielamy teraz tę war-
stwę tyle razy, ile jest opcji
w menu, odpowiednio
dopasowując je do wyglądu
menu. Na kolejnej warstwie
zaznaczamy obszar 35x140
px i wypełniamy go kolorem
RGB:[177,104,0]. Między
dwoma obszarami koloru żół-
tego i brązowego rysujemy
dwie kreski złożone z białego
i szarego koloru, by uzyskać
wgłębienie. Po prawej stronie
dodajemy ozdobnik do każ-
dej opcji w menu.
Z lewej i z prawej strony
ograniczamy go pionowymi
kreskami koloru trochę ciem-
niejszego od użytych w gra-
diencie, np.: RGB [77,77,77],
i ponownie umieszczamy
cień, używając gradientu
i zmiany sposobu przenikania
tak jak w kroku 8.
Chcąc odseparować poszcze-
gólne kategorie w lewej
kolumnie, zaznaczamy
obszar, w którym będziemy
tytułowali daną kategorię.
Wypełniamy go jaśniejszym
kolorem szarym. Na górze i na
dole wykonujemy wgłębienie
za pomocą linii ciemnej i pod
nią jasnej.
Umieszczamy tekst tytu-
łowy dla tej kategorii.
Można dodać cień pod
tekstem, wybierając z menu
Warstwa–>Styl warstwy–
>Opcje mieszania (ang. Layer
Style–>Blending Options).
Ustawiamy Krycie (ang.
Opacity) na 40%, Odległość
(ang. Distance) oraz Wielkość
(ang. Size) na 1, wszystko
w zakładce Cień (ang. Drop
Shadow) .
68
www.dsx.pl Design Extra! Nr 5
Design Extra! Nr 5
www.dsx.pl
69
8887146.002.png 8887146.003.png 8887146.004.png 8887146.005.png 8887146.006.png 8887146.007.png 8887146.008.png 8887146.009.png 8887146.010.png 8887146.011.png 8887146.012.png 8887146.013.png 8887146.014.png 8887146.015.png 8887146.016.png 8887146.017.png 8887146.018.png 8887146.019.png 8887146.020.png 8887146.021.png 8887146.022.png 8887146.023.png 8887146.024.png 8887146.025.png 8887146.026.png 8887146.027.png
webdesign
projektowanie stron
Krok 9 Przygotujemy części pod splash-screen
Krok 10 Dodajemy ramkę
Krok 13 Tworzymy stopkę
Krok 14 Formatujemy newsy
Przygotujemy teraz prze-
strzeń pod splash-screen
(obrazek wprowadzający
do stron). Po prawej stronie
odseparujemy kawałek
przestrzeni i wypełnimy ją
jednolitym kolorem np. RGB:
[114,116,115]. Poniżej ogra-
niczymy go jasną kreską RGB:
[214,214,214].
Aby uzyskać wrażenie
większej przestrzeni, pod
kreską rysujemy gradient
z koloru RGB:[192.192.192]
do przeźroczystości, mniej
więcej na wysokość 30 px,
oraz dodajemy cień powyżej
kreski na podobnej zasadzie
jak wcześniej.
W tym samym miejscu rysu-
jemy ramkę o grubości 3 px:
zaznaczamy obszar 415x150
px, wypełniamy go kolorem
RGB [192,192,192] i wybiera-
my z menu Zaznacz–>
Zmień–>Zawężanie (ang.
Select–>Modify–>Contract).
Ustawiamy liczbę na 3,
przez co nasze zaznaczenie
zmniejszyło się o 3 punkty na
każdym z boków.
Do ogólnego projektu
brakuje nam jeszcze stopki.
Tworzymy zaznaczeie 780x30
px i wypełniamy je gradien-
tem linearnym z koloru RGB
[129,129,129] do koloru RGB
[113,113,113].
Nad nim ograniczamy ele-
ment poziomą kreską o nie-
wiele ciemniejszym odcieniu
szarego i powyżej linii robimy
cień za pomocą gradientu
i sposobu przenikania warstw.
W tym miejscu możemy
napisać tekst na temat praw
autorskich dotyczących
projektu.
Kolejnym etapem tworze-
nia projektu strony jest
opracowanie jej zawartości.
Miejscem na zamieszczanie
informacji o nowościach na
stronie będzie lewa kolumna,
która będzie pokazywać się
na każdej podstronie tak,
aby jak najszybciej dotrzeć
do odwiedzających stronę
z nowymi informacjami.
W odseparowanym miejscu
w lewej kolumnie przy-
gotujemy odpowiednie
formatowanie dla każdego
newsa . Dobrze jest używać
w projekcie czcionek, które
ostatecznie będą użyte już na
stronie. Przykładową czcionką
i najczęściej używaną przy
produkcji stron jest Verdana
lub Arial .
Krok 11 Umieszczamy splash-screen
Krok 12 Planujemy nagłówek
Krok 15 Wyłączamy warstwy
Krok 16 Dzielimy projekt
Wybieramy Edycja–>Wytni j
(ang. Edit–>Cut) lub [ Ctrl ]+[ X ],
dzięki czemu usuniemy
niepotrzebny obszar. Do
wewnętrznego obszaru
przenosimy obrazek o roz-
miarze 409x144. Obrazek
powinien kolorystycznie
i treściowo nawiązywać oraz
komponować się z całym
projektem.
Wracamy do grupy warstw
menu nagłówek , gdzie
umieszczamy mapę świata,
najlepiej zaraz nad wypełnie-
niem, na całą szerokość stro-
ny tak, by komponowały się
cienie utworzone wcześniej.
Oprócz tego wkomponujemy
swoje logo lub inny element,
by wprowadzić identyikację
sieciową twórcy na stronie.
Po prawej stronie tuż pod
naszym splash screenem
będziemy zamieszczać
główną treść strony.
Przygotowujemy tło pod
nagłówek. Dla lepszego roze-
znania w wyglądzie projektu
dobrze jest umieścić więcej
warstw z tekstami kategorii,
wyłączając widoczność tych,
które nie są nam potrzebne
w danym momencie.
W Image Ready przygotowu-
jemy linie cięcia. Włączamy
linijki wokół obrazka Widok–>
Miarki (ang. View–>Rulers)
lub [ Ctrl ]+[ R ]; klikając na
linijki, przeciągamy kursor
na pożądaną część obrazka.
Wygodniej będzie nam, jeśli
podzielimy sobie nasz projekt
na cztery części: góra – nagłó-
wek i menu, lewa strona,
prawa strona oraz stopka.
70
www.dsx.pl Design Extra! Nr 5
Design Extra! Nr 5
www.dsx.pl
71
8887146.028.png 8887146.029.png 8887146.030.png 8887146.031.png 8887146.032.png 8887146.033.png 8887146.034.png 8887146.035.png 8887146.036.png 8887146.037.png 8887146.038.png 8887146.039.png 8887146.040.png 8887146.041.png 8887146.042.png 8887146.043.png 8887146.044.png 8887146.045.png 8887146.046.png 8887146.047.png 8887146.048.png 8887146.049.png 8887146.051.png 8887146.052.png 8887146.053.png 8887146.054.png
webdesign
Krok 17 Tniemy projekt w Image Ready
Krok 18 Pocięty na kawałki fragment projektu
Duplikujemy obrazek cztery
razy za pomocą Obrazek–>
Powiel (ang. Image–>
Duplicate) i z każdego wycią-
gamy odpowiedni fragment
projektu. Zaznaczamy okre-
ślone fragmenty narzędziem
Zaznaczenie prostokątne
(ang. Marquee) [ M ] i wybiera-
my z menu Obrazek–>Kadruj
(ang. Image–>Crop) (linie
pomocnicze zostały popro-
wadzone w pliku site.psd ) .
W pociętych fragmentach
w naszych plikach PSD zosta-
ły już poprowadzone linie
pomocnicze. Trzeba przewi-
dzieć, które fragmenty graiki
będą powielane, by uzyskać
ciągłość graiki i odpowied-
nio przygotować sobie linie
pomocnicze tak, by wycinały
potrzebne fragmenty graik
do powielenia. Gdy są
ułożone linie pomocnicze
(można to zrobić zarówno
w Photoshopie jak
i w Image Ready) prze-
chodzimy do Image Ready
([ Ctrl ]+[ Shift ]+[ M ]). Od razu
w programie otworzy się
obrazek, który był aktywny
w Photoshopie. Aby pociąć
fragment na kawałki według
przygotowanych wcześniej
linii pomocniczych, wybiera-
my z menu Odcięcia–>Utwórz
odcięcia z linii pomocniczych
(ang. Slices–>Create Slice from
guides) . Na naszym obrazku
pojawią się numery kolejnych
prawie już pociętych kawał-
ków.
Krok 19 Format zapisu odcięć (ang. slice )
Krok 20 Opcje zapisu plików
Pozostaje zdeiniowanie,
który kawałek będzie zapisa-
ny w formacie JPEG, a który
w GIF. Wybieramy z belki
narzędziowej Zaznaczanie
odcięcia (ang. Slice Select Tool)
[ K ] i wybieramy interesujące
nas kawałki.
W palecie Optymalizuj
(ang. Optimize) wybieramy
format pliku oraz parametry
dla danego formatu. Jeżeli
jest mała liczba kolorów,
powierzchnie są w miarę
jednolite kolorystycznie albo
kawałki są niewielkie, to nie
warto używać formatu JPEG,
ze względu na to, iż traci się
jakość obrazu i zwiększa się
objętość plików.
Gdy wszystkie kawałki są już
poukładane i poustawiane,
wybieramy z menu Plik–>
Zapisz Zoptymalizowany jako
(ang. File–>Save Optimized
As) lub [ Ctrl ]+[ Alt ]+[ Shift ]+[ S ].
W nowym oknie wybieramy
miejsce, gdzie mają być zapi-
sane pliki. Wybieramy jeszcze
Ustawienia–>Inne (ang.
Settings–>Other) i w nowym
oknie kończymy ustawianie
zapisu.
W opcji Zapisywanie plików
(ang. Saving Files) można
zdeiniować dokładnie nazwy
plików, ich numerację oraz
lokalizację. Zatwierdzamy OK
i zapisujemy pliki. Po wejściu
do wskazanego wcześniej
katalogu, zobaczymy pliki
HTML oraz w katalogu Images
pocięty fragment na pliki,
które były wcześniej zdeinio-
wane w Image Ready.
72
www.dsx.pl Design Extra! Nr 5
8887146.055.png 8887146.056.png 8887146.057.png 8887146.058.png 8887146.059.png 8887146.060.png 8887146.062.png 8887146.063.png 8887146.064.png 8887146.065.png 8887146.066.png 8887146.067.png 8887146.068.png 8887146.069.png 8887146.070.png
S pis t reści
spis treści
Poznajemy Photoshopa
Webdesign
TAPETA PSEUDO 3D
DARIUSZ PASTURCZAK
Autor zaprezentuje nam, jak osiągnąć kilka cieka-
wych efektów, a także co powinniśmy zrobić, aby
nasza grai ka, którą możemy wykorzystać jako
tapetę, zyskała odrobinę głębi bez konieczności
używania programów do grai ki 3D.
CG’KI CZYLI MANGOWE
„KOLOROWANKI”
DARIUSZ PASTURCZAK
CG to skrót od terminu Computer Graphic, jednak
przez ostatnie kilka lat skrót ten zmienił swe zna-
czenie. Co prawda, obrazy tworzone na kompu-
terach nadal są nazywane CG, jednak obecnie ten
termin przyległ w szczególności do ilustracji two-
rzonych w Photoshopie. Co ciekawe, zdecydowa-
na większość tego typu ilustracji jest utrzymana
w stylu japońskim, znanym jako Manga.
18
36
06
ADOBE PHOTOSHOP – INTERFEJS
Opis interfejsu programu Adobe Photoshop, czyli
niezbędne wprowadzenie dla rozpoczynających
przygodę z programem, a dla wytrawnych gra-
i ków słowo przypomnienia.
56
KILKA SPOSOBÓW NA ZDJĘCIE
W WITRYNIE INTERNETOWEJ
AGNIESZKA PRZEWOZNA
Każdy, kto choć raz spróbował stworzyć stronę
internetową, poradzi sobie z umieszczeniem na
niej zdjęcia. Nie każdy jednak wie jak sprawić, aby
wyglądało ono ciekawej, inaczej niż standardo-
wy prostokąt. W naszym ćwiczeniu przedstawimy
kilka prostych zabiegów na uatrakcyjnienie zdjęć
prezentowanych w internecie.
08
O PALETACH SŁÓW KILKA
TOMASZ ŻELAK
Palety, to podstawowy i niezbędny element inter-
fejsu programu Adobe Photoshop. Autor w przy-
stępny i zrozumiały sposób przybliża nam pale-
ty, charakteryzuje je i wyjaśnia sposób ich użycia
w praktyce.
22
FALE ENERGII
DARIUSZ PASTURCZAK
Adobe Photoshop 7.0 oddaje w nasze ręce nowy
i bardzo przydatny i ltr o nazwie Liquify. Pozwala
on na specyi czne modyi kacje dowolnie wybra-
nych elementów.
Warsztat
60
INTERFEJS MULTIMEDIALNY
ADAM BUCZEK
Aby zaistnieć w internecie strona www musi się
czymś wyróżniać w natłoku schematycznych
i jakże podobnych, w wielu przypadkach, do sie-
bie stron internetowych. Atrakcyjna i niebanalna
oprawa grai czna może być pierwszym krokiem do
osiągnięcia sukcesu.
40
PROSTA GRA STWORZONA W IMAGE
READY
PIOTR HORODYNSKI
Do programu Adobe Photoshop dołączony jest
program Image Ready. Służy on do projektowa-
nia stron www, animowanych gifów, oraz do opty-
malizacji grai k na potrzeby internetu. W ćwiczeniu
stworzymy prostą grę zręcznościową, którą można
opublikować w internecie.
Laboratorium cyfrowe
26
EFEKT PRZYPALONEGO PAPIERU
MAGDALENA CYRCZAK
Dziś nie musimy ryzykować utratę bezcennego dla
nas listu eksperymentując z ogniem, aby przypalić
jego brzegi nadając mu niepowtarzalny styl. Przy
pomocy programu Adobe Photoshop możemy
zrobić to szybko i bezboleśnie.
12
WIĘCEJ ŻYCIA PANOWIE, CZYLI
REGULACJA BARWY I NASYCENIA
KRZYSZTOF KUCZYK
Program Adobe Photoshop to wymarzone narzę-
dzie do cyfrowej obróbki fotograi i. Z pomocą
autora dowiemy się co zrobić, aby nasze zdjęcia
wyglądały lepiej oraz jak efektywnie używać narzę-
dzia Barwa/Nasycenie (ang. Hue/Saturation).
66
PROJEKTOWANIE STRON
INTERNETOWYCH W PAKIECIE ADOBE
PHOTOSHOP
LUKASZ PABIAN
W artykule autor opowie nam o podstawowych
zasadach, których każdy grai k i projektant www
powinien być wierny oraz pokaże w jaki sposób
stworzyć w programie Adobe Photoshop nowo-
czesny projekt strony internetowej.
JAK UZYSKAĆ DESZCZ
W PHOTOSHOPIE?
DARIUSZ PASTURCZAK
Na to pytanie odpowiedzi udzieli nam sam autor.
Nauczymy się także jak w prosty sposób opanować
sztukę wywoływania efektu deszczu na naszych
zdjęciach czy obrazach.
30
48
FOTOMONTAŻ – TWORZENIE OKŁADKI
ALEKSANDRA KOT i PIOTR HORODYNSKI
Opierając się na montażu dwóch zdjęć i zastosowa-
niu kilku efektów postaramy się wspólnie z autora-
mi przygotować projekt okładki. Podstawową ideą,
której będziemy się trzymać jest założenie, by gra-
i ka rzucała się w oczy, miała zdecydowane, mocne
kolory, które przykują uwagę widza.
Efekty
14
ZASTOSOWANIE FILTRA PRZEMIEŚĆ
(DISPLACE)
PIOTR HORODYNSKI
Artykuł pozwoli nam zaznajomić się z działa-
niem rzadko stosowanego i ltra – Przemieść (ang.
Displace). Filtr ten dokonuje przekształceń na pod-
stawie stworzonej uprzednio mapy przekształceń.
Podobnie działają bumpmapy, czy mapy liminacji
w programach 3D.
Technika
32
TWORZENIE EFEKTÓW MALARSKICH
W PHOTOSHOPIE
ALEKSANDRA KOT i PIOTR HORODYNSKI
Autorzy opowiedzą w jaki sposób nadać fotogra-
i i styl charakterystyczny dla malarstwa sztalugo-
wego. Photoshop w swoich najnowszych odsło-
nach posiada bogatą kolekcję pędzli pozwalają-
cych uzyskiwać ciekawe efekty malarskie.
21
RECENZJE KSIĄŻEK
PIOTR HORODYNSKI
29
KONKURS
Weź udział w konkursie „Pocztówka z wakacji„
i wygraj tablet grai czny!
2
www.dsx.pl Design Extra! Nr 5
Design Extra! Nr 5
www.dsx.pl
3
8887146.071.png 8887146.073.png 8887146.074.png 8887146.075.png 8887146.076.png
Zgłoś jeśli naruszono regulamin