Как Изменить Размер Наборов Значков В Photoshop?

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

Однако часто эти наборы значков доступны только одного размера — например, набор значков http://designdeck.co.uk/a/1245) имеет размер только 48x48 пикселей.

Как лучше всего изменить размер этого значка, установленного на 24x24px или 32x32px в Photoshop?

Я не смог найти в Интернете хорошего учебника для новичков. Спасибо

#adobe-photoshop #icon #resize

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

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

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

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

  

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

  

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

  

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

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

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

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

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

Эти правила фактически соблюдаются в Значки Windows XP.

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

Посмотрим, что произойдет. Это изображение:

становится:

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

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

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

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

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

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

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

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

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

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

• Выделите круг и выберите Edit > Transform > Scale . Be sure that the center point in the Transform control proxy is selected, and toggle the link between the W and H fields so your scaling is proportional.

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

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

• Выбирать оба слой формы «g» и текстовый слой «+» и выберите Edit > Transform > Scale as before, but this time, enter 80 in the W or H field and press Enter/Return.

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

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

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

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

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

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

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