Как я рисовал иконки для Stream Sentinel

[Nick123]

Две части статьи я написал на блог АДСЛ клуба уже давным-давно, но многие о его существовании и не подозревают, поэтому я решил переложить их в открывшийся очень кстати раздел форума.


Часть 1.

Подготовка
Сначала заглянем в словарь и убедимся, что помним английский. Sentinel — сущ. 1) часовой; страж; 2) мор. лот-предостерегатель, подводный часовой. Нам явно подходит первый вариант, его и принимаем за основу.
Смотрим, кто как изображает этого самого стража в интернете. Гугл к нашим услугам:

Да, ничего подходящего. Придется подумать самим.

Начало работы
Ладно, как мы обычно представляем стражника, секьюрити, того, кто следит за порядком? Черные очки, пиджак и уверенность в себе. Примерно так? Хорошо, нарисуем нашего охранника в размере 128x128. В руке он будет держать изображение эмблемы Webstream'a — его все-таки охраняет!
Итак, вот что получается после пары часов работы.

Посылаем этот вариант автору программы. Ему не нравится слишком плоская фигура, перекошенный подбородок и еще пара мелочей.
Исправляем.

Уже лучше. Но это только первый этап работы, самое сложное впереди. Предстоит рисовать попиксельно рисовать этого же человека в гораздо более мелких размерах.

После того, как я нарисовал большую картинку, у меня возникли сомнения, а туда ли я вообще двигаюсь. Следующая картинка из фильма The Sentinel 2006 года меня убедила — туда.

На этом первая часть закончилась. Во второй части я расскажу, как я рисовал сами иконки разных размеров.

[Nick123]

Часть 2

Итак, в прошлый раз я рассказал о начале работы над оформлением Stream Sentinel — удобной программы для вывода информации о цене трафика.
В этот раз речь пойдет о создании иконок: 16x16, 24x24, 32x32 и 48x48.

32x32
Начать я решил с размера 32 на 32 — того, который пользователь будет видеть на рабочем столе.
Конечно, простым уменьшением большого рисунка здесь не отделаешься.


Нужно рисовать заново, поэтому открываем фотошоп, выставляем размер и вперед. Жаль конечно, что я не сохранял промежуточные версии. Так бы сейчас можно было представить весь процесс — от начала и до конца. Но кое-что все таки имеется.
Вот так выглядел первоначальный вариант иконки 32 на 32 пикселя:


А вот мы добавили рамку и градиент. Рамка нужна, чтобы иконка не смотрелась сиротливо на рабочем столе:


Конечно, в таких маленьких изображениях не должно быть мелких деталей (почему, видно на 1-й картинке в этой статье), но в то же время их надо хорошо проработать, поэтому добавляем объема:


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

Уфф! С этим размером покончено.

16x16
Теперь нужно нарисовать иконку для трэя, ее-то и будут наблюдать пользователи при общении со Stream Sentinel. Задача усложнилась — нужно в 16x16=256 (угу, арифметика) пикселей уместить что-то, соответствующее уже нарисованному.
Пытаемся решить задачу с наскоку и рисуем морду снова, попиксельно, естественно.
Вот что получается:

Нарисовал и ужаснулся. Какое уродство!

Дааа... Надо подумать. «Что же делать, как же быть?».
Может, написать SS? Ага, запишут в приспешники Schutzstaffel и лично Гиммлера. Не хотелось бы.
Нарисовать АДСЛ-модем? Нет, не пойдет. Нам нужен общий стиль с другими рисунками.

В итоге я остановился на том, чтобы поместить в трэй только часть морды нашего охранника. Но что именно? Очки? Очки и нос? Всю голову — нет, всю голову уже попробовали выше.

ОК, нарисуем темные очки и нос, добавим немного тени и обведем это зеленой рамкой:


Неплохо, но какой-то он... Короче, сделаем ему очки потоньше:

Все, на этом и остановимся.

24x24 и 48x48
Иконки 24x24 и 48x48 рисовались уже, признаюсь, по остаточному принципу.
Обе они были получены из иконки 32x32. Вот они:



И если 24 получилась вполне приемлемой, то 48 нет: мутная она. В ближайшее время думаю ее переделать.

Вот так. Самая сложная часть на этом завершена. В последней части я расскажу о моментах, которые не вошли в первые две: как рисовалась рука на большой картинке и про баннер на главной АДСЛ-клуба.

[Alter OZ]

К слову, следуя твоему примеру и ведомый любопытсвом, я тоже поискал картинки в гугле по слову "sentinel", и нашел вот этого.. мм... чувака.

Один вид этого парня дает понять, что мимо него не пройдешь всем стражам страж

[geshido]

Nick123
интересно пишешь, класс.

[Den_is]

Познавательно!

тем кто заинтересован, рекомендую прочитать доку от Microsoft по созданию иконок в стиле XP

http://msdn2.microsoft.com/en-us/library/ms997636.aspx

[Nick123]

Den_is, а я рекомендую уже и для Висты
http://msdn2.microsoft.com/en-us/library/aa511280.aspx

[Den_is]

спасибо за линк

[Cortez]

кста иконка лично мне вообще не нра... квадратная рожа