Найкращий робочий процес для дизайну іконок: почати з великого чи почати з малого?

Розробляючи піктограми, які потрібно доставити декількома розмірами, ви починаєте з менших розмірів, а потім масштабуєте до великих розмірів? Або ви починаєте велику і масштабну вниз?

У обох є кілька переваг. Я намагаюся вдосконалити свій робочий процес, тому корисні дані від інших. Припустимо, ми розробляємо піктограму Mac або Windows, де розміри залежать - вони в основному точні кратні.

Для ОС X стандартні розміри значків додатків :

• 16 × 16, 32 × 32, 128 × 128, 256 × 256, 512 × 512 та 1024 × 1024.

Для Windows 7 типовими розмірами піктограм програми є:

• 16х16, 32х32, 48х48, 64х64 та 256х256.

Для 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 з сіткою 16 пікселів означає, що точки оснащення дадуть вам піксельні краї до розміру 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). 96x зазвичай дуже схожий на 48x.

256x версія буде абсолютно новим творінням. Набагато детальніше (навіть якщо це дрібні речі, як текстурування фонових елементів). Додається вся деталь, яку я не зміг укласти в менші версії. Якщо хтось набрав екран для гігантських значків, він повинен бути задоволений побаченим.

16x версія також є новим творінням. Дуже мало деталей. Визначення логотипу або дуже простої іконографії з тією ж кольоровою палітрою, що і більші версії. У такому розмірі я не намагаюся зробити щось прекрасне - просто миттєво впізнається.

Тому, принаймні, для мене це не питання масштабування вгору чи вниз з надією мати однакове зображення або використовувати однаковий базовий макет у всіх розмірах. Я думаю про це як проїзд у місто - вдалині це просто крихітний, але впізнаваний, горизонт. Ви наближаєтесь і починаєте вибирати будинки. Тоді ви в ньому і відчуваєте всю деталь і вимір. З кожної відстані це виглядає по-різному, але відбувається плавний перехід від розміру до розміру, щоб вся сім'я ніколи не відчувала себе роз'єднаною.

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

Ну, я вважаю за краще робити все для найменшої щільності та масштабувати. Якщо ви розробляєте весь макет додатка, робота з сіткою набагато простіше, і це економить вам багато головних болів, оскільки ви переміщуєте об’єкти меншою сіткою.

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

Треба зазначити, що я почав спочатку з iOS.