Библиотека программиста

Все, что необходимо начинающему и опытному программисту

Урок 27. О правилах перспективы

Осмысленный подход к дизайну

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

Каждая из страниц этих разделов поражает своей фантазией. Например, в разделе «ИЖ для миллионера с чувством юмора» вы можете послушать музыку, издаваемую автомобилем: для этого нарисован специальный звучащий флэш-ролик. Или подсчитать, сколько банкнот разного достоинства разных стран помещается в кузов «ИЖа» («Покупая телеканал или нефтяную вышку, небольшую банановую страну или большую скульптуру Церетели, все мы часто сталкиваемся с проблемой транспортировки больших количеств наличности»).
Или посмотреть, как можно использовать «ИЖ» в качестве джакузи.

«ИЖ для девушки за рулем» — это полноценный женский журнал, где вы найдете все: гороскопы («Что стоит ждать от своей машины»), письма читательниц («Оказалось, он успел вытащить у меня из сумочки ключи от «ИЖа» и угнал машину. А ведь в ней лежали новые кроссовки!»), советы, что надеть, чтобы было комфортно за рулем, и как вернуть себе удовольствие от вождения, и массу других необходимых вещей. Для создания этого раздела применена журнальная верстка, имитирующая стиль «Cool Girl», «Лизы» или «Oops!..».

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

А раздел «ИЖ для студента технического вуза» позволит пройти тест «Готов ли ты ко встрече с представителями ГИБДД», узнать свой IQ с помощью задачника и узнать, в чем «ИЖ» превосходит паровоз, «Роллс- Ройс» и самолет.

Рисунок, живопись, композиция

Сайт сделан так, что покидать его не хочется, пока не изучишь все страницы по два раза. И тем не менее он сделан не только ради развлечения. Кроме того что на каждой из перечисленных страниц если и есть сведения об автомобиле «ИЖ», то они максимально подробны и точны (а в силу того, что преподнесены с юмором, и хорошо запоминаются), на сайте есть много совершенно серьезных страниц, объединенных разделы «Модельный ряд», «Магазин», «Техобслуживание», «Автоклуб» и «О компании». Некоторое время назад заказчики решили, что сайт должен стать более строгим, и теперь с главной страницы нельзя попасть на эти разделы.

Но в описании сайта можно обнаружить ссылку «Ностальгия», которая ведет на страницу www.izh-auto.ru/home, где сохранены все веселые разделы сайта.
Остается добавить, что подобных сайтов, которые условно можно назвать сайтами, построенными на идее, в интернете (по крайней мере, российском) очень мало. Кроме Студии Лебедева из известных дизайнеров такими сайтами занимается Владимир Липка, перечень работ которого можно найти на сайте www.lipka.ru.

Есть три варианта: делать сайт с графикой, делать сайт с активным использованием графики в качестве интерфейсных элементов и иллюстраций (в этом случае основа дизайна — HTML и CSS) или делать сайт вообще без графики. Достойных примеров последнего во всем интернете не так уж и много: сайты без графики были распространены на заре веб-строительства, но они не являлись образцами дизайна, а были порождены суровой реальностью: функциональными ограничениями языка HTML и браузеров. Сейчас такие сайты создаются либо ради эксперимента, либо от неумения работать с графикой (такие сайты в этой книге не рассматриваются).

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

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

Графику в браузере отключают, и часто. Многие так делают для экономии трафика, а многие — для ускорения загрузки страницы. Поэтому всегда нужно следить за тем, чтобы при любых мыслимых условиях просмотра сайта посетитель мог прочитать текст, использовать меню и распознать, где находится логотип и другие важные элементы.

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

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

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

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

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

Шаг первый
На достаточно большой плоскости расстилаем белую бумагу или ткань, кладем увесистую книгу и раскрываем ее примерно на середине. Это нужно для соблюдения пропорций и отслеживания правильного освещения. Хорошо бы, чтобы освещение было постоянным: работа не на 10 минут, и естественное освещение может меняться каждый час. Можно установить достаточно сильную лампу, чтобы это освещение не «перебивалось» естественным.

Шаг второй
Открываем графический редактор (в данном случае использовался Adobe Photoshop CS) и создаем новый файл. С помощью фигур (инструмент Shape) рисуем несколько прямоугольников, которым с помощью инструментов свободного преобразования
(функция Distort — Искажение) придаются нужные формы и поворот. Это основа для будущей обложки.

Шаг третий
Создаем страницы. Для этого нужно нарисовать несколько прямоугольных фигур: верхние плоскости обеих страниц разворота, боковые и передние обрезы наборов страниц. Немного тонируем обрезы, чтобы цвет не был однородным (цвет не лежит однородно ни на каком объекте, если, конечно, объект не освещен равномерно со всех сторон). Сложная форма плоскостей достигается несколькими действиями: создание вспомогательных фигур (эллипсов), слитие их с основными плоскостями, вырезание округлых областей с помощью инструментов выделения, клавиши Backspace и элементарного ластика (Eraser). Скосы формируются либо ластиком, либо также выделением и удалением ненужных областей. Поместим на левую страницу также условный текст, исказив его так, чтобы он лежал по форме страницы.

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

Шаг пятый
Вместо пластиковых плоскостей по бокам у нас должны получиться стопки страниц. Обычные деформированные линии по обрезам.

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

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

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

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

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

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

Это основные правила перспективы.

<< Назад         В начало         Далее >>

Библиотека программиста. 2009.
Администратор: admin@programmer-lib.ru