[Статья] Урок Adobe Photoshop. Создание иконки.

[умненький]

Урок посвящён созданию иконки "с нуля" в стиле моих 4.0.2(rs).
[Ссылки могут видеть только зарегистрированные пользователи. ]
Здесь я последовательно опишу все секреты. Используемая программа: Adobe Photoshop CS3 (можно использовать, как более новую, так и более старую версию, чем у меня). Я использую русскую версию, не буду дополнительно переводить названия пунктов для английской - на скриншотах итак всё видно и интуитивно понятно. Старался изложить всё очень подробно, для нулевого знания фотошопа.

Итак, приступим!

Часть 1. Изменение размера.

1.1. Берём созданную разработчиками 3D-иконку танка, в World_of_Tanks\res\gui\maps\icons\vehicle\small
Такую вы видите на экране исследований в игре. Но для нас она слишком большая и её нужно уменьшить до стандартных размеров иконок (80х24 пикселей).
Изображение -> Размер изображения
[Ссылки могут видеть только зарегистрированные пользователи. ]

1.2. В поле "Высота" ставим требуемые нам 24 пикселя. Внимание! Обязательно должна стоять галочка напротив "сохранять пропорции", иначе иконка просто сплющится.
[Ссылки могут видеть только зарегистрированные пользователи. ]

1.3. Обрезаем лишнюю часть картинки
Изображение -> Размер холста
[Ссылки могут видеть только зарегистрированные пользователи. ]

1.4. Переключаемся на пиксельные пропорции.
Выставляем ширину 80 пикселей.
Ставим смещение влево (это нужно для того, чтобы обрезан был именно правый край).
[Ссылки могут видеть только зарегистрированные пользователи. ]

1.5. Мы добились нужного нам размера, но иконка стала нечёткой. Добавим резкости.
Фильтр -> Резкость -> "Умная" резкость
[spoiler][Ссылки могут видеть только зарегистрированные пользователи. ][/spoiler]

1.6. Я использовал настройки:
Эффект 100%
Радиус 0,7 пикселя для иконок серий 2-4
и Радиус 1,0 пикселей для серии 1.
Увеличение радиуса придаёт танку более "хромированный" эффект. Настройки 0,5-0,7 показались мне самыми реалистичными. Не рекомендую использовать настройки больше 3 пикселей - некоторые танки будут смотреться странно. Хотя, конечно, на вкус и цвет фломастеры разные.
[Ссылки могут видеть только зарегистрированные пользователи. ]




Часть 2. Изображение танка.

2.1. Вытаскиваем изображение из заднего плана.
Кликаем правой кнопкой мыши на слое с танком на панели слоёв.
Слой с танком -> Из заднего плана
[Ссылки могут видеть только зарегистрированные пользователи. ]

2.2. Переходим на вкладку каналов и копируем альфа-канал.
Каналы -> Альфа 1
Ctrl-A, Ctrl-C
[Ссылки могут видеть только зарегистрированные пользователи. ]

2.3. Переключаемся на режим слоёв и добавляем слой-маску.
[Ссылки могут видеть только зарегистрированные пользователи. ]

2.4. Возвращаемся на вкладку каналов. Отключаем отображение всех каналов кроме маски слоя. Заменяем маску слоя на альфа-канал (Ctrl-V). Примечание: если вы забудете отключить все каналы кроме маски, то испортите картинку с танком.
[Ссылки могут видеть только зарегистрированные пользователи. ]

индивидуальные настройки - вариантов море. На всякий случай добавляю скриншот с теми, которые использовал я. Не считаю их идеальными, наверное есть ещё что улучшить.
[Ссылки могут видеть только зарегистрированные пользователи. ]

3.6. Повторяем пункты 3.1-3.2 для создания цифры с уровнем танка.
[spoiler][Ссылки могут видеть только зарегистрированные пользователи. ][/spoiler]

3.7. Копируем стиль слоя с обводкой (кликаем правой кнопкой мыши по названию слоя -> Скопировать стиль слоя).
[spoiler][Ссылки могут видеть только зарегистрированные пользователи. ][/spoiler]

3.8. Вклеиваем стиль слоя на слой с уровнем танка (кликаем правой кнопкой мыши по названию слоя -> Вклеить стиль слоя).
[spoiler][Ссылки могут видеть только зарегистрированные пользователи. ][/spoiler]

3.9. Перемещаем текст по вкусу. Можно использовать инструмент перемещение или зажимать Ctrl для перемещения слоя.
[spoiler][Ссылки могут видеть только зарегистрированные пользователи. ]






Часть 4. Фон.

Если фон не нужен, то переходите к части 5.

4.1. Создаём фон. Не буду останавливаться на этом подробно, для этого есть отдельные уроки в интернете. Я брал фон от кнопки для сайта (созданной мной давным-давно, когда увлекался web-дизайном). Постоянно изменяя я использую основу от неё начиная с иконок версии 3.0. Не забывайте тонировать фон для танков разных классов примерно тем методом, который я описал в пунктах 2.6-2.7.
Итак, берём готовый фон и ставим его нижним слоем.
[spoiler][Ссылки могут видеть только зарегистрированные пользователи. ][/spoiler]

4.2. Создаём слой с 1-пиксельной чёрной рамкой (рисуется карандашом #000000). Ставим рамку верхним слоем. Примечание: я специально оставлял 1 пиксель с края изображения для того, что иконки в игре не сливались в 1 сплошной столб, а были бы как кнопки.
[spoiler][Ссылки могут видеть только зарегистрированные пользователи. ][/spoiler]

4.3. Создаём слой с дополнительной 1-пиксельной белой (#ffffff) рамкой внутри иконки. Помещаем её между основным фоном и изображением танка. Выставляем непрозрачность 20% (или другую по вкусу). Обратите внимание на положение этой рамки - она не видна за танком и текстом.
[spoiler][Ссылки могут видеть только зарегистрированные пользователи. ][/spoiler]

4.4. Создаём слой с чёрной штриховкой (#000000). Подробнее с этим наверное есть в уроках по созданию юзербара. Я рисовал карандашом (благо иконка маленькая), но есть методы проще. Помещаем штриховку между изображением танка и белой рамкой. Непрозрачность устанавливаем от 10 до 20%.
[spoiler][Ссылки могут видеть только зарегистрированные пользователи. ][/spoiler]

4.5. Выравниваем текст, как пункте 3.9.
[spoiler][Ссылки могут видеть только зарегистрированные пользователи. ][/spoiler]

4.6. Устанавливаем непрозрачность фона (мои настройки 70%)
[spoiler][Ссылки могут видеть только зарегистрированные пользователи. ]






Часть 5. Создание альфа-канала.

Если вас устраивает как выглядит иконка (какой вы видите её сейчас, такой она и будет в игре), то приступаем к созданию альфа-канала.

5.1. Правый клик на любом слое -> объединить видимые
[spoiler][Ссылки могут видеть только зарегистрированные пользователи. ][/spoiler]

5.2. Ctrl-клик на изображении слоя (это рядом с его названием). Должна получиться выделенная область. Это не простое выделение, оно учитывает прозрачность всех слоёв.
[spoiler][Ссылки могут видеть только зарегистрированные пользователи. ][/spoiler]

5.3. Переключаемся на вкладку каналов -> "сохраняет выделенную область в новом канале".
[spoiler][Ссылки могут видеть только зарегистрированные пользователи. ][/spoiler]

5.4. Копируйте получившийся канал (Ctrl-A, Ctrl-C) и возвращайте всё до объединения слоёв. У меня это 4 нажатия Ctrl-Alt-Z.
[Ссылки могут видеть только зарегистрированные пользователи. ]

5.5. Вставляем альфа-канал вместо старого (Ctrl-V). Примечание: когда будете сохранять иконку должен быть только один альфа-канал, иначе она сохранится без него.
[Ссылки могут видеть только зарегистрированные пользователи. ]

5.6. Возвращаемся к списку слоёв и выставляем непрозрачность фона 100%.
[Ссылки могут видеть только зарегистрированные пользователи. ]

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

[Ссылки могут видеть только зарегистрированные пользователи. ]

5.7. Изображение танка вылезает за пределы иконки, поэтому нужно дорисовать чёрную (#000000) 1-пиксельную рамку по краям в альфа-канале.
[Ссылки могут видеть только зарегистрированные пользователи. ]

Готово. Теперь при сохранении файла в .tga формат главное не ставить галочку "Уплотнение (RLE)".
[Ссылки могут видеть только зарегистрированные пользователи. ]



Ву Black_Spy