Главная | Регистрация | Вход Приветствую Вас //Мужик// | RSS

[ Новые сообщения · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Создание анимационной иконки (favicon.ico)
AleksaДата: Четверг, 04.03.2010, 16:01 | Сообщение # 1

Барыга
Группа: Пользователи
Сообщений: 36


Награды: 4
Репутация: 13
Замечания: 0%
ICQ номер: 489107677


Барыга
Offline

Дословный перевод - картинка в избранных ссылках.

Хочу рассказать как создать и установить favicon.ico - этот значок появляется рядом с закладкой на каждый сайт в браузере, и в «Журнале» («Истории» – в браузерах, отличных от IE).
Favicon или иконка сайта, позволит выделить свой сайт из ряда подобных.

Обычно используется изображение размера 16×16 пикселов формата ICO. Традиционно помещается в корень сайта под именем favicon.ico, так как исторически сложилось, что там его ищет Internet Explorer.

Пример:

К сайту иконка подвязывается прописыванием в коде документа, между тегами
<head></head>
следующего кода:

Code

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

Я это буду неоднократно повторять!

Итак приступаем к созданию:

Для новичков подойдет 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 и закидываем в корень своего сайта.
Добавляем строчку:

Code

<link rel="icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

Перезагружаем браузер и радуемся новой анимированной иконке.
Если иконка не появляется, то либо неправильно указан путь её хранения, либо нужно почистить кэш браузера.

Но на этом мы не закончим:

Иногда появляется необходимость динамически изменять иконку сайта – favicon, например, в чатах, при получении нового сообщения, при завершении продолжительной операции и др.

Иконка подключается в документ при помощи следующего тэга повторюсь:

Code

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

Изменить иконку сайта можнопутем удаления существующего тэга, указывающего на 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, которая способна не только изменять иконки, но также делать простые анимации, изменять заголовок страницы, делать бегущую строку в заголовке. Примеры использования этой библиотеки:

И представляю последний способ для ленивых:

Думаю, Вы еще помните о чем идет речь.

Напоминаю: Создание 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.

Кол-во: 6000
Формат: PNG
Размер архива: 29 Мb

Скачать с Депозит
Скачать с ЛетитБит

Анимированные:
Скрин:

Формат: RAR, Колличество: 7704 объекта
Размер - 99Mb
Скачать с Депозит
Скачать с ХотФайл


Я бы изменила мир, но Бог не дает исходники...


Сообщение отредактировал Aleksa - Пятница, 05.03.2010, 08:19
 
  • Страница 1 из 1
  • 1
Поиск:
Статистика Форума
Последнии темы Читаемые темы
Just Cause 2 (7) Компьютерные игры]
Тема для Общения! (6363) Основной форум для общения]
Eminem - Relapse (2009) (17) Музыка]
STALKER Portal 1.2 (Новая сборка) (55) Бесплатные шаблоны ZS!]
Вирус!!! (29) Скрипты для Ucoz]
Валюта на форуме (20) Скрипты для Ucoz]
Получить код баннера (полная и рабочая версия). для uCoz (25) Скрипты для Ucoz]
Создание нового блока (55) Первые шаги в системе uCoz]
Кисти (34) Все для PhotoShop]
Создание анимированной молнии (5) Уроки]
Тема для Общения! (6363) Основной форум для общения
Поиск скриптов (414) Скрипты для Ucoz
ОБСУЖДЕНИЯ САЙТОВ (275) Основной форум для общения
Задай свой вопрос (258) Проблем с uCoz
Аватары на заказ (146) Основной форум для общения
уроки на заказ (132) Уроки
SNORKOV NET-2- [ZS] (84) Бесплатные шаблоны ZS!
ВАШ ЛЮБИМЫЙ СТИЛЬ МУЗЫКИ? (73) Музыка
STALKER 1 - В массы! (65) Бесплатные шаблоны ZS!
Ваши работы (61) Основной форум для общения
Zork Studio
Шаблоны скрипты
Форум
ЗАКРЫТЬ МЕНЮ
valter
чебуреква
NAY
VAYP
Avdey
GREH
zaguvova
Razryshitel
Radiation
n@mID
Какую роль играет ZS в жизни пользователей
Всего ответов: 1603
Время: Загрузка...
Нас уже: 6253
Новых за месяц: 1
Новых за неделю: 1
Новых вчера: 0
Новых сегодня: 0 Dead Group [X]: 75
Администраторов: 1
Модераторов: 0
Друзей: 7
Почётные Жители [ZS]: 14
Обычных юзеров: 6152
Из них
Парней: 5982
Девушек: 239




© ZORK STUDIO 2024 Privacy Policy.
Хостинг от uCoz
POWER BY ZORK STUDIO