Jak zaprojektować stronę www wyłącznie w Illustratorze? Część 6: Cięcie grafiki

W poprzednich tutorialach pokazywałam jak projektować strony. Ta wiedza z pewnością jest przydatna, ale jeśli nie umiemy pociąć

stron i przygotować ich do kodowania trochę mija się to wszystko z celem:) Dlatego dziś pokażę jak łatwo robi się to w Illustratorze.

Podstawy

Kiedy zaczynałam ten kurs, pisałam o tym, jak ważne jest stwo-rzenie paru warstw w naszym pliku. Pisaam, że mogą to być: Tło, Grafika i Teksty. Teraz dowiecie się dlaczego to AŻ TAK ważne.
W Illustratorze tnie się strony nieco inaczej niż w Photoshopie. Mamy więcej możliwości.Przede wszystkim - raczej nikt nie używa plasterków. Dlaczego? Ponieważ strony koduje się inaczej, niż

gdyby robiło się to używając plasterków. Żeby dobrze projek-tować strony i przygotować je do kodowania trzeba znać podsta-wy pracy kodera. Trzeba też pamiętać, żeby grafika była możliwie jak najmniejsza, aby szybko się wczytywała (mimo, że większość
z nas ma już super szybkie łącza).

Tła

W zależności od tego co jest na naszym tle wybieramy sposób pocięcia go. Jeśli jest to tło z gradientem pionowym - wystarczy nam wycinek o wielkości 1080x1px (wysokość tła - 1080px i szero-
kość potrzebna do powtórzenia wzoru - 1px). Jeśli jest to gradient poziomy - odwrotnie - 1920x1px. To jest proste. Naturalnie sprawa ma się inaczej kiedy nasze tło to bardziej skomplikowany

wzorek. Należy wtedy stworzyć jak najmniejszy wycinek, ale taki, który ładnie powtórzy nam wzór. Ja często też wycinam tło
o wielkości monitora (1920x1080px), nie dzieląc go wcale.
Jeśli zapiszemy je jako JPEG o 60% lub 40% jakości będzie wyglądać całkiem dobrze, a ważyć niewiele.

Aby sprawdzić, czy dobrze wycięliśmy najlepiej jest spróbować ułożyć dwa plasterki obok siebie, a potem cztery - po dwa na górze i na dole.

Różne elementy grafiki

Strona składa się z wielu małych elementów. Musimy ją przeana-
lizować i zobaczyć, co możemy pociąć na parę mniejszych kawał-ków, a co musimy zostawić w całości.Element, który przedstawiam poniżej, składa się z paru cześci. Możemy go podzielić zarówno

w pionie, jak i w poziomie. Zalezy to od tego, jak koder będzie wstawiał do tego treść. W takich przypadkach, najlepiej
go po prostu zapytać:)

Teraz przeanalizujemy przesuwak do slideshowa. Składa się z paru elementów i każdy musimy pociąć osobno. Nie ma raczej sensu

dzielić je na jeszcze mniejsze części - to i tak będą bardzo małe pliki. Pamiętajmy, żeby zapisać je jako png bez tła.

Jak ciąć grafikę w Illustratorze?

Przy cięciu grafiki korzystamy z obszarów roboczych/artboardów.
Może ich być w jednym pliku 99, więc powinno wystarczyć. Kiedy
ja przystępuję do cięcia strony, wyłączam sobie warstwę "Teksty" aby nie wchodziły mi w drogę. Potem są dwie opcje: tworzenie obszarów roboczych na stronie, lub przesuwanie elementów
do pocięcia obok. Lubię korzystać z tego, że w Ai mam bardzo

dużo przestrzeni roboczej wokół obszaru roboczego. Czyli - mogę przesuwać różne elementy na boki, potem z nich korzystać, lub tam je modyfikować nie musząc blokować elementów na stronie, itp. To bardzo ułatwia pracę. Poniżej pokazuję jak wygląda prze-
ważnie moj plik w czasie pracy nad stroną. Od razu sprostuję -
to nie jest bałagan! :)

Illustrator, w odróżnieniu od Photoshopa nie zmusza nas do ogra-
niczania się. W czasie pracy nad projektem mamy wiele pomysłów, tworzymy wiele elementów, których potem nie używamy. Mimo to one są nieraz bardzo dobre, po prostu nie pasują do tego pro-
jektu, lub w danym momencie. Gdybyśmy chcieli wszystkie te ele-

wyłączyć im widoczność. A co z rzeczami które nas inspirują? Widzieliście jakiś ciekawy element na innej stronie? Wklejacie
go sobie obok obszaru roboczego w Ai i możecie tworzyć patrząc na niego. W Ps nie jest to takie łatwe - mamy obszar roboczy i....TYLE. Zadowala Was to? Mnie zdecydowanie nie! :)

Słyszeliście kiedyś o LightShot ? Świetna wtyczka do Chroma. Pozwala błyskawicznie wklejać ciekawe elementy grafiki prosto do Ai.
Jest również LightShot na pulpit. To jest dopiero jazda! Dowiedz się więcej »

No dobrze. Załóżmy, że chcemy wyciąć przycisk. Przeciągamy go sobie na bok, poza obszar roboczy (nie będzie miał tła; w Ps

musielibyśmy wyłączać widoczność reszty warstw), następnie tworzymy obszar roboczy odpowiedniej wielkości.

Aby utworzyć nowy obszar roboczy można nacisnąć Shift + O,
a potem przeciągnąć myszką tak, jak przy tworzeniu zwykłego prostokąta. W trybie edycji można też przesuwać i usuwać artboardy. Możemy je kopiować jak każdy inny element, przesu-wając i naciskając Alt. Można je kopiować lub przesuwać z zawar-tością, lub bez. Aby wyjść z edycji obszarów roboczych naciskamy V.

Są dwa sposoby tworzenia obszarów roboczych wokół jakiegoś obiektu. Możemy przeciągać go myszką, jak wyżej, albo zaznaczyć obiekt (jeśli to parę obiektów należy je najpierw zgrupować)
i kliknąć na niego w trybie edycji obszarów roboczych (Shift + O). Wtedy utworzy nam się obszar roboczy o odpowiedniej wielkości. Należy uważać, jeśli obiekt ma nadany cień i wciąć to pod uwagę - to dodatkowe piksele.

Kiedy już mamy obszar roboczy odpowiedniej wielkości używamy narzędzia "Zapisz dla internetu i urządzeń..." (Ctrl + Shift + Alt + S).
Pokaże nam się okno dialogowe, w któym możemy sobie ustawić jak chcemy dany plik zapisać.

Warto podczas projektowania sprawdzać jak grafika się zapisze: np. czy teksty są dostatecznie czytelne, lub kolor odpowiedni.
Mimo, że Illustrator umożliwia na podgląd pikselowy, nie zawsze wygląda to tak samo jak po zapisaniu i kompresji.

Przykład

Wróćmy do naszych przycisków. Jak wycinanie wygląda w praktyce?

Przesuwamy ten obiekt na bok, gdzieś poza obszar roboczy, na którym jest nasza strona.Ten obiekt ma cień, który musimy wziąć pod uwagę podczas wycinania. Najlepiej powiększyć sobie ten obiekt do momentu aż będziemy widzieli gdzie jest granica cienia.

Teraz widzimy go dokładnie, możemy dopasować wielkość obszaru roboczego.

Teraz zajmiemy się kółeczkami - one mają hovery. Najczęściej koderzy chcą, aby wyciąć im takie elementy w sposób jak poniżej - jeden pod drugim. Trzeba koniecznie dopilnować, żeby obszar roboczy miał wysokość o parzystej liczbie pikseli. Dlaczego? Musi dać się podzielić na dwa, aby można było przesunąć obraz do ho-vera, kiedy najedziemy myszką na przycisk.

Chcę mieć pewność, że zarówno normalna wersja, jak i hover będą idealnie równo ustawione wobec siebie. Czasem więc robię tak,
że tworzę obszar roboczy, ustawiam na nim normalną wersję, idealnie na środku, a potem kopiuję go poniżej, razem z zawar-tością i tam wstawiam hover. Następnie zmieniam wielkość obszaru roboczego tak, żeby obejmował oba obrazki.

Tworzę kwadrat o wielkości odpowiedniej, żeby objął mój przycisk. Następnie zaznaczam oba obiekty - prostokąt i przycisk i środkuję je w poziomie i pionie względem siebie.

Zaznaczam oba obiekty i przytrzymując Alt i Shift kopiuję je. Mam teraz dwa obiekty z polami ochronnymi. Tworzę obszar roboczy, który je pomieści. W tym przypadku najłatwiej będzie zgrupować wszystko, potem sprawdzić wielkość grupy i stworzyć obszar roboczy o tej wielkości. Potem wyśrodkować dla pewności grupę na artboardzie.

Teraz wkładam na odpowiednie miejsce wersję hover. Potem blo-kuję ją (Ctrl + 2) i kasuję spod niej wersję normalną. Odblokowuję (Ctrl + Alt + 2) i gotowe.

I to wszystko!

Cięcie stron w Illustratorze jest bardzo proste i efektywne. Mamy na to duzo miejsca (cały obszar wokół artboardu) i wszystko działa szybko. Polecam poćwiczyć nieco i zacząć działać! :)