Урок по созданию стильного логотипа для сайта в фотошопе, но с таким же успехом можно сделать и красивый набор иконок, или же применить этот урок при создании красивых обоев для рабочего стола...
Увидел я на просторах интернета красивый набор иконок, мне он очень понравился и я решил раскрыть их секрет.
Такую иконку можно очень удачно использовать в качестве логотипа сайта, а можно использовать при создании очень стильных обоев для рабочего стола.
"Поехали"
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