Лучший рабочий процесс для дизайна иконок: начать с малого или начать с малого?

При разработке значков, которые должны быть доставлены в нескольких размерах, вы начинаете с меньшего размера, а затем масштабируете до больших размеров? Или вы начинаете с большого и уменьшаете?

Есть несколько преимуществ для обоих. Я пытаюсь усовершенствовать свой рабочий процесс, поэтому было бы полезно узнать мнение других. Давайте предположим, что мы проектируем иконку Mac или Windows, где размеры связаны - они в основном точные кратные.

Для OS X стандартные размеры значков приложений :

• 16 × 16, 32 × 32, 128 × 128, 256 × 256, 512 × 512 и 1024 × 1024.

Для Windows 7 стандартные размеры значков приложений :

• 16x16, 32x32, 48x48, 64x64 и 256x256.

Для iOS стандартные размеры значков приложений :

• 29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 и 1024x1024.

Для Android стандартные размеры значков приложений :

• 36x36, 48x48, 72x72, 96x96 и 512x512.

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

Метод 1: Уменьшение

1. Создайте значок самого большого размера (часто 1024 × 1024), используя векторы и созданные эффекты, например стили слоев.

2. Дублируйте и уменьшайте масштаб документа, чтобы создать меньшие размеры.

3. Сделайте необходимые изменения и сохраните окончательное изображение.

Это здорово, но упускает возможности для выравнивания элементов в сетке, которая подходит для разных размеров. Использование грубой сетки для привязки, кажется, немного помогает. Например, документ 1024 × 1024 с сеткой 16px означает, что точки привязки дадут вам пиксельные защелкивающиеся края до размера 64 × 64. Идея состоит в том, чтобы проектировать с деталями, но привязываться к сеткам меньшего размера, чтобы вы достигли этих важных позиций.

Способ 2: увеличение

1. Создайте значок наименьшего или одного из самых маленьких размеров (часто 32 × 32 или 64 × 64), используя векторы и создаваемые эффекты, например стили слоев. Обычно в 16 × 16 деталей недостаточно, чтобы использовать его в качестве отправной точки.

2. Дублируйте и масштабируйте документ вверх, чтобы создать большие размеры, и уменьшите для крошечных размеров.

3. Сделайте необходимые изменения и сохраните окончательное изображение.

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

Способ 3: масштабирование вверх, затем вниз

1. Создайте грубый дизайн меньшего размера (часто 32 × 32 или 64 × 64), используя векторы и созданные эффекты, например стили слоев.

2. Масштабируйте документ до самого большого размера и добавляйте детали. Это точка, где иконка отполирована и добавлена ​​большая часть деталей.

3. Дублируйте и масштабируйте документ для всех меньших размеров.

4. Сделайте необходимые изменения и сохраните окончательное изображение.

Похоже, это лучший метод, с за и против других методов. В качестве слегка связанного момента это также означает, что я обычно создаю иконки iOS с разрешением 912 × 912, потому что это ровно в 16 раз больше, чем у iPhone значок без Retina размером 57 × 57.

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

Цель состоит в том, чтобы достичь наилучшего результата с минимальными усилиями.

Небольшое исправление ваших предположений: хотя Windows и Mac используют кратные 16, они не масштабируются с одинаковой скоростью. Стандартные размеры Vista / 7: 16 ² , 32 ² , 48 ² , 256 ² . OS X - 16 ² , 32 ² , 128 ² , 512 ² (+ версии HiDPI). Чтобы еще больше усложнить ситуацию, уровни масштабирования по умолчанию в Windows Vista / 7, по-видимому, равны 16 ² , 48 ² , 96 ² , 256 ² и будут успешно масштабироваться с шагом в 2 пикселя. Это не должно иметь большого значения для вашего рабочего процесса, за исключением того, что оно устраняет необходимость учитывать конкретные пиксельные сетки на всех уровнях масштабирования.

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

Размер, с которого я начинаю, определяется платформой. Если проектирую для Windows, я начинаю с 48x48. (У меня нет никаких научных оснований для этого, но уровень масштабирования по умолчанию для Windows 7 - "Средний", который составляет 48x48. Значки Vista, OS X, iPhone, iPad и Android также достаточно близки к этому размеру, так что это удобно и удобный.)

Полностью готовая иконка сделана в таком размере и является справочной для других икон в семье. Если я создаю настольное приложение, я сделаю другие версии в 16x, 96x и 256x, чтобы они соответствовали уровням Windows по умолчанию (естественно, если это не для Mac). 96х обычно очень похож на 48х.

Версия 256x будет совершенно новым творением. Намного больше деталей (даже если это мелкие вещи, такие как текстурирование фоновых элементов). Все детали, которые я не мог уместить в меньших версиях, добавляются. Если у кого-то есть экран, настроенный на гигантские иконки, он должен быть доволен увиденным.

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

Так что, по крайней мере для меня, дело не в том, чтобы увеличивать или уменьшать масштаб в надежде получить идентичное изображение или использовать одну и ту же базовую компоновку для всех размеров. Я думаю об этом как о въезде в город - на расстоянии это просто крошечный, но узнаваемый горизонт. Вы подходите ближе и начинаете выбирать здания. Тогда вы в этом и чувствуете все детали и размеры. На каждом расстоянии это выглядит по-разному, но происходит плавный переход от размера к размеру, так что вся семья никогда не чувствует себя разобщенной.

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

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

Таким образом, мой рабочий процесс выглядит следующим образом: 1. Я делаю макет в наименьшем масштабе точек на дюйм в Photoshop и продолжаю делать иконки в Illustrator, потому что векторные изображения не имеют проблем с масштабированием. 2. Когда я делаю каждый значок / объект и т. Д., Я одновременно создаю все уменьшенные версии (когда, конечно, решаю, что это хорошо выглядит в макете) и передаю окончательные pngs программисту.

Я должен отметить, что я начал с iOS первым.