Главная >> Рисование >> Техника рисования иконок в фотошоп

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

Автор: Дмитрий   
13.06.2007 12:48

Как оптимизировать настройки Photoshop CS2/CS3 для проектирования ИконокВ этом уроке мы с вами познакомимся с техникой рисования иконок в фотошопе. Как вы знаете, сам фотошоп не умеет сохранять картинки в нужном нам расширении (.ico), поэтому придется скачать специальный плагин, который его этому научит =).

Урок очень полезный.

 

 

How to optimize Photoshop CS2/CS3 settings for icon design - Step 1


Вот мои соображения по поводу проектирования иконок в Adobe Photoshop:

- много уважаемых создателей иконок считают Illustrator лучшей программой для их создания - http://blog.turbomilk.com . У меня нет и я не умею работать в Illustrator, но я хорошо знаю Photoshop, и я обнаружил, что его тоже можно использовать для создания иконок и это очень просто.

- лучший способ проектировать иконки (маленького размера) - это векторы. В Photoshop, их делают с помощью Shape и Pen tools. Мой личный способ заключается в том, чтобы делать векторы в твердых цветах (один вектор в каждом слое (layer) ) и затем применять различный эффекты слоя (Blending options), как gradients и strokes.

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

Во-первых скачать plug-in для сохранения icon file из photoshop file - IconBuilder. Вот отсюда http://iconfactory.com/software/iconbuilder

Это очень хорошая идея, т.к. IconBuilder несет с собой папку с некоторым колличеством готовых шаблонов, включая некоторые из таких (избражено на рисунке).
How to optimize Photoshop CS2/CS3 settings for icon design - Step 2

В View меню, идите в раздел Show и поставьте галочку на Grid. Я так же рекоммендую запомнить горячую клавишу этой комманды, т.к вам нужно будеть скрывать и снова включать сетку. Для настройки значков, идите в раздел меню Window - Workspace - Keyboard shortcuts (Только Photoshop CS2 и выше).

 

How to optimize Photoshop CS2/CS3 settings for icon design - Step 3

Идите в настройки Photoshop - Guides, Grid and Slices. Установите gridline на 1 пиксель, и subdivisions на 1.

How to optimize Photoshop CS2/CS3 settings for icon design - Step 4

Сейчас когда вы увеличите картинку (1200% - увеличение на картинке выше) вы увидите сетку, где каждая линия разделяет каждый пиксельl. Это не работает на маленьком увеличении, как 100%-200%, итак теперь нажмите на горячую клавишу, чтобы скрыть сетку..

 

How to optimize Photoshop CS2/CS3 settings for icon design - Step 5

Последний шаг - идите в раздел View, отмечайте галочкой Snap и в разделе Snap To, отмечайте галочкой Grid.

How to optimize Photoshop CS2/CS3 settings for icon design - Step 6

Теперь каждый раз, когда вы будете использовать Shape или Pen tool для рисования векторов они будут автоматически выравниваться по пикселям. Результат - ваши изображения на основе вектора будут выглядеть большими и четкими даже в небольших размерах. Есливы хотите нарисовать вектор в середине пикселя, тогда скройте сетку и Photoshop прекратит выранивание.

 

How to optimize Photoshop CS2/CS3 settings for icon design - Step 7

Очень быстрый пример - я использовал pen tool для создания 3 векторов...

 

How to optimize Photoshop CS2/CS3 settings for icon design - Step 8

...и применил эффекты stroke и gradient для каждого слоя...

 

How to optimize Photoshop CS2/CS3 settings for icon design - Step 9

... а здесь я показал как выглядит эта иконка в нормальном размере (100%). Не лучшая иконка, я знаю =) но этот пример я сделал за 20 секунд!

Это всё, удачи вам! Может быть мир увидит лучшие Иконки с вашей помощью :-)
Автор - www.illustrateddesigns.com
Перевод - http://graphic-tutorials.ru/ Дмитрий (Юзверь)

Комментарии (4)


Показать/скрыть комментарии
...
куда пихать этот файл чтобы фотошоп сохранял в формате иконок
sannoss , 06-03-2010
...
smilies/grin.gifsmilies/grin.gifsmilies/grin.gifsmilies/grin.gifsmilies/grin.gifsmilies/grin.gifsmilies/grin.gif
d , 21-02-2011
...
Материал по иконкам заинтересовал. Но почему-то у меня не отображаются рисунки к данному уроку.
slava , 24-05-2013
...
asdsad , 17-04-2016

Написать комментарий

меньше | больше

busy