Рисуем иконку солнца

разное, 03.06.2010 Четверг, 01:16
Теги: Photoshop, солнце, дизайн, иконки, Уроки
     Меня попросили нарисовать вот такую иконку солнца из набора погодных иконок. Иконка простенькая так что вот собственно и урок.

     В уроке я не буду расписывать шаги и давать скриншоты стилей как это обычно делают в фотошопных уроках. Вместо этого я опишу общий подход и несколько полезных моментов. Ведь все стили вы и сами можете посмотреть в исходном файле sun.psd (я специально создал его для урока), который можно свободно скачать по ссылке в конце этого поста.

     Иконка, которую мы будем учится рисовать, предельно проста. Для новичка в photoshop единственную сложность может создать создание (каламбур) сложной лучистой фигуры иконки. На самом деле 99% простых фигур можно получить путем небольшого модифицирования одной из стандартных фигур набора photoshop. Особенно учитывая то, что умение правильно и к месту использовать стандартные иструменты это входные двери на проффессиональный уровень овладевания программой. Вот и в этот раз я создал готовую фигуру Seal из стандартного набора. Обратите внимание что модифицировать фигуру проще всего в режиме путей. В фигуре Seal я с помощью инструмента direct_selection выбрал точки через одну (зажав shift) и растянул в разные стороны с помощью free transform path. Затем я залил фигуру черным цветом, получив при этом именно то, что мне и нужно было для создания основы иконки. Посмотрите на скриншот ниже:
Это была бы самая сложная часть в рисовании иконки если бы не готовая фигура, которая сэкономила мне кучу времени.

     Как мы и договорились я не буду говорить о том, какие стили необходимо назначит нашему первому слою - всё это вы сами в гораздо более удобной форме сможете усвоить из исходника, просто открыв blending options первого слоя в папке маленького солнца (в исходнике 2 заготовки: малнькое солнце размером с оригинал иконки и большое, размером примерно 400 на 400px).

     Следующим слоем у нас будет слой с самим солнцем. Это круг, который слегка выступает за начальные точки лучей. С этим слоем всё так же просто кроме одного но. Вы никогда не получите подобный градиент со смещенным центром, подкручивая настройки стиля. Для этого, не закрывая окно стилей, возьмите инструмент move и подвиньте сам градиент на своем рисунке! Это весьма не очевидное свойство photoshop и именно поэтому я пишу о нем здесь. Смотрите скриншот:
      Далее я просто добавлял различные блики, стараясь соответствовать оригиналу. Единственное, что тут стоит прояснить, это использование масок слоя. Что это такое - я не буду рассказывать - конкретно по использованию инструмента маски написано море уроков, кажется пара была даже на моем форуме. Вместо этого я объясню, почему я использовал именно маску а не стер лишние участки резинкой. Маска позволяет легко отменить сделанные изменения, а вот стертое уже не так просто вернуть назад.

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

А вот исходник с результатом урока: sun.psd

Жми на пятую!
71, 5, 6690
№5
Спасибо за урок.
№4
Симпатишно =)
№3
Как то больше на таблетку или желток похоже :)
№2
Снизу-справа блик, по-моему ни к месту.
Ответ: По моему очень даже к месту - обратный свет. К тому же этот блик есть на оригинальной иконке.
№1
Красивая вебдванольная иконка получилась :)
    © Блог StudioAD.ru 2024 год нашей эры. Не все права защищены... Копирование любой информации и материалов с обратной ссылкой приветствуется! Хостинг от uCoz.

    Если вам пришлись по душе материалы моего блога - подпишитесь на RSS дабы получать обновления незамедлительно! Я рад что вы читаете и комментируете мои экзерсисы, приятного времяпрепровождения.