Хочу рассказать как создать и установить favicon.ico - этот значок появляется рядом с закладкой на каждый сайт в браузере, и в «Журнале» («Истории» – в браузерах, отличных от IE). Favicon или иконка сайта, позволит выделить свой сайт из ряда подобных.
Обычно используется изображение размера 16×16 пикселов формата ICO. Традиционно помещается в корень сайта под именем favicon.ico, так как исторически сложилось, что там его ищет Internet Explorer.
Пример:
К сайту иконка подвязывается прописыванием в коде документа, между тегами <head></head> следующего кода:
Для новичков подойдет Adobe Photoshop и входящий в него Adobe ImageReady
Для создания анимации необходимо создать рисунок размером 16x16 пикселей в Adobe Photoshop.
Пример:
Создадим на одном изображении несколько слоев, которые будут имитировать анимацию. То есть все слои с изображениями должны отличаться.
Сохраним изображение в формате PSD.
Теперь переходим в Adobe ImageReady и через меню Window/Animation откройте панель анимации (если он не открыта).
Открываем сохраненное изображения в формате psd и добавляем на панели такое количество кадров, сколько слоев имеет изображение (поясняю, если слоев 5, то и кадров 5). Для каждого кадра на панеле слоев включите только один слой (остальные должны быть скрыты). При необходимости для каждого кадра можно изменить время его отображения.
Пример:
У меня CS2, но в CS3 - Adobe ImageReady нет, открыть окно анимации: Значит нажимаем: Меню- Окна- Анимация Для этого под каждым кадром щелкните правой кнопкой мыши и выберите необходимый интервал. После создания кадров необходимо сохранить анимацию File/Save Optimized As в формате GIF.
Установка анимации в адресной строке:
Загружаем наш шедевр на сайт, браузеру необходимо указать, что бы в качестве иконки он использовал не favicon.ico а рисунок gif. Для этого после описания мета тегов в файл необходимо включить строку: (или заменить существующею favicon.ico)
В итоге в адресной строке вы увидите свой анимационный рисунок:
1. Войдите в панель управления сайтом 2. В верхнем меню выберите «Инструменты» -> «Файловый менеджер» 3. Загрузите на сайт свой новый favicon.ico, выбрав его в поле для загрузки файлов и нажав кнопку «Загрузить файл». Загруженная вами иконка заменит стандартный значок ucoz-а.
Сейчас для тех кому Фотошоп надоел, Macromedia Flash (8-мая редакция):
В этом уроке делаем картинку с псевдо-трехмерной буквой и рамкой, которые вращаются.
Запускаем Macromedia Flash Создаём новый проект: Файл > Новый… >Документ flash. Мы видим пока пустой “монтажный стол”, а ниже его свойства. Нам нужно поменять размеры и фон. Проставим длину и ширину по 100 px, цвет фона сделаем оранжевым.
С помощью инструментов в левой панельке рисуем “первый кадр” предварительно увеличив масштаб до 300% исключительно для удобства.
В Macromedia Flash также как и в Photoshop есть слои, надеюсь все это знают) В первом слое мы разместил рамочку, во втором - букву. Мы находимся в первом кадре нашей сцены (чуть выше слоев идет временная линия или timeline). Сейчас можно действовать по Вашему усмотрению, то есть рисовать покадрово свою иконку, либо воспользоваться инструментом для создания промежуточных кадров. Пример, Вы нарисовали первый кадр, скопировали содержимое первого кадра, вставили в 5ый кадр, изменили форму (например уменьшили ширину вдвое); теперь можно создать промежуточные кадры (2ой, 3ий, 4ый). Так мы и поступим.
Итак: Выбираем нужный нам слой, в данном случае сначала выбираем первый слой в первом кадре, переходим в 4ый кадр (слой тот же, первый), нажимаем F6 (Этой командой создаётся новый кадр с копией содержимого предыдущего ключевого кадра). Такую же операцию проделываем и для второго слоя.
Теперь переходим к редактированию содержимого четвёртого кадра. Выбираем первый слой, нажимаем лат.букву А или в панеле инструментов выбираем “Подвыделение”, щелкаем по нарисованной рамке и видим линии с узлами в углах, так вот, тащим эти узлы как нам нужно.
Теперь на очереди буква из второго слоя. Выделяем букву, нажимаем комбинация Ctrl+B (буква из текста превратится в изображение, типа как в Photoshop’е перегон текста в растр), переходим по меню Изменить > Трансформировать >Искажения и мы увидим, что вокруг буквы появились линии с узлами по углам и по центрам линий. Тянем как нам надо. Всё, четвертый кадр готов.
Создаем недостающие кадры, еще и обеспечим плавность перехода между каждым кадром. Итак, просто щелкаем, например, по кадру 2 или 3 и в свойствах выбираем Tween-параметр “Форма”.
Подобными манипуляциями создаем все ключевые кадры для всех слоёв, а затем промежуточные.
Далее, когда уже после тысячного нажатия Enter’а глаз начинает радоваться сотворённому, переходим к экспорту сего чуда в формат gif, предварительно сохранив для потомков сам проект (формат .fla). Нажимаем Файл > Настройки публикации. В закладке “Форматы” поставьте галочку рядом с GIF Image (.gif), остальные форматы можете отключить, ибо не пригодятся. Теперь переходим в закладку “GIF” и выставляем все параметры как на картинке ниже: Нажимаем “Публиковать” и смотрим что получилось. Затем переименовываем в favicon.ico и закидываем в корень своего сайта. Добавляем строчку:
Перезагружаем браузер и радуемся новой анимированной иконке. Если иконка не появляется, то либо неправильно указан путь её хранения, либо нужно почистить кэш браузера.
Но на этом мы не закончим:
Иногда появляется необходимость динамически изменять иконку сайта – favicon, например, в чатах, при получении нового сообщения, при завершении продолжительной операции и др.
Иконка подключается в документ при помощи следующего тэга повторюсь:
Изменить иконку сайта можнопутем удаления существующего тэга, указывающего на favicon и добавления нового (это действительно только для Firefox и Opera). Было бы неплохо, если бы иконку можно было изменять путём простой подмены аттрибута href, однако браузеры не реагируют на изменения аттрибутов тэга link. Ниже приведен пример функции, которая устанавливает иконку:
Code
function changeIcon(){ var head = document.getElementsByTagName("head")[0];
// удаление старой иконки var links = head.getElementsByTagName("link"); for (var i = 0; i < links.length; i++) { var lnk = links[i]; if (lnk.rel=="shortcut icon") { head.removeChild(lnk); return; } }
// создание и добавление новой иконки var link = document.createElement("link"); link.setAttribute("href","myicon.ico"); link.setAttribute("type","image/x-icon"); link.setAttribute("rel","shortcut icon"); head.appendChild(link); }
Еще пару слов про библиотеку favicon.js, которая способна не только изменять иконки, но также делать простые анимации, изменять заголовок страницы, делать бегущую строку в заголовке. Примеры использования этой библиотеки:
Code
// установка иконки, заголовка favicon.change("/icon/active.ico", "new title");
// установка иконки favicon.change("/icon/active.ico"); // leaves title alone. Cancels any animation.
// установка заголовка, иконка без изменения favicon.change(null, "new title"); // leaves icon alone. Cancels any scrolling.
// Анимация иконок. Если последний элемент массива иконок пустая строка то // между циклами будет вставляться пустая иконка favicon.animate(["icon1.ico", "icon2.ico", ...]);
// анимация с задержкой в 500мс favicon.animate(["icon1.ico", "icon2.ico", ...], {delay: 500} );
// бегущая строка с задержкой 200мс между циклами, между каждой // строкой будет вставляться "------", по умолчанию " " favicon.scrollTitle("new title", { delay: 200, gap: "------"} )
// отмена бегущей строки и анимации favicon.unscroll(); favicon.unanimate();
И представляю последний способ для ленивых:
Думаю, Вы еще помните о чем идет речь.
Напоминаю: Создание favicon для Вашего сайта Но, намного легче все же пользоваться онлайн сервисами. сервис favicon сделает все за Вас: Первый сервис довольно прост и не требует каких-либо длинных инструкций:
Все что от Вас требуется: Загрузить свою собственную картинку или предоставить путь к картинке в сети - и сервис все остальное сделать за Вас. После нажатия кнопки "Создать favicon.ico" Вы будете перенаправленны на страницу, где можно будет просмотреть и скачать полученный результат.
Кроме этого там будет находится подробная инструкция о том, как добавить favicon к Вашему сайту.
Еще один интересный сервис favicon.cc: Очень интересный и простой сервис. Единственный минус - это отсутствие русскоязычной версии. Знание английского языка не является обязательным, так как все что от Вас требуется это:
- Выбрать цвет - нажимая на квадратики нарисовать лого - загрузить полученный результат (делается это с помощью кнопки - Download Favicon) - добавить его к себе на сайт - по желанию, можно разместить его в каталоге для общего пользования
Для добавления favicon на Ваш сайт необходимо загрузить его в корневую папку и на каждой странице добавить код.
Кстати, в этом каталоге можно выбрать из огромного количества уже готовых вариантов.
Итоговые советы: Совет: не пытайтесь поставить в качестве favicon какую-нибудь фотографию, или сложную картинку – все равно ничего видно не будет. Иконка показывается в браузере как изображение размером 16×16 пикселей. Ожидать, что в таком виде можно изобразить что-то сколько-нибудь сложное не приходится. Например, что бы изобразить хоть сколько-нибудь узнаваемо человеческое лицо, надо начинать с размера картинки 48×48. Поэтому, правило при создании иконок сайтов одно — следует изображать один, хорошо узнаваемый предмет, с четкими границами и контрастным фоном. Лучше всего для иконки сайта подходит логотип компании или столь же простое изображение.
В выдаче поисковика, ваша иконка может появиться только через несколько дней, т.к. бот, собирающий иконки, ходит не каждый день.
Советую сидеть на Mozilla :D
Добавлено (04.03.2010, 17:01) --------------------------------------------- И для самых-самых ленивых: Скрин: Скачать с Депозита
Пак на - 1469 иконок для сайтов 16x16 pix Скрин: Скачать с Депозита Скачать с АйФолдера
Размер: 8.92 Мб
Пак на - 42 иконки для сайтов 16x16 pix Скрин: Скачать с ЛетитБит Скачать с АйФолдера Размер файла:: 1.17 Mb
Далее: Пак на - 6000 иконок для сайтов 16x16 pix
Размер изображения: 128x128, 64x64, 48x48, 32x32, 24x24, 22x22, 16x16px.
Нас уже: 6252 Новых за месяц: 0 Новых за неделю: 0 Новых вчера: 0 Новых сегодня: 0 Dead Group [X]: 75 Администраторов: 1 Модераторов: 0 Друзей: 7 Почётные Жители [ZS]: 14 Обычных юзеров: 6151 Из них Парней: 5981 Девушек: 239
Zork Studio
