Создание favicon (иконка сайта, отображаемая на вкладке браузера)с помощью Photoshop

Создание favicon (иконка сайта, отображаемая на вкладке браузера)с помощью Photoshop 2014-08-26

Нет прав для скачивания
Совместимость с XenForo
  1. 1.2
  2. 1.3
  3. 1.4
Не будем останавливаться на самой программе, типа где скачать, как установитью. Все, вы являетесь счастливым обладателем программы и немного умеете ей пользоваться. Из архива, в зависимости от разрядности вашего фотошопа (ICOFormat.8bi - для 32 битной или ICOFormat64.8bi - 64 битной), берем файлы плагина для сохранения формата ico. Закидываем их в папку Plug-ins\File Formats (если нет папки File Formats, создаем), вашей программы.
Открыванм, создаем новое изображение:

Image 2.png


Почему спросите 32х32 пикселей, скажу так:
  • Рисовать картинку удобнее;
  • Иконка будет четче видна;
  • Браузер сам смаштабирует иконку под нужный размер.
Нарисовали необходимую картинку, теперь надо сахранить ее в два формата PNG и ICO.

Image 3.png
Image 4.png


Как видите на изображении при сохранении формата ico, после расширения стоит скобочка, автор плагина немного ошибся при написании его или просто шутник, улыбнулся типа :-). Так вот эту скобочку надо убрать. Не знаю как в 32-х разрядной, но у меня так.
Так, мы сделали две иконки, но нам еще нужна третья, в формате GIF. Конечно, можно было сразу сохранить, но формат gif, хуже чем png (если конечно не делать анимированный favicon), поэтому мы сделаем небольшие манипуляции, допустимые для этих форматов и web. Просто сделайте копию favicon.png и переименуйте в favicon.gif (именно переименуйте, просто поменяйте расширение).
Все, у нас теперь три файла иконки, устанавливаем:
  • Закидываем три файла иконки, в корень сайта (папка www или public_html);
  • Импортируем как дополнение файл addon-favicon.xml
Если хотите, можно без импорта дополнения, пропишите в ручную во всех стилях в шаблоне PAGE_CONTAINER. Там надо найти строчку:
Код:
<link rel="apple-touch-icon" href="{xen:helper fullurl, @ogLogoPath, 1}" />
Это ссылка на стандартную иконку XenForo и заменить на:
Код:
<link rel="icon" type="image/vnd.microsoft.icon" href="{$homeLink}/favicon.ico"/>
<link rel="icon" type="image/gif" href="{$homeLink}/favicon.gif"/>
<link rel="icon" type="image/png" href="{$homeLink}/favicon.png"/>

Ну уж если хотите, что бы у вас был полный набор иконок на все случаи жизни и для всех ос и девайсов, то посмотрите это http://xenforo.info/resources/Создание-favicon-на-сервисе-real-favicon-generator.2234/
Автор
Skaiman
Скачивания
46
Просмотры
961
Первый выпуск
Обновление
Оценка
5.00 звёзд 1 оценок

Другие ресурсы пользователя Skaiman

Поделиться ресурсом

Назад
Сверху Снизу