Как часто вы меняете скриншоты в App Store или загружаете новое приложение в Google Play? Мне приходится сталкиваться с задачей подобного рода не чаще, чем раз в полугодие. За это время знания о процессе стираются и приходится вспоминать всё заново — гуглить статьи, переделывать множество макетов.
В один прекрасный день я решила — хватит это терпеть! Я собрала в одной статье всю необходимую краткую информацию и ссылки на официальные источники, а также подготовила шаблон. Эти артефакты помогут вам быстро и практически безболезненно подготовить нужный графический контент для публикации вашего приложения в App Store, Google Play или Huawei AppGallery.
Шаблон можно загрузить для Figma или Sketch.
В каждом шаблоне есть 3 блока — App Store, Google Play и Huawei AppGallery, где собраны шаблоны для подготовки графического контента — скринов и иконок приложений. Все элементы уже нарезаны под требуемые платформой размеры. Вам останется разместить свой контент и скачать, нажав одну кнопку.
Как поменять размер иконок на iPhone: быстрый способ
Добавлю довольно банальную вещь — мир IT развивается очень быстро. Материалы в этой статье актуальны на конец 2020 года. Также будут приведены ссылки на первоисточники. С ними вы сможете ознакомиться, чтобы дополнительно убедиться в актуальности используемой вами информации.
Начнём.
Саша, дизайнер e-Legion
Иконки для приложения должны отвечать следующим требованиям:
- отсутствует заданный корнер-радиус (углы не скругляются),
- отсутствуют слои с прозрачностью,
- слои слиты (flatten),
- формат png.
Размеры иконки приложения для смартфона
Источник: vc.ru
12 принципов создания успешной иконки
Привет! Хотел поделиться своим опытом работы с иконками. Я пользуюсь этими приемами практически каждый день и мне было интересно и полезно поделиться своим опытом, статья подойдет новичкам и тем, кто впервые организовывает иконки в библиотеке.
Тут мы сосредоточимся на работе в Figma и приёмами, что позволяют сделать всё правильно.
1. Определитесь с размером
Перед созданием иконок нужно определиться с их размером. Размер обычно выбирают исходя из кратности базовой ячейки в проекте. Например, если базовая ячейка равна 4 (проверенная классика!), то можно использовать размер 24×24. Если базовая ячейка равна 5, то 25×25.
Я предпочитаю использовать 24х24 по следующим причинам:
- Достаточно крупно, чтобы работать с деталями
- Четные значения позволяют легче работать с симметрией
- Некоторые гайды рекомендуют использовать именно этот размер
2. Собирайте референсы
Это Самый ПРОСТОЙ и РАБОЧИЙ Способ Увеличить ИКОНКИ на ANDROID Устройстве!!!
Обычно я беру 3-4 понравившихся мне примера и на основе них рисую свой вариант, комбинируя какие-то элементы из разных иконок. Часто в процессе возникает идея, кардинально отличная от найденных примеров, а иногда она бывает даже хорошей.
В процессе максимально стараюсь соблюсти общую стилистику иконок, толщину линий, углы скругления и вес, для этого я сравниваю новую иконку с уже имеющимися в наборе.
3. Придерживайтесь одной толщины линий
Пожалуй, это основа при создании иконок и главный элемент стиля в вашем наборе — используйте всегда одну и туже толщину линий, я использую толщину в 2 px, а так же углы скругления на элементах.
4. Используйте одни и те же углы скругления
Используйте одни и те же внешние углы скругления, внутренний радиус может, а иногда и должен отличаться в внешнего, зачастую он меньше, это обусловлено балансом в деталях. То есть, если у вас внешний радиус 2 px и внутренний 1 px — он должен быть таким во всех иконках в наборе. Но и в этом случае возможны исключения, где для баланса и лучшего внешнего вида внутренние углы или даже один из них следует сделать, скажем 0,5 — это абсолютно нормально.
5. Держите баланс в деталях
Больше не значит лучше, тут важен баланс. Понимание нужного количества деталей приходит в процессе работы над иконкой — нет каких-то конкретных приемов, просто старайтесь не перегружать иконку, попробую показать на примерах:
6. Не забывайте про охранные поля
Если вы определились с размером ячейки, это не означает, что ваша иконка должна полностью заполнять его, смотреться хорошо она будет только в случае когда соблюдается баланс, и охранные поля как раз нужны для этого. Нужно стараться попадать в них всегда, но и тут иногда бывают исключения, когда из-за своей формы иконке требуется больше пространства для заполнения, это нормально.
7. Следите за визуальным весом
Это весьма субъективный пункт, но попробуем с ним разобраться. Нужно постараться делать так, чтобы если поставить несколько иконок в один ряд они выглядели равновесными, иконки не должны выбиваться из общей группы, взгляд не должен спотыкаться о какую-то из иконок. Вы наверняка заметите, что какую-то из иконок лучше будет немного увеличить или наоборот уменьшить, а где-то добавить деталей. Если вы разобрались с толщиной линий, углами и охранными полями, то у вас все шансы попасть в нужные пропорции и вес.
8. Объединяйте элементы шейпа и настраивайте их правильно
Так же важно сливать шейпы в единую форму после того как вы завершили работу (Boolean forms — Union selection), тк если вы решите переиспользовать иконку в большем размере у вас это не получится.
Для этого нужно:
- Выделить все элементы иконки и объединить их в один шейп(Union selection)
- Далее выделяете шейп и расплющиваете его — Flatten (Command+E), с этого шага вы не сможете редактировать детали иконки тк все отдельные шейпы будут слиты в один шейп. Этот шаг нужен для уменьшения веса файла и корректного отображения при экспорте.
- Затем готовой иконке задаете настройки: Constraints — Scale.
Update: В Фигме появилась возможность сразу сливать слои используя Flatten с возможностью редактировать полученный шейп. Очень удобно!
При правильных настройках иконки отлично масштабируются и их можно использовать во множестве случаев
9. Используйте один цвет для заливки
Всегда используйте для заливки иконок какой-то дефолтный цвет, который всех будет устраивать и разумеется он должен быть в вашей библиотеке цветов.
Казалось бы это очевидный пункт, но иногда про него забывают и ты обнаруживаешь в библиотеке иконки, которые не залиты нужным цветом, а представляют нечто в виде #366676
Когда рисуете иконку, для удобства работы вы можете залить подложку любым цветом, главное чтобы он был достаточно контрастным, чтобы работать с линями было легко. Классический вариант: черные, или темно-серые иконки и белый фон.
10. Дополнительная сетка
Я обычно не использую какую-то специфическую сетку, тк есть пиксельная сетка(Shift+’) и обычно этого достаточно для того чтоб собрать сбалансированную иконку, но если попробовать и дополнительная сетка даст вам уверенность и облегчит работу, то почему бы и нет.
11. Называйте иконки по изображению, а не по смыслу
Непродуманные названия иконок в библиотеке могут сильно усложнить вам жизнь. Называйте иконки на основе того, что на них изображено, а не на основе их смысла. Например, для иконки «Избранное» используйте название «heart», а для иконки «Рейтинг» — «star». Это поможет легче их искать.
- Если в вашем проекте используется как лайновые, так и залитые иконки, используйте одинаковое название, но добавьте «filled» для залитых иконок
- Если вы используете иконки разных размеров, добавляйте к названию соответствующие обозначения, например «s» для размера 16х16рх
12. Храните иконки в подключаемой библиотеке
Можно хранить все в одном файле: цвета, шрифты и компоненты, в общем всё в виде единой библиотеки, если у вас небольшой продукт, то в целом, это оправдано.
Но, если вам нужны только иконки, или они используются в нескольких проектах, я рекомендовал бы хранить их в отдельной библиотеке. Так проще подключать ее только к нужным файлам, удобно обновлять и настраивать.
Надеюсь было полезно, спасибо!
Источник: habr.com
Размер иконки для программы
Термины
gif-формат, 256-цветная картинка — формат с использованием максимум 256-цветной палитры, прозрачность имеет 2 варианта: прозрачный и непрозрачный
png-формат, 32-битная картинка — 32-битный формат (24 бита на цвет и 8 бит на альфа-канал прозрачности), прозрачность имеет 256 ступеней.
ico-формат — ico файл, включающий несколько размеров и разрешений. Обычно ico для Windows XP содержат 16*16*256цв,32*32*256цв,48*48*256цв,16*16*32бит,32*32*32бит,48*48*32бит форматы. Ico файлы приложений для Windows Vista/7/8 содержат дополнительно 256*256 размеры. Подробнее: XP Icons, Vista Icons. Иконки для Windows Vista/7 также называются иконками в стиле Aero.
Требования к иконкам
Иконки должны иметь четкие и понятные очертания, прозрачный фон. Более крупные иконки должны иметь большую детализацию, чем мелкие. Не следует пытаться сделать в 3d сложные иконки с размерами менее 24*24.
Освещение обычно направлено слева сверху.
Избегайте линий с небольшим наклоном. На них могут образоваться ступеньки.
Иконки должны хорошо смотреться на черном, белом, светло-сером фоне.
Далее на примерах показаны основные ошибки.
Четкость. Если высокодетализированный объект не получается отобразить в мелких масштабах — нужно отбросить детали.
Сглаживание. PNG формат должен иметь гладкие контуры.
Четкие линии. Вертикали, горизонтали обычно делаются без сглаживания.
Насыщенные цвета. Иконки не должны быть блеклыми.
Краевые эффекты. При уменьшение окружностей, касающихся края иконки, могут возникнут дефекты.
Оборванная тень. Тень должна помещаться в иконку целиком.
Цвет тени. Тень не должна быть белесой, она должна иметь черный оттенок. Должна постепенно исчезать.
Gif-файлы не должны иметь белесых пикселов на контуре
Ditheriring при создании gif файлов. Актуально для размеров крупнее 32*32.
Для создания gif-файлов крупнее 32*32 в фотошопе нужно использовать опции:
Программы.
Для объединения gif и png файлов в ico-файлы, для доводки иконок, для работы с icc-коллекциями файлов использовать программу IconLover. Либо программу Студия Иконок в случае проблем с английским языком.
Примеры иконок
Другой пример:
Статьи. Как делать иконки.
Copyright (C) 2000-2022 Aha-Soft.
Студия Иконок — русская версия популярного редактора иконок для Windows. Поддерживает множество графических форматов, работает с библиотеками иконок. Включает русский, английский, украинский и другие интерфейсы.
IconLover — эта программа для создания иконок позволяет редактировать все виды растровой графики, необходимые в цикле разработки программного обеспечения, включая иконки для Windows Vista и XP, кнопки, курсоры, тулбары, значки. Всё в одном приложении.
ArtCursors позволяет создавать, изменять, конвертировать курсоры и собирать их в библиотеки. Поддерживает статические и анимированные курсоры.
Icon to Any конвер- тирует иконки и курсоры в BMP, JPG, PNG, GIF, ICO, CUR и другие форматы. Этот мастер найдет вам иконки и сделает из них GIF изображения для использования на Web странице.
Источник: www.aha-soft.com