Правила форума Гаранты форума
Размещение рекламы AMX-X компилятор

Здравствуйте, гость Вход | Регистрация

Наши новости:

14-дек
24-апр
10-апр
11-апр

Создание цветного спрей-лого

, для детей в картинках :D
holoc
сообщение 24.2.2009, 16:56
Сообщение #1
Стаж: 17 лет

Сообщений: 749
Благодарностей: 5723
Полезность: 0

1) Что это такое и зачем это нужно.
Это картинка, которую вы можете прилепить на стену (нажатием кнопки "T" по умолчанию).
Вот обычное лого, из набора кс а вот цветное
Разница, я думаю, очевидна
Зачем это нужно? Просто это прикольно.
2) Что нужно для создания такого лого.
Нужны 3 вещи:
  • Хороший графический редактор (мы рассмотрим на примере фотошопа cs2)
  • Программа для создания и редактирования wad-файлов (лучшая - Wally скачать, мы рассмотрим на примере Wally 1.55b)
  • Прямые руки, растущие откуда надо (мы рассмотрим на примере моих)
3) Создание простого спрея(без прозрачности).
Итак, у вас есть фотошоп и Wally.
Начнем с теории. Максимальный размер картинки, которую вы можете засунуть в кс, ограничивается 10752 пикселями. Это значит, что ширина картинки умноженная на высоту картинки должно быть меньше или равно 10752. Также высота и ширина картинки должны быть кратны 16. Все это сложно звучит, для простоты восприятия смотрим на следующую картинку:

Зеленая область - допустимые размеры, красные - неприемлемые. Все что вам нужно сделать, это подогнать свое изображение под один из этих размеров.

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

Все программы для конвертирования изображений в sprites/wads/logos могут самостоятельно автоматически подгонять размер изображения, но они это делают просто ужасно, поэтому лучше сделать это самостоятельно посредством фотошопа. Открываем наше изображение в фотошопе. Видим, что его размер 250х68 пикселей, что не подходит под требуемые размеры для создания спрея. Нужно подгонять размер. Подгонку начинаем с большей из сторон(в данном случае больше ширина). Навскидку берем ширину 144 и смотрим какой получится высота. В фотошопе лезем в меню Image - Image Size, ставим ширину(width) 144, видим что высота(height) получится 39 пикселей (убедитесь что стоит галочка Constrain Proportions). В принципе, этот размер нам подойдет, так как он влезает в рамки 144х48 (смотрим картинку с допустимыми размерами), но наверное, мы сможем сделать изображение и побольше. Наша цель - подобрать максимально большой из допустимых размеров. Берем ширину 160, опять вводим ее в фотошопе (меню Image - Image Size), видим, что высота получается 44 пикселя. 160х44 вполне помещается в рамки 160х64. Этот размер нас устраивает. Жмем ОК. Итак, сейчас наше изображение 160х44, но высота не кратна 16, нужно либо увеличить ее до 48, либо уменьшить до 32. Для обрезания лишнего, либо для добавления размеров изображения, лезем в меню Image - Canvas Size, там переключаем в выпадающем меню отображение единиц в пиксели(pixels) и выставляем высоту либо 32, либо 48 пикселей. При 32 вы увидите, что часть изображения обрезана, а при 48 сверху и снизу добавились однотонные полоски (как правило белые). Залейте эти полоски цветом, подходящим вашему изображению.
Выберите пипетку(Eyedropper Tool ), ткните ей в фон изображения, чтобы определить цвет
Затем с помощью заливки (Paint Bucket Tool ) закрасьте эти полосы подходящим цветом.
Редактирование завершено, сохраняем результат File - Save As выбираем формат bmp, параметры Windows и 24bit .


Переходим к Wally.
  • Запускаем программу, лезем в меню Wizard - Hl Color Decal, появляется диалоговое окно .
  • Первая строка - Please select your Half-Life folder. Здесь не обязательно вводить путь к игре, это путь к той папке, куда будет сохранен результат конвертирования, где появится в итоге файл с лого.
  • Далее выбираем 2 пункт File on hard drive, выбираем нашу картинку bmp. Жмем ОК.
  • Далее жмем File - Save As, сохраняем результат под именем pldecal.wad.
  • Закрываем Wally.

Открываем папку, куда вы сохранили pldecal.wad, ставим этому файлу атрибут "только чтение" (Правый клик на файл - свойства - галочка только чтение - ОК) Делаем копию этого файла, переименовываем в tempdecal.wad
Отправляем эти 2 файла (pldecal.wad и tempdecal.wad) в папку cstrike. ВСЕ.

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

Вот что получилось в итоге

Качество изображения конечно вышло паршивое, но это был всего лишь пример, объясняющий основы. В следующих 2 уроках я объясню, как улучшить качество изображения и сделать полупрозрачный спрей.

4) Создание более качественного лого(без прозрачности).
Начнем с выбора изображения. Берем следующее фото.

Теперь нужно определиться с выбором размера изображения. Сейчас наша задача - удалить все лишнее с фото, чтобы девушка занимала собой все полезное пространство изображения.
Выделим контуром(Rectangular Marquee Tool ) рамку вокруг девушки .
Через меню Select - Inverse обратим выделение, и нажатием кнопки Delete очистим выделенную область. Нажмите Ctrl + D, чтобы снять выделение. Вот что получилось:

Теперь уберем эту лишнюю область с изображения. Меню Image - Trim и лишняя область исчезла
Самый ответственный момент - нужно определить в какие рамки загнать наше изображение. (Вспоминаем таблицу размеров из первой части )
Думаю, ноги ей можно немного покоцать, а вот лицо, руки и тем более сиськи не нужно. Поэтому, определяющим размером в данном случае будет ширина изображения. Смотрим на таблицу , прикидываем в какой из прямоугольников впишется наша картинка. С учетом того, что ноги мы решили обрезать, размер 64х160 вполне нас устроит.
Отправляемся в меню Image - Image Size, ставим ширину(width) 64, видим, что высота(height) получается 169. Жмем ОК.
Теперь нужно обрезать те лишние 9 пикселей снизу изображения. Меню Image - Canvas Size. Ставим единицы измерения - пиксели(pixels), выбираем на кубике-рубике внизу, что нам нужно ужимать изображение вверх. Ставим высоту(height) равной 160 пикселей. Жмем ОК.
В принципе, на этом месте можно было закончить с обработкой изображения, и переходить к Wally, и вот что у нас получилось бы в итоге.

Я бы не сказал, что очень красиво. Поэтому сделаем кое-что еще.
Отправляемся в меню Image - Adjustments - Hue/Saturation Добавляем насыщеность цветов(Saturation) +33, а также убираем яркость(Lightness) -13 Жмем ОК. Дело в том, что при конвертации создается новая палитра и изображение теряет насыщенность цветов, краски становятся блеклыми, поэтому лучше заранее "перенасытить" изображение цветом.
Добавим немного резкости изображению: меню Filter - Sharpen - Unsharp Mask Ставим параметры Amount 50%; Radius 5,0; Threshold 25
Теперь возьмем карандаш(Pensil Tool )
выберем толщину карандаша 1 пиксель и аккуратно добавим на изображение надпись
Для того, чтобы сделать это аккуратно, можно заранее приблизить изображение лупой(Zoom Tool ) либо же можно скачать специальный шрифт для юзербаров. Но это уже другая история
Сохраняем изображение File - Save As выбираем формат bmp, параметры Windows и 24bit

Далее с помощью Wally создаем pldecal.wad и tempdecal.wad аналогично тому, как мы это делали в первом примере. Отправляем файлы в папку cstrike.
Вот 2 изображения: первое - то что получилось, а второе - то, что получалось без дополнительного редактирования

Осталось самое сложное, но и самое эффектное - создание лого с прозрачным фоном. Об этом поговорим в последней третьей части.

Итак, долгожданная третья часть.
5) Создание лого с прозрачным фоном.
Начнем опять же с теории.
Прежде всего хочу сказать, что фотошоп очень многогранная программа, и для получения какого-либо результата можно пойти множеством разных путей, поэтому то, что я опишу здесь - это не единственный способ, просто мне он кажется наиболее простым и удобным.

Вот некоторые вещи, знание и понимание которых необходимо для реализации задуманного:
  1. Движок GoldSource позволяет для логосов только 2 бита прозрачности, т.е. каждый пиксель либо полностью прозрачен, либо полностью виден.
  2. Прозрачным цветом в файле лого является чистый 100% синий цвет RGB {0 0 255}
  3. Нельзя тупо взять кисточку, выбрать синий цвет и закрасить ненужное синим, результат будет кошмарным (края кисти мягкие, и по краю выделения будет не 100% синий цвет, в результате будет куча ненужных синих пикселей на изображении)
    Хотя можно это сделать с помощью кисти в режиме block без размытия, но это жутко неудобно, и опять же результат будет не очень.
  4. Нам придется работать со слоями(layer) в фотошопе. Не буду вдаваться в тех. подробности и объяснять что это такое, скажу просто, что нас интересует только одно отличие слоя от изображения открытого файла (от background'a) - слой поддерживает прозрачность, и изображение можно стереть.
Хватит теории, перейдем к практике.
Выбираем картинку(самая долгая часть всего процесса для меня)

Открываем ее в фотошопе. Сейчас наша первоочередная задача - удалить все ненужное с изображения.
Для этого сначала переводим изображение в слой. Для этого в панели Layers делаем правый клик по изображению Background и в меню выбираем Layer from Background. (Если не видите панель Layers, то выберите ее в меню Window - Layers)
Далее берем ластик(Eraser Tool) и методично удаляем все лишние части. Выбор размера кисти осуществляется сверху Обратите внимание на параметр Hardness - жесткость кисти - держите его равным 100%.
В принципе, особая точность тут не нужна, не забывайте, что изображение впоследствии будет уменьшено в несколько раз. Вот что получилось у меня в итоге:
Скриншот
Обрезаем пустые части изображения: меню Image - Trim - Transparent pixels (если у вас не обрезается, это значит что вы плохо затерли, и где-то по краям есть пара пикселей).
Теперь подгоняем изображение под один из размеров из таблицы
Я решил сделать размер 128х80, для чего сначала выставил в меню Image - Image Size ширину изображения 128, высота получилась равной 100 пикселей. После этого я обрезал нижнюю часть изображения на 20 пикселей через меню Image - Canvas Size. Вот результат

Проводим обычную постобработку изображения: увеличим насыщенность цветов, добавим резкости.
Image - Adjustments - Hue/Saturation устанавливаем параметр Saturation на +50
Затем Filter - Sharpen - Unsharp Mask устанавливайте параметры по вкусу, только не переусердствуйте.

Теперь самая ответственная часть. Нам нужно преобразовать изображение так, чтобы все пиксели были либо полностью прозрачны, либо полностью непрозрачны. Для этого отправляемся в меню Image - Mode - Indexed Color и устанавливаем все значения в точности как на изображении В результате на прозрачном фоне могут появится серые пятна - это те пиксели, которые вы плохо затерли. Не пугаемся, а берем ластик и избавляемся от них окончательно. Теперь все пиксели на изображении либо прозрачны либо нет. Остался пустяк - закрасить прозрачные синим цветом.

Для начала нужно перевести изображение обратно в RGB режим. Меню Image - Mode - RGB. Теперь создадим новый слой через меню Layer - New - Layer. Выберем цвет путем клика по - вам нужно установить параметры RGB 0 0 255 как на картинке В итоге у вас должно выглядеть так Затем через меню Edit - Fill - Foreground Color заливаем наш новый слой синим цветом. Теперь нужно поменять слои местами и склеить их. В данный момент они расположены так, а нам нужно перенести синий слой вниз
Для этого просто берем мышкой перетаскиваем верхний слой вниз. После чего правый клик по верхнему слою - Merge Down. Слои склеены в один. Сохраняем результат File - Save As - bmp 24bit.

Далее переходим к Wally и двумя кликами создаем наше лого.

Вот что получилось в итоге

Отредактировал: holoc, - 2.8.2009, 14:58
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   Цитировать сообщение
Статус пользователя FreeliN
сообщение 24.2.2009, 23:25
Сообщение #2
Стаж: 17 лет

Сообщений: 88
Благодарностей: 26
Полезность: 231

Молодец. Принимай + за старание!
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Fedcomp
сообщение 25.2.2009, 16:58
Сообщение #3
Стаж: 15 лет

Сообщений: 3899
Благодарностей: 701
Полезность: 0

В hl даже полупрозрачность поддерживается? crazy.gif
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Fedcomp
сообщение 25.2.2009, 19:27
Сообщение #4
Стаж: 15 лет

Сообщений: 3899
Благодарностей: 701
Полезность: 0

Извиняюсь конечно, но скажи как в фотошопе тупо сделать прозрачный пиксель чтоб он его принял (скажи в общих чертах мозги есть)
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя Chilly_Willy
сообщение 25.2.2009, 20:59
Сообщение #5


Стаж: 15 лет

Сообщений: 394
Благодарностей: 45
Полезность: 119

ЛЮТО! :)
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя op1um
сообщение 26.2.2009, 2:44
Сообщение #6


Стаж: 16 лет

Сообщений: 146
Благодарностей: 33
Полезность: 182

комуто будет легче выбрать из 1163 готовых спрееев

СКАЧАТЬ
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
Поблагодарили 2 раз
   + Цитировать сообщение
Fedcomp
сообщение 26.2.2009, 10:16
Сообщение #7
Стаж: 15 лет

Сообщений: 3899
Благодарностей: 701
Полезность: 0

А кому то сделать оригинальное что то ...
КАК ПРОЗРАЧНЫЙ ПИКСЕЛЬ СДЕЛАТЬ ЕПТ??
holoc, надеюсь модераторы потом очистят тему

Отредактировал: Fedcomp, - 26.2.2009, 10:17
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Fedcomp
сообщение 28.2.2009, 19:36
Сообщение #8
Стаж: 15 лет

Сообщений: 3899
Благодарностей: 701
Полезность: 0

holoc, где твоя третья часть? :biggrin:
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя Leo
сообщение 1.3.2009, 21:02
Сообщение #9


Стаж: 16 лет

Сообщений: 1347
Благодарностей: 594
Полезность: 848

Может лучше было б все части в шапку темы? :)
Цитата
КАК ПРОЗРАЧНЫЙ ПИКСЕЛЬ СДЕЛАТЬ ЕПТ

Так вроде бы обычной стирачкой (Eraser tool)


Разработка сайтов - http://leonid.pro/
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Fedcomp
сообщение 1.3.2009, 22:17
Сообщение #10
Стаж: 15 лет

Сообщений: 3899
Благодарностей: 701
Полезность: 0

Я не про это, я говорю как оформить твой логос (естественно с альфа слоем) в графити с сохранением прозрачности (полупрозрачность не нужна, нужны некоторые пиксели прозрачные)
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя Leo
сообщение 2.3.2009, 0:42
Сообщение #11


Стаж: 16 лет

Сообщений: 1347
Благодарностей: 594
Полезность: 848

Берешь создаешь в фотошопе файл, и там есть выбор прозрачного фона, а потом вставляешь туда кусок лого) Вроде так, не пойму что ты хочешь конкретно.


Разработка сайтов - http://leonid.pro/
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Fedcomp
сообщение 4.3.2009, 14:39
Сообщение #12
Стаж: 15 лет

Сообщений: 3899
Благодарностей: 701
Полезность: 0

Думаю распространенная ошибка, если есть папка cstrike_russian поместите в нее pldecal.wad и tempdecal.wad тоже
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя GODZILLA
сообщение 31.3.2009, 17:31
Сообщение #13


Стаж: 16 лет

Сообщений: 1471
Благодарностей: 440
Полезность: 716

Красавец! Я как раз хотел сделать логос прозрачным,хотел в этом разделе задать вопрос,но тут я увидел эту тему! Супер.

А как сделать простое лого? как стандартное? (значёк Vavle,Бильярдный шар и т.п.) Я пробывал в фотошопе. залил всё чёрным,написал то-что мне надо белым,поставил индексирование цвета,сохранил как .бмп, 8 бит,но не катит sad.gif знает кто как сделать простое лого?
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
holoc
сообщение 31.3.2009, 22:07
Сообщение #14
Стаж: 17 лет

Сообщений: 749
Благодарностей: 5723
Полезность: 0

Все, что должно быть прозрачным, заливай синим цветом(RGB: Red 0 Green 0 Blue 255). И все как написано выше. К стандартным логотипам это не относится.
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
Поблагодарили 10 раз
   + Цитировать сообщение
Fedcomp
сообщение 1.4.2009, 6:12
Сообщение #15
Стаж: 15 лет

Сообщений: 3899
Благодарностей: 701
Полезность: 0

Цитата(GODZILLA @ 31.3.2009, 19:31) *
Красавец! Я как раз хотел сделать логос прозрачным,хотел в этом разделе задать вопрос,но тут я увидел эту тему! Супер.

А как сделать простое лого? как стандартное? (значёк Vavle,Бильярдный шар и т.п.) Я пробывал в фотошопе. залил всё чёрным,написал то-что мне надо белым,поставил индексирование цвета,сохранил как .бмп, 8 бит,но не катит sad.gif знает кто как сделать простое лого?

Рисунок размером 64X64, заливаешь черным где должно быть темно. Открываешь любой логос из стандартного набора, сохраняешь оттуда палитру цветов, потом эту же палитру заливаешь на свой, сохраняешь с коротеньким названием в valve/logos, я кстати всегда так логосы и делал
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя romankoks
сообщение 15.2.2011, 1:43
Сообщение #16
Стаж: 13 лет

Сообщений: 1
Благодарностей: 1
Полезность: 0

Чтобы облегчить вам задачу. Не залазьте в вкладку Image Size, не изменяйте размер изображения и забудьте про таблицу, а вместо этого (и вместо программы Wally) используйте программу HL Logo Creator, клацнув в этой проге на Autosize ваша картинка приобретёт все нужные/правильные размеры. Всё остальное делайте как написано в статье, я сделал всё как в ней написано и получилось супер!!! Вот пример спрея который я сделал по этой статье:
http://s010.radikal.ru/i311/1102/7a/fb9deace0992.jpg


Автору ОГРОМНЕЙШИЙ РЕСПЕКТ, СПАСИБО !!!!!!!!!!!!! yahoo.gif
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя Darkee
сообщение 27.2.2011, 14:39
Сообщение #17
Стаж: 13 лет

Сообщений: 1
Благодарностей: 1
Полезность: 0

хорошая статья) psych.gif
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя no_stress
сообщение 17.12.2011, 15:37
Сообщение #18
Стаж: 13 лет

Сообщений: 27
Благодарностей: 2
Полезность: 58

Такая проблема: Делаю себе цветное лого через HL Tag COnverter , все зделал по инструкции , но в кс лого видно только у меня , другие игроки заместь моего лого видят стандарное , а чем может быть проблема?
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
noskill
сообщение 17.12.2011, 15:53
Сообщение #19
Стаж: 12 лет

Сообщений: 3086
Благодарностей: 1493
Полезность: 0

Цитата(no_stress @ 17.12.2011, 15:37) *
Такая проблема: Делаю себе цветное лого через HL Tag COnverter , все зделал по инструкции , но в кс лого видно только у меня , другие игроки заместь моего лого видят стандарное , а чем может быть проблема?

сервер не загружает лого
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
Статус пользователя no_stress
сообщение 17.12.2011, 16:38
Сообщение #20
Стаж: 13 лет

Сообщений: 27
Благодарностей: 2
Полезность: 58

На сервере разрешены нестандартные лого
Перейти в начало страницы         Просмотр профиля    Отправить личное сообщение
   + Цитировать сообщение
  Тема закрытаНачать новую тему
 
0 пользователей и 1 гостей читают эту тему: