Навигация

Партнеры


Комментариев: 0
 (голосов: 1)

CSS дизайн. Часть 22.


Что там в глубине
Трехмерное пространство на двумерной плоскости

Игра ума и ассоциативные образы - именно так у Майкла Пика рождаются идеи. В данном случае он начал с размышлений об общественных парках в Нью-Йорке и отснял несколько фотографий. Обрабатывая их в Adobe Photoshop, он вдруг заметил, что получающийся результат напоминает муравейник. Это навело его на мысль изобразить не традиционный наземный парк, а некую подземную сцену.
Приняв такое решение, он стал думать о том, что еще можно найти под землей. Нахлынувший поток образов вдохновил его на создание страшноватого, странного, но не лишенного своеобразной красоты дизайна «Что там в глубине».

Создание трехмерной сцены


В большинстве веб-страниц упор делается на том, чтобы представить информацию красиво и в удобной для работы форме. Хотя от дизайнеров часто требуют новых и свежих идей, следует признать, что значительная доля сайтов по необходимости организуют графику и текст на двумерной плоскости.
Есть и исключения. На очень ранней стадии развития Всемирной паутины появилась технология VRML (Virtual Reality Modeling Language - язык моделирования
виртуальной реальности). Нанося отдельные точки в моделируемом окружении, разработчик мог создать трехмерную модель для размещения на веб-странице.
Для просмотра таких моделей посетителю был необходим подключаемый VRML-модуль.
Чуть позже компания Apple разработала программу QuickTime VR, которая позволяла «сшивать» последовательность панорамных фотографий. Для просмотра результата на веб-странице тоже был необходим подключаемый модуль.
Конечно, трехмерные анимации и игры можно просматривать на веб-странице, если это поддерживается самим браузером или подключаемым к нему модулем, как, например, Flash, ShockWave и модули для других аудио-, видео- и смежных форматов.
Но лишь изредка нам выпадает удача исследовать на глубину «родную» для Web среду — безо всяких инструментов для поддержки виртуальной реальности и
прочих специальных программ. Не ограничивая свое воображение двумерной областью, мы можем, как Пик, копнуть поглубже и создать более реалистичную
карт - фотоину.
Моделирование трехмерной среды - это обширная область, в которой ведутся сложные научные исследования. Неплохой отправной точкой для изучения этой темы может стать разработка компьютерных игр.
Понятно, что по мере того, как игры становятся все более реалистичными и зрительно убедительными, знакомство с принципами их проектирования может многому научить дизайнера.

Как устроены детали


Выдающаяся графика работы «Что там в глубине» так сильно поражает зрителя благодаря проработке деталей. В темных глубинах мы видим объекты, которым
положено находиться под землей, хотя мы не сразу понимаем, что именно подземелье нам и показывают.
Одна из обязанностей дизайнера - увидеть мир настолько детально, чтобы адекватно воспроизвести его в своей работе или, как в случае «Что там в глубине», создать ощущение окружающей обстановки.
Значит, вы должны научиться понимать детали, а не только видеть их. Входя в комнату, вы сразу же замечаете очевидное: стены, окна (или их отсутствие) и
мебель.
Но как насчет текстуры? Трещины в дереве, отслоившаяся краска, выкрошившаяся штукатурка, треснутое или выцветшее стекло? А много ли внимания вы обращаете на свет и тень? Что можно сказать об общем впечатлении от комнаты? Она мрачная? Светлая? Просторная? Тесная? Отвечая на эти вопросы, вы раскроете не сразу бросающиеся в глаза детали, благодаря которым и возникает ощущение реальности.
В дизайне «Что там в глубине» эти детали видны повсюду. В частности, это муравьи, которые и вдохновили автора первоначально.

Создание ощущения реальности


Интересно отметить, что для создания реалистичности вовсе не нужна отографическая точность. Образы, использованные в работе «Что там в глубине», не назовешь фотореалистичными, тем не менее ощущение реальности изображенного очень сильно.
Нужно, чтобы сама графика производила впечатление реальности изображенного. Пытаясь создать изображения, которые не просто копируют природу, а пробуждают мысленные ассоциации, имейте в виду следующее: + обращайте повышенное внимание на края. Эта тема трудно дается начинающим художникам на занятиях по рисованию человеческих фигур. Сначала пытаются просто нарисовать линию, к примеру, женской руки. Но очень быстро выясняется, что не все так просто. Обработка краев подчеркивает объемность очертаний, игру света и тени, различия между позитивным и негативным пространством. Именно это и воспринимается нами как линия;
не забывайте о форме. Оглядитесь вокруг и найдите предмет, любой предмет. Тщательно осмотрите и определите его форму. В большинстве объектов вы обнаружите множество разных форм, это очень важно. Нельзя сказать, что чашка - это всего лишь
окружность. Конечно, в ней есть и окружности, и дуги. Но могут быть и другие формы, которые отличают ее от других чашек;
• текстура изображения создает реалистичное представление о качестве предметов. Чтобы нарисовать почву в работе «Что там в глубине», Пик сделал фотографию будки управления светофором на Хьюстонстрит в Нью-Йорке. Интересно, что текстура будки -
совершенно, казалось бы, не относящегося к делу предмета, - наводит на мысли о почве;
• глубина - вот что дает настоящее ощущение объемности, даже в двумерном окружении. В геометрии ось х определяет горизонтальное, а ось у - вертикальное направление. В третьем измерении проходит ось z. Именно с осью z и связана глубина. Восприятие глубины в двумерном дизайне определяется светом и тенью краев. На рис. видно, что более темные области выглядят как углубления на поверхности земли;
+ важна и имитация тяжести. В двумерном дизайне этот эффект достигается за счет зрительной тяжеловесности образов. К моделируемому окружению применимы те же принципы, но необходимо еще какое-то визуальное указание на то, что предмет
склоняется под своей тяжестью к низшей точки изображения. Самая темная, окрашенная сплошным цветом область в дизайне «Что там в глубине» находится в нижней части подземной сцены, это усугубляет ощущение тяготения. При создании представления трехмерных объектов на двумерной странице комбинация описанных выше средств создает иллюзию массы. В контексте визуального дизайна массу можно описать как характерный признак трехмерного объекта, призванный создать впечатление, будто он выделяется на фоне окружающего его пространства. Примите
во внимание следующие принципы:
• иллюзия твердости создается за счет цвета и текстуры;
• для создания иллюзии объемности важны длина, ширина и глубина.
Масса - это результат сочетания подобных визуальных элементов, в результате чего объект приобретает реалистичные черты.
И, наконец, если взять какой-то природный объект и поместить его в моделированную среду, то эффект реалистичности может усилиться. В данном случае образ крота вселяет в зрителя жутковатое чувство достоверности остальной части дизайна.

Работа с уровнями


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

Нереалистичные образы в смоделированном пространстве

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

Уроки трехмерности

Вообще говоря, именно экспериментальная природа сайта CSS Zen Garden позволила исследовать возможности моделирования подземного пространства. Только обладая изобретательным умом и вниманием к деталям Майкла Пика, можно было создать такой
уникальный дизайн.
CS5 xnerfnehrf jnckfbdfkfcm jn plfybz

Добавить статью в:
0
Дата: 1-11-2010, 23:57, Добавил: singarella, Раздел: ---



Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.



Поиск

***

Онлайн
Всего на сайте: 17
Гостей: 9
Пользователи: tatzsher
Роботы: Yahoo Bot, Google Bot, crawl Bot, MSN Bot, Google Bot, spider Bot, Google Bot

20-ка посетителей: paigeis4, tatzsher, HamlarEl, Lottosoro, Ivanhek, edwinlz16, Lukarhamn, serenasm16, GivessDaxy, PorganJeP, annabellefq16, Servicehpp, gloriauc4, coleenve16, calvinrq60, DLMagillTob, alyceah4, AgnesAccony, LutherHet, VitaliyFrabe


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги