Как да създадем уеб сайт в Illustrator

Стъпка 1

Създайте документ от Illustrator с широчина 960 пиксела от височината, която избирате, в зависимост от съдържанието и дизайна, които имате предвид. Сайтът с ширина 960 пиксела отговаря на най-популярната широчина на разделителната способност 1024 пиксела, когато се вземат под внимание лентите на превъртане и прозорците.

Стъпка 2

Създайте ръчно нарисувана скица на визуалния дизайн на уебсайта си, ако все още не сте го направили. Това ще ви даде полезна справка за създаване в рамките на Illustrator.

Стъпка 3

Създайте своя дизайн, като използвате графични и текстови инструменти за сложно заглавие. Ако включите в него текст като например съобщения в блог, оставете празно пространството в тази област или създайте очертание, което го заобикаля, за опростена контур.

Стъпка 4

Добавете ръководства към вашия дизайн, за да разграничите отделните части от дизайна. Това е много важно, защото ще използвате тези ръководства, за да направите съкращения, които ще определят ръбовете на елементите на вашия уеб сайт. Водачите могат да ви помогнат да приведете предметите с прецизност. Кликнете върху вертикалното или хоризонталното влакче и плъзнете мишката до мястото, където искате водачът да е разположен.

Стъпка 5

Проверете двукратно местоположението на вашите ръководства за точност и точност. Ако е необходимо, ги плъзнете допълнително, за да отделите всеки елемент, като навигационните изображения, които ще бъдат връзките на сайта Ви.

Стъпка 1

Изберете "Object" в менюто, след това изберете "Cut" и "Create from the guides". Когато създавате водачите, ще видите малки черни кутии във всеки отрязък със съответния им номер. Изберете "Файл" в менюто и след това "Запазване за уеб и устройства". Изберете инструмента, за да изберете отрязаното, което е втората икона в менюто на инструмента, намираща се в дясната страна на екрана под иконата на ръката. Изберете всички разфасовки.

Стъпка 2

Изберете настройки за оптимизация измежду опциите, изброени в дясната част на екрана. Можете да изберете предварително зададени конфигурации или да създадете потребителски профил, в зависимост от това дали искате вашите изображения да бъдат JPEG, GIF или PNG файлове. Можете също да регулирате качеството на изображенията.

Стъпка 3

Прегледайте различните конфигурации, като кликнете върху разделите "2-нагоре" и "4-нагоре". В долния ъгъл на всяка визуализация ще видите информацията за оптимизацията, като например размера на файла и времето за изобразяване на браузъра. Кликнете върху бутона "Запазване". Решете дали искате да запазите изображенията и кода си и да отидете до тази област с помощта на клавиша "Къде".

Стъпка 4

Изберете формата на вашата работа. Ако контролирате XXXX и искате изображения само защото ще добавите код по-късно, изберете "Само изображения". Ако сте начинаещ или предпочитате XXXX да бъде генериран за вас, изберете опцията "XXXX и изображения". Ако предпочитате позиционирането на елементите да бъдат организирани с каскадни стилни листове вместо таблици, изберете "Конфигурация по подразбиране" и "Експортиране като CSS слоеве" в раздела "Слоеве".