Как рисовать, если ты дизайнер
Каждый дизайнер рано или поздно сталкивается с необходимостью воткунть графические объекты в свою работу.
21 сентября '18
Это не фоточку с шаттера подобрать! Тут надо ручками рисовать.

Я определила для себя основные моменты, на которые ориентируюсь, когда приходится рисовать.

Делюсь ими с вами. Примиряет с совестью, экономит время)
Ира Зарипова, дизайнер
1. Определить размер
Что это за картинка? Куда? Полноценная иллюстрация или иконка? Одна или таких будет много? Какие объекты рядом — фотки, текст, а может огромный текст? С ответов на эти вопросы нужно начать. Каждый из них важно учесть.
2. Определить стилистику
Конечно, никто и ничто (кроме дедлайнов) не помешает переделывать макет до бесконечности в погоне за совершенством.

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

Лучше сразу учесть общую стилистику, чтобы картинка органично вписалась в макет.
3. Найти основную мысль
Если вас не просили нафигачить изображение из головы, а скорее всего это так, значит, оно все-таки к чему-то относится. К тексту, концепту страницы, возможно это иллюстрация на главный экран или что-то еще.

В любом случае, нужно подумать: «а что же здесь главное? какая основная мысль? о чем это?». Определились? Супер. Теперь отбросьте все лишнее и оставьте только смысл.
4. Почиркать
После напряженных раздумий настало время брать в руки карандаш и чиркать. Отключив голову. Все, что угодно, любые ассоциации с основной мыслью. Рисовать пока не иссякнет фантазия. Уметь рисовать не обязательно, главное потом разобрать чего нарисовал.

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

Лайфхак:
можно скачать что-то подходящее в формате svg и поправить. Но никогда нельзя оставлять скачанные иконки в исходном виде. Я считаю, это дизайнерский моветон. Вообще не круто.
Начирканы иконки для банка. Ничего толком не понятно пока
Svg — язык разметки масштабируемой векторной графики, предназначен для описания двумерной векторной и смешанной векторно / растровой графики в формате XML.
5. Отделить зерна от плевел
Конечно же, бОльшая часть идей — полная фигня:). Остальное нужно просмотреть еще пару раз и оставить лучшее. Иногда стоящей будет только одна идея, зато в самое яблочко. Это лучше, чем прорабатывать 3 «ну таких...». Можно поспрашивать коллег, пусть расскажут, какой смысл считали в изображениях. И если (о чудо!) они угадали, поздравляю, ты — классный.

К сожалению, обычно у разных людей возникают разные ассоциации. Нужно постараться, чтобы понятно было всем. Особенно ЦА:).

Для изображения стандартных предметов не изобретайте велосипед. Иконка трубки — телефон, иконка конвертика — почта, а крестик — закрывает попап:).
6. Проработать изображение
Кажется, что 5 пунктов выше — это надолго. На самом деле не больше получаса. Когда остались только нужные идеи, а лучше одна, можно приступать к проработке.

Совет: для мелких иконок, не больше 24px, не используйте много деталей. Иначе уже на десктопе картинка превратится в кашу, а на ресайзе для мобильной версии, так вообще кошмар. Чем проще, тем лучше.
6.1. Рисовашки. Советы для иконок
С размером определились в самом начале (пункт 1), допустим, 24 на 24рх. Значит, весь пак иконок вписываем в эти параметры.

Неважно где рисовать: в Sketch, Illustrator, либо в XD. У каждого редактора есть свои плюсы и минусы, кому как удобнее, кто к чему привык. А вот рисовать иконку по пиксельной сетке — важно. Всегда. Иначе она будет «пикселить» — будет нечеткая и расплывчатая.

У разных элементов разный визуальный вес. Например: круг с заливкой смотрится тяжелее, чем простой контур. Треугольник легче круга. «Пустой» объект легче, чем с элементами. Конечно, при условии, что они одинакового размера. Поэтому когда вписываете иконки в наши 24px, помните о весе.
Одинаковый размер — разный визуальный вес
Корректируйте размер иконок относительно друг друга, чтобы визуально они смотрелись равнозначными. Если нужно иконку выделить, то тут другое дело — используем весовой контраст, цвет и другие приемы.
Разные по форме иконки вписаны в квадрат
Ассимметричные иконки, типа треугольника иконки play, можно выровнять внутри квадрата по визуальному центру, а не по физическому. Или относительно текста, к которому иконка относится. Чтобы ничего никуда не заваливалось.

Экспортировать готовые иконки лучше в прозрачном квадрате. Тогда верстальщику будет проще расставить их по местам. Не придется проверять, съехало ли что-нибудь в изображении. Тем более, что далеко не все верстальщики обращают на это внимание:)
Несколько иконок-иллюстрашек для приложения такси. Все они вписаны в квадрат
Или вот несколько мини-иллюстрашек на сайт
Цвет — тоже важная штука. Особенно в небольших изображениях, вроде иконок. Простой пример: зеленая галочка — все ок, красный крестик — что-то пошло не так. Красная галочка вызовет недоумение. Причина в пользовательском опыте. Мы с вами уже приучены к определенным «сигналам». Конечно, привычки ломать можно, но если это делать, то оправданно и с умом.
6.2 Рисовашки. Правила для иллюстраций
С иллюстрациями все сложнее. Особенно если это картинка с перспективой или в изометрии — то есть, когда видны 3 стороны, а все линии находятся под углом 30°. В идеале, здесь стоит простраивать направляющие и учитывать тоновой контраст.
Слева цветные квадратики и кружочки. Видно какие контрастнее по отношению к фону.

Справа они же. Убрав цвет, проще увидеть что светлее, а что темнее.
Если правильно «раскрасить» по тону планы: передний темнее, средний светлее, дальний самый светлый. То возникнет «воздушная перспектива», появится ощущение погружения в изображение.
На этом фото хорошо видно, правда планов больше: человек и кусок горы темнее всего, они ближе. Самая светлая часть — горы в тумане, они дальше от нас.
Про иллюстрации немного, ведь я совсем не художник и даже не претендую. Главное правило, как и с иконками: не перегружать деталями. Лучше нарисовать просто и хорошо, чем что-то хитрое по композиции и накосячить. Все-таки ты дизайнер, а не иллюстратор;)
назад к блогу