Все новости от 26 июня 2000 г.

Веб-графика

Искусство веб-графики
Чаще всего мы судим о веб-сайте по его оформлению. В тот момент, когда пользователь впервые попадает на сайт, он останавливается перед выбором: углубиться в него или поскорее «укликать» прочь. А первое впечатление в очень большой степени зависит от того, насколько привлекательно и эффектно этот сайт оформлен графически. Веб, распространяя информацию, полагается на графику — от логотипов и баннеров до навигационных кнопок. Поэтому прежде чем приступить к созданию страниц посредством веб-редактора, необходимо создать изображения, которые вы будете использовать для их оформления.

Мы рассмотрели шесть программ, которые помогают разработать такую графику от начала и до конца. До недавнего времени проектирование веб-графики требовало применения специальных модулей и отдельных программ, таких как GIF-аниматоры и оптимизаторы: они обеспечивали доступ к особым функциям, свойственным веб-изображениям. Теперь современным требованиям начинают соответствовать и универсальные графические программы, такие как Adobe Photoshop 5.5 (профессиональный инструмент) и Ulead PhotoImpact 5 (мощный инструмент для деловых пользователей и любителей), которые включают в себя все необходимые для веб-дизайна средства. Фактически лишь два из шести рассмотренных нами продуктов (Macromedia Fireworks 3 и Satori WebFX 2000) специально предназначены для создания веб-графики.

Чем же отличается создание графики для веба от любой другой работы с графикой? Одно существенное отличие состоит в том, что веб-графика должна выглядеть красиво, оставаясь при этом очень компактной. Чтобы добиться успеха, автор сайта должен найти равновесие между визуальной привлекательностью изображения и скоростью его загрузки. Для этого служит оптимизация — процесс выбора подходящего формата файла (GIF, JPEG или PNG) и сокращения его размера и числа цветов без снижения качества изображения. Когда равновесие для данного изображения найдено, нужно сохранить параметры настройки, чтобы затем их можно было использовать вновь.

Идеальным методом оптимизации изображений служит расщепление изображения. Оно позволяет оптимизировать каждую часть изображения, независимо выбирая для нее наиболее эффективные параметры. Как ни странно, CorelDraw 9 и Jasc Paint Shop Pro не предоставляют такой возможности.

Конечно, все рассмотренные здесь пакеты, будучи графическими программами, содержат все традиционные инструменты для создания и редактирования изображений и текста. Большинство из них помогает также создавать динамические кнопки с использованием JavaScript, поддерживающие эффект rollover. А так как в веб-графике часто делаются ссылки на веб-адреса — например, при создании растровых карт и тех же rollover-эффектов — некоторые программы включают специальные инструменты для манипуляции URL.

При создании привлекательной графики нельзя обойтись без анимации. Все рассмотренные программы поддерживают анимацию, но на практике мы обнаружили, что только инструмент ImageReady из Adobe Photoshop и Macromedia Fireworks предлагают по-настоящему удобные интерфейсы анимации.

Традиционно считается, что у профессионалов-графиков для каждой задачи есть свои любимые инструменты. Но программное обеспечение этой категории совершенствуется такими темпами, что у пользователей появилась возможность найти единственное полное решение для подготовки веб-графики от самого первого и до самого последнего шага. Конечно, лучше вооружиться двумя-тремя дополнительными инструментами. Но можно обойтись и без этого.

Оценки пакетов веб-графики
Сегодня под веб-графикой понимается гораздо больше, чем создание традиционных рисунков. Конечно, полноценное решение должно позволять создавать и редактировать изображения. Кроме того, оно должно содержать средства создания анимации, выполнять специальные подготовительные операции (такие, как расщепление изображений и назначение растровым картам адресов URL) и оптимизировать изображения с целью минимизации времени их загрузки. Неудивительно, что рассмотренные нами продукты демонстрируют выдающиеся способности в разных областях. Например, у Adobe Photoshop самый лучший инструмент анимации, а у Fireworks — лучшие средства оптимизации. И все же нам удалось выбрать решение, которое обеспечивает наиболее полный и удобный набор инструментов.

= Выбор редакции	Adobe Photoshop 5.5	CorelDraw 9 Graphics Suite	Jasc Paint Shop Pro 6.02	Macromedia Fireworks 3	Satori WebFX 2000	Ulead PhotoImpact 5
ОБЩАЯ ОЦЕНКА
Простота использования (для профессионалов)
Простота использования (для любителей)
Помощь и руководства
Редактирование изображений
Графические инструменты
Создание текста
Создание эффекта rollover		-	-
Анимация
Создание растровых карт		-	-
Расщепление изображения			-
Инструменты управления цветовой палитрой
Оптимизация изображений
Скрипты и автоматизация
-- ОТЛИЧНО
-- ОЧЕНЬ ХОРОШО
-- ХОРОШО
-- ПОСРЕДСТВЕННО
-- ПЛОХО

Выбор редакции

Macromedia Fireworks 3

Так как Macromedia Fireworks 3 предназначен специально для веб-дизайна, его веб-ориентированные инструменты легко доступны и не создают впечатления вспомогательных функций. Этот продукт отлично справляется с работой на всем протяжении процесса создания веб-графики. Многие его функции, такие как редактор текста, редактор кнопок и система расщепления изображения, оказались лучшими среди всей шестерки. Такие элементы, как динамические кнопки JavaScript и анимации, создаются чрезвычайно легко, а что-либо более простое в использовании, чем его оптимизатор изображения, трудно себе представить. Но имейте в виду: Fireworks не поддерживает распечатку изображений. Поэтому, если вы разрабатываете что-то не для веба, вам потребуется такой продукт, как Adobe Photoshop.

Достоин упоминания и Ulead PhotoImpact 5. Этот продукт обеспечивает большинство тех же возможностей, какие есть в Photoshop, но стоит гораздо дешевле. Это программа для «продвинутых» непрофессиональных пользователей, которая предлагает неспециалистам интуитивно понятные инструменты.

Новое лицо веба
Большая часть современных веб-страниц оформлена растровыми изображениями, такими как GIF и JPEG, хотя векторная графика предлагает множество преимуществ, включая более быструю загрузку и более четкие изображения. Векторная графика не совсем чужда вебу. До недавнего времени большинство таких разработок делалось при помощи Macromedia Flash. Действительно, Macromedia Flash 4 представляет собой фантастическую творческую среду, которая позволяет создавать сложные анимации, интерактивный контент и мультимедийные проекты, использующие элементы, подобные аудио. Для их воспроизведения пользователи должны иметь в своих браузерах специальный Flash-модуль.

Однако Flash больше не одинок. Adobe LiveMotion 1.0 (бета-версия должна выйти к моменту публикации этого обзора) не поддерживает сложный мультимедийный контент, как Flash 4, зато предлагает аналогичный набор инструментов для создания более простых файлов в стиле Flash. LiveMotion экспортирует файлы в формат Flash SWF, так что они воспроизводятся тем же самым Flash-модулем. Применяя функции, которые до этого присутствовали в продукте Adobe ImageStyler, можно создавать векторные изображения и быстро присваивать им стили и атрибуты.

На устройствах высокого разрешения (мониторах и принтерах) векторные изображения выглядят лучше, чем растровые. К тому же для векторных изображений, как правило, требуется меньше памяти. Однако новый формат Scalable Vector Graphics (SVG), недавно стандартизованный организацией W3C, предлагает несколько преимуществ, отсутствующих у других векторных форматов. Так как SVG пишется на языке XML, графика может быть встроена непосредственно в XML-документ. Например, такие изображения могут включать текстовые надписи и описания, расширяющие возможности поиска. В настоящее время SVG не поддерживаются веб-браузерами, так что пользователям придется загружать специальный SVG-вьюер. Компания Jasc Software разрабатывает продукт Jasc Trajectory Pro, который работает непосредственно в формате SVG. Сейчас он находится на стадии ранней бета-версии (ее можно скачать), в которой виден, однако, его потенциал. Многие запланированные функции в эту версию не вошли, но Trajectory Pro уже содержит мощные инструменты рисования, а также средства управления слоями и прозрачностью.

Ни Flash, ни LiveMotion пока не имеют встроенной поддержки SVG. Adobe планирует включить ее в следующую версию своего продукта, а сейчас предлагает модуль экспорта SVG для LiveMotion.

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

Adjustment layer (корректировочный слой): Растровый слой, используемый для цветовой коррекции одного или более нижележащих слоев многослойного изображения.

Anti-aliasing (сглаживание): Процесс сглаживания, или размывания, ступенчатых диагональных линий растрового изображения. Граничные пикселы приобретают неправильную форму, что создает впечатление более гладких линий.

Dithering (псевдосмешение цветов): Изменение формы расположения точек с целью создания иллюзии большего разнообразия цветов по сравнению с действительным содержанием палитры, так что изображения кажутся гораздо более реалистичными.

Image map (растровая карта): Элемент веб-графики, разделенный на области, каждая из которых указывает на отдельный адрес URL.

Image slicing (расщепление изображения): Процесс деления сложного графического изображения на более простые. Так как разные типы изображений лучше представляются разными типами файлов, этот метод позволяет более эффективно оптимизировать графику, используя лучшее сочетание степени компрессии и качества отображения.

Layers: (Слои) Разные пласты элементов изображения, хранящиеся отдельно с целью расширения возможностей редактирования и верстки. Элементы можно свободно передвигать один над другим, не оказывая влияния на готовые изображения.

Mask (маска): Инструмент выбора, который закрывает часть изображения, выделяя область, подлежащую редактированию. Создание маски для определенной области помогает избирательно применять спецэффекты.

Optimization: (оптимизация) Процесс компрессии изображений с уменьшением цветовой палитры и выбором подходящего формата. Это способствует ускорению загрузки.

Raster graphics (растровая графика): Файлы изображения, в которых информация хранится попиксельно; такие изображения обычно называют bitmap-изображениями.

Rollover (динамическое изменение изображения): Изображение элемента меняется при наведении на него курсора. Обычно такие эффекты создаются при помощи JavaScript.

Timeline: (линия времени) Точное расписание событий анимации, аудио и т.п., фиксируемых в мультимедийном файле.

Tweening (построение промежуточных отображений): В анимации — процесс генерации промежуточных между двумя изображениями кадров для создания впечатления постепенного превращения одного объекта в другой.

Vector graphics (векторная графика): Изображения, составленные не из отдельных пикселов, а из точек, линий и фигур. В результате получаются файлы меньшего размера, которые можно масштабировать, не меняя качества изображения.

Обсуждение и комментарии

	A 27 Jun 2000 10:17 AM
Жалко, что редакция не рассмотрела GIMP я пока имею не очень большой стаж работы с ним, но впечатление он производит очень хорошее. Во-первых, он гораздо менее глюкав, чем CorelDraw и Adobe (я не знаю и не стремлюсь узнать заслуга ли это ОС или самого софта, не собираюсь вставать в ряды оголтелых linuxоидов, но это факт). Работа со слоями сделана превосходно и даёт безграничные возможности! Что касается простоты, у всех редакторов интерфейсы различаются примерно одинакого. Помощи там целая книга в HTML. Такого качества оптимизации GIF нигде не видел! Специально сравнивал с Adobe -- Adobe продул. В общем, вещица заслуживает внимания, а о ней ни слова. Ширее надо смотреть :-)
	ant - antissimomail.spbnit.ru 27 Jun 2000 12:24 PM
GIMP определенно следовало включить в список , уже хотя бы потому, что он ближе к рассматриваемым задачам чем Corel , например (IMHO). Или уважаемой редакции интересны лишь те продукты за "обзор" которых дадут денег? Или речь идет лишь о продуктах "заточенных" под определенную платформу (не будем тыкать пальцами)? М-да...нехорошо, нехорошо ...
	ant - antissimomail.spbnit.ru 27 Jun 2000 12:24 PM
GIMP определенно следовало включить в список , уже хотя бы потому, что он ближе к рассматриваемым задачам чем Corel , например (IMHO). Или уважаемой редакции интересны лишь те продукты за "обзор" которых дадут денег? Или речь идет лишь о продуктах "заточенных" под определенную платформу (не будем тыкать пальцами)? М-да...нехорошо, нехорошо ...
	Chonka - chonkamail.ru 27 Jun 2000 3:00 PM
Не забудем и о выходящем в скором времени в свет новой версии Photohop-а 6.0.
	XL - xl.centerusa.net 27 Jun 2000 3:28 PM
Не думаю, что ZDnetовцам заплатят денег за обзор тех или иных продуктов, просто эти продукты денег стоят, следовательно нужно соориентироваться тем кто их покупает :) По поводу "глюков" в Adobe - за 5 лет работы с ним НИ ОДНОГО НЕ УВИДЕЛ!
	Фатех Вергасов - vergassov1yahoo.com 27 Jun 2000 4:30 PM
Писал автор статью умно так до самовлюбленности и закончил как все умники кошмарной таблицей с идиотскими кружочками. Вот и выбирай для таких графические редакторы! А они все равно свои кружочки рисовать в таблицах будут. 'Мыш-ления у них такая непобедимая, понимаешь?! Почему-то не рассмотрены WEB-инструментарий фирмы Autodesk. Или слабо? Или все-таки тяга к кружочкам сказывается?
	Shadow 28 Jun 2000 12:59 AM
Вот... Счас с GIMP работал... Пытался сделать эффекты, найденные в вебе... Через час дошло, что скриншоты были не GIMP, а фотошопа с Макинтоша... Ух! :)))) А Photoshop - всё равно круче всех! Но дорогой! :)))) А rollover не редактором, а дримвэйвером вставляется! И вообще, нафиг статью. Вот общее мнение: 1. Photoshop 5.5 2. GIMP 1.2 Всё!
	Skull - andrey_tigeri.am 28 Jun 2000 3:50 AM
2 Shadow: ну можно чуть-чуть подправить - 1. PhotoShop(Windows), Gimp(все остальные платформы)
	Артур - arthurvs.odessa.ua 28 Jun 2000 10:45 AM
Хмм... Я последнее время пользуюсь 3 Фаерворксом. Что сказать... Не променяю на Фотошоп и ни на что другое. Все можно сделать быстро и хорошо. Я сам занимаюсь графикой только для инета и после многих проб редакторов остановился на Фаерворксе. GIMP пробовал давно, может чтось и поменялось... Но уже просто лень его по новой смотреть, тем более, что Фаерворкс меня очень даже устраивает :))
	Designer 28 Jun 2000 4:34 PM
Corel Photo-Paint лучший для меня, я пробовал много разных редакторов, но только этот полностю мне подходит. А главное - он удобный в использоании. Возможно он и не решает некотрых задач (незнаю), но он делает абсолютно все что мне надо и намного больше.
	Ruagh - sevabssys.com 28 Jun 2000 4:59 PM
Я свою CorelXARА ни на что не променяю :) Вот только жалко, что Corel перекупил в свое время XARA ltd... :((( Такую вещь загубили... :(((
	Грозный Генька-Генератор 2 Jul 2000 5:44 AM
Да, обзор несколько странный и далеко не полный. Где Igrafx Image (бывшая Picture Publisher)? Где E-Picture? Где Pixel 32? Где NetStudio? Похоже, дальше Калифорнии лень было софты искать. И еще первенство фотопопе дали. Ну и ламерство. Это же софтина для полиграфии. Слоевую модель к webэу приделать сложно. Ему урлу, как объекту не назначишь. А насчет Xara - вещь конечно хорошая, но далеко не универсальная. Там ведь даже TWAIN интерфейса нет и средств ретуширования. кнопки делать хорошо, а фото обрабатывать нельзя. Хорошо хоть Photoimpact с PaintShop'ом включили. Кстати, Photoimpact=Photo-Paint-глюки :) Имхо конечно. Но если серьезно, в них много общего. Оба они дети Paintbrush Plus. А GIMP - глючный он. Подоконный во всяком случае. Так что успокойтесь, господа противники абортов, пардон, линухоманы. Кроме вашего горячо любимого климакса GIMP нигде не идет. Подоконный глючит, полуосники от своего тоже не в восторге, для Be OS его просто нет, зато есть Easel, E-Picture, BeCasso.
	Shadow 8 Jul 2000 1:13 AM
Под окна его cygwin'ом надо собирать и запускать с коммерческим X-сервером.
	Roman Teplov - teplovfreemail.ru 10 Jul 2000 8:24 AM
Прочитал ваши споры и вот что скажу: Веб-дизайн нельзя расматривать как однотипную задачу. Каждый проект строго индивидуален и требует для себя определенных инструментов. Скажем, если необходимо работать с фото-изображениями, то здесь, очевидно, лидируют Photoshop, GIMP. О Pain Shop Pro, PhotoPaint, PhotoImpact я умолчу, т.к. программы сложно назвать профессиональными. Если необходимо выстраивать графический макет со множеством текста, то здесь больше подходят векторные тулсы Illustrator 9.0 и Fireworks 3. А в остальном дело вкуса, опять же уровень профессионализма пользователей всегда различен, поэтому и программы используются различные. Не сорьтесь коллеги, лучше творите!!!
	stone 17 Jul 2000 8:45 AM
2Skull А почему винда ? На маке намного приятней! А на счёт софта так 1. Photoshop 5.5 + ImageReady 2.0 2. Adobe GoLive 4.0 3. GIMP и всё это только на маке! Если конечно работать а не играться!
	AirAt - airstylermail.ru 24 Jul 2000 7:51 AM
Возможно мое мнение разделят лишь немногие. ЛИчно мне кажется для начинаюшего веб-дизайнера даже ОЧень подойдет Paint Shop Pro. Программа хотя и не обладает большими функциями как остальные программы, но весьма удобна в использовании и более понятна для начинающего. Прежде чем писать ответы нам мою мессагу поюзайте сами эту прогу.
	PhoeniX - phoenixmail.univ.kiev.ua 30 Jul 2000 12:21 AM
Вот почитал я ваши разногласия, и решил подлить масла в огонь: какой так Фотошоп, какой Корел - вот MS Paintbrush - самый рулез!! Люди, не доводите обсуждения до абсурда!.. :)
	Gugiens - Gugiensmai.ru 4 Aug 2000 6:36 PM
Народ, HTML и JS ручками писать надобно. А PhotoShop + ImageReady в качестве обработки да нарезки растра - лучше не придумаешь.
	Димон - dprambler.ru 8 Aug 2000 10:02 PM
Да ваще блин лучше фотошопа 5.5 и имадж реди нихрена нету. Какой там джимп или ещё что-нибудь. У кого руки кудрявые тому уже ничто не поможет.
	Eugene - eugenebsfoptix.com 24 Aug 2000 9:56 PM
А по мне ничего лучше Paint Shop Pro пока не придумали.
	padlik - 001bn.ru 5 Sep 2000 11:38 PM
Если руки из жопы, то пишите письма... По мне Король Дров, очень даже ничего.
	tuke - tukemail.ru 13 Sep 2000 11:47 PM
Я в сторону Adobe. Просто привык, а эксперементировать, приучаться уже нет времени. Я никак брауз старый не успеваю сменить. Работаю графиком не так уж и мало, а про GIMP вообще не слышал. Из Macromedia пользуюсь Flash'ом. А Corel Draw для тех, кто медленно думает, т.е. для дебильных. Он и стоит дешевле...
	A/\/\ 20 Sep 2000 12:07 PM
Сам пользуюст фотошопом. Но если бы найти время с удовольствием бы изучил и все остальные пакеты. Если нужно совершить действие которое допустим в корел в пару кликов a в фотошопе - долго и упорно, то почему бы и не корел? Весь вопрос в задаче и наличии времени
	PY - pyinbox.ru 5 Oct 2000 3:45 PM
kakim obrazom zdes sravnivaut Photoshop and Corel Draw??....... spetsialno dlya lamerov: Photoshop dlya obrabotki rasrovih images..a Corel Draw dlya sozdaniya vectornih izobrajenii... ya kak webdesigner polzyus: Photoshop Corel Draw Director Flash Notepad Dreamweaver Swift3d Swish..inogda.. tak chto gospoda lameri...hvatit ponti kidat... v kajdoi proge est svoi nedostatki i preimyschestva...che bolshe znaesh tem luchshe... best regards PY www.nord.co.il py@inbox.ru 48587729-rabota 73791382-dom
	DeSt 5 Oct 2000 4:38 PM
GIMP таки рулит...зря про него не сказали. Он с Фотошопом не пересекается, другими словами многое в нем можно сделать так, что в Фотошопе часа 2 возится будешь. Причем тоже самое и про Фотошоп сказать можно. Я бы наверное с удовольствием освоила оный Фотошоп - но, лень-матушка :)а К гимпу привыкла и если так случается даже под окнами его использую. Собственно, портировали его на окна не в качестве конкурента Жопу, а именно для тех, кто привык :)