[ новости /+++ | форум | теги | ]

Каталог документации / Раздел "Web мастеру, CGI, Perl, PHP, Apache" / Оглавление документа

правила · список вопросов · преамбула · обратная связь

7. Обработка графики

7.1. Какие форматы графических файлов применяются в Web?

Наиболее употребительными являются три формата: GIF89a (*.gif), JPEG (*.jpg) и PNG (*.png). У каждого из них есть свои особенности, преимущества и недостатки.

GIF89a - самый старый из употребляемых в сети графических форматов. Он поддерживается всеми графическими браузерами, позволяет делать рисунки с прозрачными областями (но не полупрозрачными) и несложные анимации. Рисунки в этом формате сжимаются построчно, поэтому рисунок с горизонтальными линиями в GIF89a «весит» меньше, чем с вертикальными. Недостатка у GIF89a два: во-первых, он позволяет использовать одновременно не более 256 цветов в одной картинке (кадре), и, во-вторых, он запатентован CompuServe, его использование без лицензии незаконно и теоретически может быть наказано в судебном порядке. GIF89a хорошо использовать для графики с резкими границами и большими монотонными полями.

JPEG - формат сжатия графики с потерями, разработанный с учетом особенностей человеческого зрения. Сжимает полноцветные изображения в 20-100 раз относительно первоначального объема файла, в зависимости от качества получаемой картинки. Применяется для сжатия фотографий, а также других картинок с плавными переходами яркости и цвета.

PNG - открытый формат, разработанный в качестве замены GIF89a. Графика в PNG сжимается как по горизонтали. так и по вертикали. что дает заметный выигрыш по сравнению с GIF89a. Позволяет использовать полноцветную графику, прозрачность и полупрозрачность, гамма-коррекцию и т.д. Недостаток - PNG поддерживается на хорошем уровне не всеми браузерами. Например, прозрачные области в PNG не будут корректно показываться в NN4, а полупрозрачные - в IE4-6.

Недавно появился очень перспективный формат анимационной графики MNG (Multiple-image Network Graphics), который поддерживает все возможности алгоритмов сжатия PNG и JPEG (в том числе полупрозрачность и гамма-коррекцию) для создания анимированных изображений. Но, к сожалению, пока он поддерживается только в Mozilla/NN6.

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

Самые популярные пакеты для создания и обработки растровой графики:

Коммерческие:

Adobe PhotoShop
Corel PhotoPaint

Бесплатные и условно бесплатные:

Paint Shop Pro (http://www.jasc.com) - Shareware
Gimp (http://www.gimp.org) - Freeware (GNU), существует под большинство ОС.

Для обработки векторной графики используют такие пакеты:

Коммерческие:

Adobe Illustrator
CorelDraw

Бесплатные и условно бесплатные:

Xara X (http://www.xara.com)
tgif, xfig, staroffice, killustrator (под Linux и FreeBSD)

7.3. Что такое чересстрочная и прогрессивная графика, почему она лучше обычной и как ее создать?

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

Для создания чересстрочной графики вам понадобится графический редактор, поддерживающий запись в файл формата GIF89a или PNG. Для PhotoShop 4- это называется «File/Export/GIF89a Export». Должен быть отмечен пункт «Interlace». В PhotoShop 5+ используем пункт меню «File/Save for Web...» и в появившемся окне выбираем формат GIF или PNG, при этом отмечая галочку Interlace.

Для формата JPEG есть функциональный аналог чересстрочной графики - формат Progressive JPEG. В PhotoShop экспорт в этот формат достигается пунктом меню «Save a Copy...» (в ранних версиях) или «Save for Web...», и в опциях JPEG отмечаем пункт Progressive. Интересно, что прогрессивный JPEG не только удобнее для юзера, но при том же качестве часто «весит» меньше, чем стандартный :)

7.4. Как создать прозрачную и полупрозрачную графику?

PhotoShop 5+: делаем картинку с альфа-каналом и экспортируем в PNG или GIF («Save for Web...»), не забывая отметить галочку Transparency

В PhotoShop 4- «File Export/GIF89a Export», затем пипеткой выделяете тот цвет, который должен стать прозрачным.

Есть и программы типа GIF Constructor Set, которые помогают определить один из цветов палитры GIF как прозрачный.

7.5. Как создать анимацию?

GIF-анимация - это последовательная смена картинок. Картинки можно сделать в любом редакторе, а сами анимации в специальных программах:

а) Gif Construction Set:

• Запустите 'Мастер' в Gif Construction Set:
  File / Animation Wizard... и нажмите Next и еще раз Next. Если вы хотите, чтобы ваша анимация после выполнения остановилась, то выбирайте Animate once and stop, а если хотите, чтобы она постоянно работала - Loop Indefinitely. Нажимайте Next.

• Далее выберите качество изображения (фотореалистичное, рисованное).

• Теперь надо выбрать промежуток времени между сменой кадров.

• Теперь выбираете из каталогов GIF'ы для анимации.

• Нажимайте Done.

• Сохраните.

• Для проверки нажмите View или просмотрите анимацию в браузере.

б) MS GIF Animator:

• Нажмите на панельке кнопку Open (Ctrl+O) и загрузите первый кадр.

• Используя кнопку Insert (Ctrl+I), вставьте остальные кадры и разместите их в нужном порядке, перетаскивая мышью, используя Clipboard или клавиши со стрелками на панели (они дублируются клавиатурными стрелками).

• Для повторяющейся анимации включите опцию Animation / Looping. При этом можно задать количество повторов или включить опцию Repeat Forever для бесконечного повтора.

• На закладке Image выставьте для _каждого_ кадра нужную задержку по времени (проверить анимацию можно, нажав кнопку Preview), метод рисования (как правило, используется либо Undefined, либо Leave) и наличие прозрачных областей в текущем кадре (и прозрачный цвет).

• Сохраните.

в) Ulead Gif Animator

• Запустите File / Animation Wizard

• Щелкните на Add Image. Выберите нужные файлы (выбирать можно сразу несколько файлов - если у вас они будут стоять не в том порядке, в котором нужно, вы потом сможете поменять их местами).

• Щелкаем «Далее». Появится выбор типа вашего изображения:

  Text-Oriented (Don't Dither) - состоят из текста
  Photo-Oriented (Dither) - содержат картинки

• Hажимаем «Далее». Можете выбрать глобальное время задержки или сделать это потом отдельно для каждого кадра.

• Hажимаем «Далее». Hажимаем «Готово». Стрелками [вверх] и [вниз] можете менять позицию кадра в анимации. В поле Delay можно установить свою задержку для каждого кадра

• Жмем F12. Сохраните.

7.6. Можно ли оптимизировать графику (уменьшить размер)?

Да, и для этого есть два основных способа.

Первый связан с форматом GIF и палитрованной графикой. По умолчанию используется палитра в 256 цветов. Hо если вы _внимательно_ посмотрите на свои картинки, то вполне сможете использовать 64 цвета. Или 32. Или 16. Любой одноцветный текст, кстати, замечательно умещается в 8 цветов. Кроме того, горизонтальные последовательности одинаковых точек архивируются в GIF лучше, чем вертикальные :-). А если уменьшить неиспользуемые поля...

Второй связан с форматом JPEG и полноцветной графикой. Тут рецепт только один - меняйте степень сжатия. Можно также попробовать поиграть с параметром Baseline.

Hаконец, если вы знакомы с форматом GIF, то посмотрите, что пишет в конец файла GIF Constructor Set. Это тоже можно вырезать.

7.7. Посоветуйте программу или plug-in к Photoshop для создания анимации.

Gif Construction Set	(http://www.mindworkshop.com/alchemy/gifcon.html)
Ulead Gif Animator	(http://www.ulead.com/ga/)
Microsoft Gif Animator	(ftp://ftp.asf.ru/pub/Graphics/MicrosoftGIFAnimator/GIFSETUP.EXE)

правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)

Партнёры:

Хостинг: