Для 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

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

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