Как экспортировать значок разных размеров без размытия краев?

Мне нужно экспортировать значки для приложения Android в 4 разных размерах: 36x36, 48x48, 64x64 и 72x72 px. Оригинальный размер иконки, которую я создал, имеет размер 272x272 px.

Например, посмотрите на это изображение:

введите описание изображения здесь

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

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

Каков правильный способ (если есть) получить четкие края для каждого размера значка, который я экспортирую?

PS: Один из способов - создать каждую иконку в отдельном файле с размером, который мне нужен, и выровнять его по пиксельной сетке. Но для этого мне нужно будет создавать новую иконку каждый раз, когда мне нужен другой размер. Если бы это был единственный способ сделать это, я бы так и сделал , но действительно ли профессиональные дизайнеры так поступают? например, вы можете увидеть f логотипа Facebook. Он четкий на любом устройстве. Так это реальность, что они разрабатывают каждый размер индивидуально для одного и того же логотипа?

Установите интерполяцию на ближайшую окрестность. В любом случае, это удивительно похоже на ваш последний вопрос. И имеет такую ​​же проблему
Да, может показаться, что это как последний вопрос, но я узнал кое-что хорошее из последнего вопроса. Я хотел узнать больше о следующей части, поэтому задал вопрос именно здесь. (Мне нужно знать больше о той 1/3 вещи, о которой вы рассказали) :)
Так что же это за "интерполяция"? Я готов об этом. Но это снизит точность пропорций?
Что вы думаете о моем PS?
«интерполяция» доступна в Illustrator?
«Так это реальность, что они разрабатывают каждый размер отдельно для одного и того же логотипа?» Да. Там действительно часто нет короткого пути к отличным результатам.
@ Скотт, я прошу вас взглянуть на ответ Питера Вальзера здесь graphicdesign.stackexchange.com/questions/21455/… Он упомянул некоторую технику и дал ссылку. Ссылка была больше о дизайне логотипа, а не о том, как добиться четких краев с помощью навыка «промежутков сетки», как он сказал. Итак, есть ли какой-либо другой источник, чтобы я мог читать, учиться и пробовать его? Я думаю, это было бы очень полезно. Я также буду признателен, если вы ответите об этом здесь :) Спасибо.
@VikasKumar ближайший сосед — это настройка масштабирования пиксельных изображений в PS. В данном случае это похоже на растровую версию привязки к пикселю.
Вам нужно проектировать с учетом ваших масштабов, поэтому я призываю вас сначала спроектировать вещь с самым низким разрешением. Вы можете легко масштабировать и добавлять детали.
Я только что попробовал. Я разработал размер 24x24 пикселей и увеличил его до 36x36. У меня такое же сглаживание, следовательно, размытие краев. Таким образом, ваша фраза «Вы можете легко масштабировать и добавлять детали » больше связана с исправлением этих пикселей размытия вручную при увеличении ИЛИ больше о разработке с «золотым сечением», чтобы оно автоматически регулировало ширину и интервал при масштабировании до фиксированного размера?
Могу ли я улучшить этот вопрос, чтобы удалить 1 отрицательный голос?

Ответы (3)

Два быстрых ответа:

1) Это «размытие» является либо сглаживанием, либо выравниванием без пикселей: если выравнивание, ваш рабочий процесс PS позаботится об этом, хотя и с большим количеством дополнительной работы; если сглаживание, то не будет.

2) Нет, большинство из нас занимается дизайном иконок не так: мы склонны использовать векторные приложения, которые поддерживают вывод в нескольких разрешениях: мой набор инструментов включает Adobe Illustrator, Adobe InDesign, Affinity Designer, Inkscape, Sketch и концепции для iPad Pro. .

На данный момент я в основном использую Affinity Designer для работы со значками, который имеет мощную функцию экспорта с определениями фрагментов с несколькими разрешениями, что позволяет мне создавать значок и одним щелчком мыши настраивать экспорт значков всех подходящих разрешений и форматов для Mac OS. , Windows, iOS и Android.

Как было указано выше, вы можете использовать Adobe Photoshop для создания векторных изображений, но это не основной вариант использования приложения, поэтому оно неуклюжее и неуклюжее; Учитывая низкую цену (29 евро за бессрочную лицензию), для меня Affinity Designer не составлял труда, учитывая его мощность.

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

Лучше всего проектировать в наименьшем размере, который вам нужен, а затем масштабировать вверх. Возможно, это видео будет полезно: https://vimeo.com/169809377

Масштабирование вверх также вызывает ту же проблему. Значит, мне нужно исправить даже это?
@VikasKumar вы получите размытые края, как только масштабированная версия не будет кратна вашему базовому размеру, потому что тогда ваш дизайн будет располагаться не на определенных пикселях, а между ними, заставляя фотошоп использовать псевдонимы. Поэтому вам нужно внести коррективы, чтобы ваш дизайн снова отображался на полных пикселях. Я не знаю о фотошопе, но многие другие программы (например, Illustrator) имеют такие команды, как «сделать пиксели идеальными», которые изменят вашу работу, чтобы она снова подходила. helpx.adobe.com/illustrator/how-to/pixel-perfect.html
Но использование таких инструментов, как выравнивание по пиксельной сетке, разрушает соотношение.
@VikasKumar хорошо, насколько я знаю, это ваши единственные варианты: - жить с размытыми краями - настроить свой дизайн так, чтобы он был идеальным в пикселях - выбрать экспортные размеры, кратные вашему базовому размеру (учитывая, что ваш базовый размер уже в пикселях -отлично) Кроме этого, я, к сожалению, понятия не имею, как достичь желаемого результата :(

В фотошопе. Используйте форму, а затем преобразуйте ее в смарт-объект вместо растеризации слоя.

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

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

Вы получите те же размеры с большей точностью.

Как экспортировать значок разных размеров без размытия краев?
СпросиСетьПолитика конфиденциальности1y, 0v