Эту статью я решил написать для проекта "", хотя она может оказаться полезной любому, у которого встала проблема оформления чего-то там, а опыта не хватает :)
Тут приведены несколько полезных сайтов, некоторые мысли из общего дизайнерского опыта, а так же конкретные примеры оформления игр на "".
В помощь начинающему игроделуНаблюдая за проектом, я понял, что у людей часто возникают проблемы с тем, как сделать игры не просто интересными, а еще и красивыми :) После же "Обновления-раскраски", у нас пошли, как говорится, "желтые буквы на желтом фоне".
Одним словом предлагаю чуть-чуть разобраться с цветами, иллюстрациями и прочими хитростями оформительской деятельности :)
Итак. У нас есть игра, например, про море. Мы хотим показать ее всему свету. Что делать?
Несколько общих правил
1. Если вы считаете, что хорошей истории не требуется оформление - вы ошибаетесь. Каждый, кто учился дизайну, знает, что "Подача работы - 50% успеха." Отказываясь от продуманного оформления вы уменьшаете свой шанс на успех как минимум в два раза. Поэтому, подходить к этому делу надо с чувством, толком, и, как водится, расстановкой.
2. Подбирая цвета помните главное. Основа текстовой игры - это текст (удивительно, правда?). Поэтому, что бы вы не задумали, цвет шрифта должен быть контрастным цвету фона, он должен читаться без напряжения. Вы же хотите вызвать у игроков восхищение, а не резь в глазах :)
3. Достаточно очевидная вещь, но некоторые работы убедили меня в том, что она не всем очевидна :) Оформление игры должно соответствовать ее теме. Создавая историю, события которой развиваются в подвале, не нужно оформлять ее в зелено-оранжевых тонах, словно вы прогуливаетесь по полю одуванчиков.
Выбираем цвета
В помощь начинающему игроделуЦвет сам по себе - штука весьма субъективная. У одних красный ассоциируется с кровью, у других - с помидорами :) Но все очень сильно зависит от контекста. Создавая историю про вампиров и оформляя ее в красных цветах, о помидорах не вспомнит даже самый ярый их любитель :)
Одним словом тут все на ваше усмотрение, главное помнить те правила, что я озвучил чуть выше.
В помощь начинающему игроделуМорским настроением тут даже не пахнет :) Что делать?
Понятно, что цвета должны быть "морские", но какие конкретно взять? В подборе цветовой гаммы вам поможет замечательный ресурс под названием .
Для полноценного его использования (а так же других ресурсов, приведенных в этой статье) вам понадобятся некоторые знания английского языка. Если их нет - не беда. вам в помощь :)
Итак. Заходим на , выбираем в главном меню "Search" > "Palettes" и видим формочку подбора палитры. Можно с ней повозиться, там существует несколько типов поиска. Однако я использовал самый простой :)
В помощь начинающему игроделуИгра у нас про море. Поэтому в поле "keyword" (ключевое слово) я просто набрал "deep blue sea" (глубокое синее море). Поиск мне выдал неисчислимое количество цветовых схем и сочетаний. Выбираем то, что нравится, не забывая про основные правила.
В качестве фона не стоит выбирать яркие и активные тона. Фон, он на то и фон, что не должен отвлекать от основного - текста.
Мне приглянулось сочетание под названием Deepest Sea RC241
В помощь начинающему игроделуТут есть и темные спокойные тона для фона и вполне себе светлые для текста. А что самое главное - у меня теперь есть настоящее море :) Выбираем эту схему и спускаемся ниже по странице, туда, где расположены обозначения цветов.
В помощь начинающему игроделуКод, обведенный на картинке красным, нужно скопировать в конструктор, что бы получить выбранный цвет.
Итак. Пять минут ковыряния с конструктором и я получил следующее.
В помощь начинающему игроделуВот это уже про море :)
не является панацеей и гарантией, что раз вы взяли здесь цвета, то все будет круто. Это удобный и очень полезный инструмент в помощь, но не более. Сначала вы потратите немало времени на подбор подходящих схем, затем все будет получаться быстрее, а потом он вам вообще не понадобится :) Главное - усидчивость :)
Изображения в игре
В помощь начинающему игроделуЦвета мы выбрали, теперь нужно проиллюстрировать. Какие способы у нас есть?
1. Найти подходящие изображения в интернете
Это самый простой способ, но с которым тоже есть определенные проблемы :)
2. Создать картинки самому
Авторское оформление, созданное специально для игры - это высший пилотаж. Тут два способа: рисунок либо фотография. И никогда не стоит забывать еще об одном возможности получить авторские картинки - найти того, кто сможет это сделать и уговорить помочь :)
Авторский рисунок
В помощь начинающему игроделуЕсли вы умеете рисовать, то вопрос в оформлении отпадает сам собой. Все что нужно - это свободное время, так как процесс этот весьма трудоемкий.
Если вы не умеете рисовать, то можно попробовать найти того, кто возьмется за оформление игры. Скажу сразу, что опытные иллюстраторы как правило давно и плотно занимаются коммерческой деятельностью, продавая свои иллюстрации за хорошие деньги. Поэтому они достаточно занятые товарищи.
Однако отчаиваться не стоит, творческие люди всегда рады чему-то новому, если позволяет время :) Попытаться найти партнера можно на следующих ресурсах:
- крупнейший рускоязычный портал иллюстраторов и художников.
- здесь можно найти не только иллюстраторов и художников, но и прочих творческих людей: от музыкантов, до писателей. У проекта изначально коммерческая направленность, но, как говорят, наглость - второе счастье :)
Фотография
В помощь начинающему игроделуЕсли умение рисовать достаточно редкий талант, которому учатся годами, и при этом весьма трудоемкое занятие, то фотография в век цифровых технологий - искусство доступное каждому :)
Пожалуй, количество сайтов с советами для фотографов уступает только количеству сайтов с советами по "Фотошопу" :) Поэтому не будем надолго задерживаться на этом.
Наличие фотоаппарата и фантазии само по себе уже хорошая почва для творчества :)
Где искать картинки
В помощь начинающему игроделуРесурсов, где можно найти качественные изображения много, но я приведу парочку самых интересных (возможно остальные вы укажите в комментариях к статье).
Важно: Использование чужих материалов без упоминания автора называется кражей. Помните это.
- международное сообщество творческих людей, чья деятельность связана с изобразительным искусством. Если требуется рисованная история - вам сюда.
- огромная подборка фотографий со всего мира. Фотореализм нужно искать именно здесь.
При этом у нас всегда остается возможность найти нужное изображение через стандартный поиск в Google и Yandex.
Самый главный и единственный совет по поиску картинок такой: "Никогда не хватайте первое, что нашли. Возьмите за правило найти как минимум 3 картинки по теме и потом выбрать из них лучшую - это на порядок повысит качество оформления."
Фоновое изображение
Итак с общими принципами мы разобрались, теперь переходим к конкретным действиям :)
Фоновые цвета - это круто, но "" позволяет нам на фон поставить картинку. В конструкторе два режима: "размножить" и "растянуть". С помощью первого мы размещаем на фоне текстуру, второй же ставит одну картинку, растягивая (или сжимая) ее по ширине игрового поля.
Эти два режима предполагают два совершенно разных подхода к оформлению.
Размножаем текстуры
Сайт условно-бесплатный. Это означает что после регистрации у вас есть лимит в 15 Mb/день скачиваемых текстур. Для оформления игры на "" этого вполне достаточно.
Слева на сайте мы видим рубрикатор, а так же строку поиска. Я воспользовался поиском и набрал "water". Из появившегося списка "Most relevant categories" выбираем раздел и смотрим, что нам тут предлагают.
Немного о текстурах. Есть два типа текстур: обычные и tiled-текстуры. С первыми все понятно - это просто фотография какой-то поверхности, а вот tiled - это специально подготовленное изображение у которого края обработаны так, что при повторении картинки не видно границ. В помощь начинающему игроделу  В помощь начинающему игроделуСтрелочкой отмечено место сочленения текстур. |
После непродолжительного поиска я подобрал то, что мне нужно:
В помощь начинающему игроделуРазместил в игре в режиме "размножить" и получил аккуратный равномерный морской фон:
В помощь начинающему игроделуОсобенности использования текстур
Главный плюс - то, что вы не ограничены в размерах игрового поля по высоте. Правильная текстура будет равномерно заполнять собой все пространство.
Минус очевиден - текстура менее выразительная чем иллюстрация. Использовать ее имеет смысл, если квест будет наполнен другими картинками и фон будет служить чисто для настроения.
Растягиваем картинки
В идеале размер фонового изображения должен быть не меньше 1000 px в ширину. Все остальное за вас сделает конструктор.
Если текста и прочих элементов в игре предполагается много, то изображение лучше брать вертикальным, что бы оно не обрывалось посреди игрового поля.
Возвращаемся к нашей игре. Я хотел рисованную историю, поэтому полез на . По запросу "sea" на третьей странице я увидел вот эту красотищу, нарисованную художником :
В помощь начинающему игроделуЧуть-чуть ковыряния в конструкторе и вот что мы получаем.
В помощь начинающему игроделуОсобенности фоновых изображений
Плюс - они выразительнее чем текстура.
Минус - с большими объемами текста в игре, можно столкнуться с такой проблемой, что картинка закончится раньше, чем игровые элементы. В этом случае изображение начнет повторяться, что приведет к некрасивой границе посреди квеста.
Метод борьбы с таким недугом пока только один - создавать фоны самостоятельно, искусственно удлиняя их вниз:
В помощь начинающему игроделуКак правильно подбирать картинки
1. Изображения должны быть в одном стиле. Если от шага к шагу у вас появляются то фотографии то картинки из Paint Brush - это выглядит неряшливо.
2. В рамках одной игры картинки должны быть одного размера. Иначе игровые поля будут скакать туда сюда, что не скажется положительно на желании игрока поставить вам плюс :)
Если у вас достаточно длинная история с большим количеством точек, то я бы советовал примерно следующий план действий.
1. Сначала нужно целиком закончить игру.
Подбор картинок в процессе создания может запутать и привести к полнейшему разброду в оформлении, если вы задумаете сменить сюжет или что-то переделать. Оформление - это, как правило, последний этап создания игры. Не зачем делать двойную работу.
2. Выписать себе списком все точки, которые должны быть проиллюстрированы.
В "Колонии" у меня их получилось порядка 50
3. Разбить все точки на группы.
У меня получились такие группы: "Локации", "Конец хода", "Рапторы", "Пираты", "Жнецы", "Концовки игры".
При чем количество требуемых картинок сократилось, как минимум на 10 штук, т.к. некоторые точки в игре на одну и ту же тематику.
4. Определить для каждой группы наилучший вариант поиска картинок.
Колония 3012 - история про космос. Я решил изначально, что буду искать по играм "Mass Effect", "Star Craft" и "Halo".
Например, для локаций наилучшим образом подошли концепт-арты планет из Mass Effect. Инвестора сыграл Призрак из той же игры. Рапторы (местные хищники) получили образ Зергов из Starcraft. Роль спецназовцев в квесте сыграли бравые парни из "Halo".
Таким образом, определив для себя с самого начала, что хочется получить, вы облегчите задачу по поиску изображений. Ни один поисковик вам не скажет где взять картинку на тему "атака космических пиратов на колонию" :) А вот общая тематика подкинет немало интересного.
5. Собрать все изображения в папочки по группам.
Для "Колонии" я нашел порядка 150 различных картинок, подходящих по теме. Запутаться в таком деле как раз плюнуть. Поэтому информацию нужно структурировать, а затем выбрать лучшее.
6. Открыть любимый графический редактор и подогнать все изображения по нужному шаблону.
К сожалению, в рамках этой статьи я не смогу научить вас пользоваться "Фотошопом". Однако добиться того, что бы все изображения были одинаковыми без вмешательства графических редакторов вряд ли получится.
7. Загрузить результат в конструктор и радоваться собственной крутости :)
Для продвинутых пользователей "Фотошопа" я выкладываю psd-шаблон по которому создавался внешний вид игр. Здесь вы сможете все примерить, посмотреть и поиграться с цветами.
Повторение - мать учения
- Помощь в подборе цветовой палитры нам окажут на
- Текстуры мы ищем на
- Для поиска изображений нам в первую очередь нужно много терпения, парочка поисковых систем, а так же и как бонус :)
При этом не забываем, что у каждой картинки есть автор, которого стоит как минимум упомянуть.
- Сообщников пытаемся найти тут: и
На это сегодня все. Если статья оказалась полезной, пишите в комментариях, какие еще вещи вас интересуют, на чем стоит больше заострить внимание :) С вами был "", всем удачи :)
