Как создать значок сайта .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. Добавьте в закладки постоянную ссылку.
Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов
Дизайн сайта Favicon в фотошопе
Хорошо, тогда давайте начнем.
- Загрузите плагин для Photoshop, который позволяет сохранить файл в формате Windows Icon (ICO). Вы можете скачать бесплатный плагин под названием ICO Format с www.telegraphics.com.au/sw/ . Инструкции по установке включены в бесплатную загрузку.
- Откройте Фотошоп. Выберите «Файл»> «Создать» и создайте новый документ с разрешением 72 ppi и размерами 64 на 64 пикселя. Мы уменьшим размеры после создания графики.
- Создайте или разместите ваше произведение искусства в новом документе. Если вы используете текст в фавиконе, обязательно отключите сглаживание, чтобы края были красивыми и четкими.
- В качестве значка я использую фиолетовый отпечаток лапы, при этом одна часть лапы выделена розовым цветом. Это было создано с использованием векторной формы.
- Когда ваш дизайн будет готов, выберите «Изображение»> «Размер изображения». Убедитесь, что флажок Constrain Proportions в нижней части диалогового окна включен; затем установите для поля «Ширина» или «Высота» значение 16 пикселей (в Photoshop другое поле автоматически изменится на 16). Нажмите ОК.
- Если ваш дизайн выглядит немного размытым, используйте фильтр Unsharp Mask.
- Теперь, когда ваш значок готов, выберите «Файл»> «Сохранить как» и выберите значок Windows (ICO) во всплывающем меню «Формат» в нижней части диалогового окна; затем нажмите Сохранить.
Нажмите ОК. И это ваш фавикон завершен. Очень просто.
Если вы создали значок для своего собственного сайта, вы готовы выгрузить файл на корневой уровень своего веб-сайта, где находится ваша страница указателя. Не все веб-браузеры поддерживают значки избранного, но для браузеров, которые поддерживают его, вы можете вставить следующий код в раздел <head> ваших веб-страниц:
<link rel="SHORTCUT ICON" href="/favicon.ico">
примечание: хотите больше?
Если вы хотите узнать больше от Дженнифер, подпишитесь на нашу новостную рассылку по веб-дизайну, SitePoint
Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров.
Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, например, к фондам Photoshop .
Комментарии к этой статье закрыты. Есть вопрос о фотошопе? Почему бы не спросить об этом на наших форумах ?
Как сделать фавиконку в Photoshop — Brendan Williams Creative
Photoshop имеет множество применений в фотографии, графическом дизайне и цифровом искусстве. Если вам нужно, вы даже можете сделать фавикон в Photoshop. Вы можете не знать, что такое favicon, но вы видели их раньше — на самом деле, скорее всего, прямо сейчас перед вами несколько.
Фавикон — это маленький значок, который находится рядом с названием веб-сайта на вкладке браузера. Обычно бренд или компания использует свой логотип в качестве фавикона. Фавиконы важны, так как они делают сайт более профессиональным, помогают поддерживать единообразие бренда и позволяют пользователям видеть, где находится вкладка веб-сайта, когда у них открыто несколько вкладок.
Настройки документа для создания фавиконки в Photoshop
Поскольку фавикон — это такая маленькая иконка, вам не нужны и не нужны тонны пустого пространства вокруг вашего логотипа, когда он находится в документе. Фавикон обычно имеет размер 16×16 пикселей. Однако вам все равно понадобится достаточно большой размер документа, чтобы вы могли добавить высококачественную версию своего логотипа. Мы начнем с документа размером 64×64 пикселя.
Примечание: Вы также можете проверить рекомендации по размеру фавикона в используемой вами системе управления контентом.
Чтобы создать значок, вам нужно открыть новый документ и отредактировать настройки документа, чтобы отразить правильный размер вашего значка. На начальном экране Photoshop нажмите New File .
Откроется окно нового документа .
Убедитесь, что вы работаете с пикселями, щелкнув единицу измерения и выбрав пиксели в раскрывающемся меню.
Затем отредактируйте поля ширины и высоты, чтобы отобразить квадрат размером 64×64 пикселя.
Вы можете отредактировать разрешение , чтобы отразить 72 пикселя/сантиметра , так как это даст изображение хорошего качества без создания большого размера файла. Что касается цветового режима , то лучше оставить RGB Color , так как это лучший цветовой режим для цифровых целей.
В раскрывающемся меню Background Contents выберите Transparent .
Это обеспечит прозрачность фона при экспорте фавикона.
Нажмите Создать .
Применение вашего логотипа и экспорт значка из Photoshop
Теперь вам нужно добавить в документ свой логотип или дизайн фавикона (лучше не создавать его в этом документе, так как размер документа будет слишком большим). мало, и качество будет недостаточным для большинства случаев).
Найдите свой логотип или значок в своих файлах и перетащите файл в Photoshop.
Он появится в вашем документе. На панели слоев , вы увидите, что имя слоя изменится на имя файла логотипа.
Вы можете перемещать логотип по документу с помощью инструмента Move Tool ( V ).
Чтобы упростить центрирование логотипа, вы можете включить интеллектуальные направляющие, которые будут появляться при перетаскивании логотипа по документу и помогать вам ориентироваться в центре. Перейдите к View > Show > Smart Guides , чтобы убедиться, что вы включили Smart Guides.
При перетаскивании направляющие отображаются в документе в виде розовых линий. Это автоматически переместит ваш логотип в центр документа, когда вы держите его рядом с центром.
Когда вы довольны размещением, экспортируйте значок в виде файла .png, выбрав File > Export > Export As .
Вы заметите, что окно предварительного просмотра очень маленькое. Вы можете использовать значки «плюс» и «минус» внизу, если хотите увеличить масштаб предварительного просмотра.
Щелкните раскрывающееся меню Формат файла и выберите PNG .
Затем установите флажок рядом с Прозрачность , чтобы убедиться, что фон экспортируется как прозрачный.
Вам не нужно беспокоиться о других настройках, таких как изображение или размер холста, поскольку вы уже установили размер своего холста соответствующим образом. Я предлагаю вам оставить настройки цветового пространства такими, какие они есть, чтобы не изменить цветовую схему конечного продукта. Нажмите Export , когда закончите.
Загрузка вашего фавикона на ваш веб-сайт
Хотя некоторые говорят, что файл ICO требуется для загрузки значка на ваш веб-сайт, файл png будет работать нормально, особенно на распространенных платформах, таких как WordPress, Squarespace и SmugMug. Тем не менее, у каждого конструктора сайтов могут быть разные требования к фавиконам, поэтому вам следует перепроверить свою конкретную платформу.
Вот краткий список ссылок на требования к фавикону для самых популярных конструкторов сайтов.
- WordPress
- Squarespace
- SmugMug
- Wix
- Weebly
Что должно быть включено в ваш Favicon?
Думайте о своем фавиконе как о небольшой частичке индивидуальности вашего сайта. Вы хотите, чтобы фавикон отражал что-то о вашем веб-сайте или бизнесе. Многие компании используют уменьшенную версию своего логотипа или знака/символа логотипа (как в приведенном выше примере), и лучше всего использовать цвета вашего бренда, чтобы сохранить целостность бренда.
Лучше всего, чтобы ваш значок был простым, так как все, что слишком занято или запутанно, может показаться непрофессиональным или непривлекательным. Слова не работают в уменьшенном масштабе, поэтому избегайте добавления ненужных элементов, таких как слова в ваш значок. Цель состоит в том, чтобы фавикон запомнился людям и сразу же заставил задуматься о вашем бренде или продукте.
Как создать значок .ico с помощью Photoshop
Из этого туториала вы узнаете, как
Как создать значок .ico с помощью Photoshop
Фавикон — это небольшой, но важный способ продвижения вашего бренда на веб-сайте. Вот как это может выглядеть на вашем веб-сайте:
Photoshop — отличная и гибкая программа редактирования графики для создания пользовательских фавиконов.
Фавикон обычно 16×16 Мини-логотип, который вы можете использовать на своем веб-сайте, но если вам нужно немного больше места для работы, вы можете начать с документа размером 64×64 пикселей, а затем уменьшить его позже.
Создадим новый документ в Photoshop. Открыть «Файл» > «Новый» меню:
Используйте инструмент «Масштаб», чтобы увеличить документ для редактирования:
Для нашего примера фавиконки мы создадим простой градиентный фон с двумя буквами «TM» (торговая марка).
Примените «Инструмент градиента» к документу. Не стесняйтесь использовать любые пресеты цветов, доступные по умолчанию, или создавать новые:
Используйте «Инструмент горизонтального текста»
, чтобы добавить собственный текст. Установите семейство шрифтов, размер шрифта, цвет шрифта:Использование «Инструмента преобразования» (Ctrl + T) настройка положения текста:
Объедините слои , как показано на скриншоте ниже:
Перейдите к «Файл» > «Сохранить как» , откройте раскрывающееся меню и выберите параметр .PNG (*.PNG) . Хит Кнопка «Сохранить» :
Вы успешно создали свою фавиконку. Он был сохранен как файл ‘favicon.png’ на жестком диске.
Фавиконы сохраняются как файлы
Откройте в браузере любой онлайн-сайт по конвертации изображений. Мы будем использовать этот сайт.
Перетащите файл ‘favicon.png’ в область «Загрузка» (как показано на скриншоте). Преобразование начинается автоматически. Процесс занимает 1-2 секунды:
Нажмите кнопку «Загрузить» , чтобы загрузить файл «favicon.ico» на жесткий диск.
Поэтому последним шагом будет преобразование формата изображения из .PNG в .ICO . Это будет самый простой шаг во всем уроке.И ты это сделал! Мы создали уникальный фавикон для вашего сайта с помощью программы Adobe Photoshop. Не стесняйтесь загружать свой favicon на свой сервер.
Не стесняйтесь просмотреть подробный видеоурок ниже:
Как создать значок .ico с помощью Photoshop
Если ваш бюджет ограничен и вы не можете позволить себе платить за подписку Adobe каждый месяц, вы можете попробовать этот онлайн-Photoshop.
Редактор, который доступен абсолютно бесплатно и поможет даже начинающим пользователям справиться с дизайном логотипов и иконок. Если вы не считаете Photoshop своим основным инструментом для создания пользовательских фавиконов, присмотритесь к этим удобным бесплатным генераторам фавиконов, которые идеально подходят для такой задачи.
1. Genfavicon
Это замечательный инструмент, с помощью которого вы можете превратить любое изображение в рабочий значок для вашего сайта. Прежде всего, вам нужно обрезать изображение и изменить его размер (оба инструмента доступны здесь), а затем сохранить результат в формате .ico. Существует удобная функция предварительного просмотра, поэтому вы можете увидеть, как будет выглядеть ваш значок, прежде чем нажать кнопку «Сохранить».
2. RealFaviconGenerator
Вы вряд ли найдете более универсальный и гибкий инструмент для создания фавиконов. Самым большим преимуществом RealFaviconGenerator является возможность протестировать ваш новый значок, введя адрес веб-сайта и узнав, насколько эффективен значок.
Сервис собирает отзывы и сортирует их по платформам, чтобы вы могли узнать, как ваш фавикон будет выглядеть в разных браузерах и ОС. Имея в виду эту информацию, вы можете улучшить свой фавикон, чтобы сделать его привлекательным для более широкого круга людей.
3. Xiconeditor
Поистине замечательный генератор для быстрого и легкого создания фавиконов с нуля. Просматривая доступный набор инструментов, вы обязательно будете поражены, так как есть все необходимые инструменты для задачи — инструмент для ввода текста, ластик, кисть, инструмент карандаш и многие другие инструменты, которыми делятся абсолютно бесплатно.
Если вы уже создали своего рода базу для своего значка, вы можете импортировать его и настроить, изменив размер. Функция предварительного просмотра добавляет популярности этому сервису, так как всегда приятно знать, как будет выглядеть ваш фавикон, прежде чем импортировать результат.
4. Логастер
Пожалуй, это один из самых быстрых и простых генераторов фавиконок.
Общее количество логотипов, созданных с помощью Logaster, превышает 6 000 000 штук.
Процесс очень прост. Выберите «Создать логотип», введите название вашей компании и выберите нужный вид деятельности. Существует множество готовых шаблонов, которые вы можете использовать с небольшой настройкой. Как только вы закончите с настройками, нажмите «Старт» и наслаждайтесь результатом.
5. Favicon-Generator
Это удобный инструмент, которым пользуются люди, использующие приложения Android, Microsoft и iOS, а также те, кто пытается создать броский и хорошо оптимизированный значок для онлайн-источников. Он поддерживает такие форматы, как JPG, PNG и GIF, поэтому загрузите изображение в любом из этих форматов и превратите его в файл .ico. Если под рукой нет подходящего изображения, просмотрите встроенную коллекцию иконок.
Вы можете искать нужное изображение по буквам, цветам и цифрам. После того, как вы выбрали подходящий файл, начните его редактировать и сохраните полученный значок в корневом каталоге вашего сайта.
