О НАС
КЛИЕНТАМ
ПАРТНЁРАМ
СЛЕДИТЕ ЗА НАМИ
ОТВЕТИМ НА ВОПРОСЫ
В ЧАТ-БОТЕ:
В ЧАТ-БОТЕ:
- Что такое иконка на сайте?
- Где взять иконки для сайта?
- 10 сайтов где вы можете бесплатно скачать иконки
- Лицензии иконок
- Как выбрать иконки для сайта?
- Как добавить иконку в тильде?
- Как добавить иконку во вкладку браузера?
- Как изменить иконки в стандартных блоках?
- Модификации для блоков с иконками в Тильда от Нолим
- А как сделать на Тильде?
- Как поменять цвет иконки в блоках?
- Заключение
Май, 2023
Время прочтения: 40 минут
Иконки на Тильде
Друзья, в этой статье мы расскажем вам что из себя представляют иконки, зачем они нужны, расскажем про библиотеку иконок от Тильда, а также поделимся практическими рекомендациями, как правильно их использовать на сайте.
Содержание
Содержание
- Что такое иконки?
- Где взять иконки для сайта?
- 10 сайтов где вы можете бесплатно скачать иконки
- Лицензии иконок
- Как выбрать иконки для сайта?
- Как добавить иконку в Тильде?
- Как добавить фавикон?
- Как изменить иконки в стандартных блоках?
- Модификации для блоков с иконками в Тильде от Нолим
- А как сделать на Тильде?
- Как поменять цвет иконки?
- Заключение
Что такое иконки?
Иконки — это небольшие графические изображения объектов или действий, которые используются для обозначения различных элементов и функций сайта. Значение иконок в веб-дизайне заключается в том, что они помогают пользователям быстрее ориентироваться на сайте, облегчают навигацию и поиск информации, и в целом делают сайт более понятным и доступным для пользователей. Кроме того, иконки могут использоваться для создания уникального и запоминающегося стиля сайта, а также для улучшения его внешнего вида и эстетического впечатления.
Они могут быть выполнены в различных стилях и форматах, и часто включают в себя узнаваемые символы или образы, связанные с конкретной тематикой или деятельностью сайта. Качественные иконки могут помочь привлечь внимание посетителей и повысить удобство пользования сайтом, что в свою очередь может привести к увеличению трафика и конверсии.
Важно также помнить, что иконки являются эффективным средством визуальной коммуникации, которое позволяет передавать информацию без использования слов и языковых барьеров. Иллюстрации легко понимаются всеми пользователями, поэтому иконки широко используются на сайтах, в интерфейсах, в операционных системах, в презентациях и в рекламе.
Поэтому выбор и дизайн иконок является важным аспектом веб-дизайна, и должно уделяться достаточное внимание при разработке сайта.
Они могут быть выполнены в различных стилях и форматах, и часто включают в себя узнаваемые символы или образы, связанные с конкретной тематикой или деятельностью сайта. Качественные иконки могут помочь привлечь внимание посетителей и повысить удобство пользования сайтом, что в свою очередь может привести к увеличению трафика и конверсии.
Важно также помнить, что иконки являются эффективным средством визуальной коммуникации, которое позволяет передавать информацию без использования слов и языковых барьеров. Иллюстрации легко понимаются всеми пользователями, поэтому иконки широко используются на сайтах, в интерфейсах, в операционных системах, в презентациях и в рекламе.
Поэтому выбор и дизайн иконок является важным аспектом веб-дизайна, и должно уделяться достаточное внимание при разработке сайта.
Виды иконок
Существует множество видов иконок, которые могут использоваться на веб-сайте, чтобы помочь пользователям быстро и легко находить информацию и осуществлять действия. Вот некоторые из наиболее распространенных видов иконок на сайте:
- Навигационные иконки — это иконки, которые используются для навигации по сайту. Они могут включать иконки меню, стрелки, знаки табуляции и т.д.
- Функциональные иконки — это иконки, которые обозначают определенную функцию или действие на сайте. Например, иконка "Корзина" для добавления товаров в корзину или иконка "Поиск" для поиска информации на сайте.
- Иконки контента — это иконки, которые используются для упрощения восприятия информации, например для описания преимуществ
- Иконки социальных сетей — это иконки, которые используются для связи с профилями в социальных сетях. Они могут включать иконки VK, WhatsApp, Telegram и т.д.
Преимущества иконок
Использование иконок на сайте или в приложении имеет несколько преимуществ:
- Могут заменять текст. Когда место для букв ограничено или когда необходимо сэкономить время пользователей, которые не будут читать текст. Также иконки особенно полезны в приложениях с низким разрешением экрана, где необходимо использовать понятные и ясные иконки, чтобы передать смысл.
- Ориентиры в тексте. Иконки могут сделать текст более понятным и привлекательным для читателя. Независимо от того, насколько хорошо организован текст, размещение тематических иконок на ключевых местах дополнительно привлечет внимание читателя и подчеркнет смысл текста.
- Улучшает восприятие информации. Использование иконок может значительно улучшить восприятие информации и помочь запомнить ее, особенно в ситуациях, когда нужно быстро обучить пользователя или вызвать определенные ассоциации. Например, использование знакомых и узнаваемых иконок для пользователя может значительно облегчить понимание структуры работы вашего нового сервиса, а также помочь лучше запомнить его функционал.
Как и где используют иконки
Иконки могут быть полезны в различных ситуациях, в зависимости от цели, которую нужно достичь. Например
В каждом из этих случаев иконки помогают привлечь внимание пользователя, сделать информацию более удобочитаемой и улучшить визуальный опыт.
- Для улучшения навигации по сайту, иконки могут использоваться в шапке и подвале сайта
- Для перечисления преимуществ или возможностей продукта или услуги
- Для демонстрации схемы и этапов работы процесса
- Чтобы выделить ключевые моменты или услуги
- Для демонстрации различий в тарифных планах или комплектациях
В каждом из этих случаев иконки помогают привлечь внимание пользователя, сделать информацию более удобочитаемой и улучшить визуальный опыт.
Пример использования иконок
Использование иконок ускоряет восприятие информации и помогает ее более эффективно передать. Давайте на примере блока с преимуществами компании, рассмотрим как иконки помогают пользователю:
На скриншоте показан блок FR201 “Колонки с большими иконками”
Дизайнер использовал привычные и знакомые иконки для передачи информации. Например, звездочка используется для отзывов, щит — для безопасности, а деньги — для цен, и т.д. Каждая иконка на этом примере помогает быстрее и легче воспринимать информацию. И что будет, если мы уберем их?
На скриншоте показан блок FR201 “Колонки с большими иконками”
В первом примере иконки помогают быстрее воспринимать преимущества компании. Однако, когда мы убрали иконки, скорость восприятия снизилась, потому что люди обычно лучше понимают информацию, представленную в виде образов.
А вот как лучше не делать
Важно, чтобы образы были понятны и знакомы пользователю, в противном случае они могут оказаться бесполезными. Взгляните на этот пример:
На скриншоте показан блок FR201 “Колонки с большими иконками”
В этом приеме допущены следующие ошибки:
В таких случаях лучше использовать ясный и понятный текст, который легко воспринимается, чем непонятные иконки, которые не передают суть.
- Иконки использованные в этом блоке, не являются понятными и не соответствуют значениям, которые необходимо передать. Например, иконка календаря не подходит для объяснения времени работы компании, а иконка инструментов не является подходящей для описания опытных профессионалов. Для обеспечения ясности и соответствия важно выбирать иконки, которые четко и однозначно передают нужный смысл. Рекомендуется использовать иконки, которые явно связаны с передаваемыми значениями и с легкостью их идентифицируют.
- Вторая ошибка заключается в использовании иконок, которые отличаются по стилю. Смешение разных стилей иконок может создавать впечатление хаоса и ухудшать качество дизайна. Поэтому важно выбирать иконки, которые гармонично сочетаются друг с другом. Ниже мы подробнее расскажем о сочетании иконок.
В таких случаях лучше использовать ясный и понятный текст, который легко воспринимается, чем непонятные иконки, которые не передают суть.
где взять иконки для сайта?
Существует множество ресурсов в Интернете, где можно найти иконки, которые можно скачать бесплатно или купить готовый набор или отдельные значки. Вот несколько вариантов:
в Тильде
В интерфейсе Тильды встроен поиск картинок и значков, который включает в себя поиск в Google, сервисе Linea.io и в коллекции бесплатных иконок Tilda Icons.
Для того чтобы открыть встроенную библиотеку необходимо:
Встроенная библиотека доступна только для стандартных блоков от Тильда, но если вы хотите скачать или использовать иконки в Zero блоках, то вы можете найти эту библиотеку через поисковик в вашем браузере. Для этого введите в поле поиска “бесплатные иконки тильда”. Ссылка на библиотеку будет одной из первых в результатах выдачи.
Иконки в данной библиотеки представлены в хорошем качестве, а также имеют лицензию, которая позволяет бесплатно использовать скачанные иконки.
Для того чтобы открыть встроенную библиотеку необходимо:
- Перейти к блоку с иконками
- Открыть меню «Контент» блока
- В карточке блока нажать на ссылку «Искать в библиотеке»
Встроенная библиотека доступна только для стандартных блоков от Тильда, но если вы хотите скачать или использовать иконки в Zero блоках, то вы можете найти эту библиотеку через поисковик в вашем браузере. Для этого введите в поле поиска “бесплатные иконки тильда”. Ссылка на библиотеку будет одной из первых в результатах выдачи.
Иконки в данной библиотеки представлены в хорошем качестве, а также имеют лицензию, которая позволяет бесплатно использовать скачанные иконки.
Скриншот был взят с библиотеки бесплатных иконок Tilda Icons
отрисовать самому или заказать иконки у иллюстратора
За счет того что иконки это небольшие графические изображения и зачастую имеют простые формы, отрисовка их является не сложной задачей. Однако, важно учитывать единую стилистику и консистентность при создании своих иконок.
Если же вам нужны качественные и эксклюзивные иконки, то вы можете заказать их у иллюстраторов на специализированных биржах:
Если же вам нужны качественные и эксклюзивные иконки, то вы можете заказать их у иллюстраторов на специализированных биржах:
10 сайтов где вы сможете бесплатно скачать иконки
[1] THEnounproject
Онлайн-библиотека иконок, содержащая более 3 миллионов значков, созданных сообществом дизайнеров со всего мира. С помощью этого сервиса вы можете найти и скачать нужные иконки для своих проектов, а также загрузить свои собственные иконки и поделиться ими с другими пользователями. The Noun Project также предлагает платные планы, которые позволяют использовать иконки без атрибуции и получить доступ к дополнительным функциям.
Скриншот был взят с сайта thenounproject.com
[2] iconfinder
Платформа, где можно найти иконки и векторные изображения от дизайнеров со всего мира. На сайте более 4 миллионов иконок в различных стилях и форматах, в том числе PNG, SVG, AI, EPS и ICO. Пользователи могут выбирать между бесплатными и платными иконками, а также использовать функцию поиска, фильтрации и сортировки. Кроме того, на Iconfinder есть возможность заказать у дизайнера уникальные иконки. Сервис пользуется популярностью среди дизайнеров и разработчиков, которые ищут качественные иконки для своих проектов.
Скриншот был взят с сайта iconfinder.com
[3] icons8
Сервис, предоставляющий большой выбор иконок и графических элементов для использования в различных проектах. В библиотеке сервиса более 140 000 векторных иконок, которые можно использовать бесплатно или приобрести лицензию на коммерческое использование. Icons8 также предоставляет удобный инструмент для поиска иконок, а также позволяет настраивать цвет и размер выбранной иконки прямо на сайте. Сервис также предлагает и другие инструменты для дизайнеров, такие как генератор цветовых схем и бесплатные шрифты.
Скриншот был взят с сайта icons8.com
[4] flaticon
Библиотека более 4 миллионов бесплатных иконок, созданных дизайнерами со всего мира. На сервисе можно найти иконки разных стилей, цветовых схем и форматов. Все иконки разделены по тематикам, что упрощает поиск нужной иконки. Большинство иконок доступны бесплатно в формате PNG, но также есть возможность купить премиум-пакеты и получить доступ к дополнительным функциям. Сервис также предоставляет инструменты для редактирования и изменения иконок перед их скачиванием.
Скриншот был взят с сайта flaticon.com
Важно отметить, что лучше всего использовать иконки в формате SVG, так как этот формат обеспечивает масштабируемость без потери качества, имеет меньший размер файлов, легко редактируется, поддерживает анимацию и делает сайт более привлекательным и производительным.
[5] Dropfile
Dprofile — это инфраструктурный проект для развития дизайн-сообщества. С упором на экспертность, насмотренность и коммерческую востребованность специалистов. Dprofile предоставляет пользователям возможность создавать портфолио, публиковать свои работы и следить за творчеством других людей.
Несмотря на то что платформа используются больше для публикации работ в качестве презентации, там можно найти готовые наборы с красивыми иконками по запросу icons.
Несмотря на то что платформа используются больше для публикации работ в качестве презентации, там можно найти готовые наборы с красивыми иконками по запросу icons.
Скриншот был взят с сайта dprofile.ru/search?query=icons
[6] Behance
Онлайн-платформа, созданная Adobe, для представления и продвижения творческих работ в различных областях, включая дизайн, иллюстрацию, фотографию, анимацию и т.д. Behance предоставляет пользователям возможность создавать портфолио, публиковать свои работы и следить за творчеством других людей. Сайт также используется работодателями для поиска талантливых специалистов.
Несмотря на то что платформа используются больше для публикации работ в качестве презентации, там можно найти готовые наборы с красивыми иконками по запросу free icons.
Несмотря на то что платформа используются больше для публикации работ в качестве презентации, там можно найти готовые наборы с красивыми иконками по запросу free icons.
Скриншот был взят с сайта behance.net/search?search=free+icons
[7] iconmonstr
Бесплатная онлайн-библиотека, где вы можете скачать иконки высокого качества в форматах SVG, PNG и ICO. На сайте можно найти более 4784+ иконок различных категорий, таких как технологии, еда, музыка, природа и многое другое. Iconmonstr предоставляет пользователю возможность выбрать нужный размер, цвет и формат иконки перед ее скачиванием.
Скриншот был взят с сайта iconmonstr.com
[8] Pixelsmarket
Онлайн-магазин графических ресурсов, включая иконки, шаблоны веб-дизайна, текстуры, шрифты и многое другое. Он предлагает широкий выбор продуктов, созданных профессиональными дизайнерами, и часто обновляется новыми добавлениями. PixelsMarket также предлагает возможность получить доступ к некоторым продуктам по подписке, что может быть выгодно для дизайнеров и компаний, которые постоянно нуждаются в графических ресурсах.
Скриншот был взят с сайта pixelsmarket.com/category/icons
[9] Graphicsfuel
Онлайн-ресурс, предоставляющий графические ресурсы для дизайнеров, включая готовые наборы иконок, UI компоненты, шаблоны визиток, баннеры, фоны и многое другое. Особенностью Graphicsfuel является то, что большинство ресурсов, предоставляемых на сайте, бесплатны для использования в личных и коммерческих проектах.
Скриншот был взят с сайта graphicsfuel.com/category/icons/
[10] fribly
Онлайн-сообщество для дизайнеров и разработчиков, которое предоставляет доступ к различным материалам, связанным с веб-дизайном и разработкой. На сайте можно найти бесплатные ресурсы, такие как иконки, шаблоны, кисти и многое другое. Кроме того, Fribly содержит блог с полезными статьями и советами по дизайну и разработке веб-сайтов. Сайт также позволяет пользователям создавать свой профиль и общаться с другими дизайнерами и разработчиками через форум.
Скриншот был взят с сайта fribly.com/tag/icon/
Возможно, некоторые сервисы для скачивания иконок могут быть недоступны в РФ из-за ограничений доступа
В случае, если в бесплатных наборах иконок не было найдено подходящего варианта идеально сочетающихся с концепцией вашей страницы, стоит рассмотреть возможность их покупки. Этот вариант окажется более экономически выгодным, поскольку наборы иконок продаются многократно, в отличие от заказа индивидуальной разработки иконок у иллюстратора. К счастью многие сервисы представленные выше, дают такую возможность.
Лицензии иконок
Иконки, как и другие графические изображения, могут быть защищены авторским правом, поэтому важно убедиться в их лицензионности перед использованием.
Если вы скачиваете бесплатные иконки, распространяемые по лицензии Creative Commons, вам нужно проверить, разрешено ли использование данных иконок для коммерческих целей. Если страница или сайт, на котором будут использоваться иконки, направлена на извлечение прибыли, то это считается коммерческим использованием, и вы должны убедиться, что иконки имеют соответствующую лицензию.
Кроме того, важно правильно указывать авторство иконок по лицензии Creative Commons. Это требуется обязательно, и нарушение правил может привести к юридическим проблемам.
Делается это по шаблону «Имя автора / Наименование источника / Тип лицензии».
Пример: Robert Addington / Flaticon / CC BY-SA или Moscow State University / Wikimedia / CC BY
Если же иконки распространяются по другой лицензии, необходимо ознакомиться с правилами ее использования и следовать им. Лучше всего обращаться к авторам иконок или в поддержку сервиса, на котором вы скачали иконку и уточнять условия их использования, если вы не уверены в лицензии.
Если вы скачиваете бесплатные иконки, распространяемые по лицензии Creative Commons, вам нужно проверить, разрешено ли использование данных иконок для коммерческих целей. Если страница или сайт, на котором будут использоваться иконки, направлена на извлечение прибыли, то это считается коммерческим использованием, и вы должны убедиться, что иконки имеют соответствующую лицензию.
Кроме того, важно правильно указывать авторство иконок по лицензии Creative Commons. Это требуется обязательно, и нарушение правил может привести к юридическим проблемам.
Делается это по шаблону «Имя автора / Наименование источника / Тип лицензии».
Пример: Robert Addington / Flaticon / CC BY-SA или Moscow State University / Wikimedia / CC BY
Если же иконки распространяются по другой лицензии, необходимо ознакомиться с правилами ее использования и следовать им. Лучше всего обращаться к авторам иконок или в поддержку сервиса, на котором вы скачали иконку и уточнять условия их использования, если вы не уверены в лицензии.
Скриншот был взят с сайта tilda.cc/ru/free-icons/license
Как выбрать иконки для сайта?
При выборе иконок для сайта необходимо учитывать несколько факторов. Ниже представлены несколько советов, которые могут помочь вам сделать правильный выбор:
1. Смысл иконок
Для обеспечения понимания и узнаваемости иконок, важно использовать универсальные символы и избегать нестандартных изображений, которые могут вызвать различные ассоциации у разных пользователей. Поэтому рекомендуется отказаться от уникальности и сосредоточиться на узнаваемости и понятности.
Существует два разных смысловых типа иконок, пиктограммы и идеограммы:
Существует два разных смысловых типа иконок, пиктограммы и идеограммы:
[a] ПИКТОГРАММА
Это иконка, которая представляет собой упрощенное изображение объекта или концепции, которое используется для передачи информации без использования слов. Например, значок «корзина» на сайте интернет-магазина является пиктограммой, так как изображает корзину, в которую пользователь может добавлять товары.
Это иконка, которая представляет собой упрощенное изображение объекта или концепции, которое используется для передачи информации без использования слов. Например, значок «корзина» на сайте интернет-магазина является пиктограммой, так как изображает корзину, в которую пользователь может добавлять товары.
Примеры пиктограмм
[b] ИДЕОГРАММА
Идеограмма в свою очередь это иконка, которая используется для передачи концепции или идеи, а не для конкретного объекта. Она может представлять собой абстрактное изображение, символ или форму, которая ассоциируется с конкретной идеей. Например, иконка сердца на сайте для обозначения понравившегося контента является идеограммой, так как символизирует любовь, а не конкретный объект.
Идеограмма в свою очередь это иконка, которая используется для передачи концепции или идеи, а не для конкретного объекта. Она может представлять собой абстрактное изображение, символ или форму, которая ассоциируется с конкретной идеей. Например, иконка сердца на сайте для обозначения понравившегося контента является идеограммой, так как символизирует любовь, а не конкретный объект.
Примеры идеограмм
Оба типа иконок могут использоваться на сайте, чтобы передать информацию и улучшить пользовательский интерфейс. Однако выбор между пиктограммой и идеограммой зависит от того, какая конкретная идея или информация должна быть передана и какой тип иконки лучше соответствует дизайну вашего сайта.
2. СТИЛЬ иконок
Следующий важный пункт, это стиль иконки. Существует множество различных стилей иконок, однако мы рассмотрим три основных: контурный, плоский и объемный.
[a] КОНТУРНЫЙ
Контурный стиль иконок — это дизайн-техника, при которой иконки создаются путем отображения только их контуров, без заполнения цветом или теней. Контурные иконки обычно имеют простой и минималистичный дизайн, который позволяет им легко интегрироваться с другими элементами дизайна. Они часто используются для создания плоского и минималистичного дизайна сайта или приложения. Контурный стиль иконок также может обеспечить увеличение скорости загрузки страницы, поскольку такие иконки имеют небольшой размер.
[b] ПЛОСКИЙ
Это стиль дизайна, при котором иконки имеют плоский, двумерный вид без использования объемных эффектов, теней или градиентов. Такие иконки обычно имеют четкие линии и яркие цвета, что делает их наглядными и легко узнаваемыми. Плоские иконки отлично сочетаются с другими элементами дизайна, такими как текст или фотографии, и могут помочь создать современный и лаконичный дизайн для сайта или приложения. Плоский стиль иконок также имеет преимущество в быстрой загрузке страницы, так как он не требует сложной обработки графики.
[c] ОБЪЁМНЫЙ
Объемный стиль иконок создает иллюзию объемности и глубины путем добавления теней, градиентов и других эффектов. Объемные иконки обычно имеют более сложный дизайн, чем контурные или плоские иконки, и могут быть более реалистичными. Этот стиль иконок часто используется для создания трехмерных эффектов, которые могут привлекать внимание пользователей и выделяться на фоне других элементов дизайна. Однако, использование большого количества объемных иконок может замедлять загрузку страницы и увеличивать объем используемой памяти.
Контурный стиль иконок — это дизайн-техника, при которой иконки создаются путем отображения только их контуров, без заполнения цветом или теней. Контурные иконки обычно имеют простой и минималистичный дизайн, который позволяет им легко интегрироваться с другими элементами дизайна. Они часто используются для создания плоского и минималистичного дизайна сайта или приложения. Контурный стиль иконок также может обеспечить увеличение скорости загрузки страницы, поскольку такие иконки имеют небольшой размер.
[b] ПЛОСКИЙ
Это стиль дизайна, при котором иконки имеют плоский, двумерный вид без использования объемных эффектов, теней или градиентов. Такие иконки обычно имеют четкие линии и яркие цвета, что делает их наглядными и легко узнаваемыми. Плоские иконки отлично сочетаются с другими элементами дизайна, такими как текст или фотографии, и могут помочь создать современный и лаконичный дизайн для сайта или приложения. Плоский стиль иконок также имеет преимущество в быстрой загрузке страницы, так как он не требует сложной обработки графики.
[c] ОБЪЁМНЫЙ
Объемный стиль иконок создает иллюзию объемности и глубины путем добавления теней, градиентов и других эффектов. Объемные иконки обычно имеют более сложный дизайн, чем контурные или плоские иконки, и могут быть более реалистичными. Этот стиль иконок часто используется для создания трехмерных эффектов, которые могут привлекать внимание пользователей и выделяться на фоне других элементов дизайна. Однако, использование большого количества объемных иконок может замедлять загрузку страницы и увеличивать объем используемой памяти.
Стили иконок
3. СОЧЕТАНИЕ иконок
Сочетание иконок на сайте — это важный аспект дизайна, который может влиять на пользовательский опыт. Использование иконок, которые сочетаются по стилю, цвету и тематике, может помочь создать единый и красивый дизайн, который будет легко восприниматься пользователем. Некоторые иконки могут быть связаны между собой или использоваться для представления одной и той же темы, так что сочетание их на странице может помочь передать пользователю определенную идею или концепцию. В то же время, смешение разных стилей иконок может создавать впечатление хаоса и снижать качество дизайна, поэтому важно выбирать иконки, которые хорошо сочетаются друг с другом.
Чтобы правильно подобрать иконки и добиться эстетически приятного дизайна, рекомендуется использовать иконки из одного набора, созданного предпочтительно одним автором. Это гарантирует сочетание иконок в одном стиле, что поможет создать единый и красивый дизайн.
Ниже приведен пример удачного сочетания иконок. Иконки гармонично сочетаются, так как они выполнены в едином контурном стиле с одинаковой толщиной и хорошо соответствуют смыслу заголовков.
Чтобы правильно подобрать иконки и добиться эстетически приятного дизайна, рекомендуется использовать иконки из одного набора, созданного предпочтительно одним автором. Это гарантирует сочетание иконок в одном стиле, что поможет создать единый и красивый дизайн.
Ниже приведен пример удачного сочетания иконок. Иконки гармонично сочетаются, так как они выполнены в едином контурном стиле с одинаковой толщиной и хорошо соответствуют смыслу заголовков.
На скриншоте показан блок SV201 “Колонки с иконками”
Давайте рассмотрим пример, как не стоит делать. На изображении ниже видно, что иконки имеют разную толщину, цвет, размер и стилистику. Это создает впечатление, что иконки принадлежат к разным проектам, что снижает качество дизайна и усложняет восприятие пользователем.
На скриншоте показан блок SV201 “Колонки с иконками”
4. Формат иконок
Формат иконок — это способ, которым иконка сохраняется и используется на сайте. Существует несколько форматов для иконок, но наиболее распространенные форматы - это SVG, PNG и ICO. Как правило, для веб-дизайна наиболее удобным форматом является SVG, так как он обеспечивает высокое качество изображения при любом размере и позволяет легко изменять цвет иконки. Однако формат PNG также широко используется в веб-дизайне, особенно для сохранения иконок с прозрачным фоном.
[a] SVG
Масштабируемый векторный формат, который сохраняет все детали иконки независимо от размера.
[b] PNG
Формат PNG подходит для сохранения изображений с прозрачным фоном и поддерживает различные уровни прозрачности.
[c] ICO
Формат ICO — это формат, используемый для создания значков иконок, используемых в Windows. Также данный формат используется при загрузке фавикона, который отображается значком во вкладке браузера. Более подробно расскажем ниже
Масштабируемый векторный формат, который сохраняет все детали иконки независимо от размера.
[b] PNG
Формат PNG подходит для сохранения изображений с прозрачным фоном и поддерживает различные уровни прозрачности.
[c] ICO
Формат ICO — это формат, используемый для создания значков иконок, используемых в Windows. Также данный формат используется при загрузке фавикона, который отображается значком во вкладке браузера. Более подробно расскажем ниже
5. Размеры иконок
Иконки на сайте могут иметь различные размеры, в зависимости от их функционального назначения и места размещения на странице. Однако, есть несколько стандартных размеров, которые часто используются:
Если иконка используется в качестве графического элемента, то ее размер может быть больше, например, 128x128 или 256x256 пикселей.
При настройке размера иконок важно учитывать их детализированность. Маленькие иконки должны иметь упрощенные детали для хорошей видимости и понимания. Более крупные иконки могут содержать больше деталей, чтобы усилить визуальное воздействие. Главное, чтобы каждая иконка была четкой, узнаваемой и передавала свое назначение с минимальным количеством деталей, обеспечивая понятность в контексте использования.
- 16x16 пикселей — это стандартный размер для иконок в адресной строке браузера и фавиконов.
- 32x32 пикселя — часто используется для иконок на панели навигации или в меню.
- 48х48/64x64 пикселя - может использоваться для иконок на главной странице сайта или в контенте.
Если иконка используется в качестве графического элемента, то ее размер может быть больше, например, 128x128 или 256x256 пикселей.
При настройке размера иконок важно учитывать их детализированность. Маленькие иконки должны иметь упрощенные детали для хорошей видимости и понимания. Более крупные иконки могут содержать больше деталей, чтобы усилить визуальное воздействие. Главное, чтобы каждая иконка была четкой, узнаваемой и передавала свое назначение с минимальным количеством деталей, обеспечивая понятность в контексте использования.
Разные размеры иконок
Как добавить иконку в Тильде?
Существует несколько способов добавить иконку в блоки, где используются иконки:
Давайте рассмотрим на примере блока "FR204", как можно добавить иконки с использованием вышеуказанных способов:
- С файлов компьютера: Вы можете выбрать нужную иконку из своего компьютера и загрузить ее в блок. Для этого просто выберите файл иконки с вашего компьютера и добавьте его в соответствующий блок.
- По ссылке: Если иконка уже доступна онлайн, вы можете использовать ее по ссылке. Скопируйте URL-адрес иконки и вставьте его в блок, чтобы добавить ее.
- Через библиотеки: Тильда предлагает на выбор 2 библиотеки иконок, которые предоставляют широкий выбор готовых иконок для использования. Вы можете выбрать нужную иконку из такой библиотеки и добавить ее в блок.
Давайте рассмотрим на примере блока "FR204", как можно добавить иконки с использованием вышеуказанных способов:
- Добавьте блок FR204 на страницу, и в верхней левой части блока нажмите на кнопку “Контент”, чтобы перейти к редактированию контента блока
- В открывшейся панели редактирования контента раскройте раздел “Карточки”
- Иконка для карточки редактируется в пункте “Изображение”
С файлов компьютера:
Первый и самый распространений способ добавления иконки на сайт, это добавление ранее сохраненной иконки через файловую систему компьютера. Чтобы добавить иконку с файлов компьютера, следуйте следующим инструкциям:
- Нажмите на кнопку "Загрузить файл" в разделе "Изображение".
- Появится окно загрузки файла, в которое вы должны загрузить вашу иконку. Вы можете нажать на кнопку "Загрузить файл" и просмотреть файловую систему вашего компьютера для поиска иконки.
- Как только вы найдете нужную иконку, кликните на неё 2 раза, чтобы начать загрузку.
- Вы также можете просто перетащить файл с иконкой из вашей файловой системы в область загрузки файла.
По ссылке
Добавление иконки по ссылке предоставляет возможность использовать иконки, которые уже доступны в публичном доступе, однако следует учесть некоторые нюансы. Чтобы добавить иконку через библиотеку, следуйте следующим инструкциям:
- Нажмите на кнопку "Загрузить файл" в разделе "Изображение". Появится окно загрузки файла, в которое вы должны загрузить вашу иконку.
- Если иконка уже доступна онлайн, вы можете нажать на ссылку "Загрузка по ссылке", расположенную в нижней части окна загрузки.
- После нажатия на ссылку "Загрузка по ссылке" появится поле, в которое вам нужно ввести ссылку на иконку. Убедитесь, что ссылка ведет к иконке, которая находится в свободном доступе.
- Нажмите на кнопку "Загрузить", чтобы добавить иконку из указанной ссылки.
Учтите, что Тильда не сможет добавить иконку через ссылку на ресурсы с бесплатными иконками. Для успешного добавления иконки через ссылку, иконка должна быть доступна в открытом доступе, например, на хостинге или другом публичном ресурсе.
Если иконка, которую вы хотите использовать, находится на ресурсе с бесплатными иконками, в таком случае лучше сначала скачать и сохранить эту иконку на своем компьютере, а затем использовать способ загрузки файла с компьютера, описанный ранее.
Если иконка, которую вы хотите использовать, находится на ресурсе с бесплатными иконками, в таком случае лучше сначала скачать и сохранить эту иконку на своем компьютере, а затем использовать способ загрузки файла с компьютера, описанный ранее.
Через библиотеки
Добавление иконки через библиотеки является очень удобным и быстрым способом добавления иконки в блок. Для добавления иконки через библиотеку нужно сделать следующее:
- Нажмите на ссылку "Искать в библиотеке" в разделе "Изображение".
- После нажатия на ссылку откроется панель с рекомендуемыми сервисами и библиотеками, которые доступны в Тильде. Например Tilda Icons и Linea.io.
- В представленном списке иконок выберите ту, которая наиболее подходит для вашего блока. Просто щелкните на нужную иконку, и нажмите на кнопку “Выбрать” чтобы выбрать ее.
- После выбора иконки она автоматически добавится в ваш блок, без необходимости дополнительных действий с вашей стороны.
Как добавить фавикон?
Наверняка вы замечали небольшую иконку, которая отображается во вкладке браузера рядом с названием веб-сайта, у неё есть отдельное название — фавикон (favicon). Это маленькая иконка имеет ряд преимуществ, такие как:
Для создания фавикона обычно используются изображения размером 16x16 пикселей или 32x32 пикселя. Форматы файлов могут быть разными, включая ICO, PNG, GIF и JPEG. Рекомендуется использовать формат ICO для обеспечения максимальной совместимости с различными браузерами.
- Идентификация сайта: Фавиконы помогают пользователям быстро распознать ваш сайт среди множества открытых вкладок в браузере. Они создают визуальную ассоциацию и повышают узнаваемость бренда.
- Профессиональный внешний вид: Использование фавикона демонстрирует заботу о деталях и профессионализме вашего веб-сайта. Это маленькая, но важная деталь, которая создает положительное впечатление на пользователей.
- Удобство использования: Когда пользователь добавляет ваш сайт в закладки или сохраняет его в истории просмотра, фавикон отображается рядом с названием сайта, делая их легко идентифицируемыми и быстро доступными.
Для создания фавикона обычно используются изображения размером 16x16 пикселей или 32x32 пикселя. Форматы файлов могут быть разными, включая ICO, PNG, GIF и JPEG. Рекомендуется использовать формат ICO для обеспечения максимальной совместимости с различными браузерами.
Как добавить фавикон для своего сайта в тильде?
Для того чтобы добавить иконку для вашего сайта, которая будет отображаться во вкладке браузера, следуйте этим шагам:
- Создайте иконку и сохраните ее в формате ICO.
Изначально фавикон может иметь различные форматы, такие как PNG, SVG и другие. Однако, чтобы использовать фавикон на вашем сайте, рекомендуется преобразовать его в формат ICO. Для этого можно воспользоваться онлайн-конвертерами файлов, которые предлагают широкий выбор инструментов. Поиск в интернете по запросу "конвертер файлов в ICO" поможет вам найти множество таких сервисов, и они обычно просты в использовании. Вы просто загружаете ваш файл, выбираете формат, в который хотите конвертировать и получаете готовый переформатированный файл.
2. Откройте страницу сайта в Тильде и нажмите на кнопку "Настройки сайта" в правом верхнем углу.
3. В открывшейся панели настроек прокрутите вниз и выберите последний пункт "Еще".
4. У нас открывается раздел дополнительных настроек, где первым же пунктом мы можем видеть Favicon
5. Во всплывающем окне выберите файл с форматом ICO, который вы сохранили на первом шаге.
6. После загрузки файла нажмите на кнопку "Сохранить изменения" в правом верхнем углу.
7. Затем нажмите на название сайта в левом верхнем углу, чтобы перейти к панели страниц.
8. В верхней левой части панели нажмите на ссылку "Опубликовать все", чтобы фавикон появился на вкладках всех страниц.
Теперь ваш фавикон будет отображаться во вкладках браузера. Готово!
3. В открывшейся панели настроек прокрутите вниз и выберите последний пункт "Еще".
4. У нас открывается раздел дополнительных настроек, где первым же пунктом мы можем видеть Favicon
5. Во всплывающем окне выберите файл с форматом ICO, который вы сохранили на первом шаге.
6. После загрузки файла нажмите на кнопку "Сохранить изменения" в правом верхнем углу.
7. Затем нажмите на название сайта в левом верхнем углу, чтобы перейти к панели страниц.
8. В верхней левой части панели нажмите на ссылку "Опубликовать все", чтобы фавикон появился на вкладках всех страниц.
Теперь ваш фавикон будет отображаться во вкладках браузера. Готово!
Как изменить иконки в стандартных блоках?
В Тильде доступно большое количество стандартных блоков, которые содержат важный функционал, такой как корзина, меню, поиск по сайту, добавление товаров/услуг в избранное. При добавлении этих блоков, на сайте автоматически отображаются соответствующие иконки. К счастью Тильда даёт возможность изменить внешний вид этих иконок, чтобы они визуально сочетались с вашим дизайном и создавали единый стиль.
Настройка и редактирование иконок в таких блоках практически идентичны, поэтому мы рассмотрим два варианта изменения иконок:
Настройка и редактирование иконок в таких блоках практически идентичны, поэтому мы рассмотрим два варианта изменения иконок:
Иконки стандартных функциональных блоков в Тильде
Замена на собственную иконку
На примере блока ST100 “Корзина с формой заказа” мы рассмотрим как заменить стандартную иконку корзины на собственную. Для этого выполните следующие шаги:
Таким образом, вы сможете заменить стандартную иконку блока ST100 "Корзина с формой заказа" или похожий блок в Тильде, чтобы она лучше соответствовала вашему дизайну.
- Откройте редактирование страницы.
- Добавьте блок ST100 из каталога блоков.
- В левом верхнем углу блока нажмите кнопку "Контент".
- В панели редактирования контента найдите пункт "Изображение". Обычно он отображается сразу в списке редактирования, но иногда может быть скрыт в разделе "Дополнительно". В случае с блоком "Корзина" это именно такой случай, поэтому прокрутите вниз и раскройте раздел "Дополнительно".
- В первом пункте "Изображение" нажмите на кнопку "Загрузить файл".
- В окне загрузки выберите или добавьте свою иконку для корзины.
- После загрузки иконки в блок нажмите кнопку "Сохранить и закрыть" в верхней части панели.
- Если иконка не отображается так, как вы задумывали, вы можете изменить её размер в настройках блока. Подробнее о настройках расскажем в следующем варианте.
- Чтобы сохранить и опубликовать изменения на сайте, нажмите кнопку "Опубликовать" в правой верхней части экрана.
Таким образом, вы сможете заменить стандартную иконку блока ST100 "Корзина с формой заказа" или похожий блок в Тильде, чтобы она лучше соответствовала вашему дизайну.
На скриншотах представлены некоторые элементы окна Tilda, которые могут отличаться от стандартных элементов. Если вы хотите модифицировать и улучшить не только блоки, но и интерфейс Tilda, то мы рекомендуем установить расширение от Нолим. О том как его установить на свой браузер, вы можете узнать по ссылке.
изменение стандартной иконки
Если вам подходит стандартная иконка от Тильда, но вы хотите внести изменения, чтобы она сочеталась с вашим дизайном, выполните следующие действия. Для примера рассмотрим изменение стандартной иконки на том же самом блоке ST100 "Корзина с формой заказа":
b. Цвет иконки
c. Цвет кружка
d. Цвет обводки кружка
e. Цвет кружка под числом
f. Цвет числа
g. Размер и прозрачность тени
h. Отступ изображения от краёв в пикселях
6. Внесите необходимые изменения в параметры, чтобы получить желаемый внешний вид иконки.
7. Нажмите кнопку "Сохранить" в верхней части панели, чтобы применить изменения и увидеть результат.
8. После завершения редактирования внешнего вида иконки, нажмите кнопку "Сохранить и закрыть" в верхней части панели настроек.
9. Чтобы сохранить и опубликовать изменения на сайте, нажмите кнопку "Опубликовать" в правой верхней части экрана.
Теперь вы знаете, как настроить внешний вид иконки блока ST100 или похожий блок в Тильде и применить изменения к своему дизайну.
- Откройте редактирование страницы.
- Добавьте блок ST100 из каталога блоков.
- В левом верхнем углу блока нажмите кнопку "Настройки".
- В панели редактирования настроек найдите раздел "Стиль корзины/виджета/меню" или "Иконка меню", в зависимости от типа блока. Название раздела может различаться, но вы должны обратить внимание на раздел, отвечающий за стиль или иконку.
- В разделе "Стиль виджета" вы можете редактировать следующие параметры:
b. Цвет иконки
c. Цвет кружка
d. Цвет обводки кружка
e. Цвет кружка под числом
f. Цвет числа
g. Размер и прозрачность тени
h. Отступ изображения от краёв в пикселях
6. Внесите необходимые изменения в параметры, чтобы получить желаемый внешний вид иконки.
7. Нажмите кнопку "Сохранить" в верхней части панели, чтобы применить изменения и увидеть результат.
8. После завершения редактирования внешнего вида иконки, нажмите кнопку "Сохранить и закрыть" в верхней части панели настроек.
9. Чтобы сохранить и опубликовать изменения на сайте, нажмите кнопку "Опубликовать" в правой верхней части экрана.
Теперь вы знаете, как настроить внешний вид иконки блока ST100 или похожий блок в Тильде и применить изменения к своему дизайну.
Модификации для блоков с иконками в Тильде от нолим
Нолим предлагает широкий набор модификаций для различных блоков, которые включают в себя иконки.
А как сделать на Тильде?
В данном разделе мы ответим на ваши вопросы об иконках.
Как поменять цвет иконки?
К сожалению Тильда не дает возможность изменять цвет иконок на прямую, но в последних обновлениях Тильда добавила новый элемент в Zero Block — Vector. Теперь можно создавать и редактировать векторные элементы в Zero Block. Новый векторный редактор позволяет создавать шейпы любой формы и базовые иллюстрации для сайта, а также дорабатывать импортированные svg-объекты. Давайте воспользуемся этой функцией и попробуем поменять цвет иконки прямо в тильде, не переходя в сторонние программы.
Как поменять цвет иконки в zERO BLOCK?
Для того чтобы редактировать иконку в Zero Block нужно сделать следующее:
- Создаем Zero Block
- Переходим в режим редактирования нажав на кнопку “Редактировать блок”
- Удаляем ненужные элементы
- Нажимаем на иконку “+” в левом верхнем углу и добавляем элемент Vector
- В панели редактирования элемента нажимаем на кнопку “Edit vector”, который перенесет нас в режим редактирования векторных элементов
- Выделяем все элементы сочетанием клавиш Ctrl+A и удаляем стандартный векторный элемент.
- Теперь добавим свою иконку. В верхней части экрана можно увидеть панель с инструментами, нам нужен последний элемент троеточие. Нажимаем на него и и в открывшемся меню выбираем пункт “Import SVG”
- Дальше вам нужно выбрать ранее скачанную иконку и загрузить её 2 раза нажав по файлу. Важно чтобы иконка была в формате SVG, иначе вы не сможете редактировать иконку.
Важно чтобы иконка была в формате SVG, иначе вы не сможете редактировать иконку.
9. И вот ваша иконка уже в блоке, осталось дело за малым. Нажимаем на добавленную иконку и снова обращаемся к панели инструментов в верхней части экрана. Тут доступно несколько режимов, о которых мы поговорим чуть ниже, а сейчас выбираем первый режим в виде курсора Select tool и выбираем элемент или деталь иконки, который мы хотим перекрасить.
10. Дальше в панели инструментов есть 3 поля:
a. Fill — Здесь вы можете выбрать цвет заливки выбранного элемента.
b. Stroke — В этом поле вы можете выбрать цвет обводки выбранного элемента. Обратите внимание, что обводка не отобразится, пока вы не настроите толщину обводки.
c. Width — Последнее поле отвечает за толщину обводки.
11. Теперь вы знаете как поменять цвет вашей иконки. Как только закончите с выбором цвета, не забудьте сохранить ваши изменения. Для этого нажмите на кнопку “Save & Close” в верхней панели инструментов.
12. Готово. Цвет вашей иконки поменялся, после редактирования остальных элементов блока не забудьте сохранить изменения и опубликовать изменения на сайт.
10. Дальше в панели инструментов есть 3 поля:
a. Fill — Здесь вы можете выбрать цвет заливки выбранного элемента.
b. Stroke — В этом поле вы можете выбрать цвет обводки выбранного элемента. Обратите внимание, что обводка не отобразится, пока вы не настроите толщину обводки.
c. Width — Последнее поле отвечает за толщину обводки.
11. Теперь вы знаете как поменять цвет вашей иконки. Как только закончите с выбором цвета, не забудьте сохранить ваши изменения. Для этого нажмите на кнопку “Save & Close” в верхней панели инструментов.
12. Готово. Цвет вашей иконки поменялся, после редактирования остальных элементов блока не забудьте сохранить изменения и опубликовать изменения на сайт.
Как поменять цвет иконки в стандартных блоках?
Как мы говорили ранее к сожалению Тильда не дает возможность изменять цвет иконок на прямую, поэтому нам придется пойти на небольшую хитрость, чтобы изменить цвет иконок в стандартных блоках.
Хитрость данного способа заключается в том, что мы превратим стандартный блок в Zero Block и изменим иконку через элемент Vector, как в предыдущем способе. Это достаточно удобно, так как блок сохраняет свою адаптивность и вы также можете просто изменить контент блока, но через режим редактирования в Zero Block.
Итак для начала мы превратим обычный блок в Zero Block. На примере стандартного блока FR206 “Колонки с маленькими иконками над текстом” мы покажем как это сделать. Учтите что, подойдут и другие стандартные блоки с иконками, но не все стандартные блоки можно превращать в Zero Block.
Добавляем стандартный блок FR206 через каталог блоков, в разделе преимущества.
Хитрость данного способа заключается в том, что мы превратим стандартный блок в Zero Block и изменим иконку через элемент Vector, как в предыдущем способе. Это достаточно удобно, так как блок сохраняет свою адаптивность и вы также можете просто изменить контент блока, но через режим редактирования в Zero Block.
Итак для начала мы превратим обычный блок в Zero Block. На примере стандартного блока FR206 “Колонки с маленькими иконками над текстом” мы покажем как это сделать. Учтите что, подойдут и другие стандартные блоки с иконками, но не все стандартные блоки можно превращать в Zero Block.
Добавляем стандартный блок FR206 через каталог блоков, в разделе преимущества.
- В верхней левой части блока, нажимаем на кнопку “Настройки”, проматываем в самый вниз настроек и нажимаем на кнопку “Конвертировать в Zero Block”.
Обратите внимание, что все настройки и измененный текст будет удален и блок вернется в своё начальное состояние. Поэтому сначала конвертируйте блок, а после уже меняйте контент блока
3. Тильда уведомит вас о том что блок вернется к начальному состоянию, нажмите “Конвертировать”.
4. Теперь это Zero Block. В верхней левой части блока нажмите на кнопку “Редактировать блок” для того чтобы перейти в режим редактирования блока.
К сожалению иконки добавленные через изображение нельзя редактировать, по этой же причине мы не можем редактировать иконки добавленные по умолчанию от Тильды. Нам придется добавлять иконки по новой, через пункт “Import SVG” в элементе Vector. Для этого:
5. В режиме редактирования блока удаляем только стандартные иконки. Нажимаем на иконку “+” в левом верхнем углу и добавляем элемент Vector
6. В панели редактирования элемента нажимаем на кнопку “Edit vector”, который перенесет нас в режим редактирования векторных элементов
7. Выделяем все элементы сочетанием клавиш Ctrl+A и удаляем стандартный векторный элемент.
8. Теперь добавим свою иконку. В верхней части экрана можно увидеть панель с инструментами, нам нужен последний элемент троеточие. Нажимаем на него и и в открывшемся меню выбираем пункт “Import SVG”
9. Дальше вам нужно выбрать ранее скачанную иконку и загрузить её 2 раза нажав по файлу.
4. Теперь это Zero Block. В верхней левой части блока нажмите на кнопку “Редактировать блок” для того чтобы перейти в режим редактирования блока.
К сожалению иконки добавленные через изображение нельзя редактировать, по этой же причине мы не можем редактировать иконки добавленные по умолчанию от Тильды. Нам придется добавлять иконки по новой, через пункт “Import SVG” в элементе Vector. Для этого:
5. В режиме редактирования блока удаляем только стандартные иконки. Нажимаем на иконку “+” в левом верхнем углу и добавляем элемент Vector
6. В панели редактирования элемента нажимаем на кнопку “Edit vector”, который перенесет нас в режим редактирования векторных элементов
7. Выделяем все элементы сочетанием клавиш Ctrl+A и удаляем стандартный векторный элемент.
8. Теперь добавим свою иконку. В верхней части экрана можно увидеть панель с инструментами, нам нужен последний элемент троеточие. Нажимаем на него и и в открывшемся меню выбираем пункт “Import SVG”
9. Дальше вам нужно выбрать ранее скачанную иконку и загрузить её 2 раза нажав по файлу.
Важно чтобы иконка была в формате SVG, иначе вы не сможете редактировать иконку.
10. И вот ваша иконка уже в блоке, осталось дело за малым. Нажимаем на добавленную иконку и снова обращаемся к панели инструментов в верхней части экрана. Тут доступно несколько режимов, о которых мы поговорим чуть ниже, а сейчас выбираем первый режим в виде курсора Select tool и выбираем элемент или деталь иконки, который мы хотим перекрасить.
11. Дальше в панели инструментов есть 3 поля:
a. Fill — Здесь вы можете выбрать цвет заливки выбранного элемента.
b. Stroke — В этом поле вы можете выбрать цвет обводки выбранного элемента. Обратите внимание, что обводка не отобразится, пока вы не настроите толщину обводки.
c. Width — Последнее поле отвечает за толщину обводки.
12. Теперь вы знаете как поменять цвет вашей иконки. Как только закончите с выбором цвета, не забудьте сохранить ваши изменения. Для этого нажмите на кнопку “Save & Close” в верхней панели инструментов.
13. Готово. Цвет вашей иконки поменялся, после редактирования остальных элементов блока не забудьте сохранить изменения и опубликовать изменения на сайт.
11. Дальше в панели инструментов есть 3 поля:
a. Fill — Здесь вы можете выбрать цвет заливки выбранного элемента.
b. Stroke — В этом поле вы можете выбрать цвет обводки выбранного элемента. Обратите внимание, что обводка не отобразится, пока вы не настроите толщину обводки.
c. Width — Последнее поле отвечает за толщину обводки.
12. Теперь вы знаете как поменять цвет вашей иконки. Как только закончите с выбором цвета, не забудьте сохранить ваши изменения. Для этого нажмите на кнопку “Save & Close” в верхней панели инструментов.
13. Готово. Цвет вашей иконки поменялся, после редактирования остальных элементов блока не забудьте сохранить изменения и опубликовать изменения на сайт.
В панели редактирования векторных элементов доступны следующие режимы:
Более подробно про элемент Vector вы можете почитать в подробной статье, доступной по ссылке
- Select tool — В режиме вы можете задавать цвет заливки и обводки, а также толщину линии. Также в этом режиме вы можете перемещать, поворачивать, уменьшать или увеличивать нарисованное в рамках одного векторного элемента. Больше действий доступно в контекстном меню по клику правой кнопкой мыши. Чтобы работать с композицией на артборде было удобно, создавайте отдельный элемент для каждого шейпа или иллюстрации. Если у вас сложносочиненная иллюстрация или много небольших шейпов, которые связаны воедино, над композицией лучше работать внутри векторного редактора.
- Draw tool — В этом режиме вы рисуете элемент. Можно рисовать прямыми и изогнутыми линиями. Если вы хотите нарисовать незамкнутую фигуру, по окончанию нажмите esc или кликните дважды на последней точке. Если замкнуть фигуру, вы автоматически закончите рисование. После завершения вы перейдете в режим Select. Если вам не хватает точек управления на готовой фигуре, их можно добавить в режиме Draw.
- Edit (E или двойной клик мыши по элементу) — В этом режиме вы можете править нарисованный элемент — по точкам, отрезкам и кривым Безье. Двойной клик на точку скруглит или заострит элемент, а правая кнопка мыши откроет дополнительное контекстное меню. Также в этом режиме можно менять цвета и толщину линий по аналогии с режимом Select. Изменения формы, цвета и других параметров элемента применяются сразу ко всем разрешениям экранов вне зависимости от того, в каком из них вы работаете.
- Bend tool — Режим позволяет сгибать существующие линии и работать с точками. В этом режиме вы можете работать только с оболочкой фигуры, оформление задается в режиме Select и Edit.
Более подробно про элемент Vector вы можете почитать в подробной статье, доступной по ссылке
Заключение
В заключение можно сказать, что иконки являются важным элементом веб-дизайна, которые помогают повысить удобство использования сайта, улучшить его внешний вид и дать дополнительную информацию пользователю.
Также подведем итоги по выбору и дизайну иконок на сайте:
Также подведем итоги по выбору и дизайну иконок на сайте:
- Старайтесь использовать простые и легко узнаваемые иконки. Слишком сложные или запутанные иконки могут вызвать путаницу и недопонимание.
- Размер иконок должен соответствовать их использованию на сайте. Например, иконки в меню должны быть меньше, чем иконки на главной странице.
- Цвет иконок должен соответствовать цветовой схеме сайта. Использование слишком ярких или несоответствующих цветов может привести к тому, что иконки будут неуместными на сайте.
- Помните, что иконки должны упрощать навигацию и помогать пользователю быстро находить нужную информацию. Поэтому их размещение и использование должны быть логичными и удобными для пользователя.
- Используйте векторные иконки, так как они масштабируются без потери качества и могут быть легко изменены или адаптированы под различные нужды сайта.
- Не забывайте про адаптивность иконок под мобильные устройства. Убедитесь, что иконки отображаются корректно и не теряют своей функциональности на различных устройствах.
- Не перегружайте сайт иконками. Используйте только те иконки, которые действительно необходимы для навигации и улучшения пользовательского опыта.
- Наконец, помните, что использование иконок на сайте должно быть интуитивно понятным и не вызывать недопонимания у пользователей. Все иконки должны быть легко узнаваемыми и функциональными.
Считаете, что наша статья недостаточно полная и мы упустили важные моменты?
Дополните ее, заполнив форму ниже
Сообщение об успешной отправке!
Было полезно?