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