Коррекция цвета с помощью Vibrance

Насыщенные цвета, поговорим про них.

Как-то, размеcтив на Dribbble свою свежую иконку, я получил замечание, что по цветам она выглядит грязновато. Я конечно так совершенно не думал, ведь я сам, лично, копался с цветами этой иконки, красил все в красивые цвета, старался. По правде сказать я до того момента вообще не особо переживал за цветовое решение своих работ, я рассчитывал на свой художественный вкус, надеясь, что он меня не подведет при выборе цвета.  Да и как обычно это бывает, в процессе работы над иконкой глаз “замылился” и я не смог увидеть эту цветовую грязь.

Это я все к тому, что с цветом надо работать, надо учиться видеть как красивые пары цветов так и различать их уместность использования в каждой конкретной ситуации. Но и здесь надо знать меру, не надо параноидально избегать грязные и гнаться только за чистыми цветами. Грязные цвета, в некоторых ситуациях играют, иной раз, эффектнее чистых. В общем, как всегда надо уметь балансировать на золотой середине, и тогда все будет ок.

Как это делать? Я знаю несколько способов, но для меня лично, действенным, остается только один — с помощью корректирующего слоя Vibrance.

Смотрим картинки.

Withiout and with Vibrance

1 — без корректирующего слоя, 2 — с корректирующим слоем.

Порядок работы простой. Либо делаем иконку как делается, не отвлекаясь особо на насыщенность и чистоту цвета, а уже в конце добавляем корректирующий слой. Либо пытаемся сразу задавать правильные цвета и в конце корректирующим слоем немного поднимаем насыщенность и чистоту цветов. Вот и все, очень просто и быстро. А если применять этот корректирующий слой с масками или на отдельные элементы, то его удобство возрастет в разы.

Ну и собственно небольшое руководство как работать с корректирующим слоем:

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

Vibrance

2. Увеличиваем значение Vibrance до 100% на палитре Adjustment. Соответственно здесь вы уже сами должны смотреть на сколько процентов выкручивать начение, ведь не всегда требуется 100% значение.

Adjustment Palette

3. Если вам надо, чтобы даный корректирующий слой воздействовал только на определенный элемент изображения, то можно применить к нему Clipping Mask (Cntl+Alt+G) или ограничить его с помощью маски слоя Layer/Vector Mask (Layer → Layer Mask).

Layer Mask

Вот и все.

Об эскизах

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

Зачем эскизы для иконок? 

Многие дизайнеры пренебрегают ими, считая, что и так талант выведет на верный путь, поможет сделать иконку красивой, крутой, рисуя её сразу в конечном варианте. Я считаю это не правильным, сам был таким. Зачем же их делать если и так все получается? А за тем, что работа с эскизами дает вам свободу в работе, возможность попробовать разные метафоры, изобразить  предметы в разных ракурсах, в разном освещении. Они позволяют шире взглянуть на предмет создания и за короткий срок визуально закрепить все возможные варианты, помогают не забыть интересные решения. Ведь все хотят получить идеальный результат! Или нет?

Firefox icon sketch and final result

Иконка Firefox / Автор эскиза — Stephen DesRoches / Автор отрисовки — Mike Rohde

Рассмотрим на примере.

Read More

paralab asked: Привет. А где можно посмотреть остальные твои работы, подскажи плиз? Очень нравятся твои работы. Я занимаюсь разработкой вебсайтов и iPhone приложений. Хотелось бы тоже узнать, сколько стоит твои услуги. Ну конечно ответить на вопрос очень сложно, например сколько может стоить иконка конфетки или коробки конфет размером 48*48.

Привет, Андрей. Старые мои работы ты можешь найти здесь а более новые здесь Ответить про цены не сложно :) просто на данный момент я не занимаюсь фрилансом, так как работаю в компании Sourebits. Так что, к сожалению, вариант поработать со мной отпадает.

А вот на технические вопросы я всегда рад ответить, если что, обращайся.

Иконка AppZapper

Есть множество прекрасных примеров идеальных иконок приложений под Мак ОС. Сегодня я расскажу вам про одну из них.

APPZAPPER

Appzapper icon

Знакомая иконка, не правда ли. AppZapper одна из самых известнейших программ для Мак ОС. Созданна для полного удаления программ, и всех признаков их существования, из системы.

Так вот, об иконке, чем же она так замечательна? У меня есть несколько слов для её описания: идеальная метафора, идеальное воплощение, идеальный самодостаточный знак, создана существовать в не времени. Как-то вот так, напыщенно, зато правда.

Read More

Очередное ускоренное видео процесса создания иконки “Arrow Sign” для набора “Subway”. Любые вопросы, по процессу создания, только приветствуются!

Так выглядит сама иконка

Так выглядит сама иконка.