Создание значков: бесплатная программа для создания иконок ICO, favicon для сайта

Содержание

7 принципов дизайна иконок. На что нужно обращать внимание при создании иконок

Понятность, удобочитаемость, выравнивание, краткость, последовательность, индивидуальность, простота использования

Создание высококачественного семейства иконок требует вдумчивого подхода, тренированного взгляда, небольшой итерации и много практики. Ниже я проиллюстрирую признаки качества иконок с помощью 7 принципов и множества реальных примеров. Цель состоит в том, чтобы показать вам ключевые атрибуты отличного дизайна иконок.

Понятность

Основная цель иконки – быстро донести до пользователя идею.

Иконки на приборной панели Toyota Prius Prime (Источник: 2020 Manual)

Какие из этих символов вам понятны? Водители могут выучить их со временем, но некоторые из этих значков интуитивно не понятны. Вам нужно руководство, чтобы расшифровать их значение.

Примерно так они выстраиваются для меня по уровню понятности:

Когда иконка использует незнакомую метафору, ее трудно понять.

«Сигнал напоминания о ремне безопасности» (3-й слева) довольно буквальный, и мы можем его быстро понять. «Сигнал электроусилителя рулевого управления» (крайняя справа) намного сложнее.

Часто непонятная иконка просто раздражает. В случае вождения транспортных средств неправильное понимание предупреждающих индикаторов может быть опасным.

Вот несколько значков, которые кажутся наиболее знакомыми – символы любви, предупреждения, музыки и направления вверх / вперед:

Знакомые метафоры из семейства иконок Phosphor Carbon

Стрелка является мощным символом, используемым для навигации:

Знаки Нью-Йоркского метрополитена (Источник: Capture of an original copy of NYC Transit Authority Graphic Standards Manual)

Наиболее успешные иконки легко понять не только группе людей, они универсальны для разных культур, возрастов и знаний. Изучите свою аудиторию и используйте метафоры и цвета, которые резонируют с ними.

Помните, что отдельная иконка может быть не самым понятным решением, если представляемая идея слишком абстрактна. В этом случае добавьте к иконке текстовую метку или найдите альтернативу.

Читабельность

Если у вас есть понятный символ, убедитесь, что он читабелен.

Иконки в мобильном приложении Amtrak

Сложно разглядеть иконку Station в приложении Amtrak (первая строка), потому что ее детали слишком мелкие.

Приложение Transit имеет похожую проблему. Их значок папки с зажимом для бумаг похож на пятно, потому что пространство между папкой и зажимом слишком мало:

Иконки в мобильном приложении Transit

Небольшая корректировка значительно улучшит иконки:

Улучшенная иконка

При работе с несколькими фигурами оставляйте достаточно места между ними. Обилие тонких штрихов делает иконку перегруженной и трудной для чтения.

Google Maps отлично справился с задачей – иконки удобочитаемы при очень маленьком размере:

Иконки Google Map

Выравнивание

Чтобы убедиться, что каждый значок выглядит сбалансированным, выровняйте его элементы оптически.

Хотя в этой иконке “Play”, треугольник расположен в центре круга, нашим глазам он кажется смещенным. Широкая часть треугольника кажется «тяжелее», чем точка, и смещенной влево.

Точно так же, как художники-шрифтовики точно настраивают шрифты для создания оптической иллюзии баланса (обратите внимание на смещенные точки на «i» и «j» и на выступ буквы «O»)

Дизайнеры иконок делают аналогичные корректировки, чтобы сбалансировать иконку. Давайте немного сдвинем элементы, чтобы исправить приведенный выше пример:

Так лучше.

Вывод: не доверяйте цифрам, используйте глаза, чтобы проверить свою работу.

Краткость

Идея, выраженная в нескольких словах, кажется эффективной и элегантной.

Обучение других тому, что вы знаете, укрепляет ваше собственное понимание предмета.

Как сказал Роберт Хайнлайн:

Когда один преподаёт, двое учатся.

Прекрасно.

Material Design довольно хорошо иллюстрирует краткость в своем системном руководстве по иконкам. Вместо того чтобы говорить:

Чрезмерно сложная иконка корабля (Источник: Material)

Скажите проще:

Лаконичная иконка корабля (Источник: Material)

Краткость подходит для дизайна иконок, так как зачастую мы работаем с небольшими холстами. Не используйте в иконках больше деталей, чем нужно.

Стремление к уменьшению и упрощению в интерфейсах подчеркивает смысл и освобождает место для контента. Иконки Telegram лаконичные и приятные:

Иконки Telegram

Иногда иконки интерфейса приобретают более иллюстративный стиль. Иконки Yelp – это восхитительные изображения популярных продуктов питания. Креветка в иконке тайской кухни изысканна:

Иконки Yelp от Scott Tusk

В случае иконок приложений, представляющих программы, можно добавить больше глубины и цвета. Поскольку зрители понимают их контекст на мобильных домашних экранах, в доках и магазинах приложений, иконки могут быть более выразительными.

Иконки приложений Apple

Последовательность

Чтобы достичь гармонии в семействе иконок, соблюдайте одни и те же стилистические правила.

До iOS 13 иконки Apple имели всевозможные штрихи, заливки и размеры:

Иконки Apple в меню быстрых действий до iOS 13

Любая иконка имеет визуальный вес, определяемый такими параметрами, как заливка, толщина обводки, размер и форма. Чтобы добиться согласованности и последовательности эти параметры должны быть одинаковыми для всего набора иконок.

Apple недавно выпустила  введение в SF Symbols, впечатляющее дополнение к шрифту San Francisco. SF Symbols охватывает графический стиль иконок в 9 весах и 3 масштабах (возможно, немного сложное, но дотошное руководство). Из-за этого иконки кажутся более гармоничными.

Поддержание согласованности – непростая задача для большого семейства иконок, особенно создаваемых несколькими дизайнерами. Очень важно иметь четкие принципы и правила, которым нужно следовать.

Набор иконок Phosphor, проектированный автором этой статьи и созданный ее супругом, содержит более 700 последовательных иконок. Хотя каждая из них имеет различную форму, они имеют одинаковый вес и хорошо смотрятся вместе:

Подмножество семейства иконок Phosphor Carbon

Индивидуальность

Каждый набор иконок имеет вкус. Что делает его уникальным? Что он говорит о бренде? Какое настроение он создает?

Иконки Waze

Интерфейс Waze во многом зависит от иконок. Эти красочные, лаконичные иконки говорят: «Мы причудливы!»

Иконки Twitter легкие и четкие:

Иконки Twitter

Иконки Sketch утонченные и воздушные:

Иконки Sketch от Janik Baumgartner

Freemojis очень милые:

Freemojis от Streamline

Наборы иконок для Android предназначены для широкого спектра настроений тем домашнего экрана. Ниже представлены абстрактный, пиксельный, пузырьковый и неоновый стили:

Сверху вниз, слева направо: iJUK, PixBit, Crayon, Linebit

Простота использования

Создание набора иконок не заканчивается, когда вы нарисуете иконки. Требуется их дальнейшее тестирование. Нужно, чтобы было легко создавать новые иконки, чтобы дизайнеры могли использовать их в своих проектах (для экрана, печати и т. д.), а разработчики – кодить их.

Качественный набор иконок организован, хорошо задокументирован и проверен в контексте. Хорошо, если он поддерживается специальными инструментами, такими как менеджер иконок.

Организованный

Содержите главный файл в чистоте, правильно называйте свои активы и размещайте их так, чтобы их было легко найти. Рассмотрим лучший способ категоризации. В алфавитном порядке? По размеру? По типу?

Sketch-файл Nucleo, упорядоченный по типу

Хорошо задокументированный

Сформулируйте основные принципы семейства иконок:

Примеры принципов семейства иконок Phosphor:

  • Понятность. В первую очередь ясно выражайте идеи. Сделайте иконку узнаваемой и читабельной. Никогда не жертвуйте ясностью значения иконки.
  • Краткость. Используйте как можно меньше деталей
    . Стиль Phosphor направлен на упрощение. Будьте краткими и учитывайте каждый штрих, чтобы передать суть того, что представлено.
  • Характер. Будьте причудливым. Экономно добавляйте уникальные детали, чтобы оживить иконки и не быть слишком строгим.

Перечислите технические правила:

Примеры технических правил семейства иконок Phosphor:

  • Используйте холст 48x48px
  • Используйте centered stroke 1.5px
  • Используйте закругленные концы
  • Используйте сплошные линии, за исключением случаев, когда ломаные сегменты полезны для понимания
  • Используйте прямые сегменты, идеальные изгибы и приращение угла 15° там, где это возможно
  • При необходимости отрегулируйте кривые, чтобы следовать принципам дизайна
  • Используйте, по возможности, приращения целых, четных чисел; уменьшите до 1px и 0. 5px при необходимости
  • Используйте следующие контуры фигур: 28x28px круг, 25x25px квадрат, 28x22px ландшафтная ориентация, 22x28px портретная ориентация
  • Keep a 6px thick trim area

Проведите их итерацию и сделайте документацию общедоступной, если хотите:

Проверенный

Проверьте последовательность. Убедитесь, что иконки работают в контексте, в соответствующих размерах. Убедитесь, что они гармонично сочетаются с визуальной системой.

Полезно разместить иконки рядом друг с другом, чтобы проверить принципы, изложенные выше. Принципы ясности, читабельности, выравнивания, краткости, последовательности и индивидуальности:

Тестовые листы, используемые в Phosphor

Специальные инструменты

Наконец, если у вас есть ресурсы, создайте инструменты, облегчающие использование иконок.

Material делает иконки легко доступными с помощью собственной библиотеки иконок. Найдите нужную иконку и загрузите разные стили («темы»), цвета и размеры в выбранном вами формате файла:

Простая в использовании библиотека иконок Material

Набор иконок – это живое существо. Дайте ему любовь и инструменты, необходимые для успеха и роста.

Ресурсы

Библиотеки иконок

  • Feather – великолепный набор из более 200 контурных иконок, которые хорошо масштабируются
  • Material system icons – свыше тысячи утилитарных иконок для интерфейса в 5 стилях
  • Nucleo – набор из примерно 30 тысяч иконок в 3 стилях: контурный, плоский / цветной и глиф
  • Streamline – набор более 30 тысяч красиво нарисованных иконок в 3 весах

Агрегаторы иконок

  • Noun Project – отличный способ поиска вдохновения в стилях и метафорах

Менеджеры иконок

  • С помощью приложения Nucleo, вы можете импортировать наборы иконок, просматривать, экспортировать и перетаскивать их в нужные инструменты дизайна.

18 Программы для создания иконок

18 Программы для создания иконок — Windows
  1. Windows
  2. Дизайн и фотографии

Создайте иконки и значки для вашего компьютера или веб-сайта или превратите изображения в значки с помощью этих программ для создания иконок на Windows

Профессиональный инструмент для создания иконок

Самый быстрый и самый легкий способ создания иконок

Найдите все значки на жестком диске

Все иконки в пределах вашей досягаемости

Создайте свои собственные иконки для приложений

Легко создавать иконки, основанные на любое изображение

Извлечение иконок из любого приложения

Преобразовать любое изображение в икону привлекательным

Создавайте иконки, перетаскивая изображения в окно программы

Меняйте внешний вид иконок на вашем компьютере

Создание иконки для Windows и Mac может быть очень интересно

Редактор, специализирующихся на создании иконок

Создавайте быстро и легко свои собственные смайлики

Проектирование и создание наиболее оригинальный флэш-кнопки для вашего веб-

Создавайте меню и кнопки для вашего сайта

Блестящий инструмент пакет для создания ваших собственных иконок

Создавать, конвертировать, управлять и делиться иконки для любой платформы

Создавать значки и курсоры для Windows XP

Ok Мы используем собственные и сторонние файлы cookie для рекламы, доступа, аналитики и социальных сетей. Любое действие, кроме блокирования файлов cookie, а также и запрос услуг, связанные с файлами cookie, заключают соглашение для установки и использования данных файлов. Прочитайте нашу Политике Конфиденциальности.

Создание или создание значков с изображения или извлечение изображения из значка 2022

Quick Any2Ico — это крошечное портативное бесплатное программное обеспечение для создания и конвертации значков, которое позволяет создавать файлы значков ICO для ваших программ, веб-сайтов или любых других целей, а также извлекать изображения из файлов ресурсов значков. Он работает очень эффективно и полностью настраивается. Он имеет как командную строку, так и графический пользовательский интерфейс, и даже может автоматически устанавливать ваше изображение в соответствии с квадратным файлом значка.

Быстрый Any2Ico Создатель и конвертер значков

В программе есть два параметра

  1. Convert From Любой файл или папка
  2. Извлечь из любого файла или папки

Первый означает, что он создаст файл значков из любого указанного файла графического изображения. Второй вариант означает, что он будет извлекать изображения или значки из данного DLL-файла.

Создать значок из файла изображения

Прежде всего, вам нужно выбрать исходное изображение; вы можете либо выбрать его на своем компьютере, либо извлечь его из некоторого двоичного ресурса. Помните, что если вы извлекаете из двоичного источника, вам нужно ввести индекс значка.

Второй шаг — выбор целевого файла и его формат. Вы можете сохранить файл в ICO, а также в формате PNG. Оба формата конвертируются очень эффективно и правильно.

На третьем этапе вам нужно выбрать размер и некоторые другие параметры. Вы можете сохранить ICO-файл в следующих размерах:

  • 16 × 16
  • 24 × 24
  • 32 × 32
  • 48 × 48
  • 64 × 64
  • 72 × 72
  • 96 × 96
  • 128 × 128
  • 256 × 256
  • 512 × 512

Но если вы сохраните его как PNG, тогда наибольший размер будет автоматически сохранен. Quick Any2Ico предлагает сжатие PNG больших форматов, чтобы уменьшить размер файлов ICO. Вы можете включить эту опцию во время преобразования, чтобы генерировать ICO-файлы с наименьшим возможным размером.

Затем происходит автоматическое редактирование программы программой. Если выбранное изображение не соответствует квадрату (значки всегда квадратные), программа может автоматически их квадратировать перед преобразованием.

В этой функции вы получите три варианта:

  1. Центр : выбранный файл будет центрирован и затем преобразуется.
  2. Обрезка : выбранный файл будет обрезан до квадрата, и есть тенденция потерять часть изображения.
  3. Stretch : изображение будет растянуто до квадрат, не теряя при этом его части.

После того, как вы выбрали все эти параметры, вам нужно нажать кнопку «Преобразовать это», и через небольшую секунду ICO-файл будет сохранен в выбранном месте. Программа очень проста в использовании и управлении. Пользовательский интерфейс очень прост для понимания, и все функции прекрасно вписаны в него. Вы даже можете использовать программу из командной строки; вы можете знать команды с веб-сайта программы.

Извлечь изображения или значки из DLL-файла

Как упоминалось ранее, его инструмент может помочь вам в извлечении значков из DLL-файла. Вы можете сделать одно из двух следующих действий:

  1. Создавать отдельные файлы значков для всех файлов, содержащихся в DLL-файле (это было бы пустой тратой времени, поскольку вы можете выбрать значок, щелкнув правой кнопкой мыши папку, значок которой вы хотите изменить, выбрать свойства, а затем выбрать Изменить значок.)
  2. Создать файлы изображений в формате PNG для значка, выбранного в файле DLL.

В целом, программное обеспечение полезно, и это было больше, чем я ожидал в 230 KBs. Небольшая функция автоматизации делает процесс создания значков легким.

Нажмите здесь , чтобы загрузить Quick Any2Ico.

Создание иконок для сайта на заказ в Томске — 11866 фрилансеров,

Юлия оставилa отзыв

Мне понравился специалист. Сделала все быстро и качественно. На следующий день спокойно сделала правки. Буду и дальше работать с Татьяной🌸

24 октября 2021 · Томск

Графический дизайн

Евгения оставилa отзыв

Пять с плюсом

Отличный специалист , разработал чек лист для нашей компании . Работу выполнил быстро , профессионально и в согласованные сроки . Рекомендую 👍

23 октября 2019 · Томск

Графический дизайн

Магомед оставил отзыв

Пять с плюсом

Спасибо Вам огромное за Ваше творчество! Огромная благодарность от меня и моих близких.

30 декабря 2021 · Томск

Графический дизайн

Наталия оставилa отзыв

Пять с плюсом

Я очень довольна логотипом, который разработала Диана для нашего коллектива. Работа была выполнена очень быстро и качественно. Диана с полуслова поняла все наши пожелания. Всем рекомендую этого талантливого специалиста!!!!

27 сентября 2021 · Томск

Разработка логотипа

Илья Камчатский Край

Пять с плюсом

Очень1хороший1специалист. Не1оставит1вас1с1вашей1проблеммой1на1едине.Работа1выполненна1аперативно1и1вточный1срок.

4 февраля 2022 · Томск

Дизайн листовок

Кристина оставилa отзыв

Ответственная девушка, прислушивается к рекомендациям.

17 февраля 2020 · Томск

Разработка логотипа

Татьяна оставилa отзыв

Пять с плюсом

Спасибо Алсу за работу! Быстро поняла задачу, выполнила очень оперативно. Отдельно отмечу, что девушка доброжелательная и дружелюбная. Однозначно рекомендую, как классного специалиста!

22 сентября 2021 · Томск

Создание иконок

Владислав Сергеевич оставил отзыв

Пять с плюсом

Сделала идеально иконки для сторис в Инстаграме, отрисовала все на 5++++++, все время прислушивалась ко всем моим пожеланиям, все исправляла, ЛЮБЛЮ!!😍🥰

18 марта 2021 · Томск

Создание иконок

Юлия оставилa отзыв

Пять с плюсом

Все понравилось! Спасибо большое Яна!

25 апреля 2021 · Томск

Создание иконок

Красивые значки для инфографики [101 иконка и советы Visme]

Создание и использование инфографики — это не сложно. Самое важное в этом процессе — найти грань между объемом информации и ее визуальным выражением. Лучше всего с поставленной задачей вам помогут удачно подобранные иконки для презентаций и красивые значки. Вам будет легко и удобно их использовать в различных областях вашей деятельности.

Иконки — это идеальный способ визуального представления текста. Эти инструменты инфографики минималистичны, но при этом вмещают весь объем информации, необходимый пользователю.

Чтобы помочь вам продуктивнее использовать иконки в вашей инфографике, мы написали 8 полезных советов от Visme. Что же нужно сделать:

  1. Визаулизировать текст.
  2. Оформить диаграммы и графики.
  3. Создать списки.
  4. Добавить бэкграунд.
  5. Оформить заголовок.
  6. Придерживайтесь единого стиля.
  7. Подобрать цветовую палитру.
  8. Использовать иконки нужного размера.

Давайте узнаем больше!

 

1 Визаулизировать текст.

Хорошая инфографика — это не обилие текста. Это идеальный союз слов и визуальных элементов. В вашем арсенале диаграммы, фотографии, формы и фигуры, красивые значки, иконки для презентаций, и другие инструменты.

Взгляните на пример ниже.

Над каждым фрагментом текста есть соответствующая иконка. Дизайн иконки делает ее  легко узнаваемой, интересной и визуально привлекательной.

Убедитесь, что вы всегда используете значки, соответствующие тексту. Это важно, чтобы ваша аудитория могла сразу понять, о чем идет речь в каждом пункте или разделе.

 

2 Оформить диаграммы и графики.

Вам не обязательно использовать сложные названия для обозначения строк и столбцов в диаграмме. Вместо этого вы можете подобрать подходящие значки, сохранив при этом контекст. Вы также можете их использовать, чтобы подчеркнуть ярлыки или названия и сделать их более читабельными и понятными с первого взгляда.

В следующем примере мы используем контурные значки. Визуализация помогает моментально определить, что означает каждый из фрагментов этой круговой диаграммы.

Вы также можете использовать иконки для презентаций в массивах и пиктограммах, для отображения чисел и можете даже придумать способы полностью заменить тексты значками.

Будьте осторожны! Обязательно убедитесь, что значки, которые вы используете, легко понять и они соответствуют по смыслу. В противном случае может возникнуть путаница.

 

3 Создать списки.

Замените числа или буллеты (точечные маркеры) в своих списках значками, чтобы общаться более эффективно.Например, вместо того, чтобы записывать шаги по развитию онлайн-бизнеса или сообщать о преимуществах питьевой воды в привычном формате списка, вы можете использовать иконки.

Вот пример того, как это может выглядеть на практике.

Часто инфографика носит исключительно информативный характер и лучше всего работает в виде списка. В таких случаях действительно могут пригодиться иконки для инфографики. Они помогут обеспечить баланс между вашим контентом и визуальными элементами.

Посмотрите набор иконок Visme. Вы обязательно найдете множество красивых значков, которые идеально подойдут к теме вашей инфографики и смогут визуально представить каждый пункт в вашем списке.

 

4 Добавить бэкграунд.

Есть хороший способ внести немного разнообразия. Используйте фон. Это может быть форма, контур, фотография с наложением цвета или любая другая идея. Не бойтесь проявить творческий подход, но не забывайте об основной цели инфографики. Иконка должна быть информативной и понятной. Избегайте излишеств и нагромождения.

Вот хороший пример того, как можно использовать фон, чтобы выделить иконки инфографики.

В приведенном выше примере мы создали эффект тени путем наложения одинаковых фигур друг на друга. Одна из фигур расположена немного выше другой, чтобы получить желаемый shadow effect. Использовать подобные иконки для презентаций или на персональном сайте одинаково эффективно.

Вы можете выбрать шаблон инфографики, который мы рассмотрели выше, но можно пойти дальше. У нас для вас много идей! Например, вы можете выбрать Grid Option (Сетку), доступную на панели инструментов Visme. Она поможет настроить ваш дизайн инфографики и сохранять одинаковые интервалы в нем.

 

Вы также можете использовать значки в заголовках, чтобы проиллюстрировать основную концепцию вашей идеи и выгодно объединить текст с инфографикой. Это особенно полезно, если вы собираетесь размещать информацию в социальных сетях или на других каналах. Там, где люди быстро пролистывают контент, очень важна узнаваемость. Такой подход обращает на вас внимание и максимально быстро сообщает пользователю, о чем идет речь.

Посмотрите на шаблон приведенный ниже. Во время пандемии Covid-19 очень важно беречь здоровье и соблюдать социальную дистанцию. Этот пример посвящен забавным идеям о том, чем можно заняться, не выходя на улицу.

Шахматная фигура в заголовке помогает привлечь внимание и быстро предоставить информацию о том, что пользователи могут ожидать от этой инфографики.

Вы даже можете создать собственный фоновый узор со значками, изменив их непрозрачность. Также можно использовать несколько изображений рядом с заголовком. Экспериментируйте!

 

6 Придерживайтесь единого стиля.

Чтобы обеспечить целостность и профессиональный вид вашему дизайну, обратите  особое внимание на этот совет. Соблюдайте единый стиль иконок в вашем проекте.

Соблюдайте контуры и толщину линий одинаково для всех иконок. Если вы выбрали объемный дизайн, придерживайтесь его. Используете тени — сохраняйте их в каждом элементе инфографики. Единство стиля делает ваш проект эстетически привлекательным. Никогда не упускайте это из виду.

Шаблон инфографики, который мы видим ниже — отличный пример того как применять иконки в проекте. Черные контурные значки с линиями одинаковой толщины и насыщенности. Желтая форма на фоне каждого значка используется в качестве акцента. Ничего лишнего.

Конечно, если вы используете только один значок в инфографике, очевидно, что этот совет не так важен для вас. Но если вам нужен целый набор иконок (например, в библиотеке Visme более 10 000 векторных значков) вам необходимо убедиться, что вы сохраняете единство стиля во всем.

Visme предлагает четыре различных стиля: контурные значки, плоские изображения, цветные иконки и isometric (изометрические изображения). Это означает, что если вы выберете цветной значок для своего первого инфографического блока, то остальные мы рекомендуем использовать в том же стиле.

 

7 Подберите свою цветовую палитру.

Всегда старайтесь чтобы цветовая схема иконок инфографики сочеталась с общей палитрой вашего проекта.  Если в проекте преобладают яркие цвета, не используйте приглушенные цвета для значков. Они будут незаметны на общем фоне и не смогут выполнять свою основную функцию.

Взгляните на этот шаблон ниже и оцените, как все безупречно сочетаются цвета в дизайне.

К счастью, когда вы используете Visme для создания своей инфографики, каждый из  значков вы можете редактировать в соответствии с цветами вашего бренда или цветовой схемой инфографики.

Вы можете изменить любую деталь, как посчитаете нужным. Но старайтесь придерживаться цветовой схемы из 2-3 оттенков.

 

8 Использовать иконки нужного размера.

Когда вы убедитесь, что ваши значки инфографики имеют одинаковый стиль и одинаковую цветовую палитру, есть еще одна вещь, на которую следует обратить внимание. Это — размер значков.

Чтобы создать гармоничный дизайн инфографики, все элементы определенных категорий должны иметь одинаковый размер. Это касается не только вашего текстового контента, но и визуализации данных.

Наверное, вы уже слышали о принципах визуальной иерархии, когда используются разные размеры заголовков , подзаголовков и основного текста.То же самое и с инфографикой.

Посмотрите на этот шаблон, чтобы понять о чем речь.

Каждый значок заключен в круг. При этом сохраняется одинаковую форма элементов для поддержания баланса в этом дизайне.

Иногда бывает сложно достичь абсолютной точности и соответствия размеров изображений. Особенно если вы используете различные фигуры и формы. Например значок инстаграм и значок карандаша явно имеют разный размер. В таком случае важно обозначать максимальную высоту и ширину, которые вы используете.

 

Начните использовать иконки для инфографики в своих проектах уже сегодня.

Вы готовы приступить к созданию потрясающей инфографики, полной иконок?Хотите создать идеальную визуализацию вашего контента? Теперь, когда вы знаете, как лучше всего использовать значки в своей инфографике, вы можете приступить к работе.

Найдите идеальный шаблон инфографики уже сейчас! Выберите пример, который вдохновит вас на новый проект, и поразите всех своим необыкновенным дизайном.

Создание иконок сайтов для iOS и Android

iOS, Дизайн

Многие сайты имеют favicons для закладок. А что если сайт добавили на «рабочий стол» в IPhone? Favicons могут использоваться сайтами и веб приложениями.

Представляем Вам небольшую инструкцию как можно установить favicons для устройств на базе IOS и Android.

iOS Размеры иконки

Различные устройства  Apple имеют различные разрешения, что означает необходимость создавать разные размеры иконок. Идеально для каждого разрешения адаптировать иконку.

Как Вы возможно заметили, что retina иконки в 2 раза больше предыдущих разрешений. Это из-за того, что retina экраны имеют двойную плотность пикселей. То есть для заполнения того же пространства 57х57рх нужно отрисовать 114х114рх.

Совет: помните, что чем меньше иконка, тем меньше деталей необходимо отрисовать, т.к. их будет видно хуже.

Установка иконок

Если уже устанавливали иконки для сайта, то знаете что это элементарно. просто добавить одну строчку кода в заголовок HTML с ссылками на .ico или .png картинки.

<link rel="icon" href="favicon.ico" type="image/x-icon"/>

Для добавления iOS иконок всё аналогично, просто другой синтаксис. Конечно, каждую иконку нужно прописать отдельно.

Чтобы iOS устройство распознало иконку как favicon необходимо 2 вещи. Сперва, «rel» должно быть прописано как apple-touch-icon, а потом необходимо, что размер был в стиле 57х57. Ниже пример как это должно быть.

<link rel="apple-touch-icon" href="apple-icon-57x57.png" />

<link rel="apple-touch-icon" href="apple-icon-72x72.png" />

<link rel="apple-touch-icon" href="apple-icon-114x114.png" />

<link rel="apple-touch-icon" href="apple-icon-144x144.png" />

Специальные эффекты

Надеюсь, Вы в курсе, что все iOS иконки имеют закруглённые края, небольшую тень и блики. Это делается Apple автоматически, не стоит беспокоится и добавлять это самостоятельно. Делайте иконки квадратными

Для того, чтобы убрать автоматическую обработку необходимо это прописать в «rel»:

<link rel=»apple-touch-icon-precomposed» sizes=»114×114″ href=»apple-icon-114×114-precomposed. png» />

 Android и остальные устройства

Favicons для Apple подходят так же для: Blackberry v6.0 и выше, Android 2.2 и выше. Согласитесь, что это приятно? Не нужно создавать версия для каждого из устройств на Android  и  Blackberry, а так же всех остальных.

Design tips

Несколько моментов, которые следует держать в голове, когда придумываете favicons. Во-первых,  Apple всегда самостоятельно добавляет определённые эффекты самостоятельно: тени, скруглённые края и глянец. Советую при разработке учитывать это и анализировать как иконка будет выглядеть с такими эффектами.

Так как прийдётся делать иконки в разных размерах, то отрисовывайте их в векторе — будет значительно проще экспортировать в разные размеры. Начинайте работу с большего размера — проще уменьшать размер, чем увеличивать.

Иконки для вдохновления

Вот пример различных крутых иконок, которые я нашёл на Dribbble. Надеюсь они вдохновят на крутой креатив.

Мне очень нравится набор цветов, использованный с часами. Они хорошо смотрятся с flat дизайном.

Это не типичная flat иконка, которые мы видим сейчас, но она всё рано выглядит круто и забавно.

Здесь очень круто работают с тенями. Серый цвет хорошо смотрится рядом с голубым.

Ещё одна иконка с мега тенями. Радуга смотрится особенно круто. Градиент тоже хорош.

Ещё одна не flat иконка с градиентами и тенями, используемые в небольших количествах.

Цветы и трава выглядит очень реалистичными.

Выбор цветов просто фантастичен — режко можно увидеть чёрный и красный цвета вместе. Так что хорошо смотрятся горы: как будто они реально вырезаны из бумаги.

Навигация по публикации
↑ Наверх

Создание иконок для сайта онлайн-редактором | Блог Владимира Шишкова

Приветствую друзья. В данной статье мы с Вами поговорим о том, как просто создавать различные иконки с ра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, что собственно и следовало сделать. Теперь данную иконку можно вставлять на свои сайт и наслаждаться сделанной работой. Как мы видим, что данный способ создания иконки для сайта очень простой. При этом качество иконки остается очень хорошим.

Буду рад Вашим вопросам и комментариям

Успехов Вам
С уважением Владимир Шишков

7 принципов дизайна иконок. Создание качественного семейства иконок… | Хелена Чжан

Ясность, удобочитаемость, выравнивание, краткость, последовательность, индивидуальность, простота использования.
 Другие материалы из серии «Иконография»:• Основы иконографии• 5 способов создания значка настроек• Демистификация сеток и ключевых линий значков• Привязка к пикселям в дизайне значков• 3 классических семейства значков 

Для создания высококачественного семейства значков требуется вдумчивый подход, наметанный глаз, немного итераций и много практики. Ниже я проиллюстрирую отличительные черты качества с помощью 7 принципов и большого количества реальных примеров. Цель состоит в том, чтобы настроить вас на ключевые атрибуты отличного дизайна иконок.

Основная цель значка — быстро передать идею.

Значки на комбинации приборов Prius Prime (Источник: Руководство 2020 г.)

Какие символы вам понятны? Водители учатся этому со временем, но многие из них не интуитивно понятны; вам нужно руководство, чтобы расшифровать их значение.

Вот примерно как они складываются для меня:

Когда значок использует незнакомую метафору, ее трудно понять.«Напоминание» о ремне безопасности (третье слева) довольно буквальное, и мы можем быстро схватить его. «Предупредительный световой сигнал системы электроусилителя руля» (крайний справа) гораздо более туманный.

Некоторые из самых непонятных значков, с которыми я сталкивался, находятся в приложении для фотографии VSCO. Можете ли вы догадаться, что они означают?

Значки в приложении VSCO

Слева направо эти навигационные значки представляют: Лента, Обнаружение, Студия, Профиль и Участники. Цена путаницы для VSCO невелика, так как требуется всего несколько нажатий, чтобы понять, что означает каждый значок.Стоимость проезда намного выше.

Со временем абстрактное может стать привычным при многократном использовании. Вот почему автомобильные контрольные сигналы стандартизированы; цель состоит в том, чтобы построить общее понимание. В 1984 году Сьюзен Каре было поручено создать значок для функциональной клавиши на клавиатурах Apple. Она пришла к этому абстрактному символу, который также встречается в скандинавских знаках достопримечательностей.

Значок команды в SF Pro

Значок команды стал классическим, представляя то, что мы теперь называем клавишей управления на клавиатурах Apple.Посмотрите, как Сьюзан Каре делится своими невероятными работами.

Сьюзен Кэр смогла изобретать, потому что не существовало стандарта. При создании значков подумайте, существует ли существующая метафора — например, шестеренка для настроек — или уместно изобрести колесо.

Вот еще несколько значков, которые со временем приобрели известность — символы любви/фаворита, предупреждения, музыки и направления вверх/вперед:

Знакомые метафоры из семейства значков Phosphor Carbon

Стрелка — простой, но мощный символ, используемый в поиске пути:

Знак метро Нью-Йорка (Источник: Руководство по стандартам)

В наиболее успешных случаях значки не только просты для понимания одной группой людей, но и универсальны для разных культур, возрастов и слоев общества.Подумайте о своей аудитории и используйте метафоры и цвета, которые резонируют с ней.

Получив понятный символ, убедитесь, что он читаем.

Значки в мобильном приложении Amtrak

Трудно разобрать значок станции приложения Amtrak выше (первый ряд), потому что детали слишком мелкие.

Аналогичная проблема с приложением Transit . Их значок буфера обмена читается как капля, потому что расстояние между доской и зажимом слишком мало:

Иконки в мобильном приложении Transit

Небольшая корректировка дает большое улучшение:

Скорректированный значок буфера обмена

При работе с несколькими фигурами оставляйте достаточно места между ними. их.Более тонкие штрихи и их большее количество сделают иконку более занятой и трудной для чтения.

Карты Google отлично справляются со своими значками общественного транспорта — очень удобочитаемы при очень маленьком размере:

Значки Карт Google

Чтобы убедиться, что каждый значок кажется сбалансированным, выровняйте его элементы оптически.

Иконка несбалансированной игры

На этой иконке игры, хотя треугольник метрически расположен в центре круга, наши глаза считывают его как несбалансированный. Более широкая часть треугольника кажется «тяжелее», чем вершина, и наклоняет ее влево.

Точно так же, как типографы делают точную настройку, чтобы создать оптическую иллюзию баланса в шрифте (обратите внимание на смещенные от центра точки на буквах «i» и «j» и на «O») —

— иконографы делают аналогичные настройки чтобы сбалансировать значок. Чтобы исправить приведенный выше пример, немного сдвиньте элементы:

Значок сбалансированной игры

Лучше.

Урок таков: не просто доверяйте цифрам; используйте свой глаз, чтобы проверить свою работу.

Идея, хорошо выраженная всего в нескольких словах, кажется эффектной и элегантной. Возьмите это утверждение:

Преподавание того, что вы знаете, укрепляет ваше собственное понимание предмета.

Более кратко можно сказать (от Роберта Хайнлайна):

Когда один учит, двое учатся.

Красиво.

Материал довольно хорошо иллюстрирует краткость их системных значков. Вместо того, чтобы говорить:

Чрезмерно сложная иконка лодки (Источник: Материал)

Просто скажите:

Краткая иконка лодки (Источник: Материал)

Краткость подходит для дизайна иконок, так как мы часто работаем на небольших холстах.Используйте правильное количество деталей для ваших значков и не используйте больше, чем вам нужно.

В пользовательских интерфейсах упрощенный стиль передает суть и уступает место содержанию. Значки Telegram короткие и приятные:

Значки Telegram

Иногда значки пользовательского интерфейса приобретают более иллюстративный стиль. Эти многоцветные значки Yelp — восхитительный способ отобразить популярные поисковые запросы о еде. Креветка на значке тайской кухни восхитительна:

значков Yelp от Скотта Туска

С значками приложений значков, которые представляют мобильные, планшетные и настольные приложения, правильное количество деталей может означать большую глубину и цвет.Поскольку зрители понимают их контекст на домашних экранах мобильных устройств, в доках и в магазинах приложений, значки могут лучше выражать бренд и продукт.

Значки приложений Apple для Procreate, Firefox и Netflix

Чтобы достичь гармонии в семействе значков, соблюдайте одни и те же стилистические правила.

До iOS 13, значки Apple имели всевозможные штрихи, заливки и размеры:

Значки с главного экрана Apple. Быстрые действия до iOS 13

Прищурьтесь на этот набор. Некоторые значки кажутся тяжелее других?

Любой значок имеет определенный визуальный вес , определяемый такими параметрами, как заливка, толщина обводки, размер и форма.Сохранение этих параметров одинаковыми в наборе обеспечивает согласованность.

Apple недавно скорректировала курс, представив символы SF, впечатляющий компаньон Сан-Франциско. SF Symbols включает в себя более графический стиль значков с 9 весами и 3 масштабами (возможно, немного сложным, но определенно тщательным). От значка к значку и между вариантами заливки и контура они кажутся гораздо более гармоничными.

Значки из Apple SF Symbols

Поддержание согласованности — непростая задача с большим семейством значков, особенно с участием нескольких авторов.Крайне важно иметь четкие принципы и правила, которым нужно следовать (и подчиняться).

Набор значков Phosphor , разработанный вашим покорным слугой и созданный моей второй половинкой, содержит более 700 значков, придерживаясь одних и тех же общих рекомендаций и тщательно тестируя каждый значок. Хотя каждый из них имеет разную форму, они имеют одинаковый вес и хорошо сочетаются друг с другом:

Подмножество семейства иконок Phosphor Carbon

У каждого набора иконок есть аромат. Что делает его уникальным? Что он говорит о бренде? Какое настроение он создает?

Иконки Waze

Любимый интерфейс Waze во многом зависит от их иконографии.Эти красочные массивные значки говорят: «Мы причудливые!»

Иконки Twitter мягкие, легкие и четкие:

Иконки Twitter

Иконки Sketch нежные и воздушные:

Иконки Sketch от Яника Баумгартнера

наборов значков для Android подходят для самых разных тем оформления главного экрана — вот абстрактный, пиксельный, пузырьковый и неоновый стиль:

Сверху вниз, слева направо: iJUK, PixBit, Crayon, Linebit

Набор значков не т сделано после того, как это было нарисовано до совершенства. Требуется дальнейшее тестирование и подготовка, чтобы участники могли легко создавать новые значки, дизайнеры могли использовать их в своих проектах (для экрана, печати и т. д.), а инженеры — кодировать их для производства.

Набор значков качества организован , хорошо задокументирован и протестирован в контексте. Приятно иметь: он поддерживается пользовательскими инструментами , такими как менеджер значков.

Организовано

Держите мастер-файл в чистоте, хорошо называйте свои активы и размещайте их так, чтобы их было легко найти.Рассмотрим лучший способ классификации. По алфавиту? По размеру? По типу?

Файл Nucleo Sketch, упорядоченный по типам на страницах

Хорошо документированный

Сформулируйте ключевые принципы семейства значков:

 Пример принципов семейства значков Phosphor (отсылка к тому, что мы рассмотрели выше):  • Ясность.  Будьте ясны в первую очередь.  Сделать значок узнаваемым и читаемым. Никогда не жертвуйте ясностью того, что представляет значок.  • Краткость. Используйте как можно меньше деталей.Стиль  Phosphor упрощен. Будьте лаконичны и преднамеренны в каждом штрихе, чтобы передать суть того, что изображается.  • Персонаж. Будьте причудливыми.  Аккуратно добавляйте уникальные детали, чтобы привнести немного тепла и игривости в то, что в противном случае могло бы показаться очень строгим. 

Перечислите технические правила:

 Примеры технических правил из семейства значков Phosphor:  Используйте холст  48 x 48 пикселей   Используйте  1,5 пикселя по центру обводки    0 с закругленными концами  Использовать  смежных штрихов , если ломаные сегменты не помогают понять смысл  Использовать  прямых сегментов, идеальных дуг и угловых приращений 15° , где это возможно  • При необходимости скорректировать кривые  для сохранения принципов проектирования  целое, четное числовое приращение  для измерений, где это возможно; сложите до 1px и . 5px при необходимости  Используйте следующие ключевые линии формы   : 28 x 28px кругов, 25 x 25px квадратов, 28 x 22px горизонтальных прямоугольников, 22 x 28px портретных прямоугольников  Сохраните  область обрезки толщиной 6px 

7 9000 их и, если хотите, сделайте документацию общедоступной:

Протестировано

Проверьте на согласованность. Убедитесь, что значки работают в контексте, в соответствующих размерах. Убедитесь, что они работают в гармонии с более крупной зрительной системой.

Размещение значков рядом друг с другом полезно для проверки наших принципов, изложенных выше — ясности, удобочитаемости, выравнивания, краткости, согласованности и индивидуальности:

Тестовые листы, используемые в процессе контроля качества Phosphor

Пользовательские инструменты

Наконец, если у вас есть ресурсы , создайте инструменты для облегчения использования значков.

Material делает свои значки легко доступными благодаря собственной библиотеке значков. Найдите тот, который вам нужен, и загрузите различные стили («темы»), цвета и размеры в предпочитаемом вами формате файла. Простая в использовании библиотека значков

Material

Font Awesome , хотя и не соответствует некоторым из вышеперечисленных принципов, сделала их значки невероятно простыми в использовании. Они предлагают различные методы работы со своими иконками: через свои библиотеки фреймворков, CDN, иконочный шрифт или необработанные SVG.Extra awesome — это общедоступный бэклог, где они делятся наиболее востребованными значками, тем, что находится в разработке, и тем, что недавно выпущено.

Таблица лидеров значков Font Awesome

Используемый набор значков — это живая вещь. Дайте ему любовь и инструменты, необходимые для успеха и роста.

Как создать иконку

С помощью Adobe Illustrator вы можете создать простую графику для использования в качестве значка в приложениях, веб-страницах, печатных материалах и т. д.

Нарисуй круг. Ищите пурпурное перекрестие, перетаскивая фигуру, чтобы сделать ее идеально круглой.

Дважды щелкните инструмент Масштаб.Мы сделали уменьшенную копию оригинального круга, чтобы создать форму пончика.

Выберите каждый круг и примените другой цвет заливки.

Выберите оба круга и в меню «Эффекты» поэкспериментируйте с «Втягиванием и раздуванием».Вы обнаружите, что можете создавать разнообразные значки в зависимости от ваших настроек.

Выберите эффект, который вам нравится; делаем клевер.

Мы добавили стержень с помощью инструмента «Дуга» и отрегулировали цвет и обводку.(Нажмите «Обводка» на панели «Свойства», чтобы получить доступ к дополнительным параметрам.)

В наши дни иконы повсюду. Теперь вы готовы создать целый набор — для праздников, бизнеса или любой другой тематики.

Более 20 руководств по созданию иконок в Adobe Illustrator

Пользовательские значки — отличный помощник в вашей дизайнерской библиотеке.В то время как вы можете найти множество великолепных значков по всему Интернету, ничто не сравнится с индивидуальным дизайном значков.

Если вы никогда раньше не создавали значки, бесплатные учебные пособия по Adobe Illustrator в этом обзоре помогут вам окунуться в создание значков. А если вам нужно освежить свои знания в области дизайна иконок, они помогут вам освоить некоторые новые приемы и приемы.

Если вы предпочитаете создавать свои значки в Photoshop, эта коллекция руководств для вас.

Дополнительные уроки по Illustrator:

Более 31 000 шаблонов Adobe Illustrator

Неограниченное количество загрузок: иллюстрации и векторные шаблоны, кисти, действия, логотипы, значки и многое другое!

Если перед вами стояла задача создать значок мобильного приложения, этот туториал будет вам полезен. Это видеоурок, полный практических советов по использованию форм, градиентов и обтравочных масок для создания привлекательной иконки для вашего мобильного приложения.

Если вы думали, как сделать свою собственную иконку для социальных сетей, этот урок будет вам полезен. Это пошаговое руководство покажет вам, как использовать простые фигуры, такие как эллипс и прямоугольник со скругленными углами, в сочетании с панелями выравнивания и обводки.

Ускорьте свой дизайнерский проект с помощью этих шаблонов значков умного дома.Включены различные векторные форматы и файл PNG для каждой иконки. Размеры PNG начинаются с 48×48 и доходят до 240×240.

Хотите узнать, как делать значки, связанные с космосом? В этом уроке вы получите пошаговое руководство по созданию шаттла, посадочного модуля, спутника и луны. Приготовьтесь создать невероятный набор иконок.

Как создать футбольный набор иконок

Если вам нужно знать, как сделать серию иконок на тему футбола, у нас есть для вас руководство. Этот урок представляет собой пошаговое руководство о том, как сделать обувь, игровое поле, свисток и мегафон.

В этом учебном пособии по значку батареи вы изучите композиционное построение, выравнивание формы и позиционирование сетки для Adobe Illustrator; и все это при создании своего первого значка батареи для питания всех ваших будущих дизайнерских проектов.

Сделайте свой следующий проект карты легким с помощью этого шаблона карты и навигации. Вы получите 80 иконок в различных векторных форматах и ​​файл PNG для каждой иконки.Файлы PNG имеют размер 256×256 или 512×512.

Готов попробовать сделать векторный револьвер? Что ж, этот урок вас охватил! Этот пошаговый мастер-класс проведет вас через процесс изготовления симпатичного револьвера.

Хотите поднять свои графические навыки до стратосферы? Этот видеоурок проведет вас через процесс манипулирования различными формами в космическом корабле-ракете. Вы готовы к взлету?

Пришло время раскачиваться в такт собственному барабану! В этом пошаговом руководстве вы создадите простую векторную иконку барабана с палочками. Пришло время раскачиваться!

Сэкономьте время на своем следующем векторном дизайн-проекте с помощью этих тонких плоских значков и пиктограмм. Вы получите заархивированный файл в редактируемом векторном формате и высококачественные файлы JPG для вложенных значков.

Хотите показать людям план дома вашей мечты? В этом пошаговом руководстве по векторному дизайну вы откроете двери и окна дома своей мечты. Не забудьте про дополнительные этажи!

Когда вам просто необходимо иметь свой собственный фирменный значок; ты должен сделать это сам! В этом пошаговом руководстве вы изучите построение композиции, выравнивание формы и позиционирование сетки; а также как сделать свой векторный значок приведения.

Сделайте свой собственный векторный блокнот на спирали с помощью учебника Тилы. Она шаг за шагом проведет вас через процесс создания блокнота на спирали, который вы сможете использовать в своем следующем дизайнерском проекте.

Сэкономьте время в следующий раз, когда вам понадобятся значки графического дизайна, загрузив этот шаблон. Он включает в себя 72 различных значка в форматах SVG и PNG. Значки SVG имеют размер 64x64px, а значки PNG — 512x512px.

У Apple одни из самых узнаваемых продуктов.В этом пошаговом руководстве вы создадите свои собственные векторные значки для iPad, iMac, Magic Mouse и планшета Wacom.

Если перед вами стояла задача создать значки для периферийных устройств компьютера, то этот туториал именно то, что вам нужно. В этой первой части серии руководств вы узнаете, как сделать значок мыши с помощью Adobe Illustrator.

Нужно сделать фирменный значок видимости? Вам повезло! В этом пошаговом руководстве вы узнаете, как сделать значок видимости, используя основные геометрические фигуры, инструменты и цвета.

Экономьте время на уборке с помощью этого шаблона, наполненного красочными значками очистки. Этот пакет включает 16 высококачественных цветных изображений в различных векторных форматах и ​​в формате PNG. Размер SVG — 128×128, а PNG — 512×512.

Хотите узнать, как сделать подробную иконку векторной карты? Вы находитесь в нужном месте, потому что в этом пошаговом руководстве вы узнаете, как использовать основные инструменты и эффекты, а также освоите эффекты преобразования и искажения.

В этом уроке вы научитесь создавать векторные иконки из привычных иконок текстового редактора.Вы узнаете, как создать все, от значка выравнивания до значка линейки.

Санта-Клаус приехал в город в образе хипстера-моголь-моголь! Узнайте, как создать эту векторную иконку, чтобы оживить праздничный сезон, с помощью этого пошагового руководства. Убедитесь, что вы не включаете бороду.

Фотокамеры настолько стали неотъемлемой частью нашей жизни, что мы никогда не выходим из дома без нее. В этом пошаговом руководстве вы узнаете, как сделать свой собственный векторный значок камеры.

Как создать набор значков для Хэллоуина

Готовы ли вы создать свои собственные жуткие значки на тему Хэллоуина? Тогда вам предстоит ужасное время, делая их с помощью этого пошагового руководства. Вы создадите свою собственную виселицу, гроб, жуткий глаз и собственный дом с привидениями.

Вы когда-нибудь хотели подарить кому-нибудь карту? Теперь вы можете! В этом пошаговом руководстве вы используете базовую теорию дизайна, композиционное построение, выравнивание фигур, позиционирование сетки и основные фигуры для создания прекрасного значка карты.

Как создать коллекцию движущихся значков

Всем нам знакома боль переезда. Но с этим пошаговым руководством вы не будете напрягать мышцы, чтобы создать векторную прихватку, движущуюся тележку, упакованные коробки и значки упакованных грузовиков.

Наука — это область изучения, ориентированная на детали. Создайте свои собственные подробные векторные значки научных чудес с помощью этого пошагового руководства, которое проведет вас через создание значков пробирок, микроскопа и контрольной лампы.

Уборка такая грязная работа. Но с этим уроком по очистке тематических векторных иконок вам не о чем будет беспокоиться, кроме сладкого запаха роз.

Создание пользовательских значков с нуля может показаться утомительным процессом, но на самом деле это интересный способ раскрыть свой творческий потенциал и добавить индивидуальности своим дизайнерским проектам. Используйте эти учебные пособия по Illustrator, чтобы овладеть навыками создания значков.

Создание пользовательских значков

Process Director поставляется со множеством стандартных значков, которые можно использовать для настройки значков, отображаемых для кнопок, объектов списка содержимого, результатов действий на временной шкале и т. д.Кроме того, вы можете создавать свои собственные значки по желанию для дальнейшей настройки интерфейса продукта. Пользовательские значки должны соответствовать следующим критериям для правильного отображения в Process Director:

  • Файл значка должен быть изображением в формате GIF и иметь размер 16x16 пикселей. Альфа-прозрачность для этих изображений GIF поддерживается.
  • Имена файлов значков должны использовать порядковые номера.Поэтому, если вы создали три пользовательских значка, имена файлов должны быть «1.gif», «2.gif» и «3.gif». Если значки не пронумерованы последовательно, любые отсутствующие номера будут отображаться в виде прерывистых изображений в интерфейсе Process Director. Это означает, что если вы удаляете пользовательский значок, все имена файлов значков должны быть перенумерованы, если последовательность нумерации нарушена удалением.
  • Файлы значков должны быть загружены в папку \%Installation Directory%\custom\icons вашей установки Process Director (например,g., C:\Program Files\BP Logix\Process Director\website\custom\icons ). В этот каталог следует помещать только файлы пользовательских значков.

После того, как вышеуказанные критерии соблюдены и изображения в формате GIF загружены в папку пользовательских изображений, необходимо перейти на страницу «Свойства» в разделе «Параметры установки» и установить для параметра «Количество пользовательских значков» значение, равное количеству значков. вы создали. Каждый раз, когда вы добавляете или удаляете значок, этот параметр необходимо сбрасывать на новое количество существующих значков.Если этого не сделать, то новая иконка, добавленная в систему, вообще не будет отображаться, а удаленная иконка будет отображаться как битое изображение.

После того, как вы загрузили и правильно настроили параметры пользовательских значков, ваши пользовательские значки будут отображаться в средстве выбора значков в разделе «Пользовательские значки» в нижней части вкладки «Старые встроенные значки».

Если вы заметили, что этот документ можно улучшить, мы будем рады услышать ваши предложения.Нажмите на кнопку ниже, чтобы отправить нам свой отзыв. Помните, однако, что не все проблемы можно решить с помощью документации. Итак, если у вас есть конкретный технический вопрос, отправьте запрос в службу поддержки.

 

Отправить отзыв в BP Logix

Как создавать иконки: учебные пособия и советы

Разработка эффективных значков — уникальная задача.Будь то один значок или набор значков для использования в пользовательском интерфейсе, элемент графического дизайна или отдельный значок приложения, даже опытные и уверенные в себе дизайнеры могут обнаружить, что создание значков расширяет их технические возможности в отличие от любой другой дисциплины дизайна.

Дизайн иконок часто требует, чтобы вы выражали сложные идеи на крошечном холсте, где пространство ограничено, поэтому он заставляет вас урезать все до минимума, сохраняя при этом ключевое сообщение или индивидуальность бренда, которые ему необходимы. Успешное выполнение этого является настоящей проблемой, но, к счастью, есть ряд полезных советов, которые используют дизайнеры иконок, которые действительно могут помочь любому создавать сильные значки более последовательно.

Используйте сетки

Создайте правильную основу дизайна значков, максимально используя сетки; это касается как фазы эскиза, так и цифровой работы, которую вы выполняете на экране. Возьмите альбом для рисования с сетками или найдите несколько готовых к печати шаблонов с точечной сеткой, которые помогут вам исследовать идеи значков, лучше контролируя баланс и структуру вашего дизайна.

Когда дело доходит до составления ваших цифровых значков, сетки и шаблоны значков могут помочь вам структурировать ваши проекты.Google предлагает бесплатный шаблон сетки дизайна значков для Adobe Illustrator на своем мини-сайте Material Design. Чтобы согласиться с этим, вот фантастическое руководство, из которого показано, как сделать одну из этих сеток дизайна иконок самостоятельно, а затем демонстрируется, насколько полезными они могут быть для работы: https://www. youtube.com/embed/iMPiXY_2pd4

.

Использование пиксельной сетки (например, включенной в шаблон дизайна значков Google) вместе с параметрами «Привязать к сетке» или «Привязать к пикселю» внутри Illustrator поможет убедиться, что ваши линии и фигуры лучше отображаются при меньших размерах.Линии и формы должны заполнять целые квадраты вашей пиксельной сетки, чтобы сохранить детализацию в масштабе. Вот видеоурок, который лучше объясняет важность пиксельных сеток: https://www.youtube.com/embed/KYpVtDj-xQs

.

Использовать простую геометрию

Значок должен представлять объект, действие или идею самым простым способом. Сложные детали и формы будут потеряны при меньших размерах, поэтому всегда рекомендуется структурировать все ваши значки с помощью основных геометрических фигур.

Чем меньше становится значок, тем проще должна быть общая геометрия. Чем меньше линий и форм вы можете использовать для представления одной и той же идеи, тем лучше. Марк Эдвардс мастерски показывает, как быстро фигуры можно превратить в простые значки за минимальное количество шагов; изучите его Icon Speed ​​Runs, чтобы узнать больше.

Сосредоточьтесь на согласованности

Успешный значок хорошо работает сам по себе, но он также должен быть хорошим командным игроком! Если вы разрабатываете набор иконок, между каждой иконкой, которую вы создаете, должна быть четкая визуальная связь; это означает придерживаться похожего символа, используя одинаковую ширину обводки и постоянный визуальный вес, выравнивание элементов и интервалы повсюду.Конечно, вы по-прежнему можете разнообразить свои значки, но наличие правил о том, насколько толстыми будут ваши линии, сколько цветов или тонов вы собираетесь использовать, насколько закругленными будут ваши углы и т. д. — все это поможет вам определить стиль, который можно перенести на несколько значков.

Великолепные значки также будут продолжением бренда или проекта, для которого они были разработаны, принимая во внимание существующие дизайнерские подсказки или идентичность бренда, чтобы значки не только соответствовали друг другу, но и более широкой экосистеме, которой они являются. используется в — этот момент особенно актуален, например, если вы разрабатываете сольную иконку или иконку приложения.

Профессиональный дизайнер Майкл Фларуп рассказывает нам о согласованности значков приложений в этом видео здесь: https://www.youtube.com/watch?v=F03eqjxTq1w https://www.youtube.com/embed/F03eqjxTq1w

Если сомневаетесь, будьте очевидны

Свести сложные идеи или действия к одному маленькому значку чрезвычайно сложно, особенно если вы пытаетесь создать что-то уникальное для всего остального, но чаще всего имеет смысл сразу перейти к наиболее очевидным стандартизированным символам или метафора, а не рисковать чем-то более уникальным и иметь более высокий потенциал запутать людей.

Конечно, как только вы освоитесь со своими способностями, у вас будет больше возможностей для изучения более абстрактных и творческих метафор, но никогда не расстраивайтесь из-за того, что вы прибегаете к стандартизированным символам, которые являются обычными, поскольку имеют что-то легко узнаваемое. почти всегда лучше, чем что-то более визуально интересное, но и более абстрактное.

Вместо этого вы можете сделать свои значки уникальными с помощью собственных украшений и визуального стиля; помните, что сам основной символ не обязательно должен быть полностью уникальным, и то, как вы закончите и украсите свою иконку, может быть тем, где вы напрягаете свои дизайнерские мускулы.

Размер с вашими глазами

Когда вы создаете набор значков, вы можете подумать, что все ваши значки должны быть одинаковой высоты и ширины, но это бывает редко, и на то есть веская причина. Вы хотите, чтобы холст ваших значков был одинаковым для всего набора, но то, сколько места визуально занимает значок, важнее, чем обеспечение более точной с математической точки зрения высоты и ширины. Конечно, вы хотите использовать как можно больше квадратного холста, но разные формы занимают больше места «визуально», чем другие.

Например, квадратный блок будет занимать больше места на холсте, чем круг, поэтому в своем наборе значков вы можете сделать квадратный блок немного меньше, чем ваш круг, без «ощущения» того, что они имеют разные размеры. Математически они не совпадают по размеру, но визуально будут выглядеть одинаково.

Чем более сложные фигуры и символы вы используете, тем больше вам придется экспериментировать с тем, как предметы располагаются на холсте. Если у вас есть тонкие фигуры или много пустого пространства, вы можете попытаться сделать их немного больше, чтобы они больше заполняли холст, тогда как более жирные и полные формы, возможно, нужно сделать немного меньше, чтобы они не доминировали. над другими иконками в наборе.Эта статья Бонни Кейт Вольф объясняет эту концепцию более подробно.

Та же концепция применяется при попытке разместить значок в центре холста. Визуальный вес вашего значка поможет вам решить, находится ли он идеально по центру или нет; например, если у вас есть что-то совершенно симметричное, оно должно располагаться в математическом центре, но если у вас есть что-то вроде стрелки, у которой вес с одной стороны больше, чем с другой, вам нужно найти способ оптически центрировать ее так, чтобы что он «чувствует» себя лучше, чем когда сидит по-настоящему по центру.

Получить вдохновение

Понимание того, что работает с дизайном значков, а что нет, — это то, что вы получаете со временем, но всегда полезно ознакомиться с популярными значками, чтобы понять, чего люди хотят от значка или набора значков. Вот моя тщательно подобранная коллекция высококачественных наборов иконок, которые, как мне кажется, являются отличным примером того, каким должен быть хороший набор иконок.

Если вам нужны другие примеры отличных значков, загляните в раздел «Значки» на Creative Market или продолжайте изучать мои личные фавориты в моей коллекции рекомендуемых значков.

Используйте правильные инструменты

Векторные значки являются универсальными. Если у вас есть векторный значок, вы сможете изменить размер графики без потери деталей. Это зависит от того, насколько хорошо был разработан значок в первую очередь и оптимизирован ли он для небольших размеров, но, как правило, создание векторной графики дает вам гораздо больше гибкости, когда дело доходит до работы со значками и их использования. Adobe Illustrator является отраслевым стандартом, но векторы можно создавать во многих других дизайнерских приложениях, включая Photoshop, Inkscape, Affinity Designer, Sketch и Figma.

Формат SVG очень популярен, поскольку он обеспечивает превосходную веб-совместимость, масштабирование и гибкость кода при сохранении очень легкого размера файла. Научившись создавать свои значки, чтобы их можно было экспортировать в виде файлов SVG, вы избавите себя от многих хлопот в долгосрочной перспективе. https://www.youtube.com/embed/_VYAeDIEjVE

Если вы хотите создать более детализированные, стилизованные или текстурированные значки для значков приложений и т. д., вам, как правило, придется пожертвовать простой векторной графикой и вместо этого искать значки, которые больше похожи на иллюстрацию или, возможно, с 3D-элементами с помощью обычных программ, таких как Cinema4D или Blender.Вот рабочий процесс создания значков для 3D-значков приложений для Mac, который может дать вам несколько полезных советов.

Курсы дизайна иконок

Если вы хотите серьезно заняться дизайном иконок, настоятельно рекомендуем вам пройти курс дизайна иконок. В Интернете есть несколько отличных курсов по дизайну иконок, которые дадут вам более подробное описание и объяснение всего процесса. Вот несколько курсов по дизайну иконок, которые я нашел, и которые, возможно, стоит посетить.


Intro to Icons
«Intro to Icons — это онлайн-курс с 30 динамичными видеороликами Мэтта Д. Смита». — Просмотр курса


Создайте единый набор значков
«Создайте собственный набор значков, который дополнит потребности и ощущение любого проекта. В этом коротком уроке дизайнер Адам Уиткрофт предлагает закулисный взгляд на создание целостного набора иконок, посвященных уличной тематике. “ — Посмотреть Курс


Создание пиктограмм с целью
«Этот 45-минутный урок с соучредителем Noun Project — краудсорсингового визуального словаря из более чем 150 000 значков — научит вас создавать собственный «KindSign» на основе вашей среды и убеждения. ” — Посмотреть Курс


Основы дизайна иконок
«На этом занятии вы познакомитесь с основами теории, техниками, а также некоторыми советами и рекомендациями по дизайну иконок. Обладая этими знаниями, вы сможете быстро создавать согласованные наборы иконок в разных стилях». — Просмотр курса


Создание иконок Pixel Perfect – правильный путь!
«Обширный курс, который научит вас создавать четкие значки. Неважно, только начинаете ли вы или уже знаете кое-что об иконках — этот курс для вас! Вы не только узнаете, что такое пиксель-идеальные значки, но и сможете попрактиковаться в создании трех значков, специально отобранных для охвата всех практических деталей, которые вам могут понадобиться.” — Просмотр курса

Поделитесь своими советами и рекомендациями

Если у вас есть собственные советы и рекомендации по дизайну значков, которыми вы хотели бы поделиться, мы также будем рады их услышать, если вы можете порекомендовать какие-либо другие замечательные ресурсы или курсы, идеально подходящие для приобретения или оттачивания навыков дизайна значков. , тогда, пожалуйста, поделитесь ими с нами в комментариях ниже!

Примите участие в нашем 10-дневном испытании

Хотите стать профессионалом WordPress?

Загрузите этот календарь испытаний и оставайтесь на пути к доминированию WordPress.

Скачать сейчас!

Попробуйте мои БЕСПЛАТНЫЕ товары: https://payhip. com/liammckay/ Дизайнер с любовью к красивым иконкам, текстурам, кистям и темам WordPress.

Посмотреть больше сообщений

5 простых способов добавить красивые значки в слайды PowerPoint

Мир летит так быстро. Нам, людям, нужны быстрые и простые способы обработки информации.

Именно это и делают иконки!

Значки предоставляют важные инструкции или описания посредством визуального представления.И крутая часть? Обычно это делается в виде одного изображения.

Подумайте об этом: все мы знаем, что круг с диагональной линией означает «нет». Мы также знаем, что корзина на веб-сайте означает покупку чего-либо. О, и не забудьте увеличительное стекло, указывающее на строку поиска.

Несмотря на кажущуюся крошечность, значки — это инновация для визуальной коммуникации. Они просты, они производят сильное впечатление и делают вашу презентацию потрясающей.

Итак, вот пять способов вставить значки в слайды PowerPoint:

5 способов вставить значки в слайды PowerPoint

Способ №1: простой способ .

Находясь в PowerPoint, нажмите кнопку со значком, и загрузится широкий спектр категорий.

С точки зрения дизайна они «нормальны» и выполнят свою работу. Но лично я предпочитаю немного «сексуальнее» (см. методы 2 и 3)!

В любом случае, выбрав значок, нажмите «Вставить» и выберите цвет значка. Все сделано.

Метод № 2: Интуитивный способ

Когда я открыл для себя этот метод, я был на седьмом небе от счастья.

Почему, спросите вы? Потому что мы можем создавать иконки из эмодзи!

Вот шаги:

  1. Вставьте текстовое поле в любом месте слайда.
  2. Если вы используете Windows 10, удерживайте клавишу Windows и клавишу точки (.), а если вы используете Mac, удерживайте нажатыми клавиши Command, Control и пробел.
  3. Выберите смайлик.
  4. Готово!

И если вас беспокоит отсутствие возможности редактирования, не беспокойтесь. Функции слияния фигур в PowerPoint помогут вам. Посмотрите видео, чтобы узнать больше!

Метод №3: Удивительный способ

Это наш основной метод, когда дело доходит до разработки слайдов для наших клиентов.Это гарантирует наличие самых лучших мер качества и оставляет много места для творчества.

Этот шаг включает поиск файлов значков SVG (масштабируемая векторная графика) и перенос их (а иногда и редактирование) на слайды PowerPoint. Это действительно так просто.

Значки SVG можно найти на таких веб-сайтах, как The Noun Project, IconMonstr и Flaticon.

Но имейте в виду: Получать значки из разных онлайн-ресурсов не так просто, как вы думаете.В большинстве случаев вам нужно либо указать дизайнера, либо заплатить за использование.

Метод № 4: Ручной способ

Этот метод включает создание пользовательских значков с помощью простых фигур PowerPoint.

Благородный? да.

Разумное использование вашего времени? Нисколько.

Тем не менее, респект упорствующим!

Метод № 5: Ленивый способ

Этот метод прост, но «качественной отделки» просто не будет.

Все, что вам нужно сделать, это найти и импортировать файл PNG в слайд PowerPoint, сделать значок белым и добавить цветной фон.Вуаля!

Каков ваш лучший подход?

Всегда помните, что у каждого метода есть свои преимущества, поэтому выбирайте тот, который соответствует требованиям вашей презентации.

Не бойтесь попробовать их все. Кнопка отмены находится в одном клике, так что используйте ее свободно.

И эй, не забудьте изучить функции PowerPoint! Держите свои презентации актуальными и, конечно же, привлекательными.

Какой из пяти методов вы предпочитаете? Есть ли у вас другие способы импорта или создания значков в PowerPoint?

Дайте мне знать в комментариях ниже!

Как сделать пользовательские значки домашней страницы для iPhone

Источник: Джозеф Келлер / iMore

С выпуском iOS 14 пользователи iPhone получили больший контроль над своими домашними экранами, чем когда-либо прежде, благодаря появлению виджетов на главном экране.Эти виджеты разрушают стандартную сетку, которую мы использовали в течение 13 лет, от оригинального iPhone до новейших и лучших iPhone, и впервые позволяют людям создавать более персонализированный опыт (при условии, что они никогда не взламывали свое устройство, это).

Но некоторые люди делают шаг вперед благодаря приложению «Быстрые команды». Хотя многие сторонние приложения позволяют изменять их значки, вы не можете использовать полностью настраиваемый набор для всех своих приложений. Вы также не можете изменить значки для приложений Apple по умолчанию.Но благодаря приложению «Ярлыки» и функции «Библиотека приложений» в iOS 14 вы можете сделать что-то подобное.

Все плюсы и минусы пользовательских значков домашней страницы

Итак, нет, вы не можете дать приложению собственный значок. Вместо этого вы можете сделать ярлык, который открывает приложение, дать этому пользовательский значок и отправить само приложение в свою библиотеку приложений.

Это делается путем отправки ярлыка для открытия приложения на главный экран и включения пользовательского значка из фотографий или приложения «Файлы».

Имейте в виду, что как только это будет сделано, всякий раз, когда вы запускаете приложение с пользовательского значка, вы сначала попадете в приложение «Ярлыки», а затем сразу в нужное приложение. Вам не нужно ничего с этим делать, но вы всегда будете сначала обращаться к приложению, которое хотите открыть с помощью ярлыков.

Как создавать пользовательские значки домашней страницы для приложений на вашем iPhone

В этом пошаговом руководстве я буду использовать пользовательский значок для приложения «Сообщения», но он будет работать с любым приложением на вашем iPhone.

  1. Откройте ярлыков на вашем iPhone.
  2. Нажмите кнопку + в правом верхнем углу.
  3. Нажмите Добавить действие .

    Источник: iMore
  4. Нажмите Сценарий .
  5. Коснитесь Открыть приложение .
  6. Коснитесь синего Выберите поле .

    Источник: iMore
  7. Коснитесь приложения , которое вы хотите использовать. В данном случае мы используем сообщения.
  8. Нажмите кнопку ... в правом верхнем углу экрана.
  9. Введите имя для ярлыка. Я предлагаю использовать имя приложения, которое вы будете заменять.

    Источник: iMore
  10. Коснитесь Добавить на главный экран .
  11. Введите имя ярлыка под Имя главного экрана и значок .
  12. Коснитесь значка под Имя главного экрана и значок .

    Источник: iMore
  13. Коснитесь Выберите файл или Выберите фото . В данном случае мы выбираем файл.
  14. Перейдите к местоположению вашего файла или фотографии.

    Источник: iMore
  15. Нажмите на файл или фото , которые вы хотите использовать.
  16. Нажмите Добавить .

    Источник: iMore

Теперь, когда ярлык находится на главном экране, вам нужно скрыть приложение, которое вы хотите открыть.

  1. Нажмите и удерживайте приложение , которое вы хотите скрыть, пока не появится контекстное меню.
  2. Коснитесь Удалить приложение .
  3. Коснитесь Удалить с главного экрана . Приложение по-прежнему будет доступно в библиотеке приложений.

    Источник: iMore

Теперь вы должны быть готовы к работе. Я использовал собственный набор значков ярлыков от замечательных людей из MacStories, но вы можете использовать любое изображение, которое сможете найти, в качестве значка для панели запуска приложений.

Я очень надеюсь, что Apple увидит, как сильно люди хотят настраивать свои домашние экраны, и предоставит пользователям инструменты, облегчающие эту задачу (например, загрузчик значков в настройках или что-то в этом роде) в будущем обновлении программного обеспечения. И, возможно, давайте скроем ярлыки с именами приложений, которые Apple уже делает для приложений в доке, для более аккуратного вида.

Может быть, на этот раз...

Вопросы?

Если у вас есть какие-либо вопросы о том, как создавать собственные значки домашней страницы для приложений на вашем iPhone, сообщите нам об этом в комментариях.

.
Опубликовано в категории: Разное

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *