Веб-дизайн

Графика и анимация на веб-сайте: советы и ответы на вопросы

Графика и анимация на веб-сайте: советы и ответы на вопросы

Какой формат лучше подходит для веб-графики: GIF или JPEG?

Если изображение не содержит много цветов и имеет четкие линии, то лучше использовать формат GIF. Этот формат поддерживает палитру из 256 цветов и использует алгоритм сжатия LZW, который не ухудшает качество изображения. GIF также позволяет создавать прозрачные области и анимации. В отличие от GIF, формат JPEG предназначен для фотографий и сложных изображений с множеством цветов и градиентов. JPEG имеет True Color и маленький размер файла, но его алгоритм сжатия ухудшает качество изображения, и он не поддерживает прозрачность и анимацию.

Советы по использованию графических форматов:

  • Если изображение содержит мелкий текст, JPEG может размыть его, поэтому лучше использовать GIF.
  • Уровень сжатия в GIF зависит от метода эмуляции полутонов. none — дает лучшее сжатие, а dither – худшее.
  • Не стоит разрезать большие изображения с разнообразной палитрой на мелкие части, если это не помогает оптимизировать палитры, так как служебные блоки и палитры занимают место в каждом файле.
  • При выборе степени сжатия в JPEG для изображений с большими цветовыми градиентами нужно быть осторожным, чтобы избежать эффекта низкого разрешения.
  • Если изображение содержит прозрачный слой, лучше использовать GIF. Рекомендуется создавать картинку на подложке, близкой по цвету к месту размещения, чтобы избежать проблем с краями.

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

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

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

Для оптимизации можно использовать как стандартные инструменты графических программ, так и специализированные программы, такие как Adobe Image Ready, Ulead и другие. В Интернете также есть онлайн-инструменты.

Как «нарезать» изображение на куски?

Для этого можно использовать как стандартные инструменты графических редакторов, таких как Photoshop, так и специализированные программы, например, Ulead, Macromedia Fireworks, Web Razor и другие.

Можно ли из изображения в градациях серого сделать цветное?

Да, это можно сделать в Adobe Photoshop. Переводим изображение в RGB-режим, создаем копию слоя и устанавливаем атрибут наложения Lighten. Затем можно либо нарисовать цветовые зоны на новом слое, либо настроить фильтры для изменения цветов.

Вопросы по графическому пакету Adobe Photoshop

Сколько памяти необходимо выделить для нормальной работы Photoshop?

Если вы обрабатываете веб-графику, то достаточно выделить около 50% памяти, чтобы не создавать проблем для других программ. Если же вы работаете с большими изображениями, то лучше выделить 80-90%. Минимальные требования для работы Photoshop – 16Mb оперативной памяти и 50-100Mb дисковой.

Как заменить интерфейсные шрифты на русские?

Удалите файл ADMUI2.fon из подкаталога, где установлен Adobe Photoshop. При повторном запуске программа подставит системный шрифт с кириллицей.

Как создать эффект плавного перехода между изображениями?

Выберите слой, который должен плавно переходить, перейдите в режим Quick Mask, залейте все черным цветом, создайте градиент от черного к белому, затем вернитесь в стандартный режим и удалите ненужные участки.

Как лучше резать картинки для веб-дизайна?

Используйте Guidelines для точного позиционирования, установите режим прилипания к ним, переведите изображение в индексированный цвет, выделите нужный участок, скопируйте его, вставьте в новый файл и экспортируйте в формате GIF 89A.

Вопросы по Flash

Почему Flash-анимация «дергается» при проигрывании?

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

Как добиться прозрачности при экспорте картинок для Flash?

Flash поддерживает формат PNG с 8-битным альфа-каналом. В Adobe Photoshop создайте маску и сохраните её в канал. В Corel PhotoPaint маска должна быть видна при сохранении. При создании картинки нужно позаботиться об уменьшении цветов в альфа-канале.

Какие браузеры поддерживают Flash?

Flash поддерживается в Internet Explorer и Netscape Navigator версий 4 и выше. Для третьих версий требуется специальный плагин. Также есть плагин для Opera.

Как сделать, чтобы Flash-анимация сначала загружалась и проигрывалась только после полной загрузки?

Создайте ключевой кадр, добавьте действие «If Frame Loaded» и укажите кадр, при скачивании которого анимация будет считаться загруженной. Затем создайте еще один ключевой кадр с действием «Go to and play» на кадр с «If Frame Loaded». Добавьте графику для процесса загрузки и настройте действие, которое будет происходить при скачивании.

To top