Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Добавление фантастичекой расцветки к 3D тексту

Alex | 19.02.2014 | нет комментариев

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

Этот урок своего рода продолжение урока psd.tutsplus.com. Здесь есть несколько подобных эффектов, но под абсолютно другим углом. В данном уроке мы сфокусируемся на том, как создать 3D текст и эффекта разбрызгивания. Сперва, для создания 3D текста необходимо скачать демо версию программы (демо) Xara 3D6. Вы можете также Adobe Illustrator, но я настоятельно рекомендую воспользоваться Xara. Также скачайте stained metal texture. Лучший способ начать создавать разноцветное изображение – это подобрать правильные цвета. В уроке psd.tutsplus.com цвета фона очень солнечные, поэтому это дает теплые ощущения. В данном уроке мы будем использовать больше холодных тонов. Давайте начнем с открытия нового документа размером 1350х1600 пикселей с разрешением 300 dpi. Создайте новый слой и сделайте краткую подборку цветов. Не выбирайте первый попавшийся цвет, поэкспериментируйте с различными тонами. Часто люди разрушают свои работы, используя плохо выглядевшей фон. Поэтому теперь, когда вы нашли подходящий цвет, возьмите Paint Bucket Tool (G) и залейте новый слой цветом #166a91. Назовите слой «background».

Теперь необходимо придать фону немного жизни. Снова потратьте немного времени, чтобы поискать цвета, попытайтесь получить подходящие холодные тона. То есть найдите темные и светлые оттенки этого синего цвета. Цвета, которые я использовал, показаны ниже. Если вы уже подобрали какой-то темный цвет (или если у вас есть затруднения с цветами, представленными на рисунке – я показал конкретные цвета, которые я использовал), возьмите Brush Tool (B), установите Flow на 5%, Hardness на 0% и очень большой диаметр как на рисунке. Создайте новый слой, назовите его «bg_color» и закрасьте углы большой кистью. Рисуйте каждым цветом на отдельном слое. Поэкспериментируйте с различными точками, главное сделать края темными, а середину светлой. Таким образом вы получите определенный нерациональный градиент, чего мы и добиваемся.

Когда вы закончите с раскрашиванием фона, убедитесь, что все работает так, как надо. Цвета кажутся мне слишком светлыми, поэтому я решил зайти в палитру слоев и добавить корректирующий слой Layer>New adjustment layer>Hue/Saturation над всеми слоями. Затем я немного уменьшил Saturation, изменив немного цвет.

Теперь откройте картинку stained metal texture. Я не знаю, почему она называется металл, мне кажется, она похожа на сталь. В любом случае сталь подходит, вы можете выбрать картинку на ваш вкус. Она должна быть подходящей для ваших нужд. Теперь нажмите Ctrl + T, используйте режим Distort для создания перспективы изображения. Затем нажмите Ctrl + Shift + U для обесцвечивания изображения. Ctrl+клик по иконке слоя для загрузки выделения. Скопируйте выделение с помощью Сtrl + C.

Вернитесь к рабочему документу. Возьмите Pen Tool (P) и нарисуйте фигуру брызг, затем щелкните правой кнопкой по контуру и выберите Make selection. Создайте новый слой над всеми остальными, назовите его «texture». Теперь зайдите в Edit > Paste Into. Текстура вставится в выделение, это означает, что вы можете изменять расположение внутри выделение. Теперь измените Blending Mode на Overlay и Opacity на 70% и вас получиться как на втором рисунке. Теперь создайте новый слой над всеми остальными и назовите его «splatter shading». Возьмите Brush Tool (B) и выберите цвет #125361. Убедитесь, что выбрана мягкая кисть с Hardness 0%, Flow 10%. Теперь загрузите выделение слоя с текстурой (Сtrl+клик по иконке слоя). Посмотрите на третий рисунок и нарисуйте в местах указанных стрелками. Необходимо затемнить вогнутые части брызг для создания выпуклого вида. Эти брызги должны стать не такими плоскими. Ориентируйтесь на 4 и 5 рисунок.

Теперь, когда вы создали тень, перейдем к бликам. Посмотрите на первый рисунок. Я сделал небольшую подготовку (вам это не надо делать). Перед тем как добавить блики, необходимо представить, как они должны выглядеть, если они были бы настоящими. Поэтому я нарисовал несколько линий, чтобы показать вам места, где было бы хорошо добавить блики. Если вы готовы, создайте новый слой над всеми остальными и назовите его «splatter lighting». Загрузите выделение слоя «texture». Теперь с помощью кисти с теми же настройками и более ярким цветом #99e9ea начните рисовать в указанных местах (оставьте немного места от края брызг). Замечание: помните, вам следует делать изменения каждый раз, когда вы чувствуете, что что-то не так, поэтому если вы сделаете слишком много теней или бликов, исправьте это с помощью мягкой Eraser Tool (E).

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

Теперь не изменяйте настроек кисти, только измените размер кисти и цвет на белый. Затем создайте новый слой над всеми остальными и назовите его «lighting overlay». Измените Blending Mode на Overlay и начните рисовать в тех же местах, где мы рисовали тени и блики. Рисуйте только маленькие точки, а не линии.

Продолжите добавлять свет в указанных частях брызг. Помните изменять диаметр, где надо. Вы можете переходить от большого к маленькому для создания красивого места света. Также помогайте себе с помощью Eraser Tool (E) с мягкой кистью с 0% Hardness и 8% Flow. Не торопитесь, когда работаете с деталями.

Далее создайте слой над всеми остальными и назовите его «splatter touch ups», измените Blending Mode на Multiply. Измените настройки кисти. Затем установите Hardness 0%, Flow 5%, а цвет #125361. Теперь посмотрите на первый рисунок и слегка затемните обозначенные области. Затем переключите цвет на белый, создайте новый слой, назовите его «splatter light», затем кистью с теми же настройками добавьте немного больше света на брызги.

Перед тем, как мы перейдем к созданию тени, необходимо понять несколько вещей: 1. Если вы хотите поместить объект в 3D пространство и поместить его на какую-ту поверхность, то необходимо уделить особое внимание тому, где находиться источник света (или источники). 2. Помните, что объекты также отбрасывают тени ниже себя (посмотрите на рисунок тень между коробкой и столом). Это то, что многие дизайнеры забывают (или не знают). 3. Это означает, что иногда один объект может несколько теней в зависимости от источника света и от того, где он расположен. 4. Также держите в голове, что затемненная область (смотри рисунок) объектов всегда темнее остальных частей. 5. Это также относится к осветленной области, она светлее остальных областей освещаемого объекта.

В данном уроке источник света четко не задан, поэтому будем показывать тени, отбрасываемые источником света. Мы будем только рисовать тень ниже брызг (пункт 2 описанный ранее).

Теперь есть только небольшое различие между брызгами с тенью и без нее. Но это нормально сейчас. Далее мы сделаем поверхность более заполненной и получится более четкий эффект тени. Мы практически все сделали, но перед тем, как мы продолжим, посмотрите на 3 рисунок ниже. Возможно, вы удивитесь, почему эти точки без тени? Брызги выглядят как 3D объект, так будто если вы поместите его в 3D программу, то сможете повернуть и посмотреть каждую сторону. Теперь если вы посмотрите на брызги справа, то тень будет там. Но с нашей точки обзора (спереди) это не видно, поэтому мы не будем добавлять ее. Это трудно объяснить, иногда необходимо представить, как это будет выглядеть в реальности.

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

Для размещения 3D текста на поверхности 3D пространства необходимо нарисовать горизонтальную линию. Посмотрите на первый рисунок. Основа – брызги, которые мы создали. В нашем случае горизонтальная линия должна быть немного выше верхнего края брызг. Вы не должны рисовать линии так же, как я, просто попытайтесь представить, где линии должны быть. Это не обязательно в некоторых абстрактных частях для примера: буквы летают в воздухе, так как они могут быть повернуты. Перед тем как мы перейдем к созданию 3D текста, необходимо также понять позицию букв: посмотрите на второй рисунок. Если буквы лежат ниже горизонтальной линии, то помните, что вы смотрите на них сверху, и это способ, которым мы будем создавать текст.

Наконец, действия. Откройте Xara3D 6. И как я говорил ранее, держите вершины букв в поле зрения. Xara легка в использовании, если вы проведете в ней 5 минут, то вы будете знать в ней все. На рисунках ниже я пометил некоторые важные опции, которые были использованы для создания текста. Я рекомендую поэкспериментировать с собственными настройками. Но если вы хотите добиться того же результата, что и у меня, то используйте следующие цвета: • Свет 1: #FBDBFF • Свет 2: #EF72D2 • Свет 3: #E35DB0 Остальные цветовые опции оставьте нетронутыми.

Люди иногда забывают о нескольких вещах в Xara3D 6: • Перед тем, как сохранить ваш проект, зайдите в опции Shadow и отключите тень (мы не хотим возиться с оригинальной тенью Xara, которая выглядит достаточно плохо). • Затем, чтобы сохранить файл в формате читаемом в Photoshop, зайдите в File > Export, выберите формат PNG и сохраните изображение с теми же настройками, как на втором рисунке.

Итак, мы сохранили текст в формате PNG, поэтому он прозрачный. Теперь откройте текст в Photoshop и перетащите его в рабочий документ. Затем нажмите Сtrl + T (Free Transform) и выберите режим Warp. Попытайтесь сделать текст менее прямым и более округлым как круг. Это придаст больше ощущения 3D. Далее обратите внимание на третий рисунок: возьмите Burn Tool (O), установите Range на Midtones, Flow на 25% и закрасьте немного внизу каждой буквы (позже это поможет нам добиться лучшего эффекта тени). После этого скорректируйте некоторые тона текста с помощью Layer > Adjustments > Selective Color (4 и 5 рисунок). Это на ваш личный вкус. Попытайтесь настроить красные цвета, так как эта опция наиболее заметна на розовом тексте.

Теперь посмотрите на первый рисунок. Я пометил некоторые места, которые выглядят достаточно плохо. Этот темный цвет не подходит к иллюстрации. Кроме того, красными стрелками показаны точки, которые Xara каким-то образом разрушила, они выглядят грязно. Мы должны исправить все эти области. Поэтому сначала возьмите Pen Tool (P) и нарисуйте контур области текста, наиболее плохо выглядевшей (помечена красной стрелкой). Загрузите выделение (правый щелчок по контуру и выберите Make Selection). Затем возьмите Clone Stamp Tool (S), обратите внимание на 3 рисунок. Установите те же, что у меня, настройки (также установите Hardness на 0%). Затем кликните по плохо выглядевшим областям. Хорошо бы это сделать на новом слое.

Теперь обратимся к остальным плохо выглядевшим областям. Создайте новый слой над текстовым слоем, вы можете назвать его «text correction» и измените Blending Mode на Overlay. Возьмите Brush Tool (B), измените настройки кисти на Flow 10%, Hardness 0%, и выберите кисть большого диаметра. Теперь выберите цвет #ffbdf3. Далее нажмите Сtrl+клик по иконке текстового слоя, чтобы загрузить выделение. Затем нарисуйте мягкой кистью в областях, которые выглядят слишком темными. Главная задача в том, чтобы выбрать яркий розовый цвет (цвет вашего текста) и покрыть им некоторые недостатки с помощью режима overlay. Вы можете даже обратиться некоторым случайным областям на поверхности текста, это придаст красивое тональное разнообразие тексту.

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

Перейдем к созданию глубины. Эти буквы выглядят хорошо, но пока еще не особенно. Необходимо придать им больше уникальности. Мы собираемся создать иллюстрацию, в которой текст отражает что-то в окружающей среде. И неважно, что отражается реальные объекты или придуманные, когда выглядит хорошо. Поэтому Сtrl+клик по иконке текстового слоя, чтобы загрузить выделение. Затем нажмите Сtrl + Shift + C (скопировать склеенное) и Сtrl + V (Вставить). Теперь у нас есть точно такой же дубликат всего текста. Назовите новый слой «Reflection 1», сделайте еще несколько дубликатов этого слоя и назовите их по порядку «Reflection 1», «Reflection 2», и «Reflection 3». Теперь выберите один из слоев с отражением, нажмите Сtrl + T (Free Transform) и поверните его как на рисунке. Затем загрузите выделение оригинального текстового слоя. Зайдите в Select > Inverse и нажмите delete (помните, выбран трансформированный слой с отражением, прежде чем нажать delete). У вас получится как на рисунке. Затем измените Opacity слоя с отражением на приблизительно 15-20% и установите Blending Mode на Overlay. У вас получиться как на 3 рисунке. Убедитесь, что отражение осталось только на поверхности текста, если оно еще где-то, то воспользуйтесь мягкой стеркой (4 рисунок). Повторите процесс отражения примерно 2-3 раза, пока не покроете весь текст (аккуратно, не сделайте грязным). Ориентируйтесь на 5 рисунок, у вас должно получиться как на нем.

Теперь сделаем эффект блеска и отражения более точным. Возьмите Eraser Tool (E), установите Flow на 5% и Hardness на 0%, затем сотрите немного вокруг блеска каждой буквы (где показано белыми стрелками). Затем выберите Burn Tool (O), установите Range на Midtones и Exposure примерно на 20%, и добавьте немного глубины каждой букве (где указано красными стрелками).

Теперь решим некоторые проблемы освещения. Ясно, что текст наиболее освещен слева вверху (первый рисунок). Вы можете увидеть, что верхняя левая сторона букв светлее, чем правая сторона. Конечно, есть несколько источников света на тексте, поскольку передняя сторона также светлая, но сфокусируемся на самом сильном источнике света. Посмотрите на второй рисунок, он выглядит так, как будто чего-то не хватает. Остальная часть букв имеет красивые блики и тени, но верхушка букв «L» и «R» полностью без затемнения. Возможно, это вызвано светом из Xara. Полагаю, он был слишком низок, чтобы осветить верхушки этих букв. Но это не проблема, мы собираемся исправить это, после чего оно будет выглядеть лучше. Итак, загрузите выделение текстового слоя (третий рисунок). Возьмите Brush Tool с теми же настройками как и раньше (Hardness 0%, Flow около 5%), измените цвет на темно розовый (#79185d). Создайте новый слой над всеми, назовите его «additional shade» и начните закрашивать с правой стороны верхушки этих букв, ориентируйся на третий рисунок. Далее создайте новый слой над всеми, назовите его «additional light» и повторите эти же действия, но на этот раз начните с левой стороны этих букв (посмотрите 4 рисунок). Замечание: всегда помните, что вы можете помочь себе с помощью мягкой стерки, если что-то пойдет не так.

Перейдите в палитру слоев и создайте новый корректирующий слой Layers>New adjustment layer>Gradient Map над всеми остальными слоями. Выберите черно-белый градиент и у вас получиться как на первом рисунке. Затем измените Blending Mode на Soft Light, а Opacity на 70% (второй рисунок). Наконец, загрузите выделение текстового слоя, зайдите в Select > Inverse. Далее перейдите в палитру слоев и выберите маску слой с Gradient Map. После этого возьмите Paint Bucket Tool (G), измените цвет на черный и залейте маску (третий рисунок). И для чего это надо? Теперь мы уверены, что это карта градиента влияет только на текст и не на что вокруг него.

Теперь осталась маленькая деталь, но мне нравится ее добавлять. Измените настройки кисти: Hardness 100%, Flow 100%, затем возьмите Pen Tool (P). Создайте новый слой над всеми остальными, нарисуйте кривую или прямую линию на верхушке каждой буквы как на рисунке. Когда закончите, щелкните правой кнопкой мышки и выберите Stroke Path. Убедитесь, что включена опция Simulate Pressure.

Я полагаю, что самая трудная часть урока – это добавление теней. Прежде всего сделайте стандартную тень между брызгами и буквами. Перед тем, как вы начнете, помните, что создавать тени того же цвета, что и поверхность, но другого оттенка. Поскольку поверхность брызг светло голубого цвета, то для тени выберите темно синий цвет (например, #092330). Теперь возьмите Brush Tool (B), не забудьте установить Hardness на 0%, а остальные опции как показано ниже. Создайте новый слой под текстовым слоем и назовите его «text shadow». Начните с кисти маленького диаметра и добавьте тонкую линию тени точно под буквами. Сделайте диаметр кисти больше и закрасьте пустые области между буквами. Замечание: всегда помогайте себе мягкой стеркой!

Мы переходим к последней части урока. Я обычно экспериментирую с некоторыми общими корректировками, когда я собираюсь заканчивать. Поэтому перейдите в палитру слоев, создайте новый корректирующий слой Layers>New adjustment layer>Gradient Map, выберите «Violet, Orange» и нажмите OK. Затем измените Blending Mode на Soft light и Opacity приблизительно до 20% (это придаст немного больше теплоты). Далее повторите этот процесс, но на этот раз создайте Gradient Map от темно синего (зеленоватый черный) #202930 к светлому цвету (близкому к серому) #31505b. Установите Blending Mode на Soft Light и Opacity около 80%. Это повысить цветность и контрастность. Текст все еще выглядит слишком холодным для меня, поэтому я решил создать еще один Gradient Map тем же способом. На этот раз я использовал цвета от #2e2111 к #e2be84. Коричневатые, желтоватые цвета придают теплоту. И снова измените Blending Mode на Soft Light и Opacity около 30%. И наконец, вы можете добавить корректирующий слой Curves, если хотите. Это не обязательно, но я думаю, темные и контрастные тона придают красивый вид. Вы можете также поэкспериментировать с красным каналом в Curves для придания тексту более желаемого вида.

После этого я решил переместить некоторые светлые части (помечены белыми стрелками). Я также скорректировал небольшую тень, поскольку она выглядела слишком темной и непрозрачной. Также как вы можете заметить, я уменьшил opacity тени между текстом и брызгами. Это лишь потому, что кривые сделали ее немного слишком темной. Будьте готовы к любым корректировкам, после настройки цветов и контрастности иногда может захотеться изменить что-то. Это хорошо, по-новому взглянуть на изображение и поработать с деталями, если они не совсем правильны.

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

Добавление фантастичекой расцветки к 3D тексту

АВТОРСКИЕ ПРАВА
Источник: alldes.net
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
ОБЪЯВЛЕНИЯ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB