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

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

Guljay S.V.
Уроки фотошопа
1 октября 2007

Спустя длительного перерыва я наконец-то нашёл время на написание нового урока.

В данном уроке я вам покажу как рисуется обычная, но довольно красивая, папка. Что-то похожее можно встретить в многочисленных наборах иконок.

Долго рассказывать не буду, лучше сразу перейдём к уроку...

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

1. Создаём новое изображение, размером примерно 400x400 пикселей. Заливаем фон серым (#c6c6c6) цветом (с помощью Paint Bucket Tool):

Красивая иконка папки в фотошопе

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

Урок о том, как нарисовать красивую папку в PhotoShop

Жмём Ok и получаем такой-вот неоднородный фон:

папка в фотошопе

3. Создадим эффект свечения, что ещё лучше украсит наш фон. Сразу создадим новый слой. Выбираем инструмент Elliptical Marque Tool и создаём овальное выделение следующего вида:

папка в фотошоп

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

папка в PhotoShop

5. Теперь снимите выделение (Ctrl + D или Select —> Deselect) и примените фильтр Filter —> Blur —> Gaussian Blur с радиусом размытия в 30 пикселей:

иконка папки

Вот что должно получиться:

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

6. Начнём создавать папку. Сразу нарисуем заднюю стенку.

Выберите инструмент Rectangle Tool и нарисуйте прямоугольник (я нарисовал прямоугольник размером 133x94 пикселей) любого цвета:

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

7. Теперь выберите инструмент Add Anchor Point Tool и сверху слева добавьте две дополнительные точки:

иконка папки в PhotoShop

8. За тем рядом с этими точками добавьте ещё две точки (смотрите скриншот — поймёте):

красивая иконка

9. Теперь выбираем инструмент Direct Selection Tool, зажимаем клавишу Shift, выделяем две внутренние точки, и жмём несколько раз клавишу со стрелкой Вверх (не знаю как её назвать по-другому, чтобы все поняли :) ), пока не получите следующую фигуру:

красивая иконка папки

Вот она же, только без выделения:

красивая иконка папки в фотошопе

10. Теперь нам нужно украсить нашу папку, добавив к ней кое-какие эффекты. Заходим в Layer Style этого слоя и убираем непрозрачность заливки до 0%:

красивая иконка папки в фотошоп

11. Переходим на вкладку Drop Shadow и настраиваем параметры тени следующим образом:

красивая иконка папки в PhotoShop

12. За тем переходим на вкладку Inner Shadow, где настроим самозатенение:

урок про создание папки

13. На вкладке Inner Glow настраивается внутреннее свечение:

урок про рисование папки

14. Перейдём на вкладку Gradient Overlay и изменим параметры градиента следующим образом (красным цветом я написал шестнадцатеричные значения цветов, используемых в градиенте; для изменения настроек цвета градиента кликните по градиентной полосе, справа от слова Gradient:):

урок по фотошопу

15. Добавим мой любимый эффект — штриховку. Делаться это в окошке Pattern Overlay. В этом окошке у вас такой текстуры (штриховка, которая на скриншоте ниже) может и не быть, её нужно сразу создать, а как она создаёться, можно прочесть, например, в пункте №6 урока о создании логотипа для сайта или в пункте №1 урока о создании логотипа в фотошопе (только штриховку делайте такого вида, как на примере — размером 3x3 пикселя, чёрная):

урок по фотошоп

16. Ну и последний штрих — добавим обводку. Делается это на вкладке Stroke:

урок по PhotoShop

17. Жмём Ok и получаем следующую картину:

урок фотошоп

18. А сейчас создадим эффект блика...

Зажмите клавишу Ctrl и кликните по слою с задней стенкой папки, чтобы создать выделение:

урок PhotoShop

19. Выберите инструмент Elliptical Marque Tool, зажмите Alt и выполните следующее выделение:

урок фотошопа

20. Создайте новый слой, выберите Paint Bucket Tool и залейте полученное выделение белым цветом.

Снимите выделение, нажав Ctrl + D (или в меню: Select —> Deselect):

урок про папку в фотошопе

21. Добавьте к слою маску (для чего на панели слоёв Layers нажмите кнопку Add Layer Mask (в PhotoShop CS3) или Add Vector Mask (в PhotoShop CS2)):

урок про папку в фотошоп

22. Выберите инструмент Gradient Tool, в качестве градиента выберите чёрнобелый градиент:

урок про папку в PhotoShop

23. Залейте маску слоя полученным градиентом, снизу вверх. Получиться должно вот так:

урок по фотошопу о папке

На этом создание задней стенки папки завершено. Начнём создавать переднюю стенку папки :) (прикольно я их назвал)...

24. Создайте копию слоя с задней стенкой папки (для чего перетащите изображение слоя на кнопку для создания нового слоя; или нажмите на слое правой клавишей, выберите пункт Duplicate Layer).

Разместите полученную копию слоя выше всех слоёв. Трансформируйте слой (Edit —> Transform Path —> Distort) следующим образом:

папка в фотошоп

Вот что вы должны получить после трансформации:

урок по созданию папки

25. Теперь немного изменим настройки эффектов слоя...

Зайдите в Layer Style на вкладку Drop Shadow и измените настройки на следующие:

папка в фотошопе

26. За тем перейдите на вкладку Gradient Overlay, уменьшите непрозрачность до 50%:

иконка папки

27. На вкладке Pattern Overlay так же уменьшите непрозрачность до 50%:

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

Жмём Ok и получаем уже довольно неплохую на вид папку:

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

28. Добавим к передней части папки блик, тем же способом, которым мы это делали ранее:

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

29. Раз это папка, то в ней должны храниться какие-нибудь документы.

Нарисуем какой-нибудь листок, для чего выбираем инструмент Rectangle Tool и рисуем небольшой прямоугольник (в моём примере 115x72 пикселей) любого цвета:

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

30. Начнём добавлять эффекты. Заходим в Layer Style на вкладку Drop Shadow и настраиваем параметры отбрасывания тени:

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

31. На вкладке Inner Shadow настроим самозатенение:

иконки в PhotoShop

32. На вкладке Gradient Overlay закрасим наш листок серым градиентом:

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

33. И добавим обводку, на вкладке Stroke:

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

34. Жмём Ok и получаем такой-вот листок:

нарисовать в фотошопе

35. Добавьте к листку какой-нибудь текст или рисунок (я написал название сайта серым #535353 цветом):

нарисовать в фотошоп

36. Зажмите клавишу Ctrl и кликните по очереди на слое с листком и слое с текстом, чтобы их выделить.

Отпустите Ctrl и поверните листок, применив трансформацию Edit —> Transform —> Rotate (я повернул его на -19,5 градусов):

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

37. Переместите слои с листком и надписью под слой с передней стороной папки:

урок в фотошопе

38. Сейчас создайте копию слоя с передней частью папки, разместите эту копию слоя выше всех слоёв. Очистите слой от эффектов, для чего кликните по нём правой клавишей и выберите пункт Clear Layer Style:

рисуем папку

39. Зайдите в Layer Style слоя и непрозрачность заливки (Fill Opacity) уменьшите до 0%:

рисуем иконку папки

40. Перейдите на вкладку Gradient Overlay и настройте её следующим образом:

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

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

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

41. Жмём Ok и получаем красивую папку:

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

42. А теперь немного украсим общую картину, добавив отражение.

Отключите два первых нижних слоя (фон и свечение), нажав слева от слоёв на иконку в виде глаза:

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

43. Выделите всю видимую область (нажмите Ctrl + A или в меню: Select —> All), скопируйте её в буфер обменя (Shift + Ctrl + C или в меню: Edit —> Copy Merged).

Вставьте скопированное изображение (Ctrl + V или в меню: Edit —> Paste) и отразите его по вертикали (Edit —> Transform —> Flip Vertical), расположите как показано ниже:

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

44. Теперь включите отключенные в 42м пункте слои:

урок по рисованию иконок

45. Добавьте к слою с отражением маску (для чего на панели слоёв Layers нажмите кнопку Add Layer Mask (в PhotoShop CS3) или Add Vector Mask (в PhotoShop CS2)):

урок по рисованию иконки

46. Выберите инструмент Gradient Tool, в качестве градиента выберите чёрно-белый градиент и залейте им маску, снизу вверх:

иконка папки в PhotoShop

Вот и всё. Красивая папка готова! Вопросы пишите в комментах... Спасибо за внимание :)

6952 просмотра
посты с похожей тематикой
158
#5Гуляй Сергей: Для [Поска Лейла] и [Романенко Тёма]: рад, что мои труды не прошли даром :)
26 апреля 2011 в 19:15:01
0
#4Поска Лейла: Еще один очень хороший нетрудный урок для закрепления пройденного материала, спасибо! Ну теперь приступим к анимации...
26 апреля 2011 в 10:09:13
0
#3Романенко Тёма: Спасибо урок хороший
23 марта 2011 в 08:23:54
158
#2Гуляй Сергей: Для [Faik Remiyev]: в данном примере папка расположена лицевой стороной, по этому толщина не видна. Ее можно показать, но незачем. А вот если рисовать папку немного повернутой - тогда можно и толщину показывать по такому принципу: designarts.ru
26 декабря 2010 в 14:45:08
0
#1Dag- Lezgin: вот например я хочу показать толшину папки как эт можно сделать:)
26 декабря 2010 в 13:57:09