Анимированный favicon для сайта при помощи Gimp
Всё чаще в сети попадаются сайты с иконками в результатах поиска и строке браузера. Было решено сделать себе такую же. Но, как всегда, дурная голова ногам/рукам (у кого как) покоя не даёт! :)
Поставим несколько дополнительных условий создания favicon‘а:
- Делаем иконку в Gimp‘е
- Делаем, чтоб всем на зависть – анимированную
- Создаём иконку с «нуля»
- Создаём иконку «за 5 (пять) минут» :)
Но есть и подводные камни:
- Художник из меня от слова «худо». :)
- После создания иконки будем писать статью на тему «Как создать и прикрутить иконку к сайту».
- Создадим анимированный .gif для иллюстрации процесса рисования.
Итак, начнём:
Что такое favicon?
- favicon – это графический файл формата ico или gif, хотя, наверное ,можно и .png, кому охота могут поэкспериментировать.
- Чтобы наш favicon начал работать, достаточно положить файл «favicon.ico» в корень сайта, некоторым браузерам и программам этого достаточно.
- Но для особо придирчивых программ и роботов во всех файлах сайта между тегами <head> и </head> необходио вставить следующий код:
<link rel="icon" href="http://mycoolsite.tld/favicon.ico" type="image/x-icon">
<link rel=”shortcut icon” href=”http://mycoolsite.tld/favicon.ico” type=”image/x-icon”>
- Если необходимо (очень хочется) сделать иконку анимированной, то вместо «favicon.ico» необходимо вставить «favicon.gif«. Имя файла не имеет значения, если в текст страницы вставлен код из предыдущего пункта, в котором указано имя файла, содержащего иконку.
- С учётом вышеизложенного теоритически сайт может иметь две иконки: одну «стандартную» – favicon.ico и другую любую, указанную в коде <head>. Даже каждая отдельная страница может иметь свою иконку.
- Анимированную иконку поддерживают не все браузеры.
- Для того, чтобы иконка подключилась в Wordpress‘е, достаточно положить файл «favicon.ico» в корень темы. В некоторых темах может потребоваться дополнительная настройка.
Рисуем иконку в Gimp.
Как рисовать в Gimp, желающие могут узнать у Гоши, Яши или у любых других специалистов по сети.
Используемые инструменты:
 Инструмент "Градиент" |
 Инструмент "Кисть" |
 Инструмент "Заливка" |
Также используются следующие кисти (выделенны черным по границе):
Используемые кисти
Что получилось в результате (слои):
Результат работы
Результат, или «Что в итоге получилось»:
Дерево и крылатое летящее создание |
|
Увеличенная копия истории создания анимации с короткими пояснениями происходящего. |
Понравилось? Сохраняем творение: иконку в gif формате. При сохранении файла GIMP спросит, как сохранять, выбирайте “Сохранить как анимацию” и сохраняйте. Вот и все! Главное не останавливаться на достигнутом. А там, глядишь, и шедевры начнут получаться. :)
Комментировать