§7. «Визуал»

Этот термин подразумевает обычно нечто среднее между абстрактным декоративным украшением, конкретной тематической иллюстрацией и эмблемой (логотипом).

Небогатые организации могут месяцами не менять «визуал» на первой странице. Тогда он содержит более или менее конкретный намек на профиль деятельности фирмы. Это может быть метафорическая иллюстрация или рекламный лозунг.

Более солидные организации периодически меняют «визуал» (при сохранении общего стиля сайта) в сочетании с относящимся к нему текстом (новости, обзоры, другая информация). Внутри сайта «визуал» обычно выполняет роль призаголовочной графики. Он может быть сквозным, повторяющимся на всех страницах и входящим в графический блок логотипа или навигации. В этом случае изменение «визуала» влечет за собой пересмотр оформления всего сайта. Хотя чаще «визуалы» часто выполняют лишь «фоновую» вспомогательную функцию, тем не менее обычно определяющими при выборе «визуала» все-таки является тема изображения. При этом, в отличие от конкретных деловых иллюстраций, выбор темы для «визуала» может быть достаточно свободным, провоцируя некоторое интеллектуальное усилие зрителя – посетителя сайта. По этому признаку «визуал» может быть отнесен скорее к классу логотипов, нежели к иллюстративным материалам.

Основным эстетическим требованием к «визуалу» является текстурный контраст с остальным оформлением. Для профессионально оформленных плоскоцветных страниц с четкой геометрической текстурой шрифта естественным становится использование в качестве «визуала» фотографических изображений с градиентами прозрачности, размывкой, сдвигом с границами неопределенной геометрической формы. Использование псевдотрехмерных изображений и анимации зачастую является признаком неумения работать с фотографическими изображениями.

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

§8. Эффекты

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

Разрушая плоскость и ритм страницы, трехмерная графика задействует глубинные слои восприятия, ответственные за распознавание формы и пространственного расположения объемов и держит зрителя в постоянном напряжении.

Относительная легкость создания таких эффектов приводит к тому, что в трехмерной графике отношение числа создателей к числу зрителей выше, чем в дизайне или компьютерной графике в целом.

Компьютерные изображения трехмерных объектов – дешевый и практически неисчерпаемый источник специальных текстур.

Если фототекстуры изобилуют плавными переходами цветов и имеют размытые цветовые границы («глубина резкости» у фотоаппарата), то типичные компьютерные трехмерные текстуры как раз не обладают такой «расфокусированностью» изображения слишком близких и слишком далеких объектов. В этом их главный недостаток – напрочь отсутствует естественная «мягкость» изображений. Впрочем, этот недостаток, видимо, будет преодолеваться по мере усложнения компьютерных программ. Тем не менее, пока профессиональный дизайн тяготеет к противоположной тенденции – использованию плоскоцветных форм, рукотворной аморфности и живописным текстурам.

Кроме того, важно помнить, что трехмерные изображения не дают осмысленного контраста с двумерным текстом. Мера контраста здесь слишком велика. Композиция «разваливается».

Барельеф. Более скромная и простая по исполнению имитация трехмерности в виде бликов и падающих теней у букв, заголовков, кнопок, навигационных панелей и т.д.

Барельеф не противоречит двумерности страницы, ибо тени объектов падают именно на страницу, а объемные элементы «выдавливаются» именно из плоскости страницы. Такая трехмерность составляет осмысленно контрастирующую пару с плоским текстом и может композиционно с ним сочетаться.

Поэтому барельефные эффекты можно встретить и на профессиональных страницах.

Нетекстурирующие эффекты (фильтры). Известно, что текстурный анализ наиболее плодотворен в изучении графического дизайна.

Поэтому можно отметить две разновидности растровых фильтров [7]:

• текстурирующие – изменяющие текстуру изображения;

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

К последнему классу относятся все инструменты преобразования цвета (изменение яркости, насыщенности, смещение цветового баланса) и обрезка и обтравка фона за изображением переднего плана.

Для нескольких изображений – это различные режимы положения их друг на друге с использованием режима частичной прозрачности. Текстура изображения при этом в основном не меняется.

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

Исходное изображение часто бывает чрезмерно ярким и насыщенным, поэтому наиболее часто задача дизайнера – снижение заметности изображения.

Оно достигается следующими способами:

• полная десатурация – перевод всех цветов изображения в оттенки серого;

• редукция изображения к монохромной шкале, отличной от черно-белой;

• сдвиг цветового баланса или простая замена некоторых цветов при сохранении насыщенности (не только для изменения заметности, но и для подгонки элемента в основной цветовой гамме композиции).

Изменение прозрачности (изменение видимости фона под изображением) применяется достаточно часто: чем более прозрачно, «призрачно» изображение, тем оно и «периферийнее», тем менее его ранг в композиции.

Эти же инструменты (регулировка цвета и насыщенности) используются профессиональными дизайнерами для «поднятия» некачественных изображений – устранения дефектов съемки и сканирования.

Текстурирующие эффекты.

Размывка, естественная для фотографии, может даже превратить в подобие фотографии поскоцветную картинку. Понижая «глубину резкости», размывка создает впечатление «расфокусированности» фотографии. Ее применение также позволяет упорядочить иерархические взаимоотношения элементов.

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

Направленная размывка, подобная размывке на фотографии быстро двигающихся объектов, настраивается фильтрами Motion Bcur и Wind в Photoshop.Она может придавать динамику статическим объектам или подчеркивать динамичность движущихся.

Тени также подразумевают использование размывки. Эффекты, обеспечивающие отбрасывание тени, фактически определяют появление на странице 3-го измерения. Они наиболее согласуются с плоскоцветными объектами и текстовыми заголовками.

Искажения. Второй класс текстурирующих эффектов – фильтры искажений в кривом зеркале, на поверхности воды и т.д. (Ripple, Smcar, Spherize, Pinch). Они могут применяться для создания трехмерных эффектов, могут быть достаточно интересны, а порой просто бессмысленны.

Плоскоцветные фильтры.Третий класс – фильтры, переводящие фототекстуры в плоскоцветные. Фильтры Cutout, Fresco заполняют изображения плоскоцветными областями. Фильтры Find Edges, Trace Contour выделяют и визуализируют контуры объектов. Но этот эффект похоже трассировка в векторном графическом редакторе.

Эффекты, зависящие от разрешения.Фильтр Diffuse при высоком разрешении (мелкие пиксели) похож на размывку, при меньшем разрешении (видны отдельные пиксели) перемешивание пикселов дает зернистую структуру.

Аналогична работа фильтра Add Noise. Как диффузный фильтр иногда работает сохранение файла в CIF формате.

Влияние на размер файла.Применение растровых эффектов к плоскоцветной («векторной») графике всегда приводит к увеличению размера файла. Однако применение таких эффектов к фотографическим растровым по природе изображениям не только обеспечивает лучшую сжимаемость в формате JPEG, но и снижает заметность неизбежных при таком сжатии искажений. По существу, применение растровых эффектов ведет к необратимой потере информации. Этот же процесс происходит и при сжатии.