О сайтах и не о сайтах

Рисуем фавикон

Пусть редко, но так или иначе все мы сталкиваемся с необходимостью создания уникального фавикона. Большинство, и я не исключение, сначала идет искать сервисы on-line создания иконок, потом, убедившись в их убогости, начинает выкачивать все подряд по запросу «редактор favicon.ico скачать». Половина скачанных программ, естественно, не работает, половина глючит. Убив на все про все часа полтора, все-таки получается нарисовать некое подобие иконки, но о том, чтобы создавать уникальные фавиконы не только для сдл, но и для всех сателлитов не может быть и речи – еще бы, столько времени тратить.

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

Ниже представлен мини F.A.Q. по созданию иконок favicon.ico средствами фотошопа.

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

1) Рисовать с нуля? Нет уж, увольте. Ищем исходник, к примеру в поиске гугла по картинкам. Имеет смысл поставить фильтр на поиск «искать в клип-артах», тогда картинки будут выдаваться достаточно хорошего качества и уже обработанные.

 рисуем фавикон

2) Копируем в фотошоп понравившуюся картинку. Точнее не понравившуюся, а наиболее подходящую для создание иконки. Не забываем, что разрешение фавикона – 16*16, поэтому чем проще и четче будет картинка, тем лучше. Скопировав в фотошоп, обрабатываем изображение, удаляем лишнее, делаем картинку более контрастной. В данном случае это не требуется, т.к. изображение изначально уже обработанное. Выделяем ту часть картинки, которая будет являться фавиконом, и копируем в буфер обмена (при работе со слоями, не забудьте их объединить перед копированием).

 рисуем фавикон

3) Создаем новый документ Файл-Новый. В параметрах создания ставим ширину и высоту по 16 пикселей. Инструментом «Лупа» увеличиваем созданный документ до максимальных размеров (1600%), чтобы было легче работать. Далее вставляем скопированную ранее часть картинки (Редактировать-Вставить). Скорее всего, после этого действия на новосозданном документе вы ничего не увидите. Оно и понятно – документ у нас 16*16 пикселей, а вставляемая картинка намного больше. Поэтому идем в Редактирование-Произвольная Трансформация. После этого действия вы увидите рамку, посредством которой надо будет загнать вставленное изображение в созданный документ размером 16*16 пикселей. Затем подтверждаем применение трансформации и занимаемся редактированием полученного изображения. Дорисовываем потерянные пиксели, где-то удаляем явно лишнее, можно подправить яркость, контраст и прочее. В итоге у нас должно получится нечто похожее на картинку внизу.

 рисуем фавикон

4) Теперь сохраняем полученный результат. Файл-Сохранить как, вписываем название файла favicon, а расширение выбираем png. Так как расширение иконок .ico, то полученный в фотошопе .png надо конвертировать. Делается это достаточно просто. Идем в проводник, сервис, свойства папки, вид, снимаем галку напротив «скрывать расширение для зарегистрированных типов файлов»/путь написал для XP, в висте там по-другому, на память не вспомнить, но вроде как интуитивно понятно/. Ну а дальше вручную меняем расширение у нашего файла с png на ico. На вопрос винды, действительно ли вы хотите поменять расширение, отвечаем утвердительно.

рисуем фавикон

5) Наш favicon.ico готов. фавикон На все ушло не больше пяти минут.

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

Комментарии

Спасибо. Не знал, что ico это png. :)

/Спасибо. Не знал, что ico это png. :)
Не совсем так. Просто я использую пнг, т.к. в отличии от джпга у него есть бит прозрачности и гораздо большая глубина цвета, нежели у гифа.
Более подробно об ico - http://ru.wikipedia.org/wiki/ICO

Спасибо. Просто и доступно!!!

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

Вряд ли вес картинки 16*16 может быть хоть сколько-нибудь значимым в сравнении с весом всей страницы. А каких-либо ограничений на размер фавикона у сервисов, которые эти самые фавиконы себе грабят(Яндекс например, вставляет фавиконы в результаты поиска рядом с адресом сайтов), не замечал.

Тем не менее, если потребность в минимизации размера фавикона существует, то можно в фотошопе выставить режим "индексированные цвета" с нужной палитрой и сохранять файл не как png, а как gif, выигрыш в размере должен быть существенный.

На самом деле ICO это совершенно самостоятельный формат, не совместимый с PNG, GIF и JPEG. То что в некоторых браузерах сработал трюк с переименовыванием png в gif отнюдь не означает что, например, в Safari на маке или в Avant все сработает. Согласен, что нужно рисовать иконки в фотошопе, но затем стоит использовать IconWorkshop, чтобы получить правильный формат иконок. Да он тоже платный, но ведь и фотошоп тоже)))

Что касается минимизации файла, то PNG с индексированной палитрой после прогона через OptiPNG и PNGOut получается процентов на 20 меньше чем GIF. Подробнее написано у Лебедева в техногрете.

решил добавить что к фотошопу есть плагин для сохранения в .ico
вроде как никто об этом не обмолвился) да и фавиконы насколько понимаю уже проще делать 32*32 нежели 16*16...

Добавить комментарий

Содержимое данного поля является приватным и не предназначено для показа.