Як малювати іконки, що перефарбовуються.

Блог: статті

Як малювати іконки, що перефарбовуються.

Що таке іконка, що перефарбовується? Це така картинка, якою легко змінити колір, тобто її перефарбувати. Є кілька способів цього досягти. Я розповім про просту технологію, яку ми використали коли робили проект Іконза. По суті, це веб-додаток, який дозволяє користувачеві змінювати колір іконок, а потім генерує необхідні графічні файли.

Як зробити так, щоб цю картинку можна було перефарбовувати? Секрет у тому, що картинка складається з двох растрових файлів – напівпрозорі відблиски/тіні зверху та кольорова підкладка знизу. Виходить, що кольорова основа просвічує через напівпрозору маску. Ось як має виглядати маска:

Але як намалювати таку маску? Дуже просто. Потрібно взяти кольорову основу, а потім намалювати зверху відблиски та тіні.

Засвічуюча маска (показана на чорному тлі для наочності), маска, що затемнює, кольорова підкладка

У масці, що засвітлює, використовується тільки білий колір з різною прозорістю, а в затемнюючій масці - тільки чорний. Колір підкладки значення не має - вибирайте будь-який, він все одно буде змінюватися. Якщо ви малюєте кілька іконок, краще вибирати єдиний «тестовий» колір.

Навіщо потрібні шари, що засвітлюють і затемняють одночасно? Ми не знаємо, який колір вибере користувач, а іконка повинна завжди виглядати добре. Ось, наприклад, намалювали ми тільки шар, що засвітлює, а користувач взяв і вибрав білий колір для підкладки. Катастрофа! Вийде плоска абсолютно біла іконка. Така ж історія, але навпаки, із чорним кольором. А якщо є темний і світлий шари, то результат непоганий:

Іконки з абсолютно білою та чорною підкладками

Краще, звичайно, вибирати майжебілий (світло-сірий) і майже чорний (темно-сірий) — тоді іконка буде більшою і симпатичнішою. Але й за крайніх значень виходить непогано.

Так як шар, що затемнює і засвітлює, знаходяться в одному файлі, тобто небезпека, що ваша іконка буде виглядати брудною — білий накладається на чорний і виходить сірий, який не пропускає «кольоровий» колір підкладки. Це потрібно враховувати при малюванні та не допускати множинного перекриття шарів. Ось порядок шарів іконки для Іконзи:

  1. Тінь від половинки папки. У світлих шарах через маски зроблена «дірка» формою цієї тіні. (Колір чорний, непрозорість 10%)
  2. Нижній затемняючий об'ємний шар. Він повинен бути обов'язково вищим за обведення і перекривати її. Тоді обведення стає темнішим до низу. (Чорний, 40%)
  3. Відблиск на половині папки. (Білий, 40%)
  4. Засвічуючий об'ємний шар. Розмиття країв (feather 3 pt). (Білий, 65%)
  5. Обведення ікон. Дуже важлива штука, яка гарантує, що у будь-якого кольору буде обведення. (Сірий, 50%)
  6. Світле обведення по периметру. Робить іконку більш чіткою та живою. (Білий, 25%)
  7. Верхній об'ємний шар, що засвітлює. У парі із затемняючим позначають «освітлення» іконки зверху. (Білий, 40%)
  8. Тінь від іконки (Чорний, 25%)
  9. Кольорова основа. (Будь-який колір, 100%)

Якщо вам мало цієї занудної схеми, можна скачати вихідник у форматі AI.

Далі потрібно прибрати з іконки підкладку (помістити її поряд) та раструвати векторний файл у фотошопі. Ми отримали ті ж чарівні картинки, які секретний механізм Іконзи склеює в єдиний файл простим додаванням.