Инструментарий Web-мастера

 

Павел Гродек ейчас все больше людей начинают создавать свои Web-страницы. Не исключение и я, и должен признаться, что в попытках найти подходящее ПО для этой работы я очень сильно разочаровался в людях. Рассказ о поиске подходящего HTML-редактора достоин отдельного разговора, скажу только, что до сих пор не нашел инструмента, который бы удовлетворил меня полностью (просмотрев более 50 разных программ, я остановился на редакторе Multi-Edit, но даже он недостаточно удобен).

Рис.1

Рис. 1 - 4. Пошаговое создание “живой” кнопки для Web-страницы в графическом редакторе Photo>Graphics

 

А вот вопрос графического оформления, кажется, удастся решить почти целиком. И, как это ни удивительно, ни один из “грандов” (Corel Draw, Adobe Photoshop, Fractal Design Painter) не оказался для этого лучшим. В очередной раз малоизвестная фирма, движимая стремлением привлечь думающих людей, смогла создать не свою вариацию на классическую тему, а совершенно новую технологию, до которой “грандам” довольно далеко.

Рис.2

 

Начнем с очевидного. Существует два типа графических редакторов: векторные (Corel Draw и ему подобные) и растровые (Adobe Photoshop, Corel Photo Paint, Fractal Design Painter). Первые дают свободу манипуляции объектами, из которых состоит рисунок, а вторые  -  мощные средства для обработки полутоновой графики  -  фильтры, маски и т. п. В последнее время фирмы пытаются совместить лучшие качества этих подходов.  Например, фирма Fractal Design выпустила продукт Expression, с помощью которого можно виртуальной кистью наносить векторные мазки (с возможностью их изменения в дальнейшем), составленные из растровых изображений, а в Photoshop 4.0 добавлены слои для ретуширования, хотя и с очень бедными функциями.

 

Рис.3

Увы, достичь полной гармонии и единства подхода, на мой взгляд, не удается никому. У чисто векторных инструментов слишком мало возможностей, смягчить часть рисунка или применить к растровой картинке сложное преобразование в них нельзя. Растровые (например, так любимый нашими художниками Photoshop) пугают нормального человека своим сходством с реальным миром  -  в отличие от других компьютерных программ они не позволяют вернуться и исправить сделанную в начале работы ошибку. Даже наличие функции Undo в Corel Photo Paint не дает нужной свободы  -  ведь рано или поздно изображение записывается, и в этот момент оно превращается в застывшую плоскость из цветных точек, не содержащую отныне ни одного объекта, которые мы с таким трудом на нее нанесли.

 

Рис.4

Разными путями решают эту проблему авторы ПО. Традиционным стал подход с использованием слоев. Вместо одной плоскости с точками появляется несколько, расположенных одна над другой. Это, конечно, лучше, чем исходный вариант, но ненамного  -  все равно в пределах каждой плоскости объектов нет и редактирование сводится к уничтожению старого и рисованию заново, как на настоящем холсте.

 

Еще один путь  -  комбинированные методы, как в Fractal Design Expression. Неплохо, но, к сожалению, вместе с достоинствами унаследованы и все недостатки обоих подходов. Полученный рисунок не обрабатывается фильтрами, а для рисования нужно быть настоящим художником, поскольку все действия подчинены одной метафоре  -  мазку кисти.

 

А что же нужно для World Wide Web? Страницу очень украшают растровые рисунки и фотографии, но большая часть графики  -  разного рода кнопки, надписи, символы и т. п. По сути эта графика  -  векторная, но для того чтобы она выглядела привлекательно, нужно использовать достаточно сложные растровые преобразования. Обычно для этого берут растровые инструменты и долго-долго вручную создают все, что нужно.

 

Что же за альтернативу смогла предложить не слишком большая канадская фирма TrueSpectra? И почему именно ее продукт я считаю лучшим? Основное понятие в программе Photo>Graphics, основанной на технологии ColorWave, это объект. Каждый объект  -  это пара: регион и эффект. К примеру, регионом может быть прямоугольник,текст или созданное отдельно изображение. А эффект (например, смягчение, заливка градиентом, изменение контраста или цвета, наложение рисунка) действует только в пределах региона. На самом деле все несколько сложнее, поскольку регионы могут быть разной “интенсивности” и т. п., но по сути на этом описание основных понятий закончено.

 

Каждый объект  -  “живой”, при любом перемещении или изменении свойств он тут же изменяет свой вид. А главное  -  все объекты взаимодействуют. Если в том же Photoshop слои просто заслоняют друг друга, то в этой программе объекты, лежащие выше, накладывают свои эффекты на расположенные ниже. К примеру, если создать объект типа “текст” с эффектом “размывание”, то лежащий под ним объект “прямоугольник” с эффектом “растровая картинка” будет размыт по контуру текста, и если подвинуть верхний объект, то размывание произойдет в другом месте (во время редактирования пересчет изображения на экране происходит в фоновом режиме и не мешает работе).

 

Пожалуй, лучше всего показать работу Photo>Graphics на примере. Давайте создадим “живую” кнопку для Web-страницы. На рис. 1 показано, как создается объект,  -  выбрав режим “создание”, отмечаем тип региона “прямоугольник” и эффект “заливка растровым изображением”. Выбираем нужную текстуру (песок)  -  и фон кнопки готов. Если бы мы хотели получить одноцветную кнопку, можно было бы выбрать эффект “заливка цветом”.

 

Дальше нужно получить объемную кнопку. Дублируем исходный объект и меняем в дубле тип эффекта на “кнопка”. Независимо от того, что было подложкой, теперь мы видим выпуклую кнопку из нужного материала (рис. 2). Нанесем на нее текст. Добавим к нему светлый ореол. Для этого создадим объект с “пользовательским регионом”, а в качестве этого региона (для него открывается отдельное окно) поставим копию нашего текстового объекта, накрытую большим прямоугольником с эффектом размывания. В качестве эффекта для пользовательского региона поставим “повышение яркости”.

 

Получилась довольно симпатичная кнопка (рис. 3), удобная в работе; если понадобится сделать много таких с разными надписями, достаточно изменить текст в двух объектах, и все растровые эффекты, например размывание, будут автоматически пересчитаны.

 

Все могущество настоящей объектной технологии проявляется в легкости изменения объектов. Например, заменим объект “текст” на еще один пользовательский регион с нашим текстом, а в качестве эффекта поставим что-нибудь красивое, например овал с градиентом. Текст теперь выглядит так, как будто внутри него горит зеленая лампочка, и при этом любой элемент кнопки доступен для изменений (рис. 4).

 

Если в Photoshop попытаться сделать нечто подобное и при этом не одну кнопку, а несколько, то как минимум придется создавать сценарий и редактировать его, чтобы ввести новый текст на кнопке. И при этом “покрутить” параметры, чтобы посмотреть, как будет выглядеть кнопка, если сделать ее чуть темнее, чуть более размытой или “зашумленной”, практически невозможно. При создании такого рисунка в растровом редакторе применить размывание, изменить яркость и контрастность нельзя  -  и ничего похожего получить вообще не удастся.

Рис. 5. Бета-версия Photo>Graphics для Windows 95

 

Среди других достоинств ColorWave  -  очень маленький размер файлов, ведь в них хранятся не десятки мегабайт отдельных точек, а правила, по которым эти точки надо преобразовывать. Кроме того, результат абсолютно не зависит от разрешения. Если сегодня вам нужно вывести результат на струйный принтер с разрешением 300 точек на дюйм, вы сделаете это быстро и легко. А если завтра из того же файла получится плакат размером 20x10 метров, это опять-таки не вызовет проблем, ведь во время редактирования файла отдельные точки изображения вообще не использовались, задавались только области действия эффекта, и эти области будут пересчитаны для нужного разрешения. Единственное, что, возможно, понадобится сделать при большом увеличении разрешения,  -  это заменить растровые изображения, которые использовались при подготовке рисунка, на более детальные, но сам рисунок это никак не затронет.

 

После такого экскурса в технологию пора подробнее рассказать о самой программе. Итак, Photo>Graphics фирмы TrueSpectra изначально была разработана для операционной системы OS/2, так как в этой ОС отлично реализована поддержка многопотокового выполнения (если пользователь во время перетаскивания объекта на несколько мгновений задержит мышь в одной точке, фоновый процесс “на лету” пересчитает и покажет ему текущее изменение).

 

В самой свежей версии (Photo>Graphics Pro 2.0) имеется поддержка TWAIN-сканеров, есть возможность писать сценарии на языке REXX (к примеру, все кнопки для web-узла можно генерировать автоматически на базе основной модели), а технология ColorWave реализована не только в самой программе, но и в компоненте OpenDoc, умеющем показывать изображения, созданные в Photo>Graphics.

 

Минимальные требования к системе весьма невысоки: процессор 486DX, 8 Мб ОЗУ и достаточное количество места на жестком диске для файла подкачки. В коробке кроме самого компакт-диска находятся три брошюры (руководство пользователя, рассказывающее о работе с программой, обучающее руководство, показывающее методы и приемы получения разнообразных видов изображений, и руководство по установке).

 

А для тех, кто не хочет работать в OS/2, TrueSpectra сейчас разрабатывает Photo>Graphics для Windows 95 и Windows NT (рис. 5). Первая бета-версия уже доступна на Web-узле фирмы (http:// www.truespectra.com). Возможен выпуск и версий для других платформ (несколько видов Unix, MacOS, BeOS), а в следующей версии технологии Co-lorWave планируется резко увеличить количество эффектов и добавить много новых функций.

 

Павел Гродек

Версия для печати