Создание иконок онлайн: Создавайте иконки онлайн – Бесплатные иконки в редакторе для мобильных и десктопов
04.07.2021 
Разное
Создание иконок для сайта онлайн-редактором X-Icon Editor
Приветствую друзья. В данной статье мы с Вами поговорим о том, как просто создавать различные иконки с раcширением .ico для своих сайтов. Данные иконки отображаются на вкладке браузера при открытии сайта, что придает сайту большую привлекательность. Картинку для иконки можно скачать в интернет или создать ее самому. Давайте возьмем любую картинку в формате .png или .jpeg и создадим иконку.
Картинка для создания иконки
Для примера я возьму картинку “Торт” в формате .png, хотя данный формат обычно больше по объему, чем формат .jpeg, но у .png можно сделать прозрачный фон, для того чтобы на иконке была видна только картинка без фона. Обычно прозрачный фон я делаю в программе Photoshop. Итак наша картинка будет выглядеть вот так:
Онлайн-редактор X-Icon Editor для создания иконок
Теперь для того, чтобы сделать из этой картинки иконку для сайта, заходим в онлайн редактор X-Icon Editor:
Импорт картинки в онлайн-редактор
Нажимаем на кнопку “Import” и выбираем нашу картинку.
Чтобы картинка полностью помещалась в выделенном фрагменте (п. 2), нужно чтобы стороны картинки были одинаковые и составляли квадрат. Также здесь (п. 3) Вы можете выбрать размер иконки поставив необходимые галочки. Обычно выбирают иконку со сторонами 32х32, но Вы можете выбрать любую, какая Вам понадобиться. После того, как Вы выбрали размер иконки нажимаем на кнопку ОК.
Просмотр готовой иконки в браузере
Теперь нажимаем кнопку “Preview”, что означает просмотр и смотрим как наша иконка будет выглядеть в различных браузерах.
Как мы видим в просмотре наша иконка выглядит очень хорошо. Теперь переходим к следующему шагу. Это экспорт нашей иконки на компьютер.
Экспортируем готовую иконку на компьютер
Нажимаем кнопку “Export” и в появившемся окне нажимаем на кнопку “Export your icon”.
Теперь наша иконка скачана на компьютер.
Заходим в папку, куда была скачана наша иконка, чтобы посмотреть на нее.
В папке мы видим нашу иконку с расширением .ico, что собственно и следовало сделать. Теперь данную иконку можно вставлять на свои сайт и наслаждаться сделанной работой. Как мы видим, что данный способ создания иконки для сайта очень простой. При этом качество иконки остается очень хорошим.
Буду рад Вашим вопросам и комментариям
Успехов Вам
С уважением Владимир Шишков
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Как сделать иконку для сайта и установить ее. Фавикон для сайта
Здравствуй, читатель. Сегодня хочу рассказать подробнее о том как создать фавикон и установить его на свой сайт. Я покажу вам, что это намного проще чем может показаться на первый взгляд. Но для начала определим значение иконки для сайта, чем полезен Favicon и нужен ли он для вашего блога.
Что такое Фавикон и зачем нужна иконка сайту
Иконка для сайта или Фавикон
Фавиконы также отображаются в выдаче Яндекса рядом с ссылками, чего кстати нет в Гугле (ай-ай). Иконкой для сайта является файл favicon.ico, который браузер пытается загрузить из корневого каталога сайта при переходе. По размеру обычно 16х16 пикселей и имеет .ico расширение.Чтобы понять одну из главных причин использования фавиконов, давайте проведем маленький эксперимент. Наберите в Яндексе «фавикон» и в выдаче вы увидите, что у всех сайтов, стоящих в первых строках есть иконки. Разберемся, как это связано. Как мы знаем, в топ выдачи попадают только кто Яшке отстегнул бабосов самые авторитетные сайты, а значит, иконка сайта является показателем качества вашего ресурса. Также пробегая глазами по выдаче, ссылки без фавиконов теряются на фоне имеющих оные.
Мы уже разобрались, что фавикон способствует развитию вашего сайта. Если иконка есть и она привлекает внимание, то это вызывает большее доверие у пользователя, что в целом повышает вероятность клика и сохранения в закладки.
Рассмотрим несколько способов создания иконки для сайта.
Создание иконки для сайта с помощью Photoshop
У меня установлен Photoshop CS5. И как оказалось, он не поддерживает сохранение файла в формате .ico, который нам нужен. Однако существует выход из этого положения, а точнее специальный плагин ICO. Скачать который вы можете вот на этом сайте.
Дальше дело остается непосредственно за созданием уникальной иконки и сохранением ее в нужном формате. Я воспользовался этим способом, результат которого вы можете наблюдать.
Как вы заметили в основном я использую Google Chrome, который довольно легок в использовании и весьма расширяем. Но вернемся к созданию фавикона.
Онлайн-сервисы для создания иконок для сайта
Этот способ попроще и подходит для тех, кто с Photoshop на «ВЫ», или не имеет установленной лицензионной (нет пиратству!) копии данной программы у себя на компьютере.
Так вот, представляю вашему вниманию пару онлайн-сервисов по созданию иконок для сайтов.
Favicon.ru — для создания иконки необходимо загрузить уже готовую картинку любого размера со своего компьютера (1) или указать ссылку на изображение в интернете (2).
Далее следуя простым инструкциям (3) создаем фавикон и сохраняем его у себя на жестком диске.
Favicon.cc — Возможности этого онлайн-сервиса входит как загрузка уже готового изображения (2) с преобразованием его в иконку, так и создание фавикона с нуля (1) и (3).
Онлайн-сервисов для создания достаточно, но эти два мне показались наиболее удобными.
Готовые галереи фавикон
Уж если вам не подошли вышеописанные способы, то можно скачать уже готовый фавикон из галереи. Но в этом случае никто не даст гарантии, что эта иконка будет установлена только на вашем сайте. А уж если хотите просмотреть пару галерей, то вот: The Favicon Gallery, ICONJ.
Установка иконки на сайт
Для того чтобы установить фавикон, его достаточно загрузить в корневой каталог сайта под именем favicon.
ico и, в принципе, икнока уже будет отображаться. Но веб-мастера рекомендуют прописать следующий код в header.php внутри тэга <head> </head>.
<link rel=»icon» href=»название_сайта/favicon.ico» type=»image/x-icon»> <link rel=»shortcut icon» href=»название_сайта/favicon.ico» type=»image/x-icon»> |
Вот так все достаточно просто создать и установить иконку Favicon на сайт.
Сделать 🖼 Favicon для сайта
Как пользоваться сервисом для создания favicon?
- Нажмите «Выбрать изображение с компьютера» и загрузите картинку в форматах jpg, jpeg, png или gif. Подберите квадратное изображение без мелких деталей.
- Нажмите «Создать Favicon»;
- Сервис покажет пример того, как будет выглядеть ваш favicon. Если результат вас устраивает, скачайте готовый файл.
Вы получите файл favicon.ico для сайта, то есть файл с расширением *.ico, его и надо будет использовать в дальнейшем.
Вы получите файл favicon.ico для сайта, то есть файл с расширением *.ico, его и надо будет использовать в дальнейшем.Как установить отдельные фавиконы для мобильных устройств
Для разной аудитории сайта нужна поддержка основных браузеров и платформ — Windows Firefox, iOS Safari, Internet Explorer, Android Chrome и других. Для мобильных устройств часто прописывают отдельные иконки с другими размерами. Для этого указывают тип устройства в rel, к примеру, «apple-touch-icon», и атрибут sizes с размером.
Достаточный пакетБудет достаточно одного файла favicon.ico с размерами 48×48.
Этот обеспечит нормальный внешний вид фавиконок на разных платформах. В остальных случаях система масштабирует до нужного размера.
Как установить favicon на сайт
- Сохраните картинку в корневой каталог сайта с именем favicon.ico, чтобы получился адрес вида https://sitename.ru/favicon.ico. Это путь к изображению. Он понадобится, если вы захотите использовать разные фавиконы для разделов сайта, чтобы пользователи лучше ориентировались в разделах ресурса. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
- Добавьте ссылку на размещенный файл в HTML-код главной:
<link rel="icon" href="https://sitename.ru/favicon.ico" type="image/x-icon">
Он понадобится, если вы захотите использовать разные фавиконы для разделов сайта, чтобы пользователи лучше ориентировались в разделах ресурса. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.Зачем делать favicon?
Никакой функции для SEO он не несет, но его использование позволяет повысить узнаваемость сайта, и, как следствие, показателя CTR.
Узнаваемость сайтаИконки favicon помогают сделать вкладку с вашим сайтом узнаваемой, это важно, когда пользователь одновременно открывает несколько ресурсов. С заметным фавиконом ваш сайт не потеряется среди других открытых вкладок.
ИнформативностьФавикон должен соответствовать цветовой гамме сайта и тематике компании.
Вы можете использовать, например, логотип или первую букву названия или простое, но оригинальное графическое изображение, чтобы пользователь, увидев иконку вашего сайта, мог сразу определить, что на вкладке.
Если использовать в качестве фавикона логотип или его узнаваемый фрагмент, пользователи сайта будут часто его видеть и быстрее запомнят.
Суперполезный гайд по созданию иконок для интерфейсов — Дизайн на vc.ru
Иконка, значок, символ, образ — каких только названий нет у этих атрибутов. Зачем они нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя – всё это расскажем ниже.
22 561 просмотров
1.
Используйте оптическую сетку
В зависимости от формы значка вставьте его в соответствующий кадр оптической сетки. Например, квадратные значки более компактны, чем треугольные или удлинённые.
Чем компактнее значок, тем меньше места ему нужно. Чем более острые края или мелкие детали имеют значок, тем больше занимает пространство для художественной области.
Будьте внимательны, сетка должна помогать, а не ограничивать. Если значок визуально лучше с некоторыми торчащими элементами, пусть так и будет.
2. Учтите пиксельную сетку
Чтобы сделать иконки острыми на экранах с сеткой, придерживайтесь пикселей и отдавайте предпочтение двухпиксельным границам для значков строк. Центрированные двухпиксельные границы обеспечивают достаточную толщину и чёткие силуэты.
Если вы выбираете однопиксельные границы для значков, они должны быть либо внешними, либо внутренними, но не центрированными.
Сцентрированные однопиксельные границы делают значок размытым в масштабе 100%, однако он кажется чётче при увеличении масштаба.
Задайте начальную и конечную точки диагоналей в соответствии с сеткой пикселей. Диагонали с углами 45 °, 30 ° и 60 ° выглядят более острыми, чем диагонали с неравномерными углами, такими как 13,7 ° или 81 °.
3. Сохраняйте определённый уровень детализации
Лучше начать набор значков с самого сложного значка.
Он определит уровень детализации и поможет сделать иконки того же визуального веса.
Когда значки имеют разные уровни детализации, более резкие привлекают больше внимания пользователя и кажутся визуально более тяжёлыми.
4. Контролируйте минимальный размер зазора
Пространство между соседними элементами значка не должно быть слишком маленьким или непоследовательным во всем наборе. Определите минимальный зазор и держите его повсюду, чтобы избежать «прилипания» контура.
Для значков линий лучше сделать минимальное пространство, равное толщине линии.
Линии должны быть либо чётко раздельными либо точно связанными.
5. Удалите повторяющиеся части
В наборах иконок вы можете повторять детали. Избавьтесь от них, чтобы сосредоточить внимание пользователя на важном. Чем меньше графического шума вы показываете, тем яснее его понимание.
Если целевой пользователь уже понимает, с чем он или она работает, нет необходимости повторять это снова и снова. Например, без иконок «@» на конвертах люди всё равно знают, что речь идёт об электронной почте.
Это правило также относится к различным дополнениям — рамкам, фону — вокруг иконки.
Если они не помогают читать значок, уберите их.
6. Выберите определённый стиль и следуйте ему
Не смешивайте отображаемый объём с фронтальным изображением в пределах одного набора иконок. Гармония стилей поможет пользователям распознавать значки и понимать, что они имеют одинаковое значение.
Этот же принцип работает с иконками строк и заполненными значками. Если вы их смешиваете, люди могут подумать, что они имеют разное значение или статус. Конечно, если вы этого не хотите. Например, заполненный значок предназначен для команды ключа, а значки строк — для других команд.
Лучше иметь два варианта каждого значка в интерфейсах. Значок линии — для отключённого или обычного состояния. Заполненный значок — для состояния щелчка.
7. Используйте двухмерную систему калибровки
Восьмипиксельная сетка и 12-колоночная компоновка используются для многих интерфейсов как более гибкие, по сравнению с десятичной матрицей. 12 можно разделить на два, три, четыре и шесть. Таким образом, 24- или 48-пиксельные области значков стали стандартными. Эти значки можно масштабировать, если требуется больший размер.
8.
Следите, чтобы силуэты были чистыми и точными
Перфекционизм — не панацея. Никому не нужны пиксельные совершенные линии ради идеальных линий. Но это важно для правильного, а не искажённого отображения значков в конечном продукте. Имейте в виду минимальное необходимое количество анкеров и отсутствие зазоров между соседними элементами.
Та же история с раздражающими размерами «8.999 px» или «100.001 px». Если фиксирующие фигуры расположены точно, края иконок выглядят острыми. И вы не рискуете получить чрезмерные якоря и промежутки при объединении фигур.
9. Очистка SVG от мусора
Многие редакторы интерфейсов, такие как Sketch, могут создавать SVG с ненужными элементами — чрезмерными группами, цветными слоями и обтравочными масками.
Смотрите, в Sketch всё выглядит хорошо.
Откройте этот SVG в другом редакторе (например, Adobe Illustrator). Вы заметите пустые слои, ненужные группы и иногда обрезающие маски. Всё это может вызвать проблемы, когда фронтенд-разработчики конвертируют значки в иконку или используют SVG на веб-странице.
Вы можете удалить этот мусор и пересохранить иконку.
Как видите, Sketch SVG (picture.svg) и отредактированный Illustrator SVG (picture_new.
svg) имеют разные предварительные просмотры в вашем средстве просмотра файлов. Кстати, можно избавиться от мусора в значке в редакторе кода. Если вы знаете, как выглядит SVG-код, попробуйте удалить ненужные строки данных напрямую.
Конечно, все эти рекомендации исключительно субъективны. Но рекомендуем обратить внимание, где строгие геометрические иконы не выглядят лучшим образом.
Незаполненное пространство. Если на сайте есть пустые места, к примеру, «Нет задач» или «Все электронные письма прочитаны», лучше проиллюстрировать их иконками эмоций или поместить только текст. Эмоциональные иконки могут заставить пользователей улыбаться, в то время как геометрические значки не добавят никакой ценности для взаимодействия.
Маскоты и иллюстрации. Если в вашем интерфейсе есть талисман или иллюстрация, этот тип графики должен быть эмоциональным. В таком случае сложно представить, как дизайнер может изображать персонажа ограниченным выбором форм и придерживаться сетки.
Статья переведена и адаптирована на русский язык студией Netlab. Оригинал тут.
Бесплатный генератор для создания иконки навыков для Алисы онлайн 🖼
- Главная
- Инструменты
- Бесплатный генератор для создания иконки навыков для Алисы онлайн 🖼
Информация о сервисе
Красивая иконка навыка — один из важных показателей хорошего навыка.
Значимость иконки можно приравнять к
аватарке в социальной сети. Создать хорошую иконку, которая будет красиво отображаться в каталоге не
всегда бывает просто. К тому же не всегда есть доступ к редактору фотографий или отсутствуют навыки или
время для редактирования изображения. Специально для этих целей был разработан сервис по созданию
простой и красивой иконки навыка.
Сервис предназначен для быстрого и простого создания красивой и опрятной иконки.
Если вы хотите, чтобы ваш навык отображался красиво и при этом хочется приложить минимум действий, то данный сервис предназначен специально для Вас!
Создайте иконку прямо сейчас!
Иконка навыка
Иконка навыка — Изображение, которое размещается в меню навыков для индивидуализации навыка.
Не допускается использование изображений, нарушающих права третьих лиц, в частности
содержащие произведения, средства индивидуализации третьих лиц, изображения граждан, без
надлежаще полученного согласия правообладателей и граждан.
В случае использования в иконке бренда, вам необходимо подтвердить наличие прав на использование бренда путем указания адреса сайта для верификации прав на бренд. Кроме того, разработчик навыка должен подтвердить принадлежность ему указанного сайта посредством аккаунта в сервисе Яндекс.Вебмастер.
Используемый бренд должен соответствовать бренду в названии и/или активационном имени навыка.
Основанием для отказа в принятии заявленной иконки является:
- Несоответствие выше изложенным требованиям.
- Отсутствие подтверждение прав на использование названия бренда, произведения, изображения гражданина.
- Не соответствует указанному ранее названию навыка и/или активационному имени.
- Сервис уже содержит тождественное изображение, заявленное в качестве иконки до момента
рассмотрения текущей заявки.
Рекомендации по созданию Иконки навыка.
Иконка навыка также является аватаркой для каталога навыков Алисы. О том как сделать аватарку, был отдельный видео-урок в школе Алисы. Ссылка на статью с уроком: Школа Алисы. 6 видео-урок
Помимо информации представленной в видео уроке, рекомендую следующее:
- Сделать иконку квадратной, или круглой;
- По необходимости использовать обводку, когда края(желательно левый верхний угол), заполненные нужным цветом;
- Не использовать картинки найденные в интернете, которые никак не относятся навыку;
- Сделать картинку максимально интересной и уникальной, чтобы появлялось желание нажать на неё.
- Сделать иконку максимально понятной, чтобы пользователь посмотрел на иконку, и сразу понял что
делает навык.
Назначение сервиса
Суть сервиса заключается в быстром создании иконки для навыка в Яндекс.Алиса. Теперь для того, чтобы создать иконку, не обязательно запускать photoshop или любой другой редактор изображений. А также не придется ломать голову над тем, чтобы иконка отображалась корректно и опрятно в каталоге навыков. Сервис генерирует изображение с разрешением 512х512 пикселей, благодаря чему иконка смотрится красиво и аккуратно. Но при этом, сервис не будет проверять загружаемое изображения на требования Яндекса, которые относятся к иконке. Поэтому рекомендуется грамотно подойти к выбору подходящего изображения.
Как использовать
Сервис для создания иконки для навыка является максимально простым и понятным. Справиться с ним сможет
каждый, даже ребенок 👶
Всё что от вас требуется, это выбрать нужную картинку, а также цвет обводки.
После чего просто нажать
на кнопку «Получить свою иконку навыки» и немножко подождать ⌚
В результате вы получите следующий результат:
Важно: картинка получится квадратной, но после того как вы загрузите картинку в консоли Яндекс.Диалогов, она отобразится следующим образом:
Помимо этого не забывайте, что на сайте есть сервис, позволяющий создать простой навык-викторину. Ссылка на сервис: maxim-m.ru/tools/alisa
Разрабатывайте классные навыки, и по необходимости используйте сервис для создания классных иконок для своего навыка.
Помните: Навыки украшают Алису 🌈
Иконка сайта (favicon.ico) — Бесплатный онлайн-конвертер
Иконка сайта (favicon.ico) — это изображение в виде знака, она отображается в браузере у любого интернет юзера. Называют её и по другому — фэвикон — пошло так, от сокращения двух слов, иконка (icon) и избранный (favorit), что в последствии и стало называться, избранная иконка.
Изображение можно увидеть перед адресом сайта, отображается в вкладках и закладках и в строке адреса. Если не добавить эту иконку, то её место займёт иконка браузера, что не есть хорошо, так как это портит внешнюю красоту сайта. Также фэвикон может быть показан и поисковыми системами, перед названием и описанием сайта. С тем, где расположена иконка и что это такое разобрались, следующий этап — непосредственно создание.Есть многочисленные способы создание иконок:
- Создание иконки с помощью нашего онлайн сервиса — это самый лёгкий способ. Просто выберите файл и укажите нужный вам размер иконки и сервис сам сформирует формат и размер.
- Очень популярны и программы для создания иконок, они также помогают экономить время. У данных программ очень большой спектр функций, одни могут работать, даже не с одной фотографией или картинкой, а другие хвалятся плавным переходом цветов и трёхмерными вариантами изображения.
- Ещё один вариант — это создание иконки самим, то есть с помощью небезызвестного фотошопа или даже просто Paint`а.
- иконка должна отображать название или суть ресурса, то есть должна давать ответ на вопрос: о чём сайт? Если сайт корпоративный или у вас есть логотип — то разместите его в качестве favicon.ico предварительно сконвертировав ваш файл в иконку с помощью нашего сервиса.
- размер должен быть стандартный — это 16 на 16 или 32 на 32. Лучший вариант — создать иконки, содержащую несколько размеров.
- чтобы добавить иконку, нужно скинуть её на корень сайта, на сервер. Самый простой способ добавления — это переименовать вашу иконку в файл с именем favicon.ico и веб-сервер автоматически будет отображать её на вашем сайте.
- формат для иконок универсален это формат ico, но есть также и поддержка анимации и jpeg файлов. Следует отметить что не все браузеры поддерживают отображение анимации и jpeg, поэтому лучший вариант -это обычная иконка
Полное руководство по созданию интерфейсных иконок
Иконки являются важной частью любой системы дизайна или истории продукта. Иконки помогают нам быстро ориентироваться. Они независимы от языка. И самое приятное: они очень маленькие, поэтому они не занимают много места. Иконки являются фундаментальной частью хорошей системы дизайна и очень полезны для маркетинговых материалов. Они являются основным блоком иллюстративного контента, также являются высокотехнологичными.
Существует не так много людей, которые любят создавать иконки, и еще меньше тех, у кого это получается. Я написал это руководство, чтобы помочь вам стать одним из тех людей.
Независимо от того, являетесь ли вы экспертом по системам проектирования, иллюстратором или дизайнером продукта, это руководство поможет вам узнать, как создавать иконки, связывать их с вашим брендом и как внедрить их в вашу систему дизайна. Давайте начнем с основ.
Основные элементы значков
Размер
Согласованность и соответствие является ключевым условием для иконок, и все ваши иконки должны быть одинакового размера при их создании.
Во-первых, вам нужно убедиться, что вы знаете, как построена ваша сетка (кратно 8 или 10?). Исходя из этого, ваш базовый размер иконки должен быть напрямую связан с данными условиями. Итак, если у вас есть сетка, основанная на 8, вы бы хотели построить в 16, 24 или 32.
Выберите общий размер для создания всех ваших иконок, а затем предоставьте им возможность масштабироваться до других размеров, которые могут понадобиться другим дизайнерам. Вы же не хотите создавать одну и ту же иконку снова и снова, только в разных размерах.
Когда вам понадобится комплексность глифа, именно тогда вы захотите добавлять другие размеры. У вас может быть значок базового продукта в 24px, а у маркетинговых значков – 80px из-за огромной разницы в использовании. Вы захотите добавить больше деталей для больших размеров.
Значок магазина в размерах 24×24, 40×40 и 80×80Когда создается одна и та же иконка разных размеров, я предпочитаю начинать с самого большого размера и идти на уменьшение. Мне гораздо проще удалять детали и упрощать, чем добавлять по мере роста.
Это также дает вам ощущение объекта, прежде чем вы действительно минимизируете его.
Цвет
Для иконок товара используйте 1 цвет: черный. Если добавить что то кроме этого, то ваши компоненты станут слишком сложными и трудными для других дизайнеров. Для маркетинговых иконок вы можете использовать 2 цвета, если это важная часть вашего бренда, но я лично считаю, что значки должны быть одноцветными. Все, что имеет 3 или более цветов, является иллюстрацией, а не значком.
Слева: это точечная иллюстрация. По-середине: значок в перспективе. Справа: плоский значок.Сетки
Пиксельная сетка является основной сеткой, которая использует наименьший элемент: пиксель. При создании значков вы всегда хотите выровнять объекты по пиксельной сетке, особенно по прямым линиям. Но вы можете строить другие фигуры на пиксельной сетке (если вы используете Figma, это уже установлено автоматически). Вы хотите строить объекты на пиксельной сетке не только потому, что она будет выглядеть более красиво, но и потому, что она облегчит вашу жизнь.
Равномерно распределять объекты намного проще, когда вы используете сетку. Это помогает вам оставаться в соответствии с вашим расположением, и в целом ваши значки будут выглядеть лучше. Вы можете легко увидеть в Figma разницу между чем-то, находящимся «на пикселе» и вне.
Мне нравится строить себе сетку, прежде чем я начну. Вот мои настройки в Figma.
Прекрасно! Теперь, когда вы освоили пиксельную сетку, вы захотите узнать об оптической сетке. Оптическая сетка помогает нам определить, где находится центр масс значка, а также насколько он воспринимается человеческим глазом. Круги и изогнутые объекты занимают меньше визуального пространства, чем квадраты. Лучше всего поместить значки в контейнер фиксированного размера, чтобы при экспорте они были одинакового размера.
При построении моей оптической сетки, я предпочитаю делать отступы по краю, которые равны ширине моего штриха, или, возможно, в два раза шире, если я использую штрих в 1px.
В приведенных ниже примерах вы можете видеть, как разные формы подходят к разным краям сетки.
Визуально доминирующий объект должен быть центрирован как вертикально, так и горизонтально.
Доминирующий объект (прямоугольник) находится в центреЕсли вы используете пиксельную сетку и пользуетесь преимуществами оптической сетки, вы будете впереди.
Штрихи и заливки
Помните, когда я сказал, что последовательность является ключевым моментом? Я говорю это снова. Ничто не беспокоит меня больше, чем две иконки рядом, где одна закрашена, а у другой выполнен только контур. Очень важно убедиться, что все ваши иконки оформлены одинаково. Например, у вас могут быть варианты применения заливки, чтобы показать, что что-то выделено, но вы определенно хотите создать набор с одним стилем и, возможно, создать другой вариант.
Как правило, заполненные значки имеют более высокий уровень узнаваемости. Значки выполненные лишь с помощью контура дают вам прекрасную возможность создавать крошечные детали.
При выборе того, какой стиль является более подходящим, вы также должны учитывать общий вид своего бренда.
Если вы собираетесь создавать штриховые иконки, все штрихи должны быть одинаковой ширины. Я также рекомендую, чтобы расстояние между штрихами не было меньше, чем ширина вашего штриха.
Расстояние между штрихами должно по возможности быть равным ширине штрихаВозможно, у вас есть набор иконок, который соответствует одному стилю, но не другому. При создании закрашенных версий контурных значков вы захотите посмотреть, как можно упростить линейную работу. В идеале закрашенные значки напоминают тени, а не перевернутые линии. Создание контурных версий закрашенных значков включает в себя определение того, какую ширину контура вы можете использовать в этом пространстве и какие детали вы можете добавить, сохраняя при этом четкость.
Я не рекомендую делать контурные значки размером менее 10px (при условии, что ширина штриха будет 1px-2px). Их будет очень сложно расшифровать.
Выбор стиля
Ваши значки являются отражением вашего бренда. Приступая к этой работе, важно понимать основные ценности вашего бренда и то, как они проявляются визуально. Некоторые прилагательные для размышления: жесткий/мягкий, обыденный/официальный, роскошный/экономичный и буквальный/абстрактный. У вас может быть визуализация стиля, на который вы можете ссылаться.
Некоторые значки кажутся простыми (X, меню гамбургеров, шеврон), но эти значки требуют того, чтобы вы уже понимали основные принципы вашей системы значков. Я рекомендую начинать с более сложных значков, чтобы помочь вам определить, какие правила вы хотите установить. Таким образом, как только вы начнете создавать простые иконки, это уже будет проще простого.
5 значков продуктов представлены в 5 стилях – обратите внимание, как небольшие различия делают каждый набор выдержанным и целостным.Вот подборка как продуктов, так и маркетинговых значков, которые представляют посыл и стиль визуального бренда компании:
Рисование значков
Геометрические фигуры
Если только я не создаю очень естественный, органичный стиль значков, то мне нравится начинать с основных форм, для создания формы моих иконок.
Прямоугольники, квадраты и круги – отличные стартовые точки для создания более изящных значков.
При рисовании геометрических форм, если вам нужно создать сложные многоугольники, вы можете начать с квадрата или прямоугольника или использовать инструмент «Перо» для перехода от точки к пикселю. При этом очень важно иметь четкую сетку, чтобы вы могли видеть, куда направляются эти точки.
Когда вам нужно нарисовать угловые геометрические фигуры, я не рекомендую просто использовать прямоугольник и вращать его. Вместо этого используйте пиксельную сетку, чтобы нарисовать ваши прямоугольники под углом
Слева: повернутый прямоугольник (точки не совпадают с сеткой). Справа: нарисованный от руки прямоугольник (обеспечивает направление ваших точек к сетке).Естественные формы
Рисовать более естественные формы в Figma легко. Вы можете либо использовать традиционный метод рисования кривых точка за точкой, либо вы можете использовать превосходный инструмент Figma углового радиуса.
Мне нравится рисовать все мои точки в виде прямых линий, а затем закруглять углы с помощью инструмента «Радиус угла». Этот инструмент очень полезен для создания органических, сбалансированных форм. Поскольку углы Figma автоматически подстраиваются, вы можете перемещаться по этим точкам, и углы подстраиваются под вас.
Углы
Есть несколько вариантов углов: скошенный (квадратный), скошенный и закругленный. Я настоятельно рекомендую вам придерживаться одного стиля для вашего набора иконок.
Угловой радиус
При использовании этого для округления квадратов и прямоугольников, вы хотите убедиться, что все ваши углы имеют одинаковый радиус. При создании концентрических фигур вам необходимо отрегулировать радиусы углов, чтобы создать идеальные концентрические формы. Внутренние формы будут иметь меньший радиус, чем внешние формы.
Отличный образец концентрических радиусов в этом портфелеЛюбая промежуточная точка
на пути может быть сглажена, с помощью свойства Угловой радиус в Инспекторе.
Если вы выбираете весь путь, то он округляет все углы в одинаковой степени.
Если вы перейдете в режим редактирования, вы можете выбрать отдельные точки и
округлить их по отдельности.
Закрашенные объекты
Если для ваших иконок требуются закрашенные объекты внутри их основных форм (например, окна в доме), в идеале вы захотите сохранить контурные фигуры в заштрихованных значках. И закрашенные объекты в закрашенных значках. В случае, если у вас нет места для контурных фигур, вы хотите использовать закрашенные формы, которые пропорциональны вашим контурам. Например, если у вас контур шириной в 2px, вам не нужны закрашенные фигуры больше, чем 4x4px.
Метафора
Метафоры важны в значках-мы используем их постоянно, даже не задумываясь. Значок дома обозначает домашнюю страницу. Насекомое означает ошибку. При масштабировании значков для создания уменьшенных версий, я предпочитаю помнить про метафору(смысл), которую я использую для передачи смысла значка.
Используйте общую метафору(смысл заложенный в вашем изображении), чтобы продолжить в меньшем размере, а не просто сделать точную иконку в меньшем масштабе.
Когда общий контент выглядит не так как нужно, определите, какие детали наиболее важны, а затем удалите лишние.
Если вы ограничены пространством, вы можете упростить важные детали, а не удалять их.Перспектива
Использование перспективы в иконках не всегда просто – их размер усложняет задачу, поскольку рисование в перспективе занимает дополнительное пространство. Если вы хотите использовать перспективу, либо используйте ее масштабно и сделайте ее ключевой частью вашей системы, либо используйте ее экономно, в случае, когда это помогает повысить четкость и ясность.
Верхний ряд: плоский. Нижний ряд: в перспективе.Шрифт (избегайте!)
По возможности избегайте использование надписей для значков. Значки должны быть глобальными. Если вам нужен шрифт (например, символы валюты), нарисуйте его самостоятельно, а не используйте гарнитуру шрифта.
Подсказки
Операции Boolean
Логические операции объединяют любой набор слоев фигур с помощью одной из четырех формул: объединение, вычитание, пересечение и исключение.
Этот инструмент актуален и потрясающий. Это отличный способ сделать ваши иконки более изменяемыми. Вместо того, чтобы обрезать контуры, вы можете использовать функцию объединения. Не хотите искать пересечение фигур вручную? Попробуйте вычесть.
Группы Boolean обрабатываются как единый слой формы и имеют общие свойства заливки и обводки и могут комбинироваться с другими булевыми группами посредством последующих логических операций.
Объединение: объединяет выбранные фигуры в логическую группу. Если объекты перекрываются, внешний путь новой фигуры состоит из совокупности путей ее подслоев минус любые сегменты, которые перекрываются. Затем этот штрих будет применен к этому внешнему пути, игнорируя любые сегменты пути, которые перекрывают друг друга.
Вычитание: противоположно объединению. Вычитание удаляет область фигуры или набора фигур из базовой фигуры. Только нижний слой формы является сплошным, остальные вычитаются из него.
Пересечение: создает логическую группу, форма которой состоит только из
перекрывающихся частей ее подслоев.
Исключение: является противоположностью пересечения. Исключение показывает только те области его подслоев, которые не перекрываются.
Когда я закончу со значками, мне бы хотелось создавать для них стили, так что, когда будущие дизайнеры корректируют цвет, легко вместо этого просто изменить одно свойство (заливку), вместо заливок и штрихов.
Сеть вектор
Векторные сети являются одной из самых уникальных функций в Figma. Большинство инструментов пера рисуют контуры в петле с определенным направлением, всегда желая восстановить соединение с их исходной точкой. Векторные сети не имеют направления и могут распадаться в разных направлениях, не требуя создания отдельного объекта пути. Сложные объекты могут быть созданы внутри одного и того же объекта и с теми же свойствами гораздо быстрее, чем они могут быть нарисованы с использованием традиционных векторных инструментов контура. Подробнее об этом можно прочитать в этой статье.
Как использовать иконки в системе дизайна
Обеспечение доступности
набора значков для остальной части вашей команды – это вопрос организации,
управления активами и осведомленности.
Организация
Давайте начнем с наименования файлов. Ваши иконки должны быть названы на основе того, что они показывают, а не того, что они представляют. Например, значок секундомера должен называться секундомер, а не скорость. Лампочку следует называть лампочкой, а не идеей. Вы хотите, чтобы люди сразу поняли, что такое значок, а не то, что он передает на более концептуальном уровне. Желательны короткие названия. Когда вам нужно несколько слов, используйте тире, чтобы отделить их.
Значки, подобные этому, могут нуждаться в нескольких словах, например, chef-hat.Со временем вы превратите
все свои значки в компоненты. В Figma компоненты работают точно так же, как и
фреймы, с небольшой уловкой, которая дублирует компонент, создавая новые
экземпляры, а не копии. Это означает, что вы можете иметь гигантскую библиотеку
со всеми вашими значками, а когда вам понадобится ее использовать, вы создаете
экземпляр из библиотеки.
Если кто-то внесет изменения в оригинал, ваши значки
будут обновлены. Вам может понадобится искать эти активы, поэтому вы можете
добавить информацию для поиска. Но вместо того, чтобы поместить это в имя
файла, есть альтернатива. Figma имеет окно описания компонента, которое
позволяет добавлять теги и ключевые слова. Это отличное место для добавления
всех тех фраз, которые люди могут искать в вашей библиотеке, не делая
сумасшедших длинных и сложных имен. Вот откуда идут ценности продукта!
Чтобы помочь своим инженерам, вы захотите использовать как фреймы, так и страницы. Страницы представляют наиболее удаленную группу (поэтому мне нравится сортировать их по размеру). Затем фреймы помогут вам сузить содержание, как в примере ниже. Система именования этого значка имеет размер> категория> имя файла.
Когда есть один и тот же значок в разных вариациях, вот как мне нравится обрабатывать их.
Различные размеры: Используйте разные страницы, так как вы редко будете переключаться напрямую с одного экземпляра на другой.
Заливка vs контур: Если вы используете оба стиля, используйте косую черту после имени значка, чтобы указать закрашенные или заштрихованные значки.
Слева: кофе / контурный. Справа: кофе / закрашенныйСкорректированные изображения: если у вас есть значок с визуальным вариантом (например, с несколькими вариантами валюты), вы также можете использовать наименование, чтобы помочь дифференцировать, используя тот же метод, что и закрашенные и контурные значки.
Исходный значок слева «щит». Затем слева направо: «щит / доллар», «щит / евро», «щит / фунт», «щит / иена», «щит / плюс»Управление вашими активами
Когда вы закончили работу
над своими знчками, вы хотите, чтобы они были максимально чистыми для
наилучшего экспорта. Используйте логические операции, чтобы упростить вашу
работу (помните, наш друг Объединение?). Избегайте лишних линий или форм.
Убедитесь, что все ваши строки попадают в ваш кадр. Также необходимо, чтобы
другой человек посмотрел на все ваши значки и дважды проверил чистоту.
Figma великолепна, потому что она поощряет сотрудничество и прозрачность. Со значками может быть заманчиво позволить всем вашим дизайнерам иметь доступ к редактированию, чтобы они могли добавлять новые значки. Я рекомендую собирать значки по отдельности, проверять их и добавлять их самостоятельно, когда они соответствуют стандарту. Предоставление вашим коллегам доступа к просмотру (и доступу к вашей библиотеке) достаточно, чтобы вовлечь их в то, что вы делаете, не заканчивая библиотекой и файлом cattywampus. Некоторые из ваших коллег могут захотеть создать разные версии одного и того же значка (например, разных цветов или с разными названиями). Это часто случается, когда кто-то связывает значок с концепцией или продуктом. Вы никогда не захотите иметь более одной версии каждого значка в вашей библиотеке. Используйте описание компонента для этих наименований. Ваши коллеги-дизайнеры должны настраивать цвета значков в своих отдельных файлах, а не в мастере. Поверьте, вам придется время от времени вносить изменения в эти значки, и вы не захотите делать это более чем в одном месте.
Форматы файлов являются ключевыми для того, когда вы готовы экспортировать значки. Если вы предоставляете значки партнерам за пределами вашей команды дизайнеров или инженеров, вы, вероятно, даете им файлы .png. Экспорт в 1x, 2x и 3x для нескольких устройств. Для разработки и проектирования вы будете часто экспортировать файлы .svg, которые можно редактировать в программах проектирования и которые будут отображаться в браузере с помощью кода при визуализации онлайн в вашем приложении или на сайте. При экспорте SVG вам понадобится максимально чистый код. Еще одна веская причина для выбора Figma-это сверхлимитный экспорт SVG. Поскольку они оптимизированы, это устраняет необходимость дальнейшей оптимизации в будущем. Ознакомьтесь с этой статьей, чтобы узнать больше.
Передача ваших значков в другие руки
Вы можете быть величайшим дизайнером значков в мире, но если вы не можете внедрить ваши значки в ваше приложение / веб-страницу / прямую почтовую программу, это ничего не даст.
Прежде чем приступить к проектированию, поговорите с командой инженеров, ответственных за их внедрение в продукт. Они смогут предоставить вам информацию о веб-сайте или инфраструктуре приложения, которая будет определять некоторые из ваших вариантов, например, ширина или размер штриха. Спросите других дизайнеров, что было сделано раннее, чтобы убедиться, что вы не дублируете работу. Выясните из ваших PMM, какие дополнительные значки они желают увидеть. Будьте дружелюбным сотрудником, который заинтересован в обратной связи, совете и помощи. Это даст вам лучшее представление о том, что вы должны делать, чтобы вам не пришлось переделывать работу и не упускать ключевых арендаторов, с которыми уже нашли общий язык другие люди. И когда вы будете готовы к реализации со своими разработчиками, попробуйте использовать API Figma для программного экспорта.
Другие источники
- Не стесняйтесь связаться с Бонни Кейт Вольф по адресу [email protected]
- Я люблю thenounproject. com→ это место вдохновлено различными взглядами на одну и ту же тему (кто знал, что было так много способов нарисовать папку с файлами!)
com→ это место вдохновлено различными взглядами на одну и ту же тему (кто знал, что было так много способов нарисовать папку с файлами!)FREE Icon Maker — создавайте стильные плоские иконки всего за несколько минут. Экспорт SVG, PNG, ICO
FREE Icon Maker — создавайте стильные плоские иконки всего за несколько минут. SVG, PNG, экспорт ICOТекущий план подписки
Бесплатно
Базовая информация
Полный список функций
- 2 Максимальное количество наборов иконок
- 5 Максимальное количество иконок в наборе
- 32 пикс.
- PNG Экспорт
- 20 Максимальное количество наборов иконок
- 10 Максимальное количество иконок в наборе
- до 128 пикселей
- PNG Экспорт
- Встроить код
- Предварительный просмотр и публикация ссылка на сайт
- 50 Максимальное количество наборов иконок
- 50 Максимальное количество иконок в наборе
- до 256 пикселей
- PNG Экспорт
- SVG Экспорт
- ICO Экспорт
- Встроить код
- Предварительный просмотр и публикация ссылка на сайт
- 9999 Максимальное количество наборов иконок
- 1000 Максимальное количество иконок в наборе
- до 512 пикселей
- PNG Экспорт
- SVG Экспорт
- ICO Экспорт
- Встроить код
- Предварительный просмотр и публикация ссылка на сайт
Все еще не уверены, какой план вам подходит?
Сравнить все функции
Вам нужно еще больше? Свяжитесь с нами Узнать больше.
иконок! Найти / сделать / изменить / изменить размер потрясающих иконок онлайн бесплатно
Находите и используйте отличные значки для своего веб-сайта, блога или приложения, это улучшит взаимодействие с пользователем!
Более 79% веб-мастеров и разработчиков по всему миру периодически обновляют свои логотипы, значки и дизайн пользовательского интерфейса, и всем им это очень выгодно.
С помощью этого совета вы получите коллекцию из хорошо принятых веб-сайтов значков и сможете найти нужные значки менее чем за 1 минуту, которые можно использовать в каркасах, веб-строительстве, разработке приложений, электронной почте, панели инструментов. , палитра или другие цели обновления.Если вы хотите изменить или изменить размер некоторых значков, мы также инкапсулируем подсказку. Этот производитель логотипов и значков может помочь вам без проблем отобразить миллионы значков, форм или даже найти крутой логотип: https://www.
designevo.com/
Коллекция лучших онлайн-создателей бесплатных иконок 2018
# 1 Найдите иконки во Flaticon
Изображение: Flaticon icon maker
https://www.flaticon.com/ — Самый быстрый поиск значков для поиска бесплатных значков в Интернете, кроссплатформенная поддержка: PNG, SVG, EPS, PSD.Некоторые ключевые фразы или комбинации не распознаются, и это не дает никаких результатов. Вариант загрузки: Премиум-аккаунт или кредит. Поддержка прямой загрузки иконок с сайта. Flaticon также предоставляет результаты поиска значков на известной графической платформе — freepik.com.
Для редактирования значков или загрузки файла на основе 64 требуется регистрация пользователя.
Основные характеристики:* Большая библиотека иконок.
* Поддержка форматов PNG, SVG, EPS, PSD.
Слабость:* based64 требует более высокий аккаунт.
# 2 iconfinder — Найдите свой значок в Интернете
Изображение: iconfinder icon maker
https://www.
iconfinder.com/ — Платформа меньшего размера по сравнению с мультиплатформенным Flaticon, часть значков бесплатна, но в верхней части перечислены платные значки (которые выглядят более красивыми, конкретными и яркими). Поддержка прямой загрузки иконок с сайта в форматах SVG, PNG, ICO, ICNS, Base64 SVG, Base64 PNG. Наборы значков являются общими, поэтому вы можете найти стильный набор значков для приложений, веб-сайтов, каркасных дизайнов.Нажмите [Самый популярный], вы найдете эти бесплатные наборы в хорошо принятой последовательности. Используйте [Открыть в редакторе значков], вы можете выбрать простое редактирование (с ограничениями по функциям, сохранение только в SVG и PNG) значка, но только для сохранения его как файла SVG и PNG без дополнительных шагов, таких как регистрация.
Основные характеристики:
* [Самые популярные] Бесплатные наборы иконок.
* Поддержка форматов SVG, PNG, ICO, ICNS, Base64 SVG, Base64 PNG.
Слабость:
* Сначала перечисляем платные значки, бесплатных значков не так много.
* Для бесплатной загрузки значков в CSH и AI требуется регистрация.
# 3 icons8 — легко менять значки
Изображение: icons8 icon maker
https://icons8.com/ — Легко запустите поиск по теме, и он покажет связанные значки с доступными фильтрами стилей, где вы можете фильтровать значки для iOS, материалов, Windows 10 и т. Д.
Основные характеристики:
* Креативные иконки, более обильные иконки.
* Редактор иконок находится справа, где вы можете легко его редактировать.
* В редакторе icon8 очень полезна функция [Overlay], которая добавляет значок меньшего размера и полезна для создания значка заблокированной функции или создания значка добавленной функции.
Слабость:
* SVG, EPS и PDF — это заблокированные функции, требующие ежемесячной подписки.
* Не поддерживает загрузку многих форматов.
# 4 Найдите и создайте бесплатный значок с помощью DesignEvo
Изображение: DesignEvo icon maker
https: //www.
designevo.com / — Хотя с технической точки зрения это онлайн-производитель логотипов, он предоставляет миллионы значков в разделе , что делает его прекрасным создателем значков. Два способа создать понравившуюся иконку: один из них — пойти [Scratch], определить размер иконки и найти иконку с ключевым словом. Другой способ — найти один шаблон логотипа по ключевому слову и удалить все тексты. Например, вы можете использовать его в качестве создателя значков YouTube из его шаблонов логотипов YouTube.
Основные характеристики:
* Легко найти соответствующие значки и внести изменения.
* Иконки «сделай сам» принадлежат вам.
Слабость:
* Бесплатная загрузка поддерживает только значки в форматах JPG и PNG размером 500 * 500 пикселей. Не поддерживает загрузку векторных иконок бесплатно.
* Нет портала, который позволяет нам напрямую войти в создателя иконок.
Сделайте бесплатный логотип прямо сейчас# 5 FotoJet — Создавайте собственные иконки
Изображение: Редактирование изображений FotoJet как средство создания иконок
https://www.
fotojet.com/apps/?entry=edit — Это не 100% онлайн-инструмент для создания значков, но он предлагает 100% бесплатный способ найти и создать значок самостоятельно.Сначала загрузите фоновое изображение, обрежьте его до размера значка. Перейдите [Клипарт], глобальный раздел, найдите ключевое слово значка, чтобы добавить его на холст значка.
Основные характеристики:
* Настройте свои значки, сделайте красивые наложения.
Слабость:
* Нет портала, который позволяет нам напрямую войти в средство поиска значков.
Создайте свою икону в FotoJetЮзабилити-тестирование лучших производителей иконок (сравнение параметров)
| Продукт / Параметры | Поддержка загрузки / форматирования | Шаблоны / примеры значков электронной почты | Шаблоны / примеры плоских иконок | Шаблоны / примеры иконок инструментов | Шаблоны / примеры значков медведя | Шаблоны / примеры иконок с волками |
|---|---|---|---|---|---|---|
| Флатикон | Бесплатные загрузки: PNG, SVG, EPS, PSD Регистрация / Платные загрузки: based64 | 11395 Всего (PNG, SVG, EPS, PSD бесплатно) | 210421 Всего (PNG, SVG, EPS, PSD бесплатно) | 141583 Всего (PNG, SVG, EPS, PSD бесплатно) | 940 Всего (PNG, SVG, EPS, PSD бесплатно) | 124 Всего (PNG, SVG, EPS, PSD бесплатно) |
| iconfinder | Бесплатные загрузки: SVG, PNG, ICO, ICNS, Base64 SVG, Base64 PNG Регистрация / платные загрузки: Ограничено шаблоном | 20222 Всего (871 загрузка бесплатных иконок) | 2214 Всего (9 бесплатных загрузок значков) | 16415 Всего (516 загрузок бесплатных иконок) | 2362 Всего (60 бесплатных загрузок иконок) | 361 Всего (7 бесплатных загрузок значков) |
| иконок8 | Бесплатные загрузки: PNG ограниченного размера бесплатно Регистрация / платные загрузки: SVG, EPS, PDF и PNG с более высоким разрешением | 100 Всего (Только PNG ограниченного размера) | 747 Всего (только png без ограничений по размеру) | 437 Всего (только png без ограничений по размеру) | 250 Всего (Только PNG ограниченного размера) | Всего 44 (Только png без ограничений по размеру) |
| DesignEvo | Бесплатные загрузки: JPG / PNG в пределах 500 пикселей * 500 пикселей (достаточно большой для условных обозначений размера значков) Регистрация / платные загрузки: Векторы PNG, SVG / PDF с более высоким разрешением | 12820 Всего | 91 Всего | 591 Всего | 96 Всего | 93 Всего |
| FotoJet | Бесплатные загрузки: JPG, PNG Все бесплатно Регистрация / Платные загрузки: Нет | 10 | 10 | 9 | 7 | 4 |
В этот список лучших разработчиков значков 2018 года мы не включаем те известные средства поиска значков, которые требуют от пользователей регистрации для загрузки значков, т.
е.е., illustrio.com, thenounproject.com.
Другие сведения об Icon, которые вы хотите знать
Размер значка
В мире адаптивного веб-дизайна существуют различные авторитетные онлайн-рекомендации относительно размеров иконок для пользовательского интерфейса. Значки обычно имеют размер 16×16, 32×32, 48×48, 64×64, 128×128 и 256×256, что достаточно велико, чтобы к ним можно было легко прикоснуться на сенсорных устройствах.
>> Визуальные рекомендации MS для размера значков
Компактный значок, значок изменения размера
Чтобы значки подходили для разных случаев (iPad, iPhone 8, iPhone 6S, Smart TV и т. Д.)), вы можете изменить размер значков, например, компактного значка или значка увеличения. Для векторных значков изменять размер не нужно. Что касается растровых значков, вы можете рассмотреть возможность использования некоторых средств изменения размера графики (GIMP или PS), чтобы быстро изменить размер значка.
Разница между иконкой и логотипом
Логотип(логотип, логотип или комбинированный логотип) предназначен для брендинга, поэтому он должен быть уникальным, креативным и понятным.
Что касается значков, у него есть только одно требование — дать пользователям понять, что они представляют с первого взгляда.Так что лучше всего, когда вы найдете значок, просто используйте его в своем приложении / каркасе / веб-сайте как есть. Если вы действительно хотите что-то креативное в дизайне значков, мы настоятельно рекомендуем вам не менять / переделывать значок слишком сильно и убедитесь, что он общеизвестен (Или вы можете потерять большую часть своих заслуженных клиентов из-за того, что не сможете добиться легкости, И ЭТО НЕ УГРОЗА !!!) .
Удобство использования Icon
Icon призван обеспечить, чтобы вся аудитория могла легко понять то, что он обозначает с первого взгляда, т.е.е., функция, особенность, действие или идея. В большинстве случаев значки помогают словам передать значение. Бывают случаи, когда значки заменяют текст в целом, когда значки очень просты для пользователей, когда тексты не обязательно нужны. Обратите внимание на правила и соглашения по дизайну, когда вы действительно хотите что-то изменить: убедитесь, что ваши изменения не переборщили, а обновленные значки на 100% заметны и понятны для всех! Сделайте значок легко узнаваемым!
Бесплатные идеи для логотиповOnline Icon Maker — создавайте свои собственные значки в бесплатном онлайн-редакторе.
Создатель иконок для избранных в Интернете
Это веб-приложение позволяет создавать значки (значки) 16×16 с помощью простых инструментов рисования. Если вам нужен кристально чистый значок с гладкими краями, тенями или другими расширенными эффектами, пожалуйста, подумайте об использовании нашего профессионального редактора 3D-значков. |
Как пользоваться:
- Выберите один из основных цветов, щелкнув цветной квадрат в правой части окна.
- Удалите пиксели, рисуя прозрачным цветом (шахматная доска), или сотрите весь холст, нажав кнопку «Очистить холст» на панели инструментов.
- Выберите собственный цвет, введя его шестнадцатеричный код веб-цвета в поле под цветами по умолчанию и нажмите кнопку «Установить».
- Выберите инструмент рисования, нажав кнопку на панели инструментов:
- «Карандаш» меняет цвета пикселей, когда мышь перемещается по холсту при нажатой левой кнопке.
- «Линии» рисует линию от точки, где была нажата кнопка мыши, до точки, где она была отпущена.
- «Пипетка» позволяет установить текущий цвет от пикселя иконки.
- Создайте значок favicon из изображения jpg или png, используя поле под окном редактора. (Альфа-канал не поддерживается.)
- Загрузите новый значок, просто нажав кнопку «Загрузить значок» на панели инструментов.
Дополнительные ресурсы
Узнайте, как изменить свои веб-страницы для отображения значков.
Загрузите значки из библиотеки значков.
Загрузите RealWorld Icon Editor для создания профессиональных иконок.
Важно: Для этого онлайн-конструктора значков требуется веб-браузер с поддержкой Javascript 1.2 , например Internet Explorer 6, Firefox или Opera. Если у вас возникли проблемы, убедитесь, что вы используете один из поддерживаемых браузеров и включен Javascript («Активный контент»).
Только авторизованные пользователи могут оставлять комментарии на этой странице.Создайте свои собственные иконки PNG бесплатно
Большинство людей могут не знать точно, что такое PNG или векторные иконки, но сложно выйти в Интернет, не увидев их. Логотипы, кнопки и типографские символы — одни из наиболее распространенных примеров значков, с которыми вы можете сталкиваться каждый день, когда используете свой телефон или компьютер.
Поскольку цифровые значки имеют очень много применений, вы должны знать, как создавать и использовать их самостоятельно. Несколько лет назад вы могли начать с Microsoft Paint, но какие инструменты вы можете использовать сегодня, чтобы создавать и редактировать значки с помощью более современных инструментов? Вот что вам следует знать:
- Начните с существующего значка
- Измените как вектор, сохраните как PNG
- Используйте простых цветов или монохромных
1.Начните с существующего значка
Вряд ли возникает необходимость создавать значки с нуля, поскольку в Интернете уже есть миллионы простых и бесплатных изображений для значков! Я рекомендую найти значок, похожий на тот, который вы хотите создать, и использовать его в качестве шаблона для редактирования и модификации, чтобы сделать его своим. Это может занять всего несколько щелчков мышью: перейдите на Kapwing.com, нажмите « Начать редактирование » и введите Kapwing Studio . Здесь нажмите « изображений » на верхней панели инструментов, чтобы найти в Интернете любой значок, который вы хотите.
Вот простой способ объединить два прозрачных векторных изображения в один значок PNG.Я рекомендую включить такие условия поиска, как « значок буфера обмена PNG » или « значок вектора дерева ». Есть и другие способы быстрого импорта значков: с помощью некоторых программ, таких как Keynote, вы можете копировать и вставлять векторные фигуры прямо в Studio, где вы можете редактировать их и делать прозрачными.
2. Редактировать как вектор, сохранять как PNG
Есть два основных формата для обычных изображений значков: векторов (с использованием таких типов файлов, как SVG или PDF) и файлов PNG .Каждая из этих групп имеет несколько преимуществ для редактирования или использования файлов. Векторные изображения, с одной стороны, определяются формами, цветами, линиями и конечными точками, поэтому вы можете масштабировать, увеличивать и редактировать их без потери разрешения или качества. Кроме того, большинство файлов векторных изображений не поддерживают прозрачность, за исключением определенных типов PDF-файлов, которые часто не поддерживаются в Интернете. Файлы PNG , с другой стороны, обеспечивают полную или частичную прозрачность и сложные формы, поэтому они идеально подходят для универсальных сценариев использования и графических приложений.Однако они имеют определенное разрешение в пикселях, поэтому редактирование или изменение размера может повлиять на качество их изображения.
По этим причинам лучшим решением является редактирование и создание файлов значков с использованием векторных изображений, а также обработка и сохранение ваших значков в виде изображений PNG. Таким образом, качество вашего изображения будет максимально высоким, а ваши прозрачные файлы значков PNG можно применять где угодно, от веб-дизайна и плакатов до футболок и водяных знаков для видео. Используя Kapwing, вы можете находить и импортировать векторные изображения в Studio, где вы можете изменять, стирать, изменять размер и редактировать их.А для обработки прозрачных универсальных файлов PNG вы можете просто сделать фон вашего проекта прозрачным. Более того, вы можете создать больших высококачественных PNG-файлов , изменив размер холста до 2560×2560 пикселей.
3. Используйте простые цвета или монохромный
Этот последний пункт полезен как в общем случае, так и как необходимость в определенных случаях использования. Большинство значков устанавливают один или несколько из следующих полей: маленький, для печати или с наложением. По каждой из этих трех причин лучше всего подходит простая минимальная цветовая гамма.При использовании очень маленьких значков слишком большая сложность цвета может затруднить различение значков. Печатные значки могут стоить намного дороже, чтобы распечатать сложный набор цветов, а простые или монохромные значки работают на любом типе фона в качестве наложения.
Хорошее место для начала для значков сложной формы — это сделать изображение силуэтом . Чтобы сделать изображение монохромным силуэтом с помощью Kapwing Studio, удалите все части фона, которые вы хотите, затем полностью уменьшите контрастность и яркость изображения.Чтобы получить полное руководство, ознакомьтесь с этой статьей.
Тег сша 0003 00030003