Внимание! Сайт переехал на новый домен sayt-sozdat.ru. Пожалуйста, обновите страницы закладок с новыми URL
×
Закрытие
10
×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

Здравствуйте уважаемый посетитель!

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

В статье Устанавливаем бесплатный графический редактор GIMP речь пойдет о бесплатной программе GIMP, которая позволяет в полной мере решать вопросы по созданию элементов дизайна веб-страниц. И будет показано, как ее установить на локальный компьютер.

Кроме того здесь можно будет посмотреть, как в этот редактор добавить встроенное "Руководство пользователя", а также приведен бесплатный видеокурс, где можно поближе с ним познакомиться.

Для тех же, кто хочет заниматься дизайном на платном Adobe Photoshop (фотошоп), здесь также упомянут и такой вариант, основанный на использовании продления льготного бесплатного периода фотошопа на неопределенное время...

Cайт на практическом примере

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние сайта, создаваемого в рамках цикла статей Самописный сайт с нуля своими руками.

Исходные файлы данного сайта можно скачать из прилагаемых к статьям дополнительных материалов.

Вы здесь: Главная → Сборник статей → Дизайн-макет → Как сделать и разместить на сайте фавикон


Автор: / Дата:

Как сделать и разместить на сайте фавикон

Создаем и размещаем на сайте фавикон

Здравствуйте, уважаемый посетитель!

Сегодня создадим фавикон, который поможет выделять наш сайт во вкладках, закладках, в адресной строке браузеров, а также в поисковой выдаче по запросам пользователей.

Содержание


  • Выбор способа создания фавикона
  • Установка плагина в Фотошоп
  • Дизайн фавикона
  • Сохранение на сайте
  • Подключение к страницам сайта
  • Исходные файлы сайта

Выбор способа создания фавикона


О том, зачем нужен фавикон - уникальный значок (иконка) сайта, говорилось ранее в разделе Что такое фавикон и для чего он нужен одной из статей на этапе верстки сайта. Где для формирования шапки мы временно разместили на его место небольшую фигуру в виде фиолетового кружка.

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

Создаем фавикон, картинка 1

Рис.1

Следует отметить, что при наличии на сайте фавикона он становиться более узнаваемым для пользователей, что положительно сказывается на его продвижение.

Важность такой иконки подтверждается, например, тем, что Яндекс постоянно отслеживает файл favicon и сообщает об этом владельцу сайта в инструменте "Яндекс Вебмастер". Ниже показан фрагмент диагностики Яндекса при отсутствии проблем с фавиконом (при нормальном состоянии сообщение отображается полупрозрачным цветом текста с отметкой "Все в порядке").

Создаем фавикон, картинка 2

Рис.2

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

Существуют два основных способа создания - с помощью специальных онлайн сервисов, либо самостоятельно, используя графические редакторы. Например, которые уже использовались здесь при создании сайта Adobe Photoshop (Фотошоп) и Gimp.

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

В связи с этим мы здесь будем делать иконку используя именно графический редактор. В данном случае это будет Фотошоп. Но те, кто работает с Gimp, это можно делать и на этом редакторе. Тем более, что у него уже по умолчанию имеется возможность сохранять файлы с нужным для этих случаев расширением ico.

В фотошопе же для этого потребуется установить соответствующий дополнительный плагин, чем мы и займемся в следующем разделе.

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

Установка плагина в Фотошоп


Вообще, плагины используются для расширения возможностей различных программ. Причем они бывают платные и бесплатные. В данном случае, для возможности работы Фотошопа с файлами с расширением ico, которе обычно используется для фавиконов, установим на него бесплатный плагин ICO Format.

Для этого, сначала нужно его скачать. Это можно сделать на сайте разработчика. При этом следует скачать именно тот файл, который соответствует конфигурации компьютера. Где найти ссылки для скачивания плагина показано на приведенном скриншоте.

скриншот 92

Создаем фавикон, картинка 3

Рис.3

После скачивания плагин нужно распаковать и разместить в папке Plug-ins, находящейся в корневом каталоге установленной программы Adobe Photoshop, как показано ниже на скриншоте.

Создаем фавикон, картинка 4

Рис.4

Как видно из скриншота, каталоги Фотошопа находятся в папке Program Files компьютера. Следует также отметить, что после этих действий фотошоп нужно перезапустить.

Таким образом установка данного плагина закончена и теперь можно переходить к следующим этапам.

Дизайн фавикона


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

Но в любом случае, не надо пытаться разместить в фавиконе большое количество элементов, а тем более мелких. Дело в том, что размер этого знака очень мал, обычно он используется с размером 16×16 px. Поэтому, достаточно будет расположить лишь 1-2 элемента, которые смогли бы каким-то образом ассоциироваться с темой сайта.

Мы воспользуемся, наверное самым простым вариантом. В нашем случае, для создания фавикона возьмем изображение автомобиля, которое используется в шапке сайта, на фоне цвета его защитной ауры. Только в этом случае фон сделаем в виде квадрата с закругленными углами.

Что в итоге получилось, можно увидеть на приведенном скриншоте фотошопа.

Создаем фавикон, картинка 5

Рис.5

При этом для создания градиента фона здесь использовано внутренне свечение, как показано на рис.6.

Создаем фавикон, картинка 6

Рис.6

И последнее, что нам осталось сделать для формирования иконки, это уменьшить его размер, как было указано ранее, до 16×16 px.

Ниже показано, как она стала выглядеть при таком размере в растровом формате Фотошопа.

Создаем фавикон, картинка 7

Рис.7

И теперь все готово для размещения созданного фавикона на сайте.

Сохранение на сайте


Сохранение иконки делается через меню "Файл/Сохранить как...". После открытия ссответствующего окна необходимо во всплывающем меню "Тип файла" выбрать необходимый формат "ICO Windows Icon/Favicon (*.ICO)" и сохранить файл в корневом каталоге сайта.

Создаем фавикон, картинка 8

Рис.8

При этом, после того, как нажмем "Сохранить", должно появиться окно подтверждения, где мы еще раз указываем стандарт "ICO", после чего нажимаем "OK".

Создаем фавикон, картинка 9

Рис.9

Как будет выглядеть теперь корневой каталог сайта после добавления фавикона можно увидеть на следующем скриншоте.

Создаем фавикон, картинка 10

Рис.10

После этого осталось только подключить фавикон.

Подключение к страницам сайта


Для того, чтобы подключить иконку к сайту нужно во всех его заголовках страниц прописать код, аналогично тому, как это делалось ранее при подключении таблицы стилей CSS и файлов слайдера.

Ниже показано соответствующее дополнение в заголовке файла index.php, которое нужно также сделать и во всех остальных страницах.

  1. <head>

  2. <meta charset="utf-8" />

  3. <title>Главная</title>

  4. <meta name="Description" content="Краткое описание содержания страницы">

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

  6. <link rel="styleshee" type="text/css" href="styles/main.css"/>

  7. <link rel="styleshee" type="text/css" href="styles/flexslider.css"/>

  8. <script src="js/jquery-3.1.1.min.js" </script>

  9. <script src="js/jquery.easing.1.3.js" </script>

  10. <script src="js/jquery.flexslider.js" </script>

  11. <script src="js/flexslider_script.js" </script>

  12. </head>

Рис.11

Если теперь обновить браузер, то можно увидеть иконку в шапке сайта и на вкладке браузера.

Создаем фавикон, картинка 11

Рис.12

Стоит отметить, что иконка фавикона в результатх поиска появится не сразу, а только после того, как роботы поисковых систем проиндексирует сделанные изменения. Поэтому, для того, чтобы ее там увидеть, нужно некоторое время подождать.

Таким образом мы сделали, что хотели и на этом можем закончить. Как обычно, последнюю версию исходных файлов с внесенными изменениями можно скачать в дополнительных материалах в конце страницы.

Исходные файлы сайта


Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов.

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учета мнения посетителей.

Буду Вам за это очень признателен!