Как сделать отражение текста в фотошопе

Делаем отражение текста в фотошопе (Photoshop)!

Привет, всем посетителям блога Webmox.ru! Сегодня будет совсем коротенькая статься, в которой я вам расскажу о том, как легко и быстро сделать отражение текста в фотошопе.

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

Первое, что нам нужно сделать — это создать новый документ в Photoshop. Уверен, большинство из вас знает, как это делается, но на всякий случай я решил этот шаг не пропускать. Поэтому, в Photoshop в верхнем меню нажимаем пункт «Файл=>Создать» (или сочетание клавиш Ctrl+N). Далее, в появившемся окне даем имя документу и задаем его ширину и высоту. Я задал размеры 500X250, вы можете задать такие же самые или другие, не суть важно.

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

И заливаем данный слой цветом #0e3262.

В итоге мы получим, закрашенную синим цветом область, на которой и будет написан наш текст.
Итак, все подготовительные работы произведены, а теперь приступаем непосредственно к отражению текста.
Выбираем инструмент «Горизонтальный текст»:

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

Далее пишем любой текст. У меня вышло так:

Следующее, что нам нужно сделать, это выполнить дублирования только что нами созданного текстового слоя. Поэтому снова переходим в палитру слоев, выбираем наш слой и жмем сочетание клавиш Ctrl+J (или кликаем по нему правой кнопкой мыши и выбираем команду «Создать дубликат слоя»).

Далее нам нужно эту копию текстового слоя перевернуть верх ногами. Для этого выбрав в палитре слоев копию текстового слоя, идем в раздел «Редактировать», далее пункт «Трансформировать» и «Отразить по вертикали».

В итоге у нас получится такая картина.

Думаю не сложно догадаться, что именно произошло, просто поверх нашего текста, копия этого текста стала верх тормашками ?.

Следующим шагом нам нужно перетащить перевернутый текст вниз оригинала. Для этого, снова переходим на нашу копию текста, выбираем инструмент «Перемещение» и, пользуясь клавишами стрелок вверх и вниз (на клавиатуре), сдвигаем текс на низ, как показано ниже:

Отражение готово :). Всё, спасибо за внимание пока! 🙂 …

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

Итак, снова идем в наш отраженный текстовый слой и добавляем к нему маску, кликнув в палитре слоев на кнопку «Добавить слой-маску»:

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

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

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

В итоге у меня получилось такое вот отражение:

Согласитесь, выглядит достаточно неплохо 🙂 . Как видите, создание отражения текста в фотошопе выполняется очень легко и просто.

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

Как сделать зеркальное отражение текста в Фотошопе

В этом уроке вы узнаете, как сделать отражение текста в Фотошопе.

Читать еще: Как сделать чтобы презентация не открывалась

Шаг 1. Создание нового документа

Создайте новый документ в Adobe Photoshop (Ctrl + N). В данном случае это документ 800 х 400 пикселей, разрешение (resolution) 300 пикс/дюйм, цветовой режим (color mode): RGB.
Залейте фон черным цветом (так отражение будет выглядеть эффектней).

Шаг 2. Создание текста

Возьмите Инструмент Текст – Type Tool (T) и сделайте любую надпись. Для урока был выбран шрифт METROPOLIS 1920, размер 30 пунктов, цвет #fdb916.

Шаг 3. Создание текста

Дублируйте текстовый слой (Ctrl + J), затем нажмите Ctrl + Т для перехода в режим трансформирования (Transform), кликните правой кнопкой мыши и выберите пункт Отразить по вертикали (Flip vertical), нажмите Ввод (Enter).
Сместите отраженный текст вниз.

Шаг 4. Создание текста

Растрируйте отраженный текст: для этого кликните правой кнопкой мыши по слою и выберите пункт Растрировать текстовый слой (Rasterize Type). Затем уменьшите Непрозрачность (Opacity) слоя до 50%.

Шаг 5. Создание текста

Возьмите Инструмент Прямоугольная область – Rectangular Marquee Tool (М) и выделите нижнюю половину отраженного текста. Затем перейдите в меню Выделение > Модификация > Растушевка – Select > Modify > Feather (Shift + F6), в появившемся окне выставьте радиус растушевки (Feather Radius): 10 пикселей, нажмите ОК.

Шаг 6. Создание текста

Нажмите иконку Добавить маску слоя (Add layer mask) внизу панели слоев, затем нажмите сочетание клавиш Ctrl + I, чтобы инвертировать маску.

Шаг 7. Финальное изображение

Также уроки которые могут вас заинтересовать

В этом уроке мы будем создавать эффект карамельного текста в Adobe Photoshop.

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

В этом уроке я расскажу, как написать текст вокруг какого-либо предмета на рисунке.

В этом уроке я расскажу, как превратить печатные буквы в нарисованные карандашом от руки.

В этом уроке я покажу вам, как добавить тень к тексту в Photoshop, используя градиенты и инструменты трансформирования.

В этом уроке Фотошопа мы рассмотрим, как преобразовать текст в контур.

В этом уроке Фотошопа мы рассмотрим, как быстро создать текст с эффектом эскиза в Фотошопе.

В этом уроке Фотошопа мы рассмотрим, как быстро создать эффект наброска текстового контура.

В этом уроке Фотошопа мы рассмотрим, как с помощью стилей слоя можно сделать вид стального текста.

В этом уроке Фотошопа мы создадим цветной хромированный текст.

В этом уроке Фотошопа мы рассмотрим как добавить снег на текст.

В этом уроке Фотошопа мы рассмотрим простой метод создания надписи сделанной из травы.

В этом уроке мы расскажем, как добавить водяной знак в Фотошопе.

В этом уроке мы расскажем, как быстро нарисовать красивые пластиковые буквы в Adobe Illustrator.

В этом уроке мы узнаем, как всего за несколько минут сделать векторную надпись травой в Illustrator.

В этом уроке мы будем создавать металлическую именную пластину в Фотошопе.

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

В этом уроке мы будем накладывать текст на неровную поверхность в Фотошопе.

Из этого урока вы узнаете, как добавить водяной знак на фотографию в Фотошопе.

Комментарии 57

Для того, чтобы оставить комментарий, авторизуйтесь или зарегистрируйтесь.

Эффект отражения текста в фотошопе

В этом уроке по текстовым эффектам в Photoshop мы собираемся создать простой эффект отражения текста. Этот эффект повсеместно использовался в рекламе, и, как мы увидим, его очень легко сделать.

Вот отражение, которое мы будем создавать:

Шаг 1: создайте новый документ Photoshop

Создайте новый пустой документ Photoshop, зайдя в меню « Файл» вверху экрана и выбрав « Новый» . Вы также можете создать новый документ с помощью сочетания клавиш Ctrl + N (Win) / Command + N (Mac). В любом случае открывается диалоговое окно « Новый документ» в Photoshop . Введите размеры, необходимые для вашего документа. Для этого урока я собираюсь ввести 6 дюймов для моего документа Ширина , 3 дюйма для высоты , и разрешение на 300 пикселей / дюйм . Нажмите ОКкогда вы закончите, чтобы выйти из диалогового окна. Ваш новый пустой документ появится на вашем экране:

Шаг 2: Заполните новый документ черным

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

Читать еще: Как сделать красивую раскладку в инстаграм

Вы также можете выбрать команду Fill с помощью сочетания клавиш Shift + F5 . В любом случае открывается диалоговое окно Fill. В верхней части диалогового окна находится раздел « Содержание », один из которых называется « Использовать» . Выберите Black из списка справа от слова Use:

Нажмите OK, когда вы закончите, чтобы выйти из диалогового окна, и Photoshop заполнит документ черным:

Шаг 3: Выберите инструмент Type

Чтобы добавить текст в документ, нам понадобится Photoshop’s Type Too l. Вы можете либо щелкнуть его в палитре «Инструменты», чтобы выбрать его, либо, чтобы ускорить его, нажать букву T на клавиатуре, чтобы выбрать его с помощью ярлыка:

Шаг 4: выберите шрифт

Выбрав инструмент «Текст», перейдите на панель параметров в верхней части экрана и выберите шрифт, который вы хотите использовать для эффекта. Выбор шрифтов будет зависеть от того, какие шрифты вы сейчас установили на свой компьютер. Я остановлюсь на чем-то простом и выберу Gill Sans Light для своего эффекта. Не беспокойтесь о размере шрифта на данный момент:

Шаг 5: выбери цвет для текста

Далее нам нужно выбрать цвет для нашего текста. В Photoshop есть несколько способов выбрать цвет текста. В этом уроке я собираюсь использовать очень простой и быстрый способ — выбрать готовый цвет из палитры «Образцы» . Переключитесь на палитру «Образцы», которая по умолчанию сгруппирована между палитрами «Цвет» и «Стили». Палитра «Образцы» содержит коллекцию образцов цвета, которые по умолчанию устанавливаются вместе с Photoshop. Чтобы выбрать один из цветов, просто наведите курсор мыши на образец цвета. Вы увидите, как курсор изменится на пипетку. Нажмите на образец пипеткой, чтобы выбрать цвет. Я собираюсь выбрать красный образец в верхнем левом углу:

Шаг 6: добавь свой текст

Выбрав цвет, щелкните в любом месте внутри документа и добавьте свой текст. Я собираюсь напечатать слово «ОТРАЖЕНИЯ», все заглавными буквами:

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

Шаг 7: измените размер текста, если это необходимо, со свободным преобразованием

Если вам нужно изменить размер текста, перейдите в меню « Правка» в верхней части экрана и выберите « Свободное преобразование» или нажмите сочетание клавиш Ctrl + T (Win) / Command + T (Mac). В любом случае вызывается команда «Свободное преобразование» в Photoshop, которая позволит нам легко изменять размер текста и перемещать его, если нам необходимо:

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

Когда вы закончите, нажмите Enter (Win) / Return (Mac), чтобы принять преобразование и выйти из команды Free Transform.

Шаг 8: продублируйте текстовый слой

Теперь, когда у нас есть текст, мы можем начать создавать эффект отражения. Первое, что нам нужно, это копия нашего текста, поэтому давайте продублируем текстовый слой, перейдя в меню Layer в верхней части экрана, выбрав New , а затем выбрав Layer via Copy . Или, для более быстрого способа дублирования слоя, просто нажмите сочетание клавиш Ctrl + J (Победа) / Command + J (Mac):

В любом случае, Photoshop должен сделать копию нашего текстового слоя. Казалось бы, ничего не произошло в нашем документе, но если мы посмотрим на нашу палитру слоев, то увидим, что теперь у нас есть копия слоя, расположенная непосредственно над оригиналом (обратите внимание, что в названии копии есть слово «копия»). ):

Шаг 9: переверни текстовый слой по вертикали

Затем нам нужно перевернуть наш скопированный текстовый слой вверх ногами, и в Photoshop просто появилась команда, разработанная специально для такой задачи. Вернитесь в меню Edit еще раз, выберите Transform , а затем выберите Flip Vertical :

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

Читать еще: Как сделать чтобы тесто поднялось

Шаг 10: перетащи скопированный текст под оригинал

Выберите Move Too l в палитре Tools или нажмите букву T, чтобы выбрать ее с помощью сочетания клавиш:

Затем, когда слой скопированного текста по-прежнему выделен на палитре слоев (выделенные слои выделены синим цветом), удерживайте нажатой клавишу « Shift» , затем щелкните внутри документа и перетащите скопированный перевернутый текст ниже исходного текста. Удерживание клавиши Shift при перетаскивании облегчает перетаскивание текста прямо вниз, поскольку предотвращает случайное перемещение влево или вправо:

Шаг 11: добавь маску слоя к перевернутому тексту

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

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

Шаг 12: выбери инструмент градиента

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

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

Это вызывает редактор градиентов в Photoshop , который показывает нам коллекцию градиентов, из которых мы можем выбирать. Нам нужен градиент от черного к белому , третий слева, верхний ряд. Нажмите на него, чтобы выбрать его, затем нажмите OK в верхнем правом углу диалогового окна, чтобы выйти из него:

Шаг 13: нарисуйте вертикальный градиент снизу вверх вдоль текста вверх ногами

С выбранным инструментом «Градиент» и выбранным градиентом от черного к белому все, что нам нужно теперь сделать, — это нарисовать вертикальный градиент вдоль нашего перевернутого текста. Во-первых, убедитесь, что у вас выбрана маска слоя, а не сам слой. Вы должны увидеть белую рамку выделения вокруг миниатюры маски слоя в палитре слоев, которая говорит нам, что маска слоя выбрана. Нажмите на миниатюру предварительного просмотра маски слоя, чтобы выбрать ее, если вы не видите рамку выделения вокруг нее.

Чтобы нарисовать градиент, щелкните внутри документа примерно на 3/4 пути вниз к нижней части перевернутого текста. Затем, удерживая нажатой клавишу Shift, перетащите вверх до точки, где перевернутый текст встречается с исходным текстом. Удерживая клавишу Shift при перетаскивании, вы не сможете двигаться влево или вправо при перетаскивании вверх:

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

Так как мы нарисовали градиент от черного к белому на маске слоя, мы фактически не можем видеть его в документе, но мы можем видеть это, если мы посмотрим на миниатюру предварительного просмотра маски слоя в палитре слоев:

Шаг 14: отрегулируйте непрозрачность слоя, чтобы точно настроить эффект

Если вы хотите, чтобы ваше отражение текста выглядело немного более блеклым, просто перейдите к параметру « Непрозрачность» в верхнем правом углу палитры «Слои» и уменьшите непрозрачность слоя. Я собираюсь снизить мой до 50% :

Здесь, после снижения непрозрачности, мой последний эффект отражения текста: