FragToMe: Делаем свой фон — Counter-Strike: Source
Делаем свой фон — Counter-Strike: Source
В этой статье я расскажу о том, как сделать свой собственный фон для Counter-Strike Source. Для этого нам потребуется пара инструментов и совсем немного времени. Итак, приступим!
Список необходимых инструментов:
- Adobe Photoshop
- VTF Plug-In for Photoshop
Первым делом нужно установить Adobe Photoshop. Думаю, с этим у вас не возникнет никаких трудностей, поэтому едем дальше. Игры на движке Source работают со специальным форматом текстур VTF. Фоновый рисунок, который мы видим после запуска игры упакован в этом формате и для работы с ним потребуется установить специальный плагин.
Установка VTF Plug-In для Photoshop:
- скачиваем архив с плагином
- извлекаем файл VTFLib.dll в каталог ..\Photoshop\
- извлекаем файл VTF.
(Полный путь зависит от того куда был установлен фотошоп, например: C:\Program Files\Adobe\Adobe Photoshop CS5)
Теперь все необходимое установлено, и мы можем приступить к созданию фонового рисунка.
Запускаем Photoshop и открываем любую картинку, которую хотим поставить в качестве фона (файл -> открыть).
Примечание: желательно использовать картинку с тем же соотношением сторон что и у вашего монитора.
Формат VTF имеет одну важную особенность, значение ширины и высоты изображения обязательно должны исходить из возведения в степень числа два (например, 210
(при изменении размера галочка «сохранять пропорции» должна быть снята.)
В зависимости от формата вашего монитора устанавливаем нужный размер:
ширина: 1024 px, высота: 1024 px (обычный монитор)
ширина: 1024 px, высота: 512 px (широкоформатный монитор)
Осталось только сохранить наш фон (файл -> сохранить как).
В качестве папки для сохранения выбираем каталог
В списке «тип файлов» должен быть выбран формат VTF.
В поле «имя файла» вписываем background01 (для стандартного монитора) или background01_widescreen (для широкоформатного монитора).
Жмем на кнопку «сохранить». Перед вами появится окно с настройками формата:
Снимаем галочку с чекбокса «mipmaps», все остальное можно оставить без изменений.
Жмем на кнопку «ok».
Все готово, запускаем игру и радуемся!
Подписаться на: Комментарии к сообщению (Atom)
10 фрагментов для создания уникальных фоновых эффектов с помощью CSS
Эрик Карковак
on CSS
В современном веб-дизайне фоны большие (как в прямом, так и в переносном смысле).
С появлением дисплеев HD (а теперь и 4K) дизайнеры создают фоны, которые занимают много места на экране. Почему? Потому что они оказывают невероятное визуальное воздействие и помогают рассказать историю.
Но фон — это гораздо больше, чем просто добавление фотографии или текстуры в большое пространство — сочетание CSS и время от времени силы JavaScript создает фантастические спецэффекты.
Давайте рассмотрим некоторые уникальные способы, которыми дизайнеры украшают фоны. Мы также включим пример для каждой техники, чтобы вы могли точно увидеть, как они работают.
Набор инструментов веб-дизайнера
Неограниченные загрузки: шаблоны HTML и Bootstrap, темы и плагины WordPress и многое, многое другое!
HTML-шаблоны
3200+ шаблонов
Шаблоны Bootstrap
Более 2000 шаблонов
Шаблоны информационных панелей
240+ шаблонов
темы WordPress
1450+ тем
Шаблоны информационных бюллетеней
270+ шаблонов
Веб-шрифты
Более 13 500 шрифтов
Изменение цвета в режиме наложения CSS
от Giana Этот фоновый эффект настолько крут, что кажется, что фиксированный элемент сверху меняет цвет при прокрутке пользователем.
Использование свойства CSS mix-blend-mode позволяет изменять оттенок, который зависит от содержимого фона.
См. изменение фона Pen CSS при прокрутке. Автор Giana.
Анимация прокрутки.
. Автор Jonathan Marzullo. Это делается с помощью CSS, transform и немного JS.См. Pen GSAP Animate CSS background-position от Jonathan Marzullo
Skewed
от MarcelНаклонные фоны — одна из самых горячих тенденций в веб-дизайне. Этот эффект было невероятно легко реализовать в печатном дизайне и очень сложно реализовать в Интернете — до сих пор. Это чистое решение HTML/CSS делает его очень простым.
См.
Pen skew bg от Marcel
Moving Pictures
от Kevin LeshtИспользуя довольно простой CSS, этот фон обеспечивает плавный переход между несколькими изображениями. Это делает слайдер гораздо более легким, чем традиционный JavaScript.
См. Слайд-шоу фонового изображения Pen в полноэкранном режиме CSS от Кевина Лешта
Анимированный градиент
от Марио КлингеманнаЕсли не сделать это тщательно, анимированный фон может отвлекать от любого содержимого, расположенного поверх него. Этот пример анимированного градиента хорош, потому что это более тонкий эффект. Используя JavaScript, вы можете определить цвета градиента в соответствии с вашей палитрой.
См. Анимированный фоновый градиент пера от Mario Klingemann
Размытие при прокрутке
от Zach Richard Этот метод может быть весьма полезен, когда вы действительно хотите, чтобы посетители сосредоточились на фоновом изображении (например, на заголовке новостной статьи) и затем позвольте легкому чтению текста сверху.
Немного jQuery изменяет свойство background-size при прокрутке, чтобы создать эффект.
См. Pen Zoom and Blur background Изображение Zach Richard
Исчезнувшее изображение героя с наложением
Rand SeayВ этом примере происходит несколько вещей. Во-первых, к основному изображению во всю ширину сверху добавляется цветное наложение для создания другого оттенка. Затем реализуется анимация затухания, чтобы представить изображение визуально плавным. Наконец, к миксу добавляется эффект прокрутки в стиле параллакса. В результате получился очень современный вид, в котором используется относительно мало кода (и не используется JS).
См. Наложение фонового изображения Pen CSS с затуханием и наложением от Rand Seay
Масштабирование и панорамирование фона
от Krz Szzz Вот эффект, который мы часто наблюдаем в последнее время.
Когда пользователь наводит курсор на панель, фоновое изображение увеличивается и перемещается вместе с любым движением курсора. Это простой способ добавить немного интерактивности и поддерживать интерес пользователей.
См. Масштабирование пером + панорамирование изображения при наведении курсора и перемещении мыши от Krz Szzz
Отображение при наведении
от Eric KarkovackВ этом примере показан разделенный экран, где фон раскрывается в зависимости от положения мыши пользователя. Отлично подходит для сравнения, например, снимков «до» и «после».
См. раскрывающийся фон Pen CSS от Эрика Карковака
Изменение цвета при прокрутке
от Джека Харнера Иногда мы забываем, насколько мощным может быть использование простых сплошных цветов.
Здесь мы видим влияние, которое может оказать изменение цвета фона в зависимости от положения прокрутки. Это легкое решение может быть столь же визуально эффективным, как и тяжелые изображения.
See the Pen Изменение цвета фона при прокрутке Джека Харнера
Backgrounds at Forefront
Фон больше не просто средство для кадрирования контента — теперь он часто часть самого контента.
Имея так много интересных способов их использования, стоит поэкспериментировать с различными фоновыми методами и посмотреть, как они могут улучшить взаимодействие с пользователем в вашем следующем проекте.
Фоновых шаблонов CSS из CodePen
Меня всегда поражало то, что можно сделать с помощью CSS3. Одной из замечательных особенностей CSS3 было добавление возможности простого создания градиентов. Но некоторые творческие программисты подняли градиенты CSS на новый уровень, используя их для создания фоновых узоров.
Поэтому я подумал, что было бы неплохо составить список некоторых из лучших фоновых шаблонов CSS, найденных на CodePen.
Примеры шаблонов CSS с использованием градиентов
Набор шаблонов, созданных только с помощью CSS. Эти примеры были сделаны с использованием повторяющихся линейных и радиальных градиентов в сочетании с использованием нескольких фонов.
См. примеры шаблонов Pen CSS с использованием фоновых градиентов от Octavector (@Octavector) на CodePen.
Черно-белые фоновые узоры CSS
Набор различных черно-белых шаблонов и текстур CSS, которые можно использовать в качестве фона в ваших веб-проектах.
См.
черно-белые фоновые шаблоны CSS Pen от CWEI (@CWEI) на CodePen.
14 шаблонов текстур CSS
14 фоновых шаблонов и текстур CSS, которые будут отлично смотреться в ваших будущих проектах.
См. Pen 14 CSS Texture Patterns от InnerGraffiks (@InnerGraffiks) на CodePen.
Различные шаблоны CSS
Эксперименты с шаблонами CSS из книги Леа Веру «Секреты CSS».
См. различные шаблоны CSS Pen от dg1234uk (@dg1234uk) на CodePen.
Примеры шаблонов CSS
Аккуратный набор примеров шаблонов CSS.
См.
Примеры CSS-шаблонов Pen от scottlittlewood (@scottlittlewood) на CodePen.
Узор с сердцем, созданный с помощью CSS
Симпатичный узор с сердцем, созданный только с помощью CSS.
См. рисунок Pen Heart Pattern, созданный с помощью CSS от yoksel (@yoksel) на CodePen.
Горошек, полосы, зигзаги и ромбы Узоры CSS
Крутой набор узоров в горошек, полоску, зигзаг и ромб, выполненных с помощью CSS.
См. CSS-шаблоны Pen Polka, Stripes, Zigzag и Diamond от jmisavage (@jmisavage) на CodePen.
Шаблон вампира, зомби, мумии и оборотня, созданный с помощью CSS
Специальный шаблон CSS для Хэллоуина, в котором представлены вампиры, зомби, мумии и оборотни.
См. Рисунок Pen Vampire, Zombie, Mummy & Werewolf Pattern, созданный с помощью CSS от dokdeleon (@dokdeleon) на CodePen.
Stripe CSS Patterns
Полезный список полос CSS.
См. CSS-шаблоны Pen Stripe от vushe (@vushe) на CodePen.
Подводный узор CSS
Классный подводный узор, созданный только с помощью CSS.
См. CSS-шаблон Pen Underwater от ThePixelPixie (@ThePixelPixie) на CodePen.
Ромбовидный узор CSS
Элегантный ромбовидный узор CSS.
См. CSS-шаблон Pen Diamond от justynaj (@justynaj) на CodePen.
CSS Узор переплетения корзин
Хорошо сделанный узор переплетения корзин с линейными градиентами.
См. шаблон переплетения корзины Pen CSS от doytch (@doytch) на CodePen.
Иллюстрация шаблона рождественского гобелена из чистого CSS
Анимированный шаблон рождественского гобелена, созданный с помощью CSS.
См. иллюстрацию Pen Pure CSS Christmas Tapestry Pattern от ilithya (@ilithya) на CodePen.
Перекрестный узор CSS
Аккуратный перекрестный узор CSS, созданный с использованием различных типов фоновых градиентов.
См. перекрестный шаблон Pen CSS от Bowman003 (@bowman003) на CodePen.
Синий тканевый узор CSS
Синий тканевый узор, вдохновленный футболкой и выполненный с помощью CSS-градиентов.
См. рисунок Pen CSS Blue Cloth Pattern от praveenpuglia (@praveenpuglia) на CodePen.
Шаблон скатерти, созданный с помощью CSS
Если вам нравятся скатерти, вам понравится этот узор, созданный только с помощью CSS.
См. шаблон скатерти с ручкой, созданный с помощью CSS от danichk (@danichk) на CodePen.
Цветной волнообразный узор
Удивительный волнообразный узор CSS, выполненный в аккуратной цветовой гамме.
См. Волнистый паттерн Pen Colored от yoksel (@yoksel) на CodePen.
Современный узор из белых кирпичей
Классный пример современных кирпичиков, сделанных с помощью CSS.
См. рисунок Pen Modern White Bricks Pattern от praveenpuglia (@praveenpuglia) на CodePen.
CSS Pattern Gradients
5 Примеры сеточного, бумажного, королевского, сакурового и настенного узоров, созданных с помощью линейных градиентов в CSS.
См.
Градиенты CSS-шаблона пера от FelixRilling (@FelixRilling) на CodePen.
Ткань в старом стиле — текстура CSS
Текстура ткани в старом стиле с использованием только линейных градиентов CSS3.
См. Текстуру Pen Old Style Cloth — CSS Texture от kapil-lakhani (@kapil-lakhani) на CodePen.
Текстуры старой школы Photoshop с использованием CSS
Используя повторяющийся линейный градиент и небольшую настройку, вы можете подражать тем шаблонам старой школы Photoshop, которые вы ненавидели создавать.
См. Текстуры Photoshop старой школы Pen с использованием растрового изображения CSS (@bitmap) на CodePen.
Узор CSS с режимом наложения CSS
Создайте узор скатерти с помощью миксина с режимом наложения фона CSS.
См. CSS-шаблон пера с режимом наложения CSS от marinda-s (@marinda-s) на CodePen.
Узор «Четырехлистный клевер»
Узор «Четырехлистный клевер» (четырехлистник), созданный с помощью CSS.
См. Рисунок четырехлистного клевера от Dubi_Kaufmann (@Dubi_Kaufmann) на CodePen.
Квадратный узор, созданный с помощью CSS-градиентов
Простой на вид фоновый узор CSS, состоящий из квадратов.
См. рисунок Pen Square Pattern, созданный с помощью CSS-градиентов, автор Bowman003 (@bowman003) на CodePen.
Узор с прозрачными кругами
Симпатичный узор CSS, состоящий из прозрачных кругов и ромбов.
См. Рисунок «Прозрачный круг пера» от Bowman003 (@bowman003) на CodePen.
Узор из цветных квадратов
Прекрасная цветовая гамма на этом узоре из квадратов.
См. шаблон «Цветные квадраты пера» от yoksel (@yoksel) на CodePen.
Зигзагообразный узор
Аккуратный зигзагообразный узор, созданный только с помощью CSS.
См. зигзагообразный рисунок пера от a1ip (@a1ip) на CodePen.
Анимированный узор диагональной волны
Анимированный узор диагональной волны CSS.