Главнаяо Дизайне и Дизайнерах › Как создать WEB шаблон в «Adobe Illustrator»

Как создать WEB шаблон в «Adobe Illustrator»

Создаем внешний вид шаблона по средствам
«Adobe Illustrator»

Почему «Illustrator»,тут уж на любителя, кому как.
Допустим Вам нужно быстро сделать шаблон будущей страницы, и не очень хочется заморачиваться, а в «фотошопе» вы или недостаточно уверенно себя чувствуете или просто в «Иле» Вам быстрее и удобнее работать. По этому, и есть альтернативы.

И так! Создаем новый документ, естественно в палитре RGB, выставляем предполагаемый размер сайта, выбираем шрифты. Конечно не забываем что шрифтовой выбор браузеров не так разнообразен как хотелось бы, да и браузеры бывают разные, каждый со своими «тараканами».

При разработке внешнего вида стоит заранее представлять как ваш дизайн будет выглядеть после порезки, т.е. не следует рисовать того что в дальнейшем невозможно сверстать. Также продумайте оформление текстовой части, так как в дальнейшем тексты будут оформляться по средствам каскадных стилей, и дабы не омрачать жизнь при вёрстке не стоит раскрашивать каждое слово в разные цвета и всё такое.
Поехали дальше, после создания страницы сайта переходим к разметке «сайклов»
Для этого пользуемся инструментом «Slice tool» (Находится на панели инструментов в левой части окна программы)

Затем аккуратно размечаем всё на фрагменты,

смотрим чтобы текстовая часть не выходила за границы фрагмента и нажимаем в пункте выпадающего меню «file» вкладку «Save for Web & Devices»

Сохранение: В левой части выбираем расширение и степень сжатия изображений, и нажимаем «Save». После нажатия перед нами появляется диалоговое окно настроек получаемого документа.

Если все настройки устраивают, жмем «Save» еще раз.

Далее если настройки не устраивают, выбираем нужные, сохраненные или настраиваем в ручную. Все настройки разнообразны и разнофункциональны, некоторым подойдут настройки по умолчанию, другие выберут сохранение только HTML файла без изображений, а кто-то выберет табличную структуру или структуру состоящею из «дивов» параметры которых заданны сгенерированным CSS кодом.

Для сохранения одних изображений в меню «Тип файла» следует выбрать вкладку «Images Only(*.jpg)»:

Для сохранения только HTML файла в меню «Тип файла» следует выбрать вкладку «HTML Only(*.html)»

Иногда бывает, что нужно заменить всего лишь один исправленный сегмент. Тогда для замены сегментов нужно сгенерировать только тот, который нужен, для этого исправляем нужный сегмент прямо в исходном файле и выполняем еще раз команду «Save for Web & Devices» выделяем нужный сегмент и нажимаем «Save»

Далее в диалоговом окне настроек в меню «Slices» выбираем вкладку «Select Slices» и получаем нужный нам сегмент

Для изменения настроек по умолчанию меню «Settings» выбираем вкладку «Other»

И настраиваем наш файл как душе нашей угодно будет!




Удачи!

Будут вопросы пишите!

© Харьковблог - блог города Харькова
Напишите нам
create by motsenko.com
Харьковблог в