Перейти к содержимому


Урок Adobe Photoshop. Создание иконки.


  • Пожалуйста, авторизируйтесь для того, чтобы ответить
Сообщений в теме: 42

Black_Spy #1 Отправлено 13 май 2011 - 17:52

    Старшина

  • Игроки
  • 7250 боев
  • 507
  • Регистрация:
    29.09.2010

*
Популярное сообщение!

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

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

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

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

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

1.3. Обрезаем лишнюю часть картинки
Изображение -> Размер холста
Spoiler                     

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

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

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

Интересные факты о танках:
Танк Т-44 (также известный как "Крипер" из Maincraft) стремительно приближается к противнику со звуком "Sssssss" и, взрывая свою боекладку, наносит урон танкам противника. Кажется, исправили.
Танки M6 и T1 hvy выполняют роль массового гипноза. Пока есть засвеченный экземпляр этого танка вся команда противника, включая артиллерию, будет стрелять только по нему. В это время другие танки могут чувствовать себя в безопасности.
Взвод на двоих - это как сказка про репку: "тянут-потянут, вытянуть не могут".

Black_Spy #2 Отправлено 13 май 2011 - 17:53

    Старшина

  • Игроки
  • 7250 боев
  • 507
  • Регистрация:
    29.09.2010

*
Популярное сообщение!

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

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

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

Spoiler                     

2.3. Переключаемся на режим слоёв и добавляем слой-маску.
Spoiler                     

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

2.5. Переключаемся на режим RGB. Мы добились прозрачного фона в фотошопе, это понадобится позже. Примечание: у вас может не отображаться шахматная прозрачность как у меня, или быть другим цветом - это настраивается в фотошопе отдельно. Мне удобно видеть её такой.
Spoiler                     

2.6. Необязательный пункт. В иконках Серии 2 я подкрашивал САУ и ПТ-САУ, чтобы они дополнительно отличались от обычных танков. Для иконки в стиле 4.0.2(rs) это не требуется, так как у нас будет фон.
Изображение -> Коррекция -> Цветовой тон/Насыщенность
Spoiler                     

2.7. Продолжение предыдущего пункта, также необязательно.
Я использовал настройки:
Цветовой тон - индивидуально для каждой (для САУ 0, красный цвет. для ПТ-САУ 225-235)
Насыщенность 20. Слишком сильная насыщенность будет очень яркой и наоборот. Такую я посчитал оптимальной.
Обязательно галочку напротив тонирования.
Spoiler                     

Интересные факты о танках:
Танк Т-44 (также известный как "Крипер" из Maincraft) стремительно приближается к противнику со звуком "Sssssss" и, взрывая свою боекладку, наносит урон танкам противника. Кажется, исправили.
Танки M6 и T1 hvy выполняют роль массового гипноза. Пока есть засвеченный экземпляр этого танка вся команда противника, включая артиллерию, будет стрелять только по нему. В это время другие танки могут чувствовать себя в безопасности.
Взвод на двоих - это как сказка про репку: "тянут-потянут, вытянуть не могут".

Black_Spy #3 Отправлено 13 май 2011 - 17:53

    Старшина

  • Игроки
  • 7250 боев
  • 507
  • Регистрация:
    29.09.2010

*
Популярное сообщение!

Часть 3. Текст.

3.1. Выбираем цвет шрифта. Я брал #d2d2d2 (210-210-210) для обычных танков и #d2d200 (210-210-0) для премиумных.
От слишком яркого 100% белого (#ffffff) в игре болят глаза. Такой цвет показался мне оптимальным.
Spoiler                     

3.2. Создаём надпись с названием танка. Настройки текста находятся наверху. Не думаю, что стоит давать какие-либо рекомендации здесь, всё индивидуально для каждого автора.
Когда всё будет готово нажмите на галочку правее настроек (у меня на картинке не поместилась).
Spoiler                     

3.3. Текст готов, но нет обводки. Исправим это.
Переключаемся на вкладку слоёв и кликаем правой кнопкой мыши по слою с текстом ->Параметры наложения.
Spoiler                     

3.4. Необязательный пункт. Самая простейшая обводка текста, которая была у меня давно. Её можно получить этим способом:
Spoiler                     

3.5. Более сложная обводка - внешнее свечение. Здесь чисто индивидуальные настройки, всё зависит от размера шрифта и эффекта, который вы хотите получить. Советую подбирать индивидуальные настройки - вариантов море. На всякий случай добавляю скриншот с теми, которые использовал я. Не считаю их идеальными, наверное есть ещё что улучшить.
Spoiler                     

3.6. Повторяем пункты 3.1-3.2 для создания цифры с уровнем танка.
Spoiler                     

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

3.8. Вклеиваем стиль слоя на слой с уровнем танка (кликаем правой кнопкой мыши по названию слоя ->Вклеить стиль слоя).
Spoiler                     

3.9. Перемещаем текст по вкусу. Можно использовать инструмент перемещение или зажимать Ctrl для перемещения слоя.
Spoiler                     

Интересные факты о танках:
Танк Т-44 (также известный как "Крипер" из Maincraft) стремительно приближается к противнику со звуком "Sssssss" и, взрывая свою боекладку, наносит урон танкам противника. Кажется, исправили.
Танки M6 и T1 hvy выполняют роль массового гипноза. Пока есть засвеченный экземпляр этого танка вся команда противника, включая артиллерию, будет стрелять только по нему. В это время другие танки могут чувствовать себя в безопасности.
Взвод на двоих - это как сказка про репку: "тянут-потянут, вытянуть не могут".

Black_Spy #4 Отправлено 13 май 2011 - 17:54

    Старшина

  • Игроки
  • 7250 боев
  • 507
  • Регистрация:
    29.09.2010

*
Популярное сообщение!

Часть 4. Фон.

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

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

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

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

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

4.5. Выравниваем текст, как пункте 3.9.
Spoiler                     

4.6. Устанавливаем непрозрачность фона (мои настройки 70%)
Spoiler                     

Интересные факты о танках:
Танк Т-44 (также известный как "Крипер" из Maincraft) стремительно приближается к противнику со звуком "Sssssss" и, взрывая свою боекладку, наносит урон танкам противника. Кажется, исправили.
Танки M6 и T1 hvy выполняют роль массового гипноза. Пока есть засвеченный экземпляр этого танка вся команда противника, включая артиллерию, будет стрелять только по нему. В это время другие танки могут чувствовать себя в безопасности.
Взвод на двоих - это как сказка про репку: "тянут-потянут, вытянуть не могут".

Black_Spy #5 Отправлено 13 май 2011 - 17:54

    Старшина

  • Игроки
  • 7250 боев
  • 507
  • Регистрация:
    29.09.2010

*
Популярное сообщение!

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

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

5.1. Правый клик на любом слое ->объединить видимые
Spoiler                     

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

5.3. Переключаемся на вкладку каналов ->"сохраняет выделенную область в новом канале".
Spoiler                     

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

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

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

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

Изображение

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

Готово. Теперь при сохранении файла в .tga формат главное не ставить галочку "Уплотнение (RLE)".
Spoiler                     
Удачи!
Интересные факты о танках:
Танк Т-44 (также известный как "Крипер" из Maincraft) стремительно приближается к противнику со звуком "Sssssss" и, взрывая свою боекладку, наносит урон танкам противника. Кажется, исправили.
Танки M6 и T1 hvy выполняют роль массового гипноза. Пока есть засвеченный экземпляр этого танка вся команда противника, включая артиллерию, будет стрелять только по нему. В это время другие танки могут чувствовать себя в безопасности.
Взвод на двоих - это как сказка про репку: "тянут-потянут, вытянуть не могут".

Logix #6 Отправлено 13 май 2011 - 18:21

    Старший сержант

  • Игроки
  • 784 боя
  • 211
  • Регистрация:
    25.03.2011
Заплюсовал всё, что смог. Титанический труд, спасибо огромное.

Prudenter #7 Отправлено 13 май 2011 - 23:18

    Старшина

  • Игроки
  • 5967 боев
  • 622
  • Регистрация:
    27.10.2010

Цитата

4.2. Создаём слой с 1-пиксельной чёрной рамкой (рисуется карандашом #000000).


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

1. Ctrl+клик на изображении слоя, к которому нужно сделать контур, создается выделение:
Spoiler                     

2. нажимаем на кнопку создания нового слоя, создастся новый слой по выделению:
Spoiler                     

3. нажимаем D, затем X. так мы сделали - сначала черный и белый цвета по умолчанию, а затем поменяли их местами:
Spoiler                     

4. нажимаем Alt+Backspace. так мы залили фон цветом по умолчанию, в данном случае - белым. и сразу после этого нажимаем Ctrl+D (снимается выделение):
Spoiler                     

5. двойной клик справа от названия слоя, затем вкладка Stroke и настройки выставляем такие (после этого нажимаем ОК):
Spoiler                     

6. Ctrr+клик на изображении слоя, создается выделение:
Spoiler                     

7. далее Select - Modify - Contract (уменьшение выделения):
Spoiler                     

8. в появившемся окне ставим значение 1, нажимаем ОК (выделение уменьшится на 1 пиксель):
Spoiler                     

9. нажимаем Delete, выделенное удаляется, остается только контур:
Spoiler                     

10. нажимаем Ctrl+D (снимается выделение). всё, контур готов:
Spoiler                     

Prudenter Icons - иконки с танками и без


 


Mr_ALEX #8 Отправлено 13 май 2011 - 23:34

    Сержант

  • Игроки
  • 7781 бой
  • 164
  • Регистрация:
    26.07.2010
Правильное начинание, запрлюсовал. Осталось его дополнить темой про редактирования флеша для полноты картины и вообще цимес получится. БОЛЬШЕ ХОРОШИХ И РАЗНЫХ ИКОНОК!!!!:Smile-izmena:

Black_Spy #9 Отправлено 13 май 2011 - 23:37

    Старшина

  • Игроки
  • 7250 боев
  • 507
  • Регистрация:
    29.09.2010
Интересно, спасибо. Может когда-нибудь пригодится =)
А так среди всех этих рамок я обычно заготавливаю отдельный прозрачный слой с одной рамкой и потом копирую его для всех. Не писал выше, но пункт 5.7 например так и делается.

Просмотр сообщенияMr_ALEX (13 Май 2011 - 23:34) писал:

Правильное начинание, запрлюсовал. Осталось его дополнить темой про редактирования флеша для полноты картины и вообще цимес получится. БОЛЬШЕ ХОРОШИХ И РАЗНЫХ ИКОНОК!!!!:Smile-izmena:
Флэш только завтра первый раз начну осваивать, самому бы пригодился гайд  :Smile_harp:
Интересные факты о танках:
Танк Т-44 (также известный как "Крипер" из Maincraft) стремительно приближается к противнику со звуком "Sssssss" и, взрывая свою боекладку, наносит урон танкам противника. Кажется, исправили.
Танки M6 и T1 hvy выполняют роль массового гипноза. Пока есть засвеченный экземпляр этого танка вся команда противника, включая артиллерию, будет стрелять только по нему. В это время другие танки могут чувствовать себя в безопасности.
Взвод на двоих - это как сказка про репку: "тянут-потянут, вытянуть не могут".

ownage_cristo #10 Отправлено 14 май 2011 - 20:40

    Старший сержант

  • Игроки
  • 24774 боя
  • 266
  • Регистрация:
    31.01.2011
заплюсовал все что мог :)
это все конечто хорошо :)
Но!
сам в скором времени хотел бы разобраться с флешом.
И какой программкой открываются файлы, а то Макромедия ФЛЕШ 8 не открывает эти файлы вообще.

Black_Spy #11 Отправлено 14 май 2011 - 21:38

    Старшина

  • Игроки
  • 7250 боев
  • 507
  • Регистрация:
    29.09.2010

Просмотр сообщенияownage_cristo (14 Май 2011 - 20:40) писал:

И какой программкой открываются файлы, а то Макромедия ФЛЕШ 8 не открывает эти файлы вообще.
Ни одна программа не открывает флэш, кроме декомпиляторов. Это уже созданный файл и редактироваться (в привычном понимании) не может, скорее это напоминает взлом файла.
Поэтому сначала используют декомпиллятор, например Flash Decompiler Trillix. С помощью него можно менять любые изображения в файле, не боясь что файл окажется битым (ну вернее почти не боясь). Самое главное зачем он нужен - переконвертить из .swf в .fla.
Полученный .fla уже может редактироваться Adobe Flash CS5 как угодно. После окончания работ остаётся сохранить проект обратно в .swf, но вот как раз тут у меня и возникла трудность - даже если ничего не менять, то обратно файл сохраняется с кучей ошибок.
Интересные факты о танках:
Танк Т-44 (также известный как "Крипер" из Maincraft) стремительно приближается к противнику со звуком "Sssssss" и, взрывая свою боекладку, наносит урон танкам противника. Кажется, исправили.
Танки M6 и T1 hvy выполняют роль массового гипноза. Пока есть засвеченный экземпляр этого танка вся команда противника, включая артиллерию, будет стрелять только по нему. В это время другие танки могут чувствовать себя в безопасности.
Взвод на двоих - это как сказка про репку: "тянут-потянут, вытянуть не могут".

NikolaevichA #12 Отправлено 15 май 2011 - 04:10

    Младший лейтенант

  • Игроки
  • 37370 боев
  • 803
  • Регистрация:
    24.01.2011

Просмотр сообщенияBlack_Spy (14 Май 2011 - 21:38) писал:

Ни одна программа не открывает флэш, кроме декомпиляторов. Это уже созданный файл и редактироваться (в привычном понимании) не может, скорее это напоминает взлом файла.
Поэтому сначала используют декомпиллятор, например Flash Decompiler Trillix. С помощью него можно менять любые изображения в файле, не боясь что файл окажется битым (ну вернее почти не боясь). Самое главное зачем он нужен - переконвертить из .swf в .fla.
Полученный .fla уже может редактироваться Adobe Flash CS5 как угодно. После окончания работ остаётся сохранить проект обратно в .swf, но вот как раз тут у меня и возникла трудность - даже если ничего не менять, то обратно файл сохраняется с кучей ошибок.

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

Кстати в процессе копания простого способа нарыл интересную прогу  SWiX - позволяет менять многие параметры флеша на живую в swf - но, по моему, не наш случай..

P/S За гайд - респект.. Сам с фотошопом проблем не испытываю, но терпения на подобные описаловки никогда не хватало...
По жизни: Вот такие пирожки с котятами.... их ешь, а они мяукают.
Из актуального: Бабы совсем распустились..... Даже батарейку в вибраторе, без мужикка поменять не могут!

ansean #13 Отправлено 15 май 2011 - 11:16

    Рядовой

  • Игроки
  • 1709 боев
  • 7
  • Регистрация:
    20.02.2011

Black_Spy, спасибо за очень подробный туториал. Многим пригодится и не только для игры. Надеюсь, администрация обратит внимание на твое творчество и твой труд ;) Удачи!



The_h1Ro #14 Отправлено 16 авг 2011 - 11:23

    Младший сержант

  • Игроки
  • 44906 боев
  • 55
  • Регистрация:
    06.04.2011
а по флешу уже появился гайдик?

RenamedUser_1700484 #15 Отправлено 03 ноя 2011 - 00:21

    Новобранец

  • Игроки
  • 4 боя
  • 3
  • Регистрация:
    30.03.2011
black_spy I wonder if you can not make a photoshop tutorial sff all in English to explain how to make the icons that I whole tutorial with your Russian friends do not understand anything I was able to help with this and I am very grateful that some icons have there names in Russian and I want to modify the Portuguese names such as iS-7 vcs write well NC-7 and I can not put the right name on the icon to change all the powers that are in NC icons for iS thank them.

a big hug
Bogoe

NikolaevichA #16 Отправлено 20 ноя 2011 - 22:34

    Младший лейтенант

  • Игроки
  • 37370 боев
  • 803
  • Регистрация:
    24.01.2011
Black_Spy - go out from game :(
People on Russian servers - bad speak on english.
По жизни: Вот такие пирожки с котятами.... их ешь, а они мяукают.
Из актуального: Бабы совсем распустились..... Даже батарейку в вибраторе, без мужикка поменять не могут!

tor4ih #17 Отправлено 07 янв 2012 - 10:42

    Ефрейтор

  • Игроки
  • 13592 боя
  • 29
  • Регистрация:
    22.09.2010
А можете написать инструкцию как 2d иконки делать?

TBoPoJlloK_DeSeRtoDa #18 Отправлено 05 фев 2012 - 16:01

    Рядовой

  • Игроки
  • 20226 боев
  • 20
  • Регистрация:
    09.12.2011
Отлично

Nooben #19 Отправлено 25 фев 2012 - 00:31

    Лейтенант

  • Игроки
  • 11094 боя
  • 2 336
  • [KR] KR
  • Регистрация:
    31.01.2011

Просмотр сообщенияtor4ih (07 Янв 2012 - 10:42) писал:

А можете написать инструкцию как 2d иконки делать?
Точно так же, не вижу проблемы.

Pr_k_Zadov___ #20 Отправлено 07 мар 2012 - 22:24

    Капитан

  • Игроки
  • 41094 боя
  • 5 511
  • Регистрация:
    15.06.2011
Присоединяюсь к предыдущему оратору ! Действительно - титанический труд ! Огромное спасибо !!! Хорошо, что есть люди не жалеющие своего времени для того, чтобы объяснить разным ,,чайникам,, к коим присоединяю и себя, вещи, которые самому автору наверное надоели уже во время работы с ними. Еще раз большое спасибо !!!





Количество пользователей, просматривающих этот форум: 1

0 пользователей, 0 гостей, 0 анонимных