| Yara | 12.05.2020 |
Создать Фавикон — РёРєРѕРЅРєСѓ для браузера |
Для 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
Пожалуйста, обратите внимание, что не все браузеры имеют безупречную поддержку фавиконов. Например если Вы установили значок. а он так и не отображается, попробуйте почистить КЕШ Вашего браузера!
Примечание: Вот такой интересный и полезный урок по Фотошоп! По определению иконки это просто мелочи, но они делают сайт уникальным , и они не добавляют практически никаких, расходов на веб-сервер, так что нет оснований отказываться от них! Если вам нужно вдохновение, попробуйте посмотреть на эту коллекцию, или просто посмотрите, что всплывает в браузерной строке сайтов.
Рсточник: www.biorust.com