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

Рисуем иконку погоды в Adobe Photoshop

В этом уроке мы научимся создавать иконку погоды в Photoshop. Урок достаточно простой, а на его основе вы сможете создать собственные иконки как Photoshop, так например и в Illustrator.

 

 


Create weather icons with photoshop - featured

Шаг 1

Создайте новый документ Photoshop. Укажите размеры 800px на 400px.

create weather icon in photoshop step 1a

Шаг 2

Залейте фон цветом #ebeee1 используя инструмент Paint Bucket Tool/ Заливка (G).

create weather icon in photoshop step 2

Шаг 3

Создаем базу для иконки. Выберите в качестве первого цвета #3bc3f6 и возьмите инструмент Rounded Rectangle Tool / Прямоугольник со скругленными углами (U). Кликните левой кнопкой мыши в документе и введите значения 250px для Width/ ширины, 250px для Height / высоты, и 65pcx для Radius / радиус. Чтобы выровнять фигуру нажмите Ctrl + A и нажмите на кнопку Align vertical/horizontal center / Выровнять вертикально/горизонтально по центру в верхнем меню. Теперь переименуйте слой в “Base”.

create weather icon in photoshop step 3a

create weather icon step 3b

Шаг 4

Создаем солнце. Для этого создайте новый слой и выберите инструмент Ellipse Tool / Эллипс (U). Нарисуйте небольшой круг цвета #e8db4b.

create weather icon photoshop tutorial step 4a

Шаг 5

Для солнечных лучей создайте новый слой и нарисуйте небольшую фигуру инструментом Rounded Rectangle Tool / Прямоугольник со скругленными углами (U). Теперь в меню выберите Layer > Duplicate Layer / Слой > Дублировать слой и переместите копию луча в противоположную солнцу часть. Нажмите Ctrl + E чтобы объединить слои с лучами. Чтобы создать больше лучей, дублируйте слой и в меню выберите Edit > Transform > Rotate 90° CW / Редактировать > Трансформирование > Поворот на 90° по ч/с. Вновь объедините слои с лучами, снова дублируйте слой и укажите поворот уже на 45°.

create weather icon in photoshop step 4a

create weathe icon in photoshop step 4b

create weather icon in photoshop step 4c

Шаг 6

Создаем облако. Для начала нажмите клавишу D, чтобы установить цвета по умолчанию. Создайте новый слой и возьмите инструмент Ellipse Tool / Эллипс (U). Нарисуйте небольшой круг и дублируйте его несколько раз (Layer > Duplicate Layer / Слой > Дублировать слой). Измените размеры и положения кругов, чтобы они выглядели как на второй картинке ниже. Выделите все слои с кругами при помощи клавиши Shift и нажмите Ctrl E, чтобы объединить их в один слой. Затем в меню выберите Layer > Layer Style > Blending Options / Слой > Стиль слоя / Параметры наложения и укажите параметры как показано в третьей и четвертой картинках ниже:

create weather icon in photoshop step 5a

create weather icon in photoshop step 5b

create weather icon in photoshop step 6c

create weather icon in phtoshop step 6d

Шаг 8

Рисуем блик. Создайте новый слой, назовите его “Highlight 1″. Убедитесь что новый слой активен и удерживя клавишу Ctrl кликните левой кнопкой мыши по слою “Base”, чтобы создать выделение по контуру базы. Возьмите инструмент Brush Tool / Кисть (B), выберите белый цвет и растушеванную кисть размером 300px и укажите 0 в параметре Hardness/жесткость. Рисуйте кистью в верхней части иконки, затем нажмите Ctrl + D, чтобы снять выделение. Смените blending mode/режим наложения для этого слоя на Overlay/Перекрытие и снизьте параметр opacity/непрозрачность до 90%.

Create weather icon in photoshop step 7

Шаг 9

Теперь давайте нарисуем отражение. Создайте новый слой и назовите его “Highlight 2″. Возьмите инструмент Elliptical Marquee Tool / Овальная область (M) и создайте выделение как показано на первой картинке ниже. Залейте выделение белым цветом. Убедитесь что активен слой “Highlight 2″ и удерживая клавишу Ctrl кликните левой клавишей мыши по слою “Base”, чтобы вызвать выделение по контуру базы. В меню выберите Select > Inverse / Выделение > Инвертировать, после чего нажмите Delete. Смените режим наложения для слоя «Highlight 2» на Overlay/Перекрытие с 30% непрозрачности.

create weather icon in photoshop step 9a

create weather icon in photoshop step 9b

Шаг 10

Добавим теней. Создайте новый слой. Снова выберите инструмент Elliptical Marquee Tool / Овальная область (M) и создайте небольшой овал под иконкой, как показано на первой картинке ниже. Залейте его черным цветом и снимите выделение. В меню выберите Filter > Blur > Motion Blur / Фильтр >Размытие > Размытие в движении. Укажите в параметре Distance/расстояние  100 px, а в Angle/Угол 0.

Теперь в меню выберите Filter > Blur > Gaussian Blur/ Фильтр > Размытие > Размытие по Гауссу и укажите радиус в 2,7 px. Переместите слой с тенью над слоем “Base” и измените режим наложения на Linear Burn / Линейный затемнитель с непрозрачностью в 25%. 

create weather icon in photoshop step 10a

create weather icons in photoshop step 10b

cerate weather icons in photoshop step 10c

Финальный результат

Create weather icons in photoshop

Автор урока Chris B.

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

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

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

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

46
    +28 surfers

      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
      • Humor
      • 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
        • Humor
        • 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.

          • dejurka-magazine
          • фотошоп
          • photoshop
          • иконки
          • adobe photoshop
          • домен dejurka.ru

          Get a link

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

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          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

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