Уроки по Photoshop, Illustrator, Flash и 3ds max. Статьи по дизайну и фотографии.

Save for web в Adobe Illustrator (Часть 1). Урок для начинающих.

Целью использования возможности "Сохранения для Web" в Adobe Illustrator является оптимизация графики для использования на веб-сайтах или других экранах, таких как планшеты, например. Слово "оптимизация" относится к оптимальному балансу между размером файла и его качеством. Ведь мы же хотим, чтобы у файлов были небольшие размеры и они быстро загружались на веб-странице, но в то же время не хочется при этом жертвовать внешним видом изображения. Save for Web позволяет просматривать как будет выглядеть оптимизированная векторная графика, так что можно подобрать наилучшую оптимизацию.
В этой статье, мы рассмотрим форматы файлов доступных при выборе функции "Сохранить для Web", и показажем вам, какие именно форматы лучше всего подходит для различных видов работ.

Диалоговое окно Save for web.
Вы получаете доступ к Save For Web диалогового меню Файл (File) в Illustrator (Alt+Shift+Ctrl+S). Откроется большое диалоговое окно, которое займет большую часть экрана.

save for web

В появившемся окне можно выбрать для предпросмотра результата оптимизации один из трех способов. Original — первый вариант, просто показывает оригинальную картинку. Это кажется довольно бесполезным вариантом, так как, хочется увидеть, как будет выглядеть графика после того, как она будет оптимизирована. Для этого можно выбрать вариант Optimized (в нем будет показано оптимизированнон изображение). Или можно выбрать 2-Up режим, который даст возможность превью до и после оптимизации в одном окне. На изображении внизу, оригинал показан слева, а оптимизированная версия (в данном случае, GIF картинка) справа.

2-Up

Вы можете настроить масштаб отображаемых картинок с помощью выпадающего меню в левом нижнем углу окна. Также для изменения масштаба можно использовать привычные сочетания клавиш. Нажатие кнопки Предварительный просмотр (Preview) откроет оптимизированное изображение в браузере установленном по умолчанию. Если хотите увидеть, как оно будет выглядит в других браузерах, можете добавить их, нажав на маленький значок земного шара рядом с кнопкой Preview.

Preview

Одним из наиболее важных пунктов при Сохранении для Web является подбор размера файла. Под каждым из Preview пишется соответствующий размер файла. Так на рисунке внизу, оригинальный EPS находится слевай и весит 2.44M. Оптимизированный GIF находится справа и имеет гораздо меньший размер около 39K. Так как цель Save for Web это нахождение идеального баланса между размером и качеством, то вы будете смотреть на эти цифры.

размер изображения

Форматы файлов.
GIF (Graphics Interchange Format).
GIF является одним из старейших и наиболее часто используемых форматов в Интернете. Он идеально подходит для изображений с большими участками однотонной заливкит, как в нашем примере. Формат GIF использует цветовое пространство индексированных цветов. Это позволяет определить точное количество оттенков в цветовой таблице, так что можно использовать только те, что нужны, тем самым снижая общий размер файла.
Диалоговое окно Save for Web имеет несколько предустановок при выборе формата GIF. Выбирая различные настройки, следите за изображением и полученным размером файла. На изображении внизу, использован пресет, имееющий 128 цветов. Как вы можете увидеть, изображение выглядит хорошо, а размер файла при этом всего 37.72K.

формат gif

В следующем примере, выбрано только 8 цветов. Размер файла теперь 23.3K. Это значительно меньше, но изображение начинает терять качество. Края грубеют из-за недостаточного количества цветов, необходимых для заполнения переходов между цветовыми плашками. Даже если в изображении используется только пять цветов — три оттенки синего, желтого и белого — Illustrator использует больше цветов для сглаживания краев при переходе цветов и кривые кажутся мягче, сглаженнее.

края изображения

GIF цвета могут быть ограничены "веб-безопасной" палитрой. Было время, когда дизайнерам приходилось использовать только 216 цветов, которые были общими для Windows и Macintosh систем. В наше же время это уже не столь актуально, ведь мониторы могут отображать миллионы цветов. Но если вы хотите, чтобы ваша графика выглядела одинаково на любой платформе, вам все же стоит ограничить палитру этими веб-безопасными цветами. В приведенном ниже примере, использовалась именно такая палитра, и можно хзаметить, как светло-голубой цвет был изменен на зеленовато-голубой.

веб безопасная палитра

GIF файлы можно сделать черно-белыми, используя параметры как на рисунке внизу. Их можно менять по своему усмотрению, чтобы получить различные варианты черно-белой стилизации.

черно белая стилизация

GIF-файлы поддерживают один уровень прозрачности. Это означает, что каждый пиксел либо непрозрачный, либо полностью прозрачными - такой уровень нельзя использовать для изображений с мягкой тенью или прозрачным градиентом.

прозрачность

Рядом с галочкой Прозрачность (Transparency) можно выбрать цвет подложки. Это позволит добавить небольшой контур вокруг изображения в выбранном цвете. Так что если вы размещаете GIF-файл на цветном фоне, можно задать тот же цвет и для данного контура. Таким образом, переход между графикой и фоном станет более гладким.

контур

1 | 2 | >

Другие уроки Illustrator >>