www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Логотип Софт

Создание иконки для сайта

В предыдущих статьях было рассмотрено создание формы обратной связи и вывод даты на сайте. Еще одна необходимая вещь - иконка сайта, значок, который выводится перед названием сайта в закладках, избранном и на панели вкладок. Кроме того, иконка сайта показывается в результатах поиска Яндекса и некоторых других поисковиков перед строкой с названием сайта. Словом, иконка сайта - это обязательный атрибут любого серьезного интернет-проекта.

Рассмотрим процесс создания иконки и помещения её на страницы сайта. Создать иконку сайта очень просто, и для этого есть несколько способов:

  1. Найти и скачать готовую иконку в интернете, благо их там предлагается в изобилии;
  2. Нарисовать значок самостоятельно в любом редакторе и сохранить его в нужном формате (*.ico);
  3. Использовать возможности Photoshop - наиболее правильный и серьёзный подход к делу.

Первый способ, самый простой, и объяснений, надеюсь, не требует.

Второй немного сложнее, так как далеко не все фоторедакторы позволяют сохранять изображение в формате .ico. Правда, вы можете использовать для иконки другой формат, например, .gif, указав его тип в соответствующем теге вызова иконки, о чём рассказано ниже. Для рисования и сохранения иконки рекомендую простой, хороший, а главное, бесплатный, фоторедактор PhotoFiltre, описанный в соответствующей статье. Откройте или нарисуйте в этом редакторе подходящее изображение и выберете команду Сервис - Экспорт иконки... В открывшемся окне установите формат иконки, обычно 16 цветов 4 бита, и нажмите Экспорт. Укажите папку для сохранения и имя файла - favicon.ico - и иконка готова. Остается только поместить ее в корневой каталог сайта. Как видите, всё настолько просто, что даже скучно.

Третий способ, использование Photoshop, как всегда, наиболее универсален. Надеюсь, мои читатели любят этот замечательный продукт компании Adobe не меньше, чем люблю его я. К сожалению, Photoshop в "базовой комплектации" не понимает нужный нам формат .ico, но он легко обучается этому. Скачиваете бесплатный плагин ico-формата, например, здесь, и распаковываете его в папку C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats. Размер плагина 26 Кб. Конечно, вместо CS2 в пути к файлу будет указана ваша версия Photoshop, что не принципиально: плагин работает со всеми версиями Photoshop, включая CS4, Photoshop Elements, Paint Shop Pro версии 9 и позже.

Теперь наш Photoshop стал умнее и при сохранении изображений командой Save as...(Сохранить как...) в списке доступных форматов появилась строчка ICO (Windows icon)(*.ICO), что не может не радовать.

Как рисовать иконку? Да как умеете! Часто для этого используют логотип фирмы или просто буквы, имеющие отношение к наполнению сайта. Это удобно и в то же время наглядно, особенно, если буква вписана в цветной квадрат или круг, либо две буквы наложены друг на друга. Размер рисунка 16х16 пикселей, можно также использовать 32х32, но учтите, что в браузере всё равно рисунок будет приведен к формату 16х16. Втиснуть что-то высокохудожественное в такие ограниченные размеры не удастся, а мелкие детали будут восприниматься как цветной шум. Следовательно, почти как всегда, чем проще, тем лучше.

Обязательно просматривайте созданную иконку сайта не только с большим увеличением, но и "один к одному" , то есть в масштабе 100%. По окончании процесса любования созданной вами иконкой сохраните изображение в файл командой Save as... (Сохранить как...) в формате .ico.

Для того, чтобы браузер и поисковик находили изображение иконки, созданный файл необходимо поместить в корневой каталог сайта, а на HTML-странице между тегами <head>...</head> желательно указать путь к иконке, вставив строчку:
<link rel="shortcut icon" href="favicon.ico" type="image/icon">

Несмотря на свою простоту, иконка, несомненно, украшает сайт. Кроме того, вы можете показывать новые иконки при выводе отдельных страниц сайта. Только не надо делать разные изображения, так как это внесёт путаницу, а вот варианты основной картинки или логотипа, конкретизация с привязкой к содержанию страницы, может оказаться эффективным элементом дизайна. Для вывода разных иконок прописывайте путь к конкретному изображению href="(адрес).ico" в теге <link> страницы.

Ещё одна интересная возможность проявить творческие способности - создание анимированных иконок сайта. Это особенно актуально, так как самый популярный в настоящее время браузер Firefox поддерживает эту функцию. Неплохой вариант такой анимации - иконка в виде вращающегося логотипа вашей фирмы - сразу привлечет внимание посетителя.

Для этого, не мудрствуя лукаво, создаёте GIF-анимированную картинку соответствующего размера (16х16 или 32х32 пикселей), например, icon.gif, помещаете её в корневой каталог и указываете путь к файлу в теге <link>:
<link rel="shortcut icon" href="icon.gif" type="image/gif">

Если для создания иконки сайта вы не расположены изучать новый фоторедактор или заниматься установкой плагина к Photoshop, то можно воспользоваться online функцией преобразования любого изображения в favicon.ico на сайте favicon.ru. Кстати, там же можно найти много интересного про иконки сайта и ответы на частые вопросы. Рекомендую зайти...

12.01.2010 г.

Ещё статьи по теме "Полезные мелочи веб-дизайна":
Вывод текущей даты на сайте
Создание формы обратной связи на сайте
Создание "схемы проезда" на сайте
Создание фона для сайта
Веб-дизайн, поисковая оптимизация и продвижение сайтов в интернете
Сжатие фотографий для интернета и электронной почты
Ключевые слова и продвижение сайта

Задать вопрос автору





Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: создание иконок для сайта, иконки сайта скачать бесплатно, иконки сайта, создание иконок сайта в Photoshop