Фавиконы (сокращение от избранных значков) — это те крошечные маленькие значки, которые остались от адресной строки вашего веб-браузера, и являются частью общего бренда вашего сайта. Они отображаются в вашем веб-браузере, а также в новостных лентах, поэтому важно, чтобы вы включили один на свой сайт. Фавиконы действительно маленькие иконки; их размеры 16 на 16 пикселей — не так уж много места для работы. Посмотрите в Интернете и посмотрите, что используют другие сайты. Некоторые значки работают лучше, чем другие, при этом небольшом размере, и ключом является простота.
Хорошо, тогда давайте начнем.
- Загрузите плагин для Photoshop, который позволяет сохранить файл в формате Windows Icon (ICO). Вы можете скачать бесплатный плагин под названием ICO Format с www.telegraphics.com.au/sw/ . Инструкции по установке включены в бесплатную загрузку.
- Откройте Фотошоп. Выберите «Файл»> «Создать» и создайте новый документ с разрешением 72 ppi и размерами 64 на 64 пикселя. Мы уменьшим размеры после создания графики.
- Создайте или разместите ваше произведение искусства в новом документе. Если вы используете текст в фавиконе, обязательно отключите сглаживание, чтобы края были красивыми и четкими.
- В качестве значка я использую фиолетовый отпечаток лапы, при этом одна часть лапы выделена розовым цветом. Это было создано с использованием векторной формы.
- Когда ваш дизайн будет готов, выберите «Изображение»> «Размер изображения». Убедитесь, что флажок Constrain Proportions в нижней части диалогового окна включен; затем установите для поля «Ширина» или «Высота» значение 16 пикселей (в Photoshop другое поле автоматически изменится на 16). Нажмите ОК.
- Если ваш дизайн выглядит немного размытым, используйте фильтр Unsharp Mask.
- Теперь, когда ваш значок готов, выберите «Файл»> «Сохранить как» и выберите значок Windows (ICO) во всплывающем меню «Формат» в нижней части диалогового окна; затем нажмите Сохранить.
И это ваш фавикон завершен. Очень просто.
Если вы создали значок для своего собственного сайта, вы готовы выгрузить файл на корневой уровень своего веб-сайта, где находится ваша страница указателя. Не все веб-браузеры поддерживают значки избранного, но для браузеров, которые поддерживают его, вы можете вставить следующий код в раздел <head> ваших веб-страниц:
<link rel="SHORTCUT ICON" href="/favicon.ico">Если вы хотите узнать больше от Дженнифер, подпишитесь на нашу новостную рассылку по веб-дизайну, SitePoint Design View .
Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, например, к фондам Photoshop .
Комментарии к этой статье закрыты. Есть вопрос о фотошопе? Почему бы не спросить об этом на наших форумах ?