Иллюстрации для Web


Иллюстрации для Web
Иллюстрации для Web На прошлых занятиях мы говорили о подготовке работ, которые будут распечатаны — в основном Illustrator для этого и служит. Однако заказчик может попросить вас не только разрабо...
Включенная сетка прозрачности
Рисунок 8.1. Включенная сетка прозрачности Еще одна опция, позволяющая настроить просмотр так, чтобы было удобнее работать с интернет-графикой, это Pixel Preview (Пиксельный режим) — View > Pix...
Изображение в режиме просмотра
Рисунок 8.2. Изображение в режиме просмотра Preview (а) и Pixel Preview (б) Приступим к изготовлению баннера. Он должен быть достаточно простым, однако содержать и текст, и графику. Его размеры— 4...
Наш баннер
Рисунок 8.3. Наш баннер Основа создания изображений для использования в Интернете — инструмент Save for Web (Сохранить для Web). Он практически одинаков почти во всех программах от Adobe. Среди гр...
Окно Save for Web
Рисунок 8.4. Окно Save for Web Большинство настроек данного инструмента предназначено для оптимизации графических изображений. Чтобы изредка использовать Save for Web (Сохранить для Web), нет смыс...
Настройки для оптимизации GIF
Рисунок 8.5. Настройки для оптимизации GIF Diffusion (Диффузная). Своеобразное перемешивание имеющихся пикселов. Почти всегда улучшает вид изображения, поэтому часто используется. Pattern (Образец...
GIFизображение с 0% 60% и 100% параметром Lossy
Рисунок 8.6. GIF-изображение с 0%, 60% и 100% параметром Lossy Interlaced (Чересстрочный). Сделать GIF чересстрочным, то есть его загрузка будет происходить через строку. Это немного увеличит разм...
Color Table
Рисунок 8.7. Color Table Экспериментируя с настройками оптимизации GIF, добейтесь минимально возможного размера файла.В конце описания функций оптимизации GIF хочется рассказать про один инструмен...
Настройки для оптимизации формата JPEG
Рисунок 8.9. Настройки для оптимизации формата JPEG Настраивая эти параметры, вы неизбежно столкнетесь со стремлением получить наименьший файл и нежеланием терять качество. Найти золотую середину...
JPEGразмывание хоть и портит изображение
Рисунок 8.10. JPEG-размывание хоть и портит изображение (внизу), но зато значительно уменьшает его размер При оптимизации изображений не нужно знать много правил, требуется большой опыт. Через как...
Анимированный Flashбаннер
8.1. Анимированный Flash-баннер Теперь несколько усложним задачу — изготовим анимированный Flash-баннер. Говорить о полноценной Flash-анимацию, в данном случае, конечно, не приходится, — для этог...
Меню палитры Layers
Рисунок 8.11. Меню палитры Layers Нас в этом меню интересует команда Release to Layer (Sequence) (Преобразовать в слои (Последовательно)), которая переводит каждый отдельный объект на новый слой....
Палитра Layers после выполнения Release to Layer (Sequence)
Рисунок 8.12. Палитра Layers после выполнения Release to Layer (Sequence) На этом подготовка закончена, можно сохранять при помощи Save for Web (Сохранить для Web) в SWF. SWF — это основной формат...
Настройки оптимизации для формата SWF
Рисунок 8.13. Настройки оптимизации для формата SWF Существуют следующие настройки. Read Only (Только чтение). Если вы установите флажок, то файл будет записан таким образом, что его уже нельзя бу...
Работа с форматом SVG
8.2. Работа с форматом SVG В настоящее время информация, которая размещена в Интернете, носит смешанный характер. Трудно найти такой сайт, в котором есть только графика или только текст. Именно по...
Исходная фигура
Рисунок 8.14. Исходная фигура Создание интерактивного SVG несет в себе элементы программирования, поэтому всем объектам необходимо дать имена, чтобы потом их использовать.Выделите крест и откройте...
ВНИМАНИЕ
ВНИМАНИЕВ именах при сохранении интерактивного SVG нельзя использовать пробелы и подчеркивания. Поэтому даже Layer 1 необходимо переименовать в Layerl.Для переименования дважды щелкните левой кноп...
Окно свойств объекта
Рисунок 8.15. Окно свойств объекта Далее сгруппируйте (Ctrl+G) крест с кругом и аналогичным способом переименуйте Group в all.Так как работать мы будем с JavaScript-процедурами, необходимо подключ...
Окно подключения JavaScriptфайла
Рисунок 8.16. Окно подключения JavaScript-файла Щелкните на кнопке Add (Добавить) и найдите файл events.js на жестком диске.После этого можно приступать непосредственно к заданию интерактивности....
Итоговый вид палитры SVG Interactivity
Рисунок 8.17. Итоговый вид палитры SVG Interactivity Осталось сохранить файл в формате SVG. Желательно, чтобы место сохранения содержало еще и используемый JavaScript-файл — иначе возможны проблем...
SVG в окне обозревателя
Рисунок 8.18. SVG в окне обозревателя Особое внимание обратите на то, какого размера получился файл (у нас это всего 720 байт!). Никакая GIF-анимация не сравнится с этим форматом по компактности....
Создание HTMLстраницы
8.3. Создание HTML-страницы Illustrator, в принципе, можно использовать и для создания целых сайтов. Правда, с оговоркой, которая звучала уже неоднократно — это будет совсем не профессиональная р...
Вид страницы которую мы будем повторять
Рисунок 8.19. Вид страницы, которую мы будем повторять Единственный элемент, который будет использован готовым, — это центральная растровая картинка. Вы можете копировать ее с экрана. 1. Итак, пер...
Результат подготовки изображения первой страницы сайта
Рисунок 8.20. Результат подготовки изображения первой страницы сайта Теперь приступим к созданию меню сайта. Вначале напишите его при помощи Text (Текст). Обратите внимание на то, что каждый пункт...
Задание URL через палитру Attributes (Атрибуты)
Рисунок 8.21. Задание URL через палитру Attributes (Атрибуты) Физически страница сформирована. Однако так как она вся построена на картинках, нужно разбить изображение на пластины (используя инстр...
Страница разбитая на пластины
Рисунок 8.22. Страница, разбитая на пластины На этом работа почти выполнена. Конечно, лучше оптимизировать каждую пластину отдельно после запуска Save for Web (Сохранить для Web), но для данного п...
Итоговая страница в окне Internet Explorer
Рисунок 8.23. Итоговая страница в окне Internet Explorer Таблица 8.1. Функции программы, используемые для подготовки изображений для ИнтернетаНазваниеОписаниеКлавиатурное сокращениеИнструментыТуре...


- Начало -



Книжный магазин