Xpoint
   [напомнить пароль]

Интернет::Графика - F.A.Q.

Какой графический формат лучше использовать для графики в веб и почему?

Если ваша картинка содержит немного цветов и/или четкие линии - лучше использовать GIF, так как его палитра может содержать максимум 256 цветов (меньше — можно, больше — никак) и в нем применяется алгоритм сжатия без потери качества изображения (конкретно — алгоритм LZW). Также GIF допускает создание прозрачных областей и анимации. Также серьёзным недостатком является закрытость лицензии алгоритма компрессии LZW, из-за чего требуется её оплачивать для использования в любом программном обеспечении. Этот недостаток приведёт к тому, что постепенно от формата GIF будут отказываться в пользу других, более открытых форматов.

Формат JPEG используется при работе с фотографиями и сложными коллажами, содержащими большое количество цветов и цветовых переходов (градиентов). Достоинствами этого формата являются глубина цвета True Color и небольшой размер выходного файла. К недостаткам можно отнести алгоритм компрессии с потерями качества, невозможность задания прозрачных областей и невозможность создания анимации.

Также существует графический формат PNG, который имеет все достоинства GIF, кроме возможностей анимации — в нём используется алгоритм компрессии без потерь, есть возможность хранить файл с глубиной цвета до 32 бит (снято ограничение на 256 цветов), широкие возможности использования прозрачности и альфа-каналов, с возможностью задавать прозрачность изображения в широких пределах. Также в сам формат встроены средства гамма-коррекции для того, чтобы файл всегда отображался именно так, как он виделся дизайнеру, его создавшему.
Недостатком формата является отсутствие полной поддержки его возможностей броузерами (на момент написания этого документа более-менее корректно с PNG работает NC6), что затрудняет использование на сайтах, ориентированных на массовую аудиторию.

На сегодняшний день используются все три формата, и благодаря тому, что у каждого есть своя ниша, могут быть использованы при разработке сайтов с одинаковым успехом. Как уже сказано, PNG постепенно будет занимать место GIF на рынке динамического создания графики [счётчики, диаграммы], благодаря тому, что библиотеки, использующие для вывода PNG не нуждаются в оплате.

Какое ПО лучше использовать при создании графики для веб?
Однозначного рецепта здесь дать невозможно т.к. многое в этом вопросе зависит от предпочтений конкретного дизайнера. В данный момент для работы с растром основная масса дизайнеров используют Adobe Photoshop (http://www.adobe.com), Corel Photopaint (http://www.corel.com) или Ulead Photo Impact (http://www.ulead.com). Для работы с векторной графикой Adobe Illustrator (http://www.adobe.com), Corel Draw (http://www.corel.com) или Macromedia Freehand (http://www.macromedia.com).
Как лучше оптимизировать графику для использования в веб?
Для этой цели можно использовать как стандартные средства графических пакетов (Photoshop, Photopaint и т.д.), так и специальное ПО. К такому ПО можно отнести Ulead Smart Saver (http://www.ulead.com), Adobe Image Ready (http://www.adobe.com) и некоторые другие. Так же можно использовать специальные он-лайн сервисы, например, http://www.gifwizard.com/
Как убрать "растр" со сканированных изображений?
Лучше сканировать изображение с большим разрешением чем будет иметь изображение на выходе, причем, разрешение не должнобыть кратным разрешению ПЗС-матрицы сканера, например, 310 dpi. В Adobe Photoshop можно сделать следующие действия со сканированным изображением. Filter -> Noise -> Despeckle -> Gaussian Blur (0.5-1) -> создать копию текущего слоя -> к копии применить Gaussian Blur (2-5) -> установить степень непрозрачности слоя-копии в 20-40%.
Как "разрезать" картинку на части?
Для этой цели можно использовать как стандартные средства графических пакетов (Photoshop - см. Photoshop F.A.Q., Photopaint и т.д.), так и специальное ПО. К такому ПО можно отнести Ulead Web Razor (http://www.ulead.com), The Castle's SplitImage (http://www.thecastle.com), Macromedia Fireworks (http://www.macromedia.com) и некоторые другие.
Как из картинки выполненной в градациях серого получить цветную?
В Adobe Photoshop можно сделать следующее. Перевести изобрадение в режим RGB. Создать копию текущего рабочего слоя и выставить аттрибут наложения Lighten. Дальше можно идти одним из двух путей (хотя можно и попытаться сочитать их). Во-первых, можно просто нарисовать на новом слое нужные цветовые области. Во-вторых, поиграться с фильтрами из раздела меню Image -> Adjust (Hue Saturation -> Colorise, Color Balance, Selective Color).
Каким образом можно работать с прозрачностью, например для того, чтобы делать “прозрачные”, бесфоновые изображения (например, gif или png с альфа-каналом)?

Настоящие способы годятся для Adobe Photoshop 5.x, принцип работы с прозрачностью можно применить и для других графических пакетов.

Способ первый: Cоздайте новый слой и удалите фоновый (background) или отключите его отображение. Вы получите возможность рисовать на прозрачном слое. Все, что было прозрачным, будет прозрачным и при сохранении через Save for WEB... Полупрозрачные элементы при конвертации в ГИФ станут непрозрачными (свойство ГИФов, не имеющих градаций прозрачности, то есть пиксель либо прозрачен, либо нет, третьего не дано) и проверьте флажок Transparency.

Способ второй: Просто рисуте все что надо, а при сохранении через Save for WEB... укажите цвет который должен стать прозрачным (Matte).

Рекомендации: Не делайте градиентов (плавных переходов из одного цвета в другой) и полупрозрачных элементов. Лучше создайте некий фон на котором предполагается размещать картинку, а потом при сохранении в ГИФ укажите его как прозрачный, в противном случае может возникнуть муар из белых и серых квадратиков на границе прозрачной и непрозрачой областей.

Если PS младей версии, то только второй способ и соответственно через Экспорт в ГИФ...

Текст: LookeR
Powered by POEM™ Engine Copyright © 2002-2005