Уроки фотошопа Скачать Показуха Вопросы & Ответы О нас
Урок по рисованию в фотошопе иконки папки из Windows Vista
вода анимация кисти для фотошопа брызги Windows Vista пена Ron Deviney 3D верстка абстракции портфолио аватар афиша грандж кнопка для сайта уроки фотошопа скин трава день Святого Валентина иконка обои новый год наши новости логотип для сайта растения грязь DesignArts.RU дизайн сайта мусор обработка фото
22

Иконка папки из Windows Vista в фотошопе

Guljay S.V.
Уроки фотошопа
16 июля 2007

На днях мне пришло письмо с просьбой написать урок по созданию папки в стиле Windows Vista, что я и сделал.

Папка получилась довольно красивой, можете даже сделать целый пакет иконок, если хотите.

Урок не сложный, сможет его сделать каждый. Если что-то не получится — оставляйте комментарии, показывайте, рассказывайте, спрашивайте.

Как нарисовать иконку папки в стиле Windows Vista (в фотошопе)

1. Создаём новое изображение с белым фоном. Затем выбираем Rectangle Tool и рисуем такой прямоугольник (любого цвета):

папка в стиле Windows Vista

2. Непрозрачность слоя (Opacity) поставим равной 75%:

иконки из Windows Vista

3. Выбираем инструмент Direct Selection Tool и трансформируем наш прямоугольник следующим образом:

иконка в стиле Windows Vista

4. Сейчас непрозрачность заливки Fill выставьте в 0% (находится там же, где мы изменяли Opacity).

Затем заходим в Layer Style данного слоя (для этого на панели слоёв Layers кликните правой клавишей по слою, выберите Blending Options...), там переходим на вкладку Inner Shadow (самозатенение) и выставляем следующие параметры:

иконка Windows Vista

5. После перейдём на вкладку Gradient Overlay (градиент) и там выставим следующие параметры:

иконки в стиле Windows Vista

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

папка в стиле Vista

Жмём везде Ok и смотрим на результат:

в стиле Windows Vista

6. Это мы нарисовали заднюю сторону папки. Начнём рисовать фронтальную сторону.

Создайте новый слой. Затем с помощью Rectangle Tool нарисуйте прямоугольник следующего вида:

иконка папки Windows Vista

7. Затем измените непрозрачность слоя (Opacity) на 75% и трансформируйте прямоугольник следующим образом (с помощью инструмента Direct Selection Tool):

иконка папки в стиле Windows Vista

8. Примените к фигуре такие же эффекты, как и к предыдущей. Для этого на панели слоёв кликните правой клавишей по уже оформленному слою с задней стороной папки, и из появившегося меню выберите пункт Copy Layer Style, потом кликните по слою с фронтальной стороной папки и выберите Paste Layer Style.

Сейчас зайдите в Layer Style этого слоя и там, на вкладке Gradient Overlay измените угол поворота градиента (Angle) с -45 градусов на -75 градусов. Должно получится как у меня:

иконка папки из Windows Vista

9. А сейчас создайте ещё один слой и на нём нарисуйте прямоугольник, трансформируйте его как показано ниже:

как нарисовать иконку

10. Скопируйте эффекты с ранее созданного слоя и примените их к этому слою (как мы это делали ранее).

Сейчас зайдите в Layer Style данного слоя и там, на вкладке Gradient Overlay измените угол поворота градиента (Angle) на -90 градусов.

Перейдите на вкладку Stroke (обводка) и установите там следующие параметры:

как нарисовать иконку

Получиться должно вот так:

как рисуются иконки

11. Нарисуйте ещё один прямоугольник и трансформируйте его как показано ниже:

иконки в фотошопе

12. Скопируйте эффекты с предыдущей фигуры и примените их к этой:

урок по фотошопу о иконках

13. А сейчас будет самое сложное из того, что есть в этом уроке.

Выберите инструмент Pen Tool и нарисуйте фигуру следующей формы (при этом используйте так же инструмент Direct Selection Tool):

иконки в PhotoShop

14. Зайдите в Layer Style данного слоя, перейдите на вкладку Gradient Overlay и сделайте там так как у меня:

нарисовать иконки в PhotoShop

Вот подробные настройки градиента:

как рисуются иконки

15. На вкладке Stroke настройте обводку:

в чём рисуют иконки

16. Непрозрачность заливки Fill выставьте в 0%. Вот что должно у вас получиться:

программа для рисования иконок

17. Нарисуйте ещё один прямоугольник, трансформируйте его как у меня:

иконки в фотошоп

18. Непрозрачность заливки Fill выставьте в 0%.

Затем зайдите в Layer Style на вкладку Gradient Overlay и выставьте следующие параметры:

урок по фотошоп о иконках

Ниже приведены подробные настройки градиента:

урок про иконки

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

урок о иконках в фотошопе

19. Сейчас нарисуйте фигуру следующей формы:

нарисовать иконку

20. Непрозрачность заливки Fill выставьте в 10%, затем зайдите в Layer Style на вкладку Inner Shadow и там сделайте так:

иконка для сайта

Если вы всё сделали верно, то у вас должна получиться такая тень:

иконки в стиле Vista

21. Это ещё не всё. Нужно добавить блики. Что мы для этого будем делать: создайте новый слой, затем зажмите клавишу Ctrl и на панели слоёв кликните по слою с фронтальной стороной фигуры, чтобы создать выделение.

Выберите инструмент Paint Bucket Tool и залейте выделение белым цветом:

иконки из Vista

22. Не снимая выделение выберите Elliptical Marque Tool, зажмите клавишу Alt и выполните следующее выделение:

иконка как в Windows Vista

23. Инвертируйте выделение (нажмите Shift + Ctrl + I или в меню SelectInverse), удалите выделенную часть слоя (клавиша Delete):

иконка в стиле Windows Vista

24. Добавьте к слою маску (на панели слоёв кликните по иконке в виде прямоугольника, внутри которого круг) и залейте её чёрно-белым градиентом слева направо (с помощью инструмента Gradient Tool):

иконка из Windows Vista в фотошопе

Вот то вы получите:

иконка из Windows Vista в PhotoShop

25. Создайте ещё один слой и повторите последние действия для создания ещё одного блика:

нарисовать иконку в стиле Windows Vista

Всё! Красивая папка в стиле Windows Vista готова!

Теперь вы можете вложить внутрь папки какие-нибудь предметы и сделать свой собственный набор иконок в стиле Windows Vista!

PS: возникли вопросы? Задавайте их в комментариях!

2695 просмотров
посты с похожей тематикой
0
#6Chernousov Sergey: как сделать значок windows самому в фотошопе?
29 июля 2011 в 11:48:35
158
#5Гуляй Сергей: >> "а как сделать иконку (не иконку папки)?"
Для [Котовский Лев]: какую иконку? Понятней вопросы формулируйте.
9 мая 2011 в 12:55:37
0
#4Котовский Лев: вот что у меня вышло вместе со всеми уроками
8 мая 2011 в 19:03:57
0
#3Котовский Лев: я имею в веду в фотошопе
8 мая 2011 в 18:52:06
0
#2Котовский Лев: а и ещё как вложить туда иконки (в папку)
8 мая 2011 в 18:35:33
0
#1Котовский Лев: а как сделать иконку (не иконку папки)?
8 мая 2011 в 18:21:14