Блог xyz school
Покраска драфта цветом
И почему нужно уметь её делать.
Куратор курса DRAFT PUNK Эдуарт Витер написал статью об основных принципах покраски драфта — а заодно объяснил, как человеческий глаз воспринимает цвет.
Пригодится всем, кто занимается 3D — удачно покрашенная модель всегда смотрится выигрышнее «серой».
Зачем красить драфт
Покраска драфта позволяет на раннем этапе отработать цветовые решения и подобрать палитру — как для одиночной модели, так и для целой локации. И всё это — с помощью простых инструментов. Бывает очень обидно после часов, а возможно и дней работы осознать, что твоя текстура просто не подходит, цвета не сочетаются, и надо всё переделывать.
Драфт может быть самобытным арт-объектом, а не просто начальной стадией модели. Объектом, который не стыдно оставить в своем портфолио или поделиться с друзьями. Выразительный силуэт, интересные средние формы и классная покраска могут показать, что вы не только умеете хорошо моделить, но и понимаете цвет, — а это не менее важный навык.
При грамотном подходе получаются очень выразительные объекты и сцены:
Работа студентки курса DRAFT PUNK — annzep
Работа студентки курса DRAFT PUNK — annzep
Работа студентки курса DRAFT PUNK — nahem.san
Так что если вы отправите клиенту, лиду или арт-директору на рассмотрение драфт не в сером материале, а с качественной покраской, скорее всего, он это оценит. К тому же вы проверите, насколько сходятся ваши вкусы и планы относительно этой модели.
Покраска драфтов позволяет новичкам понять цвет, попробовать разные палитры, да и вообще определиться, что же такое «палитра». И всё это при помощи самых простых инструментов: без UV, новых программ и сложного текстурирования, — всё в одном 3D-редакторе.
Про покраску
Главные элементы хорошего драфта — это качественно подобранные цвета (палитра) и геометрия, обозначенная тоном.
Начнём с последнего. Наряду со светотенью и перспективой один из важнейших механизмов восприятия — это бинокулярное зрение. Оно работает благодаря сложнейшему физиологическому механизму зрения — фузии (лат. fusio — слияние), то есть слиянию зрительных образов в единое зрительное восприятие. Больше 50% всего восприятия объекта — это как раз бинокулярное зрение.
Всё, что мы видим на экране монитора — это плоская картинка, на которой бинокулярное зрение не работает (за исключением случаев использования 3D-очков).
Поэтому один и тот же объект в живую и на экране будет восприниматься по-разному. Чтобы компенсировать потерю части восприятия при создании компьютерной графики приходится идти на ряд ухищрений. Одно из них — «цветовая модуляция».
Изменяя тон выделяют геометрию и формы внутри силуэта модели. Характерно это как для полноценных текстур, так и для покрашенных драфтов. Далее — несколько работ для примера.
Обратите внимание, как выделены деревья и зверёк. Использован очень скромный набор цветов, но мы отлично считываем как основные объекты, так и настроение с сцены. Эта работа выполнена с применением однотонных тонов — их называют flat color или flat shaiding
работа Sorin Covor — Early Morning Walk
работа Sorin Covor — Early Morning Walk
Base color (flat color) — техника, при которой используют только однотонные цвета без градиентных переходов и динамических теней. Также её называют «Плоскостной затушовкой» или «Постоянным затенением».
А вот еще одна работа. В ней формы выделены с помощью градиентных переходов, а объем подчеркивают подкрашенные фаски. Скрины сделаны в режиме base color (без бликов и теней), но мы всё равно отлично считываем объем.
BitGem Cemetery Set Update — Proto Series
BitGem Cemetery Set Update — Proto Series
BitGem Cemetery Set Update — Proto Series
Теперь рассмотрим несколько одинаковых моделей с разной степенью покраски.
По мере выделения геометрии тоном внутренние формы модели становятся всё более четкими и выразительными.
Режим final render на scketchfab
Рассмотрим те же модели, но уже в режиме Base color.
- Вариант — робот в сером материале
- Происходит разбивка на основные цвета, но один жёлтый акцент смотрится неинтересно.
- На третьем варианте в покраске появляются переходы, модель становятся интереснее за счёт синих осей, а жёлтый глаз поддерживается жёлтым поясом. Добавляется разбиения по тонам для выделения вырезов
- В итоговой версии появляется детализация тоном.
Режим Base color на scketchfab
Еще один пример выделения геометрии объекта — вот этот цветок из работы студентки курса DRAFT PUNK nahem.san.
работа студентки курса DRAFT PUNK — nahem.san, режим Final render
работа студентки курса DRAFT PUNK — nahem.san, режим Final render
При покраске всегда проверяйте, как ваши цвета выглядят в режиме base color. В режиме рендера, с тенями, бликами, а зачастую и с фильтрами постобработки, часто тяжело понять, что ухудшает выразительность, — плохо подобранные цвета, некорректное освещение или фильтры.
Также не стоит забывать, что ваша модель может быть использована в разных локациях и при разном освещении — особенно если речь о геймдеве. Но base color — ваше основное цветовое решение, — будет продолжать работать даже в очень затемненных/высветленных условиях. На рисунке ниже видно, как меняется восприятие моделей разных версий по мере ухудшения освещения.
Отдельно отмечу тайловые материалы, такие как плитка, кирпич, черепица. При равномерном выделение граней тоном мы получим интересный отдельный элемент (кирпич, камень и т.д.) Но в массиве это не работает и не обеспечивает нужной степени выразительности. Более эффективным приёмом будет выделение отдельных «кирпичей» или «плиток» тайлового материала другим тоном.
Рассмотрим одну из работ.
работа студентки курса DRAFT PUNK — annzep, режим Final render
работа студентки курса DRAFT PUNK — annzep, режим Final render
Подобный приём используется уже очень давно, — например, в отделочных материалах. Как это часто бывает, решение подсказал реальный мир.
Вот пример стандартной черепицы без какой либо разбивки по тону элементов. Смотрится неплохо, но несколько скучно.
Но как только мы добавляем разнообразие тона, черепица начинает смотреться совершенно по другому.
На днях мне попался старый немецкий дом с очень выразительной кровлей
Если повысить насыщенность тона, распределение цветовых пятен становится более явным.
Не так давно зашёл в одну из новых кофеен: хозяин заведения явно не поскупился и воспользовался услугами профессиональных дизайнеров. Видно это было по отделке и подбору цветов, — как отдельных элементов, так и помещения в целом. Но я обратил внимание на напольную плитку. В глаза бросается разбивка по тону:
Будьте внимательны при обозначении разным тоном отдельных частей геометрии или элементов в общем массиве. Слишком контрастные цвета могут испортить выразительность вашей работы: наш мозг будет воспринимать их как совершенно разный материал.
Отдельно обращу внимание на такие материалы, как камень и дерево. Существуют стереотипы о их цвете: камень — серый, дерево — светло-коричневое. Отчасти это верно, но оба этих материала намного богаче по цветовой палитре.
Как видно из палитр выше, камень — очень разнообразный материал, в котором могут присутствовать как холодные, так и тёплые тона.
Дерево не сильно уступает камню по богатству тона.
Теперь немного теории. Сразу предупреждаю: это — лишь маленькая памятка в несколько абзацев, в которой очень поверхностно затрагивается теория цвета. Сам по себе цвет — это очень большая и непростая тема, по которой написано немало книг и сломано не меньше копий.
Для лучшего понимания — немного физики. Свет, если сузить и упростить это понятие, можно назвать потоком фотонов. Когда мы говорим: «эта чашка красная», то на самом деле имеем в виду, что молекулярный состав поверхности чашки поглощает все световые фотоны, кроме красных.
Если солнечный свет пропустить через трехгранную призму, как поступил сэр Исаак Ньютон в 1676 году, то мы получим спектр из семи цветов — красный, оранжевый, желтый, зеленый, голубой, синий и фиолетовый. Когда мы видим радугу, это как раз небо выступает в роли огромной призмы. Диапазон света который мы можем воспринимать, ограничен. Отсюда и формируются тона, которые мы воспринимаем.
Но особенно выделяются красный, синий и зеленый. На основе этого создана шкала — RGB (аббревиатура английских слов red, green, blue — красный, зелёный, синий) — аддитивная цветовая модель, которая описывает способ кодирования цвета для воспроизведения с помощью трёх цветов, которые часто называют основными. Все остальные тона и оттенки получают с помощью их смешивания.
Выбор «основных» цветов обусловлен особенностями восприятия цвета сетчаткой человеческого глаза. Ощущение цвета возникает в мозге при возбуждении и торможении цветочувствительных клеток, — колбочек. У человека и приматов существует три вида колбочек, которые различаются по спектральной чувствительности, — ρ (условно «красные»), γ (условно «зелёные») и β (условно «синие»). Отсюда и подобное восприятие.
Но что нам это дает на практике?
Возьмём оранжевый шар. Его цвет формируется путём поглощения синих фотонов и отражения красных и зелёных, смесь которых и дает оранжевый.
В современных рендерах используется в основном физически корректный рендеринг (Physically based rendering - PBR) — метод затенения и рендеринга, обеспечивающий точное представление взаимодействия света с поверхностями. Поэтому и взаимодействие цвета и света происходит на основе их физических характеристик. Подробнее про PBR — здесь и здесь.
Так что если осветить наш оранжевый шар насыщенным синим светом, то он будет скатываться по цвету в черный спектр. Всё дело в фотонах: так как наш источник освещения испускает в первую очередь синие, то оранжевая поверхность их практически полностью поглощает. Чёрный — это по факту не цвет, а отсутствие отраженных фотонов: что-то вроде «дыры» в нашем зрении.
Чуть сместим тон света: пускай цвет шара будет искажённый, но он появится. При этом интенсивность источника освещения осталась на том же уровне
Поэтому если вдруг в вашей сцене после настройки освещения — особенно интенсивного с насыщенными цветами, — какие то элементы начали скатываться в черный спектр, не стоит паниковать. Возможно, всё дело в фотонах, и ситуация заметно улучшится, когда вы сместите тон освещения.
Подбор цвета и палитры значительно упрощает цветовой круг. В каком-то смысле это такая «таблица Менделеева» для цвета.
цветовой круг по Иоханнесу Иттону
Этот круг был создан путём анализа наиболее гармоничных сочетаний цветов, и их взаимодействия. Сейчас самый распространённый вариант цветового круга — RGB.
Вернемся к нашему шару. Цвет объекта и цвет света находятся на противоположных сторонах круга, — все подобные сочетания дают эффект с отсутствием отраженных фотонов.
Сочетание двух цветов, расположенных друг напротив друга на цветовом круге, дают чёрный только когда речь идет о связке цвет—свет.
Для подбора тона и работы с палитрами цвета, расположенные на противоположных сторонах круга, также крайне важны, хотя и работают по другому принципу. Подобные цвета называются комплиментарными, дополнительными или контрастными. В разных источниках: книгах, лекциях и методических пособиях вы можете услышать подобные определения, но касаются они одного и того же явления.
Эти цвета отлично сочетаются друг с другом, и если в вашей работе вы остановили свой выбор на двухцветовой схеме, то ваш выбор — комплиментарные цвета.
Данный принцип, как и описанные выше имеет прямое отношение к физиологии человека. Посмотрите пристально на зеленый квадрат, а потом закройте глаза, — и в качестве остаточного изображения у вас перед глазами возникнет красный. Можно повторить данный опыт на любом из цветов круга и каждый раз остаточным изображением будет его комплиментарный цвет.
Но почему нам нравится данное сочетание? Исследователи полагают, что физическое смешивание противоположных цветов даёт серый, — цвет, который считают признаком гармонии. Если попытаться повторить выше указанный опыт на средне-сером цвете, то никакого остаточного изображения не появится: нашему мозгу не потребуется «компенсация».
Цветовой круг нередко называют — хроматическим, то есть отражающим цвета видимого спектра.
Хроматический круг существенно облегчает подбор палитры. Например, схемы на основе треугольника (всегда равнобедренного) квадрата или ромба как бы отсекают «лишние» цвета: использовать можно только те, что внутри фигуры.
Контраст светлого и тёмного
В данном случае изменение цвета происходит путем подмешивания в него черного или белого цвета.
На практике это выглядит вот так. Там, где правый верхний угол — наиболее насыщенный цвет, а смещение строго по горизонтали или вертикали высветляет или затемняет его.
Несколько примеров изменения цвета по светлоте/темноте:
Такой контраст позволяет сделать интересный эффект глубины, смещая окрас объектов от насыщенного или даже темного цвета в белую зону и добиваясь отличного ощущения пространства.
Например, в данной работе цвет и перспектива усиливают друг друга.
Ещё есть характерная закономерность: светлые тона на чёрном фоне выступают вперёд в соответствии со степенью их светлоты. Пример — изображение ниже.
А тёмное на светлом фоне стремится вперёд:
Отличный пример работы по использованию данных свойств — фанарт по игре Firewatch.
Ещё один пример того, как цвет применяют для создания глубины:
Интересная особенность: красный, оранжевый и жёлтый при недостаточном освещении кажутся более тёмными, в то время как зелёный и синий в тех же условиях, наоборот, кажутся более светлыми.
Контраст холодного и теплого
Такое деление оказывает на человека мощный психологический эффект, — это даёт нам эффективный приём воздействия на зрителя. Но связь между ощущением температуры и зрительным восприятием цвета не всегда очевидна.
В книге «Искусство цвета» Иоханесс Иттон рассказывает об интересном опыте. В мастерских, окрашенных в сине-зелёные цвета, рабочие жаловались на холод при температуре 15 градусов. В это же время в красно-оранжевом помещении они начинали жаловаться на холод лишь при температуре 11 — 12.
Немного классики. Обратите внимание что детализация на этой картине Клода Моне практически отсутствует. По сути, нам доступны лишь силуэты и тени, но картина при этом очень выразительна и задаёт настроение.
Клод Моне «Лондонский парламент в тумане»
Ещё один пример холодных и тёплых тонов от beeple.
Контраст холодного и тёплого обладает интересным свойством: он может влиять на наше восприятие расстояние до объекта. Чем дальше от нас объект, тем более холодным он кажется — из-за воздушного слоя. Наш мозг так привык к этому ориентиру, что такой эффект будет работать и в 2D, и в 3D.
Контраст комплиментарных цветов
Этот тип контраста мы обсудили выше, тут отмечу только занятный факт, который показывает, насколько четко наш мозг складывает подобные цвета в серый.
Есть такое направление в живописи — пуантализм: рисунок создаётся нанесением на холст точек, которые на расстоянии сливаются в единую картину. Пуантилисты добивались серого цвета нанесением очень маленьких точек комплиментарных цветов рядом друг с другом: серый тон появлялся только в глазах зрителя.
Симультанный контраст
Это, пожалуй, самый непростой для понимания, но не менее важный вид контраста. Чтобы объяснить, о чём речь, я просто процитирую упомянутого не раз Иоханесса Иттена.
Понятие «симультанный контраст» обозначает явление, при котором наш глаз при восприятии какого-либо цвета тотчас же требует появления его дополнительного цвета, и если такового нет, то симультанно, то есть одновременно порождает его сам.
Это означает, что основной закон цветовой гармонии базируется на законе о дополнительных цветах. Симультанно порожденные цвета возникают лишь как ощущение и объективно не существуют. Они не могут быть сфотографированы.
Поскольку симультанные цвета возникают лишь в глазах, они вызывают в нас чувство возбуждения и живой вибрации от непрерывно меняющейся интенсивности этих цветовых ощущений.
При длительном рассматривании основной цвет как бы теряет свою силу, — глаз устаёт, — в то время как восприятие симультанно возникшего цвета усиливается. При сочетании двух чистых цветов, не являющихся строго дополнительными, каждый из них стремится сдвинуть другой в направлении к его дополнительному, причём в большинстве случаев оба цвета теряют нечто от присущего им характера и приобретают новые оттенки.
Одна из самых мощных цветовых схем — равносторонний треугольник.
На схеме видно, насколько все цвета смещены относительно их комплиментарных.
Контраст по насыщенности
Контраст по насыщенности часто путают с контрастом по светлоте/темноте. Основное отличие в том, что насыщенность не пытается уйти в белую или чёрную зону, а падает, стремясь прийти в средне-серую.
По градации RGB средне-серый — это цвет в значениях 128:128:128. Смещение в показанной ниже системе происходит по прямой, из правого верхнего угла (максимально чистый цвет) к средне-серому.
Контраст по размеру цветовых пятен
Этот тип контраста характеризуется размерным соотношением между двумя или несколькими цветовыми пятнами.
Если мы обобщим виды контрастов и подмешаем в них цветовой круг с его схемами, то получим стандартное распределение цвета относительно объема модели или картины.
Это соотношение, близкое к 60 на 30 на 10. 60 — это основной цвет, как правило относительно насыщенный. 30 — дополняющий, заметно более блеклый, чем основной. 10 — это акцентный, чаще всего самый яркий. Это не жёсткая формула, но стоит стремится к подобной пропорции. Помните: если вы не можете с первого взгляда определить основной цвет модели, стоит пересмотреть распределение цветов.
Рассмотрим на примере. Первый робот покрашен в соответствии с гармоничной триадой а вот последующие модели — с нарушением правил подбора цвета.
Про черный, белый и оттенки серого
Чёрный и белый цветами, по сути, не являются. К чёрному стремится любой цвет при снижении яркости — например, при уменьшении освещённости до полной темноты. При увеличении яркости любой цвет стремится к белому. Черный и белый, а также весь спектр серого между ними — это ахроматический ряд, в переводе с древнегреческого — «не цветной». Ахроматические цвета различаются только по светлоте.
Новички часто активно используют чёрный, серый и белый цвета — это ошибка. Профессиональные художники как правило эти цвета не используют, так как в природе их не существует.
Гармония — это равновесие, симметрия сил. Нейтральным цветом считается серый — наш глаз не создаёт с ним никакого дополнительного цвета, и это чаще всего делает его самым гармоничным.
И тут мы попадаем в «ловушку гармонии». Основная задача большинства визуальных произведений — вызывать эмоции, а серый цвет, наоборот, их чаще всего приглушает. Поэтому серый стоит использовать крайне аккуратно и с оттенками цветов хроматического ряда. Чёрный и белый не могут быть комплиментарными цветами и не отображаются на цветовом круге.
У ахроматических цветов есть важная роль: подмешивая их в тона цветового круга, мы можем регулировать яркость и влиять на насыщенность цвета. Эти цвета отлично подходят для создания инструментов по регулированию тех или иных параметров. Например — для текстурных одноканальных карт, таких как Hights и Ambient oclusion. Но именно при формировании своей палитры их лучше избегать.
Но не забывайте, что серый — это очень богатый цвет, если в нём присутствует тон. Вот несколько палитр:
Напоследок — простой, но действенный прием от Антона Беляева.
Находим красивую картинку с крутой цветовой схемой, конвертируем её в мозайку, и получаем на выходе отличную палитру.
Несколько примеров изображений, полученных таким образом:
Цвет — не самый простой предмет для изучения. Но его понимание это во многом фундамент всего дизайна. Если вы сможете с ним совладать, ваши навыки и уровень как специалиста значительно вырастут.
Автор: Эдуард Витер
Хочешь получать лучшие статьи
от XyZ раз в неделю?
Подпишись на рассылку XyZ
Нажимая на кнопку, вы соглашаетесь с условиями обработки данных
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="google-site-verification" content="3W5japOowboLNjQ8sge1sGCJaL2OOmBZVhLGCNoRjlw" /> <meta name="yandex-verification" content="007f18c3f91cd6ed" /> <!--metatextblock--> <title>Покраска драфта цветом</title> <meta name="description" content="Куратор курса DRAFT PUNK Эдуарт Витер написал статью об основных принципах покраски драфта — а заодно объяснил, как человеческий глаз воспринимает цвет. Пригодится всем, кто занимается 3D — удачно покрашенная модель всегда смотрится выигрышнее «серой»." /> <meta property="og:url" content="https://www.school-xyz.com/blog/pokraska-drafta-tsvetom" /> <meta property="og:title" content="Покраска драфта цветом" /> <meta property="og:description" content="Куратор курса DRAFT PUNK Эдуарт Витер написал статью об основных принципах покраски драфта — а заодно объяснил, как человеческий глаз воспринимает цвет. Пригодится всем, кто занимается 3D — удачно покрашенная модель всегда смотрится выигрышнее «серой»." /> <meta property="og:type" content="website" /> <meta property="og:image" content="https://static.tildacdn.com/tild3662-6164-4863-b162-353365353762/beidj.png" /> <link rel="canonical" href="https://www.school-xyz.com/blog/pokraska-drafta-tsvetom"> <!--/metatextblock--> <meta name="format-detection" content="telephone=no" /> <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="https://ws.tildacdn.com"> <link rel="dns-prefetch" href="https://static.tildacdn.com"> <link rel="shortcut icon" href="https://static.tildacdn.com/tild6462-6438-4164-b332-316331666365/favicon.ico" type="image/x-icon" /> <!-- Assets --> <script src="https://neo.tildacdn.com/js/tilda-fallback-1.0.min.js" async charset="utf-8"></script> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';"/> <link rel="stylesheet" href="https://static.tildacdn.com/ws/project1006203/tilda-blocks-page9171135.min.css?t=1772097573" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-animation-2.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-cover-1.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-slds-1.4.min.css" type="text/css" media="print" onload="this.media='all';" onerror="this.loaderr='y';" /> <noscript><link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-slds-1.4.min.css" type="text/css" media="all" /></noscript> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-popup-1.1.min.css" type="text/css" media="print" onload="this.media='all';" onerror="this.loaderr='y';" /> <noscript><link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-popup-1.1.min.css" type="text/css" media="all" /></noscript> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-forms-1.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-zoom-2.0.min.css" type="text/css" media="print" onload="this.media='all';" onerror="this.loaderr='y';" /> <noscript><link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-zoom-2.0.min.css" type="text/css" media="all" /></noscript> <link rel="stylesheet" type="text/css" href="https://ws.tildacdn.com/project1006203/custom.css?t=1772097573"> <script nomodule src="https://static.tildacdn.com/js/tilda-polyfill-1.0.min.js" charset="utf-8"></script> <script type="text/javascript">function t_onReady(func) {if(document.readyState!='loading') {func();} else {document.addEventListener('DOMContentLoaded',func);}}
function t_onFuncLoad(funcName,okFunc,time) {if(typeof window[funcName]==='function') {okFunc();} else {setTimeout(function() {t_onFuncLoad(funcName,okFunc,time);},(time||100));}}function t396_initialScale(t){var e=document.getElementById("rec"+t);if(e){var i=e.querySelector(".t396__artboard");if(i){window.tn_scale_initial_window_width||(window.tn_scale_initial_window_width=document.documentElement.clientWidth);var a=window.tn_scale_initial_window_width,r=[],n,l=i.getAttribute("data-artboard-screens");if(l){l=l.split(",");for(var o=0;o<l.length;o++)r[o]=parseInt(l[o],10)}else r=[320,480,640,960,1200];for(var o=0;o<r.length;o++){var d=r[o];a>=d&&(n=d)}var _="edit"===window.allrecords.getAttribute("data-tilda-mode"),c="center"===t396_getFieldValue(i,"valign",n,r),s="grid"===t396_getFieldValue(i,"upscale",n,r),w=t396_getFieldValue(i,"height_vh",n,r),g=t396_getFieldValue(i,"height",n,r),u=!!window.opr&&!!window.opr.addons||!!window.opera||-1!==navigator.userAgent.indexOf(" OPR/");if(!_&&c&&!s&&!w&&g&&!u){var h=parseFloat((a/n).toFixed(3)),f=[i,i.querySelector(".t396__carrier"),i.querySelector(".t396__filter")],v=Math.floor(parseInt(g,10)*h)+"px",p;i.style.setProperty("--initial-scale-height",v);for(var o=0;o<f.length;o++)f[o].style.setProperty("height","var(--initial-scale-height)");t396_scaleInitial__getElementsToScale(i).forEach((function(t){t.style.zoom=h}))}}}}function t396_scaleInitial__getElementsToScale(t){return t?Array.prototype.slice.call(t.children).filter((function(t){return t&&(t.classList.contains("t396__elem")||t.classList.contains("t396__group"))})):[]}function t396_getFieldValue(t,e,i,a){var r,n=a[a.length-1];if(!(r=i===n?t.getAttribute("data-artboard-"+e):t.getAttribute("data-artboard-"+e+"-res-"+i)))for(var l=0;l<a.length;l++){var o=a[l];if(!(o<=i)&&(r=o===n?t.getAttribute("data-artboard-"+e):t.getAttribute("data-artboard-"+e+"-res-"+o)))break}return r}window.TN_SCALE_INITIAL_VER="1.0",window.tn_scale_initial_window_width=null;</script> <script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js" charset="utf-8" onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-scripts-3.0.min.js" charset="utf-8" defer onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/ws/project1006203/tilda-blocks-page9171135.min.js?t=1772097573" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-lazyload-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-animation-2.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-cover-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/hammer.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-slds-1.4.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-vote-1.1.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zero-1.1.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-popup-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-forms-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zero-forms-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zoom-2.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zero-scale-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-events-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <!-- nominify begin --><script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Курс геймдев",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": 5.0,
"ratingCount": 3719,
"reviewCount": 3828
}
}
</script> <script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "XYZ",
"item": "https://www.school-xyz.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Курсы",
"item": "https://www.school-xyz.com/courses"
},
{
"@type": "ListItem",
"position": 3,
"name": "💥Скидки до 50%",
"item": "https://www.school-xyz.com/courses#all"
}
]
}
</script> <script>
// скрипт для стилизации попапов с работами студентов при переходе по прямой ссылке на этот попап
if (window.location.pathname.includes('/tpost')) {
$('head').append('<link rel="stylesheet" href="https://landing-cdn.school-xyz.com/tpostTildaStyle.css?v=1" type="text/css">');
}
</script> <script>
document.addEventListener('DOMContentLoaded', function() {
var allRec = document.getElementById('allrecords');
if (allRec) allRec.setAttribute('data-fb-event', 'nosend');
});
</script> <script type="text/javascript" id="advcakeAsync">
(function (a) {
var b = a.createElement("script");
b.async = 1;
b.src = "//0gs25f.ru/";
a=a.getElementsByTagName("script")[0]; a.parentNode.insertBefore(b,a)
})(document);
</script> <!-- <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/promosTildaScript.js?v=4"></script> --> <!-- отвечает за работу промобара --> <!-- <link rel="stylesheet" href="https://learn.school-xyz.com/tilda-static/public/promosTildaStyle.css?v=7"> --> <!-- стили для промобара --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/saveUrlGetParamsTildaScript.js"></script> <!-- <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/formsSubmittionTildaScript.js"></script> --> <!-- что-то про регистрацию на интро курсы --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/platformDataAutoFillTildaScript.js?v=8"></script> <!-- автоматизация цен, рассрочка, даты, скидка... --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/preValidatePhoneTildaScript.js"></script> <!-- валидация телефонного номера для любых форм на страницах --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/formsAutoFillTildaScript.js"></script> <!-- автозаполнение форм, только имя и почта --> <script type="text/javascript" src="https://learn.school-xyz.com/tilda-static/public/formValidateYmClientTildaScript.js"></script> <!-- модуль CPA-интеграций https://t.me/dmitmix --> <script>
const script = document.createElement('script');
script.src = `https://landing-cdn.school-xyz.com/js/xyzCpa.js?v=${Date.now()}`;
document.head.appendChild(script);
</script> <!-- Solo Start --> <script src="https://sologpt.ru/xyz_integration/sologpt.iife.js" defer></script> <!-- Solo End --> <!-- Carrot quest BEGIN --> <script type="text/javascript">
!function(){function t(t,e){return function(){window.carrotquestasync.push(t,arguments)}}if("undefined"==typeof carrotquest){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.carrotquest.app/api.min.js",document.getElementsByTagName("head")[0].appendChild(e),window.carrotquest={},window.carrotquestasync=[],carrotquest.settings={};for(var n=["connect","track","identify","auth","onReady","addCallback","removeCallback","trackMessageInteraction"],a=0;a<n.length;a++)carrotquest[n[a]]=t(n[a])}}(),carrotquest.connect("68058-4eec889da0f5c5a357581273a3");
</script> <!-- Carrot quest END --> <!-- UE admin BEGIN --> <link rel="stylesheet" href="https://tilda.ultimate.education/styles.css"> <script type="text/javascript" src="https://tilda.ultimate.education/index.js" apiUrl="https://product.it.ultimate.education" id="replacer" school="XYZ" currency="RUB" apiVersion="v3"></script> <!-- UE admin END --> <script>
/* привязка виджета чата к скролу, чтобы не было наложения с промобаром */
function findChatWidget() {
let chatWidget = $('#carrotquest-messenger-collapsed-container');
let promoBar = document.querySelector('.uc-promobar');
if (chatWidget.length == 1 && promoBar !== null) {
console.log('виджет чата и промобар найдены!');
if (promoBar.clientHeight != 0) {
let promobarHeight = promoBar.clientHeight + 8;
console.log('Высота промобара: ' + promobarHeight);
document.querySelector('.t-body').style.setProperty('--dynamic-bottom', ' ' + promobarHeight + 'px');
$('.promobar__hide-btn').on('click', function() {
$('.t-body').addClass('hide-promobar');
});
let scrolledAmo = $(document).scrollTop();
let bodyHeightAmo = $(document).height() - ($(window).height() + 250);
if ( scrolledAmo > 250 && scrolledAmo < bodyHeightAmo ) {
$('.t-body').addClass('show-promobar');
} else {
$('.t-body').removeClass('show-promobar');
}
$(document).scroll(function() {
let scrolledAmo = $(document).scrollTop();
let bodyHeightAmo = $(document).height() - ($(window).height() + 250);
if ( scrolledAmo > 250 && scrolledAmo < bodyHeightAmo ) {
$('.t-body').addClass('show-promobar');
} else {
$('.t-body').removeClass('show-promobar');
}
});
}
} else {
setTimeout(function() {
console.log('виджет чата и/или промобар не найдены');
findChatWidget();
}, 1000);
}
}
findChatWidget();
/* end привязка виджета чата к скролу, чтобы не было наложения с промобаром */
</script> <!-- Pixel victorycorp --> <script type="text/javascript">
(function (d, w) {
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "https://victorycorp.ru/index.php?ref="+d.referrer+"&page=" + encodeURIComponent(w.location.href);
n.parentNode.insertBefore(s, n);
})(document, window);
</script> <!-- /Pixel victorycorp --><!-- nominify end --><script type="text/javascript">window.dataLayer=window.dataLayer||[];</script> <!-- Google Tag Manager --> <script type="text/javascript">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-KTCCH4H');</script> <!-- End Google Tag Manager --> <script type="text/javascript">(function() {if((/bot|google|yandex|baidu|bing|msn|duckduckbot|teoma|slurp|crawler|spider|robot|crawling|facebook/i.test(navigator.userAgent))===false&&typeof(sessionStorage)!='undefined'&&sessionStorage.getItem('visited')!=='y'&&document.visibilityState){var style=document.createElement('style');style.type='text/css';style.innerHTML='@media screen and (min-width: 980px) {.t-records {opacity: 0;}.t-records_animated {-webkit-transition: opacity ease-in-out .2s;-moz-transition: opacity ease-in-out .2s;-o-transition: opacity ease-in-out .2s;transition: opacity ease-in-out .2s;}.t-records.t-records_visible {opacity: 1;}}';document.getElementsByTagName('head')[0].appendChild(style);function t_setvisRecs(){var alr=document.querySelectorAll('.t-records');Array.prototype.forEach.call(alr,function(el) {el.classList.add("t-records_animated");});setTimeout(function() {Array.prototype.forEach.call(alr,function(el) {el.classList.add("t-records_visible");});sessionStorage.setItem("visited","y");},400);}
document.addEventListener('DOMContentLoaded',t_setvisRecs);}})();</script></head> <body class="t-body" style="margin:0;"> <!--allrecords--> <div id="allrecords" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="1006203" data-tilda-page-id="9171135" data-tilda-page-alias="blog/pokraska-drafta-tsvetom" data-tilda-formskey="89ebde3c6fe46b219c249763fe551eda" data-tilda-stat-scroll="yes" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes" data-tilda-ts="y" data-tilda-project-country="RU"> <!--header--> <header id="t-header" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="1006203" data-tilda-page-id="20568317" data-tilda-formskey="89ebde3c6fe46b219c249763fe551eda" data-tilda-stat-scroll="yes" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes" data-tilda-ts="y" data-tilda-project-country="RU"> <div id="rec1229679181" class="r t-rec" style=" " data-animationappear="off" data-record-type="121" data-alias-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- НОВЫЙ ХЕДЕР от 15.08.25 --> <!-- 17.09.25 замена всех иконок и картинки в блоке с тестом. Удаление пункта меню Вебинары --> <!-- 19.12.25 заменил пункт меню Бесплатные курсы на Вводный урок с консультантом --> <div class="header__overlay" style="display: none"></div> <header class="header__container"> <div class="header__wrapper"> <a href="/" class="header__logo"> <img class="header__logo_dark" src="https://static.tildacdn.com/tild3538-3936-4030-a562-643962313938/Logo-dark.svg" alt="XYZ School logo"> </a> <nav class="header__items-container"> <ul class="header__items-wrapper"> <li class="header__item header__item-all-courses"> <div class="header__item-link">Все курсы</div> </li> <li class="header__item"> <a href="https://www.school-xyz.com/trial-lesson" class="header__item-link">Вводный урок с консультантом</a> </li> </ul> <a href="https://learn.school-xyz.com/" target="_blank" class="header__members-btn">Личный кабинет</a> </nav> <div class="menu burger-btn"> <div class="icon-left"></div> <div class="icon-right"></div> </div> </div> <div class="menu__wrapper"> <div class="menu-left"> <nav class="menu-left__course-direction"> <ul class="menu-left__course-direction-list"> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/courses" class="menu-left__course-direction-link" data-direction-name="all-courses"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild3434-6264-4637-a535-373532313833/Frame_2087329259_1.jpg" alt="Иконка направления Все курсы"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Все курсы</div> <div class="menu-left__course-direction-quontity-courses">37 курсов</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/3d-modelirovanie" class="menu-left__course-direction-link" data-direction-name="3d"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild6632-3831-4331-a264-636330373331/3D-_1.jpg" alt="Иконка направления 3D-моделирование"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">3D-моделирование</div> <div class="menu-left__course-direction-quontity-courses">15 курсов</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/2d-illyustraciya" class="menu-left__course-direction-link" data-direction-name="2d"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild3830-3537-4234-b833-633466333735/2D-_1.jpg" alt="Иконка направления 2D-иллюстрация"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">2D-иллюстрация</div> <div class="menu-left__course-direction-quontity-courses">8 курсов</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/geymdizayn" class="menu-left__course-direction-link" data-direction-name="gamedesign"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild3461-3239-4635-a138-383032306664/gamedesign_1.jpg" alt="Иконка направления Геймдизайн"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Геймдизайн</div> <div class="menu-left__course-direction-quontity-courses">4 курса</div> </div> </a> </li> </ul> <ul class="menu-left__course-direction-list"> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/programmirovanie" class="menu-left__course-direction-link" data-direction-name="gamecode"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild6533-3234-4231-a361-356136613038/_1.jpg" alt="Иконка направления Программирование"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Программирование</div> <div class="menu-left__course-direction-quontity-courses">8 курсов</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/video-i-speceffekty" class="menu-left__course-direction-link" data-direction-name="vfx"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild6562-3931-4937-b035-363239373230/___1.jpg" alt="Иконка направления Видео и спецэффекты"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Видео и спецэффекты</div> <div class="menu-left__course-direction-quontity-courses">3 курса</div> </div> </a> </li> <li class="menu-left__course-direction-item"> <a href="https://school-xyz.com/menedzhement" class="menu-left__course-direction-link" data-direction-name="business"> <img class="menu-left__course-direction-icon" src="https://static.tildacdn.com/tild3165-6365-4236-b463-643730363733/management_1.jpg" alt="Иконка направления Менеджмент"> <div class="menu-left__course-direction-text"> <div class="menu-left__course-direction-title">Менеджмент</div> <div class="menu-left__course-direction-quontity-courses">1 курс</div> </div> </a> </li> </ul> </nav> </div> <div class="menu-right"> <div class="menu-right__test-tags-wrap"> <div class="menu-right__test-tag">Тест</div> <div class="menu-right__test-tag">5 минут</div> </div> <h3 class="menu-right__test-heading">Какая профессия тебе подходит?</h3> <a href="https://www.school-xyz.com/proforientaciya" class="menu-right__test-button">Пройти тест</a> </div> <div class="menu-left__bottom-info"> <ul class="menu-left__bottom-info-list"> <li class="menu-left__bottom-info-link"> <a href="https://www.school-xyz.com/trial-lesson" target="_blank">Вводный урок с консультантом</a> </li> </ul> <a href="https://learn.school-xyz.com/" target="_blank" class="header__members-btn">Личный кабинет</a> </div> </div> </header> <style>
:root header {
font-family: 'BebasRoboto';
--color-bg: #17171b;
--color-bg-menu-open: #23232A;
--color-text: #fff;
--color-bg-lk-btn: #2b2b34;
--color-text-opacity: rgb(206 206 222 / 50%);
--color-accent: #8e8eff;
--color-black: #17171b;
--color-border: #373742;
--color-burger-line: #fff;
--color-burger-bg: #22222e;
--color-button: #6060ff;
}
#allrecords header ul {
padding-left: 0;
margin-bottom: 0;
}
#allrecords header a {
color: inherit;
}
.header__overlay {
position: fixed;
inset: 0;
cursor: pointer;
z-index: 998;
background: rgb(0 0 0 / 50%);
-webkit-tap-highlight-color: transparent;
}
/* Бургер меню */
.burger-btn {
position: relative;
flex-shrink: 0;
width: 40px;
height: 40px;
top: 0;
left: 0;
transition-duration: 0.5s;
border-radius: 22px;
cursor: pointer;
transform: scale(0.8);
visibility: visible;
opacity: 1;
}
.burger-btn.open {
background: var(--color-burger-bg);
visibility: visible;
opacity: 1;
}
.burger-btn .icon-left {
transition-duration: 0.5s;
position: absolute;
width: 12px;
height: 2px;
top: 19px;
background-color: var(--color-burger-line);
left: 9px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.burger-btn.open .icon-left {
transition-duration: 0.3s;
background: transparent;
}
.burger-btn .icon-left:before {
transition-duration: 0.3s;
position: absolute;
width: 12px;
height: 2px;
background-color: var(--color-burger-line);
content: "";
top: -8px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.burger-btn.open .icon-left:before {
transform: rotateZ(45deg) scaleX(1.1) translate(2.5px, 2px);
}
.burger-btn .icon-left:after {
transition-duration: 0.3s;
position: absolute;
width: 12px;
height: 2px;
background-color: var(--color-burger-line);
content: "";
top: 8px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.burger-btn.open .icon-left:after {
transform: rotateZ(-45deg) scaleX(1.1) translate(2.5px, -2px);
}
.burger-btn .icon-right {
transition-duration: 0.3s;
position: absolute;
width: 12px;
height: 2px;
top: 19px;
background-color: var(--color-burger-line);
left: 21px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.burger-btn.open .icon-right {
transition-duration: 0.3s;
background: transparent;
}
.burger-btn .icon-right:before {
transition-duration: 0.3s;
position: absolute;
width: 12px;
height: 2px;
background-color: var(--color-burger-line);
content: "";
top: -8px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.burger-btn.open .icon-right:before {
transform: rotateZ(-45deg) scaleX(1.1) translate(-3.5px, 1px);
}
.burger-btn .icon-right:after {
transition-duration: 0.3s;
position: absolute;
width: 12px;
height: 2px;
background-color: var(--color-burger-line);
content: "";
top: 8px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.burger-btn.open .icon-right:after {
transform: rotateZ(45deg) scaleX(1.1) translate(-3.5px, -1px);
}
/* Конец бургер меню */
header.header__container {
position: fixed;
background: transparent;
width: 100%;
z-index: 999;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
transition: border-radius 0.3s ease, background 0.3s ease 0.3s, transform 0.3s ease;
overflow: hidden;
box-sizing: border-box;
}
header.header__container.open {
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background: var(--color-bg-menu-open);
transition: border-radius 0.3s ease, background 0.3s ease 0s, transform 0.3s ease;
}
header.header__container.main-header--bg_scroll {
background: var(--color-bg);
transition: border-radius 0.3s ease, background 0.3s ease 0s, transform 0.3s ease;
}
header.header__container.main-header--bg_scroll.open {
background: var(--color-bg-menu-open);
}
header.header__container.out {
transform: translateY(-100%);
}
header.header__container.open.out {
transform: none;
}
header a {
color: inherit;
text-decoration: none;
}
header ul {
list-style: none;
}
.header__wrapper {
position: relative;
display: flex;
max-width: 1160px;
margin: 0 auto;
padding: 20px 0;
}
.header__wrapper:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
background: var(--color-border);
opacity: 0;
}
.header__container.open .header__wrapper:after {
opacity: 1;
transition: .3s ease;
}
a.header__logo {
display: flex;
margin-right: 48px;
}
.header__items-container {
display: flex;
justify-content: space-between;
width: 100%;
margin-right: 10px;
}
ul.header__items-wrapper {
display: flex;
align-items: center;
column-gap: 40px;
}
li.header__item {
position: relative;
font-size: 14px;
font-weight: 400;
line-height: 28px;
color: var(--color-text);
transition: .3s ease;
}
li.header__item.header__item-all-courses_open {
color: var(--color-accent);
}
a.header__item-link, .header__item-link {
display: block;
}
ul.header__items-wrapper li.header__item-all-courses {
cursor: pointer;
}
ul.header__items-wrapper li.header__item-all-courses .header__item-link::after {
content: '';
display: inline-block;
position: relative;
vertical-align: middle;
width: 6px;
height: 6px;
margin-left: 10px;
transition: .3s ease;
border-width: 0 0 1.5px 1.5px;
border-color: var(--color-text);
border-style: solid;
transform: rotateZ(315deg) translate(1px, -2px);
}
ul.header__items-wrapper li.header__item-all-courses_open .header__item-link::after {
transform: rotateZ(135deg) translate(1px, -1px);
border-color: var(--color-accent);
}
#allrecords a.header__members-btn {
display: flex;
align-items: center;
width: fit-content;
font-size: 14px;
font-weight: 400;
line-height: 24px;
background: var(--color-bg-lk-btn);
border: 0;
border-radius: 30px;
padding: 8px 24px;
color: var(--color-text);
text-decoration: none;
transition: .2s ease;
}
#allrecords .header__container.open .header__members-btn {
background: var(--color-bg-lk-btn);
}
#allrecords a.header__members-btn:hover {
background: var(--color-button);
color: #fff;
}
#allrecords .header__container.open .header__members-btn:hover {
background: var(--color-button);
}
.menu__wrapper {
display: flex;
column-gap: 16px;
max-width: 1160px;
margin: 0 auto;
opacity: 0;
visibility: hidden;
max-height: 0;
padding: 0;
transition: .3s ease;
overflow: hidden;
box-sizing: border-box;
}
.menu__wrapper.menu__wrapper_active {
opacity: 1;
visibility: visible;
max-height: 100vh;
padding: 32px 0;
}
.menu-left {
width: 100%;
max-width: 572px;
}
nav.menu-left__course-direction {
display: flex;
column-gap: 16px;
}
ul.menu-left__course-direction-list {
display: flex;
flex-direction: column;
row-gap: 16px;
width: 100%;
}
li.menu-left__course-direction-item {
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: var(--color-text);
}
a.menu-left__course-direction-link {
display: flex;
flex-wrap: wrap;
column-gap: 12px;
height: 64px;
padding: 8px;
border-radius: 16px;
transition: .2s ease;
box-sizing: border-box;
}
@media (hover: hover) {
#allrecords a.menu-left__course-direction-link:hover {
background-color: #2b2b35;
}
}
.menu-left__course-direction-icon {
height: 100%;
border-radius: 8px;
}
.menu-left__course-direction-quontity-courses {
font-size: 14px;
color: var(--color-text-opacity);
}
.menu-left__bottom-info {
width: 100%;
}
ul.menu-left__bottom-info-list {
display: flex;
flex-direction: row;
column-gap: 30px;
}
#allrecords ul.menu-left__bottom-info-list {
margin-bottom: 0;
}
li.menu-left__bottom-info-link {
font-size: 14px;
line-height: 30px;
color: var(--color-text);
}
li.menu-left__bottom-info-link a {
transition: .2s ease;
}
#allrecords li.menu-left__bottom-info-link a:hover {
color: var(--color-accent);
}
#allrecords .menu-left__bottom-info a.header__members-btn {
display: none;
}
.menu-right {
position: relative;
display: flex;
flex-direction: column;
row-gap: 16px;
width: 100%;
max-width: 572px;
background-color: #2b2b35;
background-image: url(https://static.tildacdn.com/tild3264-3531-4533-b066-653232386336/Desktop.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
padding: 24px;
border-radius: 16px;
color: var(--color-text);
box-sizing: border-box;
}
.menu-right__test-tags-wrap {
display: flex;
column-gap: 8px;
}
.menu-right__test-tag {
font-size: 12px;
line-height: 1.5;
font-weight: 400;
padding: 4px 12px;
background: #3b3b47;
border-radius: 30px;
color: var(--color-text);
}
.menu-right__test-heading {
font-size: 20px;
font-weight: 600;
line-height: 1.3;
color: var(--color-text);
width: 184px;
}
.menu-right__test-button {
width: fit-content;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
background: var(--color-button);
padding: 10px 24px;
margin-top: auto;
border-radius: 50px;
transition: .2s ease;
}
#allrecords .menu-right__test-button:hover {
background: var(--color-text);
color: var(--color-black);
}
@media screen and (min-width: 1200px) {
.header__items-container {
margin-right: 0;
}
.burger-btn {
display: none;
}
li.header__item:hover {
color: var(--color-accent);
}
ul.header__items-wrapper li.header__item-all-courses:hover .header__item-link::after {
border-color: var(--color-accent);
}
}
@media screen and (min-width: 960px) {
.menu-left__bottom-info {
display: none;
}
}
@media (min-width: 960px) and (max-width: 1199px) {
.menu-right {
background-image: url(https://static.tildacdn.com/tild6438-6533-4036-a435-623266623239/Tablet_Horizontal.jpg);
}
}
@media screen and (max-width: 1199px) {
.t-body.open-menu {
height: 100vh;
min-height: 100vh;
overflow: hidden;
}
header.header__container.open {
border-bottom-left-radius: 32px;
border-bottom-right-radius: 32px;
}
.header__wrapper {
max-width: 940px;
padding: 12px 0;
}
.header__wrapper:after {
width: 100%;
}
.menu__wrapper {
max-width: 940px;
padding: 0;
}
.menu-left {
max-width: 544px;
}
.menu-left__course-direction-link {
display: block;
width: fit-content;
}
.menu-right {
max-width: 380px;
}
}
@media screen and (max-width: 959px) {
header.header__container {
position: fixed;
overflow: auto;
}
header.header__container.open {
height: fit-content;
max-height: 100%;
/*background: var(--color-bg);*/
transition: border-radius 0.3s ease, background 0s ease 0s, transform 0.3s ease;
}
.header__wrapper {
position: sticky;
top: 0;
justify-content: space-between;
max-width: 620px;
padding: 12px 0;
/*background: var(--color-bg);*/
transition: .3s ease;
z-index: 99;
box-sizing: border-box;
}
.header__wrapper:after {
width: 100%;
}
header.header__container.open .header__wrapper {
background: var(--color-bg-menu-open);
/*transition: none;*/
}
nav.header__items-container {
justify-content: end;
}
.header__items-container .header__items-wrapper {
display: none;
}
.menu__wrapper {
flex-wrap: wrap;
max-width: 620px;
padding: 0;
}
.menu__wrapper.menu__wrapper_active {
max-height: fit-content;
padding: 20px 0 32px;
row-gap: 24px;
}
.menu-left {
max-width: 100%;
height: max-content;
}
ul.menu-left__course-direction-list {
width: 50%;
}
.menu-left__course-direction-link {
width: 100%;
}
.menu-left__bottom-info {
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
row-gap: 32px;
}
ul.menu-left__bottom-info-list {
row-gap: 8px;
}
#allrecords ul.menu-left__bottom-info-list {
align-items: start;
flex-direction: column;
}
.menu-right {
max-width: 100%;
height: 292px;
margin-bottom: 8px;
/*background-position-y: -134px;*/
}
}
@media screen and (max-width: 639px) {
header.header__container {
height: 58px;
}
header.header__container.open {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
height: 100%;
}
.header__wrapper {
padding: 9px 10px;
}
.header__logo img {
width: 28px;
}
.header__wrapper:after {
width: calc(100% - 20px);
}
.header__items-container {
display: none;
}
.menu__wrapper {
align-content: flex-start;
padding: 0 10px;
}
.menu__wrapper.menu__wrapper_active {
padding: 16px 10px 48px;
}
nav.menu-left__course-direction {
flex-direction: column;
row-gap: 8px;
}
ul.menu-left__course-direction-list {
width: 100%;
row-gap: 8px;
}
li.menu-left__course-direction-item {
font-size: 14px;
}
.menu-left__bottom-info {
row-gap: 16px;
}
#allrecords .menu-left__bottom-info a.header__members-btn {
display: block;
}
.menu-right {
height: 232px;
padding: 16px;
margin-bottom: 0;
row-gap: 12px;
/*background-position: -106px center;*/
/*background-size: 138%;*/
background-image: url(https://static.tildacdn.com/tild3930-6233-4836-b332-636433393662/Mobile.jpg);
}
.menu-right__test-tags-wrap {
column-gap: 4px;
}
.menu-right__test-tag {
font-size: 10px;
line-height: 1.6;
}
.menu-right__test-heading {
font-size: 14px;
width: 134px;
}
.menu-right__test-button {
font-size: 14px;
line-height: 1.2;
}
}
</style> <script>
document.addEventListener('DOMContentLoaded', function() {
// добавляем фон хедеру, если страница прокручена больше чем на 50 пикселей
setTimeout(function() {
if (document.documentElement.scrollTop > 50) {
$('.header__container').addClass('main-header--bg_scroll');
}
}, 2000);
$(window).scroll(function() {
let offsetTopByHeader = 50;
let classBgHeader = 'main-header--bg_scroll';
let header = $('.header__container');
if ($(this).scrollTop() >= offsetTopByHeader) {
header.addClass(classBgHeader);
} else {
header.removeClass(classBgHeader);
}
});
// скрываем/показываем хедер по скролу
const header = $('.header__container');
let scrollPrev = 0;
$(window).scroll(function() {
const scrolled = $(window).scrollTop();
if (scrolled > 550 && scrolled > scrollPrev) {
header.addClass('out');
} else {
header.removeClass('out');
}
scrollPrev = scrolled;
});
$('.menu-left__bottom-info-link a').click(function() {
$('.menu').trigger('click');
});
if (document.documentElement.clientWidth >= 1200) {
$('.header__item-all-courses').mouseenter(function() {
$('.header__item-all-courses').addClass('header__item-all-courses_open');
$('.menu__wrapper').addClass('menu__wrapper_active');
$('.header__overlay').fadeIn('linear');
$('.menu').addClass('open');
$('.header__container').addClass('open');
$('.t-body').addClass('open-menu');
});
$('.header__container').mouseleave(function() {
$('.header__item-all-courses').removeClass('header__item-all-courses_open');
$('.menu__wrapper').removeClass('menu__wrapper_active');
$('.header__overlay').fadeOut('linear');
$('.menu').removeClass('open');
$('.header__container').removeClass('open');
$('.t-body').removeClass('open-menu');
});
}
if (document.documentElement.clientWidth < 1200) {
$('.header__item-all-courses, .header__overlay, .menu').click(function() {
$('.header__item-all-courses').toggleClass('header__item-all-courses_open');
$('.menu__wrapper').toggleClass('menu__wrapper_active');
$('.header__overlay').fadeToggle('linear');
$('.menu').toggleClass('open');
$('.header__container').toggleClass('open');
$('.t-body').toggleClass('open-menu');
});
}
});
</script> <!-- nominify end --> </div> </div> </div> </div> </header> <!--/header--> <div id="rec158144211" class="r t-rec" style=" " data-animationappear="off" data-record-type="18"> <!-- cover --> <div class="t-cover" id="recorddiv158144211"bgimgfield="img"style="height:130vh;background-image:url('https://thb.tildacdn.com/tild3662-6363-4530-a362-393335396164/-/resize/20x/cv.jpg');"> <div class="t-cover__carrier" id="coverCarry158144211"data-content-cover-id="158144211"data-content-cover-bg="https://static.tildacdn.com/tild3662-6363-4530-a362-393335396164/cv.jpg"data-display-changed="true"data-content-cover-height="130vh"data-content-cover-parallax="fixed"data-content-use-image-for-mobile-cover=""style="height:130vh; "itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="image" content="https://static.tildacdn.com/tild3662-6363-4530-a362-393335396164/cv.jpg"></div> <div class="t-cover__filter" style="height:130vh;background-image: linear-gradient(to bottom, rgba(0,0,0,0.60), rgba(0,0,0,0.60));"></div> <div class="t-container"> <div class="t-col t-col_12 "> <div class="t-cover__wrapper t-valign_middle" style="height:130vh;"> <div class="t001 t-align_center"> <div class="t001__wrapper" data-hook-content="covercontent"> <div class="t001__uptitle t-uptitle t-uptitle_sm" field="subtitle">Блог xyz school</div> <h1 class="t001__title t-title t-title_xl" field="title">Покраска драфта цветом <br /><br /></h1> <span class="space"></span> </div> </div> </div> </div> </div> <!-- arrow --> <div class="t-cover__arrow"><div class="t-cover__arrow-wrapper t-cover__arrow-wrapper_animated"><div class="t-cover__arrow_mobile"><svg role="presentation" class="t-cover__arrow-svg" style="fill:#ffffff;" x="0px" y="0px" width="38.417px" height="18.592px" viewBox="0 0 38.417 18.592" style="enable-background:new 0 0 38.417 18.592;"><g><path d="M19.208,18.592c-0.241,0-0.483-0.087-0.673-0.261L0.327,1.74c-0.408-0.372-0.438-1.004-0.066-1.413c0.372-0.409,1.004-0.439,1.413-0.066L19.208,16.24L36.743,0.261c0.411-0.372,1.042-0.342,1.413,0.066c0.372,0.408,0.343,1.041-0.065,1.413L19.881,18.332C19.691,18.505,19.449,18.592,19.208,18.592z"/></g></svg></div></div></div> <!-- arrow --> </div> <style> #rec158144211 .t001__uptitle{text-transform:uppercase;}</style> </div> <div id="rec158144213" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> И почему нужно уметь её делать. <br /><br />Куратор курса DRAFT PUNK Эдуарт Витер написал статью об основных принципах покраски драфта — а заодно объяснил, как человеческий глаз воспринимает цвет. <br /> Пригодится всем, кто занимается 3D — удачно покрашенная модель всегда смотрится выигрышнее «серой». <br /><br /><strong></strong><span style="font-size: 28px;"><strong>Зачем красить драфт </strong><br /></span><br /> Покраска драфта позволяет на раннем этапе отработать цветовые решения и подобрать палитру — как для одиночной модели, так и для целой локации. И всё это — с помощью простых инструментов. Бывает очень обидно после часов, а возможно и дней работы осознать, что твоя текстура просто не подходит, цвета не сочетаются, и надо всё переделывать. <br /><br /> Драфт может быть самобытным арт-объектом, а не просто начальной стадией модели. Объектом, который не стыдно оставить в своем портфолио или поделиться с друзьями. Выразительный силуэт, интересные средние формы и классная покраска могут показать, что вы не только умеете хорошо моделить, но и понимаете цвет, — а это не менее важный навык. <br /><br /> При грамотном подходе получаются очень выразительные объекты и сцены: <br /></div></div> </div> </div> </div> <style> #rec158144213 .t-text{color:#ffffff;}</style> </div> <div id="rec158144214" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6536-6230-4336-b232-313532623139/1.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6536-6230-4336-b232-313532623139/-/empty/1.jpg" data-original="https://static.tildacdn.com/tild6536-6230-4336-b232-313532623139/1.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6536-6230-4336-b232-313532623139/1.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><a href="https://sketchfab.com/3d-models/japanese-restaurant-9b3c5076541148fca229edeb1a1b07ef" target="_blank" style="">Работа </a>студентки курса DRAFT PUNK — annzep</div> </div> </div> </div> <style> #rec158144214 .t107__title{color:#999999;}</style> </div> <div id="rec158145740" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3566-3336-4462-a239-363331613065/2.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3566-3336-4462-a239-363331613065/-/empty/2.jpg" data-original="https://static.tildacdn.com/tild3566-3336-4462-a239-363331613065/2.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3566-3336-4462-a239-363331613065/2.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><a href="https://sketchfab.com/3d-models/color-draft-74c085a8ccd5491eb4120cec7c13500b" target="_blank" style="">Работа </a>студентки курса DRAFT PUNK — annzep <br /></div> </div> </div> </div> <style> #rec158145740 .t107__title{color:#999999;}</style> </div> <div id="rec158145868" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6535-3636-4466-b265-313565643837/3.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6535-3636-4466-b265-313565643837/-/empty/3.jpg" data-original="https://static.tildacdn.com/tild6535-3636-4466-b265-313565643837/3.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6535-3636-4466-b265-313565643837/3.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><a href="https://sketchfab.com/3d-models/5-items-homework4-5a42ff5c67da445082c4fe38fbc6f712" target="_blank" style="">Работа </a>студентки курса DRAFT PUNK — nahem.san <br /></div> </div> </div> </div> <style> #rec158145868 .t107__title{color:#999999;}</style> </div> <div id="rec158144215" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="text-align:left;color:#999999;" data-customstyle="yes"> Так что если вы отправите клиенту, лиду или арт-директору на рассмотрение драфт не в сером материале, а с качественной покраской, скорее всего, он это оценит. К тому же вы проверите, насколько сходятся ваши вкусы и планы относительно этой модели. <br /><br /> Покраска драфтов позволяет новичкам понять цвет, попробовать разные палитры, да и вообще определиться, что же такое «палитра». И всё это при помощи самых простых инструментов: без UV, новых программ и сложного текстурирования, — всё в одном 3D-редакторе. <br /><br /> <strong><span data-redactor-tag="span" style="font-size: 28px;">Про покраску <br /></span></strong><br /> Главные элементы хорошего драфта — это качественно подобранные цвета (палитра) и геометрия, обозначенная тоном. <br /><br /> Начнём с последнего. Наряду со светотенью и перспективой один из важнейших механизмов восприятия — это бинокулярное зрение. Оно работает благодаря сложнейшему физиологическому механизму зрения — фузии (<a href="https://ru.wikipedia.org/wiki/%D0%9B%D0%B0%D1%82%D0%B8%D0%BD%D1%81%D0%BA%D0%B8%D0%B9_%D1%8F%D0%B7%D1%8B%D0%BA" target="_blank">лат.</a> fusio — слияние), то есть слиянию зрительных образов в единое зрительное восприятие. Больше 50% всего восприятия объекта — это как раз бинокулярное зрение. <br /><br /></div></div> </div> </div> </div> <style> #rec158144215 .t-text{color:#ffffff;}</style> </div> <div id="rec158144216" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3231-6566-4631-a563-313735366432/4.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3231-6566-4631-a563-313735366432/-/empty/4.jpg" data-original="https://static.tildacdn.com/tild3231-6566-4631-a563-313735366432/4.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3231-6566-4631-a563-313735366432/4.jpg" alt=""> </div> </div> <style> #rec158144216 .t107__title{color:#999999;}</style> </div> <div id="rec158144217" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Всё, что мы видим на экране монитора — это плоская картинка, на которой бинокулярное зрение не работает (за исключением случаев использования 3D-очков). <br /> </div></div> </div> </div> </div> <style> #rec158144217 .t-text{color:#ffffff;}</style> </div> <div id="rec158144218" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6462-6635-4236-b761-666232313737/5.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6462-6635-4236-b761-666232313737/-/empty/5.jpg" data-original="https://static.tildacdn.com/tild6462-6635-4236-b761-666232313737/5.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6462-6635-4236-b761-666232313737/5.jpg" alt=""> </div> </div> <style> #rec158144218 .t107__title{color:#999999;}</style> </div> <div id="rec158144219" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Поэтому один и тот же объект в живую и на экране будет восприниматься по-разному. Чтобы компенсировать потерю части восприятия при создании компьютерной графики приходится идти на ряд ухищрений. Одно из них — «цветовая модуляция». <br /><br /> Изменяя тон выделяют геометрию и формы внутри силуэта модели. Характерно это как для полноценных текстур, так и для покрашенных драфтов. Далее — несколько работ для примера. <br /><br /> Обратите внимание, как выделены деревья и зверёк. Использован очень скромный набор цветов, но мы отлично считываем как основные объекты, так и настроение с сцены. Эта работа выполнена с применением однотонных тонов — их называют flat color или flat shaiding <br /><br /></div></div> </div> </div> </div> <style> #rec158144219 .t-text{color:#ffffff;}</style> </div> <div id="rec158144220" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6562-3930-4035-b235-383334626430/6.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6562-3930-4035-b235-383334626430/-/empty/6.jpg" data-original="https://static.tildacdn.com/tild6562-3930-4035-b235-383334626430/6.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6562-3930-4035-b235-383334626430/6.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><a href="https://sketchfab.com/3d-models/early-morning-walk-8d71ccce451140eba88d43c5dc237a05" target="_blank" style="">работа </a>Sorin Covor — Early Morning Walk <br /></div> </div> </div> </div> <style> #rec158144220 .t107__title{color:#999999;}</style> </div> <div id="rec158144222" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6631-3762-4136-a162-393163653731/7.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6631-3762-4136-a162-393163653731/-/empty/7.jpg" data-original="https://static.tildacdn.com/tild6631-3762-4136-a162-393163653731/7.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6631-3762-4136-a162-393163653731/7.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><a href="https://sketchfab.com/3d-models/early-morning-walk-8d71ccce451140eba88d43c5dc237a05" target="_blank" style="">работа </a>Sorin Covor — Early Morning Walk <br /></div> </div> </div> </div> <style> #rec158144222 .t107__title{color:#999999;}</style> </div> <div id="rec158144221" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> <strong>Base color (flat color)</strong> — техника, при которой используют только однотонные цвета без градиентных переходов и динамических теней. Также её называют «Плоскостной затушовкой» или «Постоянным затенением». <br /><br /> А вот еще одна работа. В ней формы выделены с помощью градиентных переходов, а объем подчеркивают подкрашенные фаски. Скрины сделаны в режиме base color (без бликов и теней), но мы всё равно отлично считываем объем. <br /><br /></div></div> </div> </div> </div> <style> #rec158144221 .t-text{color:#ffffff;}</style> </div> <div id="rec158144224" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3565-3939-4434-a432-663265623861/8.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3565-3939-4434-a432-663265623861/-/empty/8.jpg" data-original="https://static.tildacdn.com/tild3565-3939-4434-a432-663265623861/8.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3565-3939-4434-a432-663265623861/8.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><a href="https://sketchfab.com/bitgem" target="_blank" style="">BitGem</a> Cemetery Set Update — Proto Series</div> </div> </div> </div> <style> #rec158144224 .t107__title{color:#999999;}</style> </div> <div id="rec158147784" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3864-6630-4635-b239-353539303833/9.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3864-6630-4635-b239-353539303833/-/empty/9.jpg" data-original="https://static.tildacdn.com/tild3864-6630-4635-b239-353539303833/9.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3864-6630-4635-b239-353539303833/9.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><a href="https://sketchfab.com/bitgem" target="_blank" style="">BitGem </a>Cemetery Set Update — Proto Series</div> </div> </div> </div> <style> #rec158147784 .t107__title{color:#999999;}</style> </div> <div id="rec158147823" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3232-3661-4032-b333-616466376632/10.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3232-3661-4032-b333-616466376632/-/empty/10.jpg" data-original="https://static.tildacdn.com/tild3232-3661-4032-b333-616466376632/10.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3232-3661-4032-b333-616466376632/10.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><a href="https://sketchfab.com/bitgem" target="_blank" style="">BitGem </a>Cemetery Set Update — Proto Series</div> </div> </div> </div> <style> #rec158147823 .t107__title{color:#999999;}</style> </div> <div id="rec158144225" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Теперь рассмотрим несколько одинаковых моделей с разной степенью покраски. <br /><br /> По мере выделения геометрии тоном внутренние формы модели становятся всё более четкими и выразительными. <br /><br /></div></div> </div> </div> </div> <style> #rec158144225 .t-text{color:#ffffff;}</style> </div> <div id="rec158144226" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3137-3234-4633-b761-373465326137/11.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3137-3234-4633-b761-373465326137/-/empty/11.jpg" data-original="https://static.tildacdn.com/tild3137-3234-4633-b761-373465326137/11.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3137-3234-4633-b761-373465326137/11.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">Режим final render на scketchfab</div> </div> </div> </div> <style> #rec158144226 .t107__title{color:#999999;}</style> </div> <div id="rec158144227" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Рассмотрим те же модели, но уже в режиме Base color. <br /><br /> <ol> <li> Вариант — робот в сером материале </li> <li> Происходит разбивка на основные цвета, но один жёлтый акцент смотрится неинтересно. </li> <li> На третьем варианте в покраске появляются переходы, модель становятся интереснее за счёт синих осей, а жёлтый глаз поддерживается жёлтым поясом. Добавляется разбиения по тонам для выделения вырезов </li> <li> В итоговой версии появляется детализация тоном. </li></ol></div></div> </div> </div> </div> <style> #rec158144227 .t-text{color:#ffffff;}</style> </div> <div id="rec158144228" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6238-6634-4735-b566-616635303734/12.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6238-6634-4735-b566-616635303734/-/empty/12.jpg" data-original="https://static.tildacdn.com/tild6238-6634-4735-b566-616635303734/12.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6238-6634-4735-b566-616635303734/12.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">Режим Base color на scketchfab</div> </div> </div> </div> <style> #rec158144228 .t107__title{color:#999999;}</style> </div> <div id="rec158144229" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Еще один пример выделения геометрии объекта — вот этот цветок из работы студентки курса <a href="https://www.school-xyz.com/draftpunk">DRAFT PUNK</a> nahem.san.</div></div> </div> </div> </div> <style> #rec158144229 .t-text{color:#ffffff;}</style> </div> <div id="rec158144230" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3461-3163-4065-a163-623862633565/13.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild3461-3163-4065-a163-623862633565/-/empty/13.jpg" data-original="https://static.tildacdn.com/tild3461-3163-4065-a163-623862633565/13.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3461-3163-4065-a163-623862633565/13.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">работа студентки курса DRAFT PUNK — nahem.san, режим Final render <br /></div> </div> </div> </div> <style> #rec158144230 .t107__title{color:#999999;}</style> </div> <div id="rec158149370" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6239-6638-4637-b231-333837313534/14.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild6239-6638-4637-b231-333837313534/-/empty/14.jpg" data-original="https://static.tildacdn.com/tild6239-6638-4637-b231-333837313534/14.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6239-6638-4637-b231-333837313534/14.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">работа студентки курса DRAFT PUNK — nahem.san, режим Final render <br /></div> </div> </div> </div> <style> #rec158149370 .t107__title{color:#999999;}</style> </div> <div id="rec158144231" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">При покраске всегда проверяйте, как ваши цвета выглядят в режиме base color. В режиме рендера, с тенями, бликами, а зачастую и с фильтрами постобработки, часто тяжело понять, что ухудшает выразительность, — плохо подобранные цвета, некорректное освещение или фильтры. <br /><br /> Также не стоит забывать, что ваша модель может быть использована в разных локациях и при разном освещении — особенно если речь о геймдеве. Но base color — ваше основное цветовое решение, — будет продолжать работать даже в очень затемненных/высветленных условиях. На рисунке ниже видно, как меняется восприятие моделей разных версий по мере ухудшения освещения. <br /></div></div> </div> </div> </div> <style> #rec158144231 .t-text{color:#ffffff;}</style> </div> <div id="rec158144232" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3463-6565-4337-b038-353937313832/15.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3463-6565-4337-b038-353937313832/-/empty/15.jpg" data-original="https://static.tildacdn.com/tild3463-6565-4337-b038-353937313832/15.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3463-6565-4337-b038-353937313832/15.jpg" alt=""> </div> </div> <style> #rec158144232 .t107__title{color:#999999;}</style> </div> <div id="rec158149521" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3834-6230-4164-b630-376431376537/16.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3834-6230-4164-b630-376431376537/-/empty/16.jpg" data-original="https://static.tildacdn.com/tild3834-6230-4164-b630-376431376537/16.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3834-6230-4164-b630-376431376537/16.jpg" alt=""> </div> </div> <style> #rec158149521 .t107__title{color:#999999;}</style> </div> <div id="rec158149557" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3831-3538-4136-b539-376561666266/17.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3831-3538-4136-b539-376561666266/-/empty/17.jpg" data-original="https://static.tildacdn.com/tild3831-3538-4136-b539-376561666266/17.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3831-3538-4136-b539-376561666266/17.jpg" alt=""> </div> </div> <style> #rec158149557 .t107__title{color:#999999;}</style> </div> <div id="rec158144233" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Отдельно отмечу тайловые материалы, такие как плитка, кирпич, черепица. При равномерном выделение граней тоном мы получим интересный отдельный элемент (кирпич, камень и т.д.) Но в массиве это не работает и не обеспечивает нужной степени выразительности. Более эффективным приёмом будет выделение отдельных «кирпичей» или «плиток» тайлового материала другим тоном.</div></div> </div> </div> </div> <style> #rec158144233 .t-text{color:#ffffff;}</style> </div> <div id="rec158144234" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6134-3634-4436-b932-333231393763/18.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6134-3634-4436-b932-333231393763/-/empty/18.jpg" data-original="https://static.tildacdn.com/tild6134-3634-4436-b932-333231393763/18.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6134-3634-4436-b932-333231393763/18.jpg" alt=""> </div> </div> <style> #rec158144234 .t107__title{color:#999999;}</style> </div> <div id="rec158144235" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Рассмотрим одну из работ. <br /><br /> </div></div> </div> </div> </div> <style> #rec158144235 .t-text{color:#ffffff;}</style> </div> <div id="rec158144236" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3761-6132-4134-a438-623331623736/19.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3761-6132-4134-a438-623331623736/-/empty/19.jpg" data-original="https://static.tildacdn.com/tild3761-6132-4134-a438-623331623736/19.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3761-6132-4134-a438-623331623736/19.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">работа студентки курса DRAFT PUNK — annzep, режим Final render <br /></div> </div> </div> </div> <style> #rec158144236 .t107__title{color:#999999;}</style> </div> <div id="rec158150050" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3732-3335-4230-b532-376163353434/20.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3732-3335-4230-b532-376163353434/-/empty/20.jpg" data-original="https://static.tildacdn.com/tild3732-3335-4230-b532-376163353434/20.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3732-3335-4230-b532-376163353434/20.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">работа студентки курса DRAFT PUNK — annzep, режим Final render <br /></div> </div> </div> </div> <style> #rec158150050 .t107__title{color:#999999;}</style> </div> <div id="rec158144237" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Подобный приём используется уже очень давно, — например, в отделочных материалах. Как это часто бывает, решение подсказал реальный мир. <br /><br /> Вот пример стандартной черепицы без какой либо разбивки по тону элементов. Смотрится неплохо, но несколько скучно. <br /><br /></div></div> </div> </div> </div> <style> #rec158144237 .t-text{color:#ffffff;}</style> </div> <div id="rec158144238" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3431-6536-4362-a463-393130363933/21.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild3431-6536-4362-a463-393130363933/-/empty/21.jpg" data-original="https://static.tildacdn.com/tild3431-6536-4362-a463-393130363933/21.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3431-6536-4362-a463-393130363933/21.jpg" alt=""> </div> </div> <style> #rec158144238 .t107__title{color:#999999;}</style> </div> <div id="rec158144239" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Но как только мы добавляем разнообразие тона, черепица начинает смотреться совершенно по другому. <br /><br /> </div></div> </div> </div> </div> <style> #rec158144239 .t-text{color:#ffffff;}</style> </div> <div id="rec158144240" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3966-6238-4632-b934-666635333061/22.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3966-6238-4632-b934-666635333061/-/empty/22.jpg" data-original="https://static.tildacdn.com/tild3966-6238-4632-b934-666635333061/22.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3966-6238-4632-b934-666635333061/22.jpg" alt=""> </div> </div> <style> #rec158144240 .t107__title{color:#999999;}</style> </div> <div id="rec158144241" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> На днях мне попался старый немецкий дом с очень выразительной кровлей <br /></div></div> </div> </div> </div> <style> #rec158144241 .t-text{color:#ffffff;}</style> </div> <div id="rec158144242" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3665-3935-4165-a630-383564323863/23.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3665-3935-4165-a630-383564323863/-/empty/23.jpg" data-original="https://static.tildacdn.com/tild3665-3935-4165-a630-383564323863/23.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3665-3935-4165-a630-383564323863/23.jpg" alt=""> </div> </div> <style> #rec158144242 .t107__title{color:#999999;}</style> </div> <div id="rec158144243" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Если повысить насыщенность тона, распределение цветовых пятен становится более явным.</div></div> </div> </div> </div> <style> #rec158144243 .t-text{color:#ffffff;}</style> </div> <div id="rec158144246" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6561-3331-4638-b538-376263396336/24.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6561-3331-4638-b538-376263396336/-/empty/24.jpg" data-original="https://static.tildacdn.com/tild6561-3331-4638-b538-376263396336/24.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6561-3331-4638-b538-376263396336/24.jpg" alt=""> </div> </div> <style> #rec158144246 .t107__title{color:#999999;}</style> </div> <div id="rec158144247" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Не так давно зашёл в одну из новых кофеен: хозяин заведения явно не поскупился и воспользовался услугами профессиональных дизайнеров. Видно это было по отделке и подбору цветов, — как отдельных элементов, так и помещения в целом. Но я обратил внимание на напольную плитку. В глаза бросается разбивка по тону:</div></div> </div> </div> </div> <style> #rec158144247 .t-text{color:#ffffff;}</style> </div> <div id="rec158144248" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6637-3663-4765-b431-306435373234/25.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild6637-3663-4765-b431-306435373234/-/empty/25.jpg" data-original="https://static.tildacdn.com/tild6637-3663-4765-b431-306435373234/25.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6637-3663-4765-b431-306435373234/25.jpg" alt=""> </div> </div> <style> #rec158144248 .t107__title{color:#999999;}</style> </div> <div id="rec158152387" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6262-6639-4466-b330-326431616230/26.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild6262-6639-4466-b330-326431616230/-/empty/26.jpg" data-original="https://static.tildacdn.com/tild6262-6639-4466-b330-326431616230/26.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6262-6639-4466-b330-326431616230/26.jpg" alt=""> </div> </div> <style> #rec158152387 .t107__title{color:#999999;}</style> </div> <div id="rec158144249" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Будьте внимательны при обозначении разным тоном отдельных частей геометрии или элементов в общем массиве. <strong>Слишком контрастные цвета могут испортить выразительность вашей работы:</strong> наш мозг будет воспринимать их как совершенно разный материал. <br /><br /> Отдельно обращу внимание на такие материалы, как камень и дерево. Существуют стереотипы о их цвете: камень — серый, дерево — светло-коричневое. Отчасти это верно, но оба этих материала намного богаче по цветовой палитре. <br /><br /></div></div> </div> </div> </div> <style> #rec158144249 .t-text{color:#ffffff;}</style> </div> <div id="rec158144250" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3833-6433-4262-b832-386234646664/27.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild3833-6433-4262-b832-386234646664/-/empty/27.jpg" data-original="https://static.tildacdn.com/tild3833-6433-4262-b832-386234646664/27.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3833-6433-4262-b832-386234646664/27.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">палитра с сайта <a href="https://akulakreative.com/" target="_blank">akulakreative.com</a></div> </div> </div> </div> <style> #rec158144250 .t107__title{color:#999999;}</style> </div> <div id="rec158152566" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3363-3966-4435-b064-363138663736/28.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild3363-3966-4435-b064-363138663736/-/empty/28.jpg" data-original="https://static.tildacdn.com/tild3363-3966-4435-b064-363138663736/28.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3363-3966-4435-b064-363138663736/28.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">палитра с сайта <a href="https://akulakreative.com/" target="_blank">akulakreative.com</a></div> </div> </div> </div> <style> #rec158152566 .t107__title{color:#999999;}</style> </div> <div id="rec158152636" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6230-6263-4663-b239-633662393137/29.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild6230-6263-4663-b239-633662393137/-/empty/29.jpg" data-original="https://static.tildacdn.com/tild6230-6263-4663-b239-633662393137/29.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6230-6263-4663-b239-633662393137/29.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">палитра с сайта <a href="https://akulakreative.com/" target="_blank">akulakreative.com</a></div> </div> </div> </div> <style> #rec158152636 .t107__title{color:#999999;}</style> </div> <div id="rec158144251" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Как видно из палитр выше, камень — очень разнообразный материал, в котором могут присутствовать как холодные, так и тёплые тона. <br /><br /> Дерево не сильно уступает камню по богатству тона. <br /><br /></div></div> </div> </div> </div> <style> #rec158144251 .t-text{color:#ffffff;}</style> </div> <div id="rec158152788" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6633-6163-4938-b436-643232643461/30.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild6633-6163-4938-b436-643232643461/-/empty/30.jpg" data-original="https://static.tildacdn.com/tild6633-6163-4938-b436-643232643461/30.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6633-6163-4938-b436-643232643461/30.jpg" alt=""> </div> </div> <style> #rec158152788 .t107__title{color:#999999;}</style> </div> <div id="rec158144253" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Теперь немного теории. Сразу предупреждаю: это — лишь маленькая памятка в несколько абзацев, в которой очень поверхностно затрагивается теория цвета. Сам по себе цвет — это очень большая и непростая тема, по которой написано немало книг и сломано не меньше копий. <br /><br /> Для лучшего понимания — немного физики. Свет, если сузить и упростить это понятие, можно назвать потоком фотонов. Когда мы говорим: «эта чашка красная», то на самом деле имеем в виду, что молекулярный состав поверхности чашки поглощает все световые фотоны, кроме красных. <br /><br /> Если солнечный свет пропустить через трехгранную призму, как поступил сэр Исаак Ньютон в 1676 году, то мы получим спектр из семи цветов — красный, оранжевый, желтый, зеленый, голубой, синий и фиолетовый. Когда мы видим радугу, это как раз небо выступает в роли огромной призмы. Диапазон света который мы можем воспринимать, ограничен. Отсюда и формируются тона, которые мы воспринимаем. <br /><br /></div></div> </div> </div> </div> <style> #rec158144253 .t-text{color:#ffffff;}</style> </div> <div id="rec158144254" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3166-3233-4264-b162-663531333336/31.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3166-3233-4264-b162-663531333336/-/empty/31.jpg" data-original="https://static.tildacdn.com/tild3166-3233-4264-b162-663531333336/31.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3166-3233-4264-b162-663531333336/31.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><a href="https://ru.wikipedia.org/wiki/%D0%A1%D0%B2%D0%B5%D1%82">https://ru.wikipedia.org/wiki/%D0%A1%D0%B2%D0%B5%D1%82</a></div> </div> </div> </div> <style> #rec158144254 .t107__title{color:#999999;}</style> </div> <div id="rec158144255" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Но особенно выделяются красный, синий и зеленый. На основе этого создана шкала — <strong>RGB</strong> (аббревиатура английских слов <strong>r</strong>ed, <strong>g</strong>reen, <strong>b</strong>lue — красный, зелёный, синий) — аддитивная цветовая модель, которая описывает способ кодирования цвета для воспроизведения с помощью трёх цветов, которые часто называют основными. Все остальные тона и оттенки получают с помощью их смешивания.</div></div> </div> </div> </div> <style> #rec158144255 .t-text{color:#ffffff;}</style> </div> <div id="rec158144265" class="r t-rec t-rec_pt_45 t-rec_pb_45" style="padding-top:45px;padding-bottom:45px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3135-3131-4732-b065-363062666539/32.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild3135-3131-4732-b065-363062666539/-/empty/32.jpg" data-original="https://static.tildacdn.com/tild3135-3131-4732-b065-363062666539/32.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3135-3131-4732-b065-363062666539/32.jpg" alt=""> </div> </div> <style> #rec158144265 .t107__title{color:#999999;}</style> </div> <div id="rec158144257" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Выбор «основных» цветов обусловлен особенностями восприятия цвета сетчаткой человеческого глаза. Ощущение цвета возникает в мозге при возбуждении и торможении цветочувствительных клеток, — колбочек. У человека и приматов существует три вида колбочек, которые различаются по спектральной чувствительности, — ρ (условно «красные»), γ (условно «зелёные») и β (условно «синие»). Отсюда и подобное восприятие. <br /><br /> Но что нам это дает на практике? <br /><br /> Возьмём оранжевый шар. Его цвет формируется путём поглощения синих фотонов и отражения красных и зелёных, смесь которых и дает оранжевый. <br /><br /></div></div> </div> </div> </div> <style> #rec158144257 .t-text{color:#ffffff;}</style> </div> <div id="rec158153049" class="r t-rec t-rec_pt_45 t-rec_pb_45" style="padding-top:45px;padding-bottom:45px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6534-3666-4039-a534-393034313237/33.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild6534-3666-4039-a534-393034313237/-/empty/33.jpg" data-original="https://static.tildacdn.com/tild6534-3666-4039-a534-393034313237/33.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6534-3666-4039-a534-393034313237/33.jpg" alt=""> </div> </div> <style> #rec158153049 .t107__title{color:#999999;}</style> </div> <div id="rec158144264" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color: rgb(153, 153, 153);" data-customstyle="yes">В современных рендерах используется в основном физически корректный рендеринг (Physically based rendering - PBR) — метод затенения и рендеринга, обеспечивающий точное представление взаимодействия света с поверхностями. Поэтому и взаимодействие цвета и света происходит на основе их физических характеристик. Подробнее про PBR — <a href="https://cdn2.school-xyz.com/media/files/PBR_Rukovodstvo_-Tom_1.pdf" target="_blank" rel="noreferrer noopener">здесь</a> и <a href="https://cdn2.school-xyz.com/media/files/PBR_Rukovodstvo_-_Tom_2.pdf" target="_blank" rel="noreferrer noopener">здесь</a>.<br /><br />Так что если осветить наш оранжевый шар насыщенным синим светом, то он будет скатываться по цвету в черный спектр. Всё дело в фотонах: так как наш источник освещения испускает в первую очередь синие, то оранжевая поверхность их практически полностью поглощает. Чёрный — это по факту не цвет, а отсутствие отраженных фотонов: что-то вроде «дыры» в нашем зрении.<br /><br /></div></div> </div> </div> </div> <style> #rec158144264 .t-text{color:#ffffff;}</style> </div> <div id="rec158153189" class="r t-rec t-rec_pt_45 t-rec_pb_45" style="padding-top:45px;padding-bottom:45px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6236-6264-4735-b430-303461363335/34.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6236-6264-4735-b430-303461363335/-/empty/34.jpg" data-original="https://static.tildacdn.com/tild6236-6264-4735-b430-303461363335/34.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6236-6264-4735-b430-303461363335/34.jpg" alt=""> </div> </div> <style> #rec158153189 .t107__title{color:#999999;}</style> </div> <div id="rec158144266" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Чуть сместим тон света: пускай цвет шара будет искажённый, но он появится. При этом интенсивность источника освещения осталась на том же уровне</div></div> </div> </div> </div> <style> #rec158144266 .t-text{color:#ffffff;}</style> </div> <div id="rec158153361" class="r t-rec t-rec_pt_45 t-rec_pb_45" style="padding-top:45px;padding-bottom:45px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3338-6161-4665-a638-373030616261/35.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3338-6161-4665-a638-373030616261/-/empty/35.jpg" data-original="https://static.tildacdn.com/tild3338-6161-4665-a638-373030616261/35.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3338-6161-4665-a638-373030616261/35.jpg" alt=""> </div> </div> <style> #rec158153361 .t107__title{color:#999999;}</style> </div> <div id="rec158144268" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Поэтому если вдруг в вашей сцене после настройки освещения — особенно интенсивного с насыщенными цветами, — какие то элементы начали скатываться в черный спектр, не стоит паниковать. Возможно, всё дело в фотонах, и ситуация заметно улучшится, когда вы сместите тон освещения. <br /><br /> Подбор цвета и палитры значительно упрощает цветовой круг. В каком-то смысле это такая «таблица Менделеева» для цвета. <br /><br /></div></div> </div> </div> </div> <style> #rec158144268 .t-text{color:#ffffff;}</style> </div> <div id="rec158144267" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3461-6362-4132-a332-643963616133/36.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3461-6362-4132-a332-643963616133/-/empty/36.jpg" data-original="https://static.tildacdn.com/tild3461-6362-4132-a332-643963616133/36.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3461-6362-4132-a332-643963616133/36.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">цветовой круг по Иоханнесу Иттону</div> </div> </div> </div> <style> #rec158144267 .t107__title{color:#999999;}</style> </div> <div id="rec158144270" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Этот круг был создан путём анализа наиболее гармоничных сочетаний цветов, и их взаимодействия. Сейчас самый распространённый вариант цветового круга — RGB. <br /><br /> Вернемся к нашему шару. Цвет <strong>объекта </strong>и цвет <strong>света </strong>находятся на противоположных сторонах круга, — все подобные сочетания дают эффект с отсутствием отраженных фотонов. <br /><br /></div></div> </div> </div> </div> <style> #rec158144270 .t-text{color:#ffffff;}</style> </div> <div id="rec158153800" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3561-3738-4332-b365-633765303766/37.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild3561-3738-4332-b365-633765303766/-/empty/37.jpg" data-original="https://static.tildacdn.com/tild3561-3738-4332-b365-633765303766/37.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3561-3738-4332-b365-633765303766/37.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">фото с сайта <a href="https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF" target="_blank">https://paletton.com/</a></div> </div> </div> </div> <style> #rec158153800 .t107__title{color:#999999;}</style> </div> <div id="rec158144274" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color: rgb(153, 153, 153);" data-customstyle="yes"><strong>Сочетание двух цветов, расположенных друг напротив друга на цветовом круге, дают чёрный только когда речь идет о связке цвет—свет. </strong><br /><br />Для подбора тона и работы с палитрами цвета, расположенные на противоположных сторонах круга, также крайне важны, хотя и работают по другому принципу. Подобные цвета называются <strong>комплиментарными, дополнительными или контрастными</strong>. В разных источниках: книгах, лекциях и методических пособиях вы можете услышать подобные определения, но касаются они одного и того же явления.<br /><br />Эти цвета отлично сочетаются друг с другом, и если в вашей работе вы остановили свой выбор на двухцветовой схеме, то ваш выбор — комплиментарные цвета.<br /><br />Данный принцип, как и описанные выше имеет прямое отношение к физиологии человека. Посмотрите пристально на зеленый квадрат, а потом закройте глаза, — и в качестве остаточного изображения у вас перед глазами возникнет красный. Можно повторить данный опыт на любом из цветов круга и каждый раз остаточным изображением будет его комплиментарный цвет.<br /><br /></div></div> </div> </div> </div> <style> #rec158144274 .t-text{color:#ffffff;}</style> </div> <div id="rec158154333" class="r t-rec t-rec_pt_90 t-rec_pb_75" style="padding-top:90px;padding-bottom:75px;background-color:#0d0d0d; " data-record-type="223" data-bg-color="#0d0d0d"> <!-- T195 --> <div class="t195"> <div class="t-container"> <div class="t-col t-col_4 t-prefix_2"> <div class="t195__text t-text t-text_md" field="text"><div style="color:#999999;" data-customstyle="yes">Но почему нам нравится данное сочетание? Исследователи полагают, что физическое смешивание противоположных цветов даёт серый, — цвет, который считают признаком гармонии. Если попытаться повторить выше указанный опыт на средне-сером цвете, то никакого остаточного изображения не появится: нашему мозгу не потребуется «компенсация». <br /><br /> Цветовой круг нередко называют — хроматическим, то есть отражающим цвета видимого спектра. <br /><br /></div></div> </div> <div class="t-col t-col_6 t195__imgsection" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="image" content="https://static.tildacdn.com/tild3531-3662-4061-b737-643133383964/38.jpg"> <img class="t195__img t-img"
src="https://thb.tildacdn.com/tild3531-3662-4061-b737-643133383964/-/empty/38.jpg" data-original="https://static.tildacdn.com/tild3531-3662-4061-b737-643133383964/38.jpg"
imgfield="img" data-tu-max-width="1200" data-tu-max-height="1200"
alt=""><br /> <div class="t195__sectitle t-descr" field="imgtitle" itemprop="name"></div> <div class="t195__secdescr t-descr" field="imgdescr" itemprop="description"></div> </div> </div> </div> </div> <div id="rec158144276" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Хроматический круг существенно облегчает подбор палитры. Например, схемы на основе треугольника (всегда равнобедренного) квадрата или ромба как бы отсекают «лишние» цвета: использовать можно только те, что внутри фигуры.</div></div> </div> </div> </div> <style> #rec158144276 .t-text{color:#ffffff;}</style> </div> <div id="rec158144277" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3063-6539-4537-b361-393233336133/39.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild3063-6539-4537-b361-393233336133/-/empty/39.jpg" data-original="https://static.tildacdn.com/tild3063-6539-4537-b361-393233336133/39.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3063-6539-4537-b361-393233336133/39.jpg" alt=""> </div> </div> <style> #rec158144277 .t107__title{color:#999999;}</style> </div> <div id="rec158144278" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color: rgb(153, 153, 153);" data-customstyle="yes">Есть множество сайтов, которые могут сильно помочь в подборе палитры или предоставить готовую.<br /><br />Список взят с сайта <a href="https://designpub.ru/" target="_blank" rel="noreferrer noopener">designpub.ru.</a><br /><br /><ul><li data-list="bullet"><a href="http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF" target="_blank" rel="noreferrer noopener">http://paletton.com/</a> — цветовой круг для составления палитр.</li><li data-list="bullet"><a href="https://color.adobe.com/ru/create/color-wheel/" target="_blank" rel="noreferrer noopener">https://color.adobe.com/ru/create/color-wheel/</a> — цветовой круг для составления палитр.</li><li data-list="bullet"><a href="https://coolors.co/" target="_blank" rel="noreferrer noopener">https://coolors.co/</a> — отличный генератор случайных палитр.</li><li data-list="bullet"><a href="https://colorhunt.co/" target="_blank" rel="noreferrer noopener">http://colorhunt.co/</a> — подобранные цветовые палитры.</li><li data-list="bullet"><a href="https://material.io/design/color/#" target="_blank" rel="noreferrer noopener">https://material.google.com/style/color.html</a> — основные material цвета.</li><li data-list="bullet"><a href="https://www.materialpalette.com/blue/yellow" target="_blank" rel="noreferrer noopener">https://www.materialpalette.com/blue/yellow</a> — составление material палитр на основе двух цветов.</li><li data-list="bullet"><a href="http://material.colorion.co/" target="_blank" rel="noreferrer noopener">http://material.colorion.co/</a> — составленные палитры в стиле material.</li><li data-list="bullet"><a href="http://www.flatuicolorpicker.com/all" target="_blank" rel="noreferrer noopener">http://www.flatuicolorpicker.com/all</a> — цвета в стиле flat.</li><li data-list="bullet"><a href="http://swisscolors.net/" target="_blank" rel="noreferrer noopener">http://swisscolors.net/</a> — подобранные цвета в швейцарском стиле.</li><li data-list="bullet"><a href="http://www.gradients.io/" target="_blank" rel="noreferrer noopener">http://www.gradients.io/</a> — приятные градиенты.</li><li data-list="bullet"><a href="http://uigradients.com/" target="_blank" rel="noreferrer noopener">http://uigradients.com/</a> — подобранные градиенты.</li><li data-list="bullet"><a href="http://hslpicker.com/" target="_blank" rel="noreferrer noopener">http://hslpicker.com/</a> — удобный конвертер цветов.</li></ul>Но для более корректного понимания цвета придётся ещё раз пройтись по теории. Поговорим о разных видах контрастов.<br /><br />Один из важнейших исследователей цвета Иоахнесс Иттон выделяет следующие виды:<br /><br /><ol><li data-list="ordered">Контраст по цвету</li><li data-list="ordered">Контраст светлого и темного</li><li data-list="ordered">Контраст холодного и теплого</li><li data-list="ordered">Контраст комплиментарных цветов</li><li data-list="ordered">Симультанный контраст</li><li data-list="ordered">Контраст по насыщенности</li><li data-list="ordered">Контраст по площади цветовых пятен</li></ol><br /><strong style="font-size: 28px;">Контраст по цвету</strong><br /><br />Контраст по цвету — самый простой из семи, его можно продемонстрировать с помощью сопоставления любых двух основных тонов. В системе RGB выделяют 12.<br /><br /></div></div> </div> </div> </div> <style> #rec158144278 .t-text{color:#ffffff;}</style> </div> <div id="rec158144281" class="r t-rec t-rec_pt_45 t-rec_pb_30" style="padding-top:45px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3733-3933-4334-a137-356463396366/40.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3733-3933-4334-a137-356463396366/-/empty/40.jpg" data-original="https://static.tildacdn.com/tild3733-3933-4334-a137-356463396366/40.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3733-3933-4334-a137-356463396366/40.jpg" alt=""> </div> </div> <style> #rec158144281 .t107__title{color:#999999;}</style> </div> <div id="rec158144282" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"><span style="font-size: 28px;"><strong>Контраст светлого и тёмного <br /></strong></span><br /> В данном случае изменение цвета происходит путем подмешивания в него черного или белого цвета. <br /><br /> На практике это выглядит вот так. Там, где правый верхний угол — наиболее насыщенный цвет, а смещение строго по горизонтали или вертикали высветляет или затемняет его. <br /><br /></div></div> </div> </div> </div> <style> #rec158144282 .t-text{color:#ffffff;}</style> </div> <div id="rec158144283" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3365-6339-4139-b932-323434346439/41.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3365-6339-4139-b932-323434346439/-/empty/41.jpg" data-original="https://static.tildacdn.com/tild3365-6339-4139-b932-323434346439/41.jpg"
imgfield="img"
alt=""> </div> </div> <style> #rec158144283 .t107__title{color:#999999;}</style> </div> <div id="rec158144284" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Несколько примеров изменения цвета по светлоте/темноте:</div></div> </div> </div> </div> <style> #rec158144284 .t-text{color:#ffffff;}</style> </div> <div id="rec158144286" class="r t-rec t-rec_pt_45 t-rec_pb_45" style="padding-top:45px;padding-bottom:45px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6363-6662-4633-b632-663630643037/42.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6363-6662-4633-b632-663630643037/-/empty/42.jpg" data-original="https://static.tildacdn.com/tild6363-6662-4633-b632-663630643037/42.jpg"
imgfield="img"
alt=""> </div> </div> <style> #rec158144286 .t107__title{color:#999999;}</style> </div> <div id="rec158156165" class="r t-rec t-rec_pt_45 t-rec_pb_45" style="padding-top:45px;padding-bottom:45px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6262-6461-4230-a435-343231316464/43.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6262-6461-4230-a435-343231316464/-/empty/43.jpg" data-original="https://static.tildacdn.com/tild6262-6461-4230-a435-343231316464/43.jpg"
imgfield="img"
alt=""> </div> </div> <style> #rec158156165 .t107__title{color:#999999;}</style> </div> <div id="rec158144287" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Такой контраст позволяет сделать интересный эффект глубины, смещая окрас объектов от насыщенного или даже темного цвета в белую зону и добиваясь отличного ощущения пространства. <br /><br /> Например, в данной работе цвет и перспектива усиливают друг друга. <br /><br /></div></div> </div> </div> </div> <style> #rec158144287 .t-text{color:#ffffff;}</style> </div> <div id="rec158144290" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6634-3865-4432-a138-633435633234/44.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6634-3865-4432-a138-633435633234/-/empty/44.jpg" data-original="https://static.tildacdn.com/tild6634-3865-4432-a138-633435633234/44.jpg"
imgfield="img"
alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">Автор <a href="https://sketchfab.com/tinyruin" target="_blank">работы</a> — tinyruin</div> </div> </div> </div> <style> #rec158144290 .t107__title{color:#999999;}</style> </div> <div id="rec158144289" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Ещё есть характерная закономерность: светлые тона на чёрном фоне выступают вперёд в соответствии со степенью их светлоты. Пример — изображение ниже.</div></div> </div> </div> </div> <style> #rec158144289 .t-text{color:#ffffff;}</style> </div> <div id="rec158144292" class="r t-rec t-rec_pt_45 t-rec_pb_75" style="padding-top:45px;padding-bottom:75px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3331-3334-4963-b531-366532363235/45.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3331-3334-4963-b531-366532363235/-/empty/45.jpg" data-original="https://static.tildacdn.com/tild3331-3334-4963-b531-366532363235/45.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3331-3334-4963-b531-366532363235/45.jpg" alt=""> </div> </div> <style> #rec158144292 .t107__title{color:#999999;}</style> </div> <div id="rec158144291" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">А тёмное на светлом фоне стремится вперёд:</div></div> </div> </div> </div> <style> #rec158144291 .t-text{color:#ffffff;}</style> </div> <div id="rec158156441" class="r t-rec t-rec_pt_45 t-rec_pb_75" style="padding-top:45px;padding-bottom:75px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3731-3261-4163-b134-316461613931/46.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3731-3261-4163-b134-316461613931/-/empty/46.jpg" data-original="https://static.tildacdn.com/tild3731-3261-4163-b134-316461613931/46.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3731-3261-4163-b134-316461613931/46.jpg" alt=""> </div> </div> <style> #rec158156441 .t107__title{color:#999999;}</style> </div> <div id="rec158144293" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="text-align:left;color:#999999;" data-customstyle="yes">Отличный пример работы по использованию данных свойств — <a href="https://sketchfab.com/3d-models/firewatch-fan-art-8609caf1cd8c452eb7b6d4ca4228fcd0" target="_blank">фанарт</a> по игре Firewatch.</div></div> </div> </div> </div> <style> #rec158144293 .t-text{color:#ffffff;}</style> </div> <div id="rec158144294" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3031-3639-4962-b438-323938623233/47.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3031-3639-4962-b438-323938623233/-/empty/47.jpg" data-original="https://static.tildacdn.com/tild3031-3639-4962-b438-323938623233/47.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3031-3639-4962-b438-323938623233/47.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">автор работы — tzeshi</div> </div> </div> </div> <style> #rec158144294 .t107__title{color:#999999;}</style> </div> <div id="rec158144295" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="text-align:left;color:#999999;" data-customstyle="yes">Ещё один <a href="https://sketchfab.com/3d-models/4-cubes-e3c3072cab4b4ef2ba8bc796f588d1ef" target="_blank">пример</a> того, как цвет применяют для создания глубины:</div></div> </div> </div> </div> <style> #rec158144295 .t-text{color:#ffffff;}</style> </div> <div id="rec158144296" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3661-3763-4061-b730-363339623861/48.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3661-3763-4061-b730-363339623861/-/empty/48.jpg" data-original="https://static.tildacdn.com/tild3661-3763-4061-b730-363339623861/48.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3661-3763-4061-b730-363339623861/48.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">автор <a href="https://sketchfab.com/jojoinmess" target="_blank">работы</a> — JojoInMess</div> </div> </div> </div> <style> #rec158144296 .t107__title{color:#999999;}</style> </div> <div id="rec158144297" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Интересная особенность: красный, оранжевый и жёлтый при недостаточном освещении кажутся более тёмными, в то время как зелёный и синий в тех же условиях, наоборот, кажутся более светлыми. <br /><br /> <span style="font-size: 28px;"><strong>Контраст холодного и теплого <br /></strong></span><br /> Такое деление оказывает на человека мощный психологический эффект, — это даёт нам эффективный приём воздействия на зрителя. Но связь между ощущением температуры и зрительным восприятием цвета не всегда очевидна. <br /><br /> В книге «Искусство цвета» Иоханесс Иттон рассказывает об интересном опыте. В мастерских, окрашенных в сине-зелёные цвета, рабочие жаловались на холод при температуре 15 градусов. В это же время в красно-оранжевом помещении они начинали жаловаться на холод лишь при температуре 11 — 12. <br /><br /></div></div> </div> </div> </div> <style> #rec158144297 .t-text{color:#ffffff;}</style> </div> <div id="rec158144298" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6539-6238-4166-b936-303737636530/49.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild6539-6238-4166-b936-303737636530/-/empty/49.jpg" data-original="https://static.tildacdn.com/tild6539-6238-4166-b936-303737636530/49.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6539-6238-4166-b936-303737636530/49.jpg" alt=""> </div> </div> <style> #rec158144298 .t107__title{color:#999999;}</style> </div> <div id="rec158144299" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Немного классики. Обратите внимание что детализация на этой картине Клода Моне практически отсутствует. По сути, нам доступны лишь силуэты и тени, но картина при этом очень выразительна и задаёт настроение.</div></div> </div> </div> </div> <style> #rec158144299 .t-text{color:#ffffff;}</style> </div> <div id="rec158144300" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3031-3136-4462-a436-646163663234/50.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3031-3136-4462-a436-646163663234/-/empty/50.jpg" data-original="https://static.tildacdn.com/tild3031-3136-4462-a436-646163663234/50.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3031-3136-4462-a436-646163663234/50.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">Клод Моне «Лондонский парламент в тумане»</div> </div> </div> </div> <style> #rec158144300 .t107__title{color:#999999;}</style> </div> <div id="rec158144301" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Ещё один пример холодных и тёплых тонов от beeple.</div></div> </div> </div> </div> <style> #rec158144301 .t-text{color:#ffffff;}</style> </div> <div id="rec158144302" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6133-6432-4663-a639-613830323464/51.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild6133-6432-4663-a639-613830323464/-/empty/51.jpg" data-original="https://static.tildacdn.com/tild6133-6432-4663-a639-613830323464/51.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6133-6432-4663-a639-613830323464/51.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">beeple — REBALANCE SELF</div> </div> </div> </div> <style> #rec158144302 .t107__title{color:#999999;}</style> </div> <div id="rec158144304" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"> Контраст холодного и тёплого обладает интересным свойством: он может влиять на наше восприятие расстояние до объекта. Чем дальше от нас объект, тем более холодным он кажется — из-за воздушного слоя. Наш мозг так привык к этому ориентиру, что такой эффект будет работать и в 2D, и в 3D. <br /><br /> <span style="font-size: 28px;"><strong>Контраст комплиментарных цветов <br /></strong></span><br /> Этот тип контраста мы обсудили выше, тут отмечу только занятный факт, который показывает, насколько четко наш мозг складывает подобные цвета в серый. <br /><br /> Есть такое направление в живописи — пуантализм: рисунок создаётся нанесением на холст точек, которые на расстоянии сливаются в единую картину. Пуантилисты добивались серого цвета нанесением очень маленьких точек комплиментарных цветов рядом друг с другом: серый тон появлялся только в глазах зрителя. <br /><br /> <span style="font-size: 28px;"><strong>Симультанный контраст <br /></strong></span><br /> Это, пожалуй, самый непростой для понимания, но не менее важный вид контраста. Чтобы объяснить, о чём речь, я просто процитирую упомянутого не раз Иоханесса Иттена. <br /><br /> <em>Понятие «симультанный контраст» обозначает явление, при котором наш глаз при восприятии какого-либо цвета тотчас же требует появления его дополнительного цвета, и если такового нет, то симультанно, то есть одновременно порождает его сам.</em> <br /><br /><em>Это означает, что основной закон цветовой гармонии базируется на законе о дополнительных цветах. Симультанно порожденные цвета возникают лишь как ощущение и объективно не существуют. Они не могут быть сфотографированы.</em> <br /><br /><em>Поскольку симультанные цвета возникают лишь в глазах, они вызывают в нас чувство возбуждения и живой вибрации от непрерывно меняющейся интенсивности этих цветовых ощущений.</em> <br /><br /><em>При длительном рассматривании основной цвет как бы теряет свою силу, — глаз устаёт, — в то время как восприятие симультанно возникшего цвета усиливается. При сочетании двух чистых цветов, не являющихся строго дополнительными, каждый из них стремится сдвинуть другой в направлении к его дополнительному, причём в большинстве случаев оба цвета теряют нечто от присущего им характера и приобретают новые оттенки.</em> <br /><br />Одна из самых мощных цветовых схем — равносторонний треугольник. <br /><br /></div></div> </div> </div> </div> <style> #rec158144304 .t-text{color:#ffffff;}</style> </div> <div id="rec158144307" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3936-3162-4732-b163-386264333436/52.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild3936-3162-4732-b163-386264333436/-/empty/52.jpg" data-original="https://static.tildacdn.com/tild3936-3162-4732-b163-386264333436/52.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3936-3162-4732-b163-386264333436/52.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><a href="https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF" target="_blank">https://paletton.com/</a></div> </div> </div> </div> <style> #rec158144307 .t107__title{color:#999999;}</style> </div> <div id="rec158144306" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">На схеме видно, насколько все цвета смещены относительно их комплиментарных.</div></div> </div> </div> </div> <style> #rec158144306 .t-text{color:#ffffff;}</style> </div> <div id="rec158144309" class="r t-rec t-rec_pt_45 t-rec_pb_0" style="padding-top:45px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3536-3830-4230-b732-313765303461/53.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild3536-3830-4230-b732-313765303461/-/empty/53.jpg" data-original="https://static.tildacdn.com/tild3536-3830-4230-b732-313765303461/53.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3536-3830-4230-b732-313765303461/53.jpg" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><a href="https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF" target="_blank">https://paletton.com/</a></div> </div> </div> </div> <style> #rec158144309 .t107__title{color:#999999;}</style> </div> <div id="rec158144308" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"><span style="font-size: 28px;"><strong>Контраст по насыщенности <br /></strong></span><br /> Контраст по насыщенности часто путают с контрастом по светлоте/темноте. Основное отличие в том, что насыщенность не пытается уйти в белую или чёрную зону, а падает, стремясь прийти в средне-серую. <br /><br /></div></div> </div> </div> </div> <style> #rec158144308 .t-text{color:#ffffff;}</style> </div> <div id="rec158158056" class="r t-rec t-rec_pt_45 t-rec_pb_30" style="padding-top:45px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3765-6266-4539-b535-336162663163/54.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3765-6266-4539-b535-336162663163/-/empty/54.jpg" data-original="https://static.tildacdn.com/tild3765-6266-4539-b535-336162663163/54.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3765-6266-4539-b535-336162663163/54.jpg" alt=""> </div> </div> <style> #rec158158056 .t107__title{color:#999999;}</style> </div> <div id="rec158144310" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">По градации RGB средне-серый — это цвет в значениях 128:128:128. Смещение в показанной ниже системе происходит по прямой, из правого верхнего угла (максимально чистый цвет) к средне-серому.</div></div> </div> </div> </div> <style> #rec158144310 .t-text{color:#ffffff;}</style> </div> <div id="rec158158149" class="r t-rec t-rec_pt_45 t-rec_pb_30" style="padding-top:45px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6236-6661-4236-a230-356666656466/55.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6236-6661-4236-a230-356666656466/-/empty/55.jpg" data-original="https://static.tildacdn.com/tild6236-6661-4236-a230-356666656466/55.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6236-6661-4236-a230-356666656466/55.jpg" alt=""> </div> </div> <style> #rec158158149 .t107__title{color:#999999;}</style> </div> <div id="rec158144312" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes"><span style="font-size: 28px;"><strong>Контраст по размеру цветовых пятен <br /></strong></span><br /> Этот тип контраста характеризуется размерным соотношением между двумя или несколькими цветовыми пятнами. <br /><br /> Если мы обобщим виды контрастов и подмешаем в них цветовой круг с его схемами, то получим стандартное распределение цвета относительно объема модели или картины. <br /><br /> Это соотношение, близкое к 60 на 30 на 10. 60 — это основной цвет, как правило относительно насыщенный. 30 — дополняющий, заметно более блеклый, чем основной. 10 — это акцентный, чаще всего самый яркий. Это не жёсткая формула, но стоит стремится к подобной пропорции. Помните: если вы не можете с первого взгляда определить основной цвет модели, стоит пересмотреть распределение цветов. <br /><br /> Рассмотрим на примере. Первый робот покрашен в соответствии с гармоничной триадой а вот последующие модели — с нарушением правил подбора цвета. <br /><br /></div></div> </div> </div> </div> <style> #rec158144312 .t-text{color:#ffffff;}</style> </div> <div id="rec158158245" class="r t-rec t-rec_pt_45 t-rec_pb_30" style="padding-top:45px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3663-3830-4764-b131-643134643032/56.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3663-3830-4764-b131-643134643032/-/empty/56.jpg" data-original="https://static.tildacdn.com/tild3663-3830-4764-b131-643134643032/56.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3663-3830-4764-b131-643134643032/56.jpg" alt=""> </div> </div> <style> #rec158158245 .t107__title{color:#999999;}</style> </div> <div id="rec158144314" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color: rgb(153, 153, 153);" data-customstyle="yes"><strong style="font-size: 28px;">Про черный, белый и оттенки серого</strong><br /><br />Чёрный и белый цветами, по сути, не являются. К чёрному стремится любой цвет при снижении яркости — например, при уменьшении освещённости до полной темноты. При увеличении яркости любой цвет стремится к белому. Черный и белый, а также весь спектр серого между ними — это <strong>ахроматический ряд</strong>, в переводе с древнегреческого — «не цветной». Ахроматические цвета различаются только по светлоте.<br /><br />Новички часто активно используют чёрный, серый и белый цвета — это ошибка. Профессиональные художники как правило эти цвета не используют, так как в природе их не существует.<br /><br />Гармония — это равновесие, симметрия сил. Нейтральным цветом считается серый — наш глаз не создаёт с ним никакого дополнительного цвета, и это чаще всего делает его самым гармоничным.<br /><br />И тут мы попадаем в «ловушку гармонии». Основная задача большинства визуальных произведений — вызывать эмоции, а серый цвет, наоборот, их чаще всего приглушает. Поэтому серый стоит использовать крайне аккуратно и с оттенками цветов хроматического ряда. Чёрный и белый не могут быть комплиментарными цветами и не отображаются на цветовом круге.<br /><br />У ахроматических цветов есть важная роль: подмешивая их в тона цветового круга, мы можем регулировать яркость и влиять на насыщенность цвета. Эти цвета отлично подходят для создания инструментов по регулированию тех или иных параметров. Например — для текстурных одноканальных карт, таких как Hights и Ambient oclusion. Но именно при формировании своей палитры их лучше избегать.<br /><br />Но не забывайте, что серый — это очень богатый цвет, если в нём присутствует тон. Вот несколько палитр:<br /><br /></div></div> </div> </div> </div> <style> #rec158144314 .t-text{color:#ffffff;}</style> </div> <div id="rec158158478" class="r t-rec t-rec_pt_45 t-rec_pb_30" style="padding-top:45px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6233-3339-4466-b565-363262333136/57.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild6233-3339-4466-b565-363262333136/-/empty/57.jpg" data-original="https://static.tildacdn.com/tild6233-3339-4466-b565-363262333136/57.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6233-3339-4466-b565-363262333136/57.jpg" alt=""> </div> </div> <style> #rec158158478 .t107__title{color:#999999;}</style> </div> <div id="rec158158557" class="r t-rec t-rec_pt_45 t-rec_pb_30" style="padding-top:45px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3139-3336-4135-b662-336435353664/58.jpg"> <img class="t-img t-width t107__width t-width_6"
src="https://thb.tildacdn.com/tild3139-3336-4135-b662-336435353664/-/empty/58.jpg" data-original="https://static.tildacdn.com/tild3139-3336-4135-b662-336435353664/58.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3139-3336-4135-b662-336435353664/58.jpg" alt=""> </div> </div> <style> #rec158158557 .t107__title{color:#999999;}</style> </div> <div id="rec158144316" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color: rgb(153, 153, 153);" data-customstyle="yes">Напоследок — простой, но действенный прием от Антона Беляева.<br /><br />Находим красивую картинку с крутой цветовой схемой, конвертируем её в мозайку, и получаем на выходе отличную палитру.<br /><br /></div></div> </div> </div> </div> <style> #rec158144316 .t-text{color:#ffffff;}</style> </div> <div id="rec158158649" class="r t-rec t-rec_pt_45 t-rec_pb_30" style="padding-top:45px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3461-3931-4132-b962-633035323832/59.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild3461-3931-4132-b962-633035323832/-/empty/59.jpg" data-original="https://static.tildacdn.com/tild3461-3931-4132-b962-633035323832/59.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3461-3931-4132-b962-633035323832/59.jpg" alt=""> </div> </div> <style> #rec158158649 .t107__title{color:#999999;}</style> </div> <div id="rec158158885" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Несколько примеров изображений, полученных таким образом:</div></div> </div> </div> </div> <style> #rec158158885 .t-text{color:#ffffff;}</style> </div> <div id="rec158158921" class="r t-rec t-rec_pt_45 t-rec_pb_30" style="padding-top:45px;padding-bottom:30px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6636-3962-4339-a333-643362656333/60.jpg"> <img class="t-img t-width t107__width t-width_8"
src="https://thb.tildacdn.com/tild6636-3962-4339-a333-643362656333/-/empty/60.jpg" data-original="https://static.tildacdn.com/tild6636-3962-4339-a333-643362656333/60.jpg"
imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild6636-3962-4339-a333-643362656333/60.jpg" alt=""> </div> </div> <style> #rec158158921 .t107__title{color:#999999;}</style> </div> <div id="rec158158948" class="r t-rec t-rec_pt_30 t-rec_pb_15" style="padding-top:30px;padding-bottom:15px;background-color:#0d0d0d; " data-record-type="106" data-bg-color="#0d0d0d"> <!-- T004 --> <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="color:#999999;" data-customstyle="yes">Цвет — не самый простой предмет для изучения. Но его понимание это во многом фундамент всего дизайна. Если вы сможете с ним совладать, ваши навыки и уровень как специалиста значительно вырастут.<br /><br /><em>Автор: <a href="https://vk.com/ak_neod">Эдуард Витер</a></em><br /></div></div> </div> </div> </div> <style> #rec158158948 .t-text{color:#ffffff;}</style> </div> <div id="rec158144319" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px;background-color:#0d0d0d; " data-record-type="3" data-bg-color="#0d0d0d"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3561-3363-4630-b231-373461643131/1.png"> <img class="t-img t-width t107__widthauto"
src="https://thb.tildacdn.com/tild3561-3363-4630-b231-373461643131/-/empty/1.png" data-original="https://static.tildacdn.com/tild3561-3363-4630-b231-373461643131/1.png"
imgfield="img"
alt=""> </div> </div> </div> <div id="rec158144320" class="r t-rec" style=" " data-animationappear="off" data-record-type="449"> <!-- T381 --> <div id="nav158144320marker"></div> <div id="nav158144320" class="t449 t449__flipped " data-navmarker="nav158144320marker" data-appearoffset="" data-hideoffset=""> <div class="t449__wrapper t449__black-white"> <script type="text/javascript" src="https://static.tildacdn.com/js/ya-share.js" charset="utf-8"></script> <div class="t449__share_buttons ya-share2" data-access-token:facebook="" data-direction="vertical" data-yashareL10n="en" data-services="facebook,vkontakte,twitter"></div> </div> </div> </div> <div id="rec158144321" class="r t-rec t-rec_pt_15 t-rec_pb_90" style="padding-top:15px;padding-bottom:90px;background-color:#0d0d0d; " data-record-type="797" data-bg-color="#0d0d0d"> <!-- t797 --> <div class="t797"> <div class="t-container"> <div class="t-col t-col_6 t-prefix_3 t-align_center"> <div class="t797__wrapper t797__wrapper_padding" style="background-color:#efefef;"> <div class="t794__title t-descr t-descr_md t-animate" data-animate-style="fadein" data-animate-group="yes" data-animate-order="1" field="title">Понравилась статья?</div> <div class="t797__answers t-vote" style="margin-top:-20px" data-vote-type="single" data-vote-id="158144321" data-vote-visibility="onclick"> <button type="button" class="t-vote__btn-wrapper js-vote-item t-animate" style="margin:20px 10px 0px 10px;" data-answer-id="1512750238069" data-animate-style="zoomin" data-animate-chain="yes"> <div class="t-vote__btn-el js-vote-btn js-sendvote-btn"> <img
src="https://thb.tildacdn.com/tild3165-3530-4532-b731-646435653837/-/empty/Poop_Emoji_2.png" data-original="https://static.tildacdn.com/tild3165-3530-4532-b731-646435653837/Poop_Emoji_2.png"
class="t797__img t797__img_width t-img"
imgfield="li_img__1512750238069"
alt=""
/> </div> <div class="t-vote__btn-res t-descr t-descr_xxs t-align_center " style="display:none;"> <span class="t-vote__btn-res__num js-vote-count">0</span> </div> </button> <button type="button" class="t-vote__btn-wrapper js-vote-item t-animate" style="margin:20px 10px 0px 10px;" data-answer-id="1513680765900" data-animate-style="zoomin" data-animate-chain="yes"> <div class="t-vote__btn-el js-vote-btn js-sendvote-btn"> <img
src="https://thb.tildacdn.com/tild3564-3630-4239-a563-323339636564/-/empty/Slightly_Smiling_Emo.png" data-original="https://static.tildacdn.com/tild3564-3630-4239-a563-323339636564/Slightly_Smiling_Emo.png"
class="t797__img t797__img_width t-img"
imgfield="li_img__1513680765900"
alt=""
/> </div> <div class="t-vote__btn-res t-descr t-descr_xxs t-align_center " style="display:none;"> <span class="t-vote__btn-res__num js-vote-count">0</span> </div> </button> <button type="button" class="t-vote__btn-wrapper js-vote-item t-animate" style="margin:20px 10px 0px 10px;" data-answer-id="1513669611253" data-animate-style="zoomin" data-animate-chain="yes"> <div class="t-vote__btn-el js-vote-btn js-sendvote-btn"> <img
src="https://thb.tildacdn.com/tild6130-3965-4463-a332-343937336430/-/empty/Heart_Eyes_Emoji_2.png" data-original="https://static.tildacdn.com/tild6130-3965-4463-a332-343937336430/Heart_Eyes_Emoji_2.png"
class="t797__img t797__img_width t-img"
imgfield="li_img__1513669611253"
alt=""
/> </div> <div class="t-vote__btn-res t-descr t-descr_xxs t-align_center " style="display:none;"> <span class="t-vote__btn-res__num js-vote-count">0</span> </div> </button> </div> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t797_init',function() {t797_init(158144321);});});</script> <style> #rec158144321 .t797__wrapper{border-radius:10px;}</style> </div> <div id="rec158144322" class="r t-rec" style=" " data-animationappear="off" data-record-type="396"> <!-- T396 --> <style>#rec158144322 .t396__artboard {height:460px;background-color:#0D0D0D;}#rec158144322 .t396__filter {height:460px;}#rec158144322 .t396__carrier{height:460px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec158144322 .t396__artboard,#rec158144322 .t396__filter,#rec158144322 .t396__carrier {}#rec158144322 .t396__filter {}#rec158144322 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec158144322 .t396__artboard,#rec158144322 .t396__filter,#rec158144322 .t396__carrier {height:440px;}#rec158144322 .t396__filter {}#rec158144322 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec158144322 .t396__artboard,#rec158144322 .t396__filter,#rec158144322 .t396__carrier {}#rec158144322 .t396__filter {}#rec158144322 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:479px) {#rec158144322 .t396__artboard,#rec158144322 .t396__filter,#rec158144322 .t396__carrier {height:480px;}#rec158144322 .t396__filter {}#rec158144322 .t396__carrier {background-attachment:scroll;}}#rec158144322 .tn-elem[data-elem-id="1564554044037"]{color:#ffffff;text-align:center;z-index:1;top:100px;;left:calc(50% - 600px + 320px);;width:560px;height:auto;}#rec158144322 .tn-elem[data-elem-id="1564554044037"] .tn-atom{color:#ffffff;font-size:32px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.2;font-weight:700;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec158144322 .tn-elem[data-elem-id="1564554044037"]{top:100px;;left:calc(50% - 480px + 200px);;height:auto;}}@media screen and (max-width:959px){#rec158144322 .tn-elem[data-elem-id="1564554044037"]{top:70px;;left:calc(50% - 320px + 40px);;height:auto;}}@media screen and (max-width:639px){#rec158144322 .tn-elem[data-elem-id="1564554044037"]{top:70px;;left:calc(50% - 240px + 40px);;width:400px;height:auto;}}@media screen and (max-width:479px){#rec158144322 .tn-elem[data-elem-id="1564554044037"]{top:70px;;left:calc(50% - 160px + 30px);;width:260px;height:auto;}}#rec158144322 .tn-elem[data-elem-id="1564554130456"]{color:#999;text-align:center;z-index:2;top:185px;;left:calc(50% - 600px + 415px);;width:370px;height:auto;}#rec158144322 .tn-elem[data-elem-id="1564554130456"] .tn-atom{color:#999;font-size:16px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.3;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec158144322 .tn-elem[data-elem-id="1564554130456"]{top:185px;;left:calc(50% - 480px + 295px);;height:auto;}}@media screen and (max-width:959px){#rec158144322 .tn-elem[data-elem-id="1564554130456"]{top:155px;;left:calc(50% - 320px + 135px);;height:auto;}}@media screen and (max-width:639px){#rec158144322 .tn-elem[data-elem-id="1564554130456"]{top:155px;;left:calc(50% - 240px + 55px);;height:auto;}}@media screen and (max-width:479px){#rec158144322 .tn-elem[data-elem-id="1564554130456"]{top:195px;;left:calc(50% - 160px + 30px);;width:260px;height:auto;color:#999999;}#rec158144322 .tn-elem[data-elem-id="1564554130456"] .tn-atom{color:#999999;background-size:cover;}}#rec158144322 .tn-elem[data-elem-id="1564554178466"]{z-index:3;top:258px;;left:calc(50% - 600px + 320px);;width:560px;height:auto;}#rec158144322 .tn-elem[data-elem-id="1564554178466"] .tn-atom{background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;}@media screen and (max-width:1199px){#rec158144322 .tn-elem[data-elem-id="1564554178466"]{top:248px;;left:calc(50% - 480px + 200px);;height:auto;}}@media screen and (max-width:959px){#rec158144322 .tn-elem[data-elem-id="1564554178466"]{top:228px;;left:calc(50% - 320px + 40px);;height:auto;}}@media screen and (max-width:639px){#rec158144322 .tn-elem[data-elem-id="1564554178466"]{top:228px;;left:calc(50% - 240px + 10px);;width:460px;height:auto;}}@media screen and (max-width:479px){#rec158144322 .tn-elem[data-elem-id="1564554178466"]{top:248px;;left:calc(50% - 160px + 30px);;width:200px;height:auto;}}#rec158144322 .tn-elem[data-elem-id="1564876573371"]{color:#666666;text-align:center;z-index:4;top:330px;;left:calc(50% - 600px + 445px);;width:310px;height:auto;}#rec158144322 .tn-elem[data-elem-id="1564876573371"] .tn-atom{color:#666666;font-size:16px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.3;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec158144322 .tn-elem[data-elem-id="1564876573371"]{top:335px;;left:calc(50% - 480px + 325px);;height:auto;}}@media screen and (max-width:959px){#rec158144322 .tn-elem[data-elem-id="1564876573371"]{top:315px;;left:calc(50% - 320px + 165px);;height:auto;}}@media screen and (max-width:639px){#rec158144322 .tn-elem[data-elem-id="1564876573371"]{top:310px;;left:calc(50% - 240px + 85px);;height:auto;}}@media screen and (max-width:479px){#rec158144322 .tn-elem[data-elem-id="1564876573371"]{top:375px;;left:calc(50% - 160px + 30px);;width:260px;height:auto;}#rec158144322 .tn-elem[data-elem-id="1564876573371"] .tn-atom{font-size:14px;background-size:cover;}}#rec158144322 .tn-elem[data-elem-id="1565701393805"]{color:#666666;text-align:center;z-index:5;top:375px;;left:calc(50% - 600px + 445px);;width:310px;height:auto;}#rec158144322 .tn-elem[data-elem-id="1565701393805"] .tn-atom{color:#666666;font-size:16px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.3;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec158144322 .tn-elem[data-elem-id="1565701393805"]{top:380px;;left:calc(50% - 480px + 325px);;height:auto;}}@media screen and (max-width:959px){#rec158144322 .tn-elem[data-elem-id="1565701393805"]{top:360px;;left:calc(50% - 320px + 165px);;height:auto;}}@media screen and (max-width:639px){#rec158144322 .tn-elem[data-elem-id="1565701393805"]{top:360px;;left:calc(50% - 240px + 85px);;height:auto;}}@media screen and (max-width:479px){#rec158144322 .tn-elem[data-elem-id="1565701393805"]{top:420px;;left:calc(50% - 160px + 30px);;width:260px;height:auto;}#rec158144322 .tn-elem[data-elem-id="1565701393805"] .tn-atom{font-size:14px;background-size:cover;}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="158144322" data-artboard-screens="320,480,640,960,1200" data-artboard-height="460" data-artboard-valign="center" data-artboard-height-res-320="480" data-artboard-height-res-640="440"> <div class="t396__carrier" data-artboard-recid="158144322"></div> <div class="t396__filter" data-artboard-recid="158144322"></div> <div class='t396__elem tn-elem tn-elem__1581443221564554044037' data-elem-id='1564554044037' data-elem-type='text' data-field-top-value="100" data-field-left-value="320" data-field-width-value="560" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-fontsize-value="32" data-field-top-res-320-value="70" data-field-left-res-320-value="30" data-field-width-res-320-value="260" data-field-top-res-480-value="70" data-field-left-res-480-value="40" data-field-width-res-480-value="400" data-field-top-res-640-value="70" data-field-left-res-640-value="40" data-field-top-res-960-value="100" data-field-left-res-960-value="200"> <div class='tn-atom'field='tn_text_1564554044037'>Хочешь получать лучшие статьи<br>от XyZ раз в неделю?</div> </div> <div class='t396__elem tn-elem tn-elem__1581443221564554130456' data-elem-id='1564554130456' data-elem-type='text' data-field-top-value="185" data-field-left-value="415" data-field-width-value="370" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-fontsize-value="16" data-field-top-res-320-value="195" data-field-left-res-320-value="30" data-field-width-res-320-value="260" data-field-top-res-480-value="155" data-field-left-res-480-value="55" data-field-top-res-640-value="155" data-field-left-res-640-value="135" data-field-top-res-960-value="185" data-field-left-res-960-value="295"> <div class='tn-atom'field='tn_text_1564554130456'>Подпишись на рассылку XyZ</div> </div> <div class='t396__elem tn-elem tn-elem__1581443221564554178466' data-elem-id='1564554178466' data-elem-type='form' data-field-top-value="258" data-field-left-value="320" data-field-width-value="560" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-top-res-320-value="248" data-field-left-res-320-value="30" data-field-width-res-320-value="200" data-field-top-res-480-value="228" data-field-left-res-480-value="10" data-field-width-res-480-value="460" data-field-top-res-640-value="228" data-field-left-res-640-value="40" data-field-top-res-960-value="248" data-field-left-res-960-value="200" data-field-inputpos-value="h" data-field-inputfontfamily-value="Arial" data-field-inputfontsize-value="16" data-field-inputfontweight-value="400" data-field-inputcolor-value="#666" data-field-inputbordercolor-value="#666" data-field-inputbordersize-value="1" data-field-inputradius-value="7" data-field-inputheight-value="40" data-field-inputmargbottom-value="20" data-field-inputmargright-value="10" data-field-inputtitlefontsize-value="16" data-field-inputtitlefontweight-value="400" data-field-inputtitlecolor-value="#000" data-field-inputtitlemargbottom-value="5" data-field-inputelsfontweight-value="400" data-field-inputelsfontsize-value="14" data-field-buttontitle-value="Подписаться" data-field-buttoncolor-value="#fff" data-field-buttonbgcolor-value="#38b0cd" data-field-buttonbordercolor-value="#666" data-field-buttonradius-value="7" data-field-buttonwidth-value="200" data-field-buttonheight-value="40" data-field-buttonfontfamily-value="BebasRoboto" data-field-buttonfontsize-value="16" data-field-buttonfontweight-value="600" data-field-receivers-value="3a18b021f43e61a277b0babc9a16a84c,164a3b8e9611cc7ecc538151418a854a,d2ad269d53b8517d6f011d8452411a9b,24dadee303ff10af9effec771b8b4e6f,935c4708c0542e69b9c954810f75a47f,808290b07baffee2037d44c1adc9f960,7cb71ac814cf5f11b74e7aff35c39e83,9bd20a80f92aba4c9d1823f2d1339add,3106d7f849cc37cf58f92ca54a12b20d,473bfe0c466b0830324330245ec4f856,22b6124b7d1e8c12b1bfe44591394ad1,4e149223d2a1c89490c6886635e128b1,432ab6b299e9d3b4712f0d8b851a69ca,ede885f6bf92f8aa63caaa2019930c27,ddce5c970ee590f09521887d2c815328,e8e971129be626609ea9f5eacb531712,529d776f47525813dd4c7439d5e2957d,79efdc56002e2fb9160ff9fc91750f61,9349cade6ff136590942028e6ee8bdd0" data-field-inputpos-res-320-value="v" data-field-inputmargbottom-res-320-value="10" data-field-buttonwidth-res-320-value="260"> <div class='tn-atom tn-atom__form'></div> <!--googleoff: all--> <!--noindex--> <div data-nosnippet="true" class="tn-atom__inputs-wrapp" style="display:none;"> <textarea class="tn-atom__inputs-textarea">[{"lid":"1531306540094","ls":"10","loff":"","li_type":"em","li_ph":"Email","li_req":"y","li_nm":"Email"}]</textarea> </div> <!-- Form export deps: https://static.tildacdn.com/css/tilda-zero-form-errorbox.min.css https://static.tildacdn.com/css/tilda-zero-form-horizontal.min.css https://static.tildacdn.com/js/tilda-phone-mask-1.1.min.js https://static.tildacdn.com/css/tilda-date-picker-1.0.min.css https://static.tildacdn.com/js/tilda-date-picker-1.0.min.js https://static.tildacdn.com/js/tilda-calc-1.0.min.js https://static.tildacdn.com/js/tilda-upwidget-1.1.min.js https://static.tildacdn.com/js/uploadcare-3.x.full.min.js https://static.tildacdn.com/js/uploadcare-3.x.min.js https://static.tildacdn.com/js/tilda-range-1.0.min.js https://static.tildacdn.com/css/tilda-range-1.0.min.css https://static.tildacdn.com/js/tilda-img-select-1.0.min.js https://static.tildacdn.com/css/tilda-img-select-1.0.min.css --> <!--/noindex--> <!--googleon: all--> </div> <div class='t396__elem tn-elem tn-elem__1581443221564876573371' data-elem-id='1564876573371' data-elem-type='text' data-field-top-value="330" data-field-left-value="445" data-field-width-value="310" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-fontsize-value="16" data-field-top-res-320-value="375" data-field-left-res-320-value="30" data-field-width-res-320-value="260" data-field-fontsize-res-320-value="14" data-field-top-res-480-value="310" data-field-left-res-480-value="85" data-field-top-res-640-value="315" data-field-left-res-640-value="165" data-field-top-res-960-value="335" data-field-left-res-960-value="325"> <div class='tn-atom'field='tn_text_1564876573371'>Нажимая на кнопку, вы соглашаетесь с условиями обработки данных<br></div> </div> <div class='t396__elem tn-elem tn-elem__1581443221565701393805' data-elem-id='1565701393805' data-elem-type='text' data-field-top-value="375" data-field-left-value="445" data-field-width-value="310" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-field-fontsize-value="16" data-field-top-res-320-value="420" data-field-left-res-320-value="30" data-field-width-res-320-value="260" data-field-fontsize-res-320-value="14" data-field-top-res-480-value="360" data-field-left-res-480-value="85" data-field-top-res-640-value="360" data-field-left-res-640-value="165" data-field-top-res-960-value="380" data-field-left-res-960-value="325"> <div class='tn-atom'field='tn_text_1565701393805'><u><a href="https://school-xyz.com/privacy" style="color: rgb(102, 102, 102);" data-redactor-tag="a">Политика конфеденциальности</a></u><br></div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('158144322');});});</script> <!-- /T396 --> </div> <div id="rec158144323" class="r t-rec" style=" " data-animationappear="off" data-record-type="142"> <!-- T132 --> <div class="t132"> <div class="t-container_100"> </div> </div> <script>var images=document.querySelectorAll('.t132 img.wire');Array.prototype.forEach.call(images,function(image) {image.addEventListener('load',function() {t132_unifyHeights();});});window.addEventListener('resize',function() {t_onFuncLoad('t132_unifyHeights',function() {t132_unifyHeights();});});t_onReady(function() {t_onFuncLoad('t132_unifyHeights',function() {t132_unifyHeights();});if(typeof jQuery!=='undefined') {$('.t132').bind('displayChanged',function() {t132_unifyHeights();});} else {var rec=document.getElementById('rec158144323');if(!rec) return;var wrapperBlock=rec.querySelector('.t132');if(wrapperBlock) {t_onFuncLoad('t132_unifyHeights',function() {t132_unifyHeights();});wrapperBlock.addEventListener("displayChanged",function() {t132_unifyHeights();});}}});</script> </div> <!--footer--> <footer id="t-footer" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="1006203" data-tilda-page-id="4312269" data-tilda-page-alias="footer" data-tilda-formskey="89ebde3c6fe46b219c249763fe551eda" data-tilda-stat-scroll="yes" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes" data-tilda-ts="y" data-tilda-project-country="RU"> <div id="rec517261770" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- автоматизация промобара для курсов и профессий --> <script>
$(function() {
// текст для промобара
$('.heading-1 .tn-atom').html('Учись играючи и со скидкой до 55%'); // заголовок
$('.descr-1 .tn-atom').html('При покупке этого курса ты получишь в подарок любую игру до 2000 ₽ в Steam'); // описание
// описание для сайта Pro
$('.descr-pro .tn-atom').html('Дарим игры: любую до 2000 ₽ в Steam — при покупке курса, Resident Evil Requiem — при покупке профессии');
let currentDate = new Date();
function daysInMonth (month, year) {
return new Date(year, month + 1, 0).getDate();
}
let daysInMonthQuantity = daysInMonth(currentDate.getMonth(), currentDate.getYear());
let numOfMonth = currentDate.getDate();
let numOfMonthFormatted;
let currentMonth = currentDate.getMonth() + 1;
let currentMonthFormatted = currentMonth >= 10 ? currentMonth : '0' + currentMonth;
function setDateEnd(additionalDays) {
if (numOfMonth + additionalDays > daysInMonthQuantity) {
numOfMonthFormatted = '0' + (numOfMonth + additionalDays - daysInMonthQuantity);
currentMonthFormatted = currentMonth + 1 >= 10 ? currentMonth + 1 : '0' + (currentMonth + 1);
} else {
numOfMonthFormatted = numOfMonth + additionalDays >= 10 ? numOfMonth + additionalDays : '0' + (numOfMonth + additionalDays);
}
}
/* указываем дату окончания акции в промобаре */
if (currentDate.getDay() == 1) { // если сегодня понедельник
setDateEnd(3);
} else if (currentDate.getDay() == 2) { // если сегодня вторник
setDateEnd(2);
} else if (currentDate.getDay() == 3) { // если сегодня среда
setDateEnd(1);
} else if (currentDate.getDay() == 4) { // если сегодня четверг
setDateEnd(0);
} else if (currentDate.getDay() == 5) { // если сегодня пятница
setDateEnd(2);
} else if (currentDate.getDay() == 6) { // если сегодня суббота
setDateEnd(1);
} else if (currentDate.getDay() == 0) { // если сегодня воскресенье
setDateEnd(0);
}
if (document.querySelector('.promobar__date-end .tn-atom')) {
document.querySelector('.promobar__date-end .tn-atom').textContent = `до ${numOfMonthFormatted}.${currentMonthFormatted}`;
// document.querySelector('.promobar__date-end .tn-atom').textContent = `до 25.02`;
}
/* end указываем дату окончания акции в промобаре на продуктовых страницах */
});
</script> <style>
.descr-1 .tn-atom {
text-wrap-style: balance;
}
</style> <!-- nominify end --> </div> </div> </div> </div> <div id="rec521328895" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- скрыть/показать блок с акцией на курсах и профессиях --> <style>
/* блок с акцией */
#rec1123441821 {
/*display: none;*/
}
</style> <!-- nominify end --> </div> </div> </div> </div> <div id="rec703641300" class="r t-rec uc-popup-grant" style=" " data-animationappear="off" data-record-type="702"> <!-- T702 --> <div class="t702"> <div
class="t-popup" data-tooltip-hook="#popup:get-consult" data-track-popup='/tilda/popup/rec703641300/opened' role="dialog"
aria-modal="true"
tabindex="-1"
aria-label="Запишись на демо-урок" style="background-color: rgba(0,0,0,0.80);"> <div class="t-popup__close t-popup__block-close"> <button
type="button"
class="t-popup__close-wrapper t-popup__block-close-button"
aria-label="Закрыть диалоговое окно"> <svg role="presentation" class="t-popup__close-icon" width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="#ffffff" fill-rule="evenodd"> <rect transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> <rect transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> </g> </svg> </button> </div> <style>@media screen and (max-width:560px){#rec703641300 .t-popup__close-icon g{fill:#ffffff !important;}}</style> <style> #rec703641300 .t-popup__container{border-radius:24px;overflow:hidden;}@media (max-width:480px){#rec703641300 .t-popup__container{border-radius:16px;overflow:hidden;}}</style> <div class="t-popup__container t-width t-width_6"
style="background-color:#23232a;" data-popup-type="702"> <img class="t702__img t-img"
src="https://thb.tildacdn.com/tild3831-3666-4563-b734-333035633330/-/empty/_1.jpg" data-original="https://static.tildacdn.com/tild3831-3666-4563-b734-333035633330/_1.jpg"
imgfield="img"
alt=""> <div class="t702__wrapper"> <div class="t702__text-wrapper t-align_left"> <div class="t702__title t-title t-title_xxs" id="popuptitle_703641300">Запишись на демо-урок</div> <div class="t702__descr t-descr t-descr_xs">Зачем записываться?<br /><ul><li data-list="bullet">Познакомим тебя с платформой и процессом обучения.</li><li data-list="bullet">Подарим 1 из 9 курсов на выбор.</li><li data-list="bullet">Получишь доступ к пробной части курса и полную программу.</li></ul></div> </div> <form
id="form703641300" name='form703641300' role="form" action='' method='POST' data-formactiontype="2" data-inputbox=".t-input-group" class="t-form js-form-proccess t-form_inputs-total_5 " data-success-callback="t702_onSuccess"> <input type="hidden" name="formservices[]" value="d19077112a38917a19ec3d0d3a0d2542" class="js-formaction-services"> <input type="hidden" name="formservices[]" value="79efdc56002e2fb9160ff9fc91750f61" class="js-formaction-services"> <input type="hidden" name="formservices[]" value="9349cade6ff136590942028e6ee8bdd0" class="js-formaction-services"> <input type="hidden" name="tildaspec-formname" tabindex="-1" value="Заявка на бесплатный демо-урок"> <!-- @classes t-title t-text t-btn --> <div class="js-successbox t-form__successbox t-text t-text_md"
aria-live="polite"
style="display:none;"></div> <div
class="t-form__inputsbox
t-form__inputsbox_vertical-form t-form__inputsbox_inrow "> <div
class="t-input-group t-input-group_nm " data-input-lid="3316997753180" data-field-type="nm" data-field-name="name"> <div class="t-input-block " style="border-radius:16px;"> <input
type="text"
autocomplete="name"
name="name"
id="input_3316997753180"
class="t-input js-tilda-rule"
value=""
placeholder="Как тебя зовут?" data-tilda-req="1" aria-required="true" data-tilda-rule="name"
aria-describedby="error_3316997753180"
style="color:#ffffff;border:1px solid #373742;border-radius:16px;"> </div> <div class="t-input-error" aria-live="polite" id="error_3316997753180"></div> </div> <div
class="t-input-group t-input-group_em " data-input-lid="1016997753181" data-field-type="em" data-field-name="email"> <div class="t-input-block " style="border-radius:16px;"> <input
type="email"
autocomplete="email"
name="email"
id="input_1016997753181"
class="t-input js-tilda-rule"
value=""
placeholder="Твоя почта" data-tilda-req="1" aria-required="true" data-tilda-rule="email"
aria-describedby="error_1016997753181"
style="color:#ffffff;border:1px solid #373742;border-radius:16px;"> </div> <div class="t-input-error" aria-live="polite" id="error_1016997753181"></div> </div> <div
class="t-input-group t-input-group_ph " data-input-lid="1016997753182" data-field-async="true" data-field-type="ph" data-field-name="phone"> <div class="t-input-block " style="border-radius:16px;"> <input
type="tel"
autocomplete="tel"
name="phone"
id="input_1016997753182" data-phonemask-init="no" data-phonemask-id="703641300" data-phonemask-lid="1016997753182" data-phonemask-maskcountry="RU" class="t-input js-phonemask-input js-tilda-rule"
value=""
placeholder="+7(000)000-0000" data-tilda-req="1" aria-required="true" aria-describedby="error_1016997753182"
style="color:#ffffff;border:1px solid #373742;border-radius:16px;"> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t_loadJsFile',function() {t_loadJsFile('https://static.tildacdn.com/js/tilda-phone-mask-1.1.min.js',function() {t_onFuncLoad('t_form_phonemask_load',function() {var phoneMasks=document.querySelectorAll('#rec703641300 [data-phonemask-lid="1016997753182"]');t_form_phonemask_load(phoneMasks);});})})});</script> </div> <div class="t-input-error" aria-live="polite" id="error_1016997753182"></div> </div> <input type="hidden" name="519683" tabindex="-1" value="true"> <input type="hidden" name="519697" tabindex="-1" value="Консультация"> <div
class="t-input-group t-input-group_cb " data-input-lid="1016997753185" data-field-type="cb" data-field-name="privacy" data-default-value=y
> <div class="t-input-block " style="border-radius:16px;"> <label
class="t-checkbox__control t-checkbox__control_flex t-text t-text_xs"
style="color:#ffffff"> <input
type="checkbox"
name="privacy"
value="yes"
class="t-checkbox js-tilda-rule"
checked
> <div
class="t-checkbox__indicator"
style="border-color:#ffffff"></div> <span><div style="font-size: 14px;" data-customstyle="yes">Я согласен с <a href="https://school-xyz.com/privacy-policy" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none; font-weight: 400;">Политикой обработки персональных данных, Согласием Пользователя сайта на обработку персональных данных</a> и <a href="https://school-xyz.com/agreement" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none; font-weight: 400;">договором публичной оферты</a></div></span></label> <style>#rec703641300 .t-checkbox__indicator:after{border-color:#ffffff;}</style> </div> <div class="t-input-error" aria-live="polite" id="error_1016997753185"></div> </div> <div
class="t-input-group t-input-group_cb " data-input-lid="1016997753186" data-field-type="cb" data-field-name="check" data-default-value=y
> <div class="t-input-block " style="border-radius:16px;"> <label
class="t-checkbox__control t-checkbox__control_flex t-text t-text_xs"
style="color:#ffffff"> <input
type="checkbox"
name="check"
value="yes"
class="t-checkbox js-tilda-rule"
checked
> <div
class="t-checkbox__indicator"
style="border-color:#ffffff"></div> <span><div style="font-size: 14px;" data-customstyle="yes">Я согласен получать рекламную рассылку и ознакомился с <a href="https://school-xyz.com/privacy-policy" target="_blank" rel="noreferrer noopener" style="color: rgb(255, 255, 255); border-bottom: 1px solid rgb(255, 255, 255); box-shadow: none; text-decoration: none; font-weight: 400;">Согласием на получение рекламной рассылки</a></div></span></label> <style>#rec703641300 .t-checkbox__indicator:after{border-color:#ffffff;}</style> </div> <div class="t-input-error" aria-live="polite" id="error_1016997753186"></div> </div> <input type="hidden" name="526133" tabindex="-1" value="Заявка на бесплатный демо-урок"> <div class="t-form__errorbox-middle"> <!--noindex--> <div
class="js-errorbox-all t-form__errorbox-wrapper"
style="display:none;" data-nosnippet
tabindex="-1"
aria-label="Ошибки при заполнении формы"> <ul
role="list"
class="t-form__errorbox-text t-text t-text_md"> <li class="t-form__errorbox-item js-rule-error js-rule-error-all"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-req"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-email"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-name"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-phone"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-minlength"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-string"></li> </ul> </div> <!--/noindex--> </div> <div class="t-form__submit"> <button
class="t-submit t-btnflex t-btnflex_type_submit t-btnflex_md"
type="submit"><span class="t-btnflex__text">Отправить</span> <style>#rec703641300 .t-btnflex.t-btnflex_type_submit {color:#ffffff;background-color:#6060ff;--border-width:0px;border-style:none !important;border-radius:50px;box-shadow:none !important;font-family:BebasRoboto;font-weight:400;transition-duration:0.2s;transition-property:background-color,color,border-color,box-shadow,opacity,transform,gap;transition-timing-function:ease-in-out;}@media (hover:hover) {#rec703641300 .t-btnflex.t-btnflex_type_submit:not(.t-animate_no-hover):hover {color:#17171b !important;background-color:#ffffff !important;}#rec703641300 .t-btnflex.t-btnflex_type_submit:not(.t-animate_no-hover):focus-visible {color:#17171b !important;background-color:#ffffff !important;}}</style></button> </div> </div> <div class="t-form__errorbox-bottom"> <!--noindex--> <div
class="js-errorbox-all t-form__errorbox-wrapper"
style="display:none;" data-nosnippet
tabindex="-1"
aria-label="Ошибки при заполнении формы"> <ul
role="list"
class="t-form__errorbox-text t-text t-text_md"> <li class="t-form__errorbox-item js-rule-error js-rule-error-all"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-req"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-email"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-name"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-phone"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-minlength"></li> <li class="t-form__errorbox-item js-rule-error js-rule-error-string"></li> </ul> </div> <!--/noindex--> </div> </form> <style>#rec703641300 input::-webkit-input-placeholder {color:#ffffff;opacity:0.5;}#rec703641300 input::-moz-placeholder{color:#ffffff;opacity:0.5;}#rec703641300 input:-moz-placeholder {color:#ffffff;opacity:0.5;}#rec703641300 input:-ms-input-placeholder{color:#ffffff;opacity:0.5;}#rec703641300 textarea::-webkit-input-placeholder {color:#ffffff;opacity:0.5;}#rec703641300 textarea::-moz-placeholder{color:#ffffff;opacity:0.5;}#rec703641300 textarea:-moz-placeholder {color:#ffffff;opacity:0.5;}#rec703641300 textarea:-ms-input-placeholder{color:#ffffff;opacity:0.5;}</style> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t702_initPopup',function() {t702_initPopup('703641300');});});</script> <style> #rec703641300 .t702__title{color:#ffffff;font-family:'BebasRoboto';font-weight:500;text-transform:uppercase;}@media screen and (min-width:900px){#rec703641300 .t702__title{font-size:40px;line-height:1;}}@media screen and (min-width:480px) and (max-width:900px){#rec703641300 .t702__title{font-size:32px;}}@media screen and (max-width:480px),(orientation:landscape) and (max-height:480px){#rec703641300 .t702__title{font-size:32px;line-height:1;}}#rec703641300 .t702__descr{font-size:16px;line-height:1.6;color:#ffffff;font-weight:400;}@media screen and (max-width:480px),(orientation:landscape) and (max-height:480px){#rec703641300 .t702__descr{font-size:14px;line-height:1.6;}}</style> </div> <div id="rec684407761" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стили для #popup:get-consult --> <style>
.uc-popup-grant .t-popup__close {
top: 20px;
right: 20px !important;
width: 40px;
height: 40px;
/*background: rgb(255 255 255 / 20%);*/
background: #23232a;
border-radius: 50px;
}
.uc-popup-grant .t-popup__block-close-button {
width: 16px;
padding: 12px;
}
.uc-popup-grant .t-popup__close-icon {
width: 16px;
height: 16px;
}
.uc-popup-grant .t702 .t-popup__container {
padding: 8px;
box-sizing: border-box;
}
.uc-popup-grant .t702 .t702__img {
border-radius: 16px;
}
.uc-popup-grant .t702 .t702__wrapper {
padding: 24px;
}
/* градиент для заголовка */
.uc-popup-grant .t702__title {
/*background: linear-gradient(#FFEBA9, #D9B339 100%);*/
/*-webkit-background-clip: text;*/
/*-webkit-text-fill-color: transparent;*/
display: inline-block;
}
.uc-popup-grant .t-descr {
display: inline-block;
}
.uc-popup-grant .t-form__inputsbox {
display: flex;
flex-direction: column;
}
.uc-popup-grant .t702 .t-input-group {
margin-bottom: 8px;
}
.uc-popup-grant .t702 .t-input {
border-color: rgb(255 255 255 / 10%) !important;
}
/* стилизация чекбоксов в зеро формах */
.uc-popup-grant .t-checkbox__control {
display: flex;
column-gap: 8px;
}
.uc-popup-grant .t-checkbox__indicator {
width: 24px;
height: 24px;
margin-right: 0;
border: 2px solid rgb(255 255 255 / 50%) !important;
border-radius: 4px;
}
.uc-popup-grant .t702 .t-checkbox__control .t-checkbox:checked ~ .t-checkbox__indicator {
border-color: rgb(255 255 255 / 50%) !important;
background: transparent;
}
.uc-popup-grant .t-checkbox__indicator:after {
width: 5px;
height: 11px;
left: 7px;
top: 1px;
border-width: 0 2px 2px 0;
border-color: rgb(255 255 255 / 50%) !important;
}
/* конец стилизация чекбоксов в зеро формах */
.uc-popup-grant .t-input-group_cb {
order: 5;
}
.uc-popup-grant .t-input-group_cb div[data-customstyle='yes'] {
color: rgb(255 255 255 / 50%) !important;
font-size: 12px !important;
line-height: 1.2;
}
.uc-popup-grant .t-input-group_cb div[data-customstyle='yes'] :is(span, a) {
color: rgb(255 255 255 / 50%) !important;
border-color: rgb(255 255 255 / 50%) !important;
}
.uc-popup-grant .t702 .t-form__submit {
margin-top: 8px;
margin-bottom: 16px;
}
.uc-popup-grant .t702 .t702__form-bottom-text {
margin-top: 24px;
}
/* стилизация кнопки Телеграм */
.uc-popup-grant .t702__form-bottom-text a {
display: flex;
justify-content: center;
align-items: center;
column-gap: 8px;
height: 54px;
background: #fff;
border-radius: 50px;
color: #17171b !important;
transition: .2s ease;
}
.uc-popup-grant .t702__form-bottom-text a:hover {
background: #f5f5f5;
}
.uc-popup-grant .t702__form-bottom-text a:before {
content: '';
width: 1.5em;
aspect-ratio: 1;
background: url(https://static.tildacdn.com/tild3738-3936-4437-b162-383836343233/Artboard.svg);
background-size: contain;
background-repeat: no-repeat;
}
/* end стилизация кнопки Телеграм */
@media (max-width: 639px) {
.uc-popup-grant .t-popup {
padding: 0 10px;
}
.uc-popup-grant .t-popup[style="display: block;"] {
display: flex !important;
flex-wrap: wrap;
align-items: center;
}
.uc-popup-grant .t-popup .t-popup__container {
flex-wrap: wrap;
min-height: fit-content;
/*padding: 0;*/
margin: 24px 0;
overflow: hidden;
}
.uc-popup-grant .t702 .t702__img {
border-radius: 10px;
}
.uc-popup-grant .t-popup .t-popup__container .t702__wrapper {
background: inherit;
-webkit-transform: none;
-o-transform: none;
transform: none;
padding: 24px 8px 8px;
}
.uc-popup-grant .t-popup__close {
/*top: 16px;*/
/*right: 16px !important;*/
left: auto;
padding: 0;
align-items: center;
justify-content: center;
zoom: 0.7;
}
.uc-popup-grant .t-popup__block-close-button {
margin-right: 0;
}
.uc-popup-grant .t702 .t-input-group {
margin-bottom: 8px;
}
.uc-popup-grant .t702 .t-input {
border-radius: 8px !important;
-moz-border-radius: 8px !important;
-webkit-border-radius: 8px !important;
}
.uc-popup-grant .t-input-group_cb div[data-customstyle='yes'] {
font-size: 12px !important;
}
}
</style> <script>
// переносим крестик внутрь попапа
document.addEventListener('DOMContentLoaded', function() {
$('.uc-popup-grant .t-popup').each(function() {
$(this).find('.t-popup__container').prepend($(this).find('.t-popup__close'));
});
});
</script> <!-- nominify end --> </div> </div> </div> </div> <!-- <strong>▼ Форма для новой версии футера ▼</strong> --> <div id="rec1221022041" class="r t-rec t-rec_pt_0" style="padding-top:0px; " data-animationappear="off" data-record-type="121" data-alias-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- новая версия футера от 12.08.25 --> <footer> <div class="footer__wrap"> <div class="footer__navigation"> <div class="footer__chapter-links"> <div class="footer__chapter-links-heading">О школе</div> <nav class="footer__chapter-links-wrap"> <ul class="footer__chapter-links-list"> <li class="footer__list-link"><a href="https://www.school-xyz.com/license">Лицензия</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/feedback">Отзывы студентов</a></li> <!--<li class="footer__list-link"><a href="https://school-xyz.com/raboty-studentov">Работы студентов</a></li>--> <!--<li class="footer__list-link"><a href="https://school-xyz.com/rassrochka">Рассрочка</a></li>--> <li class="footer__list-link"><a href="#popup:rec">Реквизиты</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/certificate">Подарочный сертификат</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/adminform">Оставить отзыв руководству</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/info-about-it-activities">Об IT деятельности</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/lms">Об обучающей платформе</a></li> <!--<li class="footer__list-link"><a href="https://school-xyz.com/career-xyz">Вакансии</a></li>--> <li class="footer__list-link"><a href="https://career-center.ultimate-education.ru" target="_blank">Карьерный центр</a></li> </ul> </nav> </div> <div class="footer__chapter-links"> <div class="footer__chapter-links-heading">Направления</div> <nav class="footer__chapter-links-wrap"> <ul class="footer__chapter-links-list"> <li class="footer__list-link"><a href="https://school-xyz.com/3d-modelirovanie">3D-моделирование</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/geymdizayn">Геймдизайн</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/2d-illyustraciya">2D-иллюстрация</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/programmirovanie">Программирование</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/menedzhement">Менеджмент</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/video-i-speceffekty">Видео и спецэффекты</a></li> <!--<li class="footer__list-link"><a href="https://www.school-xyz.com/courses/3ds-max">3ds Max: курсы и профессии</a></li>--> <li class="footer__list-link"><a href="https://school-xyz.com/courses">Все курсы</a></li> </ul> </nav> </div> <div class="footer__chapter-links-wrapper"> <div class="footer__chapter-links"> <div class="footer__chapter-links-heading">Сотрудничество</div> <nav class="footer__chapter-links-wrap"> <ul class="footer__chapter-links-list"> <!--<li class="footer__list-link"><a href="https://school-xyz.com/b2b">Корпоративное обучение</a></li>--> <li class="footer__list-link"><a href="https://school-xyz.com/we-are-looking-for-new-teachers">Вакансии для экспертов</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/partners">Партнёрская программа</a></li> </ul> </nav> </div> <div class="footer__chapter-links"> <div class="footer__chapter-links-heading">Проекты</div> <nav class="footer__chapter-links-wrap"> <ul class="footer__chapter-links-list"> <li class="footer__list-link"><a href="https://media-xyz.com/">XYZ Media</a></li> <li class="footer__list-link"><a href="https://school-xyz.com/mentorstvo-s-gamedev-magistrami">Менторство в геймдеве</a></li> <li class="footer__list-link"><a href="https://thecreativity.ru/plus">Креативити</a></li> </ul> </nav> </div> </div> <div class="footer__contacts-container"> <div class="footer__contacts-wrap"> <a href="tel:+74996474926" class="">+7 (499) 647-49-26</a> <a href="tel:+74993030408" class="">+7 (499) 303-04-08</a> <a href="mailto:hello@school-xyz.com" class="footer__contacts-email">hello@school-xyz.com</a> </div> <div class="footer__social-links"> <a href="https://artstation.com/xyzschool" class="footer__social-icon"> <img src="https://static.tildacdn.com/tild6138-6134-4835-a431-326434353061/artstation.svg" class="artstation" alt="Иконка Artstation"> </a> <a href="https://vk.com/xyz_gamedev" class="footer__social-icon"> <img src="https://static.tildacdn.com/tild3933-6261-4533-b566-626135393434/vk.svg" class="vk" alt="Иконка VK"> </a> <a href="https://youtube.com/channel/UCtJsE0SDhyS4ib2evb5k3gg/videos" class="footer__social-icon"> <img src="https://static.tildacdn.com/tild6539-3932-4764-b961-663633393636/youtube.svg" class="youtube" alt="Иконка Youtube"> </a> <a href="https://t.me/xyz_cg" class="footer__social-icon"> <img src="https://static.tildacdn.com/tild3461-3738-4566-b931-323833326538/telegram.svg" class="telegram" alt="Иконка Telegram"> </a> </div> </div> </div> <div class="footer__other-info"> <div class="footer__other-info-left-side"> <p>©2026, XYZ</p> <div class="footer__awards"> <img src="" class="footer__runet-icon" alt="Иконка Рунет"> <a href="https://vk.com/wall-124560669_50286">Премия Рунета 2020, Игровая индустрия</a> </div> <div class="footer__awards"> <img src="" class="footer__skolkovo-icon" alt="Иконка Сколково"> <a href="https://navigator.sk.ru/?q=N4IgZiBcoC4IYHMDOB9GBPADgUyiA9gE4gC%2BANCEngLQC22tARtoSkgJYB2AxrhZlACMJIA">Участник Сколково</a> </div> </div> <div class="footer__legal-info"> <a href="https://www.school-xyz.com/sitemap">Карта сайта</a> <a href="https://school-xyz.com/info-about-educational-organization">Сведения об образовательной организации</a> <a href="https://school-xyz.com/privacy-policy">Обработка персональных данных</a> <a href="https://school-xyz.com/agreement">Оферта</a> <a href="#popup:sout">СОУТ</a> </div> </div> </div> </footer> <style>
:root {
font-family: 'BebasRoboto';
--color-bg: #17171b;
--color-text: #fff;
--color-text-opacity: rgba(255, 255, 255, 0.5);
--color-accent: #6060ff;
--color-border: #373742;
--color-bg-contacts: #2B2A37;
--color-bg-input: #212127;
--color-social-icon: var(--color-accent);
--color-bg-social-icon: #2B2B34;
--url-runet-icon: url(https://static.tildacdn.com/tild6136-3933-4465-b933-613637353637/runet-icon-dark.svg);
--url-skolkovo-icon: url(https://static.tildacdn.com/tild3235-3332-4635-a537-396662353164/skolkovo-icon-dark.svg);
--url-arrow-down: url(https://static.tildacdn.com/tild6663-3965-4735-b337-393062313665/arrow-down-dark.svg);
}
:root .light-theme {
--color-bg: #fff;
--color-text: #17171b;
--color-text-opacity: rgba(23, 23, 27, 0.4);
--color-border: #EDEDED;
--color-bg-contacts: #f5f5f5;
--color-bg-input: #fff;
--color-bg-social-icon: #fff;
--url-runet-icon: url(https://static.tildacdn.com/tild6133-3337-4530-b063-336537643538/runet-icon-light_1.svg);
--url-skolkovo-icon: url(https://static.tildacdn.com/tild3737-3331-4464-a437-613336636531/skolkovo-icon-light.svg);
--url-arrow-down: url(https://static.tildacdn.com/tild3737-3062-4562-b662-623536383335/arrow-down-light.svg);
}
.t123 footer {
position: relative;
background: var(--color-bg);
width: 100%;
will-change: transform;
-webkit-transform: translateZ(0);
padding-top: 112px;
}
.footer__wrap {
display: flex;
max-width: 1160px;
margin: 0 auto;
box-sizing: border-box;
flex-wrap: wrap;
column-gap: 16px;
}
.footer__navigation {
display: flex;
flex-wrap: wrap;
width: 100%;
column-gap: 16px;
padding-bottom: 64px;
margin-bottom: 40px;
border-bottom: 1px solid var(--color-border);
}
.footer__chapter-links-wrapper {
display: flex;
flex-direction: column;
row-gap: 32px;
}
.footer__chapter-links {
width: 278px;
flex-shrink: 0;
}
.footer__chapter-links:last-child {
flex-shrink: 1;
}
#allrecords .footer__chapter-links-list {
display: flex;
flex-direction: column;
row-gap: 8px;
list-style-type: none;
padding-top: 16px;
padding-left: 0;
margin-bottom: 0;
}
.footer__chapter-links-heading {
font-weight: 600;
font-size: 24px;
line-height: 130%;
color: var(--color-text);
}
.footer__list-link {
font-weight: 400;
font-size: 14px;
line-height: 160%;
}
#allrecords .footer__list-link a {
text-decoration: none;
transition: .2s ease;
color: var(--color-text);
}
#allrecords .footer__list-link a:hover {
color: var(--color-accent);
}
.footer__contacts-container {
display: flex;
align-items: flex-start;
flex-direction: column;
row-gap: 24px;
width: 278px;
box-sizing: border-box;
}
.footer__contacts-wrap {
display: flex;
flex-direction: column;
row-gap: 4px;
}
#allrecords .footer__contacts-wrap a {
font-weight: 600;
font-size: 24px;
line-height: 130%;
color: var(--color-text);
text-decoration: none;
transition: .2s ease;
}
#allrecords .footer__contacts-wrap a:hover {
color: var(--color-accent);
}
#allrecords a.footer__contacts-email {
font-weight: 400;
font-size: 18px;
line-height: 160%;
color: var(--color-accent);
transition: .2s ease;
}
#allrecords a.footer__contacts-email:hover {
color: var(--color-text);
}
.footer__social-links {
display: flex;
column-gap: 8px;
}
.footer__social-links a {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
overflow: hidden;
transition: .2s ease;
}
.footer__social-icon:hover {
transform: translateY(-4px);
}
.footer__other-info {
display: flex;
justify-content: space-between;
column-gap: 24px;
padding-bottom: 40px;
width: 100%;
}
.footer__other-info-left-side {
display: flex;
align-items: center;
column-gap: 32px;
}
.footer__other-info p {
font-size: 12px;
line-height: 18px;
color: var(--color-text-opacity);
}
.footer__awards {
display: flex;
align-items: center;
column-gap: 10px;
max-width: 160px;
}
#allrecords .footer__awards a {
font-size: 12px;
line-height: 18px;
color: var(--color-text-opacity);
text-decoration: none;
}
.footer__runet-icon {
content: var(--url-runet-icon);
font-size: 10px;
}
.footer__skolkovo-icon {
content: var(--url-skolkovo-icon);
font-size: 10px;
}
.footer__skolkovo-icon + a {
width: min-content;
}
.footer__legal-info {
display: flex;
align-items: center;
column-gap: 16px;
}
#allrecords .footer__legal-info a {
font-size: 12px;
line-height: 18px;
color: var(--color-text-opacity);
text-decoration: none;
transition: .2s ease;
}
#allrecords .footer__legal-info a:hover {
color: var(--color-text);
}
@media screen and (max-width: 1199px) {
.t123 footer {
padding-top: 96px;
}
.footer__wrap {
max-width: 940px;
}
.footer__contacts-container {
width: fit-content;
}
.footer__navigation {
row-gap: 32px;
padding-bottom: 40px;
}
.footer__chapter-links-wrapper {
flex-direction: row;
column-gap: 16px;
order: 4;
}
.footer__chapter-links {
width: 304px;
}
.footer__other-info {
flex-direction: column;
row-gap: 16px;
}
.footer__other-info-left-side {
column-gap: 24px;
}
.footer__legal-info {
column-gap: 16px;
}
}
@media screen and (max-width: 959px) {
.t123 footer {
padding-top: 88px;
}
.footer__wrap {
max-width: 620px;
padding-top: 16px;
border-top: 1px solid var(--color-border);
}
.footer__navigation {
flex-direction: column;
row-gap: 16px;
width: 100%;
}
.footer__chapter-links {
width: 100%;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border);
}
.footer__chapter-links-wrapper {
order: 3;
flex-direction: column;
row-gap: 16px;
}
.footer__chapter-links-heading {
position: relative;
display: flex;
align-items: center;
will-change: transform;
}
.footer__chapter-links-heading::after {
content: ' ';
background-image: var(--url-arrow-down);
width: 24px;
height: 24px;
position: absolute;
right: 0;
transition: .4s ease;
}
.footer__chapter-links-heading.open::after {
transform: rotateX(180deg);
}
.footer__chapter-links-wrap {
display: none;
}
.footer__contacts-container {
width: 620px;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
height: fit-content;
row-gap: 32px;
padding-top: 24px;
order: 4;
}
.footer__other-info {
flex-wrap: wrap;
justify-content: flex-start;
}
.footer__other-info p {
order: 2;
}
.footer__awards {
order: 3;
}
.footer__legal-info {
flex-wrap: wrap;
order: 1;
max-width: 100%;
width: 100%;
column-gap: 24px;
row-gap: 8px;
}
}
@media screen and (max-width: 639px) {
.t123 footer {
padding-top: 72px;
}
.footer__wrap {
max-width: calc(100% - 24px);
}
.footer__chapter-links-heading {
font-size: 16px;
}
.footer__list-link {
font-size: 12px;
}
.footer__contacts-container {
width: 100%;
row-gap: 16px;
padding-top: 16px;
}
#allrecords .footer__contacts-wrap a {
font-size: 16px;
}
#allrecords a.footer__contacts-email {
font-size: 12px;
}
.footer__social-links {
width: fit-content;
}
.footer__navigation {
padding-bottom: 32px;
margin-bottom: 32px;
}
.footer__other-info {
row-gap: 24px;
justify-content: flex-start;
padding-bottom: 32px;
}
.footer__other-info p {
order: 3;
text-align: center;
font-size: 10px;
width: 100%;
}
.footer__other-info-left-side {
order: 2;
flex-wrap: wrap;
justify-content: flex-start;
row-gap: 16px;
}
.footer__awards {
order: 2;
margin-bottom: 8px;
max-width: 142px;
}
#allrecords .footer__awards a {
font-size: 10px;
}
.footer__legal-info {
align-items: flex-start;
}
#allrecords .footer__legal-info a {
font-size: 10px;
line-height: 16px;
}
}
</style> <script>
document.addEventListener('DOMContentLoaded', function() {
if (document.documentElement.clientWidth < 960) {
$('.footer__chapter-links-heading').click(function() {
$(this).siblings('.footer__chapter-links-wrap').slideToggle();
$(this).toggleClass('open');
});
}
});
</script> <!-- nominify end --> </div> </div> </div> </div> <div id="rec958878116" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стилизация новых чекбоксов от 15.04.25 --> <style>
.t-input-group.t-input-group_cb[data-field-name="privacy"], .t-input-group_cb:has(input[name="privacy"]) {
margin-bottom: 0 !important;
}
/* скрываем чекбокс у согласия с политикой и оффертой */
.t-input-group_cb[data-field-name="privacy"] :is(.t-checkbox, .t-checkbox__indicator),
.t-input-group_cb input[name="privacy"], .t-input-group_cb input[name="privacy"] + .t-checkbox__indicator {
display: none;
}
.t-input-group_cb[data-field-name="privacy"] .t-checkbox__labeltext,
.t-input-group_cb input[name="privacy"] ~ .t-checkbox__labeltext {
margin-left: 0;
}
.t-input-group_cb[data-field-name="privacy"], .t-input-group_cb .t-checkbox__control:has([name="privacy"]) {
pointer-events: none;
}
.t-input-group_cb[data-field-name="privacy"] a, .t-input-group_cb input[name="privacy"] ~ .t-checkbox__labeltext a {
pointer-events: auto;
}
.t-input-group.t-input-group_cb[data-field-name="check"], .t-input-group_cb:has(input[name="check"]) {
margin-top: 16px;
margin-bottom: 0 !important;
}
.t-input-group.t-input-group_cb[data-field-name="check"] .t-checkbox__control {
-ms-flex-align: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
</style> <!-- nominify end --> </div> </div> </div> </div> <!-- <strong>▼ Мини-футер ▼</strong> --> <div id="rec216668598" class="r t-rec t-rec_pb_0" style="padding-bottom:0px; " data-animationappear="off" data-record-type="396"> <!-- T396 --> <style>#rec216668598 .t396__artboard {height:530px;}#rec216668598 .t396__filter {height:530px;}#rec216668598 .t396__carrier{height:530px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec216668598 .t396__artboard,#rec216668598 .t396__filter,#rec216668598 .t396__carrier {height:522px;}#rec216668598 .t396__filter {}#rec216668598 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec216668598 .t396__artboard,#rec216668598 .t396__filter,#rec216668598 .t396__carrier {height:490px;}#rec216668598 .t396__filter {}#rec216668598 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec216668598 .t396__artboard,#rec216668598 .t396__filter,#rec216668598 .t396__carrier {height:649px;}#rec216668598 .t396__filter {}#rec216668598 .t396__carrier {background-attachment:scroll;}}#rec216668598 .tn-elem[data-elem-id="1564645816905"]{z-index:3;top:0px;;left:0px;;width:760px;height:530px;}#rec216668598 .tn-elem[data-elem-id="1564645816905"] .tn-atom{border-radius:24px 24px 24px 24px;background-color:#17171b;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1564645816905"]{top:0px;;left:0px;;width:620px;height:522px;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1564645816905"]{top:0px;;left:0px;;width:620px;height:490px;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1564645816905"]{top:0px;;left:0px;;width:300px;height:649px;border-radius:16px 16px 16px 16px;}#rec216668598 .tn-elem[data-elem-id="1564645816905"] .tn-atom{background-size:cover;border-radius:16px 16px 16px 16px;}}#rec216668598 .tn-elem[data-elem-id="1596205809432"]{color:#ffffff;z-index:4;top:144px;;left:40px;;width:310px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596205809432"] .tn-atom{vertical-align:middle;color:#ffffff;font-size:14px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1596205809432"]{top:136px;;left:40px;;width:300px;height:auto;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1596205809432"]{top:112px;;left:32px;;width:260px;height:auto;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1596205809432"]{top:80px;;left:16px;;width:230px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596205809432"] .tn-atom{font-size:12px;background-size:cover;}}#rec216668598 .tn-elem[data-elem-id="1596206009249"]{color:#ffffff;z-index:5;top:144px;;left:350px;;width:280px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206009249"] .tn-atom{vertical-align:middle;color:#ffffff;font-size:14px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1596206009249"]{top:136px;;left:340px;;width:188px;height:auto;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1596206009249"]{top:112px;;left:322px;;width:260px;height:auto;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1596206009249"]{top:324px;;left:16px;;width:240px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206009249"] .tn-atom{font-size:12px;background-size:cover;}}#rec216668598 .tn-elem[data-elem-id="1596206049927"]{color:#ffffff;z-index:6;top:40px;;left:40px;;width:418px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206049927"] .tn-atom{vertical-align:middle;color:#ffffff;font-size:80px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1;font-weight:500;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1596206049927"]{top:40px;;left:40px;;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206049927"] .tn-atom{font-size:72px;background-size:cover;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1596206049927"]{top:32px;;left:32px;;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206049927"] .tn-atom{font-size:56px;background-size:cover;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1596206049927"]{top:24px;;left:16px;;width:202px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1596206049927"] .tn-atom{font-size:40px;background-size:cover;}}#rec216668598 .tn-elem[data-elem-id="1607933466856"]{color:#ffffff;z-index:7;top:424px;;left:40px;;width:440px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1607933466856"] .tn-atom{vertical-align:middle;color:#ffffff;font-size:14px;font-family:'BebasRoboto',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-width:var(--t396-borderwidth,0);border-style:var(--t396-borderstyle,solid);border-color:var(--t396-bordercolor,transparent);transition:background-color var(--t396-speedhover,0s) ease-in-out,color var(--t396-speedhover,0s) ease-in-out,border-color var(--t396-speedhover,0s) ease-in-out,box-shadow var(--t396-shadowshoverspeed,0.2s) ease-in-out;text-shadow:var(--t396-shadow-text-x,0px) var(--t396-shadow-text-y,0px) var(--t396-shadow-text-blur,0px) rgba(var(--t396-shadow-text-color),var(--t396-shadow-text-opacity,100%));}@media screen and (max-width:1199px){#rec216668598 .tn-elem[data-elem-id="1607933466856"]{top:416px;;left:40px;;width:434px;height:auto;}}@media screen and (max-width:959px){#rec216668598 .tn-elem[data-elem-id="1607933466856"]{top:392px;;left:32px;;height:auto;}}@media screen and (max-width:639px){#rec216668598 .tn-elem[data-elem-id="1607933466856"]{top:549px;;left:16px;;width:268px;height:auto;}#rec216668598 .tn-elem[data-elem-id="1607933466856"] .tn-atom{vertical-align:middle;white-space:normal;font-size:12px;background-size:cover;}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="216668598" data-artboard-screens="320,640,960,1200" data-artboard-height="530" data-artboard-valign="center" data-artboard-upscale="grid" data-artboard-heightmode="hug" data-artboard-height-res-320="649" data-artboard-height-res-640="490" data-artboard-height-res-960="522"> <div class="t396__carrier" data-artboard-recid="216668598"></div> <div class="t396__filter" data-artboard-recid="216668598"></div> <div class='t396__elem tn-elem requisites-bg tn-elem__2166685981564645816905' data-elem-id='1564645816905' data-elem-type='shape' data-field-top-value="0" data-field-left-value="0" data-field-height-value="530" data-field-width-value="760" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-heightmode-value="fixed" data-field-top-res-320-value="0" data-field-left-res-320-value="0" data-field-height-res-320-value="649" data-field-width-res-320-value="300" data-field-widthmode-res-320-value="fixed" data-field-heightmode-res-320-value="fixed" data-field-top-res-640-value="0" data-field-left-res-640-value="0" data-field-height-res-640-value="490" data-field-width-res-640-value="620" data-field-axisx-res-640-value="left" data-field-heightmode-res-640-value="fixed" data-field-top-res-960-value="0" data-field-left-res-960-value="0" data-field-height-res-960-value="522" data-field-width-res-960-value="620" data-field-heightmode-res-960-value="fixed"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2166685981596205809432' data-elem-id='1596205809432' data-elem-type='text' data-field-top-value="144" data-field-left-value="40" data-field-height-value="264" data-field-width-value="310" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-textfit-value="autoheight" data-field-fontsize-value="14" data-field-top-res-320-value="80" data-field-left-res-320-value="16" data-field-width-res-320-value="230" data-field-fontsize-res-320-value="12" data-field-top-res-640-value="112" data-field-left-res-640-value="32" data-field-width-res-640-value="260" data-field-top-res-960-value="136" data-field-left-res-960-value="40" data-field-width-res-960-value="300"> <div class='tn-atom'field='tn_text_1596205809432'><span style="color: rgb(115, 115, 115);">Наименование</span><br>ООО "ИКС ВАЙ ЗЕТ НЕТВОРК" <br><br><span style="color: rgb(115, 115, 115);">ИНН</span><br>9705150153 <br><br><span style="color: rgb(115, 115, 115);">КПП</span> <br>770501001 <br><br><span style="color: rgb(115, 115, 115);">Счёт (₽) </span><br>40702810902500083750<br>1207700448361 ОГРН</div> </div> <div class='t396__elem tn-elem tn-elem__2166685981596206009249' data-elem-id='1596206009249' data-elem-type='text' data-field-top-value="144" data-field-left-value="350" data-field-height-value="242" data-field-width-value="280" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-textfit-value="autoheight" data-field-fontsize-value="14" data-field-top-res-320-value="324" data-field-left-res-320-value="16" data-field-width-res-320-value="240" data-field-fontsize-res-320-value="12" data-field-top-res-640-value="112" data-field-left-res-640-value="322" data-field-width-res-640-value="260" data-field-top-res-960-value="136" data-field-left-res-960-value="340" data-field-width-res-960-value="188"> <div class='tn-atom'field='tn_text_1596206009249'><span style="color: rgb(115, 115, 115);">Банк получателя</span><br> "ООО "Банк Точка" "<br><br><span style="color: rgb(115, 115, 115);">Город </span><br>Москва<br><br><span style="color: rgb(115, 115, 115);">БИК </span><br>044525104<br><br><span style="color: rgb(115, 115, 115);">Корр. счёт </span><br>30101810745374525104</div> </div> <div class='t396__elem tn-elem tn-elem__2166685981596206049927' data-elem-id='1596206049927' data-elem-type='text' data-field-top-value="40" data-field-left-value="40" data-field-height-value="140" data-field-width-value="418" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-textfit-value="autoheight" data-field-fontsize-value="80" data-field-top-res-320-value="24" data-field-left-res-320-value="16" data-field-width-res-320-value="202" data-field-fontsize-res-320-value="40" data-field-top-res-640-value="32" data-field-left-res-640-value="32" data-field-fontsize-res-640-value="56" data-field-top-res-960-value="40" data-field-left-res-960-value="40" data-field-fontsize-res-960-value="72"> <div class='tn-atom'field='tn_text_1596206049927'>РЕКВИЗИТЫ</div> </div> <div class='t396__elem tn-elem tn-elem__2166685981607933466856' data-elem-id='1607933466856' data-elem-type='text' data-field-top-value="424" data-field-left-value="40" data-field-height-value="66" data-field-width-value="440" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="window" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-textfit-value="autoheight" data-field-fontsize-value="14" data-field-top-res-320-value="549" data-field-left-res-320-value="16" data-field-width-res-320-value="268" data-field-heightunits-res-320-value="px" data-field-textfit-res-320-value="autoheight" data-field-widthmode-res-320-value="fixed" data-field-fontsize-res-320-value="12" data-field-top-res-640-value="392" data-field-left-res-640-value="32" data-field-top-res-960-value="416" data-field-left-res-960-value="40" data-field-width-res-960-value="434"> <div class='tn-atom'field='tn_text_1607933466856'><span style="color: rgb(115, 115, 115);">Юридический адрес</span><br>115184, г. Москва, вн.тер.г. муниципальный округ Замоскворечье, ул Бахрушина, д. 10, стр. 2</div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('216668598');});});</script> <!-- /T396 --> </div> <div id="rec216668599" class="r t-rec uc-requisites" style=" " data-record-type="390"> <div class="t390"> <div
class="t-popup" data-tooltip-hook="#popup:rec"
role="dialog"
aria-modal="true"
tabindex="-1"> <div class="t-popup__close t-popup__block-close"> <button
type="button"
class="t-popup__close-wrapper t-popup__block-close-button"
aria-label="Закрыть диалоговое окно"> <svg role="presentation" class="t-popup__close-icon" width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="#fff" fill-rule="evenodd"> <rect transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> <rect transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> </g> </svg> </button> </div> <div class="t-popup__container t-width t-width_8"> </div> </div> </div> <script type="text/javascript">t_onReady(function(){var rec=document.querySelector('#rec216668599');if(!rec) return;rec.setAttribute('data-animationappear','off');rec.style.opacity=1;t_onFuncLoad('t390_initPopup',function() {t390_initPopup('216668599');});});</script> </div> <div id="rec216668601" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стилизация попапа Реквизиты --> <style>
.shirina {
background: none !important;
right: 0 !important;
left: 0 !important;
}
.parpadding {
padding: 0 !important;
}
:is(.uc-requisites, .t390, .t331) .t-popup__close {
top: 24px;
right: 24px !important;
width: 44px;
height: 44px;
background: rgb(255 255 255 / 20%);
border-radius: 30px;
zoom: 0.8;
}
.t-popup__block-close-button {
width: 18px;
padding: 13px;
}
.t-popup__close-icon {
display: block;
width: 18px;
height: 18px;
}
@media (max-width: 639px) {
.uc-requisites .t-popup {
background: rgb(0 0 0 / 40%);
}
.uc-requisites .t-popup__container.t-popup__container-static {
margin: 24px auto;
}
:is(.uc-requisites, .t390) .t-popup__close {
position: absolute;
top: 16px;
right: 16px !important;
}
}
</style> <script>
document.addEventListener('DOMContentLoaded', function() {
var ZeroPopID = '#rec216668598'; //Прописываем ID Zero
var PopWindID = '#rec216668599'; //Прописываем ID PopUp окна BF503
//Переносим ZeroBlock в POPup + Добавляем новый клас в POPup
$(PopWindID + " .t-popup__container").addClass("shirina").html($(ZeroPopID));
$(PopWindID + " .t-popup__container").parent(".t-popup").addClass("parpadding");
// перемещаем крестик внутрь попапа
$('.uc-requisites').each(function() {
$(this).find('.requisites-bg').prepend($(this).find('.t-popup__close'));
});
});
</script> <!-- nominify end --> </div> </div> </div> </div> <div id="rec577164264" class="r t-rec uc-license-popup" style=" " data-record-type="390"> <div class="t390"> <div
class="t-popup" data-tooltip-hook="#popup:license"
role="dialog"
aria-modal="true"
tabindex="-1"> <div class="t-popup__close t-popup__block-close"> <button
type="button"
class="t-popup__close-wrapper t-popup__block-close-button"
aria-label="Закрыть диалоговое окно"> <svg role="presentation" class="t-popup__close-icon" width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="#17171b" fill-rule="evenodd"> <rect transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> <rect transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> </g> </svg> </button> </div> <div class="t-popup__container t-width t-width_6"> <div class="t390__wrapper t-align_center"> <div class="t390__descr t-descr t-descr_xs">Лицензия на образовательную деятельность рег. номер <span style="font-weight: 700;">Л035−1 298−77/179 677</span> от 22 февраля 2022</div> </div> </div> </div> </div> <script type="text/javascript">t_onReady(function(){var rec=document.querySelector('#rec577164264');if(!rec) return;rec.setAttribute('data-animationappear','off');rec.style.opacity=1;t_onFuncLoad('t390_initPopup',function() {t390_initPopup('577164264');});});</script> <style> #rec577164264 .t390__descr{color:#17171b;}</style> </div> <div id="rec586447967" class="r t-rec uc-license-popup" style=" " data-record-type="390"> <div class="t390"> <div
class="t-popup" data-tooltip-hook="#popup:sout"
role="dialog"
aria-modal="true"
tabindex="-1"
aria-label="Результаты СОУТ"> <div class="t-popup__close t-popup__block-close"> <button
type="button"
class="t-popup__close-wrapper t-popup__block-close-button"
aria-label="Закрыть диалоговое окно"> <svg role="presentation" class="t-popup__close-icon" width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="#17171b" fill-rule="evenodd"> <rect transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> <rect transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> </g> </svg> </button> </div> <div class="t-popup__container t-width t-width_8"> <div class="t390__wrapper t-align_left"> <div class="t390__title t-heading t-heading_lg" id="popuptitle_586447967">Результаты СОУТ</div> <div class="t390__descr t-descr t-descr_xs">В декабре 2022 года в соответствии с действующим законодательством Российской Федерации в ООО «ИКС ВАЙ ЗЕТ НЕТВОРК» была проведена специальная оценка условий труда.<br /><br />С учётом требований законодательства Российской Федерации о персональных данных и законодательства Российской Федерации о государственной и об иной охраняемой законом тайне публикуем:<br /><ul><li style="color: rgb(23, 23, 27);"><a href="https://drive.google.com/file/d/1Hf0P73TIs0gn8ZB2SeQOeCdK0y1RaYP_/view" target="_blank" rel="noreferrer noopener" style="color: rgb(23, 23, 27); border-bottom: 1px solid rgb(23, 23, 27); box-shadow: none; text-decoration: none;">сводную ведомость специальной оценки условий труда</a></li><li><a href="https://drive.google.com/file/d/1msPYwdLZh2h88eb6Jrz-xDyERfamTmQc/view" target="_blank" rel="noreferrer noopener" style="color: rgb(23, 23, 27); border-bottom: 1px solid rgb(23, 23, 27); box-shadow: none; text-decoration: none;">перечень мероприятий по улучшению условий и охраны труда работников</a>, на рабочих местах которых проводилась специальная оценка условий труда.</li></ul></div> </div> </div> </div> </div> <script type="text/javascript">t_onReady(function(){var rec=document.querySelector('#rec586447967');if(!rec) return;rec.setAttribute('data-animationappear','off');rec.style.opacity=1;t_onFuncLoad('t390_initPopup',function() {t390_initPopup('586447967');});});</script> <style> #rec586447967 .t390__title{color:#17171b;font-weight:500;text-transform:uppercase;}@media screen and (min-width:900px){#rec586447967 .t390__title{font-size:60px;line-height:1;}}#rec586447967 .t390__descr{font-size:14px;line-height:1.6;color:#17171b;}</style> </div> <div id="rec577164294" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стилизация попапа с лицензией и СОУТ --> <style>
.uc-license-popup .t-popup__container {
border-radius: 20px;
}
.uc-license-popup .t-popup__close {
zoom: 0.8;
background: #F0F0F0;
border-radius: 30px;
width: 44px;
height: 44px;
}
.uc-license-popup .t-popup__block-close-button {
width: 18px;
padding: 13px;
}
.uc-license-popup .t-popup__close-icon {
display: block;
width: 18px;
height: 18px;
}
@media screen and (max-width: 1199px) {
.uc-license-popup .t390__title {
font-size: 52px !important;
}
}
@media screen and (max-width: 959px) {
.uc-license-popup .t390__title {
font-size: 48px !important;
}
}
@media screen and (max-width: 639px) {
.uc-license-popup .t-popup__close {
zoom: 0.6;
top: 16px;
right: 16px;
}
.uc-license-popup .t390__wrapper {
padding: 32px 40px;
}
.uc-license-popup .t390__title {
font-size: 28px !important;
}
.uc-license-popup .t390__descr {
font-size: 10px !important;
}
}
</style> <script>
// переносим крестик внутрь попапа
document.addEventListener('DOMContentLoaded', function() {
$('.uc-license-popup .t-popup').each(function() {
$(this).find('.t-popup__container').prepend($(this).find('.t-popup__close'));
});
});
</script> <!-- nominify end --> </div> </div> </div> </div> <div id="rec602614066" class="r t-rec" style=" " data-animationappear="off" data-record-type="886"> <!-- T886 --> <div class="t886 t886_closed" data-storage-item="t886cookiename_1006203" style=""> <div class="t886__wrapper" style="background-color:#ffffff; width:740px;"> <div class="t886__text t-text t-text_xs t-valign_middle" field="text">Пользуясь нашим сайтом, ты соглашаешься с тем, что мы <u style="color: rgb(128, 128, 255);"><a href="https://www.school-xyz.com/privacy-policy" style="box-shadow: none; text-decoration: none; border-bottom-style: solid; border-bottom-color: rgb(128, 128, 255); color: rgb(128, 128, 255);">используем cookies</a></u>.</div> <div
class="t-btn t-btnflex t-btnflex_type_button t-btnflex_sm t886__btn"
type="button"><span class="t-btnflex__text">Принять</span> <style>#rec602614066 .t-btnflex.t-btnflex_type_button {color:#ffffff;background-color:#6060ff;border-style:solid !important;border-color:#6060ff !important;--border-width:1px;border-radius:50px;box-shadow:none !important;font-weight:400;padding:9px 24px 9px 24px;transition-duration:0.2s;transition-property:background-color,color,border-color,box-shadow,opacity,transform,gap;transition-timing-function:ease-in-out;}@media (hover:hover) {#rec602614066 .t-btnflex.t-btnflex_type_button:not(.t-animate_no-hover):hover {color:#ffffff !important;background-color:#6060ff !important;}#rec602614066 .t-btnflex.t-btnflex_type_button:not(.t-animate_no-hover):focus-visible {color:#ffffff !important;background-color:#6060ff !important;}}</style></div> </div> </div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t886_init',function() {t886_init('602614066');});});</script> <style>#rec602614066 .t886__text{text-align:left;}</style> <style> #rec602614066 .t886__text{line-height:1.6;color:#17171b;}</style> <style>#rec602614066 .t886__wrapper {box-shadow:0px 0px 4px rgba(0,0,0,0.1);}</style> <style> #rec602614066 .t886__wrapper{border-radius:16px;}@media (max-width:480px){#rec602614066 .t886__wrapper{border-radius:8px;}}</style> </div> <div id="rec602637647" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- стилизация виджета cookie --> <style>
.t886 {
width: 100%;
z-index: 1000000001;
transition: .3s ease;
}
.t-body.show-promobar:not(.hide-promobar) .t886 {
bottom: calc(var(--dynamic-bottom) + 20px) !important;
}
.t886__wrapper {
display: flex;
padding: 12px 24px;
margin: 0 auto;
gap: 16px;
}
.t886__text {
font-size: 14px;
padding-right: 0 !important;
}
.t886__btn {
font-size: 14px;
line-height: 1.6;
}
@media screen and (max-width: 980px) {
.t886 {
width: calc(100% - 20px) !important;
left: 10px !important;
bottom: unset !important;
top: 14px !important;
}
.t886__wrapper {
border-radius: 8px !important;
padding: 8px 16px;
gap: 20px;
}
}
@media (max-width: 639px) {
.t886__text {
font-size: 10px;
}
}
</style> <!-- nominify end --> </div> </div> </div> </div> <div id="rec368502560" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <!-- плагин интеграции amo crm -> yandex metrika --> <script type="text/javascript">
(function(){
var ya_counter_id = '65640406';
var ya_client_id = '';
var setYaClientId = function (){
var intervalYaClientId = setInterval(function(){
try {
if (typeof window['yaCounter'+ya_counter_id] !== "undefined" && typeof window['yaCounter'+ya_counter_id].getClientID !== "undefined") {
ya_client_id = window['yaCounter'+ya_counter_id].getClientID();
if (!ya_client_id)
return;
var forms = document.getElementsByTagName("form");
for (var i = 0; i < forms.length; i++) {
var input = document.createElement("INPUT");
input.type = "hidden";
input.name = "YMClientID";
input.value = ya_client_id;
forms[i].appendChild(input);
}
clearInterval(intervalYaClientId);
}
} catch(err) {
}
}, 1000);
};
setYaClientId();
})();
</script> <!-- nominify end --> </div> </div> </div> </div> </footer> <!--/footer--> </div> <!--/allrecords--> <!-- Stat --> <!-- Yandex.Metrika counter 65640406 --> <script type="text/javascript" data-tilda-cookie-type="analytics">setTimeout(function(){(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})(window,document,"script","https://mc.yandex.ru/metrika/tag.js","ym");window.mainMetrikaId='65640406';ym(window.mainMetrikaId,"init",{clickmap:true,trackLinks:true,accurateTrackBounce:true,webvisor:true,params:{__ym:{"ymCms":{"cms":"tilda","cmsVersion":"1.0"}}},ecommerce:"dataLayer"});},2000);</script> <noscript><div><img src="https://mc.yandex.ru/watch/65640406" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <script type="text/javascript">if(!window.mainTracker) {window.mainTracker='tilda';}
window.tildastatscroll='yes';setTimeout(function(){(function(d,w,k,o,g) {var n=d.getElementsByTagName(o)[0],s=d.createElement(o),f=function(){n.parentNode.insertBefore(s,n);};s.type="text/javascript";s.async=true;s.key=k;s.id="tildastatscript";s.src=g;if(w.opera=="[object Opera]") {d.addEventListener("DOMContentLoaded",f,false);} else {f();}})(document,window,'46f1ce95aad41ac8b0d98605c4e04383','script','https://static.tildacdn.com/js/tilda-stat-1.0.min.js');},2000);</script> <!-- Rating Mail.ru counter --> <script type="text/javascript" data-tilda-cookie-type="analytics">setTimeout(function(){var _tmr=window._tmr||(window._tmr=[]);_tmr.push({id:"3737289",type:"pageView",start:(new Date()).getTime()});window.mainMailruId='3737289';(function(d,w,id) {if(d.getElementById(id)) {return;}
var ts=d.createElement("script");ts.type="text/javascript";ts.async=true;ts.id=id;ts.src="https://top-fwz1.mail.ru/js/code.js";var f=function() {var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(ts,s);};if(w.opera=="[object Opera]") {d.addEventListener("DOMContentLoaded",f,false);} else {f();}})(document,window,"topmailru-code");},2000);</script> <noscript><img src="https://top-fwz1.mail.ru/counter?id=3737289;js=na" style="border:0;position:absolute;left:-9999px;width:1px;height:1px" alt="Top.Mail.Ru" /></noscript> <!-- //Rating Mail.ru counter --> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KTCCH4H" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> </body> </html>