Технология быстрого создания фонов для 2D-игр на базе 3D-заготовок (48 часов разработки)
Вместо предисловия
Данная технология в свое время являлась чьим-то ноу-хау, но сейчас по прошествии нескольких лет решительно невозможно разобраться, кто является ее автором. Не смотря на то, что к ее использованию я пришел самостоятельно — не возьму на себя наглость утверждать, что именно я являюсь ее автором. Точно такими же авторами окажутся еще десятки, если не сотни людей, так как хорошие мысли, как правило, приходят во множество голов одновременно.
Перед тем как начать я хотел бы сделать акцент на двух положениях:
Первое. Мы исходим из того что читатель знаком с такими пакетами как 3D Studio MAX (либо любым другим пакетом трехмерного моделирования) и Photoshop (или любым его аналогом). В данном конкретном случае я собираюсь использовать терминологию этих двух пакетов. Однако, не смотря на это те же самые принципы можно использовать, пользуясь любым другим софтом.
Я весьма относительный технарь и многие вещи, доступные другим технарям для меня — темный лес. Не смотря на это я считаю, что мастеру достаточно иметь один-два любимых инструмента, чтобы делать шедевры, а посредственности в свою очередь не хватит и чемодана этих инструментов, ибо за внешним лоском, эффектами и хитринками не будет, не души, не профессионализма.
Хочу также отметить, что я не причисляю себя к мастерам, которые делают шедевры. Данное примечание я делаю для тех злых людей, которые говорят (или скажут после публикации), что я заносчив, что меня занесло под небеса, и тех кто вместо того чтобы работать предпочитает злословить словно ябедник Кийр из моей любимой книги Оскара Лутса «Весна».
С преамбулами покончено перейдем к сути.
Я утверждаю и не беспочвенно, что хороший фон можно и нужно создавать не за неделю, не за пять дней и даже не за три.
Чтобы сделать хорошую картинку для казуальной игры, без разницы i-spy это, match-3 или аркада, достаточно 48 часов. Разумеется, при условии того, что человек занимается работой, а не просиживанием штанов.
Прошу обратить внимание на иллюстрацию (см. выше). На мой взгляд, неплохой фон для 48 часов работы, не так ли? Теперь перейдем к технологии разработки таких фонов. Меня часто спрашивают «вы это все рисуете?». Я отвечаю – «частично да, частично нет… большая часть этой сцены 3D, но с мощным слоем пост-обработки». В этом случае человек обычно разочарованно протягивает «у-у-у… а я то думал это рисунок».
Давным-давно я огорчался, слыша это – теперь я знаю ответ. Мы делаем свою работу для того чтобы она радовала игрока. Мы делаем свою работу быстро потому, что жизнь коротка и за нее нужно очень многое успеть. Мы делаем свою работу любыми удобными нам способами (не противоречащими этике и законам) вовсе не потому, что у нас есть задача доказать кому-либо что мы можем нарисовать все что угодно.
Освещение и цвета заготовки
Как я уже говорил ранее, мы исходим из того, что читающие эту статью умеют держать в руках мышь и понимают толк в моделировании. Если вдруг случилось так и статью читает художник, который ни черта не смыслит в моделях – причин огорчаться нет. Существуют бесплатные библиотеки моделей (навскидку
Turbosquid), из которых можно легко составить следующую сцену.
Допустим, вы сделали сцену, но не знаете, как ее осветить. Так же вы помните, что я посредственный технарь и ничего не умею. Знающие люди закидали бы вас настройками рендеров внешних и внутренних, с тысячами настроек и с пеной у рта доказывали бы что предложенный ими рендер – лучший.
Я иду другим путем. Учусь пользоваться теми инструментами которыми пользоваться легче и быстрей всего. В данном случае я предложу вам воспользоваться стандартными средствами 3D Studio Max, а именно двумя типами источников освещения.
Это Omni (точечный источник освещения) и SkyLight – имитатор рассеянного освещения.
Необходимое отступление: Давайте добавим к тому, что я посредственный технарь еще и то, что я не буду пичкать вас техническими терминами, в которых и сам мало что понимаю. Как мы знаем умные слова еще не признак ума – так давайте обучаться легко.
Вернемся к нашим источникам. Как до них добраться?
При запуске Макса (я уже давно привык называть его по имени) в стандартной конфигурации есть некая панель управления, которая находится справа. Там вы можете выбирать примитивы, кости, модификаторы, черта в ступе, источники све… ба, то что нужно. Источники света.
Обратите внимание на рисунок. По шагам. Кликаем на иконку «лампы», в открывающемся выкидыше (нет, пожалуй нужно как-то осторожнее с терминами) выбираем Standart, и как говориться «не нужны нам никакие слюнявые мамонты» © Ice Age (это я о более сложных источниках света, с которыми мы понятное дело работать не умеем).
С чего начнем? Пожалуй с того что будет полегче. Т.е. со SkyLight. Смело кликайте на его кнопку и затем поместите его в любое место сцены. В этом его и прелесть. Затем… посетите это окошко, чтобы его активировать.
В открывшейся вкладке (панель с этими опциями находится наверху, под шапкой Макса) выберете пункт LightTracer и кликните, сразу после него вывалится окно (то что у меня на рисунке справа). Испугались?
Разобравшись с этим источником освещения можете отрендерить сцену. Она будет выглядеть примерно так.
В том случае если вы использовали материал, который Макс назначает моделям по умолчанию когда на них нет текстур. А это, кстати, нам и нужно. Получилась очень пасмурная сценка. Осенний и дождливый денек. Но нам… нужно больше веселья и большей правдоподобности. Так бар выглядит когда все уходят домой.
Теперь нам нужно включить в баре лампы, чтобы посетителям, коли они будут, не было страшно.
Чтобы иметь возможность настраивать поставленный вами на сцену источник света войдите во вкладку Modify (на рисунке слева и далее слева-направо), выставьте источнику галочку чтобы он отбрасывал тени Shadows, в выкидывающемся окошке выберете Ray Traced Shadows
Видите эти два круга вокруг источника света? Давайте назовем то, что находится внутри первого круга зоной максимального света, а то, что находится между первой зоной и вторым кругом – зоной затухания света.
И все. Никаких больше умных слов.
В результате вы получите вот такую вот картинку. В том случае, если у вас не включен SkyLight. Страшно?
Мне тоже.
На вашей сцене есть два типа источников света. Мы разобрали и тот и другой. Вместе они образуют такой вот дуэт.
Это ваши Omni и ваш SkyLight. Поздравляю – мы закончили работу со светом. Теперь давайте немного оживим наши серые будни разноцветными материалами.
– Зачем, — спросите вы?
— А вы что собираетесь раскрашивать все это серое царство сами? – отвечу вопросом на вопрос я.
Как ясно можно видеть у нас есть группа моделей, залитая одним цветовым материалом. Нам необходимо разбить ее по цветам, чтобы затем было удобнее работать с текстурами. Как правило, я использую несколько цветов, чтобы разбить сцену по логическим материалам. Например, делаю белым цветом камень, желтым дерево, коричневым дерево другого типа. И т.д. Словом… нет никаких норм и ограничений по цветам.
Как мы будем раскрашивать наши модели? Также просто. Никаких текстур – никаких настроек. Нажмите кнопку M или проследуйте во вкладку отображенную на рисунке. Теперь вы в редакторе материалов. Видите эти чудные шарики? Это то что нам нужно.
Кликните на диффузный цвет материала и в появившемся окне выберите нужный вам цвет. Нажмите Ok. Настройте таким образом нужное вам количество материалов-шариков, и назначьте на сцене их на модели. Это делается с помощь той маленькой иконки что обведена кружком. Да, совсем забыл, до этого, чтобы что-то получилось нужно хотя бы выбрать модель во вьюпорте.
В результате получится примерно такая вот картинка.
Уже совсем не плохо, правда? Дальше будет еще проще и еще красивее.
Я не зря говорил о простоте в самом начале. Категорически сопротивляюсь всему новому, я вполне комфортно чувствуя себя в старом. Это как удобная, но затертая до дыр рубашка. Лучшего и комфортного одеяния не придумаешь.
Главное чтобы вас в этом тряпье ваша жена не увидела. У женщин несколько другие представления о том, как должен выглядеть мужчина. Собственно как и у нас о женщинах… тоже свои представления. Ничего удивительно. Ни одной Америки не было открыто.
Резюме:
Мои рассуждения о том, что мне нужно от 3D Studio Max сводились к следующему:
• Хочу, чтобы здесь было мягкое рассеянное освещение как в пасмурный день
• Хочу, чтобы здесь было несколько направленных источников света с жесткими тенями, чтобы подчеркнуть акценты.
Для первого случая я использовал SkyLight, для второго несколько источников типа Omni. Т.е. я обошелся стандартными средствами пакета, не прибегая ни к каким ухищрениям. Т.к. ухищрений я не люблю. Все должно быть просто. Дальше, что характерно будет еще проще.
Главное чтобы вы помнили, что одна из самых важных вещей в любой работе это свет и тень. Вторым пунктом пойдет логичность освещения. Ставьте (или рисуйте) его там, где оно уместно.
Не надо тыкать источники освещения, где попало. Помните о гармонии. В нашей сцене светильников хоть и не видно, но находятся они в логичных местах не вызывая ощущения дискомфорта.
Это настольная лампа с желтым светом, две лампочки на стенах (значительно выше визуальной части сцены), один источник в дверях (все перечисленные источники света Omni с тенями, и тот самый SkyLight.
Настраивая интенсивность источников освещения, не забывайте о той самой гармонии. Не нужно ядерных взрывов и кислотных цветов. Помните, что на это будут смотреть, и смотреть будете не только вы.
Текстурирование
Теперь, когда мы разобрались со светом нам необходимо покрыть нашу сцену текстурами. «Вот те раз», — воскликнут иные, — «текстурирование… значит не обойтись без UVW-маппинга, разверток и прочих плясок с бубнами».
«Дудки» отвечу я вам. Не нужны никакие модификаторы, и отложите в сторону свои шаманские бубны. Ваше общение с пакетом трехмерного моделирования закончилось еще в прошлой главе.
Это правда. Честно. Все остальное будет сделано вашими руками. Итак…
Для начала давайте осознаем тот факт, что с 3D мы уже больше не работаем и переберемся в Photoshop. Перед тем как начать работать я бы рекомендовал запомнить несколько вещей, которые лежат в основе этого способа разработки:
• Ваш рендер находится в самом первом и самом нижнем с точки зрения ориентации слое, все остальные накладываются сверху.
• Все фактуры, работу с тенью вы осуществляете через фильтры Overlay & Multiply – это необходимо для того чтобы ваш рендер был всегда виден, и чтобы в нем «на лету» можно было произвести любые изменения. В этом туториале заложена ситуация когда я «забыл» некие детали и потом за несколько минут интегрировал их в «сцену».
• Рекомендую работать в разрешении превышающем финальную картинку как минимум в два раза. Это позволяет работать с некоторыми вещами более небрежно, чем обычно, но при уменьшении это мало заметно. Т.е. большой размер как не странно – экономит вам время.
Теперь можно приступать. Все что вам нужно уяснить – каждому объекту требуется хорошо подобранная текстура, адекватная его сущности. Не «лепите» на каменные стены металл, а на металл дерево и все будет хорошо. Прошу обратить внимание на следующий рисунок.
Помимо картинки на ней присутствует квадрат обведенный белой рамкой. Это наша будущая текстура (разумеется ее накладывают без белой рамки, и да – она уже обработана инструментом Distort). Практически все текстуры накладываются мной в режиме наложения Overlay.
Для того чтобы ориентировать любую фотографию или текстуру так как это сделано у меня — воспользуйтесь инструментом Distort, его можно найти через меню Photoshop ветка которого выглядит следующим образом — Edit/Transform/Distort
Взглянем теперь на изображение выше. У каждого слоя есть свои режимы наложения. По умолчанию режим слоя выставлен на Normal. Мы меняем его на Overlay. У меня нет желания забивать вам голову пространными, а главное высосанными из пальца объяснениями как работает тот или иной режим наложения.
Как говорит один из моих знакомых — не бойтесь экспериментировать.
Все что вам нужно знать, что Overlay перемножает освещенность и цвет, делая объект под ним светлее добавляя при этом к нему свою фактуру. Каково вам объяснение?
Ненаучно? Согласен.
Не технологично и без знания предмета? Съем и это. Суть от этого не изменится.
Чтобы усилить или ослабить тот или иной слой пользуйтесь его прозрачностью. Т.е Opaсity (ползунок уровня прозрачности находится справа от режима наложения, который вы только что выбирали). В случае если вы воспользуетесь уровнем прозрачности 100% — картинка может получиться слишком сочной. А нам нужно чтобы фактура была воздушной. Чтобы пол не отвлекал зрителя от игры света и тени, в тоже время «говоря» ему – смотри я деревянный.
Точно таким же способом вы накладываете все остальные текстуры получая на выходе следующую картинку.
Итак, что мы имеем? Забавно правда? Мы не умеем текстурировать, владеем всего одним инструментом Distort, но по нашей прихоти сцена обзавелась красивыми стенами, полом, барной стойкой и даже шикарными бочками из дубового дерева, и надо сказать… сцена уже выглядит неплохо.
А мы, между прочим, еще даже не брались за планшет. Продолжаем детализировать? Уверяю вас – сейчас начнется самое вкусное.
Детализация
Следующим этапом будет мелкая детализация которая так радует глаз геймера. Относитесь к ней внимательно и с юмором. И то и другое игрок оценит в полной мере. Что понимается под детализацией? Обратите внимание на рисунок:
Что вы видите? Там появились узоры на кресле, роспись по дереву на барной стойке, наклейки на бутылках вина, обложки на книгах, и т.д. Как это делается? Очень просто. Либо интернет в помощь, либо банк собственных фотографий. И то и другое одинаково хорошо. Открываете «Google» и набираете в строке поиска «этикетки на вино».
Переключаетесь на вкладку «картинки», выбираете интересующую вас этикетку и отправляете в ваше рабочее окно через буфер обмена. После этого берете инструмент Distort добраться до которого можно через вкладки Edit/Transform/Distort и с помощью направляющих точек искривляете изображение так чтобы оно адекватно вписывалось в сцену.
Накладываете его в любом удобном для вас режиме наложения. Просто? Просто. Тот же самый принцип используется для искажения в нужном направлении текстур которые мы накладывали на пол и на остальные объекты сцены.
Таким нехитрым методом вы оснащаете всю сцену мелкой детализацией. Кажется я еще что-то говорил про юмор? Да. Было дело. В свое время я часто откалывал шутки с целью проверить приемку того или иного заказчика. Что конкретно находилось на той или иной сцене я говорить не буду, попытайтесь найти на этой сцене что-нибудь знакомое самостоятельно.
Могу сказать лишь одно. Практически каждый мой фон или работа наполнены мини-трибьютами и гегами. Это повышает фан в том случае если ваша игра успешна. Вполне известно, что в старых играх до сих пор находят «пасхальные яйца» и, не смотря на прошедшие годы не устают их искать вновь и вновь. В «рамках проекта детализации» нам необходимо обзавестись такой вещью как столы и стулья.
В конце концов кабак это или танцпол? В пакете моделирования у меня были сделаны такие вот заготовки, и теперь пришло время примерить их на нашу сцену.
Столы мы кладем поверх наших слоев текстурирования и объектов, чтобы не ломать проделанную работу. Что мы видим? Наши столы уныло плавают в воздухе. Что мы забыли? Как минимум отекстурить их.
Все по-прежнему плохо. Почему? Правильно – мы забыли пересчитать свет в сцене. Возвращаемся в редактор моделирования и пересчитываем сцену. Поскольку все последующие слои (текстуры и объекты) накладывались у нас с помощью режимов наложения Overlay или Multiplay подмена самого нижнего слоя с нашим рендером никак не скажется на качестве картинки и нам ничего не придется переделывать. Если не верите, посмотрите на следующий рисунок.
Попутно с тенью на полу я прихватил из сцены забытую там дверь и раскрасил ее нашим с вами способом. Текстурами. Через уже столько раз упомянутый режим наложения (Overlay). Однако внимательные читатели заметят разницу во внешнем виде двери. Она со светом и бликами.
Прощу прощения, но я не удержался и почиркал по двери инструментом Dodge.
Не увлекайтесь им сильно. Но помните что это быстрый способ «выжечь» любую поверхность. С помощью Dodge очень легко, а главное быстро можно делать бликующий металл.
Правда, я практически не пользуюсь им в своей работе. Разве что на последней стадии, когда все слои слиты в один. Дело в том, что для меня важно чтобы сцена до последнего момента сохраняла свои слои. Вдруг мне захочется подменить что-то внизу, как мы с вами уже проделали с дверью и тенью под столами? В этом случае придется снова махать кисточкой, и снова наносить блики металла Dodge’м.
Видно что я начал подправлять тень нанося ручные мягкие контуры под нужными мне объектами и что появилось отражение. Неужели опять задействован пакет трехмерного моделирования? Отнюдь. Я просто взял, отрезал стол, воспользовался уже упомянутым инструментом Distort и исказили картинку стола так чтобы он находился под столом реальным, зеркально снизу. Потом наложил этот искореженный стол в режиме Overlay с минимальной едва заметной прозрачностью. Потом подтер резинкой отражение там где оно мне было не нужно.
До сих пор я пользовался тремя инструментами. Это Distort для искажения фрагментов изображения в нужные мне ракурсы, это метод наложения слоев Overlay и Dodge. Ну хорошо, уговорили — была еще и резинка. Согласитесь не слишком масштабный арсенал? Я бы даже сказал простой и очень легкий для освоения. Постараюсь в плане легкости и простоты работы не разочаровывать вас и впредь.
Дополнительное освещение
Давайте зададимся вопросом… чего нам не хватает в этой сцене? Не дожидаясь предположений отвечу сам. Не хватает света. Световых акцентов. Сцена тихая, спокойная. В ней нет никакой живости. Этой живостью мы с вами и займемся… обратив внимания на рис. 9. Что это такое? Это черно белая маска света нарисованная вручную. Поверьте… чем колупаться с рендерами легче нарисовать свет самому. Кроме того этот свет в отличие от рендера всегда может быть отключен в виде слоя. Что если вы задумали сделать грозу на улице? Или проходящего мимо прохожего, который по маске стирает слой света, который затем начинает светить, как ни в чем не бывало?
На рисунке маска изображена черно-белой. Это сделано исключительно для того чтобы вы могли увидеть точную форму белой маски. В реальности черного цвета на маске нет. Только белая или желтоватая.
Во время наложения этот слой состоит из белого силуэта. Достаем уже знакомый и привычный Distort, и искривляем спрайт так чтобы он идеально вписался под окно. Меняем режим наложения с Normal на Overlay… и вуаля… на пол падает свет. Сцена стала лучше? Стала… но это далеко не предел. Все оставшееся время мы будем играться именно со светом, потому что работу по текстурированию и объектам мы уже давно закончили. Мы продолжаем работать со светом, и наносим кисточкой лучи света из окна. С понятно каким режимом наложения. Наверное, я уже с ним наскучил вам.
Теперь перейдем в нашу предпоследнюю главу. И доведем этот «рисунок» до конца.
Сколы, Эрозия, Элементы старения, Следы Жизни
Никакого эффектного появления и трюков не получилось. К сожалению, вы уже прочли заголовок. Поэтому неуместно будет таинственно спрашивать что же на самом деле отличает хороший фон от того что мы имеем, скучного и пресного. Ответ прост. См. шапку главы.
Немного восторженной теории. Никакой рендер не в состоянии заменить чувство меры, цвета и света имеющейся у хорошего художника. Никакой рендер не в состоянии сделать нужные акценты там, где это действительно нужно. Любой рендер на данном этапе развития это бездушный и очень честный парень. Он всегда норовит все сделать честно. А нам не нужно честно. Нам нужно интересно. Эффектно. Сказочно.
Однажды один художник показал мне один прием. «Сколы». Под ним он подразумевал любое старение металла. После этого мои металлы стали значительно лучше. Поскольку меня часто называют «ржавыми маньяком», «фоллаутистом», и многими другими прозвищами вы, наверное, догадаетесь, что я пошел значительно дальше сколов.
Мое мнение относительно дизайна тех или иных вещей в играх простое. Игроку не интересна честная белая стена. Ему интересна стена фактурная. Та, которая может его заинтересовать. Тоже самое относится и к остальным объектам. Они должны быть фактурны, интересны, они должны быть запоминающимися.
Возьмем две игры. Half-life 2 и F.E.A.R. В обоих играх используются normal-карты для создания рельефа и освещения. Только если в последней отключив эти карты мы вообще не увидим больше ничего (кроме уровня из картонок), то отключив тоже самое хозяйство в Half-life 2 мы получим практически туже чудную картинку что и была. Почему? Потому, что в Valve к делу подошли ответственно совместив две технологии, а не положившись на одну. В случае если не работает одна — вторая работает за двоих.
Normal-mapping там используется как вспомогательная технология. А в F.E.A.R. эта технология несущая. Т.е. без нее «картинки» практически нет. В чем преимущество Half-life 2 в данном случае?
В фото-текстурах изрядно обработанных руками, в цвете и свете на уровнях. Т.е. во всем том, что я отмечал особо в самом начале этого туториала.
Однако вернемся к нашим сколам. Давайте посмотрим на рисунок чуть выше. Что появилось? Появилось все. Появилась жизнь. Мелкие пылинки кружащиеся в лучах окна, потертый пол, дополнительные засветки на стенах, потертости на дереве, потертости на барной стойке, и т.д. Это я называю «финальным проходом». Когда художник проходит поверх сцены придирчивым взглядом и начинает наносить мелкую световую и эрозийную детализацию. Также это можно назвать «пост-обработкой».
Вряд ли я кого-то удивлю, если скажу что все эти пятнышки, потертости наносятся белым или приближенным к нему цветом на соответственный слой с режимом наложения Overlay.
Пост-обработка крупным планом
Все-таки хочется коснуться пост-обработки отдельно. Для этого я создал специальный укрупненный пример. На нем явно видно, что я имею в виду под этим емким термином. И давайте наконец закрепим пройденный материал. Обратим наши взоры на рисунок поди последний в этом сезоне.
Пошли… слева-направо:
1. Рендер сцены без каких-либо изменений основанный на разноцветных материалах и типовых источниках освещения.
2. Наложение фактур (Overlay)
3. Наложение сколов, потертостей, и прочего «эха войны» (Overlay)
3B. Белым показаны штрихи, которые наносятся поверх картинки
4. Еще больше потертостей, блики на бутылках, крупные блики на выпуклых частях стола.
5. Узоры нанесенные желтым цветом в режиме наложения Overlay, мелкие детали вроде болтов на полу, дырки в дереве, и аккуратные протертости вокруг них.
Вот и все… как выясняется сделать такой фон проще пареной репы. Все что необходимо, это вера в себя, внимание к мелочам, и практика. Практика, без которой хрен что получиться вообще.
Эпилог
Хочется отметить ряд вещей, которые не стоит забывать не при каких обстоятельствах, и которые собственно и составляют основу этого метода.
• Внимательно подбирайте цветовые схемы будущей работы, так чтобы они услаждали глаз, а не напрягали его.
• Помните о важности света и тени в любой работе. Без них ваша работа будет плоской и скучной.
• Аккуратно подбирайте адекватные для сцены фактуры. Ваша задача создать гармоничную картину, а не показать буйство материалов. Заметьте, на моей сцене фактуры во многих местах имеют достаточно бледный вид.
• Помните о процессах старения и эрозии, которые сопровождают вас вокруг. Чистые и стерильные предметы вы найдете только в больнице. Европейской разумеется.
• Внимательно подмечайте мелочи окружающие вас по жизни и переносите их в свои работы. Любая уместная мелочь делают вашу работу живее.
• Шутите и улыбайтесь, переносите свой юмор в работы. Юмор даже в хоррор проектах остается юмором. С юмором жить веселее.
• Overlay & Multiply – ваши лучшие друзья
Совет 1: Подготавливая фон, к примеру 800х600 лучше работать с исходным полотном большим по размеру хотя бы вдвое больше оригинала, т.е. 1600х1200. Это вызвано тем, что в работе с большим холстом вы можете позволить себе довольно сильные небрежности в штрихах, линиях и формах. Все это уйдет при уменьшении вашей картинки.
Совет 2: После уменьшения картинки во многих местах может возникнуть мыло. Те кто любят изображение четче могут воспользоваться фильтром Unsharp Mask он работает более корректно чем фильтр Sharpen, и имеет больше степеней настройки.
(Я, к примеру, ни одну из своих работ не оставляю без друга Unsharpa’а)
Кроме того помните, что залог успеха – простота. Простота выбранной технологии обеспечивает вам скорость. Простота обеспечивает вам удобство использования разработанного контента. Оставьте в стороне ваш чемодан с тысячей инструментов и поиски one-click плагина, или магического рендера который «сделает вам круто». Возьмите пару инструментов и отточите пользование ими до совершенства. Посмотрим… захочется ли вам после этого открывать свой старый чемодан.
Всем спасибо за внимание. Надеюсь данный туториал был вам полезен.
Дата последней правки в статье: 29 января 2016 года, 5:21.
В связи с поступившем сигналом о «пропаже» изображений из статьи, была проведена работа по их восстановлению. В ближайшее время они будут загружены на Хабр, чтобы в будущем подобные инциденты — не повторялись.
Красивый игровой фон — 57 фото для презентаций и картинок на рабочий стол
Минимализм арт
Красивый фон для фотошопа
Far Cry New Dawn стрим
Фон для рабочего стола игровой
Tomb Raider 2018 игра
Игровой фон для фотошопа
Улица из игры
Стильный игровой фон
Игровой фон для фотошопа
Фон для ютуба
Лос Сантос ГТА 5 город HD
Игра крайсис 4 3
Фоны для рабочего стола геймерские
Классный фон
Uncharted 4 Африка
Crysis фильм
Rainbow 6 Siege фон
Масиаф ассасин Крид арт
Вершина Дамаванды Battlefield 3
Far Cry Primal пейзажи
Battlefield 3 стрим
Обои в стиле игр
Tom Clancy’s Uplay
Фон игровой тематики
Fallout 4
Фиолетовый геометрический фон
3d фон
Пейзажи в стиле флэт
Just cause 4 ps4
Crysis 3 купол свободы
Игровой фон
Обои на игровую тематику
Watch Dogs 2 золотые ворота
Фон Firewatch
Красивый задний фон для шапки
Section 8 Prejudice броня
Killzone: в плену сумрака
Хорайзон Зеро даун
Игра watch Dogs (ps3)
Firewatch нед
Horizon Zero Dawn мир
Игровой фон
Фон игровой тематики
Крутой фон для аватарки
Фон для игрового канала
Lords of the Fallen
Фон будущее
Подборка из 57 красивых картинок по теме — Красивый игровой фон. Скачивайте для презентаций, или устанавливайте понравившуюся картинку фоном для рабочего стола телефона и компьютера. Не забывайте оставить комментарий и посмотреть другие фоны, например Фон вечеринка, Фон Мальдивы !
Бесплатные ресурсы для ваших игр | GeekBrains
3D, 2D, музыка, ассеты, плагины, инструменты. Много-много полезного на блюдечке. Более 60 источников.
https://gbcdn.mrgcdn.ru/uploads/post/1965/og_image/133f43a1150b16246b581acf36fea020.png
Когда несколько месяцев назад вышел перевод статьи «В гейм-дизайнеры с нуля», в комментариях предложили сделать большой обзор полезностей и бесплатных ресурсов для разработчика игр. Сегодня такой материал перед вами.
Искать лучшие ресурсы мне помогал Владимир Михайлов — энтузиаст инди-разработки, автор музыки и звукового оформления к играм Dragon’s Dungeon, Quest Hunter, One Helluva Day. Мы постарались охватить разные направления: от готовой к использованию графики и музыки до сообществ, где можно попросить совета и найти соавторов.
Пост будет длинным. Начинаем!
Наборы материалов (Assets)
OpenGameArt.Org — один из самых известных сайтов с бесплатными игровыми ресурсами, доступными как Creative Commons. Но я хочу отметить раздел Collect. Готовые тематические подборки очень экономят время. Вот набор тайлов для изометрической игры и коллекция «изометрических» персонажей. А вот вам пиксель-арт и графика в стиле NES и Game Boy.
Сайт автоматически генерирует сводные списки элементов коллекции, где для каждого файла указаны автор, лицензия и другие детали. Не придется вручную собирать данные о находках. Главное — проверить авторство графики перед релизом игры, чтобы никого не забыть. Это легко: для любого файла в списке указана еще и ссылка на страницу, откуда он взят.
Сraftpix, раздел Freebies — более 80 бесплатных пакетов 2D-графики для RPG, стратегий, аркад, платформеров и других типов игр. Тайлы, персонажи, GUI, иконки, фоны.
Open Game Graphics — гора плюшек для 2D-игр. Помимо дизайна интерфейсов, персонажей и уровней можно скачать 25 полных коллекций графики под игру конкретного жанра и антуража: мрачный Sci-Fi-платформер, красочный Top-down shooter, 8-битный рогалик и так далее. Много спрайтов в мультяшном стиле.
PixelGameArt — фэнтезийные и Sci-Fi-ассеты в стиле пиксель-арт с возможностью предпросмотра демок в браузере!
Персонажи и часть фона из набора GothicVania Town. Онлайн-демо
Kenney — поставщик игровых ресурсов, который предлагает около 60 бесплатных наборов ассетов, в том числе тайлы, изометрические спрайты, шаблоны-конструкторы для персонажей и построек, 3D-модели, музыку и звуки, элементы UI.
GameDevMarket — ярмарка ресурсов, созданных пользователями. Есть и уютный уголок «халявы». Чтобы попасть туда, откройте интересующий раздел (например, 2D > Characters) и в колонке слева выберите Type > Free.
Game Developer Studio — более 100 бесплатных 2D-ассетов, которые можно отфильтровать в магазине по принципу «сначала дешевые». Автор сайта и всех материалов — Роберт Брукс. Вы можете отправлять ему идеи нового контента и голосовать за чужие предложения в разделе Suggest an asset.
Game assets на itch.io — золотые россыпи 2D- и 3D-графики для ваших игр. Тысячи ассетов от участников сообщества. Много красивого пиксель-арта, выразительные персонажи, детализированные тайлы карт и уровней. Никакой рекламы на страницах. Именины сердца!
Renpy для чайников — русскоязычный блог с полезностями для тех, кто делает визуальные новеллы на движке Ren’Py. Скрипты, мини-игры, спрайты, нестандартные меню, GUI.
А теперь посмотрим на более узконаправленные сайты и сервисы.
3D-графика
Трехмерный контент — одно из уязвимых мест в проекте начинающего игродела. Объектов нужно много и хороших, а бюджета нет или не хватает. Сейчас расскажу, где брать качественные модели, в том числе анимированные или полностью готовые к анимации.
Мы говорим о бесплатных ресурсах для игр, поэтому ориентироваться будем прежде всего на Blender и его сообщество.
BlendSwap
Этот портал — моя первая остановка в поисках годного 3D. Тут собраны модели всех типов: персонажи, интерьеры, архитектурные сооружения, транспорт, оружие, одежда, еда, готовые сцены и пейзажи. Плюс низкополигональные меши, риги для скелетной анимации, текстуры и материалы, эффекты на основе частиц, node-заготовки для Blender, настройки стилей визуализации, скрипты на Python.
Все ресурсы — с лицензией Creative Commons. Причем очень многие энтузиасты выбирают CC0, по которой полностью отказываются от авторских прав.
Сайт не лишен недостатков: с бесплатным аккаунтом можно скачивать лишь 20 моделей в месяц. Поэтому все, что приглянется, лучше собирать в коллекции. Одна формируется автоматически — это история ваших лайков. Вторую вы заполняете сами по любому принципу. Можно сосредоточиться на теме работ или конкретной лицензии.
Если аккаунт не премиальный, придется ограничиться двумя коллекциями или хранить все в закладках браузера.
Только не затягивайте со скачиванием. После длительного отсутствия на сайте я однажды обнаружила, что мои коллекции опустели в результате то ли сбоя, то ли плановых мероприятий администрации. Из общего списка пустых пользовательских коллекций на сайте я поняла, что явление было массовым.
Несколько интересных BlendSwap-аккаунтов:
- izuzf — много оружия разного типа и разных эпох, персонажи, в том числе low poly.
- Daren — персонажи, в том числе с полным ригом и лицензией CC0. Например, вот.
- tastyfish — три набора объектов и декораций для RPG в мультяшном стиле плюс оружие. Лицензия — CC0.
- Mutte — монстры, зомби, прочие враги и военная техника.
- RedFrost — 47 заготовок для игрового движка Blender Game Engine по лицензии CC0.
- Коллекция пользователя JerryJury — 1000 роскошных моделей, с большинством которых можно делать что угодно. Бытовые мелочи, техника, оружие, боевые роботы, эффекты для Blender.
- Коллекция papasmrfe — тут много симпатичных персонажей.
Другие сайты с 3D
ShareCG — основанный в 2007 году сервис, куда любители и профессионалы компьютерной графики загружают свой контент. Помимо бесплатных 3D-моделей, текстур и материалов, здесь есть стоковые фотографии, уроки, скрипты, программы и плагины для CG-творчества, музыка.
Thingverse — сообщество любителей 3D-печати, где можно найти оригинальные модели по лицензиям Creative Commons.
Текстуры
СС0textures — 529 реалистичных PBR-текстур, которые можно использовать где и как угодно без ссылок на авторов. Без регистрации. На всякий случай: PBR (Physically-Based Rendering) — это физически корректная визуализация. Варианты разрешения текстур: 2K, 4K, 8K. А еще можно скачать исходники в формате .sbsar — для редактирования в программе Substance Designer.
TextureLibt — коллекция из 6500+ текстур для личных и коммерческих целей. Все это работы одного фотографа. Он просит вас о малости: не перепродавать его материалы и, по возможности, при использовании текстур указывать авторство.
Texture — большая коллекция текстур разного, но в среднем невысокого разрешения (примерно 1000–1300 пикселей по ширине). Условия: можно использовать в платной игре, но нельзя продавать сами текстуры (даже после редактирования) и выдавать их за свои.
Стоковые изображения
Stock Graphic Designs, раздел Freebies — наборы профессионально исполненных векторных изображений для коммерческого и личного пользования. Форматы: Ai (Adobe Illustrator) и EPS.
Рixabay, Pexels и Unsplash — я поставила их в один ряд, потому что эти три банка фотографий очень похожи. Они держатся на материалах от участников сообщества и на заимствованиях с аналогичных сайтов. Все бесплатно, в том числе для коммерческих проектов.
Поиск по DeviantArt
На портале DeviantArt, где обитают любители визуального искусства, среди тонн авторского контента можно найти бесплатные спрайты, 3D-модели и фотографии. Особенно много здесь фанатов аниме и пиксель-арта. Но далеко не все полезное попадает в раздел Resources & Stock Images. Вот несколько советов, которые экономят время на поиск ресурсов.
Следите за группами, которые раздают бесплатное.
Примеры:
Game-Art — группа целиком посвящена игрострою. Здесь можно посмотреть, что делают другие, показать свои арты и концепты, запросить критику участников, а еще — скачать игровые ресурсы из раздела Resources & Tutorials. Будьте внимательны: не все можно использовать в коммерческих проектах. О правовых нюансах еще скажу ниже.
Clear-Cut — изображения объектов и персонажей на прозрачном фоне в форматах PNG и PSD. Здесь и аккуратные вырезки из фотографий, и рендеры 3D-моделей.
Safe-Stock-Resources — большой фотосток с изображениями людей и природы. Отличный опорный материал для создания фонов и персонажей. Заявленная цель группы — собрать надежных авторов, чей контент можно использовать, не боясь, что он был где-то украден.
NoCreditStock — наборы материалов, которые можно использовать без упоминания автора.
Digital-Art-Club/Stocks and resources — бесплатные материалы и уроки по Digital Art.
Ориентируйтесь по хештегам.
Залежи бесплатного добра вы найдете по тегам #unrestricted, #commons, #freetouse, #freesprites, #freebackgrounds, #freeresource, #freebies и другим. Экспериментируйте и обращайте внимание на теги к работам, которые вам нравятся.
Просматривайте чужие коллекции.
Сайт подсказывает подходящие в колонке справа, когда вы ищете по тегам.
Любителям визуальных новелл пригодится вот эта подборка фонов и спрайтов для некоммерческого использования.
Ищите работы с лицензией Creative Commons через Google.
Введите в поисковик:
«This work is licensed under a Creative Commons» site:deviantart.com
В списке результатов перейдите на вкладку «Картинки». Получилось! Если что-то нравится — переходим на страницу изображения и уточняем лицензию и авторство непосредственно под картинкой или под заголовком License в блоке справа.
Помните: у большинства групп на DeviantArt нет единых правил пользования изображениями. Каждый участник сам придумывает, что можно и нельзя делать с его работами. Я видела художницу, которая разрешает брать спрайты для коммерческих проектов только при условии, что вы пришлете ей бесплатную копию своей игры 🙂
Хорошая практика: если вы что-то взяли, упомяните автора в титрах и пришлите ему ссылку на игру либо скриншоты. Пусть полюбуется, как вы использовали его материалы.
Иконки
Game-Icons — сервис, где можно не только быстро найти подходящую иконку по тегу и названию, но и тут же отредактировать ее прямо в браузере и сохранить как SVG или PNG. Замечательно!
Iconmonstr — тысячи бесплатных черно-белых иконок для оформления мобильных и онлайн-приложений, сайтов, игр.
Шрифты
Ищем бесплатные шрифты на DaFont
Звук и музыка
GameAudioGDC Bundle — гигабайты аудио, записанного профессионалами, — для любых ваших проектов, в том числе коммерческих. Это щедрый подарок, который игроделы ежегодно получают по случаю Game Developer’s Conference. До сих пор объем «бандла» увеличивался с каждым годом. Выпуски:
FMA — интерактивная библиотека музыки и звуков, пополняемая кураторами со всего мира. Материалы публикуются с лицензиями Creative Commons.
FreeSound — огромная база бесплатного аудио от участников сообщества. Можно вести коллекции. Основатели проекта, Music Technology Group, — исследователи из Университета имени Помпеу Фабры (Барселона).
Программы, полезные при создании компьютерных игр
Для работы с 2D
Онлайн-конструктор персонажей для классической двумерной японской RPG (JRPG).
Synfig — отличный бесплатный редактор 2D-анимации для Windows, Linux и MacOS. Поддерживает скелетную анимацию, что избавляет от необходимости вручную перерисовывать позу персонажа из кадра в кадр. Программа автоматически рассчитывает преобразование исходной векторной формы в конечную. Вы можете использовать разные типы слоев и эффектов и управлять их характеристиками.
Еще два популярных решения для 2D-анимации. Оба open-source и доступны под Windows и OS X:
Inkscape — бесплатный векторный редактор № 1. Приложение из тех, о которых все знают, но нельзя не сказать.
GIMP — редактор растровых изображений, который называют свободной альтернативой Photoshop, хотя он и не перекрывает всех возможностей продукта Adobe.
Для работы с 3D
Blender — великий и прекрасный 3D-редактор, которому трудно найти альтернативу. Позволяет не только создавать и анимировать модели, но и разрабатывать игры на встроенном движке Blender Game Engine.
MakeHuman — программа для создания персонажей и любых антропоморфных 3D-моделей. Результат может выглядеть реалистично либо наоборот — карикатурно и мультяшно. Blender поддерживает импорт из этой программы (формат .mhx2). Модели, вместе со скелетом и позами, удобно экспортировать в любой редактор для создания игр. На сайте сообщества вы найдете постоянно пополняемую библиотеку дополнительного контента: одежды, причесок, глаз, анимационных ригов, поз, мимики и другого.
World Machine — генератор ландшафтов с возможностью экспорта в Unity. Бесплатен для некоммерческого использования.
TreeIt — генератор деревьев разного типа. Прост в использовании, умеет экспортировать модели в OBJ, X, FBX и DBO, что делает его совместимым с разными движками.
XNormal — программа для запекания карт нормалей.
Sculptris — приложение для ручной «лепки» и раскрашивания 3D-моделей. После запуска программы вы видите что-то похожее на кусок глины. Чтобы придать ему форму, придется много работать мышью и часто переключаться между инструментами.
Аудиоредакторы
Cakewalk Sonar — звуковая рабочая станция с профессиональными инструментами для сочинения музыки, записи, редактирования, сведения и мастеринга аудио. В апреле 2018 года продукт Cakewalk Platinum стал бесплатным. Вдобавок у него активное сообщество: можно делиться своим творчеством, получать фидбэк, скачивать дополнения.
MuseScore — кроссплатформенный нотный редактор для создания музыки через работу с партитурой. Бесплатный, с открытым исходным кодом (GPLv2) и десятками плагинов. Удобно использовать в связке с Sonar.
Bosca Ceoil — программа-трекер, где вы создаете музыку методом расстановки семплов. Есть онлайн-версия и десктопные приложения для Windows, Linux, MacOS X.
FamiTracker — позволяет создавать музыку для восьмибитных приставок NES, Famicom и Dendy. Благодаря экспорту в формат NSF ваши композиции будут без проблем воспроизводиться не только в эмуляторах, но и на реальном «железе». А еще вы сможете сохранять музыку в WAV-файлы.
Wwise — система интерактивного звука для игр и приложений, в том числе AR/VR. Работает на всех основных десктопных и мобильных платформах, с устройствами виртуальной и дополненной реальности HTC, Oculus, Google, Sony, Microsoft, а также на консолях Xbox, PS (3, 4, Vita), Wii, Nintendo Switch. Инструмент не совсем для новичка — скорее «на вырост». WWise бесплатна в нескольких случаях:
- при бюджете игры менее 150 000 $. Ограничение — можно использовать до 500 звуков;
- для некоммерческих проектов. Лицензию присылают по заявке.
К системе можно прикручивать сторонние плагины.
FMOD Studio — набор инструментов, который охватывает весь цикл работы со звуком для игр на Unity, UE4 и других движках. Упрощает взаимодействие звукорежиссеров и программистов: те и другие могут быстро вносить в проект изменения, не мешая друг другу. Работает на ПК и Mac.
Audacity — простой кроссплатформенный звуковой редактор, функциональность которого можно расширять за счет плагинов, в том числе VST и LV2.
Русскоязычные сообщества игроделов
Для начала пройдемся по группам VK:
GGDev — новости игровой индустрии, уроки и статьи для разработчиков, обсуждение жанров и игровых механик, стримы мероприятий. Реклама своих проектов строго запрещена — админы говорят, что в этом «фишка» группы. 6000 подписчиков.
Инди игры | Indie Games — группа для продвижения ваших инди-проектов, а формально — паблик Indie-раздела на портале Game.ru. Участники могут предлагать свои материалы, но публикует что-либо только админ. Зато в обсуждениях подписчики делятся трейлерами и скриншотами, новостями и мнениями, ищут людей в команду.
Unity3D & CG / Unity 3D — группа взаимопомощи Unity-разработчиков. Основная масса публикаций — это вопросы участников по разным аспектам работы над игрой. Причем сообщество очень живо откликается и помогает, что и делает группу интересной. Более 32 000 участников.
Игровая вселенная — публикует познавательные материалы для игроделов и gamedev-вакансии. Подписчиков — 24 000.
Last Indie Standing — обсуждение инди-игр и их разработки, 5–10 постов в день. Иллюстрированные заметки по гейм-дизайну, новости, конкурсы, видео лекций и конференций. Около 4000 подписчиков.
GameDev — Создание игр — группа с лозунгом «Научим запускать однообразные провальные проекты». 🙂 Основа ленты — ссылки на познавательные материалы (в основном с Хабра). Реже появляются анонсы мастер-классов и конференций по играм. Участников — 7000.
Обязательно загляните в «Лигу разработчиков видеоигр» на Pikabu! Кстати, там вы можете встретить преподавателей GeekBrains, но об этом в другой раз. А пока предлагаю полистать красочные посты в ленте Лиги или даже написать туда о вашем проекте.
Новости, советы, конкурсы
В Рунете есть крупные форумы-сообщества, где можно задавать вопросы, показывать свои работы, набирать людей в команду, участвовать в конкурсах.
GameDev — сайт + форум для любителей и профессионалов игростроя, где можно узнать, чем сейчас живут разработчики игр в СНГ и ближайшем зарубежье. Регулярные обзоры новинок, обучающие статьи, анонсы главных мероприятий и ежедневное общение с увлеченными людьми — все это подстегивает развивать свой проект.
GCUP — портал, целиком посвященный созданию игр. Здесь собрана огромная база игровых движков и конструкторов. А еще тут — уроки, новости, утилиты и бурлящий форум, где выкладывают и обсуждают новые игры, набирают людей в команду, задают вопросы и делятся опытом.
DTF — информационное сообщество типа Pikabu, но более узкой направленности. Пользователи публикуют и обсуждают статьи про IT и сферу развлечений, в том числе игры и их разработку. Еще тут есть раздел вакансий для разработчиков, гейм-дизайнеров, художников и других спецов, участвующих в создании и раскрутке игр.
Уф… На этом все. Спасибо, что дочитали! Если нашли интересное — не забудьте добавить в закладки! 🙂
Всем, кто задумал свою игру и готов творить до победы, — успеха и неиссякаемой мотивации! Расскажите о своем проекте в комментариях. Надеемся, эта статья приблизит вас к цели.
Мы упустили что-то важное и замечательное? Забыли упомянуть ваш любимый инструмент разработчика или сайт с игровыми ресурсами? Пожалуйста, дополните наш список — будем признательны за подсказки и обратную связь.
Профессиональные шаблоны игровых сайтов: WordPress, Joomla, Html
В одной из прошлых публикаций мы рассматривали бесплатные шаблоны сайтов игр где собрали для вас 33 достаточно неплохих варианта. Были там и HTML решения, и PSD материалы, и готовые наработки под разные CMS системы — в общем, есть из чего выбрать. Однако большинство тех макетов проигрывают по визуальному впечатлению и дизайну, если сравнивать с премиальными шаблонами сайтов игровой тематики. Именно о последних сегодня и будем говорить.
В отличии от некоторых других постов, например, с шаблонами Joomla 3 или макетами HTML5 мы решили не совмещать бесплатные и премиум шаблоны игровых сайтов в одной статье. Во-первых, заметка получилось бы чересчур огромная и сложная для восприятия. Во-вторых, так проще сориентироваться в материалах — если вы надумали покупать профессиональную тему, то не придется тратить время на пролистывание бесплатных вариантов. Ну, и наоборот, если, допустим, занимаетесь личным/фан сайтом по игре и уверены, что хотите скачать игровые шаблоны сайтов без каких-либо затрат, нет смысла лишний раз себя расстраивать разницей по дизайну с платными макетами.
Как бы там ни было, для профессионального коммерческого проекта мы бы все же советовали обратить внимание на премиальные темы. Первое впечатление посетителей о дизайне сайта и его функциональности крайне важны. Все макеты ниже взяты из раздела игр в TemplateMonster — одного из самых крупных порталов премиальных шаблонов. Для удобства разделили их по категориям.
Шаблоны игровых сайтов на WordPress
Начнем с самой популярной CMS системы и макетов для нее. Работать с WordPress проще простого, плюс (если нужно) при покупке темы в TemplateMonster есть возможность заказать ее установку.
Game World
Функциональный шаблон Games
Games Portal
Шаблон игрового портала
Игровой адаптивный сайт
Game Box
Pokemania
Не могли пройти мимо данной темы, т.к. она сейчас в тренде. Если делаете веб-проект о покемонах, лучше варианта не найти.
Play Games
Самым последним вариантом в данном блоке является универсальный шаблоном Monstroid, в который разработчики дополнительно включили MotoPress редактор, множество типов страниц, слайдеры, Google шрифты, более 100 шорткодов и т.п. Хотя, в принципе, обычные игровые макеты также обладают хорошей функциональностью и всеми необходимыми настройками.
Шаблоны игровых сайтов на Joomla и Drupal
Есть в TemplateMonster варианты и для других CMS: представляем вашему вниманию сначала 2 шаблона игровых сайтов под Joomla, потом 3 для Друпала.
Games World
Игровой портал на Joomla
Адаптивный Drupal шаблон
Game Box для Drupal
Game Port
HTML шаблоны игровых сайтов
Особенно сильно от бесплатных макетов отличаются шаблоны игровых сайтов на HTML. Кроме того, что они визуально смотрятся намного круче, так еще здесь предусмотрены дополнительные функции, например: слайдеры, поддержка HTML 5, выпадающие меню, совместимость с Bootstrap, адаптивность и многое другое.
Двухколоночный HTML макет
Gamez
Game Edge
Адаптивный HTML игровой портал
Finest Game
Шаблоны сайта онлайн магазина игр + MotoCMS
Здесь мы объединили сразу две категории: макеты для конструктора MotoCMS + шаблоны сайтов онлайн магазинов игр. Веб-проекты могут не только рассказать о новинках игровой индустрии, но и продавать сопуствующие товары (приставки, диски). На портале TemplateMonster в меню слева найдете специальные фильтры для выбора той CMS, с которой вам проще работать. Также советуем оценить подборку адаптивных шаблонов интернет-магазинов в другом блоге, где собрано несколько десятков лучших вариантов. Теоретически для онлайн шопа вы можете использовать любой макет магазина, просто заменить графику на близкую игровой тематике.
Gamedixi (для Prestashop)
Games Online Store (под Magento)
Games Store (на WooCommerce)
Шаблон выглядит достаточно красочно и оригинально — реально один из лучших примеров WooCommerce магазина со всеми его преимуществами. Для тех, кто не в курсе — это плагин популярного движка вордпресс.
Игровой HTML портал для MotoCMS
Games Portal
GameStorm
Напоследок добавили еще один шаблон игрового сайта в PSD. Создан на Photoshop CS+ и стоит всего 11 баксов. На TemplateMonster найдете еще 15-ти других макетов без верстки.
GameBox (PSD макет)
Итого получилось 25 профессиональных шаблона под сайты игровой тематики. Что касается цен, то в среднем они колебаются в диапазоне от 55 до 75 долларов. Для функционального макета с PSD это, в принципе, достаточно адекватная стоимость. Мало того, что в итоге вы получите красивый дизайн, так еще и по функциональности данный шаблон игрового сайта будет отвечать всем современным запросам (в том числе и корректно работать с мобильными устройствами).
Кстати, в TemplateMonster постоянно проводят разные акции со скидками. На страницах Дизайн Мании уже были подобные заметки, например, -40% на все темы или -30% в посте про адаптивные шаблоны. Можно следить за новостями и подождать ближайших праздников — думаю, на хэллоуин что-то будет и, конечно же, там планируется новогодняя распродажа.
Использование программы Adobe Photoshop в создании дидактических игр | Методическая разработка по теме:
Использование программы Adobe Photoshop в создании дидактических игр.
Урок№1. Создание силуэтных и контурных изображений.
Этот урок разработан на примере создания игры «Силуэты и контуры».
Для работы необходимо подготовить картинки с цветным изображением.
1. Откройте программу Adobe Photoshop. Перед началом работы убедимся, что все необходимое есть у нас под руками. Для этого нужно открыть меню «Окно» (Window). Нам понадобятся окна Слои, Инструменты. Около этих слов должны стоять галочки. Это означает, что окна уже открыты на экране. Если окон на экране нет, нужно щелкнуть по их названиям мышкой, и они появятся.
2. Для дальнейшей работы необходимо открыть файл с цветным изображением. Для этого на верхней панели программы заходим файл →открыть. Далее открывается окошко с данными вашего компьютера, где вы указываете адрес и имя нужного файла (например, груша).
3. На правой панели «Слои» необходимо создать копию слоя, с которой мы будет работать. Для этого выделенный синим слой перетащите вниз на кнопку «создать новый слой».
Появился новый слой, который мы и будем использовать в работе. Чтобы слой-оригинал не отвлекал, его можно удалить, перетащив аналогичным образом, только на кнопку «удалить слой» (находится в нижнем правом углу)
4. Далее необходимо сделать фон прозрачным. Для этого на вертикальной панели нажимаем инструмент «волшебная палочка», кликаем на фоне изображения и наживаем на клавиатуре кнопку delite (удалить). Фон стал прозрачным. Повторный клик мышью на рабочей области позволит выйти из режима «волшебная палочка».
5. Приступаем к выполнению силуэтного изображения. Нам необходимо выполнить наложение цвета на изображение. Для этого переходим к палитре слоев на правой панели.
5.1. В нижней её части выбираем инстумент «добавить стиль слоя» → окно «наложение цвета». Здесь необходимо задать цвет перекрытия (цвет будущего силуэта). Нажмите ОК.
6. Сохраняем полученный силуэт. Для этого заходим в меню Файл→сохранить как→указываем адрес для сохранения, имя файла (например, груша силуэт) и сохраняем в формате JPEG (сохранить →параметры jpeg →качество наилучшее →ок).
7. Для создания контурного изображения вновь обращаемся к палитре слоев, нажимаем на иструмент «добавить стиль слоя» →открываем окно «обводка». Установите желаемый цвет обводки (это будет цвет контура). Регулируйте ширину обводки, перемещая ползунок размера до желаемой ширины (например, 10 пикс.). Нажмите ОК.
8. Затем на верхней панели программы заходим в меню «Слои» →выполнить сведение. Слой заблокирован, фон стал белым.
9. Чтобы удалить вннутренний и внешний фоны изображения создаем копию слоя (см. п.2 выше). Далее на вертикальной панели нажимаем инструмент «волшебная палочка», кликаем на внутреннем фоне изображения и нажимаем на клавиатуре кнопку delite (удалить). Аналогично удаляем и внешний фон.
10. Сохраняем файл (см. п.6), но под другим именем (например, груша контур).
11. Подобно данному уроку можно выполнить изменение группы цветных изображений в контурные и силуэтные. Для этого цветной образец должен содержать несколько изображений. Последовательность выполнений аналогично п.2-10 представленного урока.
В результате вот что может получиться:
Материал, намеченый для изучения на этом уроке, изложен.
Это все, что я хотела Вам сообщить на этом уроке. На этом урок закончен. Спасибо за внимание!
Урок№2. Наложенние и транформация изображений.
Этот урок разработан на примере создания игр «Наложенные изображения» и «Посчитай контуры».
Для работы понадобятся контурные изображения предметов.
1. Откройте программу Adobe Photoshop. Для начала работы нам необходимо открыть файл-заготовку с контурами (например, овощей). Открывать изображение очень просто, достаточно проследовать в (Файл – Открыть) и выбрать нужное вам изображение (например, контуры), нажав “Окей.” Однако слой с контурными изображениями заблокирован.
2. На правой панели в палитре «Слои» необходимо создать копию этого слоя, с которой мы будем работать. Для этого выделенный синим слой перетащите в нижнюю часть панели на кнопку «создать новый слой». Появился новый слой, который мы и будем использовать в работе. Чтобы слой-оригинал не отвлекал, его можно удалить, перетащив аналогичным образом, только на кнопку «удалить слой» (находится в нижнем правом углу)
3. Работаем с активным слоем. Далее необходимо сделать фон прозрачным.
3.1. Для этого на вертикальной панели нажимаем инструмент «волшебная палочка», кликаем на белом фоне в окне с изображением и наживаем на клавиатуре кнопку delite (удалить). Фон стал прозрачным. Так как изображений много, то кликаем «волшебной палочкой» внутри всех изображений, удаляя внутренний белый фон.
3.2. Повторный клик мышью на рабочей области позволит выйти из режима «волшебная палочка». Рабочие контуры подготовлены к перемещению.
4. Для дальнейшей работы необходимо создать новый файл.
4.1. Для этого на верхней панели программы (в меню) заходим файл →новый→задаете имя файла (например, овощи наложенные)→, установки→А4→цветовой режим→ RGB→содержимое фона →прозрачный. Нажимаем ОК. Это рабочий фал, на котором мы будем создавать наложенные изображения.
4.2. Обратите внимание, на правой панели «Слои» выделен рабочий слой. Перемещаясь с одного окна изображения на другое изменяется и активный слой.
5. Приступаем к перемещению необходимых контуров на окно «Овощи наложенные».
5.1. Для этого переходим к окну с контурами овощей, выбираем на вертикальной панели инструмент (прямоугольная область) и выделяем нужный для перемещения контур (выделение производится путем перетаскивания курсора при нажатой левой кнопке мыши).
5.2. Затем на вертикальной панели инструментов нажимаем (перемещение) и перетаскиваем на новый файл «Овощи наложенные». (Перемещение осуществляется путем перетаскивания курсора при нажатой левой клавише мыши). Не отключая действия «перемещение» вы можете переместить изображение в любое место окна.
5.3. Для того, чтобы увеличить размер перемещенного изображения нажимаем на клавиатуре одновременно кнопки (Ctrl + T). Вокруг нашей картинки появится квадратик с точками на краях и по углам. Если мы нажмем и будем держать на одну из этих точек, то мы сможем растягивать наше изображение как захотим, двигая мышку с зажатой левой клавишей мыши. А если вы хотите увеличивать изображение пропорционально, сохраняя пропорцию между длинной и высотой картинки, то вам надо нажать левой кнопкой мыши на одной из точек, которая стоит на углах картинки, одновременно нажимая клавишу «Shift» на клавиатуре, и повести мышкой в сторону. Вот таким простым способом мы растягиваем наше изображение по холсту.
5.4. Так же можно повернуть изображение, если подвести курсор мыши к угловой точке на небольшое расстояние. У вас вместо курсора появится небольшая изогнутая стрелочка. Нажимая и удерживая левую кнопку мыши вы можете вертеть и крутить изображение как вам захочется. Вы наверняка заметили точку по середине вашего изображения во время его трансформации. Так вот, перемещая эту точку по изображению, тем самым, вы перемещаете ось его вращения.
5.5. Если вам понадобится отразить изображение вертикально или горизонтально, необходимо выполнить его трансформацию. Для этого заходим в меню Редактирование →трансформирование→ отразить по горизонтали/вертикали.
5.6. Остановить действия «увеличение» или «трансформирование» можно двойным щелчком мыши внутри изображения.
6. Проделаем то же самое с другими контурами, которые вы хотите переместить и получим наложенные изображения овощей. Перемещать изображения в окне возможно только при активном слое (на палитре слоев он должен быть синим), не забывайте об этом.
7. Наше задание готово, необходимо его сохранить. Для этого заходим в меню Файл→сохранить как→указываем адрес для сохранения. Имя файла уже указано (т.к. мы создавали новый файл «Овощи наложенные») и сохраняем в формате JPEG.
8. Окно файла «Контуры» следует закрыть, оно нам больше не понадобится. При его закрытии появится окно с вопросом о сохранении изображения. Нажимаем НЕТ, т.е. изменения там не сохраняем.
9. Осталось открытым окно «Овощи наложенные». На примере одного контура рассмотрим вариан создания игрового задания «Посчитай, сколько контуров».
9.1. Для образца оставим один слой (например, контур огурца). Остальные слои удаляем в (нижний правый угол).
9.2. Далее копируем изображение. На вертикальной панели нажимаем инструмент перещение, нажимаете на клавиатуре кнопку Alt и перемещаете копируемый контур в нужное место. Во время перемещения Alt удерживать не нужно. Повторить данное действие необходимое количество раз.
9.3. Располагаем по своему желанию все копии изображения, производя при этом по необходимости действия «трансформирование», «отражение», «увеличение размера» (см. п. 6.3 – 6.6).
9.4. Затем на верхней панели программы заходим в меню «Слои» →выполнить сведение. Слой заблокирован, фон стал белым. Для сохранения изображения (см.п.8) указываем адрес файла, новое имя (например, Посчитай огурцы) и сохраняем в формате JPEG.
Материал, намеченый для изучения на этом уроке, изложен.
Это все, что я хотела Вам сообщить на этом уроке. На этом урок закончен. Спасибо за внимание!
Знакомьтесь, полезные инструменты!
Rectangular marquee (прямоугольная область) — [M] — позволяет произвести выделение прямоугольной области для последующего её редактирования. Выделение производится путем перетаскивания курсора при нажатой левой кнопке мыши.
Magic wand (волшебная палочка) — [W] — щелкните мышью на изображении и Photoshop выделит непрерывную область, залитую одним цветом
Move (перемещение) — [V] — позволяет переместить выделенную область или активный слой путем перетаскивания курсора при нажатой левой клавише мыши. Если перед использованием инструмента нажать и удерживать клавишу ALT, то в момент нажатия на левую кнопку мыши будет создана копия текущего слоя или выделенной области, и перемещаться уже будет копия. Если необходимо совершить перемещение строго по вертикали или горизонтали, нажмите и удерживайте клавишу SHIFT в момент перетаскивания выделенной области.
Crop (кадрирование) — [C] — позволяет удалить ненужные поля изображения. Перетаскивая курсор при нажатой левой клавише мыши производится выделение области (кадра), которую необходимо оставить. Всё, что находится вне области выделения будет отрезано.
Eraser (ластик) — [E] — стирает изображение с текущего слоя. Если текущий слой — фон (Background), или слой с заблокированной прозрачностью, то ластик просто закрашивает изображение цветом фона.
Zoom (лупа) — [Z] — позволяет изменять масштаб изображения выводимого на экран. Текущее значение масштаба (в процентах) выводится в заголовке окна изображения.
Полезные ссылки с описанием уроков:
http://photoshopgu.ru/ сайт «Фотошоп для валенков»
|
Широкоформатные обои красивые заставки картинки качественные фото Лучшие обои HD обои фэнтэзи на Wallpapers-image.ru прекрасное украшение для вашего рабочего стола картинки фоны заставки для рабочего стола все отличного качества. |
Очень красивые и качественные обои 2560×1440 с девушками подойдут для любого монитора. Оригинальные расцветки и отличное качество помогут вам найти именно ваш стиль и наши обои еще долго буду радовать ваш глаз. Большие красивые обои с девочками |
Скачайте на ваш рабочий стол обои прикольные высокого качества размеры 1280×1024 1366×768 1600×900 1680×1050 1440×900 1920х1080 2560×1440 2560×1600. Все картинки отбираются вручную и тщательно описываются они украсят ваш рабочий стол и поднимут вам настроение. |
Фотографии котов картинки красивых кошечек фоны и обои пушистых кисок можно скачать на нашем сайте без регистрации. Есть все разрешения, на этой странице 2560×1440 пикселей. Обои экзотических котят украсят ваш рабочий стол планшет или смартфон. |
Качайте без регистрации потрясающей красоты обои природы высокого качества. Это фотографии красивых пейзажей, лесных массивов, горных ландшафтов картинки всех времен года есть обои огромного размера вся красота природы в чудесных обоях на рабочий стол. |
Лучшие обои. Яркие обои со всего мира: достопримечательности городов мосты небоскребы соборы замки красивые панорамы обои с разрешением 2560×1440 пикселей и ниже. Скачать широкоформатные обои качественные обои картинки красивые заставки фото обои высокого качества |
потрясающий способ показать работу, но…
Недавно в Твиттере была дискуссия между несколькими сеньорами и ведущими художниками о том, что можно и что нельзя добавлять в портфолио художника персонажей. Как менеджер по найму в своем отделе, в этой статье я высказываю собственное мнение и делюсь им с остальными. Также эта статья подразумевает то, что вы знакомы с основами терминологии игрового арта.
Основы: Брейкдаун-шоты вашего персонажа.
Обычно для персонажа игрового арта этот пункт включает следующее:
— Презентационный шот, который показывает персонажа с разных углов, обычно в перспективе или со стороны. Если важно показать характер персонажа, то для этого подбирается наиболее подходящая поза. Но, благодаря профессиональному опыту, могу сказать, что в таком случае нужно будет иметь большое количество вариантов поз, поэтому оптимально сразу ставить персонажа в Т-позу.
— Брейкдаун-шот модели персонажа показывает его «каркас» и некоторые уже наложенные текстуры. Нам важно видеть, насколько хорошо вы понимаете топологию игрового ассета. Опять же, благодаря профессионализму мы знаем, что этот дополнительный брейкдаун не всегда возможен из-за договоров о неразглашении, но для личной работы он обязателен.
— Шот высокополигонального ассета. Он показывает детализированность вашего ассета.
— Дополнительные шоты (красивые динамичные шоты, крупный план и т.д.) Тем не менее вы можете показать главное и тремя основными шотами.
Навигация: делайте сайт простым!
Красивые навороченные сайты с анимацией и загрузочными экранами вовсе не обязательны. Мне интересно качество вашей работы, а не впечатляющий сайт. То же самое касается навигации: я просто хочу нажать на галерею и получить прямой доступ к вашим работам. Лучше всего с этой задачей справляются сервисы Artstation и Behance.
Исключительно Zbrush: Что ж… вы на полпути, судя по всему.
Нанимая на работу, я сталкиваюсь с этой самой большой неприятностью.
Честно говоря, мне не очень важно, что написано в вашем резюме. Если я вижу только скульптуры в вашем портфолио, я сразу предположу, что вы знакомы лишь с половиной рабочего процесса. Возможно вы отлично справляетесь с текстурированием, ретопологией и т.д., но в прошлом я нанимал людей с той же ситуацией (потрясающее резюме, но только скульптуры в портфолио), и они редко могли себя успешно проявить на других этапах. Разные компании имеют разные требования к своим сотрудникам. Может быть, есть несколько таких, где нанимают художников только для скульптинга.
В нашей команде мы хотим, чтобы художники могли создать персонажа, начиная от зарисовки в блокноте и заканчивая готовым ассетом. У нас нет отдельных текстурщиков, художников по волосам или скульпторов. Каждый несет ответственность за всего персонажа.
Но речь не только о том, как вы умеете хорошо текстурировтаь или создавать готового персонажа. Речь о том, как хорошо вы разбираетесь в деталях работы и инструментах. Некоторые художники работали в эру PlayStation 2, но они должны уметь использовать современные релевантные технологии и понимать их. Всегда будет художник с опытом меньше, чем у вас. И если он поразит меня своим портфолио больше, чем вы, у него будет выше шанс попасть на собеседование.
Marmoset Viewer и Sketchfab: потрясающий способ показать работу, но…
Сейчас я совсем не против вышесказанного. По факту, я думаю, вы можете делать крутые вещи с помощью этих программ. Но имейте ввиду, что я менеджер по найму и я всегда занят своей работой, встречами и фидбэком. Поэтому просматривая портфолио соискателя, я должен сразу видеть результаты.
Так что изображения позволяют мне быстро оценить качество работы. А вышеприведенный софт нужно загрузить, он не всегда и загружается, он может быть не адаптирован под мобильные платформы и т.д. Теперь представьте, что я просматриваю 20 разных портфолио. Это займет много времени загрузки Marmoset Viewer.
Отмечу, что у меня нет возражений против этого в вашем портфолио, но делайте изображения приоритетнее. В идеале, самое важное размещайте вверху старницы, а видео и модели для просмотра размещайте внизу.
Оригинальность: всё такая же старая…
Если вы собираетесь сделать Бэтмена, добавьте ему нестандартные детали.
Если вы собираетесь сделать Солдата #102, подумайте о том, как сделать его необычным.
Просто потому что вы хотите получить работу в Netherrealm или в Infinity Ward не значит, что нужно копировать то, чем они занимаются. Потому что вы рискуете затеряться в куче одинаковых артов. При этом обязательно найдется кто-то лучше вас при прочих равных.
Создавая неординарные работы, пусть и не наилучшего качества, вы повышаете свои шансы быть замечеными.
Фокусируясь на стиле: Разнообразие = Гибкость.
Это моя точка зрения, но некоторые менеджеры по найму не согласны с ней. Тем не менее, я не хочу видеть людей, которые просто делают солдатов из World War 2 или просто делают красивых Спартанцев. Разнообразие означает гибкость в работе.
Просто потому что вы хотите работать в Blizzard и можете от руки нарисовать лучший арт по World of Warcraft не значит, что вы также можете работать на эту компанию, когда WoW (да бог меня простит) навсегда канет в лету и вам придется рисовать арты для их будущих реалистичных шутеров (хотя я сомневаюсь, что Overwatch 2 резко свернет в этом направлении).
Немного фэнтези, немного sci-fi, немного реализма, персонажи обоих полов, возможно пару работ с выдуманными существами, и у вас есть портфолио, которое показывает, что вы готовы к любой ситуации. Вы можете создать арты разной направленности и разной сложности. Все они и делают ваше портфолио интересным.
Надеюсь, что эта статья поможет людям с их персонажами и портфолио и что с некоторыми из вас я буду работать в будущем:D.
______________________________________________________________________________________________________________________________________
Перевод.
Здравствуйте.
Игры… Это одни из самых популярных программ, ради которых многие пользователи и покупают компьютеры и ноутбуки. Наверное, ПК не стали бы так популярны, если бы на них не было игр.
И если раньше для того, чтобы создать какую-нибудь игру необходимо было обладать специальными знаниями в области программирования, рисования моделей и пр. — то сейчас достаточно изучить какой-нибудь редактор. Многие редакторы, кстати, достаточно просты и разобраться в них сможет даже начинающий пользователь.
В этой статье хотелось бы затронуть такие популярные редакторы, а так же на примере одного из них разобрать пошагово создание какой-нибудь простой игры.
1. Программы для создания 2D игр
Под 2D — понимают двумерные игры. Например: тетрис, кот-рыболов, пинбол, разные карточные игры и пр.
Пример-2D игры. Карточная игра: Солитер
1) Game Maker
Сайт разработчика: http://yoyogames.com/studio
Процесс создания игры в Game Maker…
Это один из самых простых редакторов для создания небольших игр. Редактор выполнен достаточно качественно: в нем легко начать работать (все интуитивно понятно), вместе с тем большие возможности для редактирования объектов, комнат и пр.
Обычно в этом редакторе делают игры с видом сверху и платформеры (вид с боку). Для более опытных пользователей (те, которые немного разбираются в программирование) есть специальные возможности по вставке скриптов и кода.
Нельзя не отметить большое разнообразие эффектов и действий, которые можно задавать различным объектам (будущим персонажам) в этом редакторе: количество просто поражает — более нескольких сотен!
2) Construct 2
Сайт: http://c2community.ru/
Современный игровой конструктор (в прямом смысле этого слова), позволяющий даже начинающим пользователям ПК делать современные игры. Причем, хочу подчеркнуть, при помощи этой программы игры можно изготавливать для разных платформ: IOS, Android, Linux, Windows 7/8, Mac Desktop, Web (HTML 5) и пр.
Этот конструктор очень похож на Game Maker — здесь так же нужно добавлять объекты, затем прописать им поведение (правила) и создать различные события. Редактор построен по принципу WYSIWYG — т.е. вы сразу же будете видеть результат по мере создания игры.
Программа платная, хотя для начала будет предостаточно и бесплатной версии. Отличие различных версий описаны на сайте разработчика.
2. Программы для создания 3D игр
(3D — трехмерные игры)
1) 3D RAD
Сайт: http://www.3drad.com/
Один из самых дешевых конструкторов в формате 3D (многим пользователям, кстати, хватит и бесплатной версии, у которой ограничение на обновление сроком на 3 месяца).
3D RAD наиболее легкий конструктор в освоении, программировать здесь практически не нужно, разве что за исключением прописывания координат объектов при различных взаимодействиях.
Самый популярный формат игр, который создают с помощью этого движка — это гонки. Кстати, скриншоты выше это лишний раз подтверждают.
2) Unity 3D
Сайт разработчика: http://unity3d.com/
Серьезный и комплексный инструмент для создания серьезных игр (извиняюсь за тавтологию). Рекомендовал бы переходить к нему после изучения других движков и конструкторов, т.е. с набитой рукой.
В пакет Unity 3D входит движок, который полностью позволяет задействовать возможности DirectX и OpenGL. Так же в арсенале программы возможность работы с 3D моделями, работа с шейдерами, тенями, музыкой и звуками, огромная библиотека скриптов под стандартные задачи.
Пожалуй, единственный недостаток у этого пакета — это необходимость знания программирования на C# или Java — часть кода при компиляции придется дописывать в «ручном режиме».
3) NeoAxis Game Engine SDK
Сайт разработчика: http://www.neoaxis.com/
Бесплатная среда разработки практически любых игр в формате 3D! При помощи данного комплекса можно делать и гонки, и стрелялки, и аркады с приключениями…
Для движка Game Engine SDK в сети имеется немало дополнений и расширений под множество задач: например, физика автомобиля или самолета. При помощи расширяемых библиотек вам даже не понадобиться серьезное знание языков программирования!
Благодаря специальному плееру, встроенному в движок, игры созданные в нем могут воспроизводиться во множестве популярных браузерах: Google Chrome, FireFox, Internet Explorer, Opera и Safari.
Game Engine SDK распространяется как бесплатный движок для некоммерческих разработок.
3. Как создать 2D игру в редакторе Game Maker — пошагово
Game Maker. Добавление объекта.
Затем для объекта прописываются события : их может быть десятки, каждое событие — это поведение вашего объекта, его перемещение, звуки связанные с ним, управление, очки, и пр. игровые характеристики.
Чтобы добавить событие, щелкните кнопку с одноименным названием — затем справа в столбике выберите действие для события. Например, перемещение по горизонтали и вертикали, при нажатии клавиш стрелок .
Добавление событий к объектам.
Game Maker. Для объекта Соник добавлены 5 событий: перемещение персонажа в различных направлениях при нажатии клавиш-стрелок; плюс задано условие при пересечении границы игровой зоны.
Кстати, событий может быть очень много: здесь Game Maker не мелочиться, программа предложит вам много всего:
Задание перемещение персонажа: скорость перемещения, прыжки, сила прыжка и пр.;
Накладывание произведения музыки при различных действиях;
Появление и удаление персонажа (объекта) и т.д.
Важно! Для каждого объекта в игре нужно прописать свои события. Чем больше событий для каждого объекта вы пропишете — тем разностороннее и с большими возможностями получиться игра. В принципе, даже не зная что конкретно сделает то или иное событие, можно тренироваться добавляя их и смотреть как поведет себя игра после этого. В общем-то, огромное поле для экспериментов!
6) Последнее и одно из важных действий — создание комнаты. Комната — это своего рода этап игры, уровень, на котором и будут взаимодействовать ваши объекты. Чтобы создать такую комнату, нажмите кнопку со следующим значком: .
Добавление комнаты (этапа игры).
В созданной комнате, при помощи мышки, можно расставить наши объекты на этапе. Настроить фон игры, задать название окна игры, указать виды и пр. В общем — целый полигон для экспериментов и работы над игрой.
Запуск полученной игры.
Game Maker откроет перед вами окно с игрой. Фактически, вы можете смотреть, что у вас получилось, экспериментировать, играть. В моем случае Соник может перемещаться в зависимости от нажатия клавиш на клавиатуре. Своего рода мини-игра (эх, а были времена, когда белая точка, бегающая по черному экрану, вызывала дикое удивление и интерес у народа… ).
Полученная игра…
Да, конечно, полученная игра примитивная и очень проста, зато пример ее создания очень показателен. Далее экспериментируя и работая с объектами, спрайтами, звуками, фонами и комнатами — можно создать очень даже не плохую 2D игру. Чтобы создавать подобные игры лет 10-15 назад необходимо было обладать специальными знаниями, сейчас — достаточно уметь вращать мышку. Прогресс!
С наилучшими! Всем удачного игро-строя…
Из этой статьи вы получите общие представления, как рисовать крутую 2D графику для игр. Это не пошаговый туториал, это что-то в разы более крутое!
Статья предназначена для тех, кто имеет некоторое знакомство с игровой 2D графикой. В первую очередь это относится к людям, занятым программированием, и желающим создавать качественные игровые ресурсы. Далее – просто ко всем, кто хочет создавать игровую графику. Под 2D ресурсами в тексте подразумеваются любые 2-мерные изображения для игр: от спрайтов персонажей до больших фонов. Статья кратко ознакомит с добротными традиционными концепциями дизайна и тем, как они могут улучшить вашу игру. Предполагается, что она позволит вам сэкономить время и не развить дурной вкус.
Здесь не будут освещаться такие вещи, как форматы файлов, сравнение растровой и векторной графики или использованное в примерах к статье программное обеспечение.
Список тем:
- Формы
- Анатомия и пропорции
- Перспектива
- Наука о цвете
- Освещение и затенение
- Оттачивание навыков
Если эти пункты не схватили вас за живое, наглядная демонстрация ваших способностей «до» и «после» идет ниже:
Факт из интернета!Это реальные картинки. Верхнюю самостоятельно нарисовал и хотел использовать в своей игре программист, а нижняя – это то, что получилось после небольшой доработки его друга-дизайнера.
В повседневной жизни мы привыкли часто видеть 2D изображения. Но понимать, что вещь выглядит красиво, не то же самое, что знать, почему это так. Любое двумерное изображение можно разбить на базовые элементы, поэтому вы можете представлять себе создание двумерной графики как объединение этих элементов, чтобы: 1) Получилось похоже на то, что вы имели ввиду; и 2) Не было супер уродливо. Например, мы все знаем, как выглядят квадрат и сфера, но какое отношение это имеет к созданию понятного на вид персонажа?
Чтобы ответить на это, мы приступаем к первой части:
Формы
Зная о том, какую роль на самом деле играют формы, вы можете применять их для создания приветливой или неприветливой на вид игровой среды, а также делать, чтобы персонажи и объекты соответствовали (или намеренно не соответствовали) этой среде.
Начинайте с самых простых форм: кругов, квадратов и прямоугольников. Попробуйте нарисовать персонаж, состоящий только из квадратов или только из треугольников, а затем посмотрите, кто из них будет больше похож на героя, а кто – на злодея. Сохраняя свои первоначальные задумки в виде зарисовок с простыми фигурами, вы сможете генерировать много идей, преждевременно не отвлекаясь на проработку деталей (об этом много говорится в части «Оттачивание навыков»).
Как правило, заостренные формы содержат намек на искусственность или зло, а извилистые и округлые – на органическое происхождение и добро. Таков традиционный спектр характеров. Круг и треугольник находятся на его концах, а квадрат где-то посередине.
Перспектива
Перспектива – это создание иллюзии глубины на 2D-поверхности, она получается путем изменения форм и очертаний предметов, и это довольно обширная тема, поэтому вы увидите здесь несколько подзаголовков.
Геометрическая перспектива
В большинстве 2D игр создатели просто не желают связываться с геометрической перспективой, потому что ее реалистичная реализация в графике будет безумно трудоемкой. Чтобы пойти легким путем, разработчики пользуются нереалистичным предположением, что сбоку все видно одинаково хорошо (как в классическом платформере Super Mario), или разворачивают графику в более реальной на вид, но все же далекой от реальности изометрической проекции.
Мы детально изучим тему геометрической перспективы, потому что это наиболее сложный для понимания общий принцип, но даже очень простое его понимание также позволит значительно улучшить графику. В основе наиболее формальной теории перспективы лежит идея о точке схода. Параллельные линии, похоже, сходятся в одну точку на далеком расстоянии от наблюдателя. Это выглядит примерно так:
Еще больше впечатления внушил бы несущийся навстречу поезд
Вы обратили внимание как сходятся параллельные линии (реальные и воображаемые)?
Можно добавить еще больше красных линий, но и так все понятно
Красные линии пересекаются в точке схода. Вам также должна быть знакома линия, которая разделяет небо и землю. Это линия горизонта, которая получается при пересечении бесконечных (с точки зрения наблюдателя) плоскостей.
Точка схода и линия горизонта по своей сути воплощают простую идею: предметы, которые находятся вдали, выглядят меньше предметов, которые ближе к нам. А приближенная к нам сторона предмета кажется больше, чем удаленная. В приведенном выше примере использована только одна точка схода, но на самом деле на картине будет столько точек схода, сколько присутствует наборов параллельных линий – для каждого своя. Звучит слишком сложно? Так и есть, поэтому в рисунках перспектива обычно упрощается до одно-, двух- и трехточечной. В одно- и двухточечной перспективе предполагается, что один или несколько наборов параллельных линий остаются параллельными навсегда и никогда не сходятся. Вот пример куба и параллелепипеда в одноточечной перспективе:
Карандаш и бумага… А вы на что надеялись?
Обратите внимание, что горизонтальные и вертикальные грани остаются строго параллельными. Теперь посмотрим на двухточечную перспективу:
Изображая объекты в перспективе, часто принято прорисовывать их обратную сторону, чтобы лучше почувствовать трехмерность
Здесь прежде параллельные горизонтальные линии обрели свою точку схода. Вертикальные грани остаются параллельными. Наконец, трехточечная перспектива:
В трехточечной перспективе объект выглядит эпично, по крайней мере, с точки зрения высоты
Теперь все ребра обрели свою собственную точку схода. С чем их и поздравим. Надо сказать, что точки схода проще всего рисовать для параллельных линий. Но прорисовывая направляющие линии или даже целые параллелепипеды для сложных объектов, вы сможете лучше представить их глубину. Одно-, двух- и трехточечная перспектива используется наиболее часто, но есть по крайней мере один художник, который при создании сумасшедших сферических сцен использовал шеститочечную перспективу.
Для рисования трубок и других круглых предметов в правильной перспективе существует важная хитрость, потому что в перспективе круг деформируется особым образом. Когда на них смотрят наклонно, круги выглядят как эллипсы. Чем больше наклон, тем сильнее сжат эллипс:
Круг превращается в эллипс
Вот простое правило. Когда вы смотрите на край цилиндра (например, крышу круглого здания), кривая выгибается вверх. Когда вы смотрите вниз, например, на основание ствола дерева, кривая выгибается вниз. Через середину этого изображения проходит линия горизонта.
Чтобы показать объем фигур, их следовало бы заштриховать, но мы оставим так
Все же надо помнить, что в большинстве игр с 2D графикой стараются избежать трудностей при изображении геометрической перспективы. Выбирают точку обзора сбоку или прямо сверху, что сводит к минимуму необходимость в ней.
Ракурс
Когда с соблюдением перспективы рисуют фигуру персонажа, это называется ракурсом. Направленный на зрителя кулак будет выглядеть не просто больше чем тот, который держат сбоку, он также закроет собой значительную часть руки. Пример:
Грубо, но понятно
Часто художники рисуют ракурсы на глаз, просто потому что вычисление всех точек схода отнимает много времени. Но чтобы вы знали, как это должно быть в идеале, ниже показан ракурс с точками схода и цилиндрами. В этом виде делают наброски для конечностей:
Цилиндры рисовать проще, чем людейПомните, что персонажи, в особенности человеческие, могут быть представлены как ряд более простых объектов, которые легче скомпоновать. Это нормально, когда набросок фигуры делают в виде соединенных суставами цилиндров, а внутри них потом рисуют человека.
Перекрытие и параллакс
С перекрытием все просто: ближайшие к нам объекты будут накладываться на отдаленные и скрывать их. Весьма необходимая вещь для 2D игр, поскольку это самый простой способ показать игроку его позицию по отношению к объектам. Давайте рассмотрим чрезвычайно простой пример:
Картинка вошла в историю как странные холмы на фоне всех игр серии Super Mario
Этот набор линий создает у вас впечатление, что маленькая круглая штучка справа (куст?) находится перед остальными, а самая большая – позади. Эффект иногда называют «T-правилом», поскольку пересечение линий объектов впереди и позади образует нечто наподобие буквы T. Это просто, но довольно мощно. В приведенном примере все Т перевернуты вверх ногами:
Ветераны программирования могут вспомнить про ASCII 193
Параллакс – еще один важный эффект перспективы, связанный с отношениями перекрывающихся объектов. Его суть в том, что при движении зрителя далекие объекты смещаются меньше по сравнению с более близкими. Параллакс отлично подходит для 2D игр, потому что его довольно легко реализовать, и вы, несомненно, сталкивались с ним. Достаточно информации для начала можно почерпнуть из вот этой статьи в Википедии.
Поскольку 2D игры часто преднамеренно нарушают обычные правила перспективы по той простой причине, что их легче нарисовать без них, приходится полагаться на другие способы получить представление о глубине. Еще один из простых способов – делать объекты, предположительно удаленные от зрителя, более размытыми и менее подробными на вид. Вот пример из реальной жизни, на фотографии городского пейзажа промышленного Китая:
Городской смог во всей красе
Вы также можете заметить эффект геометрической перспективы, хотя в данном случае основная точка схода будет слева от кадра. Почти каждый 2D-платформер, когда-либо созданный, использует воздушную перспективу. Например (снова Super Mario World):
А также перекрытие и параллакс
Обратите внимание, что чем дальше на фоне находится объект, тем более размытым он выглядит. О близости объекта к игроку можно сказать даже только по цвету контуров. Это непосредственно сводится к идее контраста. Контраст расскажет игроку, что важно, а что нет.
Посмотрите снова на скриншот из Super Mario World. Слегка затененные голубые холмы? Не важно. Труба с белым бликом и черными контурами? Важно. Единственный ярко-красный предмет на экране? Супер важно. Помните, что интерактивные объекты в игре должны всегда выделяться по отношению к не интерактивным, если нет конкретной причины скрывать что-то от игрока.
Линейная и воздушная перспектива на ArtyFactory.com , Тьюториал от perspective-book.com
Наука о цвете
Цвет – это хитрая тема, и одна из наиболее субъективных в искусстве в целом. На цвет товарища нет, а цветовые сочетания и их значения различаются в разных культурах. Белый цвет может быть цветом чистоты на Западе, но в Японии он часто означает смерть. Тем не менее, есть несколько основных идей относительно цвета, которые помогут вам понять, что происходит с вашей графикой. Давайте для начала подумаем о том, из чего состоит определенный цвет.
Оттенок, насыщенность, яркость
Существует много способов разбивки по цветам, но тот, который обсуждается здесь, наиболее прост и удобен для начинающих цифровых художников.
Начнем со сравнения двух цветов:
Красный и синий
Красный и синий. Понятно, что это разные цвета, не так ли? Но на самом деле есть более точный термин Оттенок (Hue). Левый квадрат имеет красный оттенок, а правый имеет синий оттенок. Другие оттенки включают зеленый, оранжевый, фиолетовый и т. д. Хотя оттенок может показаться избыточным термином для определения цвета, это не так, потому что количество любого оттенка в цвете может измениться:
Красный и бледно-красный
Итак, перед вами два красных цвета, но чем они отличаются? Тот, что справа, как бы слегка… выцвел. У него меньшая Насыщенность (Saturation).
Насыщенность обозначает, насколько много цвета в цвете, или какой у него оттенок. О насыщенности можно думать, как о количестве серого в данном цвете. Нет серого – насыщенный цвет. Много серого – ненасыщенный. Так что в данном случае квадрат слева является полностью насыщенным, а справа – менее насыщенным. Чистый серый цвет – это просто цвет без насыщения. Насыщенность самое хитрое из свойств цвета, на котором может подскользнуться новичок. Просто имейте в виду, что насыщение оказывает большое влияние на атмосферу вашей графики. Высоко насыщенные цвета при использовании в больших количествах имеют тенденцию выглядеть более дружелюбно, а ненасыщенные цвета связаны с серьезным стилем.
Последнее свойство – Яркость (Brightness). Иногда вместо него используют Значение (Value). Яркость намного проще в понимании: показывает, насколько цвет ярче. Вот такой же красный, как выше, и его менее яркая (т.е. темная) версия:
Красный и темно-красный (менее яркий)
В связи между яркостью и насыщенностью надо немного разобраться:
Эти свойства можно изменять одновременно
Вот пример как цвет может влиять на атмосферу игры. Сравниваются New Super Mario (если вам уже надоели примеры из старого) и Castlevania: Lords of Shadow.
Также обратите внимание, что от Марио не полетели кровавые ошметки, когда он наступил на гриб
Ничего особенного, просто хотелось показать, как красиво на общем фоне выделяются яркие статусбары
Говоря о цвете, мы можем снова вспомнить про… Барни и Годзиллу! Подумайте, как цвет делает их такими разными с точки зрения оттенка, яркости и насыщенности, и что произойдет, если одно или несколько из этих свойств изменить. Что произойдет, если вы возьмете только одно свойство, и наделите им обоих персонажей? По-прежнему ли вам хочется обнять серого Барни?
Вкратце про RGB
Примите поздравления! Теперь вы разбираетесь в цветовой модели HSB (Hue Saturation Brightness/Тон Насыщенность Яркость) или HSV (Значение = Яркость). Практически любая программа для обработки изображений пользуется этим термином наряду с RGB (цветовая модель Красный Зеленый Синий) и CMYK (Голубой Пурпурный Желтый Черный). Но HSB, по всей видимости, проще всего объясняет, что происходит с цветами. Особенно в отношении того, насколько ярким или насыщенным является нужный вам цвет когда вы работаете над шейдингом. Однако в разных приложениях вам придется иметь дело с цветовой моделью RGB , поэтому кратко рассмотрим и ее. RGB попросту описывает все цвета с точки зрения красного, зеленого и синего, так как все цвета можно описать как комбинацию этих трех. Аналогичным образом информацию о цвете обрабатывает человеческий глаз. Потратьте немного времени, чтобы поиграть с цветовыми значениями и увидеть, как изменяются значения HSB и RGB, и как они связаны друг с другом. Вот стандартная диаграмма RGB (обратите внимание, что происходит, когда цвета перекрываются):
Также известна как аддитивная цветовая модель, поскольку цвета создаются путем добавления света, а не его поглощения (как в субтрактивной модели)Смотрите, как комбинация всех трех цветов дает белый. Можно представить, будто цвета играют в перетягивание каната, потому что когда они имеют одинаковую яркость, оттенки гасят друг друга и остается белый или серый цвет. Но если смешивать цвета в разных пропорциях, вы можете запутаться в логике получения результата, поэтому при работе над графикой мы и советуем HSB.
Теперь, когда мы разобрались, что такое цвет, давайте начнем рассматривать цветовые комбинации. Теория цвета сложна и достаточно субъективна, поэтому нижеследующее должно рассматриваться не как железное правило, а как направление для дальнейшего развития.
Основу самой теории цвета составляет цветовое колесо (цветовой круг). Если упростить объяснение, то колесо – это субъективное расположение оттенков цвета по отношению к красному, желтому и синему, которые делят колесо на три части (так называемые основные цвета) и зеленому, оранжевому, фиолетовому (вторичные цвета) между ними.
Типичное цветовое колесо
Оттенки также обычно подразделяются на теплые и холодные, в терминах цветовой температуры. Причем красно-желтые цвета считают теплыми, а синие цвета прохладными, как показано ниже:
Занимательный факт. Чтобы показать жару в кадре, в фильм «Делай как надо» (1989) режиссер добавил больше оранжевого тона
Здесь добавлена зона неопределенности, поскольку включенные в нее цвета являются своего рода пограничными. Но желто-зеленый часто относят к холодным, а пурпурный к теплым цветам. Важно помнить, что холодные цвета ассоциируются с темными оттенками, поэтому тень холодного цвета будет восприниматься как более темная, нежели выполненная в теплом цвете той же яркости.
Другие отношения между цветами также можно объяснить при помощи цветового колеса. Аналогичные цвета – это просто оттенки рядом друг с другом, такие как зеленый, желтый и цвета между ними. Контрастные цвета – это цвета (оттенки) на 180 градусов отстоящие друг от друга, которые кажутся более яркими при использовании вместе. Вероятно, вы видели их в действии, даже если не знали почему. Синий и оранжевый даже стали тропом (стандартным стилистическим приемом).
Если вы используете Firefox, посмотрите на иконку. Снова синий и оранжевый!
При работе над игровой графикой попробуйте связать цвета с определенными расами или врагами, средами или уровнями. Обозначение цветом не является обязательным, однако вы можете использовать его как способ влияния на восприятие игроков. Подумайте о наборе цветов для плохих парней, но используйте, например, уникальные оттенки этих цветов для конкретных врагов. Не бойтесь экспериментировать и старайтесь использовать более редкие цвета. В любой достаточно продвинутой программе для обработки изображений (например, в GIMP) цвет изменить проще, чем любое другое свойство. Это одна из немногих вещей, которые можно легко изменить в готовом рисунке.
Короче говоря: Цвета можно разделять и сравнивать друг с другом различными способами, а в различных комбинациях пары цветов могут выглядеть лучше или хуже.
Рекомендуем изучить (на английском): Теория цвета для дизайнеров
Освещение и затенение
В этой части вы увидите много примеров пиксель арта, но в них говорится о базовых концепциях, которые применимы к любому типу 2D графики.
Источники света
Начинающие художники часто не понимают, зачем на самом деле рисуют свет и тень. Затенение (или шейдинг) рисунка обычно означает применение разных оттенков, чтобы создать иллюзию света на чертеже, точно так же, как перспектива – это иллюзия глубины. И точно так же как с перспективой, вам необходимо создать какие-то 2D аналоги видимых в реальности эффектов. Тут есть только одно правило: свет должен откуда-то исходить. Он не может быть везде, поэтому если вы просто раскрасите рисунок, это будет выглядеть неправильно. Когда новички пытаются нарисовать тень, но не понимают как, это приводит к объектам, которые выглядят вот так:
Серьезно, так делать не надо
Сравните с вариантом без теней:
Лучше оставить так, чем как было выше
Это называется подушечным затенением, и его очень просто нарисовать не задумываясь. Кажется естественным оттенить предметы по внешним контурам… но это выглядит абсолютно ненатурально. Чтобы освещение выглядело правильно, оно должно иметь направление, и освещение/затенение поверхности нужно выстраивать в зависимости от того, с какой стороны на объект направлен источник света. Источником света может выступать солнце, лампа, озеро с кипящей лавой и т.д., или его можно оставить абстрактным.
Например, вы можете просто предположить, что почти весь свет падает от бесконечно удаленного источника под углом 45 градусов. Этого достаточно, чтобы красиво оттенить объекты в большинстве случаев. Анимированным спрайтам, которые будут использоваться на различных фонах, небольшая неопределенность помогает сохранить везде уместный вид.
Вот пример с источником света в верхнем левом углу:
Вам также надо подумать, не может ли одна из частей объекта отбрасывать тень на другиеОбращенные к источнику света части будут светлее, а противоположные им – темнее. Что может быть проще? Но это не всегда именно так…
Плоские и изогнутые поверхности
Плоские поверхности обычно имеют везде почти одинаковый оттенок, а на изогнутых мы увидим градиент. Изящные примеры из реального мира:
Американский бомбардировщик F-117. Плоские поверхности
Более привычный на вид F-15. Изогнутые поверхности
Снова вернемся к параграфу о формах. Кто из этих плохих ребят покажется вам хорошим, а кто насторожит вас одним внешним видом?
Вы можете видеть реальный градиент между светом и тенью. Обратите внимание на левое крыло, на нем градиент просто идеален. Теперь вернемся к ранее упомянутому убожеству с подушечным затенением:
Источник света для куба и сферы не совсем одинаков. В чем разница?
И тут для каждой грани кубу нужен только один оттенок, а сфере их надо гораздо больше – для имитации градиентной природы теней на изогнутых поверхностях.
Выше мы рассмотрели упрощенный шейдинг, так как свет может далее отражаться от поверхностей и подсвечивать затененные участки. Это часто означает, что часть тени, которая находится дальше всего от основного источника света, на самом деле светлее, чем в других местах. Эффект наиболее заметен, когда объект большой или находится очень близко к отражающей поверхности. Ниже показан классический пример:
Такой шейдинг позволяет лучше почувствовать объемЕще пара цифровых примеров на ту же тему.
Если бы сферы находились на голубой поверхности, отраженный свет имел бы голубой оттенок
На левом примере вы видите отражение света, расположенного за пределами края рисунка, так бывает с сильно отражающими поверхностями. Чем сильнее падающий свет, тем отчетливее виден и отраженный.
Изменение тона связано с отражением света и очень хорошо может быть показано на примере пиксель арта. Основная суть этого явления в том, что тон тени или отраженного света не всегда бывает только лишь более темной или светлой версией основного цвета объекта.
Наиболее часто с изменением тона можно встретиться у объектов, которые освещаются солнцем. Прямой солнечный свет имеет желтый тон, но голубое небо отражает на тени свой цвет, поэтому мы получаем желтые блики и тени голубого тона.
Вспомним про теплые и холодные цвета. Блики имеют теплый оттенок, а тени – холодный
Это понятие приобретает важность, когда у вас есть дополнительные источники света и они по цвету отличаются от основных (например, раскаленная лава). Помните, что окрашенный свет изменит цвет освещаемого объекта. Однако изменение тона может быть и просто стилистическим решением. Преувеличивая эффект или подставляя дополнительные цвета вы можете добиться очень интересной картины:
Если использовать оттенки слишком много, игра будет напоминать Instagram
Стоит знать еще, что тени быть менее насыщенными, и что менее насыщенные цвета могут казаться более темными, чем они есть на самом деле.
Среди художников нет единого мнения относительно изменения тона. Найдите свое решение, но помните, что чем сильнее вы измените тон, тем более сюрреалистическим станет ваш рисунок.
Шейдинг и текстурирование
Шейдинг может подсказать не только форму объекта, но и его текстуру. Текстура объекта влияет на то, как от него отражается свет. Поэтому изменяя шейдинг вы иногда можете изменить впечатление от текстуры. Чтобы различать некоторые типы текстур существуют свои термины:
Это когда-нибудь пригодится вам при покупке краски для ремонта
От поверхности с глянцевой текстурой свет отражается хорошо и с очень небольшим рассеянием. Это означает, что освещенная часть предмета будет очень яркой (из-за хорошего отражения), а неосвещенная – очень темной (потому что дополнительная подсветка идет от рассеянного света, а его нет). Хорошим примером глянцевой текстуры является только что отполированный кузов автомобиля.
Матовая текстура отражает не очень хорошо и рассеивает свет при отражении. Это означает, что она кажется более ровно освещенной. Хорошим примером поверхности с матовой текстурой служит старая автомобильная шина.
Гладкая текстура стоит где-то посередине. Она хорошо отражает, но сильно рассеивает свет при отражении. Гладкую текстуру часто имеет пластик, например, большинство компьютерных клавиатур.
Итак, не забывайте о свойствах изображаемых вами материалов. Это глянцевый металл или матовая ткань? Одежда средневековых персонажей не должна отражать свет будто пластмасса, а космические доспехи не должны казаться мягкими на ощупь.
Короче говоря: Чтобы 2D графика смотрелась достоверной, свет должен иметь направление.
Оттачивание навыков
Что делать теперь, когда изложены все основы? Вперед! Начинайте пробовать! Это правда: рисовать может любой. Конечно, у некоторых людей есть больше навыков, но самая большая разница между плохим художником и хорошим – это то, насколько много они практиковались. Чем больше практики, тем лучше вы владеете навыком. Но практикуйтесь с умом. Отличную возможность для этого дают игровые проекты. Если вы мечтали о своей игре, начинайте делать наброски для нее параллельно читая эту статью.
Если нет своего, присоединяйтесь к чужим игровым проектам! Даже в самой маленькой игре достаточно графики, чтобы вы отлично попрактиковались и в следующий раз рисовали заметно лучше. И еще: чтобы быть игровым художником, вам необязательно рисовать как художники эпохи Возрождения.
Карандаш и бумага
Единственный способ лучше рисовать – это практиковаться, а самый дешевый и простой способ – делать это с помощью карандаша и бумаги. Использовать только цифровые инструменты заманчиво, так как вы сразу бы получали готовый результат. Но не поддавайтесь соблазну! Когда вы рисуете вручную, вы активнее участвуете в процессе. Вдобавок, вы сможете избежать некоторых дурных привычек, которые возникают когда вы полностью полагаетесь на компьютер. Конечно, инструменты в программе могут выглядеть очень мощными. Но если вы попытаетесь сначала рисовать спрайты при помощи авто фигур, поверьте, у вас получатся смешные и уродливые вещи, которые невозможно было бы сделать с помощью карандашного наброска.
После того, как вы наработаете хорошие базовые привычки, будет еще куча времени, чтобы безжалостно исследовать все инструменты и приемы. Вам кажется странным рисовать карандашом на бумаге, если вы уже привыкли работать в программе? Но не просто так же это стало отправной точкой для художников во всем мире.
Приобретите блокнот для зарисовок (на обложке написано sketchbook), карандаши и хорошую стирательную резинку. Резинкой вам придется пользоваться очень часто. А вот блокнот для зарисовок необязателен. Ключевая идея в том, что вам нужна практика, поэтому можете рисовать хоть на полях своей школьной тетрадки. Но в блокноте все работы будут в одном месте, поэтому не придется впоследствии жалеть, что самый удачный рисунок злодея оказался на листке с домашней работой.
Наброски (они же скетчи)
В карандашных набросках лучше считать, что все линии – лишь временные предположения, а не окончательный вариант. Не попадайте в зависимость от своих линий. Рисуйте поверх, стирайте и рисуйте снова без оглядки на то, что уже есть. Конечно, для этого надо делать линии достаточно легкими. Начинайте с основной формы вашего объекта и постепенно добавляйте детали. Большинство объектов можно аппроксимировать основными формами, то есть сферой, цилиндром и «коробкой», что особенно полезно для рисования в перспективе.
Например, не рисуйте более или менее законченную голову, а переключайтесь на грудную клетку, затем руки, ноги и т. д. Преждевременно вдаваясь в детали, вы можете упустить из виду, как все они соответствуют друг другу. Нарисуйте все вместе на большом грубом наброске и добавляйте детали поверх. Не бойтесь продолжать набросок поверх первых линий, пока не добьетесь идеала общей формы, и не бойтесь начинать заново.
Заключение и дальнейшее чтение
Теперь вы знаете основы и полностью готовы к созданию приличной графики для 2D игр. Если вам интересно узнать больше по теме, то на протяжении статьи вы можете заметить ссылки на дополнительные источники. Сама же статья во многом основывается на книге Криса Соларски «Drawing Basics and Video Game Art». Вы можете прочитать некоторые из его сочинений . Дерзайте!
Оригинал статьи на английском языке: Total beginner guide for better 2d game art
P.S.
Я работал, делая инструментарий и движки для художников, создающих игры и визуальные эффекты более десяти лет, и я всегда недоумевал, что люди делают различия между «программным артом» и «настоящим игровым артом». Я также заметил, что люди, которые дают вам свободно пропустить плохую графику, это в основном другие программисты. Не зависимо от того, как забавна ваша игра или как удивительна технически демоверсия, ‘непрограммисты’, которым вы показываете такой нарисованный персонаж, начинают думать: «Это у него реактивный ранец или может что-то другое?». Зачастую, вы можете найти способ создать хорошую графику без необходимости рисовать ее с чистого листа. Но иногда вам нужно создать графику «на лету». Ограничения в бюджете или правила в игровом соревновании, или просто сжатые сроки для прототипа, могут потребовать от вас взять линейку и кисть в руки.
Я не умею рисовать, правда… Хочу сказать, посмотрите на это:
Если это — то, на что похожа ваша графика, тогда эта статья для вас. Я думаю, что поделился бы рядом подсказок, как сделать графику лучше. Эти подсказки будут полезны всем, вне зависимости от способностей и опыта в рисовании.
В то время как подсказки типа «занимайтесь рисованием набросков каждый день» или «посетите художественный музей» могут быть полезны для начинающего художника, эта статья предназначена не для художника, она о том, как заставить людей думать, что вы — кодер, программист, любящий математику, обладаете некоторыми художественными способностями.
Кроме того, ни одна (почти) из этих подсказок не требует «практики», хотя практика является полезной и даже существенной для настоящего художника. Всегда кажется, что крайний срок сдачи проекта приходит с рассветом, а вам всего-то нужно несколько этих проклятых спрайтов.
Кое-что из этого рассказа пригодится и для пользователей Фотошопа, потому что, насколько я знаю, такие же понятия применимы к любой программе для рисования, и существуют схожие операции для всего, что я упоминаю здесь в Gimp’е, и возможно в любой другой программе, используемой вами.
Некоторое из описанного также адресовано участникам соревнования LudumDare и участникам других подобных соревнований, где цель — создать игру «на лету» за 48 часов. Мои игры имеют склонность достигать хорошего результата в графической категории (увы, убийца геймплея продолжает ускользать от меня), учитывая даже то, что я не считаю себя особенно хорошим игровым художником. Множество этих примеров исходят из моих LD записей, а большая часть этого опыта — это вещи, которые я изучил, участвуя в этих соревнованиях и будучи вынужденным создавать арт в предельные сжатые сроки. Более того, они должны быть бесценны для любого, кто пытается создать качественную графику (или что-то приближенное к ней) при коротком расписании времени или ограниченном бюджете.
Наиболее частая ошибка, которую я вижу и которую легче всего избежать. Палитра, использующаяся по умолчанию для большинства программ компьютерного рисования, возвращает во времена DOS’а (можете ли вы обнаружить связь между цветами в этой палитре и четырехбайтовыми двоичными значениями от 00 до 15? Конечно — да. Если бы вы не смогли это увидеть, вы бы были настоящим художником.).
Я не подразумеваю под палитрой палитру из 16-ти или 256-ти цветов времен VGA. Просто имею в виду скоординированную систему для вашей игры. Если вы начнете с хорошо выбранной палитры, то ваши «каракули» будут казаться эстетически приятными и даже предварительно имеющими «графический дизайн».
Но где мне найти палитру? Я даже не могу подобрать цвета, когда одеваюсь утром!
Хорошо, немного теории цвета проходит длинным путем и если вы потратите пятнадцать минут, чтобы отыскать в интернете, что такое «теория цвета», то вы окажетесь перед определением, что такое игра. Но если у вас нет на это времени, вот несколько советов, которые работают удивительным образом:
Для большой игры вы можете использовать другую палитру на уровне или области игрового мира. В случае, если ваши элементы интерфейса и главный персонаж изображены нейтральными цветами, или если эти палитры имеют общий главный цвет, вы можете в равной степени применять их между уровнями или областями.
В этом примере используется «монохроматическая» палитра, где все цвета различного оттенка очень схожего тона, другие цветовые схемы более разнообразны, но важно то, что цвета смотрятся вместе хорошо.
Ресурсы:
- MultiColr от idee labs
Этот потрясающий сайт хорош тем, что благодаря ему можно сделать палитру и получить связку фотографий на ее основе, просто выбрав несколько желаемых цветов и изображение, из которого затем можно использовать цвета.
Я не умею рисовать!..
Возможно, Вы просто слишком крутой человек, чтобы уметь рисовать. Возможно это все преднамеренно. Так и есть. Вместо того, чтобы делать хороший арт, выберите тему, которая требует плохой арт. Это сработало для «SketchFighter» и «Crayon Physics» , нарисованных на бумаге.
Используйте то, что вам доступно. Получили какую-нибудь ерунду у себя на столе? Вы, возможно, сделали одну из самых популярных игр всех времен «Desktop Tower Defense» .
Люди начинают понимать смысл этого трюка, но у него есть немного лет для существования. Будьте криативными… возможно ваши персонажи — печенья, и вы буквально можете испечь их. Или какой-нибудь зомби-бекон атакует вашу кухню. Или даже волосатая грудь, которой нужно, чтобы ее побрили .
Подсказка Третья: простые формы и силуэты
Круг, Квадрат, Треугольник, Ромб, Трапеция, Параллелограм, и т.д. Вы знаете как точно высчитать их площадь, но вы знаете, что нарисовать их получается плохо? Сделайте наброски нескольких форм от руки, затем добавьте глаза (для персонажа) или колеса (для техники) или что-нибудь еще. Они, возможно, получатся смешными и нелепыми, и совсем неточные.
В зависимости от того, как много кофе вы уже выпили, они могут быть совершенно разной формы. Все в порядке! Это хорошо, фактически, поскольку изъяны и разнообразия создают «индивидуальность» и делают их живыми. Не используйте инструменты для создания форм в своей программе для рисования, это уничтожитель «спрайтовых душ». Делая их очертания отчётливыми, вы облегчаете игроку способность визуально различать их.
Одно замечание: не пытайтесь разбираться с этим во время соревнования по написанию игры. Протестируйте сначала все перед его проведением, чтобы точно знать как что делать. Вы потратите много времени, но во время соревнования это может занять всего 15-20 минут и будет иметь большое значение.
И еще, не спешите делать «запекание» пока не закончите с текстурами для моделей. Вы не сможете убрать «запекание» или сделать его дважды.
Подсказка одиннадцатая: приобретите планшет
Даже если у вас нет стремлений стать игровым художником, но если рисуете какой-нибудь арт на компьютере, то вам нужно приобрести планшет. Необязательно большой или дорогой, можно купить планшет фирмы Wacom. Потому что рисование мышью схоже с рисованием кирпичом на бумаге.
Многие люди, которых я знаю, впервые купившие планшет, не спешили его использовать. Вот некоторые советы, которые помогут максимально эффективно использовать планшет.
- В панели управления планшета увеличьте показатель чувствительности пера на более твёрдый. Это обеспечит наилучший контроль при рисовании.
- Рисование с использованием чистого листа бумаги полностью изменить ощущение. Различные типы бумаги: офисная, страницы журналов, плотная бумага и тд. — помогут полностью ощутить рисование на планшете. Попробуйте.
- Практикуйтесь. Знаю, что до этого я говорил, что ни один из моих советов не требует практики — я лгал. Попробуйте эти упражнения:
- Сделайте в фотошопе десять квадратов в ряд и заполните их черным цветом в радиусе прозрачности от нуля до ста. Под ними сделайте десять пустых квадратов. Попробуйте оттенить нижние квадраты, чтобы выровнять основные квадраты. Попробуйте с другими кистями и попрактикуйтесь с чувствительностью нажатия пера.
- Попробуйте написать что-нибудь, алфавит или просто текст. Начните с больших размеров букв, а потом продолжайте их уменьшать. Это позволит вашей руке привыкнуть к плашнету, также как и глазам к экрану во время рисования.
В сегодняшнее время интерфейсов на основе сенсорных дисплеев, иметь планшет становится выгодно, чтобы понять как работают игры, основанные на этой технологии. Хотя такой подход ничем не отличается в сравнении технологии использования мыши.
С развитием HTML5 и мобильных платформ 2D игры возвращаются в моду и привлекают внимание даже крупных издателей. Благодаря таким инструментам, как Unity, и онлайн-ресурсам с игровыми ассетами, разрабатывать эти игры стало намного легче. Ниже представлен список из 10 лучших сайтов с 2D ресурсами для игр – как платными, так и бесплатными.
*Сайты перечислены в случайном порядке*
1. Unity Asset Store (платный)
Крупнейший сайт с платными игровыми ассетами. Использовать движок Unity для работы необязательно – чтобы получить доступ к ресурсам на Asset Store, нужно лишь загрузить его бесплатную версию. Скачанные файлы будут сохранены в папку проекта Unity, откуда их можно импортировать в любой игровой 2D движок.
Стоит отметить, что Unity в руках умелого разработчика обладает огромным потенциалом, о чем свидетельствует большое количество успешных 2D игр (чего только стоит популярная Bad Piggies от Rovio). А Unity Asset Store предлагает широчайший выбор 2D ассетов.
2. GameDev Market (платный)
GameDev Market – относительно новый сайт, удобно организованный по категориям контента (как и Super Game Asset, о котором пойдет речь ниже). Здесь вы найдете как 2D, так и 3D ресурсы, включая UI, спрайты персонажей, иконки и окружения. Художники выставляют ассеты на продажу, и ассортимент растет с каждым днем.
Graphicriver – один из самых популярных ресурсов шаблонных изображений. В связи с развитием казуальных мобильных игр, там появилась отдельная категория с 2D ассетами. До размещения на сайте весь контент проходит внутреннюю проверку, а после публикации любой пользователь может оставить свою оценку и отзыв. Итого: это надежный, активно развивающийся сайт под пристальным модерированием Envato.
4. Scirra Store (платный)
Scirra – компания-разработчик Construct 2, популярного 2D редактора на HTML5, у которой недавно появился собственный магазин ассетов. Здесь можно найти аудио-, графические ресурсы и даже готовые игровые шаблоны для Construct 2. Впрочем, для работы можно использовать и любой другой 2D редактор.
5. Game Art Partners (платный)
На сайте Game Art Partners можно купить разнообразные мультяшные ассеты для 2D платформеров, включая анимированных персонажей, монстров, оружие, визуальные эффекты и наборы элементов интерфейса.
6. Super Game Asset (платный)
Если вы создаете RPG или игру с изометрической графикой – этот сайт для вас. Здесь вы найдете самые высококачественные ассеты: красочные иконки для RPG (пожалуй, лучшие из доступных онлайн), 2D спрайты, анимированные спрайты персонажей и огромные изометрические карты. Что немаловажно, большинство представленных ресурсов выполнены в одном стиле.
7. Open Game Art (бесплатный)
Исчерпывающий ресурс для разработчиков игр с открытым исходным кодом, Open Game Art можно назвать крупнейшим собранием игровых ассетов со свободной лицензией. Все материалы – от спрайтов до иконок – можно загрузить по лицензиям GNU или Creative Commons. Это отличный сайт для новичков, но многие ассеты отличаются по визуальному стилю, поэтому их придется тщательно отбирать.
8. Kenney Game Assets (бесплатный)
Еще один отличный сайт с более чем 20 тыс. ассетами, включая элементы UI и различные спрайты для 2D платформеров. Большинство ресурсов представлены в векторной графике и подойдут для любого устройства, независимо от разрешения экрана. Ассеты можно скачать по отдельности (бесплатно) или одним набором (за скромную плату в $9).
9. Game-Icons.net (бесплатный)
Game-icons.net – лучший сайт с бесплатными иконками, которых здесь ни много ни мало 2000. Несмотря на то что все иконки черно-белого цвета, они достаточно универсальные и могут быть использованы для обозначения действий, заклинаний, навыков, предметов и т. п. Приятный бонус – векторный формат.
10. Reiner’s Tilesets (бесплатный)
Лучший сайт c бесплатными тайлами. Здесь можно найти спрайты животных, растений, построек, оружия, визуальных эффектов и практически любых объектов для RPG с изометрической графикой. Стиль ассетов напоминает Diablo II. Это отличный ресурс для начинающих разработчиков, желающих протестировать игровой движок или приступить к созданию своей игры.
Изучите профессиональный графический дизайн 2D-игр в Photoshop
Этот курс последний раз обновлялся 19.10.16
Присоединяйтесь к более чем 10 500 учащимся и начните разрабатывать игровую графику уже сегодня!
Глядя на создание дополнительные деньги в качестве игрового графического дизайнера? Или, может быть, вы в поисках создавать графику для собственных игр? В любом случае вы пришли в в нужном месте.
2D-игра Курс создания фона покажет вам, как быстро создавать высокие качественные стилизованные фоны для игр и анимации, которые будут выглядеть как профессиональная работа.Техники преподаваемые в этом курсе, могут быть переведены на опору и характер творчество. Этот курс расширит или даст вам навыки в мире создание цифрового искусства — или ваши деньги вернутся!
Курс ваш следите за тем, чтобы создавать потрясающие привлекательные фоны и, в конечном итоге — зарабатывай деньги! Будь то для ваших собственных игр или для других людей проекты.
Этот курс будет перенесет вас от небольших знаний в Photoshop к созданию профессиональный опыт всего за 1 неделю.
Так что еще в это для вас?
Вы получите мгновенный доступ ко всем пяти разделам курса, включая бонус раздел, где я покажу вам, где и как найти работу, создавая цифровые художественная работа, которую можно делать из любой точки мира. Вы также будете получить доступ к 50 объектам, которые я создал для ваших личных и коммерческое использование. Эти активы можно использовать снова и снова в вашем собственные игры или могут быть использованы, чтобы помочь вам зарабатывать деньги с другими людьми игры!
Курс настроен чтобы быстро шаг за шагом пройти процесс создания цифровой фон в фотошопе.Это даст вам знания для создания потрясающих фонов для игр и анимации.
Не верите? Я предлагаю вам полную гарантию возврата денег в течение первых 30 дней после покупка курса.
Вот что ты получить с курсом:
Вы получите доступ к пяти разделам курса, которые покажут вам, как я создаю профессиональные цифровые фоны, а также научит вас, где можно найти клиентов. Курс поддерживается более 2.5 часов чистого довольна тем, что я провожу вас на каждом этапе пути.
Все в ваших руках чаевые мгновенно.
- Начало курса с основами. Для тех из вас, кто никогда не использовал Photoshop, я познакомит вас с основными инструментами, которые мы будем использовать.
- Дальше покажу вы, как я создаю свои эскизы и куда я иду за вдохновением.
- Как только вы выбранный эскиз, мы разработаем каждый отдельный аспект фон.
- После проектирования каждый кусок вашего фона я покажу вам, как их сшить вместе, чтобы завершить окончательный дизайн.
- Здесь вы будете готовы нырнуть и начать строить индивидуальный компоненты, которые составят ваш фон! Я пройду через каждый от создания облаков до архитектурных конструкции.
Более 5 глав вы узнаете:
- Как использовать 50 ресурсы, включенные в этот курс
- Основы Photoshop
- Процесс проектирования
- Создание вашего активы
- как найти работу создание цифровых изображений
Что еще ты будешь получать?
— Личный контакт со мной, репетитор курса
— Пожизненный доступ к материалы курса
— Понимание как проектируются, создаются и организуются профессиональные цифровые изображения слой за слоем
— 50 бесплатных активов для ваше использование
Это все подпадает под одна удобная простая в использовании платформа.Плюс вы получите быстро, дружелюбная и отзывчивая поддержка в формах Udemy и по электронной почте.
Я буду здесь для вы на каждом шагу!
Так что ты ожидать? Зарегистрируйтесь сейчас, чтобы получить 50 бесплатных активов и начать строим сегодня!
Как создавать фоны в стиле пиксель-арт с помощью Photoshop — GameDev Academy
Вы можете получить доступ к полному курсу здесь: Введение в пиксельное искусство в Photoshop
Pixel Art Фон
В этом уроке мы рассмотрим настройку фона для игры в стиле пиксельной графики.
Настройка фона
Давайте начнем с настройки фонового неба , заполнив слой по умолчанию синим цветом и переименовав его в «Небо».
Теперь мы хотим настроить наши службы поддержки. Давайте создадим новый слой, нажав Ctrl + Shift + N (или Cmd + Shift + N), и назовем его «Горы».
Сначала мы нарисуем горы с помощью инструмента Pencil на слое «Горы» и заполним его инструментом Paint Bucket .
Добавление деталей
Далее мы собираемся добавить светов и тени к горам. Но сначала давайте выберем горы с помощью инструмента Magic Wand , чтобы нарисовать внутри горы.
Всегда учитывайте направление солнечного света. Тени должны последовательно появляться на противоположной стороне бликов.
После того, как вы добавили блики и тени к горам, снимите выделение с горы, нажав Ctrl + D (или Cmd + D ), чтобы больше не было привязки к выбранной области.
Добавление цвета градиента
Небо теперь выглядит слишком мягким, поэтому мы хотим добавить к небу градиент . Градиент — это постепенное изменение цвета, оттенка или уровня яркости.
Для этого мы собираемся создать новый слой под названием «Sky Haze» и поместить его между слоями Mountains и Sky .
Чтобы добавить градиент к слою, зажмите левую кнопку мыши на инструменте Paint Bucket и выберите опцию Gradient Tool .
Вы можете изменить цвет градиента, нажав на Gradient Setting в верхнем углу экрана.
Откроется окно редактора Gradient Editor , где вы можете изменить градиент, дважды щелкнув на одной из цветовых точек.
Вы также можете установить непрозрачность , цветовых точек, чтобы она постепенно переходила в прозрачный цвет. Например, мы установим оба цвета на белый, начальную непрозрачность на 100%, и конечную непрозрачность на 0% .
Рядом с кнопкой цвета градиента мы можем установить форму градиента. Давайте изменим это на linear .
Теперь мы можем щелкнуть в нижней части экрана и перетащить его вверх , чтобы добавить градиент к небу.
Чтобы градиент выглядел более пиксельным, мы можем применить фильтр Mosaic , перейдя в Filter> Pixelate> Mosaic .
Наконец, мы хотим сделать небо более волнистым и естественным с помощью , деформируя слой.Нажмите Ctrl + T (или Cmd + T ), щелкните правой кнопкой мыши > выберите Warp .
Теперь мы можем изменить форму, перетаскивая контрольные точки.
Обратите внимание, что щелчок по точке привязки позволяет редактировать контрольные точки, окружающие эту точку привязки. Это похоже на изменение изогнутого сегмента векторной графики.
Выписка
С возвращением всем. В этом уроке мы рассмотрим настройку фона для игры, которую мы, возможно, захотим создать.Ладно, внизу будут горы, а в воздухе будет красивое небо.
Итак, давайте перейдем к файлу, новый, у него будет ширина 300 пикселей и высота 168, хорошо? Мы собираемся нажать на «Создать», и вот мы в нашем новом документе. Теперь, чтобы начать, давайте начнем с настройки фона неба, хорошо, поэтому я переименую этот слой в небо и выберу здесь голубоватый цвет, который мы будем использовать. Мы выберем инструмент «Ведро с краской» и просто щелкнем, чтобы раскрасить все.
Теперь мы хотим построить наши горы. Итак, я возьму контроль, сдвиг, N, назову это горами, и теперь мы на новом слое. Теперь для наших гор мы хотим выбрать зеленоватый цвет, что-то вроде этого, а внутри мы можем начать с рисования наших гор и того, как мы можем захотеть, чтобы они выглядели. Хорошо, для этого я просто начну их вот так рисовать. Ладно, что-то в этом роде.
Следующее, что мы хотим сделать, это заполнить его так, чтобы мы не видели здесь ни одного синего цвета.Итак, мы перейдем к инструменту «Ведро с краской», раскрасьте их вот так. Но проблема здесь в том, что горы выглядят довольно мягкими, ладно, они вообще не выглядят так хорошо. Так как же это исправить? Что ж, мы хотим добавить этим горам блики и тени.
Теперь, чтобы сделать это, нам нужно выяснить, хорошо, в каком направлении будет смотреть солнце? Допустим, солнце смотрит в правый верхний угол экрана вниз. Это означает, что эти стороны гор будут ярче, чем другие стороны гор, на которых будут тени.
Итак, что я собираюсь сделать, так это сделать так, чтобы мы могли рисовать только на этой горе, потому что прямо сейчас, если я выберу кисть и начну рисовать блики более светлым зеленым цветом, вы заметите, что я могу здесь с краю, чего мы не хотим, хорошо? Мы хотим рисовать только внутри этого горного хребта. Для этого я выберу палочку и щелкну по нашим горам.
Итак, теперь у нас выделены горы. Если я перейду к инструменту «Кисть» и начну рисовать, вы заметите, что я могу рисовать только на выделенных пикселях, и это здорово.Итак, давайте пройдемся по каждой из наших гор и начнем рисовать основные моменты. И вот так. Теперь нам нужно нарисовать тени. Итак, для теней я выберу здесь более темный зеленый цвет, войду и начну раскладывать и их.
Теперь я буду прослеживать топографию гор здесь, поэтому я выберу это и просто спущусь вот так, хорошо? Как видите, если я нажму клавишу H, чтобы избавиться от сетки и контура, это будет выглядеть именно так.Итак, я могу добавить сюда тень. И вот так. Примерно так, где у нас есть блики и тени горы. Вы, конечно, можете сделать это намного лучше, но это всего лишь грубая, быстрая версия, хорошо?
Итак, у нас есть небо, но оно не выглядит реалистичным. Итак, как нам сделать небо реалистичным? Что ж, если вы посмотрите на реальный мир, вы заметите, что на горизонте он намного ярче, чем чем выше вы поднимаетесь, хорошо? Когда вы смотрите вниз на горизонт, вы видите больше атмосферы, тогда как если вы смотрите вверх, вы видите в основном меньше атмосферы, хорошо, и вы видите больше в космос.
Итак, что нам нужно сделать, это создать здесь новый слой, и я назову его нашей небесной дымкой. Я собираюсь поместить это ниже гор, но выше неба, и для этого мы будем использовать градиент. Теперь градиент — это, по сути, вещь, которую мы можем нарисовать, которая в основном переходит от одного цвета к другому.
Итак, если мы перейдем к нашему инструменту «ведро с краской» и удержим левую кнопку мыши, вы увидите, что мы можем выбрать инструмент градиента, и прежде чем мы это сделаем, нам действительно нужно перейти к нашему инструменту перемещения, щелкнув правой кнопкой мыши по горам. , снимите выделение с них, чтобы мы больше не рисовали внутри гор, вернитесь к нашему инструменту градиента, щелкните и перетащите, и, как вы можете видеть, градиент теперь сформирован, хорошо?
Итак, в верхнем углу экрана здесь у нас есть все настройки градиента, мы можем выбрать в основном цвет градиента здесь, дважды щелкнув по нему, чтобы открыть редактор градиента.
Теперь мы собираемся перейти от белого к прозрачному, поэтому я дважды щелкну этот значок здесь, чтобы изменить первый цвет на белый, щелкните здесь конечный узел, чтобы изменить этот цвет на белый, как ну, и я собираюсь щелкнуть по этим черным квадратам, которые позволят нам изменить прозрачность. Он будет снижаться со 100% до 0%, хорошо? И, как вы можете видеть, он постепенно тускнеет. Нажмите хорошо, и теперь, если я нажму и перетащу, вы увидите, что это белое выцветание, вот так.
Мы собираемся изменить его с радиального на линейный, чтобы он был более прямым, вот так, и в нижней части экрана я собираюсь щелкнуть и перетащить вверх, вот так, и вот мы идем, это наш градиент в значительной степени готов, но вы можете заметить одну вещь: он не пиксельный, хорошо? Это плавный переход цвета от одного к другому, тогда как здесь у нас есть жесткие цвета.
Так как же преобразовать этот градиент в более пиксельное изображение? Что ж, способ сделать это — перейти к фильтру, затем перейти к пикселизации, а затем щелкнуть мозаику.
Мозаика, по сути, разбивает изображение на пиксели. Хорошо, он получает ваше изображение и в основном разбивает его на ячейки, и каждая ячейка может иметь только один цвет, и прямо сейчас каждая ячейка имеет размер в пять пикселей, и если мы увеличим это число, вы увидите, что ячейки становятся все больше и больше и если мы его обрушим, он станет все меньше и меньше.
Итак, давайте уменьшим количество ячеек до пяти, нажмите «ОК», и вы заметите, что теперь он выглядит намного более пиксельным. Но он выглядит слишком однообразным, и это небольшая проблема. Таким образом, мы можем сделать его немного более волнистым и естественным, нажав клавишу T, щелкнув правой кнопкой мыши и щелкнув деформацию, и то, что позволяет нам сделать деформация, — это щелкнуть и перетащить, чтобы перемещать это изображение различными способами, хорошо?
Итак, мы можем просто деформировать это изображение, чтобы оно выглядело немного по-другому, вот так, хорошо? Затем мы можем нажать Enter, и мы идем, это наша атмосфера, и на самом деле мы могли бы захотеть, чтобы эта деформация действительно немного изгибалась здесь по краям.Нажмите «ОК», и мы идем.
Итак, вот наш пиксельный горизонт выглядит красиво. Вы можете, конечно, пойти дальше, вы можете изменить цвет неба, вы можете изменить цвет дымки. Это полностью зависит от вас, но это всего лишь наш горный хребет, настроенный и готовый к добавлению в игру.
Хотите продолжить? Ознакомьтесь с нашим планом полного доступа, который включает 250+ курсов, учебные программы с инструкциями, новые курсы ежемесячно, доступ к опытным наставникам курсов и многое другое!
Научитесь создавать игровой макет в Photoshop
Что мы будем создавать
ресурсов, используемых в этом руководстве
Начиная с фона
Создайте новый документ (Ctrl + N) размером 1200 x 1340 пикселей с черным цветом фона # 000000.Скачайте и скопируйте обои от «Taenaron» на свой холст.
Расположите обои так, чтобы солнечные блики находились примерно в верхнем правом углу полотна. Как только вы будете довольны положением, добавьте маску слоя к слою обоев, затем перетащите линейный градиент по левому и нижнему краям, чтобы обои красиво сливались с фоном.
Связанные : 10 лучших игровых маршрутизаторов для PS4, Xbox one, Xbox 360 и Call of Duty
Создание заголовка
Выберите инструмент «Прямоугольник со скругленными углами» (U) с радиусом 10 пикселей (по умолчанию должно быть 10 пикселей), затем растяните белый прямоугольник #ffffff в верхнем левом углу холста.
Теперь добавьте к прямоугольнику следующие стили слоя.
У вас должно получиться что-то вроде этого.
Внутри прямоугольника добавьте название веб-сайта и слоган с помощью инструмента «Текст» (T).
Теперь добавьте следующие стили слоя к первому слову «Gaming» в заголовке.
Теперь добавьте следующие стили слоя ко второму слову «Портал» в заголовке.
Теперь у вас должно получиться что-то вроде этого.
Создание навигации
Выберите инструмент «Прямоугольник со скругленными углами» (U), затем растяните прямоугольник под полем заголовка и заголовком.
После создания прямоугольника добавьте следующие стили слоя.
У вас должно получиться что-то вроде этого.
Теперь нам нужно создать собственный узор диагональных линий.Создайте новый документ (Ctrl + N) 9 × 9 пикселей, выберите «Инструмент масштабирования» (Z) и увеличьте масштаб холста настолько, насколько сможете. После увеличения выберите «Pencil Tool» (B) и скопируйте изображение ниже.
После репликации перейдите в «Правка> Определить узор», сохраните узор и вернитесь к своему макету. Выберите слой с прямоугольником навигации, затем загрузите выделение вокруг него.
Быстрый совет:
Чтобы загрузить выделение, щелкните маленькую миниатюру в окне слоев на нужном слое, удерживая нажатой клавишу CTRL на клавиатуре.
Теперь выберите инструмент «Заливка» (G), затем выберите диагональный узор из списка узоров.
На новом слое над слоем навигации залейте выделение узором, затем установите непрозрачность около 7%.
Выберите «Инструмент ввода» (T), затем просто введите желаемую навигацию.
На слое под текстовой навигацией создайте оранжевый прямоугольник со скругленными углами # d88503, используя инструмент «Прямоугольник со скругленными углами» (U).
Теперь выберите «Elliptical Marquee Tool» (M) и создайте небольшой эллипс в правой части навигации. Залейте эллипс (G) белым цветом #ffffff, затем добавьте размытие по гуасу к эллипсу «Фильтр> Размытие> Размытие по Гуасу», размыте эллипс примерно на 5 пикселей.
Добавьте «Внешнее свечение» к слою эллипса, используя настройки ниже.
Теперь у вас должно получиться что-то вроде этого.
Создание полей содержимого
Выберите инструмент «Прямоугольник со скругленными углами» (U), затем создайте 3 прямоугольника друг над другом.
В каждое поле добавьте следующие стили слоя.
У вас должно получиться что-то вроде этого.
Теперь выберите слой светящегося эллипса и продублируйте его, щелкнув слой правой кнопкой мыши и выбрав «Дублировать слой» в меню. После копирования перетащите дублированный светящийся эллипс в верхнюю правую часть первого поля.
Рекомендуемая коробка
На представленной коробке собирались создать макет слайдера jquery.Начните с большого изображения в левой части коробки.
После большого изображения справа создайте 3 маленьких изображения. Первое изображение должно быть уменьшенной версией большего изображения.
Теперь на правой стороне трех изображений меньшего размера создайте белый полужирный заголовок #ffffff с фиктивным текстом. Повторите это для всех трех изображений, затем разделите каждый слайд разделителем, используя «Дефисы» (––).
Связанные : Лучшие игровые маршрутизаторы до 200 долларов
На большом изображении теперь собирались добавить простую рамку с подписью.Выберите инструмент «Прямоугольная область» (M), затем растяните прямоугольник над большим изображением. После того, как вы создали прямоугольник, залейте его черным цветом # 000000 и установите непрозрачность на 75%.
Просто добавьте в поле заголовка пример заголовка.
в смеси
Внутри второго прямоугольника содержимого я решил добавить, как слайдер случайного содержимого, это поле содержимого состоит из 3 больших изображений.
Вверху поля добавьте заголовок «В миксе», затем в правом верхнем углу добавьте параметр для просмотра следующих 3 слайдов.
Наконец, под каждым изображением добавьте название игры и платформу.
Контент-бокс 3
Внутри блока содержимого 3 на этот раз я решил смешать содержимое с парой списков и комбинацией избранной области. Результат выглядит так.
Выберите инструмент «Прямоугольник со скругленными углами» (U), затем вытяните прямоугольник такого же размера, как и прямоугольник навигации.
Теперь добавьте следующие стили слоя к прямоугольнику навигации.
Внутри прямоугольника нижнего колонтитула добавьте информацию об авторских правах и некоторые значки социальных сетей из «Icon Shock Icon Pack».
- Социальные иконки от Iconshock
Наконец, закончите нижний колонтитул, продублировав слой обоев и перевернув его по вертикали. Перетащите дублированный слой в нижнюю часть холста.
Заключение
Спасибо за участие в этом уроке. Если вам удалось пройти его, я хотел бы увидеть некоторые из ваших результатов.Не стесняйтесь размещать их на нашей фан-странице в Facebook.
Автор: Том Клейтон Том любит писать о технологиях, электронной коммерции и интернет-маркетинге. Том уже два десятилетия работает интернет-маркетологом на полную ставку, зарабатывая миллионы долларов, живя на своих условиях. Попутно он также научил к успеху тысячи других людей.Изучите профессиональный графический дизайн 2D-игр в Photoshop, видео-лекции онлайн-курса
Описание курса
Последнее обновление курса: 19.10.16.
Присоединяйтесь к более чем 10 500 учащимся и начните разрабатывать игровую графику уже сегодня!
Глядя на создание дополнительные деньги в качестве игрового графического дизайнера? Или, может быть, вы в поисках создавать графику для собственных игр? В любом случае вы пришли в в нужном месте.
2D-игра Курс создания фона покажет вам, как быстро создавать высокие качественные стилизованные фоны для игр и анимации, которые будут выглядеть как профессиональная работа. Техники преподаваемые в этом курсе, могут быть переведены на опору и характер творчество. Этот курс расширит или даст вам навыки в мире создание цифрового искусства — или ваши деньги вернутся!
Курс ваш следите за тем, чтобы создавать потрясающие привлекательные фоны и, в конечном итоге — зарабатывай деньги! Будь то для ваших собственных игр или для других людей проекты.
Этот курс будет перенесет вас от небольших знаний в Photoshop к созданию профессиональный опыт всего за 1 неделю.
Так что еще в это для вас?
Вы получите мгновенный доступ ко всем пяти разделам курса, включая бонус раздел, где я покажу вам, где и как найти работу, создавая цифровые художественная работа, которую можно делать из любой точки мира. Вы также будете получить доступ к 50 объектам, которые я создал для ваших личных и коммерческое использование. Эти активы можно использовать снова и снова в вашем собственные игры или могут быть использованы, чтобы помочь вам зарабатывать деньги с другими людьми игры!
Курс настроен чтобы быстро шаг за шагом пройти процесс создания цифровой фон в фотошопе.Это даст вам знания для создания потрясающих фонов для игр и анимации.
Не верите? Я предлагаю вам полную гарантию возврата денег в течение первых 30 дней после покупка курса.
Вот что ты получить с курсом:
Вы получите доступ к пяти разделам курса, которые покажут вам, как я создаю профессиональные цифровые фоны, а также научит вас, где можно найти клиентов. Курс поддерживается более 2.5 часов чистого довольна тем, что я провожу вас на каждом этапе пути.
Все в ваших руках чаевые мгновенно.
- Начало курса с основами. Для тех из вас, кто никогда не использовал Photoshop, я познакомит вас с основными инструментами, которые мы будем использовать.
- Дальше покажу вы, как я создаю свои эскизы и куда я иду за вдохновением.
- Как только вы выбранный эскиз, мы разработаем каждый отдельный аспект фон.
- После проектирования каждый кусок вашего фона я покажу вам, как их сшить вместе, чтобы завершить окончательный дизайн.
- Здесь вы будете готовы нырнуть и начать строить индивидуальный компоненты, которые составят ваш фон! Я пройду через каждый от создания облаков до архитектурных конструкции.
Более 5 глав вы узнаете:
- Как использовать 50 ресурсы, включенные в этот курс
- Основы Photoshop
- Процесс проектирования
- Создание вашего активы
- как найти работу создание цифровых изображений
Что еще ты будешь получать?
— Личный контакт со мной, репетитор курса
— Пожизненный доступ к материалы курса
— Понимание как проектируются, создаются и организуются профессиональные цифровые изображения слой за слоем
— 50 бесплатных активов для ваше использование
Это все подпадает под одна удобная простая в использовании платформа.Плюс вы получите быстро, дружелюбная и отзывчивая поддержка в формах Udemy и по электронной почте.
Я буду здесь для вы на каждом шагу!
Так что ты ожидать? Зарегистрируйтесь сейчас, чтобы получить 50 бесплатных активов и начать строим сегодня!
моддеров используют искусственный интеллект для масштабирования предварительно обработанных фонов PS1 с феноменальными результатами
Final Fantasy 9 с расширенным AI фон и легкой модификацией Reshade, через kennybones на форумах Qhimm.моддеров ПК имеют историю исправлений и улучшений портированных японских игр, и последний случай является одним из самых крутых и захватывающих применений технологий в старых играх, которые я когда-либо видел.Недавно мы писали о том, как некоторые люди используют нейронные сети для повышения качества фона Final Fantasy 7 , и всего за несколько недель эти проекты добились огромного улучшения качества и сложности, причем не только для Final Fantasy 7. Любой может используйте эти инструменты, и в результате мы находимся на пороге возрождения 2D-графики эпохи PlayStation.
Немного предыстории. Когда 3D только зарождалось, разработчики игр для PlayStation компенсировали недостатки оборудования, сочетая 3D-модели персонажей с предварительно отрендеренными 2D-фоном.Многие из них, из таких серий, как Final Fantasy, до сих пор поражают воображение: подробные, стилизованные, прекрасные произведения искусства, через которые вы можете пройти, отправляясь в приключение. Но художественные файлы на этих дисках были естественно низкого разрешения, а небрежное архивирование означало, что, когда Square Enix, наконец, портировала игры, такие как Final Fantasy 8 и 9, на ПК в формате «HD», у них не было оригинальных художественных файлов, которые можно было бы использовать в современных условиях. дисплеи с высоким разрешением. Square просто увеличила масштаб файлов с низким разрешением из оригинальных игр до 1080p и покончила с этим.
Результаты были не очень хорошими. Фон может быть размытым или чрезмерно резким — как если бы вы открыли jpeg-файл в Photoshop и попытались увеличить его до четырехкратного увеличения исходного размера. Но что, если ~ магия AI ~ может анализировать изображение и более разумно изменять его размер? Вот что такое ESRGAN, или улучшенные состязательные сети со сверхвысоким разрешением. Хорошо, это имя звучит нелепо, и я не собираюсь делать вид, что полностью понимаю, как оно работает. Но есть целая область исследований вокруг концепции перцептивного суперразрешения и конкурирующих реализаций ИИ для повышения качества изображений с наилучшими результатами.ESRGAN — один из самых успешных.
Сравнение анимированных gif от обычного апскейла до ESRGAN. Через Kingdomakrillic.tumblr.com.Поклонники игр ухватились за эту технологию и ищут способы наилучшего использования ее для фоновых изображений с низким разрешением. Вот блог , в котором рассказывается, как установить ESRGAN в Windows, и демонстрируются некоторые результаты. В этой ветке форума собрано еще больше примеров применения ИИ к различным игровым фонам и текстурам.
На данный момент для меня самым захватывающим проектом является Final Fantasy 9, одна из моих любимых игр с феноменальной графикой, которая не выглядит слишком горячей в масштабировании до 1080p. Моддер Ze PilOt использует эту технику для апскейлинга фонов FF9 и других текстур, что намного сложнее, чем апскейлинг jpeg:
Итак, этот симпатичный маленький инструмент позволяет извлекать фон из файлов ресурсов Unity и повторно вводить их. . https://t.co/uBeBQry8Fg. Внутри движка фон выглядит так.pic.twitter.com/5KQLnKt8pJДекабрь 30, 2018
Подробнее
Как он написал в Твиттере в декабре, «каждый кадр анимации находится на другом слое. Освещение смешано с фоном. Мне нужно все это разделить. кадры в отдельные изображения «.
Но он уже добился огромного прогресса и быстро перерабатывает мод, реализующий эти новые фоны и вносящий другие штрихи, например, добавление старого шрифта PS1 для замены мягкого нового шрифта версии для ПК. Вы можете скачать версию 4 мода, Moguri Memoria , здесь, и следить за его развитием в этой ветке форума .
Вот отличный пример оригинальной текстуры рядом с масштабированной AI:
А теперь игровые ресурсы и поля битвы … pic.twitter.com/yL3kQQxXiF25 января 2019 г.
Подробнее
Эти апскейлы, конечно, никогда не будут так хороши, как оригинальные художественные активы в высоком разрешении. В одних местах они будут более размытыми, а в других будут потеряны детали. Пуристы могут утверждать, что они искажают первоначальный художественный замысел, и плохая реализация определенно может.Но из того, что я видел, эти апскейлы, основанные на искусственном интеллекте, намного лучше, чем пиксельные версии, которые мы видели в некоторых официальных выпусках, и могут быть лучшим способом модернизировать игры с предварительно обработанным фоном для современных дисплеев.
На данный момент простейшими целями для этого апскейлинга будут ПК-порты старых игр, но ожидайте, что фанаты также увеличат масштаб фонов, которые затем можно будет внедрить в игры с помощью эмуляторов, таких как Dolphin для GameCube / Wii и PCSX2 для PS2. В течение долгого времени эмуляторы могли значительно улучшать 3D-графику, но отображать их в более высоком разрешении — мы только начинаем видеть, как технологии могут помочь нам сделать то же самое с 2D-графикой, не нарушая стиля оригинального изображения.
Как задать размер Game Art
Этот пост впервые появился на сайте www.vickiwenderlich.com
Недавно у меня был разговор с разработчиком, который впервые создавал арты для игры. Раньше он работал с дизайнером, который дал ему искусство, но теперь ему нужно было создать свою собственную графику.
Он сразу же столкнулся с проблемой: он не знал, с чего начать.
Ваш кот знает ответы, но не поделится ими.У него были следующие вопросы:
- Вы сначала создаете искусство Retina или искусство Unretina?
- Как искусство на iPad соотносится с изображением на iPhone по размеру или пропорциям?
- Насколько велико ваше искусство? Например, насколько большими должны быть элементы игры, например, ракетка или мяч?
Эта статья является результатом нашего обсуждения, поскольку мы чувствовали, что эти примечания могут помочь другим разработчикам в том же положении.
Если у вас есть те же вопросы о создании игрового арта, читайте ответы!
Давайте рассмотрим эти вопросы по очереди:
Вы сначала создаете искусство Retina или искусство Unretina?
Сетчатка арт. Вы можете уменьшить масштаб изображения для версии Unretina легче, чем масштабировать, особенно если графика не является полностью векторной (например, если вам нужны текстуры). Некоторые люди работают наоборот, и это тоже нормально, но сначала сделать изображение Retina и уменьшить масштаб определенно проще для новичков.
Однако, если вы создаете универсальную игру, процесс немного изменен (по крайней мере, для меня. Другие художники могут работать иначе). Это связано с тем, как соотносятся художественные размеры iPhone и iPad, о чем будет рассказано далее.
Как искусство на iPad соотносится с изображением на iPhone по размеру или пропорциям?
, если вы создаете универсальное приложение, вам потребуются версии каждого изображения Retina и Unretina как для iPad, так и для iPhone. То есть четыре разных изображения:
Для каждого произведения искусства вы создаете четыре спрайта.- iPhone Unretina: image.png
- iPhone Retina: [email protected]
- iPad Unretina: image-iPad.png
- iPad Retina: [email protected]
За исключением фона, мы делаем обложки для iPhone Retina того же размера, что и для iPad Unretina.
Это означает, что [email protected] — это то же самое произведение искусства, что и image-iPad.png. Затем мы уменьшаем масштаб изображения (масштабирование рисунка в векторной программе, но не масштабирование PNG) до 50% для iPhone Unretina и масштабируем до 200% для iPad Retina.
Что касается фонов, фон iPad Unretina по-прежнему основан на фоне сетчатки iPhone — просто вы можете видеть больше из-за большего экрана. Затем фоновый рисунок iPad Retina увеличивается в масштабе, а иногда добавляется больше деталей.
Фон iPad Unretina — это лишь слегка расширенная версия сцены iPhone Retina.Насколько велико ваше искусство? Например, насколько большими должны быть элементы игры, например, ракетка или мяч?
Хорошая новость в том, что нет стандартных размеров.Сделайте картинку любого размера, которая хорошо смотрится на экране. Если вы создаете своего персонажа, и он хорошо выглядит при разрешении 200 × 200 пикселей, сделайте его такого же размера.
Плохая новость в том, что нет стандартных размеров. Нет никаких полезных указаний, которые рассказывали бы вам, сколько пикселей должен быть в высоту ваш главный пират, или сколько пикселей в диаметре должно быть пушечное ядро.
Естественно, возникает другой вопрос:
Как определить, какой размер хорошо выглядит?
Насколько большим должен быть ваш персонаж? Вы еще не знаете!Если вы впервые открываете документ, чтобы создать своего персонажа, и не знаете, какого размера сделать документ, это потому, что вы пропустили шаг.Для начала вам понадобится макет вашей игры!
Вот как создать искусство для вашей игры:
- Создайте документ размером с экран вашего устройства Retina. Если вы разрабатываете игру с альбомной ориентацией для iPhone, это означает документ с шириной 960 пикселей и высотой 640 пикселей.
- В этом документе создайте свой фон. Даже если вы еще не знаете, как будет выглядеть фон, просто сделайте черновик с цветами, близкими к тем, что вы задумали.Когда закончите, сгруппируйте фоновые компоненты (в Illustrator поместите их все в один и тот же слой и создайте новый слой) и заблокируйте их.
- Затем сделайте все ваши игровые элементы в этом документе . Таким образом, вы можете изменять размеры своих объектов — будь то злобные птицы, весла, мячи, шахматные фигуры, золотые звезды или итальянские сантехники — относительно экрана.
- Обратите внимание: поскольку вы создаете изображение Retina, вам придется уменьшить масштаб до 50%, чтобы увидеть его в том размере, в котором он будет отображаться на устройстве (если, конечно, у вас нет нового MacBook Pro с экраном Retina).
- Увеличьте масштаб, чтобы проработать детали; уменьшите масштаб до 50%, чтобы почувствовать относительные размеры при одновременном просмотре всего экрана. Совершенно нормально сделать объект шириной 300 пикселей, решить, что он слишком большой, и уменьшить его до 200 пикселей. Нет никаких правил для размеров игровых фигур. Сделайте их любого размера, который будет хорошо смотреться. Сгруппируйте части элемента (как вы это делали для фона), прежде чем переходить к следующему элементу. Это тоже нормально — вернуться и внести изменения.
- Обратите внимание, что для элементов пользовательского интерфейса, таких как панели инструментов, панели вкладок, текстовые поля и т. Д., Apple имеет определенные рекомендации.Проверьте HIG или, для простых вещей, эту статью, чтобы узнать точные размеры в пикселях. Но для самой игры размер зависит от вас.
- Последнее (но важное) примечание: Apple рекомендует, чтобы все, к чему можно было прикоснуться, должно быть не менее 88 пикселей в ширину и в высоту на экранах Retina (то есть 44 пикселей в ширину для Unretina). Если игроку нужно иметь возможность перемещать или касаться элемента в игре, он должен иметь возможность касаться. Если элемент меньше, вы можете создать невидимую область (либо в спрайте, либо в коде) вокруг элемента, чтобы сделать его достаточно большим для касания.
- После того, как вы закончите макет, со всеми вашими игровыми элементами, размер которых вам нравится, сохраните различные элементы.
- В Illustrator это просто: просто перетащите каждый элемент за задний план и назначьте ему отдельную монтажную область, а затем сохраните эту монтажную область.
- В Photoshop вам нужно скопировать элемент в новый документ (продублировать слой или группу слоев в новый документ), а затем обрезать лишнее пространство (Изображение> Обрезать) перед сохранением.
- Сохранить все как PNG.
- Это дает вам искусство Retina. Теперь уменьшите масштаб, чтобы получить искусство Unretina. Чтобы получить версии Unretina, у вас есть два варианта: использовать приложение для изменения размера изображения, созданное другими разработчиками именно для этой цели, или уменьшить масштаб и повторно сохранить документы Photoshop или Illustrator. В Illustrator вы можете уменьшить масштаб изображения в диалоговом окне «Сохранить для Интернета и устройств» (на вкладке «Размер изображения»). В Photoshop выберите «Изображение»> «Размер изображения» и уменьшите масштаб на 50%.Не забудьте установить флажок «Масштабировать стили». Затем сохраните как обычно.
Последние мысли
Если вы впервые создаете игровой арт (или подражаете художнику), я надеюсь, что эти рекомендации помогут вам начать свои проекты!
Помните, что со временем я понял это. Как я узнал, я допустил все ошибки в книге, и, возможно, еще есть более эффективные способы создания игрового арта для iPhone и iPad. Было бы полезно, если бы другие художники поддержали вас в комментариях.Чем ваш процесс похож или отличается от шагов, описанных выше? Есть ли у вас какие-либо другие важные моменты для новичков, создающих свой первый набор игровых артов?
Мгновенный пиксельный фон с использованием метода Дэна Фесслера — 2D никогда не умрет . Художник по играм Дэн Фесслер недавно опубликовал метод размытия и уменьшения цвета на обычных изображениях, что значительно упрощает ситуацию.Серьезно, если у вас есть Photoshop, вы должны попробовать это. Прочтите эту статью, и я расскажу, как я собираюсь ее использовать.
Photoshop становится лучшей доступной программой для пиксельной графики
Короче говоря, все, что вам нужно, это четыре определенных слоя, которые будут поверх вашего рисунка, и вы можете превратить рисунки Photoshop в довольно убедительный игровой фон. Но есть одна загвоздка, но я до нее доберусь. Во-первых, давайте посмотрим, как я мог бы сделать свой исходный фон с помощью этого метода.
Вот самый сложный элемент, пиксель и дизеринг которого вручную потребовалось бы целую вечность.Это должно стать хорошей демонстрацией. Я уменьшу его, чтобы он поместился внутри хорошего холста Capcom 384 x 224. Так что это мой слой «художественных работ», где все начинается.
Редукция цвета
Чтобы получить красивую пиксельную графику из полной графики, вам нужно 1) уменьшить количество цветов, чтобы не было градаций, и, при желании, 2) вы можете добавить дизеринг для имитации градации, которую вы удаляете. Следующая часть уменьшает цвета: добавьте корректирующий слой «Постеризация» поверх художественного слоя.Снизьте его уровни до 6 или 7. Теперь вы сократили цвета до чего-то более подходящего для пиксельной графики.
Но ничего себе, цвета, выбранные Photoshop, довольно дурацкие. Было бы лучше, если бы мы могли сами выбирать цвета. Давайте скажем Photoshop: «Знаете что, не беспокойтесь о выборе цветов для меня, просто сделайте эти постеризованные цвета оттенками серого», добавив корректирующий слой «Черно-белый» под слоем постеризации.
А, вот и все — это уже почти пиксельная графика, только без цвета и сглаживания.Но обратите внимание на кое-что еще: у слоя Black And White есть ползунки для управления тем, в каком цветовом диапазоне будет больше черного или больше белого. Регулируя эти ползунки, вы можете изменить способ преобразования ваших иллюстраций, не меняя фактический художественный слой. Преобразование рисунка в пиксель становится динамичным.
Регулируя ползунки, вы можете изменять оттенки и перераспределять цвета, не нарушая фактическое искусство.
Теперь добавим немного цвета. Конечно, я мог бы просто добавить цвета сам, установив для Paint Bucket значение non-contiguous, но метод Дэна позволяет вам пофантазировать: поверх других слоев добавьте корректирующий слой Gradient Map.Да, я тоже никогда об этом не слышал, но это легко понять. Вы получаете градиент, на который вы можете нажать, чтобы настроить, и оттуда вы добавляете цвета, которые хотите использовать. У меня было шесть металлических цветов, которые переходили от темного к светлому, поэтому я добавил шесть ступеней градиента и ввел шестнадцатеричный код для каждого из них. И с этим мгновенное назначение цвета — темные цвета отображаются на темные области, а светлые — на светлые.
Но знаете что, эти ползунки тоже динамические. Если у вас есть цвета, которые не совсем правильно отображаются, вы можете просто пойти и отрегулировать остановки до тех пор, пока цвета не будут соответствовать светлому и темному диапазонам так, как вы хотите.
Легкое сглаживание
Хорошо, мы выполнили первую часть преобразования, уменьшив цвета и расположив их там, где мы хотим. Но эта полоса определенно уродлива. Было бы неплохо, если бы Photoshop мог автоматически сглаживать градацию для меня с приятным сглаживанием на 50% в шахматном порядке (в отличие от тех уродливых шумовых дизерингов, которые обычно дает вам рисование с помощью индекса) без необходимости преобразования в режим индекса. Ну угадайте, что. Благодаря слою «Постеризация» теперь это можно сделать.
Хитрость в том, что вам нужно заполнить весь слой шаблоном дизеринга. Это несложно сделать с режимом «Узор» в ведре с краской: выберите «ведро с краской» и там, где вы увидите раскрывающийся список для переднего плана или узора, выберите «Узор». Затем нажмите на раскрывающийся список Pattern и выберите узор плитки, который дает вам 50% дизеринг.
В вашем списке нет шаблона дизеринга? Создайте новый документ размером 2 на 2 пикселя, прозрачный фон. Поместите черный пиксель вверху слева и один внизу справа.Выберите «Все» и перейдите в «Правка»> «Определить узор» и дайте ему имя. Теперь он в вашем списке для использования в будущем.
Теперь добавьте новый слой прямо над вашим художественным слоем и ниже других корректирующих слоев и залейте его шаблоном дизеринга. Установите стиль слоя на Overlay или Soft Light и на данный момент установите Opacity примерно 50%. Вы также можете сделать это обтравочной маской, чтобы дизеринг не отображался на фоне
Обратите внимание, что я установил для этого слоя обтравочную маску, чтобы он не размывал прозрачный фон.
А теперь посмотрите на это. Автоматическое красивое дизеринг без переключения в индексный режим. Мальчик, а это даже не мой день рождения. Да, и если вы еще не потеряли сознание от волнения, я должен также добавить, что уровень непрозрачности делает дизеринг динамичным. Вы можете настроить его на лету. Достаточно сказать, что это моя любимая часть всего метода.
С другой стороны, ваша любимая часть всего этого метода, скорее всего, будет тем, что вы сможете сделать позже. Смотрите, как я размазываю эту картинку по художественному слою:
Эти цвета и дизеринг просто переместились? Да, они сделали.На самом деле я могу продолжить рисовать на своем художественном слое, и размытие и цвета будут обновляться вместе со мной. Мне не нужно повторять ни один из этих шагов. Я могу разместить что угодно на этом художественном слое, и эти четыре простых слоя над ним будут компенсировать, чтобы соответствовать и сохранить его так же красиво и пиксельно-арт. А с динамическими элементами Black And White, Gradient Map и Dithering opacity, я могу часами доводить результаты до совершенства, не внося случайных изменений в искусство. Серьезно, Дэн, эта техника [стоила] денег.
Предупреждения
Но теперь, когда я вас всех взволновал, настал день, когда машины, наконец, могут создавать для нас наше искусство, мы подошли к улову. На самом деле их два. Во-первых, слой «Постеризация» не может быть прозрачным. Если вы размазываете искусство в прозрачной области, этот частично прозрачный мазок не уменьшится в цвете. Чтобы исправить это, просто поработайте на однотонном фоне или убедитесь, что у вашего рисунка 100% четкие непрозрачные края.
Но вторая проблема заключается в том, что слой Gradient Map позволяет создавать только один набор цветов за раз.Это означает, что если бы я хотел сделать весь свой фон, мне понадобились бы эти четыре слоя для металлического синего, еще четыре для белого камня, еще четыре для коричневых камней и т. Д. Вы можете себе представить, что это довольно большой улов для организации слоев. и рабочий процесс.
Внезапно я могу придумать несколько альтернатив:
1) Вы можете просто полностью исключить карту градиента и работать с оттенками серого, оставив окраску на потом. Это отличный способ настроить контраст, и вы можете просто Pencil Tool несколько базовых цветов на верхнем слое, установленном на Multiply, когда вы закончите (исправляя свою палитру позже).
2) Как и выше, оставьте Градиентную карту, когда вы закончите рисовать / раскрашивать, скопируйте художественный слой и поместите дубликат поверх слоев и установите его стиль слоя на цвет. Сохраните или сделайте резервную копию рисунка, затем преобразуйте его в индексный режим с соответствующим количеством цветов. При необходимости исправьте цвета. (Я бы, наверное, порекомендовал этот метод)
3) Посмотрим правде в глаза, это самый простой способ создать экран для Gameboy.
Как всегда, много экспериментирую.Некоторые заключительные примечания:
1) Приятно то, что вы можете настроить эти слои один раз, сохранить их в шаблоне Photoshop, а затем использовать снова и снова, не переделывая их. Просто добавь новое искусство.
2) Я замечаю, что Posterize плохо справляется с фотографиями. Я только что пытался сделать сцену Зала Справедливости из некоторых телевизионных снимков экрана, но вы можете сказать, что что-то «не так», когда получаются размытые скриншоты или слишком подробные фотографии.