Содержание
-
Понятие модульности
Лекции по курсу «Основы компьютерного дизайна» Проф. д.т.н. Кузёмин А.Я.
-
Модуль
Модуль — это единица измерения, установленная для придания соразмерности. Сетка — система пропорций. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 2
-
Задачи сетки:1. Ускорение работыМы не тратим лишнего времени на поиск геометрического места элемента в макете. К тому же имеем обоснования в размещении элементов. 2. Сбалансированность и пропорциональностьЭлементы в макете соизмеримы и пропорциональны между собой. Мы можем обосновать размеры блоков, кегль и проч.3. Ускорение и шаблонирование, единообразность элементовРазработав сетку, мы делаем основу для решений на будущее.
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 3
-
Примеры композиций и их сетки
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 4
-
Пример сайта с сеткой и без нее
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 5
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 6
-
Виды сеток
Самый простой вид сетки — блочная сетка. В западной литературе ее также называют «manuscriptgrid». Представляет собой грубо размеченную область — блок. Колоночная сетка 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 7
-
Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях есть модуль.
Модульная сетка 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 8
-
В иерархической сетке размещение блоков интуитивное и не поддается закономерностям.
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 9
-
Отношения подразбиений
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 10 Сетка, которую мы построим, будет симметричной сеткой, базирующейся на последовательном разбиении страницы в отношении 1:1.414. Отталкиваясь от размера страницы (А4), мы можем сохранить пропорции на всей сетке, что выстроит отношение подобия между сеткой и листом. На рисунке диаграммы 1-6 показывают последовательность разбиения листа. Накладывая разбиения одно на другое, мы получаем симметричную сбалансированную сетку. Сначала лист делится на 4 части, используя указанную пропорцию (диаграмма 1). Потом создается сетка 3×3 в той же пропорции, и располагаем ее поверх предыдущей (диаграмма 2). Далее совершается еще одно деление, но при этом выполняется разворот на 90 градусов (диаграмма 3). После этого увеличивают пропорцию вправо вверх, чтобы создать отступы (диаграммы 4 и 5).
-
Включаем воображение
Сетки могут содействовать воображению, предоставляя удобную платформу и отвечая на наиболее часто возникающие вопросы. Итак, мы создали сетку. Теперь мы можем начать эксперименты с различным размещением текста, изображений и общей композицией. На рисунке ниже видно как текст и изображения взаимодействуют друг с другом на созданной разметке для публикации. Диаграмма 7 показывает как располагается текст в сетке. Диаграммы 8 и 9 отражают адаптацию сетки к различным вариантам компоновки страницы. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 11
-
Пропорции
Сетки могут быть как простыми — с одинаковыми по размерам модулями, так и сложными, с нелинейными пропорциями у размеров модулей.Типы пропорции: «Золотое сечение». Ряд Фибоначчи. Каждое последующее число оказывалось равным сумме двух предыдущих: 1, 2, 3, 5, 8, 1З, 21 и т. д. Он обладает тем свойством что, отношения между соседними членами по мере возрастания чисел ряда, все более приближаются к 1,618, то есть, к отношению «золотого сечения».Системы «предпочтительных чисел»и различные модульные системы. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 12
-
«Предпочтительные числа» — ряд чисел геометрической прогрессии, где каждое последующее число образуется умножением предыдущего числа на какую-нибудь постоянную величину.
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 13
-
В Древней Греции эпохи классики возник ряд учений о гармонии. Из них наиболее глубокий след в мировой культуре оставило Пифагорейское учение. Последователи Пифагора представляли мир, вселенную, космос, природу и человека как единое целое, где все взаимосвязано и находится в гармонических отношениях. Гармония здесь выступает как начало порядка - упорядочивания хаоса. Гармония присуща природе и искусству: «Одни и те же законы существуют для музыкальных ладов и планет».24Пифагорейцы и их последователи всему сущему в мире искали числовое выражение. Ими было обнаружено; что математические пропорции лежат в основе музыки (отношение длины струны к высоте тона, отношения между интервалами, соотношение звуков в аккордах, дающих гармоническое звучание). Пифагорейцы пытались математически обосновать идею единства мира, утверждали, что в основе мироздания лежат симметричные геометрические формы.
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 14
-
Золотое сечение – гармоническая пропорция
В математике пропорцией (лат. proportio) называют равенство двух отношений: a : b = c : d. Отрезок прямой АВ можно разделить на две части следующими способами: на две равные части – АВ : АС = АВ : ВС; на две неравные части в любом отношении (такие части пропорции не образуют); таким образом, когда АВ : АС = АС : ВС. Последнее и есть золотое деление или деление отрезка в крайнем и среднем отношении. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 15
-
Золотое сечение– это такое пропорциональное деление отрезка на неравные части, при котором весь отрезок так относится к большей части, как сама большая часть относится к меньшей; или другими словами, меньший отрезок так относится к большему, как больший ко всемуa : b = b : c или с : b = b : а.
Геометрическое изображение золотой пропорции 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 16
-
Деление отрезка прямой по золотому сечению. BC = 1/2 AB; CD = BC
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 17
-
Из точки В восставляется перпендикуляр, равный половине АВ. Полученная точка С соединяется линией с точкой А. На полученной линии откладывается отрезок ВС, заканчивающийся точкой D. Отрезок AD переносится на прямую АВ. Полученная при этом точка Е делит отрезок АВ в соотношении золотой пропорции. Отрезки золотой пропорции выражаются бесконечной иррациональной дробью AE = 0,618..., если АВ принять за единицу, ВЕ = 0,382... Для практических целей часто используют приближенные значения 0,62 и 0,38. Если отрезок АВ принять за 100 частей, то большая часть отрезка равна 62, а меньшая – 38 частям. Свойства золотого сечения описываются уравнением: x2 – x – 1 = 0.Решение этого уравнения:
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 18
-
Золотой треугольник
Для нахождения отрезков золотой пропорции восходящего и нисходящего рядов можно пользоваться пентаграммой. Построение правильного пятиугольника и пентаграммы 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 19
-
Для построения пентаграммы необходимо построить правильный пятиугольник. Способ его построения разработал немецкий живописец и график Альбрехт Дюрер (1471...1528). Пусть O – центр окружности, A – точка на окружности и Е – середина отрезка ОА. Перпендикуляр к радиусу ОА, восставленный в точке О, пересекается с окружностью в точке D. Пользуясь циркулем, отложим на диаметре отрезок CE = ED. Длина стороны вписанного в окружность правильного пятиугольника равна DC. Откладываем на окружности отрезки DC и получим пять точек для начертания правильного пятиугольника. Соединяем углы пятиугольника через один диагоналями и получаем пентаграмму. Все диагонали пятиугольника делят друг друга на отрезки, связанные между собой золотой пропорцией.Каждый конец пятиугольной звезды представляет собой золотой треугольник. Его стороны образуют угол 36° при вершине, а основание, отложенное на боковую сторону, делит ее в пропорции золотого сечения.
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 20
-
Построение золотоготреугольника
Проводим прямую АВ. От точки А откладываем на ней три раза отрезок О произвольной величины, через полученную точку Р проводим перпендикуляр к линии АВ, на перпендикуляре вправо и влево от точки Р откладываем отрезки О. Полученные точки d и d1 соединяем прямыми с точкой А. Отрезок dd1 откладываем на линию Ad1, получая точку С. Она разделила линию Ad1 в пропорции золотого сечения. Линиями Ad1 и dd1 пользуются для построения «золотого» прямоугольника. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 21
-
Золотое сечение и симметрия
Золотое сечение нельзя рассматривать само по себе, отдельно, без связи с симметрией. Великий русский кристаллограф Г.В. Вульф (1863...1925) считал золотое сечение одним из проявлений симметрии. Золотое деление не есть проявление асимметрии, чего-то противоположного симметрии Согласно современным представлениям золотое деление – это асимметричная симметрия. В науку о симметрии вошли такие понятия, как статическаяи динамическая симметрия. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 22
-
Статическаяи динамическая симметрия
Статическая симметрия характеризует покой, равновесие, а динамическая – движение, рост. Так, в природе статическая симметрия представлена строением кристаллов, а в искусстве характеризует покой, равновесие и неподвижность. Динамическая симметрия выражает активность, характеризует движение, развитие, ритм, она – свидетельство жизни. Статической симметрии свойственны равные отрезки, равные величины. Динамической симметрии свойственно увеличение отрезков или их уменьшение, и оно выражается в величинах золотого сечения возрастающего или убывающего ряда. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 23
-
Построение шкалы отрезков золотой пропорции
Построение ряда отрезков золотой пропорции можно производить как в сторону увеличения (возрастающий ряд), так и в сторону уменьшения (нисходящий ряд). Если на прямой произвольной длины, отложить отрезок m, рядом откладываем отрезок M. На основании этих двух отрезков выстраиваем шкалу отрезков золотой пропорции восходящего и нисходящего рядов 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 24
-
Золотые пропорции в фигуре человека
Цейзинг проделал колоссальную работу. Он измерил около двух тысяч человеческих тел и пришел к выводу, что золотое сечение выражает средний статистический закон. Деление тела точкой пупа – важнейший показатель золотого сечения. Пропорции мужского тела колеблются в пределах среднего отношения 13 : 8 = 1,625 и несколько ближе подходят к золотому сечению, чем пропорции женского тела, в отношении которого среднее значение пропорции выражается в соотношении 8 : 5 = 1,6. У новорожденного пропорция составляет отношение 1 : 1, к 13 годам она равна 1,6, а к 21 году равняется мужской. Пропорции золотого сечения проявляются и в отношении других частей тела – длина плеча, предплечья и кисти, кисти и пальцев и т.д. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 25
-
Принципы формообразования в природе
Все, что приобретало какую-то форму, образовывалось, росло, стремилось занять место в пространстве и сохранить себя. Это стремление находит осуществление в основном в двух вариантах – рост вверх или расстилание по поверхности земли и закручивание по спирали. Раковина закручена по спирали. Если ее развернуть, то получается длина, немного уступающая длине змеи. Небольшая десятисантиметровая раковина имеет спираль длиной 35 см. Спирали очень распространены в природе. Представление о золотом сечении будет неполным, если не сказать о спирали. Спираль Архимеда Цикорий 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 26
-
Алгоритм
В случае веба чаще всего ширина холста колеблется от 1024 до 1280 пикселей. Разумеется, ваша задача и идея может изменить эти рамки. Высота макета — величина непредсказуема в большинстве случаев. В отличие от полиграфии, веб-страница чаще всего не фиксирована по высоте, и ее собственный контент может ее же и увеличить. Выбираем высоту строки единую для всего макета. Все элементы рубрикации с кеглем, отличным от кегля основного текста, должны иметь интерлиньяж кратный выбранной высоте строки; в сумме со всеми вертикальными полями высота каждого такого элемента должна содержать целое количество строк шрифтовой сетки. Шаг 1. Делаем шрифтовую сетку 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 27
-
Шаг 2. Выбор модуля (точнее микромодуля)
Микромодулем определяется большинство небольших расстояний (и больших тоже).Таким образом, мы получаем прообраз будущей сетки — «зебру». На этой сетке будет лежать весь текст: абзацы, списки, заголовки, иллюстрации, плашки и проч. В практике чаще всего используют такие параметры для шрифтовой сетки: кегль — 12 пикселей, высота строки — 18 пикселей. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 28
-
Микромодуль
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 29 . Итак, микромодулем называют величину, равную высоте строки. Представьте, что сетка атомарна, а высота строки — неделимая частица. Существует много ситуаций, когда микромодуль может подсказать, как решить «микропроблему». Принимаем равным микромодулю расстояние между поясами и колонками. Тем самым закладываем фундамент ровного вертикального ритма. Используем микромодуль для отделения абзацов друг от друга — отбивка пустой строкой, или «швейцарский абзац» Йозефа Мюллера-Брокмана.
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 30 3. Если мы не собираемся отбивать абзацы строкой, красную строку мы можем выделять отступами либо втяжкой, которые тоже равны микромодулю — высоте строки. (Брингхерст, «Основы стиля в типографике», русское издание, Аронов, 2006, стр. 45). 4. Как и абзацы, списки могут быть набраны с отступом или наоборот — заступом, когда маркеры списка «свисают» за левую вертикальную границу колонки сетки. Использование второго способа выделения списков оправдано лишь тогда, когда это позволяет сделать пространство слева. 5. Значения внутренних полей плашек делайте соразмерным с микромодулем. 6. Соблюдение значения микромодуля для малых величин позволяет нам держаться «зебры», а значит, не сбиваться с ритма, заданного нами во втором пункте алгоритма.
-
ШВЕЙЦАРСКИЙ АБЗАЦ
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 31 Строки складываются в полосу набора. Полоса набора начинается с абзацных отступов. В классической традиции абзацы были маленькими. Чтобы минимально нарушать ровность края. И чтобы дополнительная ось, неизбежно считываемая глазом по абзацным отступам, не представляла собой угрозы монархическому порядку в книжно - классическом царстве одной оси. Там, где может быть только одна вертикаль власти. Модернистская типографика и не думает избегать многоосности. Она как раз на том стоит и стоять будет. Абзацные отступы здесь могут быть любыми. Кроме вялых и невнятных. Ведь один из главных принципов модернистского дизайна ХХ века — контраст. А это означает, что оси не могут находиться в неопределенно близких отношениях. Или полное слияние, или развод и девичья фамилия. Невнятность, нечеткость, неопределенность квалифицируются как «шум», «грязь». Противоположное качество — «чистота». Высшая оценка профессионализма: «чистое решение».
-
Типографика контрастов не боится крайностей. Абзац здесь может быть сколь угодно большим. Видная втяжка лишь добавляет в многодетное семейство координатных осей еще одну опору.
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 32 Можно делать абзацный отступ обратным, противоположным способом. Не «отступом», а «выступом» В таком случае срабатывает эффект неожиданности. Выход строки за пределы левого края буквально бросается в глаза и создает выразительный ритмический эффект.
-
Настоящая «декларация принципов» минимализма — нулевое решение. Абзацный отступ становится… никаким. Полное слияние осей. Это, конечно, круто. Правда, о наличии смыслового членения текста приходится тогда догадываться лишь по более коротким последним строкам предыдущего абзаца. Но что не сделаешь ради принципа!
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 33
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 34
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 35
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 36
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 37
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 38
-
Плашки
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 39 Плашки — самый популярный и простой прием у дизайнеров, когда речь идет об акцентах. Плашки представляют собой боксовую модель. Те, кто верстает HTML знает, о существовании блочных элементов. Боксовая модель характерна наличием у элементов полей — внешних (margins)ивнутренних (paddings). Если размеры этих полей понятны (микромодуль), то остается обратить на то, что эти поля сдвигают содержимое блоков. А значат ломают вертикали и сетку. Выход — сдвигать блоки на величину поля. Или не сдвигать? Все зависит от интенсивности цвета плашки (фона блока).
-
Рассмотрим два примера:
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 40 Горизонтальные и вертикальные направления в композиции О с н горизонталь 2-3%
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 41
-
На что нужно обратить внимание:
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 42 Яркие по отношению к фону плашки никуда не выносятся. Яркие плашки должны «вписаться» в сетку — их высота должна быть равна кратному количеству строк. Это достигается манипулированием вертикальными внутренними полями (padding-top и padding-bottom). Текст внутри такого блока не попадает в шрифтовую сетку — заботимся об оптике. Выносятся плашки, которые обладают маленьким оптическим весом. Они не контрастны, поэтому не оказывают влияния на ритм. В случае «легковесных плашек» текста не выбивается из потока. Плашка ненавязчиво обтекает содержимое блока.
-
Висячая пунктуация
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 43 Суть висячей пунктуации изложена в «Ководстве» Артемия Лебедева. Ниже демонстрируется оптическая компенсация. Дело в том, что такие графемы, как кавычки, скобки и прочие знаки препинания имеют меньший визуальный вес, нежели основной текст. Поэтому их принято «свешивать» за линию выключки.
-
Шрифты с засечками и крупные кегли
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 44 Заголовки, набранные крупным кеглем свешиваются, за линию выключки по тому же принципу, что и висячая пунктуация. Засечки в крупном кегле выглядят тоже не маленькими и по этому, такие заголовки «рвут» вертикаль.
-
Иллюстрации
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 45 Главная особенность при работе с графическим контентом — понимание того, что иллюстрация есть не тупо прямоугольник, а набор пятен с разной интенсивностью. Пример: Горизонтальное выравнивание графики
-
Вертикальное выравнивание графики
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 46 Обратите внимание на то, где должны находится вертикальные границы графических вставок (обозначены красными линиями). Верхняя граница лежит на одной линии вместе с высотой строчного знака (x-height). Но, если вы набираете сопроводительный текст слева или справа капителью или прописными — верхняя граница картинки сместится соответственно.
-
Управление сеткой в ФотошопеГриды
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 47 Для работы с сеткой может показаться очевидным использование в Фотошопе — гридов(Edit > Preferences > Guides, Grids & Slices) Но на деле оказалось, что они не обладают необходимой гибкостью : сетка строго состоит из квадратных модулей, невозможно регулировать начало сетки.
-
Гайды
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 48 Задавать сетку гайдами оказалось делом неблагодарным. Во-первых, гайды сетки мешаются со вспомогательными гайдами, которые появляются в процессе работы. Во-вторых,просто не подымается рука делать зебру через 18 пикселей гайдами.
-
Решение
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 49 К сожалению, в Фотошопе не нашлось средств для управления сетками. Поэтому сетку пришлось рисовать самостоятельно. Для создания зебры делается слой-заливки (это не обычный слой, а слой-заливки: чтоб не кропилось) (Layer >Newfilllayer > Solidcolor) с паттерном в стилях: Паттерн, образующий «зебру»
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 50 Настройка слоя-заливки. Яркость добавьте по вкусу У слоя-заливки заполнение (Fill) нужно свети в ноль. А для макетов с черным фоном нужно сделать такой же паттерн, только белый.Для создания сетки целесообразно пользоваться полупрозрачными векторными фигурами. Они не обрезаются при кропе. Чтобы они потом не мешали работать, их объединяю в смарт-объект: получается один слой вместо нескольких, плашки лишний раз не выделяются при работе с Pathselectiontool.
-
Таймсэйвер
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 51 Инструмент, который предлагается использовать в самом начале работы над дизайном сайта — заготовки сеток. Для оптимизации работы, я пришел к выводу, что каждый проект целесообразно начинать в следующей последовательности: Создать новый холст в Фотошопе, Перетащить на него заготовку с рамкой браузера, Сделать шрифтовую «зебру», чаще всего на 18, Спроектировать сетку на 12, либо на 10, либо на n колонок.
-
Восприятие человеком информации
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 52 Движение взгляда по листу бумаги Активные направления Пассивные направления
-
Модульная сетка
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 53
-
Регионы
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 54
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 55
-
Сетки
Are Grids Good?
-
Две точки на листе – это уже дизайн
-
А сетка – это самое яркое выражение желания упорядочить графический дизайн
-
-
-
Сначала пропорции взяли с природы … Зачем используют сетки?
-
используют их и сегодня
-
От такого представления …
-
… к такому
-
От сильно рационального, стандартизированного дизайна Рационализм стал новым вызовом для дизайна. Нет декорации и формализмов, а логика и стандартизация.
-
Модернисты хотели создать новую эстетику получая красоту из внутренних качеств машины и предпочитая стандартизацию Существует сильное перекрытие между мотивацией использования сетки почти век назад и сегодня: получают красоту на основе внутренних качеств браузера и предпочитают стандартизацию
-
до единой сетки (unigrid) для большинства печатных изделий
-
также и в интернете
-
горизонтальная иерархия
-
Начнем с использованием сетки – хотя не так …
-
или так, где уже имеем рудиментарную сетку
-
а вот так …
-
Каждый дизайн начинается с определением проблемы и ограничений 1024 х 786 экран, большая область для объявлений
-
Это примерно 974 х 650 рх ‘Естественный’ размер браузера
-
Уменьшенные края, прим. 960 рх Полезная площадь
-
Самая полезная рекламная область - это так называемый Big Ad. 336 x 280 px как по рекомендации Internet Advertising Bureau
-
Дизайн основан на Big Ad будет приспосабливать ширины и других популярных областей
-
Единицы (Units) основные конструкционные блоки сеточки. Они все одинаковы. Столбы (Columns) - группы единиц, которые создают визуальную структуру страницы. Они необязательно должны быть одинаковы Использование ограничении Единицы области осложняют ситуацию, но они на самом деле могут быть полезны, потому что они служат как фиксированные ограничения. Ограничения – это источник изменении дизайна. В этом примере 4 единицы комбинированы в один столб.
-
В общем, мы хотим создать единицы в кратных трем или четырем. Идеально 12, потому что это 3 х 4. Правила 3, …, 4
-
3 столбика по 4 единицы. 12 единиц могут образовать 3 столба…
-
два столба по 6 единиц. или 2 столба…
-
4 столба по 3 единиц. 4 столба…
-
6 столбов по 2 единиц. 6 столбов…
-
К сожалению, 3 Big Ads не поместятся в нашу 960 px ширину. Неблагоприятный размер
-
Площадь - ((Общее количество единиц-1) x Промежуток) ÷ Общее количество единиц = Единица 950 - ((16 -1) x 10) ÷ 16 = Единица (Don’t worry about doing it this way.) Сгонять ширину полосы до кратного 340 px.
-
Разделите полосу в две единицы по165 px, с промежутком ширины10 pixel. (340 - 10) ÷ 2 = 165
-
Получаем 5 единиц по 165 px с общей ширины как раз в 865 px. Это могло бы делен на 10 единиц, но с сеткой из 10 единиц сложно работать.
-
Вторая попытка В этот раз сгоним до ширины 350 px.
-
Делим на 3 с двумя промежутками по 10 px, получаем полосы по 110 px. (350 - (2 x 10)) ÷ 3 = 110
-
Результат - 8 полос по 110 px и общая ширина 950 px.
-
8 единиц – это хорошее количество, и мы можем их даже дальше делить на сетку с 16 единиц и быть более свободными. Эти единицы по 50 px.
-
Сетка из 16 единиц дает возможность формировать два равных столбца в левой части.
-
и делить правую часть в 2 или 3 столбца.
-
Также мы сможем отделить две единицы на левой стороне, чтобы создать левую навигацию.
-
Третий раз - очарование Для более четкого подхода мы можем сгонять полосу в 338 px.
-
Делим в этот раз на 5 с 4 промежутками по 7 px, то каждая единица получается по 62 px. (338 - (4 x 7)) ÷ 5 = 62
-
Получаем 14 единиц по 62 px с общей шириной 959 px. 14 – это странное число, но иногда получается из-за этого более интересно.
-
Это позволяет левый регион консолидировать в 3 столбца.
-
Также позволяает чуть более широкий и более четкий левый столбец для навигации.
-
Пора заниматься дизайном Заголовок
-
Используете баланс региона логотипа для поискового региона.
-
The Box Model Использование сетки не только просто накладка элементов вдоль ее края.
-
Пишем 3 элемента в сетке из 9 модулей. Инстинктивно мы начинаем с левого края каждого столбца.
-
Разделим эти столбцы по простым правилам.
-
Такая строгая связь с сеткой приводит к визуальным напряжениям.
-
Что будет, если нужен текст внутри текстового поля?
-
В цифровых средствах такие тексты часто не бывают постоянными, а могут появиться или исчезнуть. Если их нет, то это может привести визуальный дискомфорт.
-
Ответ в том, что надо использовать одинаковую вставку для всех элементов.
-
Так мы получаем визуальную согласованность вне зависимости от того, какой текст вставлен и позволяет расстояние от линий элементов.
-
-
Сегодня целесообразно использовать CSS box model в качествемодели представления визуального пространства вокруг любого элемента.
-
-
Возвращаемся к поиску
-
-
Также надо добавить возможности поиска: Web, Images, Video, Local, Shopping и More.
-
Предположительно, наверное не самый полезный экран, но для данного этапа достаточен.
-
Опрокидыванное состояние выравнивается с сеткой.
-
Навигация (и Framing) Выбрать две единицы чтобы формировать навигационный столбец на левой стороне.
-
Добавим линии между большинством навигационных элементов и чтобы комбинировать элементы в группы.
-
Ближе посмотрим размещение линии.
-
Каждая область должна быть формирована по тем же принципам как в framingе. Расстояния для всех сторон должно быть визуально одинаково (visually equal). Но только верх и левая и правая стороны должны быть математически равны. Низ под текстом должен быть меньше.
-
-
Результат визуально уравновешенный.
-
Иллюзия визуальной уравновешенности усиливается, когда элементы сложены.
-
Даже группы из несколько элементов могут быть трактованы таким же образом.
-
-
Виджеты
-
-
-
-
Сделайте слой в верхнем регионе и передвиньте навигацию ниже.
-
Add a lightyellowlayer anddivideupthearea intoequalareas — except thenumberofunitsdon’t easilydivide.
-
-
-
-
Гороскоп, локальная информация и радио.
-
Пользователи привыкли к цветным картинам в правом столбце в качестве рекламы (advertising).
-
Добавьте линии сетоки
-
Область для элементов
-
Группируете 7 единиц в выделенную область элементов. Табулаторы для 4 главных областей: Features, Entertainment, Sports, Life.
-
Add Tabs
-
Табулаторы вне сетки. Let tabs be tabs.
-
Главная тема
-
Размер картин Консолидируете 3 единицы в область шириной 200 px width. Высота 120 px.
-
Главный рисунок Выделите табулаторы – более интересно.
-
Другие темы Ниже пропорциональные области для фото.
-
Резервная область Большая область для ‘More Stories…’.
-
Посто готово С рисунками.
-
Добавьте больше интересное Передвиньте табуляторы вверх, чтобы их лучше видно было.
-
Completed Feature Stories Area
-
Headlines & Other Modules
-
-
-
Оцените общий эффект Проблемы читать табулаторы заголовок в общей области.
-
Приукрашивайте с помощью фона
-
-
Autos 4 не выровненные столбцы.
-
More элементов Необязательно их тесно связать с сеткой.
-
Самое популярное Simple, Familiar Прямые списки. Можно их делать более интересными?
-
Разные ориентации Меняйте ориентацию чтобы улучить вид.
-
Списки с горизонтальной ориентации
-
Done!
-
Родные сайты Personals
-
Такие же единицы
-
Меняйте структуры столбцов
-
Меняйте структуры столбцов
-
ПОНЯТИЕ О ГАРМОНИИ МАТЕМАТИЧЕСКИЕЗАКОНОМЕРНОСТИ КОМПОЗИЦИИ
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 167 Пропорциональность, соразмерность частей целого является важнейшим условием гармонии целого и может быть выражена математически посредством пропорций Пропорция означает равенство двух или нескольких отношений. Существует несколько видов пропорциональности: математическая, гармоническая, геометрическая и др. В прямоугольнике з. с. стороны находятся в отношении з.с. Этот пр-к содержит в себе квадрат и малый пр-к з. с. (его большая сторона является малой стороной первоначального пр-ка.) Можно построить пр-к з.с. на основании квадрата: сторона квадрата делится пополам, из той точки к вершине проводится диагональ, с помощью которой на стороне квадрата строится пр-к з.с. На основе пятиугольника На основе квадрата
-
Бесконечное повторение прямоугольника з. с. и квадрата при рассечении прямоугольника з. с. обнаруживает повторение целого в его частях, что является одним из условий гармонии целого. Это свойство прямоугольника з. с. является способом гармонизации, способ пропорционирования.
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 168 Схема идеальных Пропорций средневековой рукописи. Пропорции страницы 2:3, а плоскость, занятая письмом- в пропорции золотого сечения Один из способов определения размера полосы набора при заданном формате Пропорционирование - приведение частей целого к единому пропорциональному строю.
-
Француз Корбюзье создал целую систему пропорционирования на основе чисел ряда золотого сечения и пропорций человеческого тела и назвал ее «Модулор», что по-латыни означает - ритмически размерять
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 169
-
Варианты деления прямоугольника на основе Модулора
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 170
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 171 Хэмбидж исследовал динамическую симметрию, которую он обнаружил в ряде прямоугольников, с целью ее практического применения художниками в композиционном построении. Он делает попытку раскрыть секреты, которыми пользовались древние греки, добиваясь гармонического решения формы. Используются свойства прямоугольников, составляющих ряд, где каждый последующий прямоугольник строится на диагонали предыдущего, начиная с диагонали квадрата Ö2. Это прямоугольники Ö4, Ö5 (с меньшей стороной равной стороне квадрата, принятой за единицу). Кульминацией ряда является прямоугольник Ö5, обладающий особыми гармоническими свойствами и «родственный» прямоугольнику золотого сечения
-
Предпочтительные числа
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 172 «Предпочтительные числа» - ряд чисел геометрической прогрессии, где каждое последующее число образуется умножением предыдущего числа на какую-нибудь постоянную величину. Числа из предпочтительных рядов используются при конструировании упаковок, в композиции рекламных плакатов. Они обеспечивают ритмическое развитие формы, их можно встретить и в построении формы античной вазы и в современной станке. Используют «итальянские ряды», в основе которых лежат первые числа ряда Фибоначчи - 2, 3, 5. Каждое из этих чисел, удваиваясь, составляет ряд чисел, гармонически связанных между собой: 2 - 4, 8, 16, 32, 64, и т. д. 3 -. 6, 12, 24 48, 96 5 - 10, 20, 40, 80, 160 Пропорционирование связано с понятиями соразмерности и меры. Одним из способов соизмерения целого и его частей является модуль. Модуль - размер или элемент, повторяющийся неоднократно в целом и его частях. Модуль (лат.) означает - мера.
-
Модульные сетки для рекламных изданий
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 173
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 174
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 175 Помимо прямоугольника золотого сечения и квадрата, наибольший интерес для нас представляют прямоугольники √2 и √ 5. Древние греки эпохи классики предпочитали именно эти прямоугольники, Хэмбидж утверждает, что 85% произведений греческого классического искусства построено на прямоугольнике √ 5. Чем интересен этот прямоугольник? Будучи разделенным по вертикали н по горизонтали на две части, он восстанавливает свои пропорции. Прямоугольник этот можно расчленить на квадрат и два малых прямоугольника золотого сечения. Кроме того, в нем просматриваются два прямоугольника золотого сечения, перекрывающие друг друга на величину квадрата.
-
Оставшаяся часть тоже представляет собой прямоугольник золотого сечения. Таким образом, прямоугольник Ö5 обнаруживает ритмические свойства. В нем возникает красивая симметрия (малый прямоугольник з. с.+квадрат+малыйпр-к з. с.)
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 176
-
Хэмбидж приводит композиционную схему греческой чаши для питья из бостонского музея: чаша вписывается (без ручек) в горизонтально вытянутый прямоугольник Ö5 Диагонали двух прямоугольников золотого сечения, перекрывающих друг друга на квадрат, пересекаются в точке, через которую проходит граница между чашей и ее ножкой. Ширина основания ножки равна высоте чаши и равна стороне квадрата, находящегося в центре прямоугольника Ö5 Ножка вписывается в два малых прямоугольника з. с., отсеченных от квадрата линией, горизонтальной к основанию пр-ка Ö5 и проходящей через точку пересечения двух диагоналей больших прямоугольников з. с.
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 177
-
Масштабные отношения
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 178 между вещами, предметным окружением и человеком выступают как средство гармонизации, ибо масштаб является одним из проявлений соразмерности, устанавливающим относительные размеры между человеком и предметом - в архитектуре, в дизайне, в прикладном искусстве, в частности, в прикладной графике, в искусстве книги. Так, размеры и форматы плакатов и любых объектов, служащих целям визуальной коммуникации - вывесок, дорожных знаков и т. д., а также их композиционное решение всегда избираются в зависимости от назначения и от условий эксплуатации, а значит и в соответствующих масштабных отношениях. То же самое касается и области книжного оформления и всевозможной печатной рекламы и упаковки.
-
Симметрия
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 179 В пропорции и соразмерности проявляются количественные отношения между частями целого и целым. Греки к ним присоединяли и симметрию, рассматривая ее как вид соразмерности, - как ее частный случай - тождество. Она, как и пропорция, почиталась необходимым условием гармонии и красоты. Симметрия основана на подобии. Она означает такое соотношение между элементами, фигурами, когда они повторяют и уравновешивают друг друга. В математике под симметрией подразумевается совмещение частей фигуры при перемещении ее относительно оси или центра симметрии.
-
Различные виды симметрии обладают различным воздействием на эстетическое чувство: зеркальная симметрия - равновесие, покой; винтовая симметрия вызывает ощущение движения.
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 180 Зеркальная, винтовая, центральная, по сдвигу "Линия грации и красоты" Хогарта Симметрия связана с понятием середины и целого. В древнегреческой философии и искусстве понятие «середины, центра связано с представлением о цельности бытия. Середина - «избегание крайностей» (Аристотель) - означает принцип уравновешенности. «Везде грек видел нечто цельное. А это и значит, что он прежде всего фиксировал центр наблюдаемого или постороннего предмета... Без понятия «середины» немыслимо античное учение о пропорциях, мере, симметрии или гармонии».
-
Гармония - понятие диалектическое
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 181 По древнегреческой мифологии Гармония - дочь бога войны Арея и богини любви и красоты Афродиты,- то есть, в ней слиты противоположные, враждующие начала. Поэтому понятие гармонии включает в себя контраст как необходимое условие. Контраст способствует многообразию и разнообразию, без которых немыслима гармония. «Гармония есть единение многого и согласие несогласного» (Филолай).
-
Гармония - эстетическая категория
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 182 Симметрия, пропорции, ритм, контраст, цельность – образующие гармонию объективно связаны с природой, с движением и развитием материи. В последующие эпохи проявления прекрасного стали обнаруживать и в нарушении порядка, в диссонансах, в кажущейся дисгармонии, ибо они свойственны жизни и, следовательно, являются частью какой-то иной гармонической системы, в которой обретают логику и смысл
-
Физические основы компьютерной графики
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 183 Человеческое зрение Спектральная чувствительность человеческого зрения Цветовое зрение У приматов (и человека) мутация вызвала появление колбочек — цветовых рецепторов. Мутация была вызвана появлением изменённой копии гена, отвечающего за восприятие средней, зелёночувствительной области спектра. Она обеспечила лучшее распознавание объектов «дневного мира» — плодов, цветов, листьев. В глазу человека содержатся два типа светочувствительных клеток (рецепторов): высоко чувствительные палочки, отвечающие за сумеречное (ночное) зрение, и менее чувствительные колбочки, отвечающие за цветное зрение.
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 184 В сетчатке глаза человека есть три вида колбочек, максимум чувствительности которых приходится на красный, зелёный и синий участки спектра, то есть соответствует трём «основным» цветам. Они обеспечивают распознавание тысяч цветов и оттенков. Кривые спектральной чувствительности трёх видов колбочек частично перекрываются, что вызывает эффект метамерии. Очень сильный свет возбуждает все 3 типа рецепторов, и потому воспринимается, как излучение слепяще-белого цвета. Равномерное раздражение всех трёх элементов, соответствующее средневзвешенному дневному свету, также вызывает ощущение белого цвета. Трёхсоставную теорию цветового зрения впервые высказал в 1756 году М. В. Ломоносов, когда он писал «о трёх материях дна ока». Сто лет спустя её развил немецкий учёный Г. Гельмгольц. Чувствительность палочек (пунктирная линия) и трёх типов колбочек к излучению с разной длиной волны
-
Теория цветоощущения Гельмгольца
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 185 Теория цветоощущения Юнга-Гельмгольца, трёхкомпонентная теория цветоощущения— теория цветоощущения, предполагающая существование в глазу особых элементов для восприятия красного, зелёного и фиолетового цветов. Восприятие других цветов обусловлено взаимодействием этих элементов. Сформулирована Томасом Юнгом и Германом Гельмгольцем. Теория Юнга—Гельмгольца объясняет восприятие цвета только на уровне колбочек сетчатки, и не может объяснить все феномены цветоощущения, такие как цветовой контраст, цветовая память, цветовые последовательные образы, константность цвета и др., а также некоторые нарушения цветового зрения.
-
Оппонентная теория цвета Эвальда Геринга (Хьюбл и Вайзел)
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 186 Спектральная чувствительность рецепторов глаза: иллюстрация метаметрии. Цветоразностное восприятие цвета
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 187 В мозг поступает информация вовсе не о красном (R), зелёном (G) и синем (B) цветах (теория цвета Юнга-Гельмгольца). Мозг получает информацию о разнице яркости — о разнице яркости белого (Yмах) и черного (Yмин), о разнице зелёного и красного цветов (G-R), о разнице и синего и жёлтого цветов (B-yellow), а жёлтый цвет (yellow=R+G) есть сумма красного и зелёного цветов, где R, G и B — яркости цветовых составляющих — красного, R, зелёного, G, и синего, B. Имеем систему уравнений — Кч-б=Yмах-Yмин; Кgr=G-R; Кbrg=B-R-G, где Кч-б, Кgr, Кbrg — функции коэффициентов баланса белого для любого освещения. Практически это выражается в том, что люди воспринимают цвет предметов одинаково при разных источниках освещения (цветовая адаптация).
-
Несмотря на кажущуюся противоречивость двух теорий, по современным представлениям, верны обе
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 188 На уровне сетчатки действует трёхстимульная теория, однако, информация обрабатывается, и в мозг поступают данные уже согласующиеся с оппонентной теорией. Проявление метамерии: разный спектральный состав света вызывает одинаковые цветовые ощущения.
-
Спектр, цвет, видимый свет
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 189 Разложение света по цветам при помощи призмы Спектр (лат. spectrum от лат. spectare — смотреть) — множество значений физической величины, распределенных по некоторому энергетическому параметру, а также графическое представление такого распределения. Видимое излучение — это электромагнитные волны, воспринимаемые человеческим глазом, которые занимают участок спектра ~ от 380 (Фиолетовый) до 780 нм (Красный). Интервал видимого излучения является малой частью интервала электромагнитного излучения вообще. За пределами этой ограниченной области электромагнитное излучение не вызывает у человека зрительных ощущений или, другими словами, является для него невидимым.
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 190 Цвет — качественная субъективная характеристика электромагнитного излучения оптического диапазона, определяемая на основании возникающего физиологического зрительного ощущения, и зависящая от ряда физических, физиологических и психологических факторов. Индивидуальное восприятие цвета определяется его спектральным составом, а также цветовым и яркостным контрастом c окружающими источниками света, а также несветящимися объектами. Дополнительно можно ознакомиться со статьей Алексея Шадрина, Андрея Френкеля "ColorManagementSystem (CMS) в логике цветовых координатных систем", где подробно и наглядно разобраны вопросы цветообразования.
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 191 Имя цвета — термин, отражающий психологическую компоненту в восприятии света и цвета. Имя цвета — психологическая его характеристика, имеющая выраженную этническую компоненту. Так, имя цвета зеленый достаточно однозначно определяет диапазон длин волн отраженного излучения (или же источника света), хотя и может быть синтезирован при помощи других цветов, в то время как имя цвета коричневый неоднозначно — этот ощущаемый человеком цвет, как и большинство других, может быть синтезирован с помощью разных спектральных наборов (метамерия). В разных языках имя цвета для одного и того же физического объекта могут отличаться, или даже отсутствовать. Этим объясняется тот факт, что у разных народов в радуге различается разное количество цветов. Люди, имеющие прямое отношение к работе с цветом, часто оперируютзаведомо большим количеством имен цветов, чем может однозначно понять "простой смертный". Так же, в среде художников применяются термины, плохо совместимые с компьютерным представлением и бытующими среди программистов понятиями. Так, пожелание дизайнера "сделать этот зеленый потеплее" может быть не понято веб-мастером, не владеющим знаниями, которые предлагаются в следующих частях данной лекции. В то же время цвет в колориметрии определятеся однозначно, как вектор в заданной системе координат. Системы координат могут быть разными, например, RGB, CMYK, XYZ.
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 192 Температура цвета, баланс белого Баланс белого цвета (также кратко называемый баланс белого) — один из параметров метода передачи цветного изображения, определяющий соответствие цветовой гаммы изображения объекта цветовой гамме объекта съёмки. Человек при любом освещении видит объект белого цвета как белый, потому что необходимую «цветокоррекцию» «автоматически» проводят человеческий глаз и мозг. Если источник освещения имеет непрерывный спектр тепловой природы, то этому спектру можно поставить в соответствие некоторую температуру, до которой надо нагреть абсолютно чёрное тело, чтобы его излучение имело такой же спектральный состав. Эта температура получила название температуры.
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 193 Цветовую температуру измеряют в Кельвинах. Пламя свечи имеет цветовую температуру около 1800 К, лампы накаливания — 2500 К, восход солнца — 3800 К, лампа-вспышка — 5500 К, голубое безоблачное небо в летний день — 11000 К и выше. Излучение нагретого чёрного тела в видимом диапазоне Примечание: Цвета даны в сравнении с рассеянным дневным светом (D65). Реально воспринимаемый цвет может быть искажен адаптацией глаза к условиям освещения. Шкала цветовых температур распространённых источников света
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 194 Цветовая температура (К) в сравнении с некоторыми источниками света 800 К — начало видимого темно-красного свечения раскалённых тел 2000 К — свет пламени свечи, 2360 К — лампа накаливания, вакуумная, 2800—2854 К — газонаполненные (газополные) лампы накаливания с вольфрамовой спиралью, 3200—3250 К — типичные киносъёмочные лампы, 5500 К — дневной свет, прямой солнечный, 6500 К — стандартный источник дневного белого света, он близок к полуденному солнечному свету, 7500 К — дневной свет, с большой долей рассеянного от чистого голубого неба, 100000 К — цвет источника с «бесконечной температурой»
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 195 Цветовой круг Для более удобной работы со спектром видимого света уже не одно столетие используется понятие "цветовой круг". Приведем примеры разных трактований этого понятия: Круг естественных цветов по Гёте Обозначение цветов и их правильное название в цветовом круге к - красныйко - красно-оранжевыйо - оранжевыйж - желтыйжз - желто-зеленыйз - зеленыйсз - сине-зеленыйс - синийсф - сине-фиолетовыйф - фиолетовыйкф - красно-фиолетовый сжк - основной треугольник, первичные (основные) цвета.фоз - перевернутый треугольник (вторичные цвета, смешанные цвета первого порядка).сз, сф, кф и т.д. - смешанные цвета второго порядка.
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 196 Расположение цветов в круге относительно друг друга дает возможность выделить следующие виды сочетаний: Контрастные сочетания. Цвета расположены друг против друга (например Ф и Ж). Считаются взаимно дополняющими друг друга и гармоничными. Сочетания цветов, расположенных по углам либо основного, либо перевернутого треугольника (например C и Ж), менее гармоничны. Сочетания цветов, расположенных в круге под углом 90° (для подбора сочетаний в два, три или четыре цвета), например, СФ и З или ЖО и З. Ньюансовые (монохромные) сочетания (например, голубые и синие цветы). Сочетания из разных предметов или растений одной окраски (например, букет из желтых роз, хризантем, нарциссов и тюльпанов).
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 197 Красный, оранжевый, желтый и их оттенки человеческий глаз воспринимает как теплые; Синий и фиолетовый - как холодные тона; У зеленого цвета есть холодные и теплые оттенки; Белый, черный и все оттенки серого цветов называются ахроматическими, причем серый тон может быть до бесконечности разнообразен и при оформлении представляет большие возможности по его использованию; Все цветные тона называются хроматическими. Хроматические цветовые тона с ахроматическими наиболее гармоничны в следующих сочетаниях: красный, оранжевый и желтый (теплые) с черным; голубой, синий, фиолетовый (холодные) с белым.
-
Большой цветовой круг Освальда
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 198 Большой цветовой круг Освальда применяется для образования гармоничных сочетаний из двух, трех, четырех цветовых тонов. При комбинации окрасок часто сталкиваются с проблемой, почему одни цвета создают приятное сочетание друг с другом, а другие режут глаз. Помогает решить эту проблему цветовой круг. Он дает более полную возможность составить необходимые сочетания. Например: если в композиции имеется предмет с насыщенным цветом, то к нему можно подобрать другой предмет, цвет которого усилил бы ощущение насыщенности цвета первого. Необходимо помнить, что с помощью фона можно усилить звучание композиции в целом, отдельных ее частей или предметов. Серый, черный и белый фон часто образует приятное сочетание, но белые предметы на светлом фоне пропадают. Бежевые цвета теряются на сером фоне.
-
Представление цвета в компьютере
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 199 Индексированные цвета и палитры Возможные варианты представления цветовых палитр: 1-битный цвет (21 = 2 цвета) монохромный цвет, чаще всего представляется чёрным и белым цветами (или черный и зелёный) 2-битный цвет (2² = 4 цвета) CGA, градации серого цвета 3-битный цвет (2³ = 8 цветов) Множество устаревших персональных компьютеров с TV-выходом 4-битный цвет (24 = 16 цветов) известен как EGA и в меньшей степени как VGA-стандарт с высоким разрешением 5-битный цвет (25 = 32 цвета) 6-битный цвет (26 = 64 цвета) 8-битный цвет (28 = 256 цветов) Устаревшие Unix-рабочие станции, VGA низкого разрешения, Super VGA, AGA 12-битный цвет (212 = 4,096 цветов) некоторые SiliconGraphics-системы.
-
Цветовые модели, цветовой охват
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 200 Субстрактивный синтез цвета в модели CMYK Аддитивный синтез цвета в модели RGB
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 201 Работа с цветом на компьютере требует формализации его представления, описания цветовых пространств получили название "цветовые модели". Цветовые модели можно классифицировать по различным признакам. Рассмотрим самые распространенные. По способу формирования цвета: Аддитивные (белый формируется сложением составляющих), субстрактивные (вычитание из белого), перцептуальные (основанные на восприятии). Наиболее распространенной моделью субстрактивного синтеза цвета является полиграфическая система CMYK — голубой, пурпурный, жёлтый, ключевой (чёрный). Помимо субстрактивной схемы, в теории цветовоспроизведения выделяют аддитивную. Она предполагает не вычитание цветовых составляющих из «белого» потока, а суммирование разноцветных потоков в единый результирующий поток. Одним из вариантов аддитивной схемы является модель RGB — красный, зелёный, синий). Если субстрактивная схема применяется в полиграфии (с «нулём» в белой бумаге), то аддитивная (обладающая бо́льшим цветовым охватом) — в телевизорах, мониторах и т.п., где выключенный экран выглядит чёрным.
-
Цветовой охват
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 202 Цветовой охват CIE Цвета, которые может воспринимать человеческий глаз.
-
16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 203 Литература по теме Маргулис, Дэн (2006) Photoshop LAB Color. Загадка каньона и другие приключения в самом мощном цветовом пространстве.ИНТЕРСОФТМАРК, г. Москва. ISBN 5-91157-002-5 Acharya, Tinku, Ray, Ajoy K. Imageprocessingprinciplesandapplications. WileyandSons. ISBN 0471719986 Математические основы машинной графики. Мир. 2001. ISBN 5-03-002143-4 Color Theory and Modeling for Computer Graphics, Visualization, and Multimedia Applications. KluwerAcademicPublishers. 1997. ISBN 0792399285 Символика цвета Геращенко, Эдуард (2001) Фокусировка - все просто и непросто. Алексей Шадрин, Андрей Френкель ColorManagementSystem (CMS) в логике цветовых координатных систем. Преобразования цветовых пространств (c) Издательские системы, по материалам Apple. М. Кувшинов Управление цветом. Статья опубликована в журнале Publish №3/1999. МАСТЕР-КЛАСС: Основы цифрового видео. (Цветовые модели RGB, YCrCb) 17 апреля 2008 г. Colour Management in Practice JISC, July 2004
Нет комментариев для данной презентации
Помогите другим пользователям — будьте первым, кто поделится своим мнением об этой презентации.