Как создать значок сайта .ico при помощи Photoshop
Из этого туториала Вы узнаете, как создать значок для вашего сайта при помощи Photoshop.
Как создать значок сайта .ico при помощи Photoshop
Значок сайта – это небольшой, но значительный элемент продвижения вашего бренда на сайте. Вот пример, того, как он может выглядеть на вашем сайте:
Photoshop – это прекрасная программа для работы с изображениями, которая поможет Вам создать пользовательский значок сайта.
Значок сайта – это миниатюрный логотип (16×16), который Вы можете использовать на сайте. Если Вам удобнее работать с изображением большего размера, Вы можете работать над значком, размером 64×64 пикселя, а затем его уменьшить.
Создайте новый документ Photoshop. Откройте вкладку меню ‘Файл’ > ‘Новый’ (‘File’ > ‘New’):
Используйте инструмент ‘Масштаб’, для того чтобы увеличить документ для редактирования:
Например, мы создадим значок сайта, который состоит из простого градиентного фона и двух букв ‘TM’ (Торговая марка).
Примените к вашему документу инструмент ‘Градиент’ (Gradient Tool). Вы можете использовать одно из доступных сочетаний цветов, или создать новое сочетание цветов:
Используйте инструмент ‘Горизонтальный текст’ (Horizontal Type), для того чтобы добавить ваш текст. Задайте шрифт, цвет и размер шрифта:
Используя инструмент ‘Трансформирование’ (Ctrl + T), отрегулируйте расположение текста:
Соедините слои (Merge layers), как это показано на скриншоте ниже:
Перейдите на вкладку ‘Файл’ > ‘Сохранить как…’ (File > Save As), откройте выпадающее меню и выберите формат .PNG (*.PNG). Нажмите на кнопку ‘Сохранить’ (Save):
Вы успешно создали значок сайта. Он был сохранён как файл ‘favicon.png’ на вашем компьютере.
Однако, значок сайта нужно сохранить в формате .
ICO. Этот формат файла позволяет сохранить несколько изображений разных размеров для масштабирования. По этому, теперь Вам нужно конвертировать созданный значок сайта .PNG в формат Откройте в браузере любой сайт конвертирования изображений. Мы воспользуемся этим сайтом.
Перетяните ваш файл ‘favicon.png’ в область ‘Загрузить’ (как это показано на скриншоте). Конвертирование начнётся автоматически. Процесс займёт 1 — 2 секунды:
Нажмите на кнопку ‘Скачать’ (Download), для того чтобы сохранить файл ‘favicon.ico’ на вашем компьютере.
ICO. Этот формат файла позволяет сохранить несколько изображений разных размеров для масштабирования. По этому, теперь Вам нужно конвертировать созданный значок сайта .PNG в формат Это конец данного туториала. Вы успешно создали пользовательский значок для вашего сайта, используя программное обеспечение Adobe Photoshop. Теперь Вы можете загрузить значок сайта на ваш сервер.
Вы можете также ознакомиться с детальным видео-туториалом ниже:
Как создать значок сайта .
ico при помощи Photoshop
Эта запись была размещена в Работа с Photoshop и помечена как .ico, favicon, file, Photoshop. Добавьте в закладки постоянную ссылку.
Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Секреты favicon.ico или как создать иконку для сайта в Photoshop — Da Diego
Вы хотите оригинальную и красивую иконку для вашего сайта? Сделайте её сами – в этом вам поможет данная статья.
Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») – это специальная стандартная или пользовательская иконка маленького размера, которая находится слева от ссылки (URL) в адресной строке веб-браузера. Также такие иконки используются в закладках рядом с названием сайта, во вкладках браузеров или как ярлык для web-страниц на рабочем столе или других папках Windows. Под маленьким размером подразумевается 16 на 16 пикселей – стандартный размер для иконок данного типа.
Основная цель такой иконки — сделать дизайн вашего сайта целостным и детализированным.
Все, что вам необходимо сделать, чтобы добавить иконку на сайт – это поместить готовый «favicon» в формате Windows Icon (.ico) в корневую папку вашего сайта. Большинство современных сайтов, за исключением Internet Explorer (IE), поддерживают использование иконок в формате GIF (включая анимированные варианты) и PNG (включая поддержку полной прозрачности фона), но так как абсолютно все браузеры, IE в том числе, понимают формат .ico, имеющий особенности, которые не дублируются в GIF и PNG, предлагаю ознакомиться именно с их созданием.
Системные требования
Так как мы будем создавать иконки в “Photoshop”, нам необходимо научить программу понимать расширение Windows Icon (ICO). Для этого нам потребуется специальный плагин экспорта формата файлов .ico, который можно бесплатно загрузить с Telegraphics. Плагин читает и записывает ICO-файлы в 1, 4, 8-битных индексированных и 24-битных RGB режимах, а так же читать и записывать 32-битные “ХР” иконки (с 8-битным альфа-каналом).
Чтобы установить плагин, вам необходимо на сайте разработчиков выбрать подходящий вариант системы, распаковать скачанный архив и поместить в папку “x:\Program Files\Adobe\Adobe Photoshop CS5.1\Plug-ins\File Formats\” (х = буква вашего диска, на который установлен Photoshop) файл с расширением “.8BI”, после чего запускаем или перезапускаем сам Photoshop.
Приступаем к созданию
Так как рабочая зона размером в 16х16 пикселей является недостаточно большой для удобной работы с изображением, лучше начать ваш проект с размером рабочей зоны хотя бы 64х64 пикселя (лучше использовать как можно большие размеры при создании иконок для более удобного выражения творческих идей, впоследствии изображение можно легко отмасштабировать с сохранением пропорций). Чтобы задать необходимые размеры рабочего поля необходимо выбрать в меню Photoshop пункт «File>New» или нажать сочетание клавиш Ctrl+N.
Дизайн иконки
Если у вас уже имеется готовый логотип большего размера, попробуйте уменьшить его до 16х16 пикселей и посмотрите, как хорошо он смотрится.
Если при таких размерах логотип плохо различим и его графическая информативность невысока, создайте поле 64х64 пикселя и сделайте наипростейший дизайн иконки, который будет содержать основные цвета вашего сайта. Когда вы будете готовы протестировать готовый дизайн — выберите меню «Image>Image Size» или нажмите комбинацию клавиш «Alt+Ctrl+I» и задайте размер 16х16, выставив при этом режим интерполяции «Bicubic Sharper» (этот режим наилучший для уменьшения изображения и дает возможность оценить будет ваша иконка “размытой” при уменьшении или нет). В случае, когда изображение все-таки недостаточно четкое, вернитесь к исходному изображению и сделайте ваш рисунок более четким, насыщенными и/или контрастным, после чего заново отмасштабируйте вашу иконку.
Если вам кажется, что ваша иконка получилась не совсем такой, как вы хотели, продолжайте улучшать и видоизменять её до момента, когда она максимально будет похожа на вашу задумку. При работе с такими размерами этот процесс может занять у определенное время, прежде чем у вас все получится.
Сохранение и загрузка полученной иконки
Для сохранения полученного результата необходимо в меню выбрать пункт «File>Save As» или нажмите комбинацию клавиш «Shift+Ctrl+S» и задать обязательное имя файла «favicon.ico». В меню «Format» необходимо выбрать Windows Icon (ICO) из выпадающего меню. Этот формат будет доступен в Photoshop, только если вы скачали и правильно установили необходимый плагин и задали правильный цветовой режим при создании рабочего окна (1, 4, 8-битный индексированный или 24-битный RGB).
Следующим шагом будет размещение новой иконки в корневой папке вашего сайта. Для этого соединитесь с сервером, на котором находится ваш сайт, и закачайте туда созданный «favicon.ico». Этот файл необходимо обязательно поместить в папку, в которой находится домашняя (index.html) страница, а не в папку с изображениями или какую-либо другую папку, так как стандартным местоположением этого файла является именно корневая папка сайта. Если файл был правильно размещен (а его название точно «favicon.
ico»), большинство браузеров автоматически распознают его.
Однако для некоторых браузеров необходимо указать прямую ссылку на иконку вашего сайта непосредственно в HTML-коде, а именно добавить ее в хедер каждой страницы, на которой необходимо разместить «favicon.ico»:
В большинстве современных тем для Joomla, WordPress и прочих движков используются отдельные файлы (например “header.php”), где достаточно прописать 1 раз эту строчку в начале файла и все страницы будут автоматически подхватывать указанные в них настройки. Также существует расширенный вариант написания данной строчки:
Если вы сомневаетесь, какой вариант подходит именно вам, пропишите обе строчки.
Не забудьте закачать отредактированные страницы обратно на сервер для отображения изменений в случае, когда изменения производились в локальной копии сайта.
Для использования иконки в формате GIF или PNG необходимо прописать следующие строчки:
или
Однако запомните, что оба эти формата не поддерживаются IE и не будут в нем работать.
Мультиразмерный Favicon
Помимо обычного favicon размером 16х16 пикселей, которые используются для оформления адресной строки, существует его разновидность с размерами в 32×32 пикселя и 48×48 пикселей. Эти иконки очень распространены в среде Windows. Например, если вы хотите поместить ярлык на веб-страницу на ваш рабочий стол, Windows автоматически попытается использовать favicon в качестве изображения для ярлыка. Но стандартного размера (16х16 пикселей) будет недостаточно для качественного отображения, так как стандартный размер ярлыка в среде Windows 48х48 пикселей – это значит, что ярлык будет растянут до необходимых размеров и станет некрасивым и практически нечитаемым.
Однако существует способ исправить этот недостаток. Полезное свойство файлов .ico заключается в том, что они могут содержать в себе много вариантов одной и той же иконки с разными размерами и глубиной цвета (наподобие возможности .gif-файлов содержать множество фреймов). Поэтому если поместить в favicon.
ico изображение сразу в нескольких размерах и с разной глубиной цвета, Windows сможет автоматически выбрать наиболее подходящие параметры для применения к ярлыку. Наиболее распространённые размеры ярлыков, которые могут быть использованы, — 16×16, 24×24, 32×32 и 48×48 пикселей.
Создание мультиразмерной иконки не намного сложнее, чем создание обычного favicon размером 16х16 пикселей. Необходимый плагин мы можем найти все на том же сайте Telegraphics, он позволит поместить несколько иконок в одном .ico-файле. В принципе это даже не плагин, а отдельная программа, которую можно использовать как в Windows (через командную строку), так и в MacOS (посредством перетаскивания). Также у этой программы существуют аналоги, как например: Sib Icon Studio (www.sibcode.com/icon-studio) и Any to Icon Convertor (www.aha-soft.com/anytoicon).
Что касается глубины цвета, вы могли заметить, что некоторые иконки имеют неровности (как зазубрины) по краям, в то время как другие сглаживают эти неровности и выглядят очень симпатично.
Это возможно благодаря 32-битной глубине цвета, которая отображает настоящую прозрачность, как и Photoshop. Вы можете создать 32-битную версию иконки вместе с 24-битной (16 миллионов цветов, с поддержкой прозрачности как в .gif-файлах), 16-битную (256 цветов) и даже 8-, 4- или 2-битную версию, и поместить их всех в один ico-файл.
Поэтому если вы хотите быть уверенными, что ваш favicon будет смотреться красиво во всех возможных случаях – лучше сделать его сразу в нескольких варианта. Например:
16×16, 16-бит (256) цветов
16×16, 32-bit colors
32×32, 16-бит (256) цветов
32×32, 32-bit colors
48×48, 16-бит (256) цветов
48×48, 32-bit colors
Но не стоит слишком увлекаться и создавать много вариантов, так как с каждым добавлением favicon.ico увеличивается в размере, что может негативно повлиять на его загрузку.
Решение возможных проблем
Общие проблемы
В случае если после проделанных действий ваш «favicon» так и не появился, попробуйте несколько раз (около 5) обновить вашу страницу или очисть кэш браузера, или поставьте “?” в конце ссылки (например “http://diego.
com.ua/?”) — это действие заставит думать браузер, что страница является новой и еще не была добавлена в кэш.
Еще одним способом решения этой проблемы является переход по прямой ссылке на ваш «favicon» (например: http://diego.com.ua /favicon.ico), после чего браузер (IE) немедленно отобразит и запомнит иконку.
Проблемы совместимости с браузерами
“Microsoft IE 6” (а также 7, 8 и 9) может не отображать “favicon” до тех пор, пока ссылка на вашу страницу не будет добавлена в избранное. В таком случае попробуйте следующий вариант – зажмите левую клавишу мышки на отображаемом “favicon” (обычно стандартная иконка IE), после чего “потрясите” его и отпустите. Данные действия приведут к перезагрузке страницы и обновлению иконки. Другим способом решения данной проблемы является добавление следующего кода в секцию “” страниц, на которых вы хотите видеть ваш “favicon”:
“Safari” для Mас-систем не будет отображать обновленный “favicon” до тех пор пока не будет очищен кэш браузера.
Однако нажатие кнопки меню “Empty cache” не решит проблему, так как “Safari” хранит иконки в отдельной папке. Чтобы очистить папку кэша иконок необходимо зайти в меню “Edit > Reset Safari” и поставить галочку напротив “Remove all website icons”. Альтернативным (ручным) способом является удаление содержимого следующей папки: “User>Library>Safari>Icons”. Для Windows-версии “Safari” путь немного отличается: “C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari”, в этой папке необходимо удалить файл “WebpageIcons.db”. Напоминаю, что папка “Local Settings” и вложенные в неё папки скрыты по умолчанию, а значит для того, чтобы в них попасть, необходимо настроить отображение скрытых файлов и папок Windows. После удаления вышеуказанных фалов необходимо перезапустить “Safari” (в некоторых случаях также необходимо перезагрузить компьютер).
Для решения аналогичной проблемы в “Mozilla FireFox” необходимо очистить кэш браузера и перезапустить программу.
В браузере “Opera” такой проблемы нет, поэтому после обновления вашей иконки достаточно простого обновления страницы (возможно несколько раз).
Другой проблемой в ОС “Windows” является обновление иконок для Интернет-страниц (к примеру, при размещении иконки страницы на Рабочем столе). Для принудительного обновления изменившихся иконок необходимо выполнить следующие действия:
1. Нажать правой кнопкой по Рабочему столу;
2. Выбрать пункт меню “Свойства” (для “Windows XP”) или “Персонализировать” (для “Windows Vista” или “Windows 7”) и перейти на вкладку “Свойства Экрана”;
3. Поменять качество цветопередачи с 32-разрядного на 16-разрядное и нажать кнопку “ОК” или “Применить”;
4. Обратно поменять качество цветопередачи на 32-разрядно и нажать кнопку “ОК” или “Применить”.
Проблемы с плагином “Photoshop”для работы с иконками
Формат “Windows Icon” (ICO) будет недоступен, если:
1. Вы неправильно установили плагин;
2. Вы неправильно определили версию плагина подходящую для вашей ОС;
3.
Рабочая область в “Photoshop” была создана не в 1, 4, 8-битных индексированных или 24-битных RGB режимах.
Также после установки плагина необходимо перезагрузить сам “Photoshop” для вступления в действие сделанных изменений.
Как создавать и сохранять файлы ICO в Photoshop
Файлы
ICO полезны для системных значков и фавиконов веб-сайтов. Photoshop не может обрабатывать этот формат по умолчанию, но с помощью нескольких простых шагов он сможет это сделать.
Пробовали ли вы когда-нибудь сделать иконку в Photoshop — будь то фавикон для вашего сайта или иконка для программы на вашем компьютере? Как оказалось, редактор изображений Adobe не сохраняет файл ICO прямо из коробки, но это не значит, что вы не можете их создать! Вот как это делается.
Сначала зайдите в Telegraphics и загрузите файл ICO (Windows Icon) Format. Он доступен для Windows и Mac. Обязательно загрузите 32-битный или 64-битный файл, соответствующий вашей системе.
Затем распакуйте файлы в формате .ZIP в папку:
C:\Program Files\Adobe\Adobe Photoshop CC 2014\Подключаемые модули\Форматы файлов
Для меня папки File Formats не было в моей папке Plug-ins, и если у вас то же самое, просто создайте новую папку.
Теперь перейдите в Photoshop, создайте новый документ и выберите «Сохранить как». Прокрутите список форматов, и теперь вы должны увидеть .ICO в списке. Если он отсутствует, убедитесь, что ваш файл имеет размер 256 x 256 пикселей или меньше, поскольку формат ICO не поддерживает изображения большего размера.
Используете ли вы файлы ICO в Photoshop? Что ты сделал? Поделитесь с нами в комментариях!
Изображение предоставлено: Skylines через ShutterStock
7 способов исправить поиск Windows File Explorer
Читать Далее
- Креатив
- Адоб Фотошоп
- Короткий
Об авторе
Дэйв Леклер (опубликовано 1460 статей)
Дэйв Леклер — бывший писатель MUO, ранее работавший над новостями и видеоконтентом.
Еще от Дэйва Леклера
Комментарий
Подпишитесь на нашу рассылку
Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
Нажмите здесь, чтобы подписаться
9 встроенных настроек Android для повышения безопасности вашего устройства
Почему Google запрещен в датских классах
Как использовать тени блоков CSS и тени текста
Как установить или обновить PowerShell в Windows 11
Все, что вам нужно знать о том, как купить Dogecoin на Coinbase
Почему совпадения Tinder перечисляют свои профили в Instagram?
Стоит ли использовать Facebook для входа в другие приложения? 6 плюсов и минусов
8 лучших карт захвата для ПК и консолей
Как использовать новый терминал Windows для повышения производительности
Как создать значок Favicon (.
ICO) в PhotoshopЧтобы поддерживать этот бесплатный сервис, мы получаем партнерские комиссионные через некоторые из наших ссылок. Это не влияет на ранжирование. Наш процесс проверки.
Что такое фавикон?
Фавикон (также называемый веб-сайтом, URL-адресом, ярлыком или значком закладки) — это небольшой значок, который отображается слева от URL-адреса страницы, которую вы просматриваете, в адресной строке браузера, а также в углу текущая вкладка браузера или окно браузера просматриваемой веб-страницы. Если у вас открыто несколько вкладок, он служит удобной визуальной очередью, которая поможет вам быстро распознать личность веб-страницы.
Как должен выглядеть фавикон?
Как правило, вам нужно создать фавикон, отражающий индивидуальность вашего веб-сайта. Это можно сделать, создав небольшую иконку вашего логотипа, или часть вашего веб-сайта или названия компании, а также используя цветовую схему вашего веб-сайта.
Вы хотите, чтобы фавикон застрял в головах людей как небольшое напоминание о том, кто вы есть.
Характеристики значка Favicon (файл .ICO)
Фавикон:
- Квадратное изображение
- 16 x 16 пикселей (хотя вы можете начать с 64 x 64, чтобы дать вашему дизайну больше свободы)
- Заканчивается расширением .ico .
Фавикон изначально был представлен в более ранней версии Internet Explorer и поддерживал только формат .ico. Сегодня большинство современных браузеров поддерживают другие графические форматы фавикона, помимо .ico (PNG, GIF (включая анимированные GIF)), но .ico чаще всего используется во всех браузерах и, таким образом, является стандартом, который вы должны использовать для своего Веб-сайт.
Создайте файл Favicon (.ICO) в Photoshop
Создайте новый файл в Photoshop. Хотя вы хотите получить квадрат 16×16 пикселей, вы можете начать с 32×32 или 64×64, чтобы у вас было больше места для работы.
Импортируйте квадратную версию вашего логотипа или значка для представления вашего бренда в Photoshop. Затем скопируйте и вставьте его в новый файл. Используйте инструмент преобразования (удерживая клавишу Shift, чтобы сохранить пропорции), чтобы изменить размер и убедиться, что измененный размер 16 × 16 по-прежнему выглядит хорошо. Когда вы закончите, перейдите к «Сохранить для Интернета» и сохраните в формате .png с разрешением 72 DPI (точек на дюйм).
Скрытый файл в .ICO с помощью Converter Tool
Перейдите на ICO Converter — бесплатный веб-сайт, который преобразует ваш файл .png в .ico. Нажмите «Обзор» и импортируйте созданный файл .png. Выберите размер и разрядность и сохраните на свой компьютер.
Добавьте значок Favicon на свою веб-страницу
После того как вы сохранили и готовы к работе favicon.ico, вы можете добавить его на свой веб-сайт следующим образом. В заголовок каждой веб-страницы вам нужно добавить следующий код (замените example.com/favicon.
ico на каталог, в который вы загрузили свой значок):
Мы не рекомендуем вам использовать относительный путь (href=»favicon.ico»), потому что это может привести к потере путей при перемещении вашего веб-сайта, а также более подвержено краже ссылок. Вместо этого используйте абсолютный путь (включая доменное имя), как в примере выше. Вы должны иметь возможность скопировать и вставить этот URL-адрес в свой веб-браузер и увидеть значок значка.
Загрузить значок на веб-сервер
После добавления URL-адреса файла значка на веб-страницу вам нужно убедиться, что файл favicon.ico действительно находится там, где вы его указали (в приведенном выше примере, в корне вашего документа (корневая папка вашего веб-сайта — например, /public_html или /www на серверах Linux)).
См. Favicon в действии!
Как только вы это сделаете, перезапустите веб-браузер, и вы должны увидеть свой значок — как слева от строки URL-адреса, так и в верхнем левом углу вкладки веб-страницы, которую вы посещаете.
Вы можете увидеть наш новый блестящий значок на скриншоте рядом с значком для Google Analytics.
Photoshop по-прежнему лучший?
Программа Adobe Photoshop по-прежнему является стандартным программным обеспечением для редактирования фотографий, но остается ли она лучшей? Наши эксперты углубляются и узнают в нашем обзоре Photoshop. Узнайте, на что способна последняя версия Photoshop, а также чем она отличается от конкурентов!
Удалось ли вам создать и отобразить свой новый значок?
Отказ от ответственности: Этот веб-сайт содержит обзоры, мнения и информацию о продуктах и услугах, производимых или предоставляемых третьими сторонами. Мы никоим образом не несем ответственности за такие продукты и услуги, и ничто из содержащегося здесь не должно рассматриваться как гарантия функциональности, полезности, безопасности или надежности любого рассматриваемого или обсуждаемого продукта или услуги. Пожалуйста, следуйте указаниям производителя или поставщика услуг при использовании любого продукта или услуги, рассматриваемых или обсуждаемых на этом веб-сайте.