The OpenNET Project / Index page

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

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

faq of Ru.html.Chainik


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

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:

б) MS GIF Animator:

в) Ulead Gif Animator

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)




Партнёры:
PostgresPro
Inferno Solutions
Hosting by Hoster.ru
Хостинг:

Закладки на сайте
Проследить за страницей
Created 1996-2024 by Maxim Chirkov
Добавить, Поддержать, Вебмастеру