Как сделать иконку для приложения windows
Иконка, значок, символ, образ — каких только названий нет у этих атрибутов. Зачем они нужны, как их правильно использовать и что нужно знать, чтобы не запутать пользователя – всё это расскажем ниже.
Значок интерфейса может быть близок к одному из основных форм: прямоугольник, ромб, круг, треугольник, квадрат. Размытие показывает, что они имеют равный визуальный вес, потому что они превращаются в более или менее одинаковые капли.
В зависимости от формы значка вставьте его в соответствующий кадр оптической сетки. Например, квадратные значки более компактны, чем треугольные или удлинённые.
Чем компактнее значок, тем меньше места ему нужно. Чем более острые края или мелкие детали имеют значок, тем больше занимает пространство для художественной области.
Будьте внимательны, сетка должна помогать, а не ограничивать. Если значок визуально лучше с некоторыми торчащими элементами, пусть так и будет.
Чтобы сделать иконки острыми на экранах с сеткой, придерживайтесь пикселей и отдавайте предпочтение двухпиксельным границам для значков строк. Центрированные двухпиксельные границы обеспечивают достаточную толщину и чёткие силуэты.
Если вы выбираете однопиксельные границы для значков, они должны быть либо внешними, либо внутренними, но не центрированными.
Сцентрированные однопиксельные границы делают значок размытым в масштабе 100%, однако он кажется чётче при увеличении масштаба.
Задайте начальную и конечную точки диагоналей в соответствии с сеткой пикселей. Диагонали с углами 45 °, 30 ° и 60 ° выглядят более острыми, чем диагонали с неравномерными углами, такими как 13,7 ° или 81 °.
Лучше начать набор значков с самого сложного значка. Он определит уровень детализации и поможет сделать иконки того же визуального веса.
Когда значки имеют разные уровни детализации, более резкие привлекают больше внимания пользователя и кажутся визуально более тяжёлыми.
Пространство между соседними элементами значка не должно быть слишком маленьким или непоследовательным во всем наборе. Определите минимальный зазор и держите его повсюду, чтобы избежать «прилипания» контура.
Для значков линий лучше сделать минимальное пространство, равное толщине линии. Линии должны быть либо чётко раздельными либо точно связанными.
В наборах иконок вы можете повторять детали. Избавьтесь от них, чтобы сосредоточить внимание пользователя на важном. Чем меньше графического шума вы показываете, тем яснее его понимание.
Если целевой пользователь уже понимает, с чем он или она работает, нет необходимости повторять это снова и снова. Например, без иконок «@» на конвертах люди всё равно знают, что речь идёт об электронной почте.
Это правило также относится к различным дополнениям — рамкам, фону — вокруг иконки. Если они не помогают читать значок, уберите их.
Не смешивайте отображаемый объём с фронтальным изображением в пределах одного набора иконок. Гармония стилей поможет пользователям распознавать значки и понимать, что они имеют одинаковое значение.
Этот же принцип работает с иконками строк и заполненными значками. Если вы их смешиваете, люди могут подумать, что они имеют разное значение или статус. Конечно, если вы этого не хотите. Например, заполненный значок предназначен для команды ключа, а значки строк — для других команд.
Лучше иметь два варианта каждого значка в интерфейсах. Значок линии — для отключённого или обычного состояния. Заполненный значок — для состояния щелчка.
Перфекционизм — не панацея. Никому не нужны пиксельные совершенные линии ради идеальных линий. Но это важно для правильного, а не искажённого отображения значков в конечном продукте. Имейте в виду минимальное необходимое количество анкеров и отсутствие зазоров между соседними элементами.
Та же история с раздражающими размерами «8.999 px» или «100.001 px». Если фиксирующие фигуры расположены точно, края иконок выглядят острыми. И вы не рискуете получить чрезмерные якоря и промежутки при объединении фигур.
Многие редакторы интерфейсов, такие как Sketch, могут создавать SVG с ненужными элементами — чрезмерными группами, цветными слоями и обтравочными масками.
Смотрите, в Sketch всё выглядит хорошо.
Откройте этот SVG в другом редакторе (например, Adobe Illustrator). Вы заметите пустые слои, ненужные группы и иногда обрезающие маски. Всё это может вызвать проблемы, когда фронтенд-разработчики конвертируют значки в иконку или используют SVG на веб-странице.
Вы можете удалить этот мусор и пересохранить иконку.
Как видите, Sketch SVG (picture.svg) и отредактированный Illustrator SVG (picture_new.svg) имеют разные предварительные просмотры в вашем средстве просмотра файлов. Кстати, можно избавиться от мусора в значке в редакторе кода. Если вы знаете, как выглядит SVG-код, попробуйте удалить ненужные строки данных напрямую.
Конечно, все эти рекомендации исключительно субъективны. Но рекомендуем обратить внимание, где строгие геометрические иконы не выглядят лучшим образом.
Незаполненное пространство. Если на сайте есть пустые места, к примеру, «Нет задач» или «Все электронные письма прочитаны», лучше проиллюстрировать их иконками эмоций или поместить только текст. Эмоциональные иконки могут заставить пользователей улыбаться, в то время как геометрические значки не добавят никакой ценности для взаимодействия.
Маскоты и иллюстрации. Если в вашем интерфейсе есть талисман или иллюстрация, этот тип графики должен быть эмоциональным. В таком случае сложно представить, как дизайнер может изображать персонажа ограниченным выбором форм и придерживаться сетки.
Статья переведена и адаптирована на русский язык студией Netlab. Оригинал тут.
Microsoft любит сама решать, как должна внешне выглядеть Windows. Каждая из версий операционной системы имеет свои особенности стиля интерфейса, концепцию которого определяет компания. Мы, пользователи не можем в один клик целостно сменить дизайн системы на кардинально иной, как это можно сделать с Android, запустив сторонний лаунчер. Но поэтапная настройка кое-каких вещей на свой вкус и цвет в среде Windows всё же нам доступна.
В числе этих вещей – смена предустановленных иконок. Системные иконки на свои можем поменять:
• В свойствах папок,
• В свойствах ярлыков,
• В параметрах значков рабочего стола для системных элементов.
Штатный набор иконок Windows оставляет желать лучшего, и чтобы эффектно преобразить систему, наборы иконок нужно брать у сторонних дизайнеров. А можно создать их самостоятельно, используя, к примеру, материалы из личной фотоколлекции. Как, не обладая особым мастерством в сфере графического дизайна, сделать свои иконки для смены приевшегося вида ярлыков и папок Windows?
1. Веб-сервисы иконок
Точно таким же действиям можно подвергнуть не только контент, представленный на сайте, но и загруженный из сети по ссылке или с компьютера.
2. Утилита AveIconifier2
Локальный способ преобразования изображений в формат иконок может предложить небольшая портативная утилита для Windows - AveIconifier2. Это конвертер форматов изображений «.jpg» , «.bmp» , «.jpg» , «.jpg» в «.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. Приложение «Фотографии» не позволяет переопределять размеры картинок и сохранять их в другие форматы, зато оно может предложить юзабильный инструментарий для обрезки картинок и наложения эффектов.
Открываем нужную картинку в приложении. Выбираем функцию «Изменить».
Далее – «Обрезать и повернуть».
Устанавливаем пропорции «квадрат». Это маска, с помощью которой далее можно будет выбрать участок для обрезки с идеально ровными пропорциями длины и ширины.
Подтягиваем маску на нужный объект картинки. По итогу нажимаем «Готово».
При необходимости применяем эффекты цветокоррекции, виньетирование, устраняем красные глаза, если это любительское фото, и т.п. В итоге сохраняем копию изображения.
Помощь пенсионерам в изучении компьютера и интернета, компьютерные курсы для пенсионеров бесплатно, бесплатные уроки по изучению компьютера и интернета для пенсионеров, программы для работы на компьютере, все для пенсионера в одном месте, полезная информация для пенсионеров, самообучение пенсионеров, пенсии и пособия, увлечения и досуг пенсионеров
Как создать свою иконку в Windows, если мы хотим внести некое разнообразие в стандартное оформление иконок. Некоторые пользователи для изменения вида иконок скачивают готовые наборы из интернета. А можно и самим создать свою уникальную иконку, которая будет отвечать всем нашим требованиям. И использовать для создания такой иконки мы будем стандартное приложение ОС Windows.
Чтобы создать свою иконку в Windows, воспользуемся стандартным графическим редактором Paint. Это приложение входит в список стандартных программ и есть на каждом компьютере. Нажимаем на кнопку ПУСК, в списке программ находим строку «Стандартные – Windows». Нажимаем на треугольник в конце этой строки, чтобы раскрыть весть список стандартных приложений. Затем нажимаем на Paint.
Откроется окно редактора Paint. Далее нам необходимо загрузить в этот редактор картинку, из которой мы будем создавать иконку. Жмем на вкладку «Файл» в левом верхнем углу редактора, затем на «Открыть». Откроется окно Проводника. В нем выбираем папку с изображениями и выделяем картинку, с которой будем далее работать. Нажимаем на «Открыть». Если ваша картинка окажется огромного размера, то измените её на вкладке «Вид».
Теперь нам надо обрезать нашу картинку. Нажимаем на вкладку «Выделить» и выбираем Прямоугольную область для обрезки.
Выделяя для обрезки нужную область, оставляем с правой стороны немного больше свободного места. Это нужно для того, чтобы потом выровнять стороны картинки до размеров квадрата. Нажимаем на «Обрезать». У нас сохранится выделенная область, а все остальное за границами рамки удалится.
Вот теперь можно обрезать картинку с правой стороны. Внизу в редакторе Paint вы сможете видеть изменения в результате обрезки. Обрезаем правую сторону до тех пор, пока ее размер не сравняется с остальными сторонами картинки. Размеры моей картинки 307 Х 307 пкс. Это большой размер. Надо его уменьшить.
Нажимаем на вкладку «Изменить размер». Ставим галочку на «пиксели». Указываем новый размер 128 Х 128. Не забудьте отметить галочкой сохранение пропорций. Нажимаем на кнопку ОК.
А теперь нам необходимо сохранить эту картинку в нужном формате. Для нашей иконки следует выбрать формат BMP. Жмем на вкладку «Файл», выбираем «Сохранить как..» и далее нажимаем на «Изображение в формате BMP». Выберите на компьютере папку, в которую вы сохраните эту картинку. Можно создать заранее новую папку и назвать её «Иконки». После того, как сохраните картинку, закройте редактор Paint . Он нам больше не нужен.
Отправляемся в папку, в которую мы сохранили нашу картинку. Нажимаем на эту картинку правой клавишей мыши. В открывшемся контекстном меню выбираем команду «Переименовать».
Присваиваем какое-то имя файлу. Я написала ikonka. А справа после точки вместо формата bmp пишем ico. Появится окошко с предупреждением о том, что файл может стать недоступным. Не беспокойтесь, файл будет доступен. Нажимаем на кнопку «Да».
Как создать свою иконку в Windows вы теперь знаете. А, как ее применить? Как изменить стандартную иконку на только что созданную? Сначала выберем папку. Нажимаем на нее правой клавишей мыши. В контекстном меню нажимаем на «Свойства».
Откроется окошко, в котором на вкладке «Настройка» меняем старый значок папки на новый.
Если опять захотите изменить иконку папки, то пройдите тем же путем, который описан выше. Можно восстановить то, что было ранее по умолчанию или выбрать другой значок.
Другие похожие статьи на этом сайте
Планировщик заданий Windows 10. Планировщик заданий нам нужен для различных настроек компьютера. Допустим, мы хотим настроить его автоматическое отключение после…
Изменить значок папки в Windows 10 при желании можно легко и просто. По умолчанию в ОС Windows все папки выглядят…
В этом посте мы покажем вам, как создать значок в Windows с помощью Microsoft Paint 3D или любого бесплатного программного обеспечения для создания значков или онлайн-инструментов. Вы даже можете преобразовать картинку в иконку. Создайте столько иконок, сколько захотите. Когда значки готовы, вы можете изменить значки для ярлыков на рабочем столе, папок и т. Д.
Как сделать иконку для Windows 10
Хотя некоторые параметры помогают создать значок с нуля, другие варианты, описанные в этой публикации, могут напрямую преобразовать изображение в значок. Предлагаемое программное обеспечение и услуги для создания иконок:
- Раскрасьте 3D.
- ICO Convert.
- Редактор X-Icon.
- Младший редактор иконок.
- Быстрый Any2Ico.
Давайте проверим, как с их помощью сделать иконку для Windows 10.
1]Paint 3D
Чтобы создать значок с помощью Paint 3D в Windows 10, запустите его с помощью меню «Пуск» или поля поиска. После этого создайте новый проект, используя Меню. Когда проект создан, используйте доступные инструменты, видимые в верхней части его интерфейса. Вы также можете вставить изображение (PNG, JPG, ICO, BMP, TIFF и т. Д.) С ПК и использовать инструменты рисования для создания своего значка.
Для каждого из выбранных инструментов справа отображается несколько параметров. Например, если вы выбрали инструмент «Текст», вы можете использовать такие параметры, как добавление текста в 2D или 3D форме, изменение шрифта текста, цвета текста, заливки фона, выделения текста курсивом, полужирным шрифтом, подчеркиванием и т. Д. Аналогичным образом, если вы выбрали Кисти инструмент, тогда вы можете использовать Маркер, Ручка для каллиграфии, Мелок, Пиксельное перо, Аэрозольи т. д. Толщина и цвет для выбранной опции также можно установить с помощью боковой панели.
Просто выберите инструмент, и параметры выбранного инструмента появятся на правой боковой панели. Продемонстрируйте свое творчество и улучшите свой значок.
Это последний шаг. нажмите Сохранять и сохраните значок в любую папку на вашем компьютере.
2]Конвертировать ICO
ICO Convert удобен, когда у вас уже есть изображение в PNG, BMP, или же JPG формат, который вы хотите преобразовать в файл значка. Однако это не просто сервис конвертации иконок. Есть несколько интересных функций, таких как обрезать изображение, используйте разные формы (или стили), и размер получить иконку. Все эти функции делают его хорошим сервисом для создания иконок.
Эта ссылка откроет свою домашнюю страницу. Загрузите изображение поддерживаемого формата (до 50 МБ). Когда изображение загружено, обрежьте его до выбранной области или используйте все изображение. После этого выберите доступные стили. Есть 10+ стили, такие как форма сердца, квадрат, круг и т. д. Выбирайте стили или просто игнорируйте их.
Наконец, используйте Конвертировать ICO кнопка. Вы получите zip-файл, который вы можете скачать, чтобы сохранить значки, доступные в разных стилях.
3]X-Icon Editor
Сервис X-Icon Editor предоставляет три способа создания значка. Вы можете импортировать существующее изображение и преобразовать изображение в значок, создать значок с нуля и создать значок вместе с загруженным изображением и инструментами для создания значков. Это обеспечивает текст, карандаш, щетка, пипетка, линия, прямоугольник, круг, и ластик инструменты. Вы можете создать значок четырех размеров: 32 * 32, 24 * 24, 16 * 16, и 64 * 64. После этого вы можете сохранять иконки в формате ICO одну за другой.
Чтобы создать значок с помощью этого сервиса, откройте его домашняя страница. После этого импортируйте изображение или начните создавать свою иконку с помощью доступных инструментов. Вы также можете изменить фон значка, используя любой из четырех доступных фонов. Предварительный просмотр значка отображается в центральной части его интерфейса, чтобы помочь вам увидеть, насколько хорошо выводится. Когда вы все сделаете, используйте Экспорт кнопку, чтобы загрузить значок.
4]Младший редактор иконок
Программа Junior Icon Editor имеет несколько интересных функций, которые делают ее хорошей программой для создания значков. Вы можете открывать разные вкладки для создания отдельных иконок в едином интерфейсе. Он также позволяет вам добавить существующее изображение и отредактировать его, чтобы создать значок или сделать значок с самого начала. Оно имеет палитра цветов, ластик, закругленный прямоугольник с заливкой, эллипс, прямоугольник, аэрограф, карандаш, текст, изогнутая линия, и другие инструменты для создания значка. Вы также можете выбрать любой из ваших любимых цветов для изготовления значка.
Чтобы создать значок, загрузите это программное обеспечение. После установки откройте его интерфейс и используйте Файл меню, чтобы открыть новый файл значка или вставить изображение. Он поддерживает ICO, PNG, XPM, BMP, и PNG форматировать изображения.
Когда новый файл будет создан, используйте Инструменты меню на левой боковой панели, чтобы начать создание значка. Меню с правой стороны помогает выбрать цвета, установить непрозрачность фона, прозрачность переднего плана и предварительно просмотреть значок. Проявите свое творчество и сделайте красивую иконку. Чтобы сохранить окончательный результат, используйте Сохранить как вариант в Файл меню.
5]Быстрый Any2Ico
Ссылка для скачивания здесь. Это портативный программное обеспечение, поэтому вам не нужно его устанавливать. Просто запустите его EXE, и его интерфейс откроется. У вас будет три варианта: добавить файл изображения, чтобы преобразовать его в значок, добавить двоичный файл или извлечь значок из окна приложения. Используйте любую опцию для добавления входного изображения.
Когда изображение получено из источника, выберите выходную папку. По умолчанию он генерирует значок в формате ICO. При желании вы можете изменить его на формат PNG, выбрав Сохранить как PNG вместо ICO вариант. После этого выберите размер значка. 512 * 512, 16 * 16, 256 * 256, 24 * 24, 64 * 64, и другие размеры доступны.
Это последний шаг. Нажмите Извлеките это! и сохранит иконку в заданной вами папке.
Графические дизайн-иконки пригодятся для самых разных дизайн-задач. Если вам нужно сделать иконку быстро, просто откройте онлайн-конструктор – там создать ее проще всего. В VistaCreate есть удобный конструктор иконок – в нем можно делать их бесплатно и под свои задачи. Создавать иконки еще никогда не было так просто!
Выберите шаблон VistaCreate для редактирования
Создавайте иконки онлайн в VistaCreate – бесплатном конструкторе иконок для мобильных и десктопов
Выбрать VistaCreate – это как позвать в команду крутого дизайнера иконок. С этого момента забудьте о сложностях в создании иконок – теперь вы можете делать в разы больше крутых логотипов, инфографики и контента для сайтов! Онлайн-конструктор иконок – простое решение, благодаря которому наполнять свою контент-сетку будет по-настоящему просто.
Создавайте иконки бесплатно
Без иконок веб-дизайнеру никуда. Ни одна страница, мобильная платформа или приложение без них не обходится. В VistaCreate вы можете создавать иконки онлайн своими руками – бесплатно и экономя массу времени.
Добавьте надписи
Море бесплатных графических иконок
Вы можете не только использовать готовые логотипы в шаблонах, но и создавать свои – от иконок для кнопок на сайтах до разделителей для блогов. Хорошо, когда есть разные варианты! Создавайте иконки легко – всего несколькими кликами, используя контент из вкладки «Объекты» в VistaCreate.
Добавьте фон
Любой создатель иконок знает, что подход «чем меньше, тем лучше» – ключ к хорошему графическому дизайну. Иконка – это очень простой объект, и чтобы он заиграл по-новому, достаточно добавить фон. В конструкторе иконок VistaCreate сделать это по-настоящему просто.
Загружайте свой контент
Если не получается найти или создать ту иконку, которая нужна, добавьте свою! В шаблон можно перенести файлы в форматах jpeg, png, img – и очень быстро встроить их в дизайн-композицию, которую вы создали.
Загружайте и делитесь
Когда иконка будет готова, ее можно загружать. В конструкторе VistaCreate иконки можно сохранять в нужных вам форматах – просто выберите любой из списка. Да, создавать иконки в VistaCreate и правда очень просто.
Что важно знать про иконки для графического дизайна
Создавая иконки в онлайн-конструкторе, вы получаете вечный источник крутой графики. Иконки удобно использовать в информерах, премиум-контенте, рекламных баннерах и постах со скидками – а чтобы сделать их, нужен всего один онлайн-конструктор. И еще иконки не требуют перевода – они говорят со всем миром на одном понятном всем языке.
Читайте также: