Как сделать текст как в звездных войнах в фотошопе
В этом уроке я покажу вам, как создать звёздный 3D текст со световыми эффектами в программе Photoshop. Мы применим различные техники, такие как, совмещение, применение корректирующих слоёв, включая различные инструменты, такие как, кисть, ластик, а также инструменты свободной трансформации.
Примечание: Данный урок выполнен в программе Photoshop CS6 – поэтому, некоторые скриншоты могут слегка отличаться от предыдущих версий программы. Некоторые кисти имеются только в данной версии программы Photoshop CS6.
ОК. Давайте приступим!
Итоговый результат
Шаг 1
Создайте новый документ со следующими размерами 1200px * 620px, цвет заднего фона чёрный. Загрузите исходное изображение “Звёздное небо” в программе Photoshop. Выделите часть изображения, как показано на скриншоте ниже:
Выборочный шаг: Примените следующий фильтр Масляная краска (Oil Paint), идём Фильтр – Масляная краска (Filter >> Oil Paint), данный фильтр имеется только в версии Adobe CS6 или выше:
Далее, с помощью большого мягкого Ластика (eraser), создайте затенение на краях звёздного неба, как показано на скриншоте ниже:
Ещё раз откройте исходное изображение “Звёздное небо” и с помощью инструмента Лассо (Lasso Tool) с растушёвкой 40px, создайте активное выделение, как показано на скриншоте ниже:
Скопируйте / вклейте выделенную часть изображения на наш рабочий документ. Расположите данную часть со звёздами в нижнем правом углу нашей сцены, далее, поменяйте режим наложения для данного слоя с выделенными звёздами на Осветление (Screen), а также уменьшите непрозрачность слоя до, примерно 60%:
Повторите предыдущее действие, на этот раз, добавив звёзды в нижний левый угол нашей сцены:
Шаг 2
В этом шаге мы поработаем над нашим текстом. Если у вас стоит программа Photoshop CS6 или выше, то вы можете самостоятельно создать свой 3D текст, используя шрифт Bebas. Если нет, то вы можете просто скачать мой 3D текст по ссылке вначале этого урока:
К слою с текстом, добавьте слой-маску и с помощью мягкого ластика, удалите отдельные участки в нижней части текста:
Примечание переводчика: цвет кисти чёрный.
Далее, примените фильтр Контурная резкость (Unsharp Mask), идём Фильтр – Резкость – Контурная резкость (Filter > Sharpen > Unsharp Mask):
Контурная резкость добавит световой блик на кромку текста, как показано на скриншоте ниже:
Ещё раз откройте исходное изображение “Звёздное небо”, ещё раз выделите часть изображения, скопируйте / вклейте выделенное изображение на наш рабочий документ, Закройте выделенной текстурой наш текст. Поменяйте режим наложения для слоя с выделенной частью неба на Жёсткий свет (Hard Light):
Далее, с помощью мягкого ластика, скройте отдельные участки текстуры звёздного неба так, чтобы остались отдельные фрагменты текстуры на буквах:
Результат должен быть, как на скриншоте ниже:
Шаг 3
Загрузите исходное изображение с туманностью в программе Photoshop и с помощью инструмента Лассо (Lasso Tool) с растушёвкой 40px, создайте активное выделение, как показано на скриншоте ниже:
Скопируйте / вклейте выделенную часть текстуры туманности на наш рабочий документ. Расположите текстуру за нашим текстом. (Прим.переводчика: слой с выделенной текстурой расположите ниже слоя с текстом ). С помощью ластика, создайте затенение на краях текстуры, как показано на скриншоте ниже:
Повторите предыдущее действие, добавив текстуру туманности в правую часть сцены:
Шаг 4
В этом шаге мы добавим текстуру туманности поверх текста. Используя тот же самый способ выделения, который вы использовали в предыдущих шагах, скопируйте / влейте фрагменты текстуры туманности. Не забудьте применить инструмент Свободная трансформация (free transform tool) для масштабирования текстуры, а также для слоёв с фрагментами туманности, используйте режим наложения Перекрытие (Overlay):
Продолжайте добавлять текстуру поверх текста:
Для буквы ‘S’, я специально добавил фрагменты текстуры туманности, напоминающие “языки пламени”:
Шаг 5
Мы может дополнительно добавить текстуру звёзд поверх текста. Выделите фрагмент текстуры “Звездной небо”, как показано на скриншоте ниже:
Добавьте выделенный фрагмент на наш рабочий документ, расположив поверх текста. Поменяйте режим наложения для слоя с текстурой звёздного неба на Осветление (Screen):
Примечание переводчика: повторите действие несколько раз, применив эффект к различным буквам текста.
Шаг 6
Мы почти завершили урок! В качестве заключительного штриха, создайте объединённый слой, а затем, к объёдинённому слою, примените фильтр Контурная резкость (Unsharp Mask):
Далее, добавьте корректирующий слой Кривые (Curves) поверх всех остальных слоёв:
Мы завершили урок! Надеюсь, вам понравился данный урок. До встречи, удачного дня!
В этом уроке вы узнаете, как с помощью нескольких стилей слоя с космической текстурой и кистью в виде звездной вспышки создать текст в стиле «Звездных войн».
Сложность урока: Средний
В этом уроке я покажу, как с помощью нескольких стилей слоя с космической текстурой и кистью в виде звездной вспышки создать текст в стиле «Звездных войн». Давайте начнем!
Конечный результат
1. Создание фона
Шаг 1
Создайте новый документ в Фотошопе (Ctrl + N) размером 950х550 пикселей.
Поместите изображение звездного неба на слой выше слоя заднего фона и измените размер рисунка по мере необходимости.
Примечание: преобразуйте изображение в смарт-объект.
Шаг 2
Шаг 3
Это немного затемнит изображение. Нажмите на значок Создать новый корректирующий слой или слой-заливку (Create new fill or adjustment layer) в нижней части панели слоев и создайте слой-заливку, выбрав Цвет (Solid Color).
Шаг 4
2. Создание текста
Шаг 1
Установите шрифт «SF Distant Galaxy» и напишите STAR WARS. Сделайте Буквы S и T в начале и конце заглавными. После этого откройте панель Символ (Окно > Символ/Window > Character) и настройте шрифт следующим образом:
Шаг 2
Также нужно настроить Кернинг (Kerning) между отдельными буквами. Для этого поставьте курсор между ними и измените значение по вашему усмотрению:
В моем случае использованы следующие значения:
3. Коррекция формы текста
Шаг 1
Как только закончите работу с текстом, преобразуйте его в векторную фигуру. Для этого перейдите в меню Текст > Преобразовать в кривые (Type > Convert to Shape).
Шаг 2
Выберите инструмент Стрелка (Direct Selection Tool) и выделите две якорные точки в конце буквы R, расположенной вверху
Шаг 3
Клавишей стрелки «вправо» оттяните горизонтально часть буквы R до края буквы S, расположенной под ней.
Шаг 4
Выделите две якорные точки с левой стороны буквы S, расположенной вверху, и клавишей стрелки «влево» оттяните горизонтально часть буквы S до края буквы W, расположенной под ней.
Шаг 5
Создайте копию текстового слоя (Ctrl + J) и уменьшите заливку (Fill) до 0%. Затем создайте ещё одну копию.
4. Стилизация исходного слоя-фигуры (слоя типа Shape)
Кликните дважды на исходном слое-фигуре, чтобы применить следующие стили:
Шаг 1
Добавляем стиль Тиснение (Bevel & Emboss) со следующими настройками:
- Стиль (Style): Обводящее тиснение (Stroke Emboss)
- Размер (Size): 3
- Контур глянца (Gloss Contour): Инверсия – по Гауссу (Gaussian Inverse)
- поставьте галочку в окошке «Сглаживание» (Anti-aliased)
- Режимподсветки (Highlight Mode): Яркийсвет (Vivid Light)
- Метод (Technique): Плавное (Smooth)
- Режим тени (Shadow Mode): Умножение (Multiply)
Шаг 2
Добавляем стиль Контур (Contour) со следующими настройками:
- Контур (Contour): волнистыйуклон (Rolling Slope – Descending)
- поставьте галочку в окошке «Сглаживание» (Anti-aliased)
Шаг 3
Добавляем стиль Обводка (Stroke) со следующими настройками:
Шаг 4
Добавляем стиль Внутренняя тень (Inner Shadow) со следующими настройками:
- Непрозрачность (Opacity): 50%
- Смещение (Distance): 0
- Размер (Size): 1
- Режим наложения (Blend Mode): Умножение (Multiply)
Шаг 5
Добавляем стиль Наложение градиента (Gradient Overlay) со следующими настройками:
- Щелкните по окошку Градиент (Gradient) для создания градиента
- Режим наложения (Blend Mode): Нормальный (Normal)
- Стиль (Style): Линейный (Linear)
Шаг 6
Вы можете открыть редактор градиентов и щелкнуть в нижней части шкалы градиента, чтобы добавить контрольные точки (Color Stops). Для каждой контрольной точки вы можете изменить значение цвета (Color) и позиции (Location).
Вы также можете кликнуть по верхним контрольным точкам шкалы градиента и изменить их непрозрачность (Opacity) и позицию (Location).
Значения, которые использовал я, следующие (слева направо):
Цвет – Позиция
И, наконец, уменьшите значение непрозрачности (Opacity) для левой контрольной точки до 5%.
Итак, мы добавили обводку и основную заливку первому слою с текстом.
5. Стилизация первой копии слоя-фигуры
Дважды кликните по первой копии слоя-фигуры и примените следующие стили:
Шаг 1
Добавляем стиль Обводка (Stroke) со следующими настройками:
- Размер (Size): 10
- Положение (Position): По центру (Center)
- Типобводки (Fill type): Градиент (Gradient)
- Стиль (Style): Зеркальный (Reflected),
- Режим наложения (Blend Mode): Перекрытие (Overlay)
- Угол (Angle): 90
- Тип обводки (Fill Type): Градиент (faucet 110)
Шаг 2
Добавляем стиль Наложение градиента (Gradient Overlay) со следующими настройками:
- Режим наложения (Blend Mode): Жесткий свет (Hard Light)
- Стиль (Style): Линейный (Linear)
- Градиент (Gradient): Gold Dial Tops X7 – angled
- поставьте галочку в окошке «Инверсия» (Reverse)
Не закрывая окна стилей, попробуйте изменить положение градиента на холсте в пределах текста.
Шаг 3
Добавляем стиль Наложение узора (Pattern Overlay) со следующими настройками:
- Режим (Blend Mode): Перекрытие (Overlay)
- Узор (Pattern): metal_6-512px.jpg
Таким образом, цвета обводки и заливки станут ярче.
6. Стилизация второй копии слоя-фигуры
Дважды кликните по второй копии слоя-фигуры и примените следующие стили:
Шаг 1
Добавляем стиль Тиснение (Bevel & Emboss) со следующими настройками:
Шаг 2
Добавляем стиль Контур (Contour) со следующими настройками:
- Контур (Contour): глубокаявыемка (Cove - Deep)
- поставьте галочку в окошке «Сглаживание» (Anti-aliased)
Шаг 3
Добавляем стиль Обводка (Stroke) со следующими настройками:
Таким образом, мы сделали эффект более ярким и заметным.
7. Добавление внешнего свечения
Шаг 1
Продублируйте вторую копию слоя-фигуры (Ctrl + J), кликните по копии правой кнопкой мыши и выберите пункт Растрировать стиль слоя (Rasterize Layer Style).
Назовите полученный слой «Glow» и уменьшите его заливку (Fill) до 0%.
Шаг 2
Дважды кликните по слою, чтобы применить стиль Внешнее свечение (Outer Glow) со следующими настройками:
В результате, вокруг текста появится лёгкое свечение.
8. Добавление бликов
Шаг 1
Шаг 2
Откройте панель кистей через раздел Окно >Кисть (Window > Brush) и измените настройки Динамики формы (Shape Dynamics), как показано на скриншоте ниже:
- Колебание размера (Size Jitter): 15%
- Минимальный диаметр (Minimum Diameter): 0%
- Колебание угла (Angle Jitter): 100%
- Колебание формы (Roundness Jitter): 0%
Шаг 3
Уменьшите размер кисти (Size) по вашему усмотрению, создайте новый слой на самом верху и назовите его «Flares». Установите для него режим наложения Линейный свет (Linear Light).
Затем нарисуйте звездные блики на краях текста.
Конечный результат:
Поздравляю! Мы закончили!
В этом уроке мы воспользовались космической текстурой в качестве заднего фона, изменив ее цветовую гамму с помощью стилей слоя и корректирующих слоев.
Далее, мы напечатали текст и изменили некоторых из его настроек, такие как Трекинг (Tracking) и Кернинг (Kerning).
После этого мы преобразовали текст в фигуру и поработали с отдельными концами крайних букв. Как только мы закончили работу с буквами, мы создали пару копий слоя и применили к каждой из них различные стили, чтобы улучшить общий вид эффекта.
Наконец, мы подкорректировали кисть «Вспышки» и добавили несколько бликов и вспышек по краям текста.
В этом уроке вы научитесь создавать объемный голографический текст в стиле Звездных войн
Сложность урока: Средний
В этом уроке я покажу вам, как с помощью стилей слоя создать яркий 3D-эффект. По ходу урока мы применим к стилям фильтр Размытие в движении, чтобы создать потрясающий голографический эффект в стиле Звездных войн. Также вы узнаете, как записать все действия в экшен, чтобы можно было быстро и легко повторно применить эффект к любому тексту.
1. Создаем стили слоя
Шаг 1
Перед началом записи экшена нам нужно создать стили слоя. Это позволит сократить количество шагов в экшене и даст возможность редактировать некоторые его параметры.
Скачиваем zip-архив и извлекаем его в любую папку. Затем открываем файл Holo-Tuto-Background.jpg в Фотошоп.
Шаг 2
Теперь берем Horizontal Type Tool (T) (Горизонтальный текст), на панели Window – Character (Окно – Символ) устанавливаем размер на 175 пт и шрифт – на Komikahuna. Затем в центре документа пишем слово HOLO.
Шаг 3
Переходим на панель слоев и устанавливаем Fill (Заливка) слоя HOLO на 0%. Затем дважды кликаем левой кнопкой по этому же слою, чтобы открыть окно Layer Style (Стиль слоя). После этого добавляем стиль Color Overlay (Наложение цвета):
Шаг 4
Далее применяем Outer Glow (Внешнее свечение):
После этого нажимаем на кнопку New Style (Новый стиль) и сохраняем его под названием «HOLO – A».
Не закрываем окно Layer Style (Стиль слоя).
Шаг 5
Первый слой со стилями готов, и мы можем заняться вторым.
Снимаем галочку с Outer Glow (Внешнее свечение). Затем корректируем настройки Color Overlay (Наложения цвета):
Шаг 6
Добавляем стиль слоя Bevel & Emboss (Фаска и тиснение) со следующими настройками:
Шаг 7
Добавляем стиль слоя Inner Shadow (Внутренняя тень) со следующими настройками:
Шаг 8
Далее мы будем использовать узор, который находится в скачанном zip-архиве. Это обычные горизонтальные линии. Я нарисовал его с помощью белых линий и прозрачного фона.
- BlendMode (Режим наложения): Normal (Нормальный)
- Opacity (Непрозрачность): 36%
- Pattern (Узор): Holographic Pattern (Кликаем по миниатюре узора, чтобы открыть панель. Затем нажимаем на значок шестеренки в правом верхнем углу и выбираем LoadPatterns (Загрузить узоры). После этого выбираем скачанный Holographic Pattern).
- Scale (Масштаб): 150%
- LinkwithLayer (Связать со слоем): вкл
Шаг 9
Добавляем стиль слоя Drop Shadow (Тень) со следующими настройками:
Закончив, нажимаем на кнопку New Style (Новый стиль) и сохраняем с названием HOLO – B. После этого закрываем окно Layer Style (Стиль слоя).
2. Как создать экшен
Шаг 1
Переходим на панель слоев и выбираем слой HOLO. После этого открываем панель Window – Actions (Окно – Операции). Затем в нижней части панели нажимаем на кнопку Create new set (Создать новый набор) и называем его «Мой текстовый эффект». После этого жмем на кнопку Create new action (Создать новую операцию) и вводим название «Голографический эффект».
С этого момента Фотошоп записывает все действия внутри программы в экшен. Следите за панелью операций, на ней будут отображаться ваши шаги. При необходимости можно удалить лишнее действие. Для этого выберите его и нажмите на значок с корзиной внизу панели.
Шаг 2
Дважды кликаем по названию слоя HOLO и переименовываем его на HOLO – A (будьте внимательны и не снимите выделение со слоя HOLO). Затем правой кнопкой кликаем по этому слою и выбираем Convert to Smart Object (Преобразовать в смарт-объект).
Шаг 3
Жмем Ctrl+T, чтобы активировать свободную трансформацию. На верхней панели деактивируем Maintain aspect ratio (Сохранять пропорции) и растягиваем текст по вертикали до 59%. Не нажимайте клавишу Enter, чтобы применить изменения. Трансформация должна оставаться активной!
Шаг 4
Кликаем правой кнопкой мышки внутри рамки трансформации и выбираем Perspective (Перспектива). Затем мышкой хватаем правую верхнюю опорную точку и смещаем ее на 22º влево. После этого жмем Enter, чтобы применить трансформацию.
Шаг 5
Теперь переходим к панели Window – Styles (Окно – Стили). Стили слоя, которые мы сохраняли в первой части урока, находятся здесь. Ищем стиль HOLO – A и кликаем по нему, чтобы применить к выбранному слою.
После этого применяем фильтр Filter – Blur – Motion Blur (Фильтр – Размытие – Размытие в движении). Устанавливаем Angle (Угол) на 80º и Distance (Смещение) – на 68 пикселей.
Размытие в движении поможет создать нужный 3D-эффект.
Шаг 6
Жмем Ctrl+J, чтобы дублировать слой, называем копию HOLO – B. После этого открываем панель Styles (Стили) и применяем к копии стиль HOLO – B.
Шаг 7
На панели слоев кликаем по стрелке напротив слоя HOLO – B, чтобы развернуть все его эффекты. Дважды кликаем по фильтру Motion Blur (Размытие в движении), чтобы изменить его настройки. Устанавливаем Angle (Угол) на 90º и Distance (Смещение) – на 42 пикселя.
После этого выбираем инструмент Move Tool (V) (Перемещение) и смещаем слой HOLO – B вверх на 60 пикселей.
Шаг 8
С зажатой клавишей Ctrl выделяем оба слоя одновременно HOLO – A и HOLO – B и преобразовываем их в смарт-объект. Дважды кликаем по этому смарт-объекту, чтобы открыть окно стилей. После этого применяем стиль слоя Outer Glow (Внешнее свечение) со следующими параметрами:
Жмем ОК, чтобы закрыть окно Layer Style (Стиль слоя).
Шаг 9
Переходим на панель операций и жмем на кнопку Stop Recording (Остановить запись).
Вот так выглядит финальный результат:
В этом уроке мы создали с вами голографический эффект на тексте и записали процесс в экшен. Сначала мы создали два слоя со стилями, затем объединили их вместе и применили к ним размытие в движении для имитации эффекта 3D. Теперь вы можете применять этот экшен к любому тексту. Достаточно сделать пару кликов мышкой!
Чтобы применить экшен, выбираем его на панели операций и в нижней части жмем на кнопку Play (Воспроизвести).
Надеюсь, вам понравился урок. Не стесняйтесь оставлять комментарии ниже.
Также не забудьте посмотреть мой набор текстовых эффектов Cyberpunk. В них включены смарт-объекты для быстрого и удобного редактирования.
Привет!
Появилась проблемка. Делаю логотип, ну вообщем смотрите:
не могу деформировать слово Clubbing под стать прямоугольнику розового цвета (Который за словом Clubbing. Как это сделать, подскажите пожалуйста.
Хочу чтобы получилось вот так
Он ленивая жопа. Не более. На мой совет про мануал можешь глянуть, что он мне ответил. окуда-то взялись часы чтения, сотни видеоуроков и т.д. (хотя некоторые тратят на изучение годы и вообще не жалуются) Господину нужен экспресс-курс "скачать информацию прямо в мозг". Читать и учить некогда =(
Сам подход не верен [2]
Никто логотипы в растре не делает. Для этого есть корел, люстра и инкскейп
ps В режиме свободной трансформации подтяни углы, как надо, а потом подтяни правый бок чуть вверх
Сложно объяснить, не зная уровень твоих познаний, но что-то мне подсказывает, что в твоем случае идеально - взяться за мануал к фотошопу
Оо, мануал, не, часами смотреть видео. при том что их тысячи и только после просмотра 320 видео найти именно то что я ищу, не. Есть ли у вас видео урока по этой теме?
Photo-Graph Просветленный (40886) Плять, чувак, не надо вот этого " часами смотреть видео. при том что их тысячи и только после просмотра 320 видео найти именно то что я ищу" Скажи прямо "я дох*я ленивая задница, я не хочу ничего искать, я хочу сразу ДЕЛАТЬ, при этом не имея даже минимальных сведений о программе" Найдешь 240 страницу Я тебе не предлагал читать все справочники, написанные когда-либо, я тебе сказал взяться за МАНУАЛ, конкретное единое руководство от самих производителей. Если ты считаешь, что для того, чтобы сделать шЫдевр, не нужно ничего знать, типа "методом тыка найду, у меня о*уенная интуиция" - ты сильно ошибаешься. Первое, с чего ты должен был начать - это освоить интерфейс и возможности программы, если ты этот этап развития пропустил - претензии исключительно к самому себе. Без обид
Неверный подход - 3, 4 и 5
При некоторых видах трансформации - а при каких узнАете, ПОЧИТАВ мануал, - отдельные углы выделения надо двигать мышью с нажатым ctrl. И тогда всё прекрасно трансформируется в нужной плоскости и под нужным углом.
. хотя Андрей уже конечно урок провел и за уши к знаниям подтянул
Логотипы делаются в векторе за исключением случаев когда они для чисто веб-проектов. Если хоть намек есть на полиграфию - нафиг нужен этот лого
Продолжаем знакомиться с инструментом Текст, о котором я подробно расписывал в одноименной статье. Поскольку инструмент достаточно гибкий и сложный, я решил не смешивать все в одну кучу и выделил в отдельную статью информацию о том, как можно деформировать текст (процесс напоминает работу команды Трансформация).
Деформация текста — это одна из ключевых особенностей инструмента. Одно дело делать его жирным, курсивом, менять размер и др элементарные задачи, другое — возможность сделать художественное размещение надписи на вашей работе.
Итак, выберите инструмент Текст, напишите какую-нибудь надпись и выберите на панели параметров Создать деформированный текст:
Появится диалоговое, в котором вы можете выбрать предустановленные стили искривления текста, а также настройки изгиба и искажения. Параметры Горизонтальный/Вертикальный влияют на размещения текста относительно плоскости.
Параметр Изгиб/Степень влияет на силу искривления.
Искажение по горизонтали и вертикали дополнительно меняют вашу надпись в горизонтальной и вертикальной плоскости соответственно.
Пример искажения в форме Волны:
Или вот избитая тема из Звездных Войн:
Все это легко и, можно сказать, детские игрушки. Вот по настоящему индивидуальный подход размещения надписей вам обеспечит Контур!
Текст по Контуру
Фотошоп — это программа, которая должна реализовать абсолютно все дизайнерские идеи, в том числе сложные и хитроумные. В нашем случае исключения не будет. Рассмотрим ключевой способ художественной деформации текста.
Итак, чтобы написать текст вдоль контура — выберите Перо и создайте произвольную кривую, которая будет будущей надписью.
Затем выберите инструмент Текст и наведите указатель на кривую. Дождитесь, когда указатель изменит свой внешний вид (вертикальная палочка с наклонной полоской внизу), затем нажмите левой кнопкой мыши на начало кривой.
Чтобы изменить место положение надписи, выберите инструмент Выделение контура (черная стрелочка) зажмите кнопкой и тащите в необходимое место.
Нажмите клавишу Enter, чтобы применить все настройки. После этого сам контур исчезнет, останется только текст.
В фотошопе есть предустановленные фигуры, которые вы также можете использовать как контур. Не забываете о том, что мы уже прошли палитру Символы, поэтому можем, например, поднимать текст повыше. Используйте эти знания в своих творениях.
Читайте также: