Рубрика «цветовые схемы»

Руководство по цветовым функциям CSS - 1


Возможно, вы использовали CSS для изменения цвета элемента на веб-странице, но слышали ли вы что-нибудь о цветовых функциях CSS? Если нет, то из этой статьи узнаете нечто новое и крайне полезное!

Что такое цветовые функции CSS?

Цветовые функции CSS (CSS color functions) — это способ задания цвета в CSS при помощи математических функций, а не простого кода цвета. Функции обеспечивают больше контроля и гибкости при работе с цветами, используемыми в таблице стилей.

При помощи цветовых функций можно настраивать тон (hue), насыщенность (saturation), светлоту (lightness) и непрозрачность (opacity) цвета и даже смешивать вместе несколько цветов.
Читать полностью »

Крутые трюки с переменными CSS - 1

Переменные в CSS (или custom properties, кому как удобнее) изначально задумывались для хранения повторяющихся свойств вроде цветовой палитры или шрифтов в одном месте. В препроцессорах работа с переменными куда более гибкая, но магия SASS/SCSS применима не всегда и не везде, и в реальном мире часто обходятся без них, что нередко ведёт к раздуванию и размазыванию кодовой базы по разным файлам и форматам. В этой статье мы рассмотрим несколько интересных хаков, которые позволяют построить на механизме custom properties вещи, кажущиеся невозможными без препроцессоров или вмешательства JS.Читать полностью »

В CSS существует несколько способов представления цветов. Один из них — система HSL. В этой статье я покажу вам, какие возможности она открывает для верстальщика.
Читать полностью »

Кто: Гвенаэль Массе, художник студии Motion Twin

Привет, меня зовут Гвенаэль Массе, мы с Тома Вассё — единственные художники инди-студии Motion Twin. Среди прочего, передо мной была поставлена задача создания дизайна фонов Dead Cells. Надеюсь, что информация о моём производственном процессе может кому-нибудь пригодиться.

Давайте приступим. Фундамент художественного стиля Dead Cells основывался на трёх столпах: насыщенной цветовой палитре, кельтской архитектуре и теме алхимии.

Что: насыщенная цветовая палитра в мрачных окружениях

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

Благодаря этому игрок лучше понимает происходящее, а значит, и быстрее реагирует на потенциально смертельные источники опасности. И это замечательно подходит к такой активной игре, которой мы стремились сделать Dead Cells.

С практической точки зрения, мы используем столько яркости, сколько можем, то есть мы почти полностью сосредоточены на насыщении средних тонов. Комплементарные палитры (состоящие из противоположных цветов) отлично передают ощущение замкнутости пространства, и поэтому мы активно используем их в дизайне уровней внутри помещений. На открытых уровнях мы делаем упор на близкие по оттенку цвета, потому что они позволяют придать больше нюансов и деталей ландшафту, но даже здесь мы используем комплементарные палитры, подчёркивающие разницу между открытыми и закрытыми областями.

Дизайн цвета загадочных миров Dead Cells - 1

Комплементарные палитры, используемые в закрытом уровне (Toxic Sewers)

Дизайн цвета загадочных миров Dead Cells - 2

Палитра из близких цветов, использованная на открытом уровне (Promenade of the Condemned)
Читать полностью »

Вступление

Знаете, что я заметил? Мы очень много времени уделяем кастомизации цифрового пространства. Это начинается со смены обоев и тем рабочего стола, переходит в долгий подбор скина в Aimp (Winamp, для староверов) и заканчивается оформлением цифрового рабочего места.

Как только я меняю среду разработки или редактор кода, то первым делом лезу в цветовые схемы и ищу любимые цвета. У программистов уже сложились целые культы вокруг определенных цветовых палитр. Что лучше — Obsidian или Monokai? Можно мне Selenitic, только фон более темный? И все в таком духе. Бывало, что ко мне приходили друзья и, прежде чем начать показывать свой проект, меняли тему на другую, более привычную для них. Это раздражает, но я их понимаю.

Почему мы меняем цветовые схемы? - 1

… на самом деле комикс не о цветовых схемах, но он отлично походит.
Читать полностью »

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

Цвет в дизайне - 1

Базовый цветовой круг пригодится в выборе наиболее подходящего сочетания цвета (или поможет гармонично совместить между собой определенные оттенки). Он изображает базовые и известные еще со школы правила смешивания основных цветов: красного, синего и желтого. Если смешать красный и желтый — получится оранжевый, синий и желтый дадут зеленый, а красный с синим — фиолетовый. Оранжевый, зеленый и фиолетовый — это вторичные цвета. Третичные цвета, как красно-фиолетовый и фиолетово-синий, получены от смешивания основных с вторичными.

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js