Рисуем иконку. Часть 3

15 мая 07:56 2011

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

Совсем недавно ломал голову над такими иконками — так и не осилил, это выше меня 😀

Зато в процессе родил не то, правда, что нужно, но симпатичную на мой взгляд иконку, которую можно даже немного описать (:

1. Листочки

Хоть лист бумаги и белый, рисовать его основу нужно чуть серого цвета, чтобы ты смог работать берном и доджем. Согласись, ты не сможешь нормально затемнить белый цвет, ну а осветлять его просто незачем, как можно высветлить белый цвет? 🙂

Поэтому основу я рисовал #f5f5f5 цвета:

Рисуем иконку

Теперь можно работать берном/доджем (осветлитель/затемнитель)

Я взял берн(затемнитель) 25px размером, с диапазоном «света», и интенсивностью в 23%,  и прошелся им в  нескольких местах по листу:

Дальше использую додж (осветлитель) 30пх, с  диапазоном: света, интенсивностью 15%. Так же несколько раз провел по листу:

Готов листочек, правда, все просто? 🙂

Еще я нарисовал вот такую диаграмму:

Передвинул ее на  листок, и слой с диаграммой поставил в режим смешивания «Затемнение основы». Совсем я плох стал с этим русифицированным фотошопом, уже забываю английские названия. 🙁

Вот так вышло:

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

Его нужно высветлить через уровни (ctrl+l) правый ползунок подвинуть влево, у нас получатся черные буквы на белом фоне. Далее уменьшим их трансформированием (ctrl+t), вот до таких размеров:

И этот слой с текстом поставим в режим «Замена темным».  Жизнь прекрасна.

Т.к. у меня мания четкости изображений, я применяю к тексту фильтр «Резкость», Фильтр>Резкость>Резкость (Filter>Sharpen>Sharpen), и понижаю непрозрачность слоя до 35%.

Листочек готов! 🙂

По аналогии с ним, делаю остальные листы. Точнее основу (листик) я просто копирую, а вот текст и картинку на нем заменяю:

Отлично, поехали дальше.

2. Запрещающий знак

Рисуем кружок, как в детстве:

Зажимаем ctrl и кликаем на иконку слоя (квадратик слева от названия слоя, в панели слоев), это выделит наш круг. Далее идем в Выделение>Модификация>Сжать, проставляем значение в 5 пикселей. Наше выделение стало меньше, добей его без капли сожаления, без пощады, нажми Backspace. Выделение можно снимать, мы получили такую рамку:

Законис начатое. Я выбрал инструмент «Линия», толщиной в 5 пикселей (проставляется сверху), и зажав shift, проведи такую линию, от уха до уха:

Осталось совсем мало, сделать грани. Для этого продублирой слой с красным знаком, и преврати его в белый знак (я делал через ctrl+u, нижний ползунок вправо).  Выдели объект, как и в прошлый раз, кликнув на иконку слоя в панели слоев. Выбери инструмент «Прямоугольная область», и просто нажми на клавиатуре стрелочку «Вниз», выделение сдвинется на 1 пиксель вниз. Далее Backspace, удалили ненужную часть.

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

Но как видишь, грань у нас немного размыта, но вполне возможно это опять моя мания, все шарпить. И я пошарплю, действительно пошарплю, тебе не остановить меня! Для этого заходим в Фильтр>Резкость>Резкость и выставляем значения по своему вкусу.

Ну вот, стало на много лучше.

Теперь слой с гранью переводим в режим «Перекрытие» (Overlay), дублируем этот слой, режим смешивания меняем на «Мягкий свет» (Soft light), и понижаем непрозрачность слоя до 50%, мишн комплит, Муаммар Каддафи свергнут, на этом PSD мы навели свои порядки, ребята.

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

3. Тень

Так же я писал про это в публикациях:

Выбрав черную кисть, ткни на новом слое вот такое пятно(мягкая кисть 60px):

Трансформируем ctrl+t, вот так:

Опускаем слой с тенью вниз, под слои с нашим знаком, и помещаем вот так:

Унизь непрозрачность этого слоя до 50%, ты ведь любишь унижать? Дублируем слой, повышаем его непрозрачность до 60%, попутно сделав пальцами комбо ctrl+t, чтобы сжать дубль. Его нужно сделать поуже оригинального слоя с тенью, после того как нажали ctrl+t, кликаем на правый край трансформации, зажимаем alt, и тянем влево. Левая сторона тоже уменьшится, должно выйти вот так примерно:

Знак у нас почти красный, а тень черная, так дело не пойдет, жми ctrl+u.

Галочку на «Тонирование», и такие настройки:

Собственно говоря, это все. Нет, не все, на что ты способен, а действительно иконка готова.

Как бы я не был рад твоему успеху, иконку эту у меня не приняли, и остальные 11 штук я не нарисовал. 🙂

Но это меня ни чуть не огорчило, элементы из этого PSD я ипользовал в другой работе, которая скоро увидит свет. Совсем, совсем скоро!

………………………………………………………………………