Как рисовать перекрашиваемые иконки

[ForeverLive]

Сделать иконку перекрашиваемой не сложно… А вот нарисовать НОРМАЛЬНУЮ иконку что-бы та смотрелась хорошо — вот это очень сложно… Особенно 32х32 или 16х16

[kortunov]

А в чем именно проблема? Мы в турбомилковском блоге написали уже много статей про рисование иконок. Возможно, слишком много.

[NikitaG]

безсвязный какой то коммент.Или я не догоняю?

[kortunov]

Попробую еще раз.

В чем именно состоит сложность нарисовать НОРМАЛЬНУЮ иконку? Она получается нечеткой? Трудно подобрать метафору? Какие-то другие сложности?

Вот тут есть 18 статей на тему «как нарисовать» иконку. Я не понимаю — что непонятного в моем комменте?

Я как лучше хотел, есличо.

[muse]

ну так если брать чужие метафоры, конечно не сложно ;)

[kortunov]

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

[Vertex]

Спасибо за статьи, всегда мечтал заняться рисованием иконок, и вообще пиксельной графикой. Но к сожалению, все меня бизнес клонит не в ту сторону… :(

Мечта: заработать 30 млн $ и после этого начать рисовать пиксельные иконки, просто так, для себя… :)

[AntiCLYDe]

почему 30 млн? с экономическим ростом ростут и потребности

[Vertex]

А гиде это Вы видели экономический рост? :)
30 000 000$ * 4% (гарантированные золотом Швейцарских банков) = 1.200.000$ год = 100.000$ — месяц… Вполне хватит для покрытия потребностей семьи, ну и как следствие, возможность учиться рисовать иконки… :)

[AntiCLYDe]

я имел ввиду собственный экономический рост =)
швейцарские банки, по-моему, крупнее ставки дают, если суммы тоже крупные =)

[Vertex]

в каких как, естественно… но в среднем — 4% при гарантированном.

[intnzy]

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

[vladimirko]

Лучше статей, которые вы написали хуже нет )

[ruzzz]

Эх, если бы проблема была только в доступной информации :)

[ForeverLive]

Статьи не во всех случаях помогают… Даже если я прочитаю самоучитель по живописи — я не обязательно смогу хорошо рисовать…

[FFF]

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

[kortunov]

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

[almalexa]

Забудьте тогда про фон картинкой вокруг иконки

[kortunov]

Можно и так. Но не всегда нужны иконки тогоже цвета, что и фон.

Пример: нужна красная иконка на черный фон.

Кстати, даже если иконка нужна такого же цвета, как и фон. То я рекомендую выбирать «почти такой же цвет», но более яркий. Тогда получится выразительнее.

[kortunov]

Не могли бы вы подробнее написать как это работает? Я пока не понял, что такое «обтравка фоновым черным».

[kortunov]

Так то фотошоп! А эти иконки подходят для автоматического перекрашивания без всякого фотошопа. Зацените как они ловко на Иконзе сами красятся! Еслиб задача стояла сделать в фотошопе, то не стоило бы вообще со всем этим заморачиваться.

[sten]

Вы похоже просто не заметили: попробуйте нажать на окошечко справа от надписи «Цвет».



Получите все цвета радуги. Правда файлов там два, а не один — для того чтобы решить проблему с фоном.

[himmelherz]

Не покатит, если фон неоднородный, а иконки по нему «плавают». А там неплохое решение.

[xaerom]

Мыслите по разному :)
В иконзе — генерится иконка из бликом и цвета подложки иконки, вы предлагаете создать картинку с окном в котором виден другой цвет.
Оба варианта верны и не один не может быть лучше, они разные :)

[301dpi]

День, когда для изменения дизайна сайта надо будет изменить лишь один цвет в css, уже не за горами)

[dab512]

Создание перекрашиваемой иконки для веба без векторного исходника:
По сути с небольшими доработками все это можно запихать в один экшн фотошопа который делал бы это автоматически.
Берем иконку (эта первая попавшаяся из того что было под рукой):

Чтобы получить базовый цвет — переводим из RGB в Lab. Канал Light заливаем 50% серым.

Как видно, иконка состоит из 2х цветов — основной голубой вверху и фиолетовый внизу. Так как голубого больше — берем пипеткой этот цвет и его используем как базовый.
Делаем наложение базового цвета на нашу иконку с режимами darken и lighten (слева и справа соответственно).

Переводим в ЧБ — desaturate

Автоуровни:

Инвертируем результат darken

По полученым яркостям делам маски прозрачности (darken для черного и для lighten белого)
белую маску не видно на светлом фоне.

Подкладываем наш базовый цвет и видим что все получилось.

Теперь совмещаем полученые результаты. Сначала кладем черный слой, потом белый.

Вот мы и получили клон нашей иконки.
И теперь мы можем подкладывать абсолютно любой цвет.

Спасибо за внимание.

[Alaunquirie]

Гениально.

[Liar]

И просто.

[fatal]

Редко когда кнопка «Добавить в избранное» на комментариях бывает полезна, но это как раз тот редкий случай. ;)

[Alaunquirie]

Прочитать комменты выше не судьба? :)

[nicothin]

иконку фолдера?
наверное, я слишком русскоязычен :)
меня коробит, когда вместо нормального и недлинного русского слова «папка» используют слово «фолдер». благо, встречаюсь с этим впервые.

[hunterxp]

Ух, как кстати… Спасибо! =)

[flair]

Спасибо турбомилководцам!

[flair]

ппц

[Noker]

Хотел бы спросить про стилевое единство, а то я как не начну рисовать иконки, никак не могу добиться этого стилевого единства. Так очень интересует подборка цветов, у вас все иконки таких теплых цветов, как это вам удается?

[Alaunquirie]

Попробуйте использовать adobe Kuler для подбора палитр, очень удобная штука.

www.adobe.com/products/kuler/

[mobilz]

при всем уважении к турбомилку, но это боян 6-ти летней давности
www.simplebits.com/notebook/2003/07/24/magic_icons_for_lazy_people_like_me.html