Уроки фотошопа, графика, дизайн
arrow

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

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

Итак, приступим.

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

1. Создайте новый документ с произвольным размером (я взял 600x600px). Фон для удобства можно залить серым цветом.

2. Теперь создадим новый слой (Shift+Ctrl+N) и присвоим ему имя convert. Берем Rectangular Marquee Tool (М), рисуем прямоугольник и заливаем его белым цветом:

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

3.Снимаем выделение и идём в Layer (слой) -> Layer Style (стиль слоя) -> Blending Options (настройки смешивания). Здесь нам понадобится Gradient Overlay (заливка градиентом), выставляем следующие опции:

Создаем иконку конверта

Иконка конверта: рисуем ленту

4. Создайте новый слой с именем lenta, с помощью уже знакомого нам Rectangular Marquee Tool. Рисуем прямоугольник и заливаем его красным цветом:

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

Теперь делаем дубликат слоя, ставим его ниже предыдущего и заливаем прямоугольник синим цветом. В итоге получаем 2 прямоугольника красного и синего цветов:

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

Слейте эти 2 слоя (Ctrl+E) и дублируйте слои до тех пор, пока не получите ленту до самого низа слоя convert:

5. Возьмите инструмент Edit (редактирование) -> Transform (трансформация) -> Skew (скос) и сдвиньте правые точки вниз (не забудьте слить все слои). Должно получиться так:

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

6.Займёмся обрезанием лишнего. Ctrl + левая кнопка мыши (далее ЛКМ) на миниатюре слоя convert, чтобы получить нужное выделение

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

Затем Select -> Inverse (Shift+Ctrl+I). Перейдите на слой lenta и нажмите delete. Вы должны увидеть похожую картину:

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

7. Дублируйте этот слой и отразите его по горизонтали (Edit -> Transform -> Flip horizontal). Теперь передвиньте к правому углу конверта:

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

Иконка конверта: тень

8. Создайте новый слой, назовите его shadow. Ctrl + ЛКМ на слое convert, возьмите чёрно-белый (убедитесь что цвета именно такие) градиент и залейте им показанную на рисунке область слева направо так, чтобы получилась тень:

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

Режим смешивания слоя – Multiply (умножение)

Opacity (непрозрачность) – 35%

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

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

Тоже самое сделайте для второй стороны:

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

Иконка конверта: создание складок

9. Берем Pen Tool и рисуем трапецию:

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

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

Дайте ей имя niz.

Теперь идём в Blending Options и настраиваем нашу фигуру:

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

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

10. Сейчас мы доделаем полоску на нижней части конверта. Для этого скопируйте слой lenta и примените Edit -> Transform –> Rotate 90 CW. Поместите этот слой над слоем niz и установите полоску в нижней части конверта таким образом:

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

Стираем неполные части, клонируем наш слой, и доделываем полоску до конца:

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

11. Создайте новый слой и сделайте тень для нижней части конверта тем же способом, которым мы делали это в шаге 8, только теперь Opacity установите на 54%.

12. Теперь сделайте тень для слоя niz. Ctrl + ЛКМ на слое niz, появится нужное выделение. Создайте новый слой, и залейте выделение чёрным цветом. Поместите этот слой под слой niz, пройдите в Edit -> transform -> Sсale и вытяните верхнюю часть так, чтобы она была видна из-под слоя niz. Теперь размойте слой с тенью: Filter -> Blur -> Gaussian Blur со значением 1:

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

13.По аналогии сделайте верхнюю часть конверта:

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

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

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

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

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

14. Перейдите на слой с тенью для нижней части конверта и выставьте для него Opacity на 50%

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

15. И наконец, последний штрих – тень под конвертом. Ниже всех слоёв (но выше фона) рисуем чёрный прямоугольник, и применяем к нему Gaussian Blur со значением 2, и Opacity слоя 70%.

Наш конверт готов!) Если хотите сделать фон прозрачным, просто удалите Background слой.

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

M@X
Веб-дизайнер, основатель проекта psforce.ru и студии веб-дизайна Disarto.

Комментарии (1)

  1. Илья:

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

Оставить комментарий

Имя: *

Сообщение: