Иконка или логотип в фотошопе

[web-des]

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

Увидел я на просторах интернета красивый набор иконок, мне он очень понравился и я решил раскрыть их секрет.

Такую иконку можно очень удачно использовать в качестве логотипа сайта, а можно использовать при создании очень стильных обоев для рабочего стола.

"Поехали"

1. Создаём новое изображение:



2. Фон зальём белым цветом (спомощью Paint Bucket Tool). Затем выбираем инструмент Ellipse Tool, зажимаем клавишу Shift и рисуем круг любого цвета:



3. Заходим в Blending Options слоя с кругом (правый клик по слою на панеле слоёв, там выбираем пункт Blending Options...) и переходим на вкладку Drop Shadow (отбрасывание тени), там выставляем следующие значения:



4. Переходим на вкладку Inner Glow (внутреннее свечение) и там делаем как показано ниже:



5. А на вкладке Gradient Overlay делаем вот-так:



А это градиент в подробностях (чтобы открыть это окошко, нажмите по цветной полосе справа от надписи Gradient — красными цифрами обозначены шестнадцатеричные коды цветов:



6. Жмём Ok, снова Ok и видим такой результат:



7. Нарисуем ещё один круг, но немного меньшего размера (тем же способом, что и ранее):



8. Заходим в Blending Options слоя с верхним кругом, на вкладку Inner Shadow (внутренняя тень) и там выставим следующие значения:



9. На вкладке Outer Glow (внешнее свечение) такие:



10. А на вкладке Gradient Overlay выставим следующие параметры градиента (красными цифрами указаны шестнадцатеричные коды цветов — устанавливаются в подробных настройках градиента, как было показано ранее):



11. Не закрывая окно Layer Style перейдём в окошко для рисования, зажмём левую клавишу и сместим градиент немного вниз и вправо, как показано ниже:



12. Теперь в окне Layer Style можно нажать Ok. Выберем инструмент Rounded Rectangle Tool, радиус скругления углов поставим равным 15 пикселей (Radius: 15px) и нарисуем фигуру следующего вида:



13. Применим к этой фигуре несколько эффектов. На вкладке Drop Shadow вот такие:



14. На вкладке Outer Glow такие:



15. На вкладке Inner Glow вот аткие:



16. И наконец-то перейдём на вкладку Gradient Overlay и настроим параметры градиента:



Вот так выглядит окошко с подробными настройками градиента:



17. Жмём везде Ok и получаем следующий результат:



18. Получилось что-то похожее на дорожный знак Давайте добавим какой-нибудь текст (цвет текста не важен). Я написал название сайта:



19. применим некоторые эффекты. Сначала Inner Shadow:



20. Затем Outer Glow:



21. А после Gradinet Overlay:



С вот-такими настройками цвета:



22. Жмём везде Ok. На этом этапе мы начнём рисовать блики. Для этого сразу нарисуем ещё один круг, такого же размера как и круг всерху:



23. Сейчас берём инструмент Direct Selection Tool и трансформируем круг следующим образом (если вам не хватит опорных точек, то их можно будет добавить с помощью Add Anchor Point Tool):



24. Применим к полученной фигуре некоторые эффекты. сразу уберём параметр Fill Opacity до нуля:



25. Затем добавим внутреннее свечение (Inner Glow):



26. И добавим градиент (Gradient Overlay):



Так выглядит окно подробной настройки градиента (напоминаю, что в нижних квадратиках выставляется цвет — в данном случае он белый, а в верхних — непрозрачность — значения непрозрачности я написал рядом красными цифрами):



Жмём в окошках Ok и получаем блик следующего вида:



27. Сделаем ещё один блик. Для этого нарисуем ещё один круг и исказим его следующим образом:



28. Добавим к этому блику такие же эффекты, как и к прошлому (для этого на панеле слоёв, на слое с первым бликом, кликните правой клавишей и выберите пункт Copy Layer Style, затем кликните правой клавишей по слою с новым верхним бликом и выберите Paste Layer Style), непрозрачность (Opacity) этого слоя немного уменьшите:



29. Теперь сделаем следующее: кликните правой клавишей по слою с текстом и выберите пункт Resterize Layer; затем выделите слой с текстом и прямоугольником (чтобы выбрать два слоя, зажмите клавишу Ctrl и кликните левой клавишей по обоим слоям, по очереди), зайдите в меню Edit и выберите пункт Free Transform Path (произвольная трансформация), поверните немного выделенные слои:



30. Теперь исказим нашу иконку. Для этого сразу нужно выделить все слои, после этого идём в меню Edit —> Transform Path —> Skew и, передвигая верхние квадратики, искажаем наше изображение, пока не достигнем результата, похожего на мой:



31. Ну и последнее действие: на панеле слоёв выделим слой с самым нижним кругом, перейдём на панель рисования и немного сдвинем круг вниз (с помощью инструмента Move Tool):



Ну вот мы и нарисовали красивую иконку, логотип или что-то похожее на них... Если вы к этому времени хорошо изучили прошлые уроки, то этот урок вы сделаете без затруднений, если плохо — перечитывайте прошлые уроки или задавайте свои вопросы мне лично.

Источник: www.designarts.ru