Создать Фавикон - иконку для браузера 0

Создать Фавикон - иконку для браузера - уроки фотошоп


Для Web дизайнера умение создавать фавиконы, иконки и подобные иллюстрации – это основа профессии. В этом уроке вам будет дано небольшое введение в искусство Pixel art.


Время: до 1 часа
Сложность: низкая


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

Создать Фавикон - иконку для браузера - уроки фотошоп

Шаг№1

Нам нужно будет сохранить наш значок в формате (ICO). Стандартные настройки Photoshop, не поддерживают данный формат, поэтому прежде чем мы продолжим создание иконки, нам необходимо установить плагин. Telegraphics - это то, что нужно. Поэтому Вы должны скачать его и установить, прежде чем продолжить работу. Это бесплатный плагин, способной поддерживать ICO файлы в 1, 4 и 8-битовой индексированной и 24-бит RGB режимах, а также чтения и записи 32-разрядных "XP" иконок (с альфа-каналом 8-бит). Кроме этого, этот плагин полезен не только в этом уроке Фотошоп - если вы планируете начать карьеру в дизайне иконок, то это отличный плагин!

Создать Фавикон - иконку для браузера - уроки фотошоп

Шаг№2

Значки имеют стандартный размер 16x16 пикселей. Многие люди считают его создание, исключительно трудной дизайнерской работой, из-за такого маленького размера холста, так что это ставит Вас перед выбором - Вы можете придерживаться формата 16x16px и выполнять его с помощью Pencil Tool = Карандаша (100% непрозрачность, 1px толщина), или можно создать с размером холста  64x64 пикселей. Если вы выбираете второй вариант, помните, что вы должны придерживаться четкой детализации, либо качество изображения просто будет потеряно при масштабировании.

Создать Фавикон - иконку для браузера - уроки фотошоп

Шаг№3

Когда вы закончили проектирование вашего значка, который вы должны сохранить  в соответствующем формате. Выберите File > Save As = Файл> Сохранить как,Windows Icon (ICO) (это будет доступно, только после установки плагина и перезапуски Photoshop), и сохраните изображение как Favicon.ico. Теперь загрузите этот файл в каталоге базы HTML вашего сайта.

<link rel="Shortcut Icon" href="/favicon.ico">

Шаг№4

Пожалуйста, обратите внимание, что не все  браузеры имеют безупречную поддержку фавиконов. Например если Вы установили значок. а он так и не отображается, попробуйте почистить КЕШ Вашего браузера!

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

Сайт: Stadion-Kuban.ru

Виджет на Яндексе: yandex.ru/?add=111794

Мы ВКонтакте: vk.com/Stadion-Kuban

И в Твиттере: twitter.com/Stadion-Kuban

Информация
Автор / Разработчик
Автор не указан
Перевел
Автор перевода не указан
Сложность
Легкая
Источник
Добавил
Yara
Дата
12-05-2020, 20:15
Метки:  еще статьи

Поделиться ссылкой

Прямая ссылка:
BB-code ссылка:
HTML ссылка:

Комментарии (0)

Имя
Эл. почта
Комментарий
Вопрос: 6 + 2 =

Для активации данной функции необходимо зарегистрироваться и авторизоваться на сайте.

Ваш IP: 204.236.235.245
Последние уроки
Вконтакте
Архив сайта
.