Содержание

Иконки и картинки в iOS-разработке

Размер и разрешение изображения

До выхода iPhone 5 iPhone имел только 3,5-дюймовую версию, но имел два разных разрешения. Чтобы облегчить адаптацию разработчиков, iOS унифицировала использование точек (Point) для описания размера элементов интерфейса; на экранах без Retina — 1pt. = 1 пиксель, 1 пиксель = 2 пикселя на экране Retina. После этого разрешение iOS продолжает увеличиваться, но для его представления по-прежнему используется точка. Поскольку в одном физическом пространстве больше пикселей, каждая точка имеет больше пикселей.

Связь между масштабным коэффициентом и разрешением

При разработке для iOS предоставляйте изображения с соответствующими разрешениями для устройств, поддерживаемых вашим приложением.
Это можно сделать, умножив количество пикселей в каждом изображении на определенный коэффициент масштабирования. Изображение со стандартным разрешением имеет масштабный коэффициент 1,0 (используется экранами без сетчатки, что в основном не подходит), который называется изображением @ 1x. Изображения с высоким разрешением имеют масштабный коэффициент 2,0 или 3,0 и называются изображениями @ 2x и @ 3x. Предположим, у вас есть изображение стандартного разрешения @ 1x, например 100 пикселей × 100 пикселей. Версия этого изображения @ 2x будет иметь размер 200 пикселей × 200 пикселей. @ 3x версия будет иметь размер 300 пикселей × 300 пикселей.

оборудование Масштаб
iPhone X, серии Plus, iPad Pro @3x
Другие устройства iOS с разрешением Retina @2x
Устройства iOS без разрешения Retina @1x

Каждому приложению нужен значок, чтобы привлекать внимание в App Store и выделяться на главном экране. Значок — это первое впечатление пользователя о вашем приложении. Он также отображается во всей системе, например, в настройках и результатах поиска.

Часть значка системы

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

Файл значка должен соответствовать

Атрибуты стоимость
формат PNG
Цветовая гамма sRGB или P3
Слой Без накладок и прозрачных слоев
форма Квадрат без закругленных углов

Размер значка приложения на главном экране

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

Значки на главном экране

оборудование Размер значка
iPhone 60pt × 60pt
iPad Pro 83.5pt × 83.5pt
iPad,iPad mini 76pt × 76pt
App Store 1024pt × 1024pt @1x

Значки Spotlight, настроек и центра уведомлений

оборудование Spotlight Настроить Уведомление
iPhone/iPad 40pt × 40pt 29pt × 29pt 20pt × 20pt

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

Иконки в настройках и уведомлениях

оборудование Spotlight Настроить Уведомление
iPhone/iPad 40pt × 40pt 29pt × 29pt 20pt × 20pt
Размер значка панели навигации и панели инструментов
Целевой размер самый большой размер
25pt × 25pt 28pt × 28pt
Размер значка TabBar

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

Атрибуты Обычный размер Компактный размер
Круглый значок 25pt × 25pt 18pt × 18pt
Квадратный значок 23pt × 23pt 17pt × 17pt
Широкий значок 31pt (широкий) 23pt (широкий)
Длинный значок 28pt (длинный) 20pt (длинный)

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

Картинка при запуске (слева) и первый экран (справа)

Размер начального изображения
оборудование Портрет Горизонтальный экран
12.9“iPad Pro 2048px×2732px 2732px×2048px
10. 5“iPad Pro 1668px×2224px 2224px×1668px
9.7“iPad 1536px×2048px 2048px×1536px
7.9“iPad mini 4 1536px×2048px 2048px×1536px
iPhone X 1125px×2436px 2436px×1125px
iPhone 8 Plus 1242px×2208px 2208px×1242px
iPhone 8 750px×1334px 1334px×750px
iPhone 7 Plus 1242px×2208px 2208px×1242px
iPhone 7 750px×1334px 1334px×750px
iPhone 6s Plus 1242px×2208px 2208px×1242px
iPhone 6s 750px×1334px 1334px×750px
iPhone SE 640px×1136px 1136px×640px

Как добавить иконку сайта в адресную строку браузера?

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

Отображение иконки в строке браузера

Чтобы установить подобную «фичу», необходимо нарисовать изображение размером
16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico.

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

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File
Formats. По умолчанию программа Photoshop CS под Windows устанавливается
в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла
плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов
появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем
favicon. ico в корне сайта. Браузер автоматически ищет этот файл и добавляет
его в адресную строку, а также закладки.

Файл не обязательно должен располагаться в корне сайта,
но тогда следует указать браузеру, где он находится. Это делается через тег <link>,
как показано ниже.

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

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.

<head>
 <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
</head>

Как создать свои иконки для Windows

Microsoft любит сама решать, как должна внешне выглядеть Windows. Каждая из версий операционной системы имеет свои особенности стиля интерфейса, концепцию которого определяет компания. Мы, пользователи не можем в один клик целостно сменить дизайн системы на кардинально иной, как это можно сделать с Android, запустив сторонний лаунчер. Но поэтапная настройка кое-каких вещей на свой вкус и цвет в среде Windows всё же нам доступна.

В числе этих вещей – смена предустановленных иконок. Системные иконки на свои можем поменять:
• В свойствах папок,

• В свойствах ярлыков,

• В параметрах значков рабочего стола для системных элементов.

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

1. Веб-сервисы иконок

Иконка – это рисунок на прозрачном фоне небольших размеров. Он может существовать в любом из распространённых форматов изображений, но для Windows принципиален формат «.ico». Тематические подборки таких рисунков, в частности, в формате «.ico» можно скачать в Интернете – на торрент-трекерах, на сайтах, посвящённых тематике внешнего оформления Windows, на сервисах, специализирующихся именно на иконках. Последние являют собой каталогизированные хранилища с системой поиска и предлагают скачивание иконок. Это такие веб-сервисы как: Icons8.Ru, Iconsearch.Ru, Iconizer.Net.

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

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

Так, отправив в редактор Iconizer.Net свою картинку, на выходе сможем получить файл формата «.ico» с нужным размером, скажем, 128х128. Базовые возможности сервиса Iconizer.Net бесплатны.

2. Утилита AveIconifier2

Локальный способ преобразования изображений в формат иконок может предложить небольшая портативная утилита для Windows — AveIconifier2. Это конвертер форматов изображений «.jpeg», «.bmp», «.png», «.gif» в «.ico». Запускаем утилиту, перетаскиваем в правую часть её окошка файл нужной картинки.

Ждём пару секунд – и иконка готова. По умолчанию утилита будет преобразовывать большие изображения в файлы «.ico» со стандартными размерами 128х128. Но если нужно получить на выходе иконку с меньшими размерами, кликом правой клавиши мыши по левой части окошка утилиты можем открыть перечень доступных размеров и убрать галочки ненужных из них.

Конвертированные в формат «. ico» файлы утилита сохраняет в своей папке «temp».

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

3. Штатные средства Windows

Сохранить рисунок в файле с расширением «.ico», в принципе, можно и штатными средствами Windows. Фото или рисунок открывается в редакторе Paint, устанавливаются нужные размеры картинки, и на выходе она сохраняется в файл «.bmp». Далее в проводнике или файловом менеджере расширение сохранённой картинки меняется на «.ico». Рассмотренная выше утилита AveIconifier2 делает это проще и быстрее, но она не позволяет редактировать рисунки. А в некоторых случаях может потребоваться картинку подчистить, обрезать ненужных людей, убрать лишние детали, применить эффекты и т.п. Рассмотрим, как в штатном редакторе изображений Windows Paint осуществляется простейшая операция по обрезке рисунка для иконки. И как потом этот рисунок превращается в формат «.ico».

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

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

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

Жмём «Изменить размер».

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

Сохраняем изображение в файле «.bmp».

В проводнике активируем отображение расширений файлов.

Далее кликаем только что созданный файл картинки, жмём F2, убираем до точки буквы «bmp» и вписываем буквы «ico». В итоге должно получиться название типа «имя_файла.ico». Жмём Enter. Подтверждаем смену имени.

В Windows 10 можно использовать и приведённый выше способ, и другой: изображение отредактировать с помощью штатного приложения «Фотографии», а затем конвертировать это изображение в формат «.ico» утилитой AveIconifier2. Приложение «Фотографии» не позволяет переопределять размеры картинок и сохранять их в другие форматы, зато оно может предложить юзабильный инструментарий для обрезки картинок и наложения эффектов.

Открываем нужную картинку в приложении. Выбираем функцию «Изменить».

Далее – «Обрезать и повернуть».

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

Подтягиваем маску на нужный объект картинки. По итогу нажимаем «Готово».

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

И теперь можем конвертировать его в «.ico».

Как из картинки создать иконки для Windows (ico)?







– Автор:

Игорь (Администратор)






У вас есть любимые фотографии, из которых хотите создать полноценные иконки для вашего компьютера? Или может вам хочется заменить иконки программ на более подходящие, но нет инструмента для преобразования картинок? Тогда не стоит откладывать это дело. Существует очень простой способ для конвертирования ваших jpg, png и gif в набор иконок (ico) разного размера.

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

  1. Зайдите на сайт (к сожалению, сайт converticon(.)com более недоступен). Перед вами должно появится вот такое небольшое окно:
     
  2. Нажмите кнопку «Get Started»
  3. Откроется диалог выбора файла Windows. Выберите изображение, из которого вы хотите создать иконки
  4. После того, как вы нажмете «Открыть» и как закроется диалоговое окно, на сайте отобразится следующее окно:
  5. Если вы выбрали не то изображение или решили, что лучше использовать другое, то для повторного выбора картинки нажмите кнопку «Browse» и выберите другую картинку. Если вас все устраивает, то нажмите кнопку «Export» и перед вами откроется следующее окно:
  6. Выберите размер для вашего будущего значка. Обратите внимание, что Windows XP использует различные настройки размера, по сравнению с Windows Vista / 7
  7. Для Windows XP лучше выбрать три размера, как показано на рисунке выше: 16×16, 32×32 и 48×48. Убедитесь, что галочки установлены напротив всех трех пунктов, а так же в том, что выбрана закладка «Icon». Все три размера будут сохранены в одном файле с расширением ICO. Обратите внимание, что Windows 7 не поддерживает значки, содержащие несколько размеров.
  8. Для Windows Vista / 7 лучше выбрать один размер 256×256 для ICO файла
  9. После того, как вы определились с размерами, нажмите кнопку «Save As» и выберите место, где вы бы хотели сохранить значок
  10. Если вы хотите продолжить создание иконок, то нажмите кнопку «Browse» для выбора другого изображения. После чего повторите все шаги

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

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

☕ Хотите выразить благодарность автору? Поделитесь с друзьями!

  • Программа PrivaZer или как очистить компьютер от мусора и защитить конфиденциальность данных?
  • Как вставить текст в командную строку Windows?
Добавить комментарий / отзыв

как автоматизировать экспорт UI-Kit из Figma в Xcode и Android Studio проекты / Хабр

Если вы iOS- или Android-разработчик и дизайн вашего проекта разрабатывается в Figma, то скорее всего вы сталкиваетесь с проблемами при экспорте ресурсов: цвета выгрузить нельзя, а иконки и картинки экспортировать неудобно. В этой статье я расскажу, как можно облегчить себе жизнь и автоматизировать экспорт UI-Kit из Figma напрямую в Xcode и Android Studio.


Все больше команд мобильной разработки переходят на Figma. Раньше многие (и мы тоже) использовали связку Sketch + Zeplin или Figma + Zeplin. И это было удобно. Но когда на одном из проектов мы добавили поддержку темной темы, ситуация ухудшилась. Zeplin темную тему не поддерживает, поэтому приходится искать пути обхода, которые заставляют задуматься: а нужен ли теперь Zeplin? В этом случае Zeplin — трата времени дизайнера на поддержание и синхронизацию проектов в двух инструментах, а также дополнительные расходы для компании.

Отказавшись от Zeplin и переехав в Figma, мы (разработчики) начали испытывать боль при экспорте UI-Kit из Figma.

Figma, в отличие от Zeplin, никак не взаимодействует с Xcode и Android Studio. Плагины не позволяют Figma тесно интегрироваться с ними. Мы нашли утилиту командной строки, которая экспортировала цвета и текстовые стили, но нам она не подошла — не поддерживала экспорт картинок и тёмную тему. Именно поэтому я написал свою утилиту.

Но немного подробнее о проблемах.

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

Проблема #1: отсутствие возможности экспортировать цвета

Что мы — разработчики видим, когда открываем UI-Kit в Figma? В самом простом случае — несколько кружочков разных цветов.

Но если проект большой и поддерживает темную тему, то, палитра будет содержать намного больше цветов:

Планируете добавить поддержку темной темы? Посмотрите, насколько больше может стать палитра

У Figma нет возможности экспортировать цвета. Максимум, что можно сделать, это выделить цвет и скопировать HEX значение. И если дизайнер что-то поменяет, то в случае большой палитры, разработчику придется потратить много времени, чтобы сравнить палитру в коде и в Figma.

Название цвета тоже не всегда получается скопировать нормально. Некоторые дизайнеры используют в названии стилей символ «/», но он не поддерживается в iOS и Android. Этот символ нужен, чтобы сгруппировать цвета по группам.

Пример. У цвета в Figma название background/primary. Для Android-разработчиков нужно указать цвет с названием background_primary, а для iOS-разработчиков — backgroundPrimary.

Ещё одна проблема с цветами — темная тема. Ни один инструмент дизайнера (Figma, Zeplin, Sketch) не позволяет иметь темную и светлую палитру одновременно. Тут есть два подхода: создать отдельный файл с темной палитрой либо хранить все цвета в одном файле, но называть их с постфиксом, например, background_primary_day, background_primary_night.

Чего мы хотим как разработчики: чтобы была возможность экспортировать цветовую палитру из Figma напрямую в Xcode или Android Studio проекты.

Проблема #2: неудобный экспорт иконок стандартными средствами

Тут тоже есть несколько затруднений.

Опять же, бывает, что дизайнеры в названии иконок используют символ «/», чтобы группировать иконки. Например, если иконку с названием ic/24/tab/profile экспортировать стандартными средствами Figma, мы получим вот такую вложенность.

С этим невозможно работать. Приходится переименовывать файл. Файл должен называться ic24TabProfile.pdf. Это для iOS-разработчиков.

У Android-разработчиков принято называть ресурсы в стиле snake_case. В таком случае у файла будет название ic_24_tab_profile.xml. Но Figma так не умеет.

Экспортированные из Figma иконки придётся вручную переносить в проект. Причем iOS-разработчикам недостаточно просто перенести их. Надо у каждой иконки проставить: Preserve Vector Data, Single Scale, Render as Template Image.

Чего мы хотим как разработчики: чтобы была возможность экспортировать все иконки из Figma напрямую в Xcode или Android Studio-проекты.

Проблема #3: неудобный экспорт иллюстраций стандартными средствами

Иконки — это маленькие векторные изображения, часто черно-белые, они могут перекрашиваться (системой или разработчиком) и изменять свой размер. Если включить accessibility, то некоторые иконки увеличиваются вместе с текстом. Основная их проблема — названия: символ «/», о котором я говорил выше и то, что iOS-разработчики используют названия в стиле camelCase, а Android разработчики — snake_case.

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

С иллюстрациями те же проблемы, что и с иконками, но есть ещё и парочка новых.

Android-разработчики экспортируют иконки и иллюстрации из Figma как SVG-файлы, а затем, встроенными в Android Studio средствами, конвертируют SVG-файлы в vector drawable XML-файлы. Если надо будет экспортировать 50 иконок или иллюстраций, то потребуется много времени, чтобы их все сконвертировать. Это можно автоматизировать.

iOS-разработчики экспортируют иллюстрации как растровые картинки в трех масштабах. Если приложение поддерживает темную тему, то всего будет 6 картинок. Вот так это выглядит в iOS-проекте:

А теперь представим, что из Figma мы выгрузили 50 иллюстраций. Получается, что у нас 50*6=300 PNG-картинок, которые надо вручную через drag&drop перенести в проект, а потом ещё их все, опять же, вручную переименовывать. Хочется ли это делать? — нет. Есть дела поважнее…

Чего мы хотим как разработчики: чтобы была возможность экспортировать все иллюстрации из Figma напрямую в Xcode или Android Studio-проекты.

Почему Zeplin не помог:

  • он не поддерживает темную тему;
  • не позволяет иметь несколько цветов с одинаковым HEX значением, но разными названиями: если называть цвета по месту их применения, то может получиться так, что два цвета будут иметь разные названия, но одинаковые HEX значения. Например, backgroundPrimaryPressed (цвет главного фона при нажатии) и backgroundSecondary (цвет второстепенного фона) должны иметь одинаковые HEX значения. Zeplin не позволит такое сделать. Есть обходной путь — изменить HEX значение на минимально возможную величину. Пример #F4F5F8 и #F4F5F7;
  • требует дополнительные ресурсы дизайнера на синхронизацию макетов и UI-кит с Figma;
  • он стоит дополнительных денег. Figma для организации стоит $12 на дизайнера в месяц. Если покупать Zeplin, то это ещё $10.75 на дизайнера в месяц;

Как мы автоматизировали экспорт ресурсов из Figma

Осознав, что так жить больше нельзя, я посмотрел, есть ли у Figma какое-нибудь API или возможность расширения плагинами, чтобы автоматизировать экспорт, и оказалось, что да, есть. У меня было два пути: написать Figma-плагин или использовать

Figma API

.

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

Плагин пишется на JavaScript. Используя Figma API, можно писать обертку на чем угодно. Но Figma-плагин не может работать с файловой системой на компьютере разработчика (пользователя). Именно поэтому я не стал его делать.

Я iOS-разработчик, поэтому решил сделать консольную утилиту на Swift. Начал с прототипа, который должен экспортировать цветовую палитру из Figma прямо в Xcode-проект. Через пару недель он был готов. Это было нечто. Я запустил свою утилиту и через несколько секунд получил в Xcode всю палитру. Вот так должен работать идеальный экспорт из Figma 🙂

Спустя пару месяцев моя утилита для экспорта ресурсов из Figma была готова. Ссылку на неё вы можете найти в конце статьи.

Как происходит процесс экспорта

Цвета

Разработчик вызывает команду

figma-export colors

. Если это iOS-проект, то цвета экспортируются в папку

Assets.xcassets

.

Дополнительно создается Color.swift-файл, чтобы можно было использовать цвета прямо из кода.

import UIKit
 
 extension UIColor {
    static var backgroundSecondaryError: UIColor { return UIColor(named: #function)! }
    static var backgroundSecondarySuccess: UIColor { return UIColor(named: #function)! }
    static var backgroundVideo: UIColor { return UIColor(named: #function)! }
    ...
 }

Если это Android проект, то цвета экспортируются в файл

values/colors.xml

и

values-night/colors.xml

, если темная тема поддерживается.

values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="button">#7701FF</color>
    <color name="button_ripple">#8A80FF</color>
    <color name="button_disabled">#D9DCE1</color>

    <color name="text_primary">#FFFFFC</color>
    <color name="text_primary_pressed">#A680FE</color>
    <color name="text_primary_disabled">#FFFFFE</color>
    <color name="text_secondary">#101828</color>
    <color name="text_tertiary">#A5ACBD</color>
. ..

values-night/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="button">#6F01EC</color>
    <color name="button_ripple">#7D6AF0</color>
    <color name="button_disabled">#3F334B</color>

    <color name="text_primary">#E6D9F6</color>
    <color name="text_primary_pressed">#E6D9F3</color>
    <color name="text_primary_disabled">#544761</color>
    <color name="text_secondary">#E6D9F5</color>
    <color name="text_tertiary">#7B6F98</color>
...
Иконки

Разработчик вызывает команду figma-export icons.

Если это iOS-проект, то иконки будут экспортированы как PDF-файлы с параметром Render as Template Image, в папку Assets.xcassets. Если иконки будут использоваться в UITabBar, то можно дополнительно указать Preserve Vector Data, чтобы поддерживать Accessibility.

Если это Android-проект, то иконки будут экспортированы в папку drawable как векторные xml-файлы. Под капотом утилита конвертирует SVG-файлы в XML с помощью официальной утилиты vd-tool (vector-drawable-tool), которая используется в Android Studio.

Иллюстрации

Разработчик вызывает команду

figma-export images.

Будет все тоже самое, только картинки экспортируются как PNG-файлы.

Если это Android-проект, то иллюстрации будут экспортированы в папку drawable и drawable-night как векторные xml-файлы.

Как можно настроить экспорт

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

./figma-export colors -i figma-export.yaml

В конфигурационном файле указываются параметры для iOS, для Android и общие параметры. Также там указывается идентификатор Figma-файла, где расположены цвета, иконки и картинки. Идентификатор файла можно найти в адресной строке, если открыть его в браузере.

Вот, например, адрес нашего UI-Kit: www.figma.com/file/GVHjNNE8PKKRf1KtnMPY9m/RTC-Key-UI-kit

Идентификатор файла lightFileId в нашем случае: GVHjNNE8PKKRf1KtnMPY9m

Пример конфигурационного файла для iOS-проекта:

---
figma:
  lightFileId: shPilWnVdJfo10YFo12345
  darkFileId: KfF6DnJTWHGZzC9Nm12345
ios:
  # Path to the Assets.xcassets directory
  xcassetsPath: "./Resources/Assets.xcassets"
  
  # Parameters for exporting colors
  colors:
    # Should be generate color assets instead of pure swift code 
    useColorAssets: True
    # Name of the folder inside Assets.xcassets where to place colors (.colorset directories)
    assetsFolder: Colors
    # Path to Color.swift file where to export colors for accessing colors from the code (e.g. UIColor.backgroundPrimary)
    colorSwift: "./Sources/Presentation/Common/Color.swift"
    # Color name style: camelCase or snake_case
    nameStyle: camelCase

  # Parameters for exporting icons
  icons:
    # Name of the folder inside Assets.xcassets where to place icons (.imageset directories)
    assetsFolder: Icons
    # Icon name style: camelCase or snake_case
    nameStyle: camelCase
    # [optional] Enable Preserve Vector Data for specified icons
    preservesVectorRepresentation:
    - ic24TabMain
    - ic24TabHistory
    - ic24TabProfile

  # Parameters for exporting images
  images:
      # Name of the folder inside Assets.xcassets where to place images (.imageset directories)
      assetsFolder: Illustrations
      # Image name style: camelCase or snake_case
      nameStyle: camelCase

Пример конфигурационного файла для Android-проекта:

---
figma:
  lightFileId: shPilWnVdJfo10YFo12345
  darkFileId: KfF6DnJTWHGZzC9Nm12345
android:
  mainRes: "./main/res"

Как организовать Figma-файл для автоматизированного экспорта ресурсов

Чтобы UI-Kit можно было автоматизированно выгрузить необходимо соблюдать следующие правила.

Общие

  • Если цвет, иконка или иллюстрация уникальны для iOS или Android у неё в свойствах, в поле description должно быть указано “ios” или “android”. Если цвет, иконка или иллюстрация не должны быть доступны для экспорта, то у них в свойстве description будет “none”. Таким образом FigmaExport определит, что надо экспортировать в iOS-проект, что в Android проект, а что вообще не надо экспортировать.

Пример.

В iOS и Android иконка «поделиться» выглядит по-разному. На скриншотах ниже указано, что иконка

ic24ShareIos

будет экспортирована только в iOS-проект т.к. в свойстве Component description указано ios, а иконка

ic24ShareAndroid

будет экспортирована только в Android-проект;

  • Иконки и иллюстрации должны быть компонентами.
  • Цветовые стили и компоненты должны быть опубликованы в Team Library.
  • Экспортируются только те иконки и иллюстрации, которые добавлены во фреймы Icons и Illustrations.

Примеры

Figma-файл с UI-Kit (светлая тема)

Figma-файл с UI-Kit (темная тема)

Названия ресурсов


Цвета, иконки и иллюстрации можно называть любыми именами содержащими буквы a-z, A-Z и символы «_» и «/».(img)_([a-z0-9_]+)$’ # RegExp pattern for: img_image_name

Темная тема

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

Цвета

В Figma-файле цвета должны быть оформлены как цветовые стили и опубликованы в Team Library.

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

Иконки

В Figma-файле должен быть Frame с именем Icons. В этом Frame должны находиться компоненты для каждой иконки. Пример:

Иллюстрации

В Figma-файле должен быть Frame с именем Illustrations, который содержит компоненты для каждой иллюстрации. Пример:

Итог

Благодаря FigmaExport мы избавились от множества проблем при работе с Figma. Экспорт ресурсов теперь занимает секунды. Несколько примеров, как нам облегчило жизнь использование утилиты.

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

Как бы мы их обновляли вручную: экспортировали все иконки из Figma как zip-файл, переименовали 52 файла, перенесли иконки в проект, проставили все необходимые свойства, проверили, что ничего не забыли. На это бы ушло не менее часа времени.

Как мы их обновили c FigmaExport: запустили команду figma-export icons. Через 10 секунд все изменения подтянулись, мы запустили приложение на симуляторе и увидели, что все иконки заменились.

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

Вместо того чтобы потратить один час времени на обсуждение с дизайнером, что он изменил в UI-Kit, ручном экспорте иконок и цветов, мы просто запустили команду figma-export colors и figma-export icons и через Git увидели что удалилось, что добавилось, а что изменилось. И сразу стали верстать макеты, используя новые иконки и цвета.

3. Делали фичу, в которой надо было сделать расширенный онбординг с 4 разделами, в каждом из которых до 7 страниц с картинками.

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

Несколько минусов

  • Необходимо договариваться с дизайнером о том, как надо хранить цвета, иконки, картинки в UI-Kit, чтобы их можно было автоматизировано выгрузить.
  • Экспорт работает только для тех компонентов, которые добавлены в Team Library, поэтому у дизайнеров должна быть платная подписка на Figma.

Планы:

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

Отдельное «спасибо» Артуру Абрарову и Кате Рокитян за то, что помогли доработать UI-Kit.

Ссылка на утилиту

Скачать FigmaExport на GitHub

.

Буду рад, если вы попробуете мою утилиту. Вопросы, пожелания, фидбек — пишите мне на [email protected]

Как изменить иконку приложения, папки или файла на Mac (macOS)

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

♥ ПО ТЕМЕ: Возможности клавиши ⌥Option (Alt) на Mac (macOS), 20 фишек, о которых вы могли не знать.

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

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

♥ ПО ТЕМЕ: Как изменять цвета папок в Mac (macOS).

 

Какие форматы изображений можно использовать в качестве иконки для приложения, папки или файла в macOS

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

Если же вы решите устанавливать в качестве иконки обычное изображение, то лучше всего использовать для этой цели формат . PNG с разрешением не менее 512 × 512 точек, чтобы избежать пикселизации. В крайнем случае, изображения в формате .JPG тоже сгодятся.

♥ ПО ТЕМЕ: Как работает Ctrl + Alt + Del на Mac (macOS)?

 

Как изменить иконку приложения, папки или файла в macOS

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

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

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

Далее откройте сохраненное изображение в программе «Просмотр», а затем в меню «Правка» нажмите «Скопировать» или воспользуйтесь сочетанием клавиш ⌘Cmd + C.

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

♥ ПО ТЕМЕ: Как сделать заставку скринсейвер из любого видео на Mac (macOS).

 

Вставка изображения

Откройте Finder и выберите (выделите) приложение, папку или файл, иконку которых вы хотите изменить.

Затем либо нажмите ФайлСвойства в строке меню или же щелкните правой кнопкой мыши по файлу и в контекстном меню выберите пункт «Свойства».

После открытия информационного окна необходимо сделать следующее:

1. Нажать на иконку в левом верхнем углу.

2. Перейдите в меню «Правка» и выберите «Вставить».

Или просто воспользуйтесь сочетанием клавиш ⌘Cmd + V.

Новая иконка папки отобразится немедленно.

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

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

2. Щелкните на значок в левом верхнем меню и выберите «Правка»«Скопировать».

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

4. Щелкните по иконке в левом верхнем углу и выберите «Правка» → «Вставить».

Теперь обе папки должны иметь одну и ту же иконку.

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

♥ ПО ТЕМЕ: Как удалять файлы на macOS мимо корзины.

 

Как обновить иконку в Dock-панели macOS

Если приложение находится в панели Dock, то изображение иконки не обновится. Для этого откройте Терминал (Finder → Программы → Утилиты → Терминал или воспользуйтесь поиском Spotlight), введите следующую команду и нажмите клавишу Return (Enter):

killall Dock

♥ ПО ТЕМЕ: Дни рождения на iPhone, iPad и Mac: как добавлять и включать напоминания.

 

Как вернуть оригинальную иконку папки, приложения или файла в macOS

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

1. Выберите приложение, папку или файл и снова перейти к меню «Свойства», как в инструкции выше.

2. В верхнем левом углу надо кликнуть (выделить) по иконке и нажать на клавиатуре кнопку Backspace (Delete).

Вы увидите, как иконка вернет свой изначальный вид.

Изменение иконок для файлов, папок и приложений может быть удобным инструментом. Освойте однажды последовательность действий, чтобы в будущем выполнять эту работу быстро. Почему бы не попробовать прямо сейчас?

Смотрите также:

Иконка стиля. Cпросили меня однажды: а что это значит… | by Ivan Klymenko

Как рисовать иконки хорошо

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

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

Xerox Alto icons. 1973

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

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

Иконка — это небольшая иллюстрация, сделанная в рамках технических ограничений.

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

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

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

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

Denis Sazhin. iconka.ru

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

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

Twitter. Home icon

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

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

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

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

Стилизация.

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

Supratim Nayak. Стилизация под технологическое скругление иконок в iOS

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

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

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

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

Основные общие черты стилизованных объектов и декоративных изображений: лаконичность форм, обобщенность и символичность, красочность и геометричность.

Material Design Icons

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

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

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

Storyline icons, 16×16 px. Vic Bell

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

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

Shopify. Zach Roszczewski

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

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

New Branding. Mail.ru

Также скругленный квадрат служит основной формой для иконок сета Material Design, который я уже приводил выше. Еще один пример хорошей формы — бейджи-иконки для приложения National Geographic от Valerie Jar.

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

FireArt Studio. Travel Icons pack

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

Главный принцип использования линии — выбрать одну или две толщины для всего сета и последовательно обыграть все элементы следуя выбранной графике и пропорциям. Одинаковые изломы, радиусы скруглений, прерывание линии — тут все годится.

Классную стилизацию линией делает иллюстратор Ryan Putnam.

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

Artua. Одноточечная перспектива в iOS иконке

Псевдобъемными иконками я называю двумерные плоские иконки, которым придали глубины играя светом и тенью. Чем меньшего размера картинки может сделать дизайнер, сохраняя детализацию, тем выше его мастерство, особый шик — смайлики 16х16 px.

Ollin. Mario Brosers. 32×32 px

Сейчас тренд псевдообъемных иконок возвращается снова, на сей раз с мягкими не контрастными цветами и тенью.

Если же говорить о классическом 3D моделинге, применяемого к иконкам, то здесь дизайнеры редко используют только 3D редакторы: зачастую болванки с правильно выставленным светом и текстурами переносятся в Photoshop и дальше доводятся до блеска вручную. Как пример, иконка выше — пылесос от TrySoda.

Такие гиганты как Microsoft, Google и Apple имеют свои руководства по созданию дизайна для операционных систем, в том числе и с рекомендациями по построению перспективы и света в иконках.

Исследование освещения. Material Design

Ссылки на некоторые материалы:

Google Material Design

OS X Human Interface Guidelines

Android 4.x Design Guide

Windows XP

Alexey Garkushin. Isometric TF2: badlands

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

Tanya Maifat. Train

По части изометрии иконок собаку съели именно художники и дизайнеры-игроделы. Ведь раньше производительность техники не позволяла делать полноценные сцены в 3D и все делалось руками. Изометрию как рисуют, так и пререндерят, например в 3ds Max, закладывая готовые картинки в редакторы уровней и сцен. Сейчас её используют для передачи «старины» и игр, где такая графика считается классикой. Хотя дизайнеры и програмисты уже используют вполне современные инструменты.

Sant Valentin. Upgrade elements of computers for battle ships.

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

Удачи, вдохновения и классных иконок!

Как изменить значки рабочего стола на пользовательские изображения

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

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

 

Фото static.vecteezy

 

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

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

 

Для чего нужны значки на рабочем столе?

Фото techsapiens

 

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

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

 

Как изменить значки рабочего стола с помощью встроенных значков?

 

Фото static.vecteezy

 

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

 

Как изменить значки папок на рабочем столе

Фото i0.wp

 

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

 

Для Windows:
  1. Выберите фотографию на рабочем столе, которую вы хотите использовать в качестве фотографии значка. Вы также можете скачать любые фотографии из Интернета.
  2. Доступ к интерактивному конвертеру файлов. ICO — это стандартный формат для всех графических значков, в который вам нужно будет преобразовать свое изображение. Вы можете выбрать из этого списка 20 конвертеров изображений. Вы также можете использовать эту прямую ссылку на страницу преобразования ICO изображения.онлайн-конвертировать.
  3. На рабочем столе или в папке «Документы» выберите любую папку или подпапку, значок которой вы хотите изменить.
  4. Щелкните правой кнопкой мыши папку/программу, которую вы хотите настроить. Нажмите на раскрывающееся меню и найдите Свойства.
  5. Перейдите на вкладку «Ярлыки». Выберите «Изменить значок» на панели действий на той же вкладке.
  6. Выберите изображение ICO для замены изображения значка. Вы можете выбрать иконку из доступных шаблонов или фотографию из файла. Если вы хотите включить собственный значок, нажмите «Обзор» на панели задач.
  7. Выберите файл ICO и нажмите «Открыть». Нажмите «ОК».

 

Для Mac:
  1. Выберите изображение с рабочего стола или прямо из Интернета. Иконки можно найти на сайтах стоковых фотографий. Для этой цели вы можете попробовать скачать его с Getty Images или Shutterstock. Также можно сделать снимок экрана той части изображения, которую вы хотите использовать.
  2. Дважды щелкните изображение, которое хотите использовать. Откройте его во встроенном приложении Preview на вашем Mac.
  3. Нажмите «Редактировать», а затем «Выбрать все» в строке меню «Просмотр». Вы также можете сделать это с помощью сочетания клавиш Command + A.
  4. Выберите «Редактировать», а затем «Копировать» в строке меню предварительного просмотра. Вы также можете сделать это с помощью сочетания клавиш Command + C.
  5. Найдите папку, значок которой вы хотите изменить. Щелкните правой кнопкой мыши папку и найдите в меню «Информация». Щелкните значок в верхнем левом углу панели «Информация», чтобы выбрать его.
  6. Выберите значок, который вы хотите заменить.Перетащите выбранный значок в открытое окно «Информация» и поместите его на миниатюру значка в верхнем левом углу. Новый значок теперь займет место старого.

 

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

Фото i.stack.imgur

 

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

 

Для Windows:
  1. На рабочем столе выберите любой ярлык программы или папки, который вы хотите изменить. Ярлыки обычно отображаются с синей стрелкой вверх в левом нижнем углу значка.
  2. Щелкните правой кнопкой мыши ярлык. В раскрывающемся меню найдите «Свойства».
  3. Перейдите на вкладку «Ярлыки». Выберите «Изменить значок» на панели действий на той же вкладке.
  4. Убедитесь, что образ конвертирован в формат ICO.
  5. Выберите изображение ICO для замены изображения значка. Вы можете выбрать иконку из доступных шаблонов или фотографию из файла. Если вы хотите включить собственный значок, нажмите «Обзор» на панели задач.
  6. Выберите файл ICO и нажмите «Открыть», а затем «ОК».

 

Для Mac:
  1. После выбора изображения, которое вы хотите использовать, дважды щелкните его. Откройте его во встроенном приложении Preview на вашем Mac.
  2. Нажмите «Редактировать», а затем «Выбрать все» в строке меню «Просмотр». Вы также можете сделать это с помощью сочетания клавиш Command + A.
  3. Выберите «Редактировать», а затем «Копировать» в строке меню предварительного просмотра. Вы также можете сделать это с помощью сочетания клавиш Command + C.
  4. Найдите значок ярлыка, который вы хотите изменить. Щелкните правой кнопкой мыши значок ярлыка и выберите «Получить информацию» в контекстном меню. Щелкните значок в верхнем левом углу панели «Информация», чтобы выбрать его.
  5. Выберите значок, который вы хотите использовать в качестве замены.Перетащите выбранный значок в открытое окно «Информация» и поместите его на миниатюру значка в верхнем левом углу. После этого ваш новый значок будет на месте.

 

Как изменить значки на рабочем столе для ярлыков веб-страницы

Фото с сайта filestore

 

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

 

Для Windows:
  1. Щелкните правой кнопкой мыши значок программы/приложения на рабочем столе. Выберите Свойства в раскрывающемся меню.
  2. Нажмите «Изменить значок» на вкладке «Ярлык», которая сразу же появится на панели.
  3. Выберите изображение ICO для замены изображения значка. Вы можете выбрать иконку из доступных шаблонов или фотографию из файла.Если вы хотите включить собственный значок, нажмите «Обзор» на панели задач.
  4. Выберите файл ICO и нажмите «Открыть». Нажмите «ОК».

 

Для Mac:
  1. Убедитесь, что ярлык веб-страницы сначала находится на панели рабочего стола.
  2. Найдите изображение, которое вы хотите использовать для замены значка ярлыка. Откройте его в режиме предварительного просмотра и скопируйте изображение.
  3. Щелкните правой кнопкой мыши значок ярлыка и выберите «Получить информацию» в контекстном меню. Щелкните изображение значка рядом с меткой значка в верхнем левом углу вкладки.
  4. Выберите значок, который вы хотите использовать в качестве замены. Перетащите выбранный значок в открытое окно «Информация» и поместите его на миниатюру значка в верхнем левом углу. Новый значок теперь займет место старого.

 

Как изменить значки рабочего стола для приложений на панели задач

Фото cdn.guidingtech

 

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

 

Для Windows:
  1. Щелкните правой кнопкой мыши значок программы/приложения на панели задач. Среди появившихся вариантов щелкните правой кнопкой мыши тот же значок. Вы должны найти тот же значок прямо над функцией «Удалить с панели задач».
  2. Выберите «Свойства» в раскрывающемся меню.
  3. Нажмите «Изменить значок» на вкладке «Ярлык», которая сразу же появится на панели.
  4. Выберите изображение ICO для замены изображения значка. Вы можете выбрать иконку из доступных шаблонов или фотографию из файла. Если вы хотите включить собственный значок, нажмите «Обзор» на панели задач.
  5. Выберите файл ICO и нажмите «Открыть». Нажмите «ОК».

 

Для Mac:
  1. Откройте любой веб-браузер и выберите изображение, которое хотите использовать. Перетащите изображение прямо из браузера на рабочий стол, чтобы скопировать его. Вы также можете использовать существующую картинку из ваших файлов.Просто убедитесь, что он был преобразован в формат ICO.
  2. Запустить поиск. Перейдите в Приложения.
  3. Выберите любую программу, которую вы хотите изменить (например, Minecraft). Щелкните правой кнопкой мыши программу и выберите «Получить информацию». Щелкните изображение значка рядом с меткой значка в верхнем левом углу вкладки.
  4. Выберите значок, который вы хотите использовать в качестве замены. Перетащите выбранный значок в открытое окно «Информация» и поместите его на миниатюру значка в верхнем левом углу. Новый значок теперь займет место старого.

 

Как изменить значки для любого диска

Фото i.ytimg

 

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

 

Для Windows:
  1. Найдите значок Диска, который вы хотите настроить.Обратите внимание на букву значка диска. Это может быть C, D, E и т. д.
  2. Откройте любой веб-браузер и введите «usb.ico». Результаты поиска должны генерировать изображения значков. Выберите изображение и сохраните его в любую папку на вашем компьютере.
  3. Нажмите «Пуск». Введите «regedit» на панели поиска. Нажмите Enter, чтобы открыть редактор реестра, и нажмите «Запуск от имени администратора».
  4. Щелкните папку программного обеспечения на левой панели вкладки, чтобы развернуть ее. Выберите «Классы», а затем разверните папку.Щелкните правой кнопкой мыши Приложения в разделе Классы. Выберите «Создать», а затем «Ключ».
  5. Введите «explorer.exe». Щелкните правой кнопкой мыши на этой вкладке и создайте другой ключ. Пометьте новый ключ как «Диски».
  6. Щелкните правой кнопкой мыши Диски и создайте другой ключ. Пометьте новый ключ буквой диска, значок которого вы хотите изменить. Например, D, если вы хотите изменить значок USB-накопителя D.
  7. Щелкните правой кнопкой мыши новый ключ, чтобы создать еще один ключ и пометить его как DefaultIcon.
  8. Вернитесь к своим папкам и найдите значок, который хотите использовать.Скопируйте путь из адресной строки Windows выше.
  9. В окне «Редактировать строку» скопируйте и вставьте путь к значку (в кавычках) в поле «Значение». Нажмите OK, когда закончите. Нет необходимости перезагружать компьютер, так как изменения вступят в силу немедленно. В качестве альтернативы вы также можете использовать программное обеспечение Drive Icon Changer. Это сократит процесс настройки значков дисков.

 

Для Mac:
  1. Откройте любой веб-браузер и выберите изображение, которое хотите использовать.Перетащите изображение прямо из браузера на рабочий стол, чтобы скопировать его.
  2. Дважды щелкните значок, чтобы открыть его в разделе «Предварительный просмотр».
  3. Нажмите кнопку «Изменить» на панели задач рабочего стола в верхней части экрана.
  4. Нажмите «Копировать» в раскрывающемся меню. Это копирует изображение в виртуальный буфер обмена. На этом этапе вы можете закрыть предварительный просмотр изображения.
  5. Щелкните правой кнопкой мыши диск, который вы хотите настроить. Выберите Получить информацию. Щелкните изображение значка рядом с меткой значка в верхнем левом углу вкладки.
  6. Выберите значок, который вы хотите использовать в качестве замены. Перетащите выбранный значок в открытое окно «Информация» и поместите его на миниатюру значка в верхнем левом углу. Новый значок теперь займет место старого.

 

Как изменить значки рабочего стола для определенных типов файлов

Фото newpagedigital.files

 

Компьютеры Windows и Mac имеют встроенные функции смены значков. Это значительно упрощает процесс настройки программ и папок.Однако это не относится к изменению значка определенного типа файла. Допустим, вы хотите изменить значок всех ваших документов Word на изображение. Или ваши презентации PowerPoint в определенный логотип.

Если вы используете Windows, нам потребуется помощь программного обеспечения под названием File Types Manager. Вам нужно будет загрузить и установить эту программу, прежде чем вы сможете настроить свои значки. Вы также можете выбрать из других программ, как это. В любом случае, вот как вы можете изменить значки на рабочем столе для определенных типов файлов:

 

Для Windows:
  1. Откройте Диспетчер типов файлов после завершения процесса установки.После открытия в нем будут перечислены все известные типы файлов в вашей системе. Прокрутите вниз, чтобы найти тип файла, который вы хотите настроить. Вы также можете использовать опцию «Найти» для поиска.
  2. Щелкните правой кнопкой мыши тип файла и выберите параметр «Редактировать выбранный тип файла». Должно открыться окно, содержащее панель инструментов значка по умолчанию в середине.
  3. Скопируйте путь к значку по умолчанию и тем временем сохраните его в блокноте или документе Word.
  4. Нажмите кнопку «Обзор», появившуюся рядом с полем «Значок по умолчанию».Появятся все доступные значки.
  5. Выберите изображение ICO для замены изображения значка. Вы можете выбрать иконку из доступных шаблонов или фотографию из файла. Если вы хотите включить собственный значок, нажмите «Обзор» на панели задач.
  6. Выберите файл ICO и нажмите «Открыть». Нажмите «ОК».

 

Для Mac:
  1. На Mac скопируйте изображение, которое хотите использовать, в буфер обмена.
  2. Один из способов сделать это — открыть изображение в режиме предварительного просмотра.Выберите «Редактировать», а затем «Выбрать все». Нажмите «Изменить», а затем «Копировать».
  3. Щелкните правой кнопкой мыши файл, который вы хотите настроить. Выберите Получить информацию. Щелкните изображение значка рядом с меткой значка в верхнем левом углу вкладки.
  4. Выберите значок, который вы хотите использовать в качестве замены. Перетащите выбранный значок в открытое окно «Информация» и поместите его на миниатюру значка в верхнем левом углу. Новый значок теперь займет место старого.

 

приложений для создания пользовательских значков на рабочем столе

 

Фото Pixabay

 

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

 

Appicon.co

Фото cloudfront

 

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

Программное обеспечение легко доступно в Интернете, вход в систему не требуется.Существует также настольная версия, которая работает в автономном режиме. Для настольной версии вам не нужно подключение к Интернету. Вы можете вносить последние штрихи в существующие проекты в любом месте и в любое время. Appicon.co совместим с устройствами IOS, Android, macOS и Windows.

 

Вектор

Фото Вектр

 

Vectr — простая, но очень эффективная платформа векторной графики. Надежное кроссплатформенное программное обеспечение позволяет пользователям создавать дизайн значков прямо через программное обеспечение.В программе есть все основные инструменты и функции, необходимые для создания простых дизайнов. К ним относятся фигуры, карандаш и текстовый инструмент. Есть также варианты настройки. Примеры включают непрозрачность, границу, тип и цвет. Конечно, это программное обеспечение не такое мощное и эффективное, как Adobe Illustrator. Тем не менее, этого достаточно для создания простой векторной графики с минимальными усилиями. Программное обеспечение также очень удобно и легко ориентируется. Также есть функция автоматического сохранения для всех онлайн-проектов.

Vectr — это программное обеспечение премиум-класса. Он совместим с Windows, Linux, macOS и Chrome OS.

 

Иконфлоу

Фото iconsflow

 

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

IconsFlow — это программное обеспечение премиум-класса. Он совместим с устройствами MacOS и Windows.

 

Преобразование ICO

Фото socialapples

 

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

Это программное обеспечение может показаться примитивным. Тем не менее, он отлично справляется с окончательным редактированием и преобразованием ваших иконок. ICO convert абсолютно бесплатен и работает с устройствами macOS и Windows.

 

Adobe Illustrator

Фото И.

 

Adobe Illustrator — отмеченная наградами программа для работы с векторной графикой. Это программное обеспечение предназначено для профессиональных художников и дизайнеров иконок. Чтобы дать вам представление, это стоит за большинством значков, которые вы видите в Google Play Store и Apple App Store. Программное обеспечение многоцелевое. Это означает, что вы можете создавать веб- и мобильную графику, значки и многое другое. В нем есть все инструменты для рисования и раскрашивания, необходимые для создания выделяющихся значков. Вы также никогда не исчерпаете графику, стили и шрифты на выбор.Ваша работа также автоматически сохраняется в облаке.

Adobe Illustrator — это программа премиум-класса. Он совместим с устройствами MacOS и Windows. Существует также версия мобильного приложения, но она менее мощна, чем программное обеспечение для настольных компьютеров.

 

Заключительные мысли о настройке значков рабочего стола

Фото res.cloudinary

 

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

Как настроить значки приложений на iPhone

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

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

Вот как это сделать:

  • Прежде чем начать, рекомендуется найти значок для нового ярлыка.В Интернете есть множество источников иконок (например, Flaticon), или, если вы артистичны и/или амбициозны, вы можете создать свой собственный. Независимо от того, используете ли вы чужое или свое собственное, сохраните изображение в Фото.
  • Хорошо, начнем. Найдите и коснитесь приложения «Ярлыки». Он предустановлен; если вы не видите его сразу на главном экране, проведите пальцем влево, пока не окажетесь в библиотеке приложений, и начните вводить «Ярлыки» в верхней строке поиска.
  • Когда вы войдете в приложение, нажмите на значок «плюс» в правом верхнем углу.Введите имя нового ярлыка вверху, а затем нажмите «Добавить действие»
  • .

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

После выбора знака «плюс» для запуска нового ярлыка нажмите «Добавить действие».

  • В ярлыках можно попробовать много интересного. Но прямо сейчас мы хотим переключить значки приложений.Введите «Открыть приложение» в строке поиска, а затем нажмите ссылку «Открыть приложение».
  • Нажмите на слово «Приложение», которое появляется (довольно слабо) рядом со словом «Открыть». Вы увидите список ваших приложений; выберите тот, который вы хотите настроить.
  • Теперь коснитесь синего символа в правом верхнем углу. Вы вернетесь на свою страницу быстрого доступа.

Введите «Открыть приложение» в строке поиска.

Нажмите «Приложение», чтобы выбрать значок для замены.

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

Назовите ярлык и нажмите «Добавить на главный экран».

Выберите «Добавить».

  • Коснитесь значка в разделе «Имя и значок главного экрана».” У вас будет выбор: сделать снимок, выбрать фотографию или выбрать файл. Предполагая, что вы уже сохранили изображение в Фото, нажмите «Выбрать фото» и выберите фотографию, которую хотите использовать.
  • Если вы выбрали существующую фотографию, выделенная область будет указывать, какая часть фотографии будет отображаться в виде значка; вы можете перемещать фотографию, пока не будете довольны указанным разделом. Нажмите «Выбрать» в правом нижнем углу.

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

Вам придется обрезать фотографию до нужного размера.

  • Теперь вы увидите новый значок. Если вы не добавили имя для своего нового ярлыка, вы все равно можете сделать это здесь, введя имя рядом со значком.
  • Все готово? Нажмите Добавить в правом верхнем углу.
  • Вы должны увидеть новый персонализированный значок на главном экране. Поздравляю!
  • Возможно, вы увидите два новых значка на главном экране: один с первым скучным значком и один с вашим замечательным новым значком.Если это так, просто нажмите и удерживайте ненужный значок, а затем выберите «Удалить закладку». Помните, что это (и другие созданные вами) закладки/ярлыки, а не оригинал.

Вуаля! Ваш новый значок готов.

При желании вы можете скрыть исходный значок.

  • Вы также можете скрыть исходный значок приложения, чтобы был виден только новый.(Конечно, вы не хотите удалять его полностью; это удалит приложение.)
  • Нажмите и удерживайте значок исходного приложения и выберите «Редактировать главный экран».
  • Нажмите на знак минус. Во всплывающем меню нажмите «Удалить с главного экрана». Исходная иконка не будет удалена, а просто скрыта; вы всегда можете найти его в библиотеке приложений.

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

Обновление от 22 октября 2021 г., 10:30 по восточноевропейскому времени: Эта статья была первоначально опубликована 13 июня 2021 г.; он был обновлен с учетом изменений в iOS 15.

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

Как мы можем улучшить?
Расскажите нам здесь

Описание

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

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

На выбор:

  • Домашний набор:  искусство, ванна, перед сном, велопрогулка, завтрак, чистка зубов (2 раза), церковь, чистая комната, чистая лестница, чистый стол, расчесывание волос, танец, дезодорант стоматолога, десерт , ужин, блюда, доктор, напиток, семейное время, Кормить домашних животных, свободное время, Игры, Мусор, одеваться, выходить из дома, гимнастика, стрижка, Шапка/перчатки, домашнее задание, Стирка куртки, библиотека, Lighthts, лосьон, обед, Сделать постель, вечер кино, урок музыки, сон, пойти поесть, игры на свежем воздухе, упаковать рюкзак, вечеринка, подобрать игрушки, пижама, свидание, детская площадка, пазлы, чтение, уборная, школа, накрыть на стол, обувь, поход по магазинам, душ, перекус, специальное мероприятие, спорт, плавание, планшет, время игрушек, путешествие, телевизор, распаковка рюкзака, видеоигры, пробуждение, прогулка, мытье рук (2 раза) и зоопарк/аквариум.
  • Набор чувств: Счастливый, Грустный, Взволнованный, Испуганный, Нервный, Беспокойный, Любимый, Перегруженный, Обиженный, Смущенный, Безумный, Разочарованный, Сбитый с толку, Больной, Скучный, Беспокойный и Усталый.
  • Сенсорный набор: Прыжки, Утяжеленное одеяло, Многолюдное место, Очки, Качели, Туннель, Вонючее место, Мое пространство, Позы тела, Чистка, Жевание и мяч.
  • Школьный набор: сборка, прибытие, рисование, завтрак, календарь, центры, кружок, уборка, компьютеры, шкафчик, выпускной, английский язык, экскурсия, иностранный язык, игра, групповая работа, самостоятельная работа, инструмент группа, библиотека, построение, обед, математика, урок музыки/хор, физкультура, упаковка рюкзака, чтение вслух, чтение, перемена, отдых, уборная, тренировка по технике безопасности, наука, покажи и расскажи, закуска, обществознание, специальное мероприятие, правописание, планшет, распаковать рюкзак, мыть руки, писать.

Каждый значок имеет размеры 2 x 2 дюйма, и его можно стирать.

Знакомство с символами | Символы, значки и изображения

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

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

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

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

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

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

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

Карточка элементов изображения — Домашний помощник


Карта Picture Elements — один из самых универсальных типов карт.

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

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

Переменные конфигурации

URL изображения.
Чтобы использовать локально размещенный образ, см. Размещение.

строка camera_image (необязательно)

строка camera_view (необязательно, по умолчанию: авто)

«live» покажет просмотр в реальном времени, если поток включен.

карта state_filter (необязательно)

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

строка dark_mode_image (необязательно)

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

строка dark_mode_filter (необязательно)

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

Элементы

Элементы — это активные компоненты (значки, значки, кнопки, текст и т. д.).), которые накладываются на изображение.

Существует несколько различных типов элементов, которые можно добавить на карту Элементы изображения:

Государственный знак

Этот элемент создает значок, представляющий состояние объекта.

Переменные конфигурации

Подсказка к государственному значку. Установите значение null, чтобы скрыть.

карта tap_action (необязательно)

карта hold_action (необязательно)

карта double_tap_action (необязательно)

Государственная икона

Этот элемент представляет состояние объекта с помощью значка.

Переменные конфигурации

Подсказка к значку. Установите значение null, чтобы скрыть.

state_color логическое значение (необязательно, по умолчанию: true)

Установите значение true , чтобы значки были окрашены, когда объект активен.

карта tap_action (необязательно)

карта hold_action (необязательно)

карта double_tap_action (необязательно)

Государственный Знак

Этот элемент представляет состояние объекта с помощью текста.

Переменные конфигурации

строка атрибута (необязательно)

Если присутствует, вместо состояния объекта будет показан соответствующий атрибут.

Текст перед состоянием объекта.

Подсказка метки. Установите значение null, чтобы скрыть.

карта tap_action (необязательно)

карта hold_action (необязательно)

карта double_tap_action (необязательно)

Кнопка вызова службы поддержки

Этот объект создает кнопку (с произвольным текстом), которую можно использовать для вызова службы.

Переменные конфигурации

карта service_data (необязательно)

Элемент значка

Этот элемент создает статическую иконку, не связанную с состоянием сущности.

Переменные конфигурации

Значок для отображения (например, mdi:home ).

Подсказка к значку. Установите значение null, чтобы скрыть.

Сущность, используемая для дополнительной информации/переключения.

карта tap_action (необязательно)

карта hold_action (необязательно)

карта double_tap_action (необязательно)

Элемент изображения

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

Переменные конфигурации

Сущность, используемая для state_image и state_filter , а также цель для действий.

Подсказка к изображению. Установите значение null, чтобы скрыть.

карта tap_action (необязательно)

карта hold_action (необязательно)

карта double_tap_action (необязательно)

строка camera_image (необязательно)

строка camera_view (необязательно, по умолчанию: авто)

«live» покажет просмотр в реальном времени, если поток включен.

карта state_image (необязательно)

карта state_filter (необязательно)

строка aspect_ratio (необязательно, по умолчанию: 50%)

Заставляет высоту изображения быть пропорциональна ширине.Допустимые форматы: значение высоты в процентах ( 23% ) или соотношение, выраженное двоеточием или разделителем «x» ( 16:9 или 16x9 ). Для отношения второй элемент можно опустить, и по умолчанию он будет равен «1» ( 1,78 равно 1,78:1 ).

Условный элемент

Подобно карточке «Условие», этот элемент позволяет отображать вложенные элементы в зависимости от состояний объекта.

Переменные конфигурации

Список идентификаторов сущностей и соответствующих состояний.

Состояние объекта равно этому значению.*

строка state_not (необязательно)

Состояние объекта не равно этому значению.*

Один или несколько элементов любого типа для отображения выполнения условий. См. пример ниже.

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

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

Переменные конфигурации

Имя карты с custom: префикс (напр.г., custom:my-custom-card ).

Варианты исключений

Переменные конфигурации

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

Примечания к атрибутам элемента

Как использовать объект стиля

Расположите и настройте элементы с помощью CSS. Также возможны дополнительные/другие ключи.
Обратите внимание, что стиль по умолчанию для большинства элементов включает в себя translate(-50%, -50%), что означает, что указанные вами координаты будут устанавливать положение центра элемента.Используйте преобразование : none , чтобы отключить это поведение.

  стиль:
  # Позиционирование элемента
  осталось: 50%
  верх: 50%
  # Перезаписать цвет для иконок
  "--paper-item-icon-color": розовый
  

Как использовать state_image

Укажите другое изображение для отображения в зависимости от состояния объекта.

  state_image:
  "на": /local/living_room_on.jpg
  "выкл": /local/living_room_off.jpg
  

Как использовать state_filter

Укажите различные фильтры CSS

  state_filter:
  «вкл»: яркость (110%), насыщенность (1.2)
  "выкл": яркость (50%), оттенок-поворот (45 градусов)
  

Как использовать «нажми и удерживай»

Если указана опция hold_action , это действие будет выполняться при щелчке объекта и удерживании его в течение полсекунды или более.

  tap_action:
  действие: переключить
Hold_action:
  акция: call-service
  сервис: light.turn_on
  сервис_данные:
    entity_id: light.bed_light
    яркость_процента: 100
  

Примеры

Пример значков, надписей и кнопок

  тип: элементы изображения
изображение: /local/план этажа.png
элементы:
  - тип: значок состояния
    tap_action:
      действие: переключить
    объект: light.ceiling_lights
    стиль:
      топ: 47%
      осталось: 42%
  - тип: значок состояния
    tap_action:
      действие: переключить
    сущность: light.kitchen_lights
    стиль:
      верх: 30%
      осталось: 15%
  - тип: госзнак
    объект: sensor.outside_temperature
    стиль:
      топ: 82%
      осталось: 79%
  - тип: госзнак
    сущность: климат.кухня
    атрибут: текущая_температура
    суффикс: «°С»
    стиль:
      топ: 33%
      осталось: 15%
  - тип: сервис-кнопка
    Название: Выключи свет
    стиль:
      сверху: 95%
      осталось: 60%
    услуга: домработница.выключить
    сервис_данные:
      entity_id: group.all_lights
  - тип: значок
    значок: mdi:дом
    tap_action:
      действие: перейти
      navigation_path: /lovelace/0
    стиль:
      Топ 10%
      осталось: 10%
  

Пример изображений

  тип: элементы изображения
изображение: /local/floorplan.png
элементы:
  # state_image & state_filter — переключение по клику
  - тип: изображение
    сущность: light.living_room
    tap_action:
      действие: переключить
    изображение: /local/living_room.png
    state_image:
      "выкл": /local/living_room_off.png
    фильтр: насыщение (.8)
    фильтр состояния:
      "вкл": яркость (120%), насыщенность (1,2)
    стиль:
      сверху: 25%
      осталось: 75%
      ширина: 15%
  # Камера, красная рамка, прямоугольник со скругленными углами - показывать больше информации по клику
  - тип: изображение
    сущность: camera.driveway_camera
    camera_image: camera.driveway_camera
    стиль:
      Топ-5%
      осталось: 10%
      ширина: 10%
      граница: 2px сплошной красный
      радиус границы: 10%
  # Одиночное изображение, state_filter - вызов службы по клику
  - тип: изображение
    сущность: медиаплеер.гостиная
    tap_action:
      акция: call-service
      сервис: media_player.media_play_pause
      сервис_данные:
        entity_id: media_player.living_room
    изображение: /local/tv.jpg
    фильтр: яркость (5%)
    фильтр состояния:
      воспроизведение: яркость (100%)
    стиль:
      верх: 40%
      осталось: 75%
      ширина: 5%
  

Условный пример

  тип: элементы изображения
изображение: /local/House.png
элементы:
  # условно показать ярлык кнопки выключения телевизора, когда папы нет, а дочь дома
  - тип: условный
    условия:
      - сущность: датчик.присутствие_дочь
        состояние: "дом"
      - объект: sensor.presence_dad
        состояние: "не_домой"
    элементы:
      - тип: значок состояния
        сущность: switch.tv
        tap_action:
          действие: переключить
        стиль:
          топ: 47%
          осталось: 42%
  

Помогите нам улучшить нашу документацию

Предложите изменить эту страницу или оставьте/просмотрите отзыв об этой странице.

Яркие, красочные значки календаря Идеально подходят для линейного календаря

Более 250 значков календаря для различных событий в классе, праздников, праздников! Вам останется только распечатать, вырезать и заламинировать.Чтобы значки календаря сохранялись дольше, распечатайте их на картоне и заламинируйте. Значки календаря имеют размер 2,5 x 2,5 дюйма и идеально подходят для карманного календаря или линейного календаря.

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

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

►►СОХРАНИТЕ более 20% и купите НАБОР декора для классной комнаты Rainbow Design ►►

Иконки календаря в комплекте: (Теперь включает ПУСТОЙ РЕДАКТИРУЕМЫЙ лист, чтобы вы могли создавать собственные значки календаря, используя собственные картинки!)

  • Огонь Сверла
  • Первый день школы
  • Мишка День
  • Мишка День
  • День Отец
  • День Матери
  • День Материн
  • День Материна
  • Popcorn Party
  • Спорт День
  • Носок День
  • Водный день
  • PJ DEALY
  • Партия мороженого
  • пятна День
  • День нашивки
  • Шляпа День
  • Фурнитура
  • Day Trip
  • Party
  • Чтение Night Night
  • Математика Night
  • Art Night
  • Написание ночь
  • Ночь
  • Ночь математики
  • Прогулка по листьям
  • Прогулка на природе
  • Группа суперзвезд
  • Танцевальная вечеринка
  • Нет школы 90 050
  • Picture Day
  • С Днем Рождения (2 варианта)
  • Домашний день
  • Библиотека
  • Снежный день
  • Арт Ярмарка
  • Последний день школы
  • Музыкальный концерт
  • Test
  • Buddies (2 варианта)
  • Special Обед
  • Кино
  • Пикник
  • Замена
  • День флага
  • День святого Валентина
  • Пицца
  • Пиратский день
  • Св.День Патрика
  • День земли
  • 100 день в школе
  • Новогодний день
  • Новый год
  • Новогодний день
  • Рождество (Санта)
  • Рождество (Сцена на Рождество)
  • Пасха (крест)
  • Пасха (Пасхальный кролик)
  • HALLOWEEN
  • День благодарения
  • 4 июля
  • 4 июля
  • Носок День
  • Красный день
  • Оранжевый День
  • Желтый День
  • Зеленый День
  • Голубой День
  • Фиолетовый День
  • Розовый День
  • Белый день
  • Коричневый день
  • черный день
  • серый день
  • грандиозные
  • Lockdower
  • Tornado Dill
  • чтение персонажей День
  • пончики с Dad
  • Домашний день (еще один дизайн)
  • Домашний день
  • Мировой язык
  • Канада День
  • День ветеранов
  • Полдня
  • День Мартина Лютера Кинга
  • Синко де Майо
  • День Колумба
  • День памяти
  • День труда
  • Ветеранов День
  • День президентов
  • Встреча учитель
  • Вернуться в школу Night
  • День выборов
  • Лунный Новый год
  • Рождения Вашингтона
  • Рождество Линкольна
  • Рождество День выборов
  • осенью вечеринка
  • 1-й день лета
  • 1 день лета
  • 1-й день падения
  • 1 день зимы
  • 1-й день весны
  • Mardi GRAS
  • Mardi Gras
  • Zoo Day
  • Читайте по Америке
  • Ханука
  • Ранний выпуск
  • Общий праздничный билет (3)
  • St.Nicholas Day
  • Kwanzaa
  • Hanukah начинается
  • Hanukah заканчивается
  • Diwali
  • Day
  • Fun Run
  • Gingerbread Day
  • Steem Night
  • Art
  • Музыка
  • тренажерный зал
  • Технологии
  • Компьютеры
  • Испании
  • День открытия
  • Polar Express Day
  • Olympics Начало
  • Олимпиада Конец
  • Олимпиада
  • Nature Day
  • Грамотность Night
  • 60-х годов День
  • 70-х годов
  • 80-х годов День
  • Отпуск
  • Hawaiian Day
  • Прогулка
  • Музей
  • Показать и рассказывать
  • Park
  • Day
  • Day
  • BATCH
  • КРОВА
  • Camp
  • Carnival
  • Book Book
  • YOGA
  • Crazy Hair Day
  • Позднее Start
  • CIRCUS
  • Научная ярмарка
  • День карьеры
  • Супергерой День
  • Play
  • Последний день (вариант 2)
  • Дня транспортных средств
  • Футбольная игра
  • Bike-A-Thon
  • Jump для сердца
  • Грузовик мороженого
  • Кулинария
  • Пищевой автомобиль
  • Гимнастика
  • Мойка
  • Boot Camp
  • Кемпинг
  • Кемпинг
  • Грибилки
  • Церковь
  • Снежные конусы
  • Скрининг (3 на выбор
  • Screence (3 на выбор)
  • Screence Test
  • Vision Test
  • Посещение пожарных истребителей
  • Посещение стоматолога
  • Посещение полиции
  • Доктор визиты
  • Посещение ветеринара
  • Шеф-повар Визиты
  • Художественные визиты
  • Художественные визиты
  • Фермер Посещения
  • Строительный рабочий Посещает
  • Зоутейле для посещения
  • Военные посещения
  • Garner Visits
  • Ученый посещает
  • Metoorolog
  • Визиты механиков
  • Визиты репортеров 9005 0
  • Magician Visits
  • Mailman Visits
  • Apple Phaving
  • Popcorn Phaving
  • Parade
  • тыквенного патча
  • Fired Trip
  • Zoo Trip Trip
  • Hayride
  • Пасхальное яйцо Eyber
  • Багажник или лечение

Добавлено 6/30/19

368

  • Выпускной
  • Выпускной практика
  • Добавлено

  • 5

  • JunenteTh
  • Лунный Новый год
  • Ramadan начинается
  • Ramadan заканчивается
  • EID AL -Adha
  • Rosh Hashanah
  • Йом Kippur
  • Las Posadas
  • Saint Lucia
  • Saint Lucia
  • Passover
  • Savence
  • Кукольный шоу
  • Костюм День
  • 50-х годов
  • 90-х годов День
  • 50 день Школа
  • День дурака
  • День экономии света
  • Пончики wi TH Dudes
  • кексы утром
  • Стержень Night
  • Messy Play Night (Slime Pic)
  • Pride
  • Day
  • HOLI
  • Двойной Дня
  • Дегустация
  • Pie Pie
  • Golf Golf
  • 5

    больше вкусностей Rainbow Design? Проверьте это!

    • Заголовки месячного календаря: яркий дизайн

    • Номера календаря: яркий дизайн

    • Значки календаря: яркий дизайн

    • Центральные плакаты (радужный дизайн)

    • Классные задания (радужный дизайн)

    • Расписание Карточки (радужный дизайн)

    • Правила работы в классе: плакаты, занятия и заметки для родителей (радужный дизайн)

    • Цветные плакаты (радужный дизайн)

    • Плакаты с алфавитом (радужный дизайн)

    • Плакаты с цифрами (радужный дизайн)

    • Плакаты Shape (Rainbow Design)

    Нажмите на ★зеленую звезду★ в верхней части моего магазина, чтобы следовать за мной, чтобы получить 50% скидку на все новые товары в течение первых 24 часов после публикации нового товара! Посетите мой магазин Pocket of Preschool

    Let’s Connect!

    → Мой сайт

    → Facebook

    → Pinterest

    → Instagram

    → Информационный бюллетень

    Подпишитесь на мою рассылку, и вы получите ОГРОМНЫЙ центр письма на семейную тему, наполненный карточками со словами, писчей бумагой, пишущей комнатой , страница учителя с множеством идей о том, как использовать его в классе, и реальные фотографии в действии в классе БЕСПЛАТНО!

    Условия использования

    Pocket of Preschool™️.Приобретая и/или загружая этот электронный файл, вы соглашаетесь со следующими условиями. Только для личного использования/использования в одном классе. Никакая часть этого документа не может быть распространена, размещена в Интернете, скопирована, отредактирована или перепродана. ВСЕ содержимое этого документа защищено авторским правом, включая все содержимое, текст, шрифты и графику. Спасибо за уважение к моему жесткому слову, а также за тяжелую работу художников, чья работа помогла создать этот продукт.

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

    Как добавить пользовательские значки и виджеты на главный экран iPhone в iOS 14

    С iOS 14 вы, наконец, можете проявить творческий подход к домашнему экрану iPhone.

    В течение 13 лет на домашнем экране iOS отображались ряды закругленных квадратных значков приложений, но с обновлением мобильной ОС на прошлой неделе Apple взяла страницу с Android, чтобы разрешить приложения различных форм и размеров, где бы вы ни захотели.Люди сходят с ума от индивидуального внешнего вида своих приложений и виджетов; просто проверьте хэштег #ios14homescreen в Твиттере.

    Например, один пользователь использовал MS Paint для создания забавных любительских иконок. Секрет здесь в приложении «Ярлыки». Читайте дальше, чтобы узнать, как обновить домашний экран iOS.


    Пользовательские значки для вашего iPhone

    Откройте приложение «Ярлыки» на вашем iPhone и коснитесь знака «плюс» (+) в правом верхнем углу экрана, чтобы перейти на страницу «Новый ярлык».Выберите «Добавить действие».

    Коснитесь значка «Сценарии». (Если у вас возникнет желание щелкнуть «Приложения», вы увидите только действия, созданные создателем приложения, такие как создание твита, а не просто открытие приложения.) Нажмите «Открыть приложение», затем выберите значок меню из трех точек. в правом верхнем углу, чтобы показать подробности. Выберите «Добавить на главный экран». Нажмите на нижний, меньший значок рядом с названием вашего нового ярлыка (Новый ярлык — это имя по умолчанию; коснитесь X в кружке, чтобы переименовать его).

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

    Коснитесь Добавить > Готово . Вы можете увидеть мои новые иконки на скриншоте, две последние на главной странице, для Acrobat и AccuWeather. (Я использовал Paint 3D из Windows 10 для значка Acrobat).

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

    Кроме того, вы теряете все опции меню, которые предоставляет официальная иконка при длительном нажатии. Например, иконка WhatsApp предлагает начать чат или сделать снимок по долгому тапу. Единственный вариант с пользовательским значком — это удалить его (в этом меню он называется закладкой, а не приложением) или отредактировать домашнюю страницу.


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

    Рекомендовано нашими редакторами

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

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

    Большинство опций теперь являются сервисами Apple, хотя, поскольку разработчики обновляют свои приложения, в ближайшие дни вы должны получить гораздо больше. Google обновил свои виджеты до нового стиля, как и DuckDuckGo и Night Sky.

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

    Яблочный вентилятор?

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

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

    .