lightanddesign.ru
You might also like
Меня зовут Таня Назимова, и я работаю художником уже восемь лет. В этой статье я рассказываю о трех руководствах по разработке иконок разной сложности.
Я писал по одной иконе в неделю. Я посетил множество обучающих курсов, собрал сотни ссылок, попробовал различные техники дизайна и научился вовремя. Сейчас на одну икону может уйти от трех до 12 часов, в зависимости от уровня сложности. Для достижения этой цели мы перестроили наш рабочий процесс и оптимизировали несколько процессов, что позволило нам быстрее разрабатывать иконки.
Сначала мы думали, что иконки будет гораздо проще реализовать, чем изображения и концепции. Однако произошло обратное. Как и большие изображения, они не могут так детально скрыть ошибки в простых форматах. Удивительным было и то, что иконки были одинаково креативными, информативными и простыми для понимания. Они привлекают внимание зрителя, как большой, требующий времени артефакт, не требуя недель или месяцев работы. Все, что вам нужно сделать, это четко следовать руководству.
Мне давно интересно, как такой художник-монстр, как 13-летний EveryDays’ Beeple, создает образы за час, или как Сатоши Мацуура придумывает концепции персонажей каждый день. Все просто — они смотрят на главное и отсекают ненужное, они не вдаются в детали, они рассказывают зрителю одну идею, которая сразу же цепляет. Я постараюсь объяснить, как мы добиваемся подобных результатов.
Пример процесса нашей команды проиллюстрирует разработку игрового искусства. Требования и конвейер одинаковы для разных студий, но есть несколько особенностей Если вы заметили какие-либо несоответствия с вашей сферой деятельности или хотите поделиться собственным опытом, напишите, пожалуйста, в комментариях к статье.
Классифицирует три основные задачи, с которыми обычно сталкиваются художники игр
- Создание иконок с нуля.
- Упрощение больших объектов иконок
- Подготовьте набор значков с возрастающей ценностью
Используйте все нюансы первого случая для наиболее детального анализа. Два других имеют ту же сантехнику, но с уникальными характеристиками.
-
для сбора отчета — для манипулирования цветом и формой значков
- Редакторы Blender или SketchUp3D для более быстрого и точного создания сложных объектов в качестве альтернативы ручному конструированию в Photoshop — для интеграции финального искусства в сцену. Например, художники CM Games загружают в движок свои собственные иллюстрации. Это облегчает работу технических художников и разработчиков, экономит время и позволяет избежать недоразумений при передаче активов.
Работа над иконками, как и над любыми другими произведениями искусства, начинается с определения требований. Для меня есть два типа: нестандартные головоломки и обычные предметы, такие как сундуки. Первый вариант работает как обычно, но во втором варианте есть подсказки. Это добавление веселья в виде интересных деталей, неожиданных дизайнерских решений или альтернативных идей реализации. Возможно, это не всегда получается, но чем больше вы стараетесь, тем ближе вы к успеху. Ведь от комментариев "ненавижу" до комментариев "целую вашу идею" можно перейти к комментариям "целую вашу идею", когда робкий человек пытается придерживаться вашей идеи и превращается в полное доверие к вашему коллеге против исполнителя завещания.
Играть. Подготовьте пакет иконок для окна Plant Engineering.
- Семена
- рассада
- Лейка для полива
- Розовые цветы
- Голубые цветы
- Бутылка с синей эссенцией
- Бутылка с розовым веществом
Создайте безумную таблицу, иллюстрирующую основные черты иконы. Это могут быть небольшие наброски, необходимые детали, другие значки, ссылки или особенности, которые помогут вам следовать определенному стилю.
Начните искать формы, чтобы каждый значок отражал свою функцию. На этом этапе собирайте эталонные иконки игр на Pinterest и заполняйте картинки Google.
Создайте несколько вариантов пиктограмм, соберите их на одном листе и проанализируйте самостоятельно. Проще сказать, что вам не нравится в иконе, затем перейти к следующей иконе и найти вариант, который вам нравится. Если это не сработает, выберите лучший вариант, измените детали, сократите ненужные детали, а затем проведите повторную оценку. Затем попросите людей дать вам обратную связь, чтобы вы могли оценить значки предубеждения и выбрать лучший силуэт.
Используйте перо и эллипс для создания цветного значка простой формы.
Создайте первый векторный уровень как общий контур иконки. Создайте следующие векторные уровни с помощью масок вырезания, чтобы их можно было использовать для определения желаемого контура фигуры. Более высокие уровни в этой иерархии являются растровыми изображениями уровня. Найдите один из векторных уровней с помощью быстрого ключа и залейте растр нужными цветами.
Многие художники следуют правилам написания картин на большом холсте, чтобы уменьшить конечное изображение и скрыть дефекты. Хороший подход, но с иконами вы рискуете потратить больше времени на чрезмерную обработку. Поэтому я делаю их меньше 512x512px и всегда конвертирую уровни в один смарт-объект, делая иконки в нужной сцене с разрешением 100% или даже лучше.
Доступны только два варианта: использование векторного инструмента или использование растрового уровня с обтравочной маской на каждом векторе. В первом случае значок можно увеличить или уменьшить без потери качества. Это особенно полезно при печати значков в виде наклеек, плакатов и других канцелярских принадлежностей. В качестве альтернативы используйте значки в более заметных местах игры. Здесь они гораздо больше, чем предлагалось изначально. Однако я использую второй вариант. Потому что я экономлю время и добиваюсь более ярких переходов к форме, используя колончатую кисть.
Если говорить более подробно, то две цели — набрать количество и значимость. Я набираю объем на свету, полусвете, своей тени, полутени и отражении.
Я подгоняю цвет к цвету, оттенкам и отражениям. Я стараюсь делать светлые более теплые оттенки. Тени не насыщены. И отражающие холодную насыщенность и среднюю насыщенность между светом и тенью. В больших иллюстрациях этот прием не всегда работает на верующих, но в малых формах необходимо отказаться от сильных контрастов, чтобы избежать погружения в грязь форм и цветов.
Настройте степень отражения материала. На блестящих предметах (металл, стекло, влажные поверхности) рисуйте отражения с резкими краями и делайте отражения относительно яркими с размытыми краями. Напротив, на матовых материалах (дерево, ткань) размытый блеск создает сероватое отражение без четких краев и сероватый отблеск вблизи тона тени.
В прозрачных материалах, таких как стекло, когда тень находится на непрозрачном объекте, и когда тень рисуется вместо света. Оба имеют размытые края. Однако если стекло блестящее или имеет размытые края, когда стекло матовое, отражение не перемещается и остается у прозрачного края.
Следуя этим правилам, я продолжаю разрабатывать все свои садовые иконы.
Я создаю эффект контура на каждом цвете и настаиваю на похожих оттенках. Таким образом, при небольших размерах он выглядит как один мазок разных оттенков.
Для выявления артефактов проверьте изображение с помощью штрихов. Инструмент "Вектор" поможет вам избежать их. Также проще и быстрее обрабатывать формы, требующие чистых и ровных краев. Чем меньше иконка, тем важнее этот аспект.
Осенние оттенки можно наносить по мере необходимости. Он может быть создан как штрих или другой эффект, но обычно его настраивают для объединения с элементом тени. Это позволит вам разместить тень именно там, где вы хотите, и скрыть ее, если она вас раздражает.
Другой тип теней разрабатывается векторами и может быть перенесен на альфу с помощью маски. Таким образом, такие тени невозможно отключить, и они будут видны везде.
В результате на изображении остается мало пустого пространства. Название и размер при входе в игру определяется по договоренности с командой. Обычно я выбираю 256x256px и при необходимости регулирую меньшее сжатие до единства. В настоящее время я проверяю все изображения через параметр максимального размера в меню Inspector.
Задача. Чтобы создать дом-оранжерею, уменьшите количество элементов и замените цвета на более чистые и яркие.
Выпуск. Оригинальный объект хорошо выглядит в 3D-сцене, но не очень хорошо в меню магазина.
Сбор отчета здесь необязателен, так как информации об эскизе достаточно. Итак, откройте 3D-процессор и поместите конечную модель здания в нужную точку обзора.
Чтобы упростить изображение, вычисляем, что в первую очередь выделяется в здании, какие элементы отличают его от других элементов, выделяя главные детали и убирая второстепенные. Оконные решетки миниатюрны, золотые завитки можно упростить, цветы на деревьях — ничего, кирпичи фундамента уменьшить 2 из 8. Но мне нравится ритм оригинала, поэтому я его оставляю.
После его деконструкции я делаю набросок сложной простой формы с базовой цветовой раскладкой. Таким образом, из исходного зеленого возникает другой оттенок зеленого, который берется в правильном диапазоне палитры.
На основе эскиза я строю здание, используя простые формы. Как и в моей первой работе, я делаю это с помощью векторных инструментов.
Следуя методу работы со смарт-объектами, вы быстро увидите, как выглядят иконки всех необходимых вам окон.
Те же этапы проектирования есть и в первой работе. Детально отредактируйте все объемы и настройте освещение.
Задача. Создайте пакет с тремя иконками валют для магазина.
- Маленький.
- Средний.
- Большой.
Эти типы икон делаются вместе. Среди них должна быть четкая цепочка роста от самого простого к самому крутому. Это может быть достигнуто степенью детализации, количеством цветов в объекте или качеством цвета/насыщенности, а также размером по отношению друг к другу. Лучше обратить внимание на последнее. Это связано с тем, что существует риск сделать самые простые иконки очень маленькими по сравнению со вторыми. Такие значки в некоторых окнах не соответствуют друг другу.
Я решил подчеркнуть количество монет в каждом значке, а также различные цвета и силуэты.
Чтобы создать образ, представьте, как монеты используются в жизни. Обычно их аккуратно складывают в кошельки или копилки, остальные бросают в стеклянные банки, а крупные купюры хранят в сейфах. Первый значок представлен большим количеством монет, сложенных в стопку, как покерная марка. Их, по-видимому, немного, но настолько мало, что их игнорируют. На кошельке создается вторая иконка. Оно не очень большое, но наполнено до краев. Это означает, что существует приличная сумма. Красный цвет кошелька прекрасно сочетается с золотыми монетами и выделяется с первой стопки. Нарисованный третий значок на груди подчеркивает высокую ценность, как и сказочное окружение. Пурпурный королевский цвет подчеркивает его уникальность.
Монеты должны быть одного цвета, а окружающие предметы — разного. Так зрителю легче выделить из кадра основное вещество: сначала монету, затем фоновый кошелек и сундук.
Силуэты должны иметь разные темпы построения композиции. Первый должен быть вертикальным, второй — закругленным, а третий — слегка срезанным. Это еще больше усиливает различие между иконами. Иконки должны быть расположены квадратно, что облегчает их размещение в любом окне игры.
Иконы отражают суть предмета, а украшения просто дополняют его. Например, вместо того, чтобы рассматривать каждую кривую отдельно, игрок взаимодействует с монетой. Это улучшает две вещи — органичность и разборчивость. Для этих иконок достаточно добавить следы кошек в качестве декораций, так как игра посвящена кошкам.
Чтобы ускорить процесс проектирования, моделируйте относительно сложные объекты в блендере или выводите их из игры, если они уже готовы. Например, сундук нужно просто выставить под правильным углом, сделать скриншот и вставить его на иконку.
Как и в предыдущих двух заданиях, вы можете создать векторный блок иконки, а затем детализировать его кистью. В этом случае достаточно создать монету, преобразовать ее в смарт-объект и воспроизвести его. Сгруппируйте кипы в папку и при необходимости накройте их осенними тенями.
Аналогичным образом разработайте дизайн остальных монет для упаковки. Если углы не подходят, немного обработайте их.
В целом, основными правилами создания иконок являются разборчивые силуэты, чистые цвета и отсутствие контраста. Звучит просто, но чтобы прийти к такому выводу, потребовались годы практики. Помогали учителя, друзья, начальники и, конечно, Интернет. Однако некоторые навыки необходимо развивать путем практического обучения.
Например, общее качество изображения зависит от эскиза. В конце концов, зрители должны понять силуэт микроконтактера за одну секунду. Я должен был уметь делать вариации одной и той же иконы, что позволяло мое воображение. Со временем необходимость в этом отпадает. Я сразу понимаю, что и как нужно описать. Но период обработки вариантов необходим для правильного мышления. Я научился сочетать варианты друг с другом, сокращать не понравившиеся мне моменты, просить комментарии и заново разрабатывать новые эскизы. В какой-то момент я понял, что если посвятить наброску всего несколько минут, то можно быстрее рассмотреть основные моменты и легче передать идеи.
Это неплохая реклама, я ее одобряю.
К сожалению, значок представляет собой очень обезличенный бриллиант, который невозможно отличить от миллиона других!
Иконки действительно должны быть немного очевидными, чтобы они не нарушали остальную рабочую среду и почти не работали с мышечной памятью и рефлексами.
Никто не заставляет вас бегать один за другим. Эта статья не столько о стиле, сколько о дизайне.
Введите Pinterest, и вы получите миллионы похожих вариантов. Зачем красить то, что есть? Проще купить упаковку и покрасить ее заново самостоятельно. Например, вы можете увидеть разницу между иконками Skyrim и иконками из Asasins и Farkray. И вот спросите вы, какая игра эта Leuka, и она не сможет ответить.
Вы можете изменить стиль. Вы должны делать тени, по-разному осветлять их, создавать различные цветовые комбинации и менять форму линий. Затем у вас есть иконки в разных стилях.
Здесь важно то, как создавать разборчивые пиктограммы и какие этапы выполняет этот процесс.
Очень полезная статья! Спасибо!
Очень хорошая статья, но у меня есть вопрос. Насколько хорошо он работает без растровых изображений? Я в основном разработчик, который прошел курс дизайна в udemi, поэтому я еще не могу освоить все эти инструменты (я разрабатываю дизайн в Krita / Aserprite). Я говорю о своем проекте, но он не горит, и я занимаюсь им в свободное время.
(Спасибо за комментарий.) Я согласен с ответом выше. Честно говоря, рисовать растровыми или векторными элементами — это личный выбор. Я знаю художников, которые рисуют только растровыми картами, но также знаю художников, которые рисуют те же самые конечные произведения искусства векторами. Это означает, что вы можете получить одинаковый результат с помощью обоих инструментов. Я использую векторы, чтобы рисовать иконки и другие маленькие фигуры намного быстрее и проще. Как видно из статьи, я в основном использую растровые изображения, но векторы помогают мне избежать пересечения границ формы кистью.
Я использовал учебники и векторные инструменты для рисования иконок и иногда графики. Это значительно облегчило мне жизнь:) Существует также отличный векторный редактор с открытым исходным кодом под названием Inkscape. Это действительно хороший инструмент, и лучше всего освоить векторы хотя бы на базовом уровне.
Благодаря вам я попробую, когда у меня будет время.
Он все равно будет растрирован, но вы также можете превратить его в отличную векторную иконку.
Конечно, если вы не используете векторы, то вы задаете неправильный вопрос.
Теперь четкость формы и цвета (читаемость) важна для изображений. Теоретически, по крайней мере, можно создавать иконки в 3D. Главное — понять формы и цвета, а методы могут быть самыми разными.
Если вы полностью рисуете кистью, сохраняйте разрешение как можно выше, чтобы изображение правильно сжималось.
Я понимаю, что вы имеете в виду, спасибо.
Я изучил этот вопрос. Раньше я создавал иконки, иногда в пакетах по сотне иконок. В целом, полезная статья о воронении. Силуэт -> Заливка -> Узор — полезный и экономичный подход. В Photoshop все немного мазохистски (без преобразования слоев, без заливки, без создания неразвитого клипа).
Некоторые наблюдения.
Визуально она видна, но почему-то точка визуальной массы не указана явно. Еще на стадии эскиза или силуэта выбирается такой объем/маска/силуэт, чтобы уравновесить другие значки. Равный или, как в случае с деньгами, увеличивающийся с количеством монет. Дело не в фигуре.
Монеты как умные элементы в стопке подходят для небольших иконок, где орфография уместна, а перспектива не является проблемой. Для чего-то более крупного рекомендуется нарисовать манекен в 3D, сложить стопку в том же месте и немного заморозить ее в конце. В качестве альтернативы вы можете опустить несколько стопок и затянуть 2D для их перспективы. Например, небольшой стог на заднем плане сундука явно имеет другую перспективу и вертикальность. Однако большинство людей, скорее всего, этого не заметят.
Что касается материалов: нет "окрашенных металлических" поверхностей. Имеется окрашенный материал. И если только грунтовка не полупрозрачная, она одинаково смотрится на полированном металле и полированном дереве. Исключение: металл, видимый через краску, или текстура дерева, видимая через краску.
Бронзовое изображение с надписью "бронза". Существует похожий бронзовый цвет, но он более оранжевый.
