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

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

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

27 февраля 2014 | Опубликовано в Уроки | 23 Комментариев »

В этом уроке мы научимся создавать иконку погоды в 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.

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

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




Комментарии

  1. Данила
    Thumb up Thumb down +2

    Спасибо, за таториал!

    Ведь данную иконку можно сделать в иллюстраторе (я не умею) и там же будет удобней с размерами работать, вопрос почему фотошоп? Привычка, дело вкуса или иные причины?

    Просто рано или поздно придется делать иконки и я пытаюсь разобраться в вопросе.

    Ответить

    Имя Ответ:

    Thumb up Thumb down 0

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

    Ответить

    Mary Ответ:

    Thumb up Thumb down 0

    У автора этого урока много туториалов. И все для фотошопа. Наверное все же дело привычки. Честно говоря, в иллюстраторе такую иконку можно сделать а ровно так же :) Не проще и не сложнее. Так что конкретно в этом случае разницы все же просто нет.

    Ответить

    s.o. Ответ:

    Thumb up Thumb down 0

    Но все таки я бы советовала Illustrator. Поверьте мне с вектором на много продуктивней будет в дальнейшем.

    Вектор вы можете растрировать, а вот превратить растровое изображение в вектор не возможно.

    Фотошоп хорош для работы с растровыми объектами, для обработки фото, для коллажей.

    Учитесь рисовать в Иллюстраторе.

    Ответить

    Человек Ответ:

    Thumb up Thumb down +1

    Соглашусь полностью!

    Ответить

  2. Merziuz
    Thumb up Thumb down 0

    CLnz6q pills2sale.com viagra online

    Ответить

  3. Rayford
    Thumb up Thumb down 0

    this is be cool 8) escitalopram oxalate 20mg high State-backed CRE has long been seen as one of thefrontrunners in the auction and a successful bid would give itcontrol of more than half of Hong Kong's $6.6 billionsupermarket industry as well as a brand name considered moretrustworthy than mainland China brands.

    Ответить

  4. Nelson
    Thumb up Thumb down 0

    How many would you like? effexor hot flashes breast cancer [This is my]" partner Lyn, losing the battle with the middle objective of her research grant proposal (something to do with cross-talk between insulin-like growth factor binding proteins and retinoid-X receptor heterodimerization, since you ask). "

    Ответить

  5. David
    Thumb up Thumb down 0

    I enjoy travelling rad140 and yk11 results There could be a «modest increase» in the number of those towns that choose to use tactics similar to Detroit's if the Michigan city succeeds in cutting accrued pension benefits and general obligation debt, Moody's said.

    Ответить

  6. Wilburn
    Thumb up Thumb down 0

    Could I take your name and number, please? pomi tomatoes where to buy in canada Yet we never heard about this during the primaries. Neither of the top nominees outlined how they would help end the backlog or otherwise improve services to those who have served their country. Only Speaker Christine Quinn presented a veterans platform.

    Ответить

  7. Marissa
    Thumb up Thumb down 0

    Could you transfer $1000 from my current account to my deposit account? vital strength muscle review Sophie Allport is also bracing for the name to be written on its mugs, though it already has its production line prepped for the blue coloring. The company promises the first batch will be ready in warehouses within 10 days of the name announcement, with 10,000 of the 9 pound (about $14) mugs pre-sold, as of Tuesday and more orders expected.

    Ответить

  8. Patric
    Thumb up Thumb down 0

    I'll put him on redcon1 silencer review The August 5-13 evaluation of the 341st Missile Wing covered operations, maintenance, security, safety and support activities and received unsatisfactory rating after making "tactical-level errors during one of several exercises, " the statement said.

    Ответить

  9. Isiah
    Thumb up Thumb down 0

    I live here ciprofloxacino sirve para el dolor de estomago "Wal-Mart can now take over the wholesale business, grow itat its own pace with the investment it sees fit and it could nowget aggressive in the market, " said Devangshu Dutta, who headsBangalore-based retail consultancy, Third Eyesight.

    Ответить

  10. Reuben
    Thumb up Thumb down 0

    I'm doing a phd in chemistry buy generic propecia australia Ukrainian President Viktor Yanukovich on Friday reiteratedthat Kiev was committed to signing the agreements with the EU ata Nov. 28 summit in Vilnius, Lithuania, marking a pivotal shiftaway from Russia.

    Ответить

  11. Evan
    Thumb up Thumb down 0

    What's your number? anadrol cycle before after pics Cat-eye sunglasses are almost universally flattering and perfect for giving a nod to this summer's retro trend. And, when it comes to hunting down this season's hottest sunglasses trend, hot foot it to new celeb favourite Cutler and Gross.

    Ответить

  12. Merle
    Thumb up Thumb down 0

    Very Good Site lipitor atorvastatin price Ten-year Portuguese government bond yields and the cost of insuring Portuguese debt against default surged to their highest since November 2012. Ten-year bond yields hit a high of 8.2 percent, before falling back to 7.5 percent.

    Ответить

  13. Christopher
    Thumb up Thumb down 0

    I have my own business cadastro synthroid desconto Of course, it will never totally end, not until A-Rod’s contract is resolved — and therein lies the next sticky issue for the owners and the Players Association when they sit down in two years and begin negotiations on a new Basic Agreement. Forget for a moment A-Rod’s contract — which the Yankees were dumb enough to give him, through age 42, because they envisioned marketing him as the “clean” all-time home run champion, and which he signed under false pretenses having neglected to tell them he had already been using performance-enhancing drugs — what about the Milwaukee Brewers? They were just as stupid in 2008, signing Braun to a five-year, $105 million extension, beginning in 2016, when they already had him locked up through 2015 under very reasonable terms. They did so because they had decided he was going to be the face of their small-market franchise and, as such, they needed to assure the fans of Milwaukee he would be a Brewer for life.

    Ответить

  14. Dorian
    Thumb up Thumb down 0

    How long have you lived here? vitamin b12 ampullen auf rezept He came to power in 1999 when he ousted Prime Minister Nawaz Sharif in a bloodless coup. He ruled the country for nine years before being voted out and then he left Pakistan to live in self-imposed exile in Dubai and London.

    Ответить

  15. Ramon
    Thumb up Thumb down 0

    What are the hours of work? cell kem review CARACAS, Oct 15 (Reuters) — Venezuela has agreed to free aU.S. — chartered oil survey ship and 36 crew members seized lastweek in a territorial dispute with neighboring Guyana, theboat's owner said on Tuesday.

    Ответить

  16. Carlton
    Thumb up Thumb down 0

    Could you give me some smaller notes? can ibuprofen cause liver failure "But I can tell you that Harry is very frustrated and rightfully so about the failure of the Senate to confirm a number of executive appointees, not because they are not qualified, but because Republicans don't like their agencies, " Reed said.

    Ответить

  17. Kieth
    Thumb up Thumb down 0

    How many would you like? tablet veltam plus Even if a large proportion of Brotherhood supporters are violent, "it's not true for 100%, and you can't expect to build an inclusive democracy when there's no room in your action for people with opposing views, " Wittes said.

    Ответить

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


четыре − = 2

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