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

Пусть редко, но так или иначе все мы сталкиваемся с необходимостью создания уникального фавикона. Большинство, и я не исключение, сначала идет искать сервисы 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, выигрыш в размере должен быть существенный.

Отправить комментарий

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
7 + 3 =
Введите ответ/цифрой/. Например, для вопроса "9 + 5 =" правильным ответом будет 14.