Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Рисуем иконку компаса с длинной тенью в Adobe Photoshop

12 февраля 2015 | Опубликовано в Уроки | 5 Комментариев »

В этом уроке мы будем создавать простой, но интересный компас в программе Adobe Photoshop. Мы будем работать с различными инструментами, такими как Pen/Перо, Rounded Rectangle/Прямоугольник с закругленными краями и др. Также вы узнаете как объединять базовые фигуры для создания более сложных. Вы увидите как работать со стилями слоев и создавать самые разные тени, включая длинную.

 

 


Final product image

1. Готовимся к работе

Шаг 1

Создайте новый файл Photoshop (File > New/Файл>Создать). Укажите документу размер 500 px × 500 px.

New File

Шаг 2

Кликните по иконке Add Adjustment Layer/Добавить корректирующий слой в нижней части палитры Layers/Слои. Выберите Solid Color/Чистый цвет.

Add Adjustment Layer Solid Color

Шаг 3

Выберите светло-красный оттенок (#db687b).

Selecting color

Шаг 4

Дважды кликните по слою с чистым цветом и укажите ему стиль слоя Pattern Overlay/Перекрытие узора. Используйте узор free pixel pattern from PSDfreemium. Настройте параметры стиля как показано ниже.

Pattern Overlay

Шаг 5

Смените имя слоя на background (фон). Старайтесь переименовывать все слои, чтобы потом было понятно где что находится.

Renaming layer

2. Создание базы

Шаг 1

Для начала нужно создать базу для иконки. Выберите в качестве первого цвета #3ab2cb. Возьмите инструмент Rounded Rectangle/Прямоугольник с закругленными краями, и укажите Radius/Радиус в 30 px. Удерживая Shift, растяните фигуру.

Draw a rounded rectangle shape

Шаг 2

Дважды кликните по слою с прямоугольником и укажите ему стиль слоя Gradient Overlay/Перекрытие градиента. Выберите градиент от белого к черному. Настройте стиль как показано ниже.

Gradient Overlay

Result after Gradient Overlay added

Шаг 3

Создайте новый слой и разместите его над фоном с базой иконки. Удерживая Control кликните по слою с базой, чтобы создать выделение по контуру базы. В новом слое кликните правой кнопкой по выделению и выберите Stroke/Обводка. Настройте параметры обводки как показано ниже.

Add Stroke

Result after adding stroke

Шаг 4

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

Hide some of the stroke line

Шаг 5

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

Apply lighter colored stroke

Шаг 6

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

Hide some of the light colored stroke

3. Рисуем компас

Шаг 1

Нарисуйте круг, затем круг поменьше внутри первого в режиме Subtract Front Shape/Вычесть переднюю фигуру. В итоге должно получиться кольцо. Укажите ему цвет #e4ffff.

Sutract Front Shape

Шаг 2

В режиме Combine Shapes/Объединить фигуры нарисуйте в верхней части кольца треугольник.

Add triangle path

Шаг 3

И еще один треугольник в нижней части.

Add another triangle

Combine Shapes

Шаг 4

Дублируйте оба треугольника и поверните их на 90°.

Duplicate and rotate the triangles

Теперь у нас четыре указателя на все части света.

Four directions

Шаг 5
Повторите предыдущие шаги, чтобы добавить меньшие треугольники на 45°.

Add smaller triangle

The result after triangles added

Шаг 6

Кликните дважды по слою с фигурами кольца и треугольников, чтобы указать им стили слоя Gradient Overlay/Перекрытие градиента и Drop Shadow/Тень. Настройте параметры стилей как показано ниже.

Gradient Overlay

Drop Shadow

Шаг 7

Нарисуйте еще одно меньшее кольцо поверх предыдущей фигуры и укажите ему цвет #eaeded.

Add small ring shape

Small ring shape on top of the icon shape

Step 8

Нарисуйте половинки треугольников того же цвета поверх фигуры с целыми треугольниками.

Add half triangle

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

Add another half triangles

Шаг 9

Кликните дважды по слою с новым кольцом и половинками треугольника. Укажите слою стиль Gradient Overlay/Перекрытие градиента.

Gradient Overlay

Укажите линейный градиент от серого цвета (#d7d7d7) к белому (#ffffff).

Color in the gradient

The result

Шаг 10

Создайте новый слой поверх всех остальных. Удерживая Control, кликните по предыдущему слою, чтобы создать выделение по контуру. В новом слое кликните по выделению правой кнопкой и выберите Stroke/Обводка. Настройте параметры обводки как показано ниже, используя цвет #eeefef.

Add thin Stroke

Получится легкая, тонкая обводка.

Add thin stroke line

Шаг 11

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

Reveal some of the stroke

Шаг 12

Создайте новый слой и расположите его под фигурами компаса. Удерживая Control, кликните по фигуре компаса, чтобы создать выделение по контуру. В меню выберите Edit > Fill/Редактировать/Заливка. Настройте параметры заливки как показано ниже.

Fill black behind the shape

Шаг 13

Снимите выделение, нажав Control D. В меню выберите Filter > Blur > Motion Blur/Фильтр>Размытие>Размытие в движении. Укажите угол в -45°.

Add Motion Blur

Шаг 14

Смягчите тень при помощи фильтра Gaussian Blur/Размытие по Гауссу. В меню выберите Filter > Blur > Gaussian Blur/Фильтр>Размытие>Размытие по Гауссу.

Soften shadow using Gaussian Blur

Шаг 15

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

Reduce Opacity

The result

Шаг 16

Добавим компасу стрелку. Нарисуйте квадрат в центре компаса. Затем при помощи свободного трансформирования (Control T) поверните квадрат на 45°, затем сплющите его, как показано ниже, и вновь поверните.

Draw a rectangle rotate it
Squeeze the shape rotate it

Шаг 17

Кликните дважды слою со стрелкой, чтобы указать ему стили слоя Inner Glow/Внутреннее свечениеGradient Overlay/Перекрытие градиент и Drop Shadow/Тень. Настройте стили как показано ниже.

Add Layer Styles

Inner Glow

Gradient Overlay

Drop Shadow

Шаг 18

Мы хотим, чтобы половина стрелки была белой, а вторая половина красной. Для этого просто дублируйте стрелку и при  помощи инструмента Pen/Перо удалите нижнюю точку.

Fill half the arrow with red

Шаг 19

Нарисуйте небольшой круг в центре стрелки. Кликните дважды по слою с кругом, чтобы указать ему стили слоя Inner Glow/Внутреннее свечениеGradient Overlay/Перекрытие градиента и Drop Shadow/Тень.

Add small circle on center of the arrow

Inner Glow

Gradient Overlay

Drop Shadow

4. Добавляем тень

Шаг 1

Создайте новый слой и поместите его между компасом и стрелкой. При помощи инструмента Polygonal Lasso/Прямолинейное лассо нарисуйте тень как показано ниже и залейте ее черным цветом. Снизьте Opacity/Непрозрачность этого слоя до 20%. Удерживая Control, кликните по прямоугольной базе и добавьте маску слою с тенью. Теперь тень видна только на базе.

Add long shadow

Шаг 2

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

Add stronger shadow

Шаг 3

Добавьте еще один слой и вновь добавьте тени под стрелкой. Инструментом Brush/Кисть на 0% Hardness/Жесткости и Opacity/Непрозрачности в 5% рисуйте тень под стрелкой.

Add subtle shadow

Step 4

Создайте еще один слой. На этот раз добавим бликов. Рисуйте белым цветом в верхней левой части базы. Снизьте Opacity/Непрозрачность слоя.

Add highlight

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

Add another highlights

Шаг 5

Теперь давайте добавим тень самой базе иконки. Создайте новый слой под базой. Удерживая Control, кликните по слою с базой и залейте выделение черным цветом.

Adding shadow

Шаг 6

Нажмите Control D, чтобы снять выделение. Смягчите тень при помощи фильтра Gaussian Blur/Размытие по Гауссу.

Soften shadow using Gaussian Blur

Шаг 7

Вы можете дублировать тень, нажав Control J, если хотите сделать ее более заметной. Если же тень слишком заметна, снизьте параметр Opacity/Непрозрачность.

Before and after adding more shadow

Результат

The final result

Автор урока Mohammad Jeprie

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

Смотрите также:




Комментарии

  1. Riptil
    Thumb up Thumb down 0

    Хороший урок, спасибо

    81b8d7e2a46275c7b497ba6cf14bb082.jpg

    Ответить

  2. Smile
    Thumb up Thumb down -2

    oSIMDiOBefiR7

    Ответить

  3. Vadik
    Thumb up Thumb down +1

    Вот, что получилось у меня. 

    2i23881.png

    Ответить

  4. Катя
    Thumb up Thumb down 0

    ikonkakompas1.1424638372.jpg

    Ответить

  5. Олег
    Thumb up Thumb down +1

    Благодарю за урок, всё доступно! Делюсь своим результатом.N7I5cKYOBP8.jpg

    Ответить

Оставить ответ


9 + = одиннадцать

Вставить изображение