piątek, 25 stycznia 2013

Siatka gradientu, czyli jak tworzyć obiekty z miękkimi przejściami kolorów w Illustratorze.

Untitled Document

W dzisiejszym tutorialu przedstawię Wam kolejny dowód na to,
że Illustrator jest wspaniałym narzędziem do projektowania
do internetu. Przekonacie się też, że nie ustępuje w żadnym wypadku Photoshopowi.
Illustrator pozwala nam na tworzenie wspaniałych efektów i mięk-kich przejść między kolorami. Nie musimy do tego używać pędzli w Ps i mamy nad tym większą kontrolę! Nie będę tutaj pokazywać jak rysować bardzo skomplikowane obiekty (jak np. twarze) stosując siatkę gradientu. Pokażę jak tworzyć elementy stron www, aby miały w sobie "życie". Widzieliście kiedyś bardzo realistyczne owoce, lub warzywa? Może używaliście ich do swoich projektów? Oto co można robić z siatką w Illustratorze.
Na czym polega siatka gradientu?

Obiekt powyżej jest oczywiście bardzo skomplikowany (choć są
i bardziej skomplikowane). Nie będę tutaj uczyć takich rzeczy, chciałam pokazać podstawy i co najwyżej możliwości (nieograni-czone). Siatka gradientu ogólnie polega na tym, że mając prosty obiekt i nakładając na niego ową siatkę (odpowiednio ją formując)
możemy nadawać temu obiektowi ciekawy, trójwymiarowy wygląd.
Siatkę edytuje się w łatwy sposób, podobny do krzywych Beziera. Zacznę Wam to pokazywać od prostych obiektów - np. potrzebu-jemy "głębokiego" tła dla naszej strony.

Gdzie może się to przydać i o czym należy pamiętać?

Tła, cienie, blaski, głębia..

Jeśli projektujecie stronę www i chcecie dodać jej nieco głębi - wystar czy użyć siatki gradientu. Używając różnych odcieni koloru można tworzyć efekty głębi bardzo łatwo (jak powyżej).
Siatka jest też przydatna wtedy, kiedy chcemy uwypuklić jakiś element - np. przycisk w wersji hover (po najechaniu na niego myszką) ma być jaśniejszy w którymś miejscu.

Tworzenie bardziej skomplikowanych przedmiotów

Siatka gradientu sprawdza się wspaniale jeśli chcesz narysować bardziej realistyczne obiekty. Trzeba na to poświęcić nieco czasu, ale efekty są naprawdę zadowalające. Ludzie robią wspaniałe rzeczy używając siatki.
W internecie można znaleźć wiele przykładów pięknych stron www, które są idealnymi przykładami użycia gradientów w odpo-
wiedni sposób - z umiarem i wyczuciem;)
Pamiętaj o czystości

Czystości kolorów oczywiście! Dobrze użyty gradient wygląda naturalnie. Kolory mają pięknie się mieszać i płynnie w siebie przechodzić (chyba, że zamysł jest inny).
Pamiętajcie, aby używać kolorów z podobnej tonacji lub z tonacji pasujących do siebie. Inaczej możecie uzyskać efekt brudnego koloru i zniesmaczenie oglądających;)
Umiar przede wszystkim

Jak wszędzie i ze wszystkim - umiar przede wszystkim! Gradient może być pieknym dopełnieniem obiektu czy całej strony,
ale jeśli będziemy go używać za często - osiągniemy raczej inny efekt od zamierzonego. Nikomu się już raczej nie podobają strony z lat 90' (wątpię, żeby wtedy komukolwiek się podobały).

Jeśli chcemy projektować nowocześnie i dobrze - musimy znać umiar i znaleźć parę najważniejszych elementów, które będą przyciągały uwagę, resztę pozostawiając stonowaną.






2 komentarze:

  1. Hej, fajne miałaś poradniki. Czekam niecierpliwie na kolejny. Interesuje mnie grafika od kiedy trafił mi się projekt na uczelni na tworzenie stron mobilnych. Mam nadzieję, że zrobię jakąś fajną stronkę z fajną grafiką i nauczę się przy tym mnóstwa nowych rzeczy.

    OdpowiedzUsuń
  2. Genialny poradnik, nie wiedziałam o tej opcji. :)

    OdpowiedzUsuń