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

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