html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humour
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favourites

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

В этом уроке мы покажем вам, как создать красивые социальные иконки в 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

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

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

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

2

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humour
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humour
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • sobeninaolga
          • domain dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.ru!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

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

            Facebook

            К сожалению, вы не попадаете под условия акции