FAQ по графике и анимации для Web

LEO, http://kimsite.narod.ru

Вопросы по графике

Какой графический формат (GIF или JPEG) лучше использовать для графики в веб и почему?
Если ваша картинка содержит немного цветов и/или четкие линии - лучше использовать GIF т.к. его палитра может быть только в пределах 256 цветов и в нем применяется алгоритм сжатия без потери качества изображения (конкретно, алгоритм LZW). Так же GIF допускает создание прозрачных областей и анимации. В отличие от него, JPEG используется при работе в фотографиями и сложными коллажами содержащими большое количество цветов и цветовых переходов (градиентов). Достоинствами этого формата являются глубина цвета True Color и небольшой размер выходного файла. К недостаткам можно отнести алгоритм компрессии с потерями качества, невозможность задания прозрачных областей и невозможность создания анимации.
Напоследок несколько советов по обращению к тем и другим форматам: Если в изображении содержится мелкий текст, JPEG-конверсия сделает его размытым и менее контрастным, а значит малочитаемым. 8 цветов (3 бита) в палитре GIF-формата, как правило, более чем достаточны для качественного отображения текста. На степень последующего сжатия при конвертировании в GIF влияет также и то, какой способ эмуляции полутонов был выбран при переводе в режим индицированных цветов. "None" создает наилучшие, "dither", соответственно, наихудшие условия для компрессии. Большие изображения в GIF-формате с богатой палитрой не рекомендуется резать на много маленьких, если это не ведет к оптимизации палитр отдельных кусочков - в конце концов, служебные блоки и данные палитры тоже занимают некоторое место в каждом файле этого формата. При наличии в фотографических изображениях больших плоскостей с цветовыми градиентами следует быть осторожным со степенью сжатия JPEGа - может легко возникнуть "эффект плохого разрешения". Обстоятельства - такие как необходимость наличия у изображения прозрачной подложки - подчас делают выбор за нас, такое умеет только GIF (ведь у MPEG в его внутренней кодировке цветов как таковых нет). Стоит только упомянуть, что рисовать подобную картинку стоит на подложке, близкой по цвету к той, на которой он будет помещен на странице - возникает меньше проблем с рваными или просто выделяющимися краями.

Какое ПО лучше использовать при создании графики для Web?
Однозначного рецепта здесь дать невозможно, т.к. многое в этом вопросе зависит от предпочтений конкретного дизайнера. В данный момент для работы с растром основная масса дизайнеров используют Adobe Photoshop, Corel Photopaint или Ulead Photo Impact. Для работы с векторной графикой Adobe Illustrator, Corel Draw или Macromedia Freehand.

Как лучше оптимизировать графику для использования в веб?
Для этой цели можно использовать как стандартные средства графических пакетов (Photoshop, Photopaint и т.д.), так и специальное ПО. К такому ПО можно отнести Ulead Smart Saver, Adobe Image Ready и некоторые другие. Так же можно использовать специальные он-лайн сервисы, например, http://www.gifwizard.com.

Как "разрезать" картинку на части?
Для этой цели можно использовать как стандартные средства графических пакетов (Photoshop, Photopaint и т.д.), так и специальное ПО. К такому ПО можно отнести Ulead Web Razor, The Castle's SplitImage, Macromedia Fireworks и некоторые другие.

Как из картинки выполненной в градациях серого получить цветную?
В Adobe Photoshop можно сделать следующее. Перевести изобрадение в режим RGB. Создать копию текущего рабочего слоя и выставить аттрибут наложения Lighten. Дальше можно идти одним из двух путей (хотя можно и попытаться сочитать их). Во-первых, можно просто нарисовать на новом слое нужные цветовые области. Во-вторых, поиграться с фильтрами из раздела меню Image -> Adjust (Hue/Saturation, Color Balance, Levels и другое).

Вопросы по PhotoShop

Сколько памяти выделять ему для нормальной работы и почему?
Если вы работаете с графикой для web (обычно, она небольшого размера) - целесообразно ставить 50% или около того, чтобы иметь возможность без проблем работать одновременно и с другими приложениями (например, HTML редактор, FTP клиент и/или что-то другое). Если же вы работаете с файлами большого размера - советую выставить 80%-90%. Если же исчислять в абсолютных величинах, то надо отметить, что для минимальной работы PhotoShop необходимо 16 Mb оперативной и 50-100 Mb дисковой памяти.

Как изменить шрифты его интерфейса на русские?
Найдите ADMUI2.fon в директории PhotoShop и удалите его. При запуске PS подставится системный кириллический шрифт (например, MS Sans Serif).

Как сделать так, чтобы одна картинка плавно переходила в другую?
Выбираем слой который должен плавно переходить -> Edit in Quick Mask Mode (Q) -> Заливаем все черным цветом (картинка станет розоватой) -> Делаем градиен то черного к белому (черный - непрозрачность, белый - прозрачность) -> возвращаемся в Edit in Standart Mode (Q) -> Edit -> Clear (или просто Del).

Как лучше резать картинки для web-дизайна?
Ставим Guidelines в нужное положение (нажать левую кнопку мыши на "линейке" и тянуть не отпуская), устанавливаем режим "прилипания" к ним (View -> Snap to Guides) -> Image -> Mode -> Indexed Color, выделяем нужный участок карники, CTRL+C -> CTRL+N -> Enter -> CRTL+V -> File -> Export - GIF 89A Export.

Вопросы по Flash

Flash анимация при проигрывании "дергается". Что происходит?
Это может происходить в одном из следующих случаев:
    1. Больший, по отношении к размеру экрана размер перемещаемой графики.
    2. Сложность движущейся графики. (прозрачности, изображения с альфа-каналом, и т.д.)
    3. Сложная графика, на фоне которого движется анимационный объект.
    4. Низкое количество кадров в секунду (Frame Rate), выставляемое в Movie Properties (Ctrl+M).

Как добиться прозрачности при экспорте картинок для Flash?
1. Flash поддерживает формат PNG, в котором имеется свой 8-битный альфа-канал. В Adobe Photoshop создается маска и сохраняется в канал. В Corel PhotoPaint при сохранении должна быть видна маска. В канал не сохраняется. (Какой бы способ сжатия Losser или Jpeg мы не выбирали во Flash-е альфа-канал будет сохранятся со сжатием Losser. Поэтому при создании картинки нужно позаботиться об уменьшении цветов в альфа-канале).
2. Делаем с картинкой Break (CTRL+B) два раза. Накладываем сверху контур. Щелкаем на картинку за контуром. Выделяется лишнее. Удаляем.

Какие браузеры поддерживают Flash?
Поддержка Flash встроено в Internet Explorer и Netscape Navigator версий 4 и выше. Третьи версии поддерживают Flash при установке специального плагина (около 170 Kb для третьей версии Flash). Так же существует подобный плагин для Opera.

Как во Flash сделать, чтобы анимация сначала загружалась и проигрывалась только после полной загрузки?
Дважды кликаем на ключевом кадре. Делаем action "If Frame Loaded" и указываем, при скачивании какого кадра анимация будет считаться скачанной (самый простой вариант - последний кадр). Закрываем меню и создаем ключевой кадр, после этого делаем action "Go to and play" на кадр где "If Frame Loaded". Теперь анимация будет зациклена между этими двумя кадрами. Делаем графику для процесса загрузки (Loading...). Теперь создадим действие, которое будет происходить при скачивании. Заходим в action кадра, где "If Frame Loaded" и вставляем внутрь уже имеющегося действия действие "Go to and play" на кадр после второго ключевого кадра. Cмотрим, что получилось. Анимация прыгает от кадра к кадру пока не скачался нужный кадр. Когда кадр скачался, анимация "перепрыгивает" через кадр, который отбрасывает назад.