Иногда возникают вопросы на взгляд опытного вебмастера банальные, ответы на которые очевидны и само собой разумеющиеся. Но начинающего автора сайтов они могут поставить в тупик и надолго затормозить его работу, лишая сна и радости жизни. И это не всегда вопросы о том, как раскрутить сайт. Для разрешения подобных вопросов по веб-графике и была написана эта статья. Итак,
Какой формат лучше подходит для веб-графики, GIF или JPEG?
Если картинка не очень многоцветная и/или содержит четкие линии, то для нее лучше всего подходить формат GIF. Данный формат позволяет использовать палитру всего из 256 цветов, при этом он использует алгоритм сжатия, который никак не влияет на качество изображения (а именно LZW). Кроме этого формат GIF позволяет создавать прозрачные участки и анимированные изображения. В отличие от формата GIF, формат JPEG предназначен для работы с фотографиями и сложными изображениями, содержащими множество цветов и градиентов (цветовых переходов). Среди главных плюсов этого графического формата – цвет True Color и маленький размер конечного файла. К минусам – алгоритм сжатия, который серьезно влияет на качество изображения, отсутствие возможности создания прозрачных участков и невозможность создания анимированного изображения.
И в заключение немного советов по использованию графических форматов:
- Если в картинке присутствует текст, написанный мелким шрифтом, то алгоритм JPEG размоет его и сделает плохочитаемым. При этом палитры формата GIF вполне достаточно, чтобы отобразить любой текст качественно.
- На уровень сжатия в GIF-формате сильно влияет метод эмуляции полутонов при режиме отображения цветов. "none" даст наилучшее сжатие, "dither" – наихудшее.
- Не стоит разрезать крупные изображения в формате GIF с разнообразной цветовой палитрой на множество более маленькие, если в результате не получается оптимизировать палитры этих кусочков, так как в результате вспомогательные служебные блоки и сами эти палитры занимают вполне определенное место в каждом отдельном файле данного формата.
- Необходимо быть весьма осторожным при выборе степени сжатия в формате JPEG при конвертации фотоизображений с большими плоскостями с цветовыми градиентами, так как может проявиться побочный эффект "низкого разрешения".
- Часто структура изображения диктует конкретный выбор. Например, присутствие в изображении прозрачного слоя позволяет использовать только формат GIF. В качестве совета стоит сказать, что создавать такую картинку лучше всего на подложке, цвет которой близок к тому, где он будет размещен на страничке. В этом случае будет меньше проблем с появлением рваных или выступающих краев.
Какое программное обеспечение лучше для создания веб-графики?
Однозначно ответить на этот вопрос невозможно, так как практически все здесь зависит от конкретного веб-дизайнера. В настоящее время для обработки растровых изображений большинство дизайнеров предпочитают пользоваться программами Corel Photopaint, Ulead Photo Impact, либо Adobe Photoshop. Для обработки же векторных изображений лучшими программами считаются Corel Draw, Macromedia Freehand и Adobe Illustrator.
Каким образом лучше всего оптимизировать графические изображения для веб?
Наряду со стандартными инструментами графических программ (например, Photoshop), для этого существуют и специальное программное обеспечение. Среди таких программных продуктов можно назвать Adobe Image Ready, Ulead и ряд других. Помимо этого в сети Интернет существуют специализированные онлайн инструменты, например, http://www.gifwizard.com/ (хотя это и англоязычный ресурс).
Как "нарезать" изображение на куски?
Для этой цели также годятся как стандартные инструменты больших графических редакторов вроде Photoshop, так и программы специально предназначенные для решения этой задачи – тот же Ulead, Macromedia Fireworks, Web Razor и другие.
Можно ли из изображения в градациях серого сделать цветную? Как именно?
Для этих целей можно использовать Adobe Photoshop. Переводим картинку в RGB-режим. Создаем копию рабочего слоя и установим атрибут наложения Lighten. Теперь у нас два пути (хотя можно попробовать их объединить). Первый – рисуем на новом слое необходимые цветовые зоны. Второй – настройка фильтров из раздела Image -> Adjust (Color Balance, Levels, Hue/Saturation и другие для настройки цветов).
Вопросы по графическому пакету Adobe Photoshop
Сколько памяти необходимо выделить, чтобы он нормально работал?
Если ваша основная задача – обработка веб-графики (которая, как правило, имеет не очень большие размеры), то нужно устанавливать около 50%, чтобы не создавать проблем для одновременной работы других программ (редактора HTML, клиента FTP и т.п.). Если же вы обрабатываете графические файлы больших размеров, то лучше устанавливать 80-90%. При переводе процентов в абсолютные значения, необходимо помнить, что для работы пакета Adobe Photoshop требуется минимум 16Mb оперативной памяти и 50-100Mb дисковой.
Как заменить интерфейсные шрифты на русские?
В подкаталоге, где установлен Adobe Photoshop, найдите и затем удалите файл ADMUI2.fon. При повторном запуске пакет подставит системный шрифт, где есть кириллица.
Как создать эффект, когда одно изображение плавно переходит в другое?
Сначала выбираем слой, предназначенный для плавного перехода. Затем жмем "Edit in Quick Mask Mode (Q)". Заливаем черным цветом (изображение порозовеет). Создаем градиент от черного к белому (черный – непрозрачность, белый – прозрачность). Переключаемся обратно в "Edit in Standard Mode (Q)". Теперь Edit -> Clear (или Del).
Как лучше нарезать изображение?
Устанавливаем Guidelines в необходимое положение (для этого нажимаем левую кнопку мыши на "линейке" и не отпуская тянем). Задаем режим прилипания (View->Snap to Guides). Теперь Image->Mode->Indexed Color. Выделить соответствующий кусок изображения. Теперь Ctrl+C->Ctrl+N->Enter->Ctrl+V->File->Export-Gif 89A Export.
Вопросы по flash-анимации
Почему flash-анимация во время воспроизведения "дергается"?
Это происходит по следующим причинам:
- Когда размер перемещаемого изображения больше размера экрана.
- Сложное перемещаемое изображение (прозрачность, наличие альфа-канала и т.д.).
- Сложное фоновое изображение, по которому перемещается анимированный объект.
- Слишком низкий фрейм-рейт (количество кадров в секунду).
Как получить прозрачность при экспорте изображения для flash?
- Во flash есть поддержка формата PNG, у которого в свою очередь есть альфа-канал. В Adobe Photoshop создаем маску и сохраняем ее в канал. В Corel PhotoPaint во время сохранения маска должна быть видна. Не сохраняется в канал. (Не зависимо от того, какой способ сжатия, JPEG или Losser, вы выберете, во flash альфа-канал сохраняется в режиме Losser. Поэтому необходимо позаботиться об уменьшении количества цветов в альфа-канале.).
- Два раза нажимаем Ctrl+B. Накладываем контур. Нажимаем на изображение за контуром. Выделяется лишнее, которое и удаляем.
