Список вопросов по HTML
         

Какие форматы графических файлов применяются в 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.



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


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

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

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)



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


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

Для создания чересстрочной графики вам понадобится графический редактор, поддерживающий запись в файл формата 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 не только удобнее для юзера, но при том же качестве часто «весит» меньше, чем стандартный :)



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


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

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

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



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


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. Сохраните.



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


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

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

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

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



Посоветуйте программу или 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)