Jak zaprojektować stronę w Illustratorze? Część 4

  • 08.01.2013
  • Warsztat
  • Aleksandra Rogala-Jacek

Jak zaprojektować stronę w Illustratorze? 001

Ostatnio skończyliśmy na etapie ułożenia poszczególnych elementów na stronie. Dziś dokończymy nasze dzieło i nadamy jej ostateczny styl, kolor i charakter. Pokażę przy okazji, że jest absolutnie możliwe (a nawet łatwe) osiągnięcie wielu efektów rastrowych w Illustratorze. Wystarczy trochę kreatywnego i nieszablonowego myślenia.

Kolory

Oto moment, od którego zaczynamy w tym tutorialu. Wszystko jest na swoim miejscu, ale brakuje tu jakichkolwiek kolorów czy tekstur. Nie ma też cieni, blasków, ani niczego, co nadaje stronie ostateczny charakter. Tło tej strony to tekstura papieru, którą ściągnęłam kiedyś z istocka.

Falbanki też mają na siebie nałożoną tę teksturę, więc od tego zaczniemy. Potem nałożymy gradient na główną ramkę, stopkę i zajmiemy się menu. Na koniec dopieścimy teksty i dodamy trochę cieni dla bardziej wiarygodnego efektu.

Jak zaprojektować stronę w Illustratorze? 002

Tło i falbanki

Prostokąt, który teraz służy mi za tło ma wymiary dokładnie takie, jak musi mieć tło z mojej tekstury papieru. Posłuży mi więc za maskę przycinającą. W Illustratorze, odwrotnie niż w Photoshopie, maska przycinająca musi znajdować się NAD obiektem do przycięcia. Kiedy wstawię moją teksturę (Plik » Umieść), ustawię ją więc pod prostokątem-tłem, potem zaznaczę oba obiekty i kliknę prawym przyciskiem myszy. Następnie wybiorę "Utwórz maskę przycinającą". To samo zrobię z falbankami. Oto jak to wygląda:

Jak zaprojektować stronę w Illustratorze? 003

Po tym, jak wstawiłam teksturę w odpowiednie miejsca, widać, że potrzebne jest też rozróżnienie ich pomiędzy sobą. Tekstura w tle musi mieć nieco mniejszą saturację i być nieco ciemniejsza niż ta na falbankach. Na poniższym rysunku przedstawiam jak to robię.

Jak zaprojektować stronę w Illustratorze? 004

Jak zaprojektować stronę w Illustratorze? 005

Główna ramka i stopka

Nadamy teraz kolory poszczególnym elementom. Pamiętajmy, że możemy nadawać wiele wypełnień i obrysów różnym obiektom. Nasza główna ramka składa się z paru kolorów i specjalnie nadanego cienia. Zaczniemy od niej.

Jak zaprojektować stronę w Illustratorze? 006

Ramka ma już kolor, teraz dodam dwa ważne cienie. Jeden to koło w konkretnym kolorze, z przezroczystością Pomnóż. Drugi to cień oddzielający główną ramkę od stopki.

Jak zaprojektować stronę w Illustratorze? 007

Jak zaprojektować stronę w Illustratorze? 008

Na etapie na którym jesteśmy wygląda to tak, mamy już kolory tła, falbanek, głównej ramki i stopki. Pokolorowałam też teksty na biało i na brązowo. Pozostaje nam nadanie koloru buttonom, menu i wstawienie zdjęć.

Jak zaprojektować stronę w Illustratorze? 009

Menu

Jak zaprojektować stronę w Illustratorze? 010

Buttony

Jak zaprojektować stronę w Illustratorze? 011

Buttony: hover

Hover jest taki sam jak normalna wersja buttona, dodałam jedynie nieco blasku, aby było czuć, że się na niego najechało. Ten blask to kolejne wypełnienie gradientem biało-białym.

Jak zaprojektować stronę w Illustratorze? 012

Przesuwaki

Jak zaprojektować stronę w Illustratorze? 013

Nasze kółeczka pokazujące, które zdjęcie jest wyświetlane w sliderze to po prostu 3 kółeczka o średnicy 8px, z obrysem o grubości 1 px. Posługuję się dwoma kolorami: wypełnienie - #A48A7B i obrys - #634E42. To znaznaczone ma po prostu odwrotne kolory niż pozostałe.

Jak zaprojektować stronę w Illustratorze? 014

Wstawianie zdjęć

W poprzednim tutorialu, na etapie rozmieszczania poszczególnych elementów zaznaczyłam miejsca, w których będą zdjęcia. Teraz wystarczy zaimportować je do pliku (Plik » Umieść), wstawić POD prostokąt służący za maskę przycinania i przyciąć.

Jak zaprojektować stronę w Illustratorze? 015

Ciąg dalszy nastąpi...

Strona wciąż jest jeszcze nieco surowa, ale w tym miejscu kończę ten tutorial. Postanowiłam tak zrobić, żeby Was nie przeciążyć, od tej chwili zaczynam dodawać cienie, blaski, efekty rastrowe, które nazywane są przez wielu projektantów "smaczkami". Są bardzo ważne, dlatego na wytłumaczenie ich poświęcę osobny artykuł.

Aleksandra Rogala-Jacek

Ukończyła wydział Grafiki Użytkowej na Krakowskiej Akademii. Specjalizuje się w identyfikacji wizualnej, stronach www i projektowaniu do druku. Zajmowała się składem i koordynacją ogólnopolskiego wydawnictwa POKA POKA. Tworzyła dla takich klientów jak: Atlantic, Świat Książki, Centrum Witek, Mount Blanc i wielu innych.

Pracuje jako freelancer i prowadzi bloga - Illu Pie - poświęconego projektowaniu graficznemu przy użyciu Illustratora.

Strony internetowe: www.arogalajacek.com, illupie.blogspot.com.

Aleksandra Rogala-Jacek

Aleksandra Rogala-Jacek

Ukończyła wydział Grafiki Użytkowej na Krakowskiej Akademii.

Specjalizuje się w identyfikacji wizualnej, stronach www i projektowaniu do druku. Zajmowała się składem i koordynacją ogólnopolskiego wydawnictwa POKA POKA. Tworzyła dla dużych klientów jak: Atlantic, Świat Książki, Centrum Witek, Mount Blanc i wielu innych.

Pracuje jako freelancer i prowadzi bloga - Illu Pie - poświęconego projektowaniu graficznemu przy użyciu Illustratora.

Strony internetowe:
www.arogalajacek.com
illupie.blogspot.com

Współpraca

Piszesz? Fotografujesz? Malujesz? Rysujesz?
Może projektujesz to i owo?

Daj się zauważyć!

Wystawa, wykład? Happening, konkurs?
Targi branżowe lub konferencja?

Dzieje się i nikt o tym nie wie?
Napisz do nas.