Опрос на сайте
Что вы делаете с GTA?

Популярные новости

Magic - TXD Builder 0.9.1

Magic - TXD Builder 0.9.1
Полезная программа для сборки TXD файлов, которая важные параметры, такие как mip map, DXT сжатие... Кроме того, программа

Vertex Alpha в Vice City

Vertex Alpha в Vice City
То, что некогда было доступно лишь в GTA: San Andreas и выше: Vertex Alpha, а потенциально - и физический бленд текстур в

Main Menu Scene

Main Menu Scene
"Main Menu Scene" дает вам возможность создавать собственные сцены в "Главном Меню" игры с кастомными картой и скриптом, при

Rollerskates Mod

Rollerskates Mod
Модификация позволяет кататься на роликах, прямо как пляжные девушки.

RwD3D9 - Расширение от The Hero

RwD3D9 - Расширение от The Hero
В данном материале мы рассмотрим, один замечательный плагин RwD3D9, который позволяет перенести серию игр GTA на DirectX 9,

04 ноябрь 2014

Рисование спидометра GTA


В этом уроке мы научимся рисовать спидометр для GTA в фотошопе с нуля. Пошагово изучим весь процесс, рисования спидометра а дальше исходя из этого, вы научитесь рисовать любые спидометры. Наверное вы думаете, что это нечто сложное? Нет и вовсе нет, это дело на самом деле не сложное, однако требует от вас усидчивости и терпения. Как говорилось в предыдущей статье, если вы мастер по дизайну и считаете себя мега-крутым художником тогда эта статья точно не для вас и смело можете пропустить ее. А вот начинающим данная статья будет в самый раз, особенно для тех, кто только начинает работу в фотошопе. Хочется еще отметить, что здесь мы не будем создавать супер-навороченный спидометр, а будем создавать простенький и легко реализуемый, что-бы не затягивать статью на множество частей.

Рисуем простое кольцо спидометра


Начнем пожалуй с самого простого, это с рисования обычного кольца спидометра. Здесь мы не будем делать, что-то навороченное а лишь нарисуем простое кольцо. Создаем новый файл, размерами 256×256 и называем к примеру speedometer:

Рисование спидометра GTA


Далее создадим линейку, которая упростит нам задачи для этого перейдем в меню View и поставим галочку на Rules:

Рисование спидометра GTA


Затем как появиться линейка, нажмите по ней правой кнопкой мыши и поставьте галочку на Pixels, после этого наша линейка будет показывать в пикселях, что нам и нужно:

Рисование спидометра GTA


Далее приводите линии от шкалы линейки для этого удерживая левую кнопку мыши, тащите просто линии к центру, вы почувствуете когда достигните центра:

Рисование спидометра GTA


Далее выберите инструмент в правой панели под названием Elipse Tool:

Рисование спидометра GTA


Затем, в верхней панели, сразу настройте размеры нашего круга 230×230 и разместите его на фон:

Рисование спидометра GTA


После нанесения получиться такой вот круг, у вас может отличаться по цвету другой, но мы цвет ему зададим в свойствах.

Рисование спидометра GTA


Для этого выделите слой круга и кликнув правой мышью пройдите в пункт “Blending Options” и затем в свойство Color OverLay установив в палитре значение цвету #3e3e3e.

Рисование спидометра GTA


и тут же растиризируем его:

Рисование спидометра GTA


Вот наш простое кольцо для спидометра готово, сразу можете ему задать имя “ring” к примеру, а теперь переходим к другому этапу.

Рисуем шкалу спидометра


Вот этот процесс, самый муторный, наберитесь терпения. В начале будет получаться плохо, но в дальнейшем с практикой вы научитесь быстро рисовать подобные шкалы а в начале будет сложновато и так приступим. Для этого выберем прямоугольник и сразу установим ему размеры 5×15 px:

Рисование спидометра GTA


после того, как разметили наш маленький прямоугольник, выделите слой где наш круг, левой мышью и удерживая клавишу CTRL :

Рисование спидометра GTA


Далее выберем слой нашего прямоугольника и инструмент Move Tool нажатием на “V” и нажмем на иконку выше, которая выпрямит наш прямоугольник по верху:

Рисование спидометра GTA


Далее нажимаем CTRL + D и снимаем выделение с нашего кольца спидометра. Дальше снова выберем наш слой где прямоугольник и затем сделаем дубликат CTRL + J и сразу же жмем CTRL + T – и получаем режим трансформации:

Рисование спидометра GTA


Теперь же зажимаем ALT и переносим опорную точку, ровно по X=128, Y=128, как показано на рисунке ниже:

Рисование спидометра GTA


далее установите угол в 30 градусов и где цифра два нажмите по галочке:

Рисование спидометра GTA


А теперь будет самое крутое! Удерживая 3 клавиши CTRL+ALT+SHIFT и начните нажимать еще одну клавишу T, нажмите 8 раз так! В результате мы увидим такую картину:

Рисование спидометра GTA


Если все как на рисунке, то значит все сделано правильно! Отлично действуем дальше, а именно наносим еще один прямоугольник, но уже с другими параметрами 15×5 px :

Рисование спидометра GTA


Дальше выпрямляем наш прямоугольник, как показано на рисунке:

Рисование спидометра GTA


Затем создаем дубликат, CTRL + J и тут же нажимаем CTRL + T. Повторяем такую же процедуру, что выполняли с другим прямоугольником т.е устанавливаем опорную точку 128 на 128 и уже устанавливаем градусы только значение другое 10. Затем также размножаем CTRL+ALT+SHIFT + T и нажимаем аж 25 раз и вот результат:

Рисование спидометра GTA


Отлично, дело сделано. Теперь растеризируйте этот слой и сейчас пройдитесь резинкой и по удаляйте не нужные штрихи а именно в этих точках:

Рисование спидометра GTA


Вообщем вот так должно получиться:

Рисование спидометра GTA


Удаляйте только все до ума, что-бы не оставалось помарок иначе будет, потом не красиво. Ну вот теперь все это выделите и нажмите Merge Layers вы этим самым объедините слои:

Рисование спидометра GTA


Теперь снова нажмите CTRL+T и начните поворачивать шкалу на -150 градусов от опорной точки 128 на 128:

Рисование спидометра GTA


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


Реализация цифр в стиле GTA для спидометра


Реализовать цифры возле шкал, на самом деле можно по разному, но мы все это проделаем в ручную, поскольку те методы, могут только усложнить всю задачу. Для начала скачаем шрифт в стиле GTA Vice City и приступим наносить цифры.

Выберем Pricedown (OT1) (это наш установленный шрифт gta, который мы скачали выше с размерами) 20 pt как показано ниже:

Рисование спидометра GTA


Ну и все, начинаем прописывать цифры от 0 до 180, по +20, получиться так:

Рисование спидометра GTA


Теперь, разметите каждое число, ровно для этого используйте стрелки на клавиатуре, мышь и перемещайте ваши цифры. Что-бы получилось примерно так:

Рисование спидометра GTA


Ну все, теперь выделите цифры и затем объедините слои, ну и все шкала готова:

Рисование спидометра GTA


Делам цветную шкалу


Сейчас же наша, задача сделать весь циферблат цветной, причем там где скорость 160-180, сделать скажем красноватым оттенком. Для этого выделим эту область и нажмем CTRL + C и сразу же вставим слой CTRL+SHIFT+V :

Рисование спидометра GTA


А в основном слое, мы просто удалим эти цифры резинкой, что-бы не было эффекта жирности:

Рисование спидометра GTA


Далее заходим в Blending Options и выберем свойство Color Overlay и установим голубоватый цвет, код которого равен #00ffde самый раз подходит под дизайн.

Рисование спидометра GTA


Также делаем и со вторым слоем, где у нас вырезаны цифры 160-180, но там устанавливаем код цвета #ff5a00. В итоге получим такую картину:

Рисование спидометра GTA


В принципе тут, с цветами вы сами можете решить как вам угодно, но это был конкретный пример, так что выбирайте цвета на ваш вкус.

Реализация стрелочки-индикатора


Ну и в завершении осталось сделать стрелочку индикатор, мы опять же не будем заморачиватся а сделаем простую стрелочку. Для этого выберите elipse (круг) и нанесите его в центр с размерам 20 x 20px:

Рисование спидометра GTA


Далее выберите line tool (линию) с размером 2px и также нанесите в чуть ниже центра самого кружочка. Удерживая SHIFT протяните линию примерно так до шкалы:

Рисование спидометра GTA


Удалите те линии которые мы в начале создавали, теперь они нам уже не нужны.
Ну и все, далее растеризируйте, как это мы делали всегда и сразу же перейдите в blending options. Выберите свойство color overlay и задайте цвет #fc4040. Также зайдите в свойство Drop Shadow и придайте немножко тени, этой стрелочке:

Рисование спидометра GTA


Ну вот и все, мы завершили спидометр свой до конца, смотри итог:

Рисование спидометра GTA




speedometer.rar [33,79 Kb] (cкачиваний: 31)

Думаю для начала, совсем не плохо получилось. Дальше думаю разберитесь как да что, нам для следующего урока, понадобиться 2 текстуры, сам спидометр и сама стрелочка, которая будет двигаться после программирования. Так что дорогие друзья в этом уроке мы научились рисовать простой спидометр, желаю вам удачи в моддинге а также делайте классные моды для gta vice city !

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Добавить свой комментарий

Полужирный Наклонный текст Подчёркнутый текст Зачёркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Вставка ссылкиВставка защищённой ссылки Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Другие материалы

Создание спидометра GTA

Создание спидометра GTA
Реализация спидометра это довольно хорошая идея, особенно если речь идет о создании спидометра для GTA Vice City. Например

Рисуем значок оружия в стиле GTA VC

Рисуем значок оружия в стиле GTA VC
Создавать иконку оружия для gta vice city, мы будем исходя из самой модели в 3ds max. Весь процесс создания на самом то

Рисуем основу иконки оружия в стиле GTA Vice City

Рисуем основу иконки оружия в стиле GTA Vice City
Для создания иконки оружия в стиле GTA Vice City, нам понадобиться photoshop. Желательно конечно же оригинальный фотошоп т.е

Рисуем квадратную текстуру для радара GTA

Рисуем квадратную текстуру для радара GTA
Данный урок, предназначен для начинающих любопытных лиц, для таких как школьников, детей из детского сада а также студентов.
Ads

Группа GTA Builder
Наши партнеры

GTA FreeRunning Story