Добро пожаловать! Если Вы тут впервые, то предлагаю Вам подписаться на RSS-ленту свежих статей с этого блога. Если Вы не используете RSS-reader'ов, то просто можете получать свежие статьи на свою почту. Спасибо! Жду Ваших комментариев =)
Приветствую!
Спонсор поста: сделать сайт Саратов.
Недавно озадачили меня созданием иконки для одного очень интересного блога, я недолго думая любезно согласился и приступил к творчеству. По ходу решил сделать не простую иконку, а… анимированную. Выглядит это уж больно эффектно как в закладках браузера, так и просто среди открытых окон с различными сайтами. Жалко вот только, что не все браузеры поддерживают такие иконки, но любимый и родной Firefox справляется на-ура! Так вот, если я вас заинтересовал, и если Ваш интернет-браузер Firefox, то давайте долго разглагольствовать не будем, а сразу перейдем к делу. А поговорим после, в комментариях =)
Итак, что нам понадобится?
Для создания favicon достаточно любого графического редактора (читай Photoshop), но мы пойдем другим путём. Я решил сделать это в пакете Macromedia Flash восьмой редакции. Вы спросите: накой черт делать иконку в флеше? Отвечу - для анимированной иконки это самый подходящий инструмент, имхо. К тому же, в этом посте я планирую Вас немного научить им [флешем] пользоваться, дать азы. В дальнейшем планирую серию постов по созданию баннеров от gif до flash.
Кстати, кто дочитает до конца, сможет поучаствовать в акции! =)
Одним словом, запускаем Macromedia Flash (у кого нет сего чуда предлагаю скачать, благо анлим-интернет шагает по стране и стянуть 100 метров с сети уже не представляется мучительной и дорогостоящей пыткой).
Да, буду рассказывать на примере создания иконки для этого блога.
Создаём новый проект: Файл > Новый… >Документ flash. Теперь мы видим пока пустой “монтажный стол”, а ниже его свойства. Нам нужно поменять размеры и фон. Давайте проставим длину и ширину по 100 px, цвет фона сделаем оранжевым.
Далее с помощью инструментов в левой панельке рисуем “первый кадр” предварительно увеличив масштаб до 300% исключительно для удобства.
Небольшое лирическое отступление: Во Macromedia Flash также как и в Photoshop реализована идея слоёв, помним об этом и размещаем все элементы своей иконки правильно.
В первом слоя я разместил рамочку, во втором - букву. Заметьте, что мы находимся в первом кадре нашей сцены (чуть выше слоев идет временная линия или timeline).
Ну как, интересно? Добавь в закладки, пригодится!
или просто закинь в свой Twitter!
Далее существует 2 варианта развития событий: а) рисовать покадрово свою иконку; б) воспользоваться инструментом для создания промежуточных кадров.
Объясню: Вы нарисовали первый кадр, скопировали содержимое первого кадра, вставили в 5ый кадр, изменили форму (например уменьшили ширину вдвое); теперь можно создать промежуточные кадры (2ой, 3ий, 4ый). Так мы и поступим.
Выбираем нужный нам слой, в данном случае сначала выбираем первый слой в первом кадре, переходим в 4ый кадр (слой тот же, первый), нажимаем F6 (Этой командой создаётся новый кадр с копией содержимого предыдущего ключевого кадра). Такую же операцию проделываем и для второго слоя.
Теперь переходим к редактированию содержимого четвёртого кадра. Выбираем первый слой, нажимаем лат.букву А или в панеле инструментов выбираем “Подвыделение”, щелкаем по нарисованной рамке и видим линии с узлами в углах, так вот, тащим эти узлы как нам нужно. Я преследовал цель сделать иконку с псевдо-трехмерной буквой и рамкой, которые вращаются.
Теперь на очереди буква из второго слоя. Букву можно редактировать также перемещением узлов как и рамку, а можно еще проще: выделяем букву, нажимаем комбинация Ctrl+B (буква из текста превратится в изображение, типа как в Photoshop’е перегон текста в растр), переходим по меню Изменить > Трансформировать >Искажения и мы увидим, что вокруг буквы появились линии с узлами по углам и по центрам линий. Тянем как нам надо. Всё, четвертый кадр готов.
Сейчас создадим недостающие кадры, заодно обеспечим плавность перехода между каждым кадром. Итак, просто щелкаем, например, по кадру 2 или 3 и в свойствах выбираем Tween-параметр “Форма”.
Вы увидите, как в таймлайне между первым и четвертым кадрами появилась “стрелочка”. Для проверки что всё правильно получилось выделите первый кадр любого слоя и нажмите Enter.
Ну как, интересно? Добавь в закладки, пригодится!
или просто закинь в свой Twitter!
Подобными манипуляциями создаем все ключевые кадры для всех слоёв, а затем промежуточные.
Далее, когда уже после тысячного нажатия Enter’а глаз начинает радоваться сотворённому, переходим к экспорту сего чуда в формат gif, предварительно сохранив для потомков сам проект (формат .fla). Нажимаем Файл > Настройки публикации. В закладке “Форматы” поставьте галочку рядом с GIF Image (.gif), остальные форматы можете отключить, ибо не пригодятся. Теперь переходим в закладку “GIF” и выставляем все параметры как на картинке ниже
Нажимаем “Публиковать” и смотрим что получилось. Затем переименовываем в favicon.ico и закидываем в корень своего сайта/блога. Добавляем строчку:
<link rel="icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">
Перезагружаем браузер и радуемся новой анимированной иконке. Если иконка не появляется, то либо неправильно указан путь её хранения, либо нужно почистить кэш браузера.
Акция!
Кто не разобрался с данным уроком или лень разбираться, или некогда, а очень хочется заиметь анимированную иконку для сайта, то я к вашим услугам.
за 1wmz делаю анимированный favicon;
за 0,5wmz делаю статичный favicon.
Мой кошель - Z817406198600
Присылайте с пометкой “Акция favicon”, и ссылку на Ваш сайт, чтоб хоть понятно было про что рисовать иконку =) , либо ваши описания и пожелания.
Внимание владельцам блогов!
Предлагаю вам анимированный favicon совершенно бесплатно! Единственное условие - размещение постового на меня с вашего блога схожей тематики. Кто блогов не ведет, а всё-равно имеет тематический сайт - тогда можно ссылочку постоянную. Ссылка, естественно, без всяких nofollow & noindex. Связь по мэйлу artd05 [собако] mail.ru
Ссылки по теме:
На блоге простого программера вы найдете советы как создать и правильно установить на свой блог,сайт этот самый favicon.
Уже есть 69 комментариев к записи Как сделать анимированный favicon? Просто!
Есть чем дополнить? Интересна Ваша точка зрения!