Имитация 3D в Photoshop

Реальный мир и мир трехмерный. В эти утверждения заложен один и тот же смысл, и мы можем сказать, что реальный мир - это трехмерный мир. Все, что нас окружает, имеет свой объем (в той или иной степени он может быть относительным). В отличие от плоских фигур, объемные имеют еще и третье измерение, то есть являются трехмерными, и следовательно, единственный способ реализации объемных тел в графике есть реализация 3D. Для этого существуют специальные пакеты, лучший из которых, несомненно, 3D Studio Max. Но наша песня совсем не о том, а о Photoshop, программе растровой плоской (двухмерной) графики. Зачастую перед нами встает задача, как имитировать реальность, не имея для этого специально созданных программ, либо инструментов. Попрошу обратить внимание именно на слово ИМИТИРОВАТЬ. 3D Studio Max имитирует (копирует определенные признаки реального мира) трехмерность природы. Мы же не можем сделать это напрямую. НО! Имитация доступна и в Photoshop. Правда, имитировать мы будем не природу, а трехмерную графику, ее определенные признаки, делающие 3D работы визуально наиболее реальными либо наоборот, наиболее сюрреальными.

Единственное, что делает 3D графику 3D графикой, является освещение. Да, я не оговорилась. Нет ничего отличающего 2D от 3D, кроме правильно примененного эффекта освещения. Разумеется, под этими понятиями я подразумеваю только работы, прошедшие рендер, то есть переведенные в растр, работы, ИМИТИРУЮЩИЕ 3D. Подробней об этом вы можете прочитать в серии статей о 3D Studio Max, напечатанные в КГ осенью прошлого года (они есть на сайте газеты). То есть, поняв, что представляет собой эффект 3D, можно его имитировать. Воспользуемся школьным примером с урока рисования N-ого класса. У нас есть ваза из глины. Нарисуем ее в 2D измерении. Получился контур, заполненный внутри однородным цветом, весьма условно можно принять это за сосуд. Что же необходимо для того, чтобы передать объем вазы? Посмотрим. А поверхность-то представлена не одним цветом, а целой палитрой цветов! Освещенность в разных местах разная - и как следствие, мы можем видеть объемную фигуру. Заметьте, что игра освещенности в природе и определяет существование 3D, а в графике этот процесс воссоздается в обратном порядке. Вспомните, что в школе менее освещенные места вы обозначали большим количеством штрихов, более - меньшим. В принципе, в компьютерной графике ничего не изменилось. Делать придется то же самое, разве что работы будет гораздо меньше, художественный талант нужен минимальный, а результат эффектней.

Сразу стоит сказать, что создатели Photoshop 5.5 большинство проблем, связанных с реализацией 3D, которые были еще в 4 версии (эх, четвертая версия, море пота и крови... :), решили. Основным орудием в реализации эффекта 3D стали эффекты (слой=> эффекты) и 3D фильтр (фильтры=>эффекты света=> 3D). Также дополнительные плагины, вроде PhotoTools, Eye Candy 3.0, они являются большой подмогой в имитации 3D. Но все же основная часть работы ложится на стандартные инструменты (принципиальная позиция этой серии - отсутствие приемов, основанных на применении дополнительных фильтров, ибо далеко не у всех они есть, хотя в будущем, возможно, я напишу обзор своих любимых наборов фильтров). Но сейчас речь не об этом. Итак, для начала, я предлагаю вам попробовать воссоздать при помощи Photoshop самую что ни на есть простую пуговицу, однако ваша задача заключается не в том, чтобы она выглядела как плоский рисованный объект, а в том, чтобы она была как настоящая, объемная пуговичка.

Пуговица

Итак, создайте новый файл (Файл -> создать, либо сочетание клавиш Ctrl+N). Высоту и ширину изображения установите относительно небольшую, порядка 7 - 10 сантиметров. Это необходимо для того, чтобы ваша имитация 3D была более реалистична. При создании изображений больших размеров, похожих на те, которые были созданы при помощи редакторов трехмерной графики, вам потребуется приложить немало усилий при редактировании созданного вами, при помощи инструментов рисования (карандаша, кисти, аэрографа), то есть придется проделать практически все те операции, которые вы бы делали, создавая свой рисунок на бумаге. Ну а если вы не обладаете достаточным талантом, знаниями в области образования светотеневых переходов, возникновения бликов и много другого либо у вас нет желания, да и необходимости для столь кропотливой работы, то вы можете создавать изображения небольших размеров, не прибегая к таким сложным способам их создания, какие были описаны выше.

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

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

Теперь проведите радиус градиента из центра круга. В итоге у вас должна получиться окружность, центр которой будет окрашен в белый цвет, а черно-бело-черные полосы будут расположены ближе к периметру. Окраска всего круга должна быть равномерной и одинаковой во всех направлениях. Если вы затрудняетесь определить, где центр круга, то вы можете применить сетку (Вид -> показать сетку, либо Ctrl+"). Эта опция PhotoShop разбивает всю площадь вашего полотна на небольшие квадраты, и вы без труда сможете определить, где находится центр вашей окружности.

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

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

Наложите ваш первый слой с ободком на второй в режиме Multiply и склейте эти слои (слои -> слияние вниз, либо сочетание клавиш Ctrl+E).

Для большей эффектности воспользуйтесь фильтром "текстуризация" (фильтр -> текстуратор -> текстуризация). Я использовала следующие настройки: текстура - холст, масштаб - 100 процентов, рельеф - 4, направление вверх.

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

Так как вы создаете трехмерную пуговицу, то есть она обладает каким-то объемом, то она обязательно должна отбрасывать тень. Для этого воспользуйтесь эффектом слоя - отбросить тень (Слой -> Эффекты -> Отбросить тень).

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

Вот и все. Результат вы можете видеть на фотографии. По-моему неплохо, и вполне объемно.

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

Болт

Для начала создайте новый файл с небольшими значениями высоты и ширины (необходимость этого описана выше). Создайте выделение правильной круглой формы, используя инструмент "эллиптическое выделение" (горячая клавиша М) одновременно с нажатыми клавишами Shift+Ctrl.

Так как мы договорились, что имитировать трехмерность будем при помощи переходов, осуществляемых между черным и белым цветами (в приведенных вариантах), то вновь воспользуемся возможностями, предоставляемыми градиентом (клавиша, позволяющая выбирать этот инструмент с клавиатуры G). Закрасьте выделенную область при помощи линейного черно-белого градиента. Модифицируйте ваше выделение таким образом, чтобы его радиус уменьшился примерно на 5 пикселов (Выделение -> Изменить -> Контрастность, величину данного параметра установите равную порядка 5). Сейчас залейте вашу выделенную область тем же градиентом, но в обратном направлении.

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

Создайте выделение прямоугольной формы, расположенное вертикально посередине внутренней области заклепки. А теперь воспользуйтесь возможностями, которые предлагает такая функция Photoshop, как "Уровни". Для этого проделайте следующее: Изображение -> Настройки -> Уровни, либо нажмите сочетание клавиш Ctrl+L. В раскрывшемся меню вам надо изменить значение в среднем окне на значение, лежащее в диапазоне от 0,1 до 0,4. Теперь слегка сместите ваше выделение вправо, воспользовавшись инструментом перемещение, и вновь вызовите меню уровней, только теперь значение, указанное в центральном окне, необходимо заменить на величину порядка 1,5 -2,5, это позволит создать тень в области фаски, созданной при первом использовании уровней.

Для того чтобы винт выглядел наиболее реальным, на него необходимо наложить металлическую текстуру. Вы можете использовать уже готовую, а можете пойти тем путем, который использовался на том варианте, который вы видите на фотографии. Скопируйте ваш фон на новый слой (перейдите в палитру слоев и перетащите слой с фоном к иконке нового слоя). Измените напряжение только что созданного вами слоя на Screen, и если есть необходимость, то подкорректируйте прозрачность. После чего вы можете склеить ваши слои (Слои -> Слияние вниз, либо сочетание клавиш Ctrl+E). Вот и все! Болт готов к применению. Как вы смогли в очередной раз убедиться, ничего сложного в создании объектов, имитирующих трехмерную графику, нет.

И наконец, в завершение темы, я хочу предложить вам убедиться, что имитировать 3D можно, не только работая с круглыми объектами, но и с фигурами других форм. А убеждаться в этом я вам предлагаю на самых обычных трубах.

Трубы, сплошные трубы

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

Создание вашего лабиринта из труб я предлагаю начать с подготовки к основному этапу, а именно с создания градиента, который будет использоваться в дальнейшем при реализации даже самых маленьких трубочек. Выберете инструмент "градиент" и в его палитре щелкните левой клавишею мыши по кнопке редактировать. Далее вам предстоит создать новый градиент. Он будет состоять из двух основных цветов: черного и белого - и из серых дополнительных оттенков. Изображение градиента аналогичного тому, который вам необходимо создать, представлено на рисунке. При его создании использовалось 7 цветовых ограничителей: белый, светло-серый, белый, темно-серый, черный, черный, белый - находящихся в положениях 0, 8, 16, 39, 57, 70, 100 соответственно. Все указатели средних точек были оставлены без изменения.

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

После того, как вы добились желаемого результата, вам следует предать вашему изображению металлический вид. Сделать это можно аналогично тому, как это было сделано при создании болтов и заклепок.

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

На этом объяснение имитации трехмерной графики в графическом редакторе Adobe PhotoShop подошло к концу. Хочется отметить, что при создании работ в этой технике не стоит пренебрегать и другими цветами. Черный и белый цвета, положенные в основу данного объяснения, были выбраны только из-за наглядности. Вы же можете использовать и более сложную палитру, которая не будет ограничиваться только двумя цветами (синим и белым, красным и желтым и пр.). Ведь в действительности, если присмотреться к любому предмету, то на нем всегда будут лежать блики цветов тех предметов, которые окружают рассматриваемый объект. Кроме того, где-нибудь обязательно будет отражен цвет контрастный основному (красный - зеленый, оранжевый - фиолетовый, желтый - синий). Таким образом, если вам необходимо имитировать несложную объемную фигуру, вовсе не обязательно прибегать к пакетам с трехмерными графическими редакторами.