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

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

Оригинальные иконки

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



Как видно из рисунка, иконка состоит из контура с округленными углами и обратите внимание также имеется тени под углом 90 градусов. Основной фон имеет свой цвет в зависимости от типа вооружения и также сам рисунок оружия переливается цветным градиентом из не сколько цветов. Рисунок оружия также имеет тень, которая падает на фон. Теперь пройдите на id вооружений и посмотрите какие цвета фонов присутствуют у разных типов вооружения:

1. 1.Первый тип считается как не вооруженный, прозрачный фон;
   
2. 2.Второй тип это холодное оружие, голубоватый цвет, hex-код: 75C9F6;
   
3. 3.Третий тип метательное, темно синий цвет hex-код: 346E8E;
   
4. 4.Четвертый тип это пистолеты, бледно-желтый hex-код: A3C834 ;
   
5. 5.Пятый тип это дробовики, зеленый цвет hex-код: 45A770 ;
   
6. 6.Шестой тип это пистолеты-пулеметы, желтый цвет hex-код: F6E565 ;
   
7. 7.Седьмой тип это автоматы, оранжевый цвет hex-код: F69520;
   
8. 8.Восьмой тип можно назвать как тяжелое вооружение, фиолетовый цвет hex-код: B142B8 ;
   
9. 9.Девятый тип снайперские винтовки розовый цвет hex-код: F692D8;
   
10. 10.Десятый тип это безобидный фотоаппарат, у которого нейтральный, серый цвет hex-код: 575A5E;
    

Обратите внимание на hex коды цветов, это примерные цвета, которые сняты пипеткой с фонов иконок. Эти хекс коды вам в дальнейшем понадобятся, для определения фонов согласно типу оружия, дабы придерживаться стандарта.

Процесс создания контура иконки

Теперь мы подходим к технической части урока, мы будем первым делом создавать сам контур иконки в программе photoshop. Стандартные иконки имеют разрешение 64 x 64, но мы создадим в два раза больше 128 x 128 и таким образом, добьемся хорошего качества созданных иконок.
Приступим, создайте в photoshop новый файл file->new задав имя например как на рисунке и установите размер 128 на 128:



Затем слева в панели инструментов выберем Rounded Rectangle Tool этим инструментом, как раз мы и будем делать основной контур иконки:



Далее нажмем на черную стрелочку, которая указывает вниз, установим точку (радиокнопку) на Fixed Size зададим туда значения W = 100 и H = 100, этим мы делаем фиксированный размер, что-бы не натягивать контур в ручную. Также задаем Radius (радиус) в 20 px (пикселей), это нужно для того что-бы наши углы контура получились закругленными:



Теперь зададим Style (стиль) разметки, ведь нам нужен сам контур а не целиком прямоугольник:



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



Обратите внимание на список слева, там появился наш Shape 1 вот с ним как раз мы сейчас и по работаем. Для этого кликнете 1 раз левой мышью по самому shape и снимите с него выделение:



Далее кликнете по самой надписи shape но только правой кнопкой мыши:



Затем в появившемся меню выберите Blending Options…:



Теперь настроим свойство Stroke как показано на картинке Size 10px:



Обратите внимание как наш контур набрал сразу жирность, вот это как раз и формируется основа нашей иконки оружия. Дальше кликните правой мышкой опять же по самой надписи shape 1 справа в списке и нажмите Convert to Smart Object и еще раз кликните правой кнопкой мыши и уже выберите Razterize Layer. Если все было сделано правильно то мы получим чистый растр овала причем с альфой и сразу задайте слою имя “main”:

Задаем цвет и придаем объемность

Все после того как мы заготовили растр, нажмем на него правой кнопкой мыши и затем выберем Blending Options… и дальше поставим галочку на свойство Color Overlay и в палитре установим цвет f497ff:



Конечно цвет вы можете задать и не много другой на свой вкус и главное по больше практики. Затем поставьте галочку на свойство Bevel and Emboss и настройте все параметры соответственно как на рисунке:



Обратите внимание, как придается объемность нашему контуру, вы можете играть с этими параметрами как вам угодно и добиваться лучших результатов.
Теперь нам осталось наложить тень под углом 90 градусов, как имеет оригинальная иконка gta vice city. Для того что-бы наложить тень, поставьте галочку на свойство Drop Shadow и настройте другие параметры, согласно рисунку ниже:



Ну вот и все собственно сам блестящий контур готов, теперь отцентрируйте саму иконку на фоне, что-бы более менее точно подогнать иконку удерживайте CTRL при перемещении. У меня лично получилось так:

Фон иконки

Теперь мы подходим к завершению урока, осталось сделать последнее это фон иконки. Для этого выберите наш инструмент овала Rounded Rectagle Tool и затем установите размеры и задайте default (none) стиль:



Нанесите его на ваш слой и выпрямите его по центру, получится что-то вроде этого:



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



Теперь задайте имя “background” нашему фоновому слою и выберите у него Blending Options… и затем свойство Color Overlay и задайте там цвет в палитре с кодом F6E565 для пистолетов пулеметов:



Ну вот собственно и все, теперь свою работу обязательно сохраните в формате PSD, это будет у для вас как шаблон.

gta_icon_main_1.rar [14,87 Kb] (cкачиваний: 122)

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