Wskazówki dotyczące pracy z programem Illustrator. Oto szalony pomysł — zaprojektuj swój kolejny projekt internetowy w programie Illustrator. Jeśli jesteś głównym projektantem stron internetowych, prawdopodobnie nie zareagujesz zbyt dobrze na tę sugestię. Illustrator po prostu nie może zrobić wszystkiego, co potrafi Photoshop, prawda?
Nie na pewno w ten sposób.
Chociaż Photoshop stał się de facto narzędziem projektowania stron internetowych, Illustrator jest więcej niż w stanie spełnić Twoje potrzeby. Dzięki narzędziom do projektowania jest często lepszym i bardziej odpowiednim programem do projektowania stron internetowych.
Ponieważ większość profesjonalistów zajmujących się projektowaniem stron internetowych nie chce włóczyć się po programie Illustrator w poszukiwaniu dowodów, przygotowałem listę funkcji związanych z siecią, które musisz znać, aby rozpocząć eksperymentowanie z projektowaniem stron internetowych w programie Illustrator.
Wypróbuj kilka z nich, a gwarantuję, że zaczniesz używać programu Illustrator jako standardowego narzędzia w procesie projektowania stron internetowych.
1. Po pierwsze: ustaw wszystkie jednostki na piksele. Wskazówki dotyczące pracy z programem Illustrator
Domyślnie program Illustrator używa metryki jednostki wielkości obiektów i punktów dla tekstu. Są to świetne ustawienia w większości sytuacji projektowych, ale np projektowanie stron prawdopodobnie będziesz chciał widzieć piksele wszędzie. Zanim więc zaczniesz pracować nad czymkolwiek innym, upewnij się, że Twoje jednostki są prawidłowo skonfigurowane.
Aby ustawić jednostki na piksele:
- Otwórz w menu Edycja
- Wybierz jednostki miary z podmenu ustawień.
- Ustaw wszystkie opcje na „piksele”
2. Twórz dokumenty, korzystając z profilu dokumentu internetowego.
Jeśli chcesz rozpocząć pracę nad nowym projektem, łatwo przewiń okno Nowy dokument i pomiń niektóre ważne szczegóły, na przykład poinformowanie programu Illustrator, że planujesz pracować nad projektem internetowym, bez użycia kolorów CMYK. i rozmyte krawędzie obiektu. Pamiętaj tylko, aby wybrać ustawienie profilu internetowego w oknie Nowy dokument i wszystko będzie dobrze.
3. Włącz wyrównanie siatki pikseli dla obiektów. Wskazówki dotyczące pracy z programem Illustrator
Ta funkcja ratuje życie, jeśli kiedykolwiek miałeś problemy z rozmytymi krawędziami kształtów w Photoshopie.
Funkcja Pixel Grid Alignment dopasuje proste, poziome i pionowe segmenty obiektu, tak aby idealnie pasowały do siatki pikseli, zachowując jednocześnie gładkość zakrzywionych i pochyłych segmentów. Rezultatem są wyraźne kształty o doskonałej jakości pikseli — coś, czego zdecydowanie potrzebujesz przy projektowaniu stron internetowych.
Górny przycisk ma włączone wyrównanie siatki pikseli, co zawsze skutkuje wyraźnymi krawędziami.
Aby włączyć wyrównanie siatki pikseli na poziomie obiektu:
- Wybierz obiekt
- Otwórz panel Przekształć (Okno > Przekształć).
- Zaznacz pole wyboru „Wyrównaj do siatki pikseli” na dole panelu (jeśli go nie widzisz, kliknij dwukrotnie panel, aby wyświetlić opcje)
Notatka. Wyrównanie siatki pikseli jest domyślnie włączone dla wszystkich nowych obiektów utworzonych przy użyciu profilu dokumentu internetowego. Jeśli jednak wklejasz obiekty z innych plików programu Illustrator, konieczne będzie ręczne dostosowanie dla nich wyrównania pikseli. Wskazówki dotyczące pracy z programem Illustrator
4. Włącz podgląd pikseli.
Dzięki funkcji podglądu pikseli program Illustrator podczas skalowania obrazu powyżej 100% będzie zachowywał się podobnie jak program Photoshop — zamiast za każdym razem uzyskiwać doskonałe wektory, w rzeczywistości będziesz widzieć piksele tak, jakbyś pracował z obrazem rastrowym.
Włączenie podglądu pikseli sprawi, że poczujesz się jak w Photoshopie.
Pomyśl, jakie to fajne – masz całą moc grafiki wektorowej na wyciągnięcie ręki, a jak wygląda efekt, możesz zobaczyć na poziomie pikseli.
Niezłe, prawda?
Włącz lub wyłącz podgląd pikseli
- Otwórz menu widoku
- Wybierz Widok pikseli.
5. Użyj okien z grafiką. Wskazówki dotyczące pracy z programem Illustrator
Wyobraź sobie, że na Twój projekt skierowane są dwie kamery wideo.
Jedna kamera ma normalny poziom powiększenia, pokazując 100% Twojej pracy. Druga kamera ma poziom powiększenia 400% i jest nakierowana na jedną konkretną ikonę, nad którą pracowałeś.
Podobnie jak chirurg, używasz aparatu z zoomem do wprowadzania drobnych zmian w ikonie na poziomie pikseli, od czasu do czasu zerkając na aparat z zoomem 100%, aby zobaczyć, jak faktycznie wygląda w rzeczywistym rozmiarze.
Okna osłonowe świetnie się sprawdzają, gdy trzeba pracować z małymi elementami, takimi jak ikony — nie trzeba ciągle przybliżać i oddalać, aby sprawdzić, jak wszystko wygląda.
Są to okna grafiki — umożliwiają jednoczesne przeglądanie projektu przy różnych poziomach powiększenia, ustawieniach kolorów i innych odmianach. Jest to bardzo przydatne przy projektowaniu stron internetowych, zwłaszcza gdy pracujesz ze szczegółami na poziomie pikseli.
Aby skorzystać z okien Artwork:
- Otwórz menu Okno, a następnie wybierz opcję Nowe okno. Illustrator utworzy nową kartę z tym samym dokumentem w widoku.
- Przejdź ponownie do menu Okno, wybierz Uporządkuj > Przenieś wszystko do okna. To pozwoli Ci się zmienić wielkość i rozmieszczenie okien obok siebie, według własnego uznania.
- Eksperymentuj z różnymi poziomami powiększenia w oknach i zacznij wprowadzać pewne zmiany, aby zobaczyć, jak to działa. Wskazówki dotyczące pracy z programem Illustrator
6. Używaj symboli, aby szybko tworzyć przyciski, ikony i nie tylko.
Ile razy tworzyłeś ten sam (lub prawie taki sam) przycisk, ikonę lub widżet w Photoshopie? Jeśli zajmujesz się projektowaniem stron internetowych, prawdopodobnie robisz to codziennie.
Program Illustrator może pomóc Ci zaoszczędzić czas i uniknąć powtarzalnej pracy z symbolami.
W istocie symbole są nieskończonym zestawem gotowych elementów elementy wystroju, które można dodać do pracy po prostu przeciągając i upuszczając, a następnie modyfikować w razie potrzeby. Jest to idealne rozwiązanie w przypadku przycisków, ikon i innych standardowych obiektów, których nie trzeba tworzyć od podstaw.
Ale jest jeszcze jeden powód, dla którego symbole mają potężną moc i nazywa się to tworzeniem instancji.
Symbole są nie tylko wygodne, ale także ułatwiają aktualizację powtarzających się elementów projektu.
Zasadniczo, ilekroć dokonasz zmian w oryginalnym symbolu, zmiany te zostaną natychmiast odzwierciedlone we wszystkich wystąpieniach symbolu znalezionego w Twojej grafice. Potrzebujesz większych przycisków na swojej stronie? Wystarczy zmienić symbol. Czy chcesz, aby pola Twojego formularza wyglądały inaczej na każdej stronie? Wystarczy zmienić symbol. Masz pomysł.
Porada: Jeśli nie chcesz, aby stało się to z konkretną instancją symbolu as, kliknij prawym przyciskiem myszy obiekt na ilustracji i wybierz opcję Przerwij odniesienie do symbolu. Wykluczy to go z automatycznych aktualizacji.
Oto dobry film wyjaśniający, jak używać symboli i manipulować nimi:
Używanie symboli w programie Adobe Illustrator z Telewizja Adobe .
Aby użyć istniejącego symbolu:
- Otwórz panel Symbole z menu Okno.
- Przeciągnij wybrany symbol na swoją pracę
Utwórz nowy symbol:
- Utwórz obraz symbolu
- Otwórz panel Symbole z menu Okno.
- Przeciągnij ilustrację na panel
- Kliknij OK w oknie dialogowym, aby potwierdzić.
Aby edytować symbol:
- Otwórz panel Symbole z menu Okno.
- Kliknij dwukrotnie symbol, aby przejść do trybu edycji.
- Po zakończeniu kliknij dwukrotnie gdziekolwiek poza obrazem symbolu, aby wyjść z trybu edycji.
7. Z łatwością rozszerzaj obiekty dzięki 9-segmentowemu skalowaniu. Wskazówki dotyczące pracy z programem Illustrator
Jest to zaawansowana funkcja symboliki, która pozwala zdefiniować, które części obiektu są rozciągane podczas skalowania, a które pozostają niezmienione.
Po lewej: Przykład rozciągniętego przycisku z ustawieniem powiększenia 9-segmentowego i bez niego. Po prawej: ustawienie skalowania 9-segmentowego obejmuje przesuwanie 4 linii pomocniczych, które informują program Illustrator, które części obiektu są chronione, a które można skalować.
Praktycznym przykładem jest przycisk z zaokrąglonymi rogami - jeśli chcesz go wydłużyć, nie możesz go po prostu rozciągnąć w poziomie, bo to zniekształci cały obiekt. Zamiast tego będziesz musiał ręcznie przesuwać punkty kształtu. Dzięki skalowaniu 9-segmentowemu rozciąganie działa zgodnie z zamierzeniami. Wskazówki dotyczące pracy z programem Illustrator
Aby naprawdę zrozumieć, jak to działa, posłuchaj tego wspaniałego samouczka wideo z Adobe TV i szybko naucz się:
Stosowanie skalowania 9-segmentowego z symbolami z Telewizja Adobe .
8. Wszędzie zaokrąglone rogi!
W programie Photoshop można utworzyć zaokrąglony prostokąt, ale program Illustrator umożliwia zastosowanie nieniszczącego efektu zaokrąglonych narożników do prawie każdego obiektu. Co to jest efekt nieniszczący? Oznacza to, że możesz go włączać, wyłączać lub zmieniać jego ustawienia bez wpływu na oryginalny obiekt.
Możesz zastosować efekt zaokrąglonych rogów do niemal każdego typu obiektu i dostosować go w razie potrzeby. Wskazówki dotyczące pracy z programem Illustrator
Aby zastosować efekt zaokrąglonych narożników:
- Utwórz prostokąt lub inny obiekt z ostrymi narożnikami
- Z menu Efekty wybierz Stylizuj > Zaokrąglone rogi.
- Wprowadź promień narożnika i kliknij Podgląd, aby zobaczyć, jak to wygląda.
- Kliknij OK, aby zastosować efekt.
Aby zmienić efekt zaokrąglonych narożników:
- Wybierz obiekt z zaokrąglonymi narożnikami
- Otwórz panel Wygląd z menu Okno.
- Znajdź efekt Zaokrąglone rogi i kliknij go dwukrotnie, aby zmienić jego ustawienia, lub kliknij ikonę oka, aby go włączyć lub wyłączyć.
9. Tworzenie szybkiego wypełnienia wzorem rastrowym. Wskazówki dotyczące pracy z programem Illustrator
Subtelne wzory tła są wielkim hitem w projektowaniu stron internetowych, ale wielu projektantów uważa, że nie jest łatwo je zastosować w programie Illustrator.
Muszę przyznać, że nie jest to intuicyjne, ale rozwiązanie jest proste.
Aby utworzyć wzór mapy bitowej:
- Umieść zdjęcie wzoru na swoim kawałku
- Kliknij „Wstaw” na górnej wstążce (ważne – bez tego nie będzie działać!)
- Przeciągnij wzór na paletę Próbki
- Zastosuj próbkę do dowolnego obiektu, aby wypełnić go wzorem
10. Automatyczne umieszczanie tekstu wokół obrazów i obiektów.
Photoshop jest znany z bardzo podstawowych możliwości edycji tekstu. Jeśli chcesz otoczyć obraz tekstem, musisz utworzyć dwie lub trzy różne ramki tekstowe i zasymulować efekt. Wskazówki dotyczące pracy z programem Illustrator
Na szczęście Illustrator Ci to umożliwi.
Aby owinąć tekst wokół obrazu:
- Wybierz obraz lub obiekt, wokół którego chcesz zawinąć tekst
- Otwórz menu Obiekt i wybierz polecenie Zawijaj tekst > Nowy.
- Aby ustawić odległość zawijania, otwórz ponownie menu Oblewanie tekstem i wybierz Opcje zawijania tekstu.
- Przesuń obraz nad tekstem, aby zobaczyć efekt zawijania
11. Twórz bogate efekty wizualne dzięki ustawieniom wyglądu obiektu. Wskazówki dotyczące pracy z programem Illustrator
W programie Illustrator panel Wygląd obiektu działa podobnie jak efekty warstw w programie Photoshop — możesz dodać do obiektu wiele wypełnień i obrysów, a następnie bawić się ich trybami przenoszenia, kryciem i efektami, aby uzyskać ciekawe rezultaty.
Ten tekst to pojedynczy obiekt wektorowy, którego styl można stylizować za pomocą panelu Wygląd i efekty.
Plac zabaw jest dość duży - od cieni, rozmyć i blasku po teksturowanie, zniekształcenia i 3D. W ten sposób możesz odtworzyć większość efektów z Photoshopa, jednocześnie pracując z grafiką wektorową.
Panel Wygląd jest potężny i zabawny — zachęcam do wypróbowania go od razu lub obejrzenia poniższego samouczka, aby zrozumieć, jak to działa:
Opanowanie panelu wyglądu z Telewizja Adobe .
Czy jesteś gotowy, aby rozpocząć eksperymenty z programem Illustrator?
Tworzenie stron internetowych i interfejsów użytkownika przy użyciu Photoshopa stało się obecnie normą i większość projektantów jest zadowolona z tego rozwiązania. Wskazówki dotyczące pracy z programem Illustrator
Ale to, że Photoshop stał się tak powszechny, nie oznacza, że Illustrator nie ma nic do zaoferowania — wręcz przeciwnie. Dzięki narzędziom takim jak wyrównywanie siatki pikseli, zawijanie tekstu i wygląd obiektu stanowi to mocny argument.
W połączeniu z mocą narzędzia układu i grafiki wektorowej, wycinania i eksportowania obrazów, Illustrator jest zdecydowanie oczywistym wyborem dla projektantów stron internetowych, którzy chcą szybko tworzyć strony internetowe.
Zostaw komentarz