Как сделать длинную тень для объекта в Photoshop

Разместил / Просмотров: 9 066 / комментария 4

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

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

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

Скачать

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

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

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

Фон

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

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

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

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

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

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

Тень

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Скачать

Заключение

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

  • Konstantin

    Клевый урок и результат. Надо будет адаптировать эту технику под Gimp

  • Я думаю, что в нём тоже можно подобное сделать.

  • Konstantin

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

  • Отлично получилось :)