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

Конверт в фотошопе

1. Начнём с создания нового изображения размером 500x500 px, а фон пока зальём белым цветом. Пока — потому что сначала мы создадим все элементы, из которых будет состоять конверт, т.е. начнём с создания формы, а затем раскрасим его, применив эффекты. В связи с этим создаваемые фигуры могут быть любого цвета и я не буду оговаривать его дополнительно. Для наглядности в качестве цвета будем задавать фигурам различные оттенки серого.

Итак, нарисуем прямоугольник при помощи инструмента Rectangle Tool (Прямоугольник), примерно как на картинке:

иконка почтового конверта в фотошопе

2. Выберите инструмент Polygon Tool (Многоугольник), с числом сторон равным трем (Sides в панели свойств).

Нарисуйте треугольник, у которого нижняя сторона будет расположена горизонтально, для этого удерживайте клавишу Shift и вращайте его до тех пор, пока он не займет нужное положение:

иконка почтового конверта в фотошоп

3. Теперь трансформируем треугольник (Edit —> Free Transform Path (Правка —> Свободное трансформирование)) так, чтобы нижние его углы совпадали с нижними углами прямоугольника, а вершина располагалась чуть выше середины прямоугольника:

иконка почтового конверта в PhotoShop

4. Инструментом Add Anchor Point Tool (Добавить опорную точку) поставьте четыре дополнительных точки на боковых сторонах треугольника (по две на каждой) как на рисунке:

иконка конверта в фотошопе

5. Инструментом Convert Point Tool (Преобразовать опорную точку) сделаем вершину треугольника сглаженной, для этого нужно нажать левую кнопку мыши на опорной точке и немного потянуть в сторону — появятся направляющие линии и вершина станет сглаженной:

иконка конверта в фотошоп

6. Инструментом Direct Selection Tool (Непосредственное выделение) выделите эту опорную точку и сдвиньте её немного вниз (можно мышью, а можно нажимая кнопку «вниз» на клавиатуре) до получения, закругленности, похожей на представленную ниже:

иконка конверта в PhotoShop

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

7. Возвращаемся к нашему измененному треугольнику. Следующим шагом будет выделение нескольких опорных точек инструментом Direct Selection Tool (Непосредственное выделение). Держа нажатой клавишу Shift, щёлкните последовательно по всем точкам кроме двух нижних, при этом выделенные точки становятся тёмными:

нарисовать иконку почтового конверта

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

нарисовать иконку конверта

8. Оставить их такими или сделать острыми — дело вкуса. Я преобразовал точки в острые щелкнув по ним инструментом Convert Point Tool (Преобразовать опорную точку):

как нарисовать конверт в фотошопе

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

как нарисовать конверт в фотошоп

10. Вот теперь нам и понадобится копия фигуры, предусмотрительно спрятанная нами в пункте 6. Сделайте её видимой и разместите поверх «клапана» конверта:

как нарисовать конверт в PhotoShop

11. Уменьшим эту фигуру (Edit —> Free Transform Path (Правка —> Свободное трансформирование)) как показано на рисунке ниже:

как нарисовать конверт

12. Вернёмся к фигуре, расположенной в нижней части конверта. Сделайте ещё одну её копию, продублировав слой. Развернём фигуру на 90 градусов против часовой стрелки (Edit —> Transform Path —> Rotate 90 CCW):

как нарисовать иконку конверта

13. Измените форму фигуры (Edit —> Free Transform Path (Правка —> Свободное трансформирование)) и разместите её как показано на рисунке:

конверт в фотошопе

14. Дублируйте полученную фигуру, а затем отразите её горизонтально (Edit —> Transform Path —> Flip Horizontal) и разместите с левой стороны:

конверт в фотошоп

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

конверт в PhotoShop

Форма конверта готова. Можно в этот конверт что-нибудь вложить. Пусть это будет карточка с неким текстом.

16. Создайте прямоугольник при помощи инструмента Rectangle Tool (Прямоугольник):

рисуем конверт

17. Добавьте текст и преобразуйте его в векторные фигуры (клик правой клавишей мыши на названии слоя с текстом, там выберите Convert to Shape (Конвертировать в форму)). После такой операции мы не сможем просто поменять текст, так как теперь он состоит из векторных форм в виде букв, зато в таком виде его можно трансформировать наравне с другими фигурами:

рисуем конверт в фотошопе

18. Выделите слои с карточкой и текстом в панели слоев, удерживая клавишу Ctrl. Немного поверните их (Edit —> Transform —> Rotate (Правка —> Трансформация —> Поворот)):

рисуем конверт в фотошоп

И разместите слои ниже правой, левой и нижней сторон конверта (фигуры 2,5,6 на рисунке ниже). Цифровые обозначения для фигур (по порядку создания) введены для того, чтобы не запутаться в слоях при применении эффектов, чем мы сейчас и займёмся, но прежде сделаем еще кое-что:

рисуем конверт в PhotoShop

19. В панели слоёв выделите три слоя с фигурами 2, 5, 6 (удерживайте Ctrl при выделении) и дублируйте их (клик правой клавишей мыши на названии одного из выделенных слоёв, там выберите Duplicate Layers... (Дублировать слои) и соглашаемся нажатием на кнопку Ok. Цвет трёх фигур, являющихся копиями, поменяйте на чёрный. В результате должно получиться вот так:

урок по фотошопу

А в панели слоёв у нас такая картина:

урок по фотошоп

20. Выделите три слоя с копиями и объедините их (клик правой клавишей мыши на названии одного из выделенных слоев, там выбираем Merge Layers (Объединить слои)). Полученный растровый слой поместите ниже слоев с фигурами 2, 5, 6.

21. Размоем этот слой, применив фильтр: Filter —> Blur —> Motion Blur ( Фильтр —> Размытие —> Размытие в движении) со следующими параметрами:

урок по PhotoShop

Затем сдвиньте слой на 3..4 пикселя вверх и установите непрозрачность слоя примерно на 25% (Opacity (Непрозрачность)) в верхней части панели слоев Layers).

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

22. Выберите в панели слоёв слой с фигурой №1. Сделаем двойной клик правой клавишей мыши по свободному месту справа от изображения слоя в панели слоёв и в появившемся окне Layer Style (Эффект слоя) выбираем пункт Gradient Overlay (Наложение градиента). Выставляем там следующие параметры:

урок фотошопа

Подтверждаем изменения нажатием на кнопку Ok и переходим к следующему слою...

23. Для слоя с фигурой №2 задайте следующие параметры в пункте Gradient Overlay (Наложение градиента):

урок PhotoShop

В пункте Stroke (Штрих):

нарисовать иконку

Точно такие же параметры в пункте Stroke будут применяться к слоям с фигурами 3, 5 и 6. Для них я в дальнейшем буду просто указывать толщину и цвет...

24. Для слоя с фигурой №3 задайте следующие параметры в пункте Gradient Overlay (Наложение градиента):

иконка в фотошопе

В пункте Stroke (Штрих) установите параметры Size: 1px, Color: #878787.

25. Для слоя с фигурой №4 параметры в пункте Gradient Overlay (Наложение градиента) будут следующими:

иконка в фотошоп

26. Для слоев с фигурами №5 и №6 задайте следующие параметры в пункте Gradient Overlay (Наложение градиента):

иконка в PhotoShop

И в пункте Stroke (Штрих) установите параметры Size: 1px, Color: #878787.

27. Для слоя с фигурой №7 установите следующие параметры в пункте Drop Shadow (Отбросить тень):

как рисуються иконки

В пункте Gradient Overlay (Наложение градиента):

как рисуются иконки в фотошопе

В пункте Stroke (Штрих) установите параметры:

как рисуются иконки в фотошоп

28. К слою (слоям) с текстом примените следующие параметры в пункте Gradient Overlay (Наложение градиента):

как рисуются иконки в PhotoShop

29. Для слоя с фоном параметры в пункте Gradient Overlay (Наложение градиента) будут такими:

как в фотошопе нарисовать конверт

В результате применения эффектов должны получить следующую картинку:

как в фотошоп нарисовать конверт

30. Теперь вернёмся к внутренней тени. К слою с имитацией тени, полученной в пункте 21, добавьте слой-маску (иконка Add layer mask (Добавить слой-маску) в нижней части панели слоёв). Выберите инструмент Gradient Tool (Градиент) и чёрно-белую заливку. Залейте градиентом слой-маску сверху вниз, как показано на рисунке ниже. Этим мы уберём тень в верхних углах конверта:

как в PhotoShop нарисовать конверт

Фактически наш конверт готов. Осталось добавить отражение и перспективу.

31. Для создания отражения нужно выделить все нарисованные нами слои в панели слоёв, кроме слоя с фоном. Дублируем эти слои (Duplicate Layers... (Дублировать слои)) и объединяем их (Merge Layers (Объединить слои)).

32. Полученное в результате растровое изображение отразим вертикально (Edit —> Transform —> Flip Vertical (Правка —> Трансформация —> Отразить вертикально)):

как в фотошопе нарисовать иконку конверта

И передвигаем его вниз к основанию конверта:

как в фотошоп нарисовать иконку конверта

33. Теперь добавим перспективу. Выделите все слои конверта и слой с его отражением.

Исказим изображение Edit —> Transform —> Distort (Правка —> Трансформация —> Исказить) примерно как на рисунке ниже (для удобства нужно уменьшить изображение):

как в PhotoShop нарисовать иконку конверта

34. Приведём в порядок отражение. К слою с отражением добавьте слой-маску и залейте её черно-белым градиентом снизу вверх примерно как на рисунке. Непрозрачность слоя установите около 50%:

урок про иконки

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

урок про иконки в фотошопе

36. Разверните прямоугольник (Edit —> Free Transform Path (Правка —> Свободное трансформирование)) и поместите его как на картинке ниже:

иконка почтового конверта в PhotoShop

37. Инструментом Direct Selection Tool (Непосредственное выделение) разместите опорные точки прямоугольника так, чтобы придать ему такую форму, как будто он лежит на плоскости в пространстве. Исключительной точности в придании прямоугольнику перспективы не понадобится, поэтому просто придайте ему форму, похожую на изображённую на картинке ниже:

иконка почтового конверта

38. Финальный шаг. Размойте прямоугольник Filter —> Blur —> Gaussian Blur (Фильтр —> Размытие —> Размытие по Гауссу). Перед применением фильтра появится предупреждение о том, что для продолжения фигура будет автоматически растрирована. Согласитесь нажатием на кнопку Ok и для размытия установите радиус (Radius) 16 px. После применения фильтра установите непрозрачность слоя на 40..45%:

иконка конверта

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

 

  • Ok, на днях выложу, а вот пока что подобный урок http://mediasapiens.tv/archives/3402

  • XxTx|A|xTxX

    Еще можно по фото коллажу… Я это имел ввиду в одном из комментариев…

  • XxTx|A|xTxX

    Можно,  спасибо!

  • Могу кстати выложить урок PhotoShop по обработке и улучшению фотографии. Как убрать прищи, сделать кожу более красивой, как придать эффект гламурности в фотошопе…

  • Да , спасибо, я стараюсь систематически выкладывать различные уроки на mediasapiens.tv и не только по фотошопу. Следите за обновлениями на нашем сайте!

  • XxTx|A|xTxX

    Отличный урок, хорошо и понятно объясняешь… Респект…
    З.Ы. Выкладывай побольше таких уроков, или еще можешь наделать уроков, как фотку своей девушки можно превратить в шедевр, а потом распечатать…
    Было бы круто… Кто за ???!!!
    Спасибо за урок!

  • Schisma

    Спасибо большое, очень полезный урок.