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

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

Урок 28. А что с изображениями?

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

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

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

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

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

К слову, в операционной системе MacOS X элементы интерфейсов отрисованы так, что свет падает сверху. Например, это проявляется в том, что тень от окон падает вниз и видна по бокам. Кнопки там также не такие: они «гелевые», не отбрасывают тени, а имеют специфическое освещение. В интерфейсе Windows Vista тени также падают не под углом.

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

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

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

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

Не используйте для реалистичного воспроизведения тени эффект «Падающая тень» («Drop Shadow»), которую предоставляют все редакторы растровой графики и большинство векторных. Дело в том, что этот инструмент создает не тень, а размытую и обесцвеченную копию объекта, а тень — это та форма, которую дает объект, задерживая свет. Размытие по всему периметру тени инструмента «Падающая тень» одинаково, чего никогда не бывает в реальной жизни. Наконец, тень при использовании этого инструмента почти однородна, что тоже далеко от реальности. Разберемся в структуре тени.

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

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

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

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

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

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

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

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

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

Все это — признаки передачи трехмерного изображения.

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

Программы моделирования трехмерной графики (3D Studio Max, 3D Canvas, Bryce и другие) позволяют «вращать» на экране объекты, приближать их и отдалять, двигать в разных направлениях и по-разному освещать. На веб-страницах это встречается достаточно редко, и имитация трехмерности производится средствами двухмерной графики (неважно, в чем подготовлено изображение, но результат сохраняется в форматах двухмерной графики, например, в JPG).

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

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

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

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

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