Как изменить размер наборов иконок в Photoshop?

Ответ относится как к векторным, так и к растровым иконкам.

Если качество имеет значение, вы не можете.

• Крупные значки содержат больше деталей. Те детали, которые хороши на значке 128×128, будут раздражать на значке 32×32; вместо того, чтобы помочь визуально идентифицировать значок, они сделают обратное. Например, большой значок клавиатуры может содержать все клавиши клавиатуры. Для иконки 16х16 достаточно четырех клавиш: либо рисуешь четыре и пользователи понимают, что это клавиши, либо рисуешь больше и все становится плоским.

  Попробуем посмотреть, что получится. Я беру графически отличный значок клавиатуры, используемый в Windows 7:

  

  Теперь сравните рядом уменьшенную иконку слева и иконку, размер которой я изменил в Photoshop из более крупной:

  

  Тот, что слева, довольно четкий. Справа, по-моему, КПК странной формы с большим экраном, двумя кнопками внизу экрана и одной большой кнопкой в ​​самом низу. Давайте посмотрим, что произойдет, когда мы перейдем к еще меньшему масштабу:

  

  Значок слева, используемый Windows 7, довольно четкий, несмотря на низкое разрешение. Иконка справа, увеличенная версия большой, совершенно бессмысленна: это может быть КПК, или серебряная коробочка, или что-то еще. На самом деле выглядит как калькулятор PF-19686592 для меня.

Помимо уровня детализации объекта, необходимо учитывать и другие факторы:

• тень, например, хорошо иметь на иконке 64×64, но та же самая тень будет выглядеть глупо на фавиконе 16×16.

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

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

Этим правилам фактически следуют значки Windows XP .

Это означает, что если UX и качество дизайна имеют значение, вы не можете просто уменьшить масштаб значка и ожидать, что он будет таким же четким, как исходный. Учитывая набор значков, на который вы ссылаетесь в своем вопросе, вы, очевидно, не хотите сохранять круг вокруг значка для значков 24 × 24: удалите круг и сохраните только содержимое.

Давай посмотрим что происходит. Это изображение:

становится:

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

Если качество не имеет значения, вы просто изменяете размер изображения.

Чтобы добиться лучшего качества, вы все равно можете:

• Сохраняйте то же соотношение (очевидно),

• Изменение размера путем деления на кратное двум: из 128×128 можно получить 32×32, но создание значка 41×41 может дать странные результаты,

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

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

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

Вот как масштабировать этот набор с 48 пикселей до 24 пикселей, работая с PSD:

• Откройте набор слоев для одной из иконок. Давайте выберем значок Google+.

• Выберите круг и выберите Edit > Transform > Scale. Убедитесь, что выбрана центральная точка в прокси-сервере управления преобразованием, и переключите связь между полями W и H, чтобы масштабирование было пропорциональным.

• Введите 50 в поле W или H и нажмите Enter/Return.

На данный момент ваш круг имеет диаметр 24 пикселя, но "g" и "+" слишком велики.

• Выберите слой формы «g» и текстовый слой «+» и выберите, Edit > Transform > Scaleкак и раньше, но на этот раз введите 80 в поле W или H и нажмите Enter/Return.

• Сдвиньте слои «g+», чтобы центрировать их в круге.

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

Аналогично обработайте остальные значки. Круги определяют границы, поэтому все они имеют масштаб 50%. Величина, на которую вы масштабируете каждую графику, будет разной (значок Skype работает лучше при 75%, чем при 80%), поэтому вам придется немного поэкспериментировать. Опыт научит вас по ходу дела.

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

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

Я всегда делаю свои иконки в векторном формате (используя Illustrator) — таким образом я могу просто экспортировать свое искусство в любом желаемом размере и в любом желаемом формате. Ну не совсем так, так как мне приходится подстраивать иконки под выравнивание по пикселям. CS5 хорошо справляется со своей задачей, но не решает всех проблем...

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