GTABuilder.RU - Мир моддинга GTA

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

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

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



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



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



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



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



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



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



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



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



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

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

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



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



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



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



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



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



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



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



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



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



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



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



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



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



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

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

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

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



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



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



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

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

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



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



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



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



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

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

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



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



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



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





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

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