Jak zbudować stronę internetową w programie Illustrator

Krok 1

Utwórz dokument programu Illustrator o szerokości 960 pikseli od wybranej wysokości, w zależności od treści i projektu, który masz na myśli. Strona o szerokości 960 pikseli pasuje do najpopularniejszej rozdzielczości monitora o szerokości 1024 pikseli, gdy brany jest pod uwagę pasek przewijania i obramowanie okna.

Krok 2

Stwórz odręczny szkic wizualnego projektu swojej strony internetowej, jeśli jeszcze tego nie zrobiłeś. Da ci to przydatne odniesienie do tworzenia w programie Illustrator.

Krok 3

Stwórz swój projekt za pomocą narzędzi graficznych i tekstowych dla skomplikowanego nagłówka. Jeśli umieścisz w nim tekst, taki jak wiadomości na blogu, pozostaw puste miejsce w tym obszarze lub utwórz krawędź otaczającą go dla prostego obrysu.

Krok 4

Dodaj przewodniki do projektu, aby wytyczyć różne sekcje projektu. Jest to bardzo ważne, ponieważ będziesz używać tych przewodników do wykonywania cięć, które definiują krawędzie elementów na twojej stronie. Prowadnice pomagają precyzyjnie wyrównywać obiekty. Kliknij pionową lub poziomą linijkę i przeciągnij myszą w miejsce, w którym chcesz umieścić przewodnik.

Krok 5

Dokładnie sprawdź położenie prowadnic pod kątem dokładności i dokładności. Przeciągnij je dalej, jeśli to konieczne, aby oddzielić każdy element, taki jak obrazy nawigacyjne, które będą linkami w Twojej witrynie.

Krok 1

Wybierz "Obiekt" z menu, a następnie wybierz "Wytnij" i "Utwórz z prowadnic". Podczas tworzenia prowadnic zobaczysz małe czarne pudełka wewnątrz każdego cięcia z odpowiadającym mu numerem. Wybierz "Plik" w menu, a następnie "Zapisz w Internecie i na urządzeniach". Wybierz narzędzie, aby wybrać cięcie, które jest drugą ikoną w menu narzędzia po prawej stronie ekranu pod ikoną ręki. Wybierz wszystkie cięcia.

Krok 2

Wybierz ustawienia optymalizacji spośród opcji wymienionych po prawej stronie ekranu. Możesz wybrać wstępnie ustawione konfiguracje lub utworzyć niestandardowy profil, w zależności od tego, czy chcesz, aby obrazy były plikami JPEG, GIF, czy PNG. Możesz także dostosować jakość zdjęć.

Krok 3

Wyświetl podgląd różnych konfiguracji, klikając karty "2 na kartach" i "4 na kartach". W dolnym rogu każdego podglądu zobaczysz informacje o optymalizacji, takie jak rozmiar pliku i czas renderowania przeglądarki. Kliknij przycisk "Zapisz". Zdecyduj, czy chcesz zapisać swoje obrazy i kod oraz przejść do tego obszaru, używając klawisza "Gdzie".

Krok 4

Wybierz format swojej pracy. Jeśli kontrolujesz XXXX i chcesz tylko obrazów, ponieważ później dodasz kod, wybierz "Tylko obrazy". Jeśli jesteś początkującym lub wolisz wygenerować XXXX, wybierz opcję "XXXX and images". Jeśli wolisz, aby uporządkowanie elementów zostało zorganizowane za pomocą Kaskadowych arkuszy stylów zamiast tabel, wybierz "Domyślna konfiguracja" i "Eksportuj jako warstwy CSS" na karcie "Warstwy".

Krok 5

Otwórz plik XXXX z poziomu przeglądarki, aby zobaczyć swoją pracę. Edytuj pliki za pomocą programu do projektowania stron internetowych.