Как нарисовать значок программы

Содержание

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

Значки и курсоры: ресурсы изображений для устройств отображения

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

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

Этот логотип сделал гений

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

Цвет Ширина (в пикселях) Высота (в пикселях)
Монохромный 16 16
Монохромный 32 32
Монохромный 48 48
Монохромный 64 64
Монохромный 96 96
16 16 16
16 32 32
16 64 64
16 48 48
16 96 96
256 16 16
256 32 32
256 48 48
256 64 64
256 96 96

Создание изображения устройства (значок или курсор)

При создании нового ресурса значка или курсора редактор изображений сначала создает изображение в определенном стиле (32 × 32, 16 цветов для значков и 32 × 32, Monochrome для курсоров). Затем можно добавлять изображения разных размеров и стилей в исходный значок или курсор и при необходимости редактировать каждое дополнительное изображение для различных устройств отображения. Вы также можете изменить изображение с помощью операции выреза и вставки из существующего типа изображения или растрового рисунка, созданного в графической программе.

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

Диалоговое окно Новый позволяет создать новый образ устройства указанного типа. Чтобы открыть диалоговое окно Создание , перейдите в меню Изображение>Новый тип изображения. Следующие свойства: Target Image Type (Тип целевого образа) и Custom (Пользовательский).

Научись рисовать логотипы за 10 секунд! ⚡️

Свойство Тип целевого образа содержит список доступных типов образов, в которых вы выбираете тип изображения, который требуется открыть:

16 x 16, 16 цветов
32 x 32, 16 цветов
48 x 48, 16 цветов
64 x 64, 16 цветов
96 x 96, 16 цветов

16 x 16, 256 цветов
32 x 32, 256 цветов
48 x 48, 256 цветов
64 x 64, 256 цветов
96 x 96, 256 цветов

16 x 16, Монохромный
32 x 32, монохромный
48 x 48, монохромный
64 x 64, монохромный
96 x 96, монохромный

Существующие изображения не будут отображаться в этом списке.

Свойство Custom открывает диалоговое окно Пользовательское изображение , в котором можно создать изображение с настраиваемым размером и количеством цветов.

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

Свойство Описание
Width Предоставляет пространство для ввода ширины пользовательского изображения в пикселях (от 1 до 512, ограничение 2048).
Height Предоставляет пространство для ввода высоты пользовательского изображения в пикселях (от 1 до 512, ограничение 2048).
Цвета Предоставляет пространство для выбора количества цветов для пользовательского изображения: 2, 16 или 256.

Используйте диалоговое окно Открытие , чтобы открыть образы устройств в проектах C++. В нем перечислены существующие образы устройств в текущем ресурсе (образы, которые являются частью текущего ресурса). Включено следующее свойство:

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

Создание нового значка или курсора

  1. В представлении ресурсов щелкните правой кнопкой мыши RC-файл и выберите команду Вставить ресурс. Если в RC-файле уже есть ресурс изображения, например курсор, можно щелкнуть правой кнопкой мыши папку Cursor и выбрать Вставить курсор.
  2. В диалоговом окне Вставка ресурса выберите Значок или Курсор и нажмите кнопку Создать. Для значков это действие создает ресурс значка со значком 32 × 32, 16 цветов. Для курсоров создается монохромное (2 цвета) изображение 32 × 32. Если рядом с типом ресурса изображения в диалоговом окне Вставка ресурса отображается знак «плюс» (+), это означает, что доступны шаблоны панели инструментов. Щелкните знак «плюс», чтобы развернуть список шаблонов, выбрать шаблон и нажмите кнопку Создать.

Добавление изображения для другого устройства отображения

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

Копирование образа устройства

  1. Перейдите в меню Изображение>Открыть образ устройства и выберите изображение из текущего списка изображений. Например, выберите 32 × 32, 16-цветную версию значка.
  2. Скопируйте отображаемое изображение значка (CTRL+C).
  3. Откройте другое изображение значка в другом окне редактора изображений . Например, откройте значок 16 × 16, 16 цветов.
  4. Вставьте изображение значка (CTRL+V) из одного окна редактора изображений в другое. Если вы вставляете больший размер в меньший размер, вы можете использовать маркеры значков для изменения размера изображения.
Читайте также:
Для создания архива документов нужно использовать программу

Удаление образа устройства

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

При нажатии клавиши Del изображения и цвета, которые вы нарисовали на значке, удаляются, но значок остается, и теперь вы можете изменить его. Если вы нажали del по ошибке, нажмите клавиши CTRL+Z , чтобы отменить действие.

Создание прозрачных или обратных областей в образах устройств

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

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

Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих параметров или выпуска. Чтобы изменить параметры, перейдите в меню Сервис>Импорт и экспорт параметров. Дополнительные сведения см. в разделе Персонализация интегрированной среды разработки Visual Studio.

Создание прозрачных или обратных областей

  1. В окне Цвета выберите селектор Screen-Color (Цвет экрана) или Inverse-Color (Обратный цвет).
  2. Примените экран или обратный цвет к изображению с помощью инструмента рисования. Дополнительные сведения об инструментах рисования см. в статье Использование средства рисования.

Изменение экрана или обратного цвета

  1. Выберите селектор Цвета экрана или Обратный цвет .
  2. Выберите цвет из палитры Цветов в окне Цвета . Дополнительный цвет автоматически назначается другому селектору.

Совет Если дважды щелкнуть селектор «Цвет экрана» или «Обратный цвет «, откроется диалоговое окно Выбор пользовательского цвета .

Использование 256-цветовой палитры

С помощью редактора изображений значки и курсоры могут быть большими (64 × 64) с 256-цветовой палитрой на выбор. После создания ресурса выбирается стиль изображения устройства.

Создание 256-цветного значка или курсора

  1. В представлении ресурсов щелкните правой кнопкой мыши RC-файл и выберите команду Вставить ресурс. Если в RC-файле уже есть ресурс изображения, например курсор, можно щелкнуть правой кнопкой мыши папку Cursor и выбрать Вставить курсор.
  2. В диалоговом окне Вставка ресурса выберите Значок или Курсор и нажмите кнопку Создать.
  3. Перейдите в меню Изображение>Новое изображение устройства и выберите нужный стиль изображения из 256 цветов.

Выбор цвета из 256-цветовой палитры для больших значков

Чтобы рисовать с помощью 256-цветовой палитры, необходимо выбрать цвета из палитры Цветов в окне Цвета.

  1. Выберите большой значок или курсор или создайте новый большой значок или курсор.
  2. Выберите цвет из 256 цветов, отображаемых в палитре Цветов в окне Цвета . Выбранный цвет станет текущим цветом в палитре Цветов в окне Цвета .

Примечание Начальная палитра, используемая для 256-цветных изображений, соответствует палитре, возвращаемой CreateHalftonePalette API Windows. Все значки, предназначенные для оболочки Windows, должны использовать эту палитру, чтобы предотвратить мерцание во время реализации палитры.

Установка горячей точки курсора

Горячая точка курсора — это точка, на которую windows ссылается при отслеживании положения курсора. По умолчанию для горячей точки устанавливается верхний левый угол курсора с координатами 0,0 . Свойство Hotspot в окно свойств показывает координаты горячих точек.

  1. На панели инструментов Редактор изображений выберите инструмент Задать хот-спот .
  2. Выберите пиксель, который вы хотите назначить в качестве горячей точки курсора. Свойство Hotspot в окне Свойства отображает новые координаты.

Создание и сохранение растрового изображения в виде .gif или JPEG

При создании растрового изображения изображение создается в формате растрового изображения (.bmp). Однако вы можете сохранить изображение в формате GIF или JPEG или в других графических форматах.

Этот процесс не применяется к значкам и курсорам.

  1. Перейдите в меню Файл>Открыть, а затем выберите Файл.
  2. В диалоговом окне Новый файл выберите папку Visual C++ , а затем выберите Файл растрового рисунка (.bmp) в поле Шаблоны и нажмите кнопку Открыть. Растровое изображение откроется в редакторе изображений.
  3. При необходимости внесите изменения в новое растровое изображение.
  4. Если растровое изображение по-прежнему открыто в редакторе изображений, перейдите в меню Файл>Сохранить имя файла.bmp Как.
  5. В диалоговом окне Сохранить файл как введите имя, которое нужно присвоить файлу, и расширение, обозначающее нужный формат файла, в поле Имя файла . Например, myfile.gif.

Примечание Чтобы сохранить его в другом формате, необходимо создать или открыть его за пределами проекта. Если вы создаете или открываете его в проекте, команда «Сохранить как » будет недоступна. Дополнительные сведения см. в разделе Просмотр ресурсов в файле скрипта ресурсов за пределами проекта (автономно).

Преобразование изображения из одного формата в другой

Вы можете открыть изображения GIF или JPEG в редакторе изображений и сохранить их в виде растровых изображений. Кроме того, можно открыть точечный файл и сохранить его в формате GIF или JPEG. Образы, с которыми вы работаете, не обязательно должны быть частью проекта для редактирования в среде разработки (см. раздел Редактирование автономных изображений).

  1. Откройте изображение в редакторе изображений.
  2. Перейдите в меню Файл>Сохранить имя файла как.
  3. В диалоговом окне Сохранить файл как в поле Имя файла введите имя файла и расширение, обозначающее нужный формат.
  4. Щелкните Сохранить.

Добавление нового ресурса образа в неуправляемый проект C++

  1. В представлении ресурсов щелкните правой кнопкой мыши RC-файл и выберите команду Вставить ресурс. Если у вас уже есть ресурс изображения в RC-файле , например курсор, можно просто щелкнуть правой кнопкой мыши папку Cursor и выбрать команду Вставить курсор.
  2. В диалоговом окне Вставка ресурса выберите тип ресурса изображения, который вы хотите создать (например, Растровое изображение), а затем нажмите кнопку Создать. Если рядом с типом ресурса изображения в диалоговом окне Вставка ресурса отображается знак «плюс» (+), это означает, что шаблоны панели инструментов доступны. Щелкните знак «плюс», чтобы развернуть список шаблонов, выбрать шаблон и нажать кнопку Создать.
Читайте также:
Как составить программу командировки

Добавление нового ресурса образа в проект на языке программирования .NET

  1. В Обозреватель решений щелкните правой кнопкой мыши папку проекта (например, WindowsApplication1).
  2. В контекстном меню выберите Добавить, а затем — Добавить новый элемент.
  3. В области Категории разверните папку Локальные элементы проекта , а затем выберите Ресурсы.
  4. В области Шаблоны выберите тип ресурса, который вы хотите добавить в проект. Ресурс добавляется в проект в Обозреватель решений и откроется в редакторе изображений. Теперь вы можете использовать все средства, доступные в редакторе изображений , для изменения изображения. Дополнительные сведения о добавлении изображений в управляемый проект см. в разделе Загрузка рисунка во время разработки.

Источник: learn.microsoft.com

Иконки в Figma

Сразу хочется отметить, что иконок как таковых в программе figma нет. Но по умолчанию есть поддержка иконочных шрифтов, одним из которых является Font Awesome.

Иконочный шрифт

Дизайн иконок в Figma

Дизайн иконок в Figma

Иконки, значки, пиктограммы – неотъемлемая часть дизайна сайтов и мобильных приложений. Они быстро объясняют пользователю смысл каждого блока. Мы часто даже не читаем надписи под иконками, потому что их визуальная часть нам и так понятна. Существуют целые направления дизайна, где занимаются именно иконками. Сегодня мы поговорим о том, откуда брать иконки для своих проектов в Figma и продолжим создавать дизайн приложения Proper Nutrition.

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

1. Использование готовых библиотек компонентов с иконками

Самый простой и быстрый способ – использовать то, что создали другие дизайнеры.

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

Дизайн иконок в Figma

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

А также UI Kit – библиотеки готовых наборов компонентов для интерфейса, выполненных в едином стиле. Они могут включать уже разработанный дизайн кнопок, выпадающих списков, иконок, стилей заголовков и так далее. Это существенно экономит время дизайнеров.

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

Щелкните на название понравившегося набора и напротив его названия вы найдете кнопку Duplicate. После ее нажатия, файл скопируется в ваш раздел Drafts.

Дизайн иконок в Figma

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

На вкладке Layer вы увидите список фреймов, с входящими в него иконками. Каждая иконка – это компонент.

Дизайн иконок в Figma

Если вы еще не узнали, что такое компонент из видео урока, который я рекомендовала посмотреть в статье «Первое знакомство с Figma», то напомню.

Компонент в Figma – это элемент дизайна, который можно использовать многократно. Например, меню приложения. Достаточно нарисовать его один раз, объединить все слои в компонент и использовать его копии для всех экранов. В случае если нужно будет внести какие-то изменения, это нужно будет сделать только с самым первым экземпляром, который будет считаться родительским. Остальные же (дочерние) изменятся автоматически.

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

Для этого в левом меню на вкладке Assets со списком всех компонентов нажмите на кнопку TeamLibrary (библиотека команды).

Дизайн иконок в Figma

После этого откроется окно с названием нашего файла с иконками-компонентами, которые мы можем опубликовать, нажав на кнопку Publish и списком всех уже опубликованных (сквозных) элементов.

Дизайн иконок в Figma

Но, радоваться рано. Если вы нажмете на кнопку Publish, появится сообщение о том, что нужно создать команду, чтобы опубликовать компоненты. Когда вы создадите команду и снова вернетесь к библиотеке документа, то увидите, что ничего не изменилось. А все, потому что функция публикации компонентов доступна только в платных тарифах Figma.

Совет! Есть только один способ использовать иконки и другие компоненты сторонних дизайнеров в бесплатной версии Figma. Найдите проект, который максимально подходит по набору компонентов для вас. Дублируйте его в свои черновики и работайте прямо в нем. Создайте страницу (Page) со своим проектом, тогда все объекты из других страниц будут так же доступны для вас.

2. Использование плагинов с иконками в Figma

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

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

Для того, чтобы установить плагин выполните следующие действия:

  • Вернитесь на главный экран Figma (Menu – Back to files)
  • Перейдите в раздел Community, где хранится список всех плагинов и UI Kits от пользователей.
  • Перейдите в раздел Plugin и найдите подходящий вариант, например, Icons8 Free Icons. Напротив его названия в найденном списке или на странице плагина нажмите клавишу Install.

Дизайн иконок в Figma - установка плагинов с иконками

Сразу произойдет установка плагина. Напротив названия появится кнопка Uninstall с помощью которой можно будет его удалить.

Теперь вернитесь к вашему документу и в пункте меню Menu — Plugins вы найдете только что установленный Icon8. Щелкните по названию и откроется диалоговое окно плагина с библиотекой иконок.

Дизайн иконок в Figma - плагины с иконками

Ищите необходимые варианты и вставляйте их в свой дизайн. Лучше использовать SVG формат, но в данном плагине он доступен в платной версии. Подробнее о преимуществах SVG читайте в статье « Экспорт из Photoshop в SVG ».

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

3. Использование иконочных шрифтов в Figma

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

С помощью инструмента Text создайте текстовый блок во фрейме и на панели свойств в разделе Text выберите шрифт Font Awesome

Дизайн иконок в Figma - иконочные шрифты

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

Читайте также:
Что такое программа астрайя

Дизайн иконок в Figma - иконочные шрифты

Затем вернитесь к вашему текстовому блоку и вставьте туда иконку. Размер иконки, ее цвет, регулируются так же на панели свойств Text.

Дизайн иконок в Figma - иконочные шрифты

4. Рисуем собственные иконки в Figma, пример – иконка wifi из фигур

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

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

Давайте нарисуем иконку сети wifi в Figma и заодно познакомимся с особенностями работы с фигурой Ellipse

Нарисуйте эллипс размером 40х40 px, зажав клавишу shift, чтобы сохранить пропорции. Наведите на него указатель мыши, и вы увидите круглую точку arc, потянув за которую вы измените свойство sweep (развертка) и получится пайчарт.

Дизайн иконок в Figma - рисуем иконку из шейпов

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

Дизайн иконок в Figma - рисуем иконку из шейпов

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

Дизайн иконок в Figma - рисуем иконку из шейпов

Повторите все тоже самое с 3-м эллипсом (у меня получился 20х20 px), но не создавайте дугу, а оставьте треугольный сегмент (Piechart).

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

Дизайн иконок в Figma - рисуем иконку из шейпов

Для того, чтобы размер иконки ограничивался его видимой частью, а не размером первоначального эллипса (40х40 px), примените к трем выделенным элементам булеву операцию Union (объединение). Более подробно о ней я писала в статье « Рисуем дизайн первой страницы приложения в Figma ». В результате данной операции на панели Layer появится новый слой Union. Переименуйте его в wifi.

Дизайн иконок в Figma - рисуем иконку из шейпов

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

Для этого нажмите на кнопку с ромбом на верхней панели инструментов или в контекстном меню нашей иконки выберите пункт Create Component.

Панель слоев будет выглядеть следующим образом.

Дизайн иконок в Figma - рисуем иконку из шейпов

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

5. Дизайн иконок для Status Bar приложения Proper Nutrition

Теперь вернемся к приложению Proper Nutrition и создадим иконки для Status Bar. Это будет примерный дизайн, так как у каждого девайса он свой. Нам главное, показать какое место в дизайне экранов он будет занимать.

В документе Proper Nutrition создадим новый фрейм для Iphone 8 и назовем его MainScreen. Это будет главный экран нашего простого приложения. Описание всех экранов смотри в статье « Рисуем дизайн первой страницы приложения в Figma »

Для данного фрейма зададим сетку Grid с ячейкой 8px

С помощью инструмента Shape Tool – Rectangle (R) нарисуйте белый прямоугольник по всей ширине экрана, высотой 44 px (обычная высота для status bar).

Дизайн иконок в Figma - рисуем иконки для status bar

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

Назовите слой status bar

Для нарисованного прямоугольника задайте ограничители Left and Right — Top.

Теперь займемся иконками. Будем использовать иконочный шрифт. В нашем случае это самый простой способ. Надпись со временем сделайте с помощью обычного текстового блока. У меня это шрифт Roboto в 13px. Для данных иконок выставите ограничители:

  • Иконка батареи – Right – Top and Bottom
  • Иконка wifi — Right – Top and Bottom
  • Время — Left – Top and Bottom

Выровняйте иконки по центру прямоугольника status bar с помощью соответствующих кнопок на панели Design.

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

Дизайн иконок в Figma - рисуем иконки для status bar

6. Дизайн иконок для меню tab bar в приложении Proper Nutrition

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

  • Возврат к главной странице.
  • Открытие списка избранного.
  • Добавление в избранное
  • Поиск по рецептам
  • Оставить заметку (комментарий)

Нарисуйте прямоугольник высотой 60 px, шириной во весь экран.

Над ним нарисуйте линию (Line) с цветом (stroke) — # 949494

С помощью иконочного шрифта создайте иконки «Возврат к главной странице», «Открытие списка избранного», «Поиск по рецептам», «Оставить заметку». Размер – 24px.

Дизайн иконок в Figma - рисуем иконки для tool bar

Для созданий кнопки «Добавление в избранное» выполите следующий порядок действий:

Нарисуйте прямоугольник ширина (W) – 48, высота (H) – 30, закругление краев — 3

Залейте его градиентом (Fill – Linear) из красного (#DA0100) в оранжевый (#DA6900), прозрачность 100% в обоих случаях.

Дизайн иконок в Figma - рисуем иконки для tool bar

С помощью инструмента Text напечатайте «+» по середине прямоугольника, шрифт Comfortaa, размер 24. Установите у него следующие параметры – Fixed Size и Align Centr, чтобы символ всегда оставался в центре кнопки и фиксированного размера при любом изменении ее ширины.

Дизайн иконок в Figma - рисуем иконки для tool bar

Выделите прямоугольник и знак «+», преобразуйте их в компонент и назовите его Button/add favoriets.

Теперь выделите все иконки и кнопку и выберите для них стиль выравнивания Tidy up, чтобы расстояние между ними стало равным.

Дизайн иконок в Figma - рисуем иконки для tool bar

Выделите все нарисованные иконки и элементы для status bar и преобразуйте их в компонент с названием status bar.

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

Следующая статья из цикла по разработке приложения Proper Nutrition — это « Дизайн приложения в Figma — стили и маски «. В ней вы узнаете еще один способ поместить растровое изображение в Figma, а так же как работать с масками и стилями.

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях

  • Share on Vkontakte
  • Share on Telegram

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

  • Share on Vkontakte
  • Share on Telegram
  • Share on Pinterest
  • Share on Twitter
  • Share on Email

Источник: des-life.ru

Рейтинг
( Пока оценок нет )
Загрузка ...
EFT-Soft.ru