Можно отметить две основные особенности длинных теней:

1. Каждый объект дизайна должен иметь плоскую двухмерную тень, которая в 2,5 раза больше диагонали объекта.
2. Тень должна отбрасываться под углом 45 градусов.

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

1. Создание объекта

Шаг 1

Создайте новый документ в Фотошопе (Ctrl + N) размером 750х750 пикселей и залейте фоновый слой цветом #cf3f30 .

Шаг 2

Выберите инструмент Rounded Rectangle Tool (U), настройте его, как показано на скриншоте, и создайте квадратную фигуру размером 450х450 пикселей.

Шаг 3

Инструментом Horizontal Type Tool (T) напишите два строки текста, используя разный шрифт.

Шаг 4

Откройте панель Character (Window ? Character) и настройте шрифт, как показано на скриншоте.

Шаг 5

Выберите все три слоя, выберите инструмент Move Tool (V) и на верхней панели нажмите на кнопку Align horizontal centers.

2. Создание длинных теней при помощи векторных фигур

Шаг 1

Выберите инструмент Rectangle Tool (U) и создайте чёрный квадрат, покрывающий почти весь холст. Этот квадрат должен быть прямо над фоновым слоем.

Шаг 2

Активируйте режим Free Transform (Ctrl + T), зажмите клавишу Shift и поверните чёрный квадрат на 45 градусов.

Шаг 3

Измените ширину чёрного квадрата, чтобы его стороны проходили через углы красного квадрата.

Шаг 4

Переместите чёрный квадрат так, чтобы его сторона стала диагональю красного квадрата.

Шаг 5

Уменьшите Fill (заливку) чёрного квадрата до 0%.

Шаг 6

К слою с квадратом примените стиль Gradient Overlay через иконку fx в нижней части панели слоёв.

Это самый простой способ создать такую тень.

3. Создание длинных теней при помощи инструмента Pen Tool

Использование инструмента Pen Tool (P) для создания теней может показаться Вам наиболее сложным, но с ним у Вас будет намного больше контроля над формой тени.

Шаг 1

Создайте новый слой (Ctrl + Shift + Alt + N) под текстом и красным прямоугольником. Выберите инструмент Pen Tool (P).

Шаг 2

Для начала нам нужно отвести направляющие. Активируйте Линейки (Ctrl + R) и отведите направляющую, проходящую по верхнему краю букв.

Шаг 3

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

Шаг 4

Дорисуйте чёрную фигуру, как показано на скриншоте. Она должна покрывать правый нижний угол красного квадрата.

Шаг 5

Выберите инструмент Direct Selection Tool (A), зажмите клавишу Shift и кликните на якорных точках, которые Вы добавили между буквами.

Шаг 6

Выберите инструмент Move Tool (V) и опустите выделенные точки на несколько пикселей вниз (используйте клавишу стрелки вниз). Затем сдвиньте точки вправо, чтобы получить результат, как на втором скриншоте ниже.

Шаг 7

Инструментом Direct Selection Tool (A) передвиньте отдельные точки, чтобы убрать пустоты или изменить угол.

Шаг 8

Все линии тени должны быть параллельными на столько, на сколько это возможно. Используйте инструмент Line Tool (U), чтобы определить точный угол. Создайте линию, поверните её в режиме Free Transform (Ctrl + T) и приложите к каждой букве, чтобы знать, куда нужно передвинуть якорную точку.

Данный способ отнимает не мало времени, но с ним Вы можете более точно изменить форму тени.

Шаг 9

Как только форма тени будет нарисована, примените к ней стиль Gradient Overlay с такими же параметрами, как в шаге 2.6.

Шаг 10

Чтобы удалить часть тени, выходящую за пределы красного квадрата, кликните правой кнопкой мыши на слое тени и выберите пункт Create Clipping Mask.

Совет: чтобы создать тень для второй линии текста, выберите инструмент Pen Tool (P), на панели параметров выберите режим Combine Shapes, чтобы добавить новую тень к уже созданной.

Если Вы используете версию CS6, то можете создать тень на отдельном слое, а затем объединить их (Ctrl + E). Именно этим способом мы и воспользуемся. Он более понятно описывает процесс создания тени для текста с разной высотой букв.

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

Шаг 11

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

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

Форма тени будет более сложной, чем в первом случае. Например участок в нижней части буквы S. При расстановке якорных точек Вам нужно ориентироваться на направление тени.

Шаг 12

Выберите инструмент Add Anchor Point Tool и добавьте якорную точку туда, где нужно заполнить пустоту. В данном случае это буква S.

Шаг 13

Примените к нарисованной форме стиль Gradient Overlay и создайте для слоя обтравочную маску (Ctrl + Alt + G).

Шаг 14

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

Вы можете создать более объёмную тень при помощи градиента. В настройках стиля Gradient Overlay Вам нужно изменить параметр Scale.

Теперь видно, что тень плавно растворяется.

Подвигайте тень на холсте.

Параметры Opacity и Scale влияют на то, как будет выглядеть тень. Если Вы хотите, чтобы равномерна залита, используйте стиль Color Overlay.

4. Создание длинных теней путём дублирования и сдвига

Это очень простой способ получить тень под углом 45 градусов.

Шаг 1

Создайте копию текстового слоя (Ctrl + J) и опустите её под оригинал.

Шаг 2

Измените цвет нижнего текстового слоя на чёрный.

Шаг 3

Активируйте режим Free Transform (Ctrl + T). Сдвиньте копию на 1 пиксель вниз и вправо. Нажмите Enter, чтобы применить изменения.

Шаг 4

Нажмите Ctrl + Shift + Alt + T, чтобы повторить последнюю трансформацию. Вам нужно продолжать нажимать эти клавиши, пока ВЫ не получите достаточно длинную тень.

Шаг 5

Все копии объедините на одном слое (Ctrl + E).

Шаг 6

Примените стиль Gradient Overlay с настройками шага 2.6.

Шаг 7

Создайте обтравочную маску (Ctrl + Alt + G).

Шаг 8

Если бы Вы написали слова на отдельных слоях, то Вам пришлось бы проделывать всё для каждого слоя отдельно. Вот как это бы выглядело:

Шаг 9

Измените цвет нижнего слоя на чёрный и сдвиньте его.

Шаг 10

Создайте множество копий, каждую из которых нужно сдвинуть, и объедините их всех на одном слое.

Шаг 11

Повторите процесс для второй строки.

Шаг 12

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

Шаг 13

Обе тени можно сделать угасающими.

5. Создание длинных теней при помощи 3D-инструмента

Ещё один быстрый способ, воспользовавшись которым Вы сможете изменить тень в любой момент.

Шаг 1

Выберите текстовый слой и перейдите в меню 3D ? New 3D Extrusion from Selected Layer. Текстовый слой будет преобразован в 3D-слой.

Шаг 2

Для редактирования 3D-слоя Вам понадобится две панели: 3D и Properties. Если они не откроются автоматически, Вы найдёте их в меню Window. Панель 3D содержит все элементы сцены, панель Properties содержит свойства выбранных элементов.

Выберите Current View и на панели Properties выберите вид Top.

Шаг 3

Выберите текст и перейдите во вкладку Coordinates. Измените угол по оси X на 90 градусов, чтобы фронтальная часть текста была направлена вверх.

Шаг 4

На панели свойств выберите вкладку Mesh и измените параметр Extrusion Depth. Смысл в том, чтобы создать длинную экструзию, которая станет тень, когда мы направим свет под определённым углом. В зависимости от текста и направления света, значение этого параметра будет меняться. Обычно значения от 200 до 300 хватает.

Очень важно приземлить объект сцены к основанию (3D ? Snap Object to Ground Plane). Это нужно делать каждый раз, когда Вы изменяете параметр Extrusion Depth. В противном случае объект будет удлиняться через плоскость основания и Вы не увидите изменений.

Шаг 5

Если Вам нужно будет увеличить или уменьшить размер, сделайте это при помощи положения камеры. Выберите Current View на панели 3D, выберите инструмент Move Tool и на верхней панели активируйте режим Scale 3D Object. Кликните на сцене и опустите курсор, если захотите увеличить текст, или поднимите курсор, если захотите уменьшить текст.

Шаг 6

Как только определитесь с размером, выберите Infinite Light 1 на панели 3D и измените угол по оси Y на панели свойств во вкладке Coordinates.

Шаг 7

При помощи инструмента Move Tool Вы сможете изменить направление света прямо на сцене.

Шаг 8

Чтобы вернуть тексту его первоначальный белый цвет, Вам нужно изменить Front Inflation Material. Настройте всё, как показано на скриншоте.

После этого можно поставить сцену на рендеринг, чтобы увидеть, как всё будет выглядеть. Возможно, придётся изменить какие-то параметры. Например, если цвет текста будет слишком тёмным, увеличьте значение параметра Shine до 100%.

Шаг 9

Как закончите с материалами, переходите к сцене (Environment). На панели свойств Вам нужна секция Ground Plane. Измените Opacity (непрозрачность) тени на своё усмотрение. Я установите её на 14%

Шаг 10

Перейдите в меню 3D ? Render, чтобы полностью визуализировать сцену.

Шаг 11

Для 3D-слоя нельзя создать обтравочную маску. Поэтому я предлагаю поместить его в смарт-объект. Сделайте это через меню Filter ? Convert for Smart Filters.

Шаг 12

Кликните правой кнопкой мыши на смарт-объекте и выберите пункт Create Clipping Mask.

Шаг 13

Если Вам нужно будет изменить 3D-слой, кликните дважды на смарт-объекте, чтобы открыть его в отдельном документе.

Шаг 14

В открывшемся документе выберите 3D-сетку (сам объект) и на панели свойств нажмите на кнопку Edit Source.

Шаг 15

У Вас откроется ещё один документ, в котором будет находиться оригинальный текстовый слой. Здесь Вы можете изменить сам текст, шрифт, размер и т.д. Но цвет текста должен быть изменён на панели 3D. После любых изменений документы нужно сохранять (Ctrl + S) и закрывать.

Шаг 16

Когда Вы вернётесь в документ с 3D-объектом, все изменения будут применены автоматически. Для изменения цвета используйте параметр Diffuse. После этого настройте Shine.

Поставьте сцену на рендеринг, сохраните документ и закройте его.

Шаг 17

Смарт-объект тоже изменится.

Поздравляю! Мы закончили

Вам было показано несколько способов создать длинные тени. Первый метод был основан на использовании векторных фигур, второй - на рисовании инструментом Pen Tool, третий - на дублировании слоёв и сдвиге, и в завершении мы немного изучили возможности 3D в Фотошопе. Надеемся, Вам понравился урок, и он поможет Вам в работе.

Поделитесь уроком

Правовая информация

Переведено с сайта psd.tutsplus.com , автор перевода указан в начале урока.

С выходом Photoshop CC 2015 появилась возможность добавлять несколько вариантов одного и того же стиля слоя в один слой. Это упрощает создание эффектов и, кстати, отлично работает с текстом. Раньше создание такого не самого сложного эффекта, как длинная тень, было громоздким: требовалось несколько шагов, и на ходу обновить текст было невозможно. На этом уроке мы покажем быстрый метод добавления длинных теней к буквам, не теряя способности быстро их редактировать.

Что должно получиться:

Шаг 1

Создайте новый документ. С помощью инструмента Type Tool / Текст напишите что-нибудь и поместите свой текст на холст. У нас документ размером 800 х 600 пикселей, шрифт — бесплатный Gobold .

Шаг 2

Используйте Drop Shadow / Тени на своем текстовом слое. Примените параметры, как показано ниже.

Мы, например, для тени взяли темно-синий цвет #182542

Результатом будет небольшая тень, как на этом рисунке:

Шаг 3

Теперь нужно еще раз добавить Drop Shadow / Тени, нажав справа на иконку с крестиком. Это дает дубликат стиля прямо под нашим активным стилем. Выберите новый стиль и настройте расстояние. Установите его чуть больше, чем первая тень. Мы остановились на 5 пикс.

Смотрим на картинку:

Итак, вот результат. Заметили, что тень стала чуть длиннее?

Шаг 4

Продолжаем добавлять тень, но меняем длину. Photoshop CC 2015 позволяет делать так до 10 раз на одном и том же стиле слоя.

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

Шаг 5

Результат:

Шаг 6

Теперь пришло время удлинять нашу тень. В этих целях мы уже добавили все тени, которые Photoshop позволил нам создать для одного слоя. Тем не менее, мы можем использовать группы слоев (Layer Groups) , чтобы иметь доступ к созданию дополнительных теней. Поэтому поместите свой текстовый слой в новую группу слоев.

Шаг 7

Добавьте Drop Shadow / Тени для Layer Group / Группа из слоев. Некоторые параметры нуждаются в корректировке, чтобы соответствовать по цвету и стилю предыдущим.

Старайтесь поместить тень таким образом, чтобы она была продолжением предыдущих стилей слоя.

В результате общая длина тени удвоится.

Шаг 8

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

Финальный вариант должен быть приблизительно таким:

Ниже вы можете увидеть несколько вариаций на тему использования данной техники:

Перевод — Дежурка

В сегодняшнем уроке мы рассмотрим технику создания длинных теней в Adobe Illustrator при помощи нескольких эффектов и панели Appearance. Мы создадим два графических стиля, которые можно применять к единичным путям и к группам объектов.

Шаг 1

Запускаем Adobe Illustrator и создаем новый документ (Cmd/Ctrl + N). Вы можете использовать любые размеры рабочей области. Создаваемые нами стили будут одинаково хорошо работать в режимах цветности RGB и CMYK.

Создание сплошной длинной тени

Шаг 2

Давайте начнем с очень простых вещей. Создадим прямоугольник произвольного цвета и размера, который будет играть роль фона. Затем нарисуем произвольный объект, цвет которого отличается от фона. Я создал звезду с белой заливкой и без обводки. К этому объекту мы будем применять Long Shadow эффект.

Откроем панель Appearance (Window > Appearance) и выделим звезду.

Нажимаем на кнопку Add New Fill в панели Appearance, что приведет к созданию новой заливки.

Шаг 3

Выделяем нижнюю заливку в панели Appearance, затем заменим белый цвет серым цветом.

Не снимая выделения со звезды и серой заливки, переходим Effect > Distort & Transform > Transform…. В открывшемся диалоговом окне устанавливаем величину вертикального и горизонтального смещения, которые равны 0,5px. Тень будет располагаться под углом 45 градусов, поэтому смещения одинаковы. Включите опцию Preview и установите количество копий. Их значение зависит от длины тени, которую вы хотите создать.

Шаг 4

Установим для серой заливки режим смешивания Multiply.

Мы создали простой эффект длинной тени. Сохраним его, как графический стиль, для этого перетащим звезду в панель Graphic Style.

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

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

Создание неоднородной длинной тени

Шаг 5

Часто дизайнеры создают тень, которая убывает с расстоянием от объекта, то есть плотность ее уменьшается. Давайте и мы создадим такой стиль. Вернемся к нашей звезде с эффектом сплошной длинной тени. Заменим серую заливку в панели Appearance черно-белым линейным градиентом.

Установим для градиента угол 135 градусов и заменим черный слайдер серым в панели Gradient (Window > Gradient).

Шаг 6

Не снимая выделения с объекта и с нижней заливки в панели Appearance, переходим Effect > Pathfinder > Add. Приложение откроет окно предупреждения, сообщающее, что мы не можем применить эффект. Игнорируем это и просто нажмем на кнопку OK.

Теперь перетащим Add Effect ниже Transform Effect в панели Appearance .

Обработка эффекта приложением может занять некоторое время. Это зависит от сложности объекта и количества копий эффекта Transform.

Шаг 7

При необходимости отрегулируйте длину градиента при помощи Gradient Tool (G) и интенсивность серого цвета.

Как вы можете видеть, мы добились эффекта неоднородной тени. Сохраним полученный эффект длинной тени в панели Graphic Style.

Мы можем применять этот стиль к пути, составному пути, тексту и группе объектов.

Шаг 8

После применения любого из разработанных нами стилей часть тени может выходить за пределы фона.

В этом случае скроем лишнюю часть при помощи Clipping mask. Дублируем фон (Cmd/Ctrl+ C; Cmd/Ctrl + F), затем размещаем новый объект выше всех существующих объектов.

Шаг 9

Выделяем верхний объект и объекты, к которым был применен эффект длинной тени, затем переходим Object > Clipping Mask > Make или используем комбинацию корячих клавиш Cmd/Ctrl + 7.

Шаг 10

Если мы применим эффект длинных теней к разным объектам, которые расположены близко друг от друга, то увидим наложение теней, как показано на рисунке ниже.

Для устранения этой проблемы сгруппируйте объекты с тенями и выделите всю группу в панели Layers. Теперь отметьте опцию Knockout Group в панели Transparency.

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

Как и обещал, сегодня мы будем учиться рисовать в веб-дизайне практически для любых объектов. И конечно же всё это делать мы будем в Photoshop. В данном случае мы будем рисовать тень для логотипа блога .

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

Перед тем как начать вот как будет выглядеть конечный результат:

Для начала я создал документ размером 800 на 455 пикселей. Вы можете ставить свои размеры, всё зависит от того для чего вы будете рисовать тень. В данном случае данных размеров вполне хватит.

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

Белая буква тут идёт отдельным слоем так как к ней мы далее будем добавлять тень.

Фон

Теперь нужно сделать для логотипа фон. Заливать мы его будем с помощью градиента. Создайте слой и назовите его «фон». В палитре цветов (слева) выберите два цвета. Первый цвет #027bb9 и второй цвет #3f6790. Вот что должно получиться на панели:

Теперь щёлкаем по слою с фоном два раза. Выбираем «наложение градиента» и выставляем следующие значения:

Не обязательно ставить именно такие значения, можете поставить свои, как вам больше понравится.

После нажимаем на «Ок». Ищем наш слой с фоном и кликаем правой кнопкой мыши на нём выбираем «Растрировать слой». Затем заходим в «Фильтры» в верхней панели. Идём в меню «Шум» и «Добавить шум». И выставляем следующие параметры:

Всё, фон готов, логотип у нас есть. В итоге вот, что у нас получилось:

Ну а сейчас переходим к самому интересному к добавлению длинной тени.

Тень

Создаём группу и называем её «Тень» в этой же группе создаём новый слой. Теперь берём и вытягиваем полосы из линейки, делаем как на рисунке:

Слева ищем инструмент «Прямоугольная область» и делаем вот такое выделение:

Ну а сейчас нам нужно в палитре цветов выбрать чёрный цвет, после этого выбрать инструмент «Градиентная заливка».

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

Возвращаемся к нашей выделенной области, нам нужно её залить. Зажимаем Shift и от левого края к правому протягиваем полосу градиента и отпускаем, вот что должно получиться:

Отменяем выделение, заходим во вкладку «Редактирование» — «Трансформирование» и «Поворот». Опять зажимаем Shift поворачиваем наш градиент на 45 градусов и так же подгоняем по краям, чтобы было ровно:

Выбираем инструмент «Ластик» и стираем всё лишнее:

И вот, что получилось:

Тень получилась немного тёмная. Меняем наложение слоя на «Мягкий свет», и просто уменьшаем процент прозрачности и всё:

Ну а сейчас нужно сделать тень для буквы.

Создаём дубликат слоя нашей тени, и перетаскиваем слой таким образов, чтобы он оказался именно под буквой. Иначе слой просто не будет видно:

Заходим в «Редактирование» — «Трансформирование» и «Масштабирование». И масштабируем тень так, чтобы она была равна с краями буквы:

Берём в руки инструмент «Ластик» и удаляем всё лишнее:

Так как тень получилась почти не заметная для слоя можно не много уменьшить прозрачность:

Вот, почти всё готово, но мне кажется что (по вкусу) можно добавить немного тени для буквы. Для этого выбираем слой с буквой, кликаем по нему 2 раза, и выбираем «Тень», выставляем такие параметры:

Всё! Теперь можете посмотреть на конечный результат:

Друзья, чтобы вам было понятнее вы можете скачать PSD исходники:

Заключение

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