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

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

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

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

Иконка или стильный логотип для сайта в фотошопе

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):

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