При разработке значков, которые должны быть представлены в нескольких размерах, вы начинаете с меньшего размера, а затем масштабируете до больших размеров? Или вы начинаете с большого и постепенно уменьшаетесь?
У обоих есть несколько преимуществ. Я пытаюсь усовершенствовать свой рабочий процесс, поэтому мне будет полезно мнение других. Давайте предположим, что мы разрабатываем значок для Mac или Windows, где размеры соотносятся — они в основном являются точными кратными.
Для OS X стандартные размеры значков приложений :
Для Windows 7 стандартные размеры значков приложений :
Для iOS стандартные размеры значков приложений :
Для Android стандартные размеры значков приложений :
Для iOS и Android размеры значков немного более случайны, а масштабы также не связаны друг с другом, поэтому умное отношение к сетке дизайна имеет меньшее значение, потому что вы с меньшей вероятностью найдете координаты, которые соответствуют границам пикселей для нескольких размеров.
Способ 1: уменьшение масштаба
Создайте значок самого большого размера (часто 1024 × 1024), используя векторы и сгенерированные эффекты, такие как стили слоя.
Дублируйте и масштабируйте документ, чтобы создать меньшие размеры.
Внесите необходимые изменения и сохраните окончательное изображение.
Это здорово, но упускает возможность выравнивания элементов по сетке, которая работает для разных размеров. Использование грубой сетки для привязки, кажется, немного помогает. Например, документ размером 1024 × 1024 с сеткой 16 пикселей означает, что точки привязки дадут вам края с привязкой пикселей до размера 64 × 64. Идея состоит в том, чтобы проектировать с деталями, но привязываться к сетке меньшего размера, чтобы вы попали в эти важные места.
Способ 2: масштабирование
Создайте значок наименьшего или одного из наименьших размеров (часто 32 × 32 или 64 × 64), используя векторы и сгенерированные эффекты, такие как стили слоя. Обычно в формате 16×16 недостаточно деталей, чтобы использовать его в качестве отправной точки.
Дублируйте и масштабируйте документ, чтобы создать большие размеры, и уменьшите, чтобы создать маленькие размеры.
Внесите необходимые изменения и сохраните окончательное изображение.
Это приводит к слишком простым иконкам с небольшим количеством деталей, поэтому мне не нравится работать таким образом.
Способ 3: масштабирование вверх, затем вниз
Создайте черновой дизайн меньшего размера (часто 32 × 32 или 64 × 64), используя векторы и сгенерированные эффекты, такие как стили слоя.
Увеличьте документ до максимального размера и добавьте детали. Это момент, когда значок полируется и добавляется большая часть деталей.
Дублируйте и масштабируйте документ для всех меньших размеров.
Внесите необходимые изменения и сохраните окончательное изображение.
Это, кажется, лучший метод, с плюсами и минусами других методов. Это также означает, что я обычно создаю значки для iOS с размером 912×912, потому что это ровно в 16 раз больше, чем размер значков iPhone без Retina, равный 57×57.
Есть ли лучший метод для создания значков, которые должны быть представлены в нескольких размерах?
Цель состоит в том, чтобы достичь наилучшего возможного результата с наименьшими усилиями.
Небольшая поправка к вашим предположениям: хотя Windows и Mac используют число, кратное 16, они не масштабируются с одинаковой скоростью. Стандартные размеры Vista/7: 16 2 , 32 2 , 48 2 , 256 2 . OS X — это 16 2 , 32 2 , 128 2 , 512 2 (версии +HiDPI). Еще больше усложняет ситуацию то, что уровни масштабирования по умолчанию в Windows Vista/7 составляют 16 2 , 48 2 , 96 2 , 256 2 и будут успешно масштабироваться с шагом всего в 2 пикселя. Это не должно иметь большого значения для вашего рабочего процесса, за исключением того, что это устраняет необходимость заботиться о конкретных пиксельных сетках на всех уровнях масштабирования.
Мой рабочий процесс отличается от вашего тем, что я не очень сильно меняю размер. Новое изображение создается для каждого уровня размера, и я не пытаюсь перерабатывать один и тот же макет.
Размер, с которого я начинаю, определяется платформой. При проектировании для Windows я начинаю с 48x48. (У меня нет никаких научных оснований для этого, но уровень масштабирования по умолчанию в Windows 7 — «Средний», то есть 48x48. Иконки Vista, OS X, iPhone, iPad и Android также достаточно близки к этому размеру, поэтому это удобно и комфортный.)
Полностью законченная иконка имеет такой размер и является эталоном для других иконок в этом семействе. Если я делаю настольное приложение, я сделаю другие версии с разрешением 16x, 96x и 256x, чтобы они соответствовали уровням Windows по умолчанию (если, конечно, это не для Mac). 96x обычно очень похож на 48x.
Версия 256x будет совершенно новым творением. Гораздо больше деталей (даже если это такие мелочи, как текстурирование элементов фона). Добавлены все детали, которые я не смог уместить в меньших версиях. Если у кого-то экран настроен на гигантские значки, он должен быть доволен тем, что видит.
Версия 16x также является новым творением. Очень мало деталей. Идентифицирующий логотип или очень простая иконография с той же цветовой палитрой, что и в более крупных версиях. В этом размере я не пытаюсь сделать что-то красивое — просто мгновенно узнаваемое.
Так что, по крайней мере, для меня это не вопрос увеличения или уменьшения в надежде получить идентичное изображение или использовать один и тот же базовый макет для всех размеров. Я думаю об этом, как о въезде в город — на расстоянии это всего лишь крошечный, но узнаваемый горизонт. Вы подходите ближе и начинаете выбирать здания. Тогда вы в нем и чувствуете все детали и размеры. С каждого расстояния он выглядит по-разному, но есть плавный переход от размера к размеру, так что вся семья никогда не чувствует себя разрозненной.
Обязательно начните с большого и постепенно уменьшайте. Всякий раз, когда дизайнеры создают значки для моего программного обеспечения, я предпочитаю видеть, как значок будет выглядеть в большем размере, а затем я могу решить, какие функции удалить или выделить в меньших размерах. Вы должны знать, что находится на значке, прежде чем удалять элементы в маленьком. В glyfx icons есть несколько хороших примеров того, как интерпретировать большие и маленькие значки одного и того же дизайна.
Ну, я предпочитаю делать все для наименьшей плотности и масштабировать. Если вы разрабатываете весь макет для приложения, работа с сеткой становится намного проще и избавляет вас от головной боли, поскольку вы перемещаете объекты в более мелкой сетке.
Итак, мой рабочий процесс выглядит следующим образом: 1. Я делаю макет с наименьшим разрешением в Photoshop и продолжаю делать значки в Illustrator, потому что у векторных изображений нет проблем с масштабированием. 2. Когда я делаю каждую иконку/объект и т.д., я создаю все увеличенные версии одновременно (конечно, когда я решаю, что это выглядит хорошо в макете) и передаю окончательные png-файлы программисту.
Я должен отметить, что я начал с iOS в первую очередь.
Алан Гилбертсон
Марк Эдвардс
Марк Эдвардс
Фаррей