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

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

Социальные иконки со швейными стёжками

7 августа 2012 | Опубликовано в Уроки | 2 Комментариев »

В этом уроке мы покажем вам, как создать красивые социальные иконки в Adobe Photoshop CS6. Мы будем использовать новые функции для обводки, с помощью которых теперь можно  легко сделать стежки и регулировать их внешний вид. Так что же мы ждем? 

 

 

Нам понадобятся:

Окончательный результат:

Шаг 1: Создание нового документа

Создайте новый документ размером 570px на 470px и установите цвет фона #333236.

Затем перейдите в  Filter — Noise — Add Noise.


Добавьте немного света в центре, используя мягкую кисть (Brush Tool (B)) белого цвета.

Измените режим наложения слоя на Soft Light и установите непрозрачность  50%

Шаг 2: Создаем форму для иконки

Наша форма для иконки должна выглядеть, как на скриншоте ниже. Создайте прямоугольник размером 80px на 120px цветом # 3b5997 и закругленными углами  с радиусом 5px. Затем измените его с помощью Direct Selection Tool (A) и Pen Tool 

Добавьте стили слоя

  • Контур: # 7796cb, # 7b97c6, # 324579
  • Градиентная заливка:

Вот результат.

Шаг 3: Добавление узора

Создайте новый документ в Фотошопе размером 5px на 5px и убедитесь, что фон прозрачный.

Полностью увеличьте холст с помощью Zoom Tool (Z), или просто нажав Ctrl +  на клавиатуре, и используйте Pencil Tool (B), чтобы сделать узор как на скриншоте ниже:

Затем перейдите в Edit — Define Pattern и сохраните нашу заливку. Назовите ее как хотите и примените к нашей форме.

  • Заливка узором (Pattern Overlay):

Шаг 4: Добавляем освещение

Создайте слой над фигурой и сделайте его обтравочной маской для нашей формы, нажав на линию между слоями.

Используя мягкую кисть (B)  для нижней части формы, измените режим наложения слоя на Soft Light и уменьшите непрозрачность на 80%.

Добавьте еще один слой, выберите инструмент Gradient Tool (G) -Reflected Gradient от белого к прозрачному, и добавьте его в верхнюю части формы. Установите режим смешивания слоя на Soft Light и уменьшите непрозрачность на 50%.

Добавьте еще один слой. На этот раз мы создадим более темный оттенок. Используйте Reflected Gradient от черного к прозрачному и добавьте его в верхней части формы. измените режим наложения слоя на Multiply и уменьшите непрозрачность на 50%.

Шаг 5: Добавление стежек

Добавить стежки  в Photoshop CS6 очень просто. Сначала создайте новую форму поменьше (шириной  70px).

Вам нужно настроить контур, нажав Дополнительные параметры (More Options) и установив тире (Dash) 5 и разрыв (Gap) 6. Изменить цвет контура на # a4b1cf и уберите заливку (Fill- 0%)

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

  • Внешняя тень (Drop Shadow):

 

Шаг 6: Добавляем иконку

Откройте скачанные иконку и расположите её в центре нашей ленточки.

Примените следующие стили слоя:

  • Stroke (Контур):
  • Gradient Overlay (Градиентная заливка): # dddddd, # FFF
  • Drop Shadow (Внешняя тень):

Добавьте надпись с помощью Text Tool (T).

Дублируйте текстовый слой, измените цвет на # 2b406a и сместите его один раз, используя клавишу стрелки.

Шаг 7: Добавление теней

Дублируйте слой с формой и измените цвет копии на # 000000. Поместите этот слой под слоем с базовой формой. Затем перейдите в Filter — Blur — Gaussian Blur.

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

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

Добавьте линию размером 1px и цветом # 515055 при помощи Line Tool (U) и поместите её над тенью.

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

Автор -1stwebdesigner

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

Возможно, вас заинтересуют статьи:




Комментарии

  1. ve
    Thumb up Thumb down +6

    симпатично!

    Ответить

  2. Жанна
    Thumb up Thumb down 0

    Спасибо, отличный урок, как раз то что мне нужно было! =)

    Ответить

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


3 + два =

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