Презентация на тему "Понятие модульности"

Презентация: Понятие модульности
1 из 203
Ваша оценка презентации
Оцените презентацию по шкале от 1 до 5 баллов
  • 1
  • 2
  • 3
  • 4
  • 5
4.0
1 оценка

Комментарии

Нет комментариев для данной презентации

Помогите другим пользователям — будьте первым, кто поделится своим мнением об этой презентации.


Добавить свой комментарий

Аннотация к презентации

Презентация для студентов на тему "Понятие модульности" по мировой художественной культуре (МХК). Состоит из 203 слайдов. Размер файла 15.81 Мб. Каталог презентаций в формате powerpoint. Можно бесплатно скачать материал к себе на компьютер или смотреть его онлайн.

Содержание

  • Презентация: Понятие модульности
    Слайд 1

    Понятие модульности

    Лекции по курсу «Основы компьютерного дизайна» Проф. д.т.н. Кузёмин А.Я.

  • Слайд 2

    Модуль

    Модуль — это единица измерения, установленная для придания соразмерности. Сетка — система пропорций. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 2

  • Слайд 3

    Задачи сетки:1. Ускорение работыМы не тратим лишнего времени на поиск геометрического места элемента в макете. К тому же имеем обоснования в размещении элементов. 2. Сбалансированность и пропорциональностьЭлементы в макете соизмеримы и пропорциональны между собой. Мы можем обосновать размеры блоков, кегль и проч.3. Ускорение и шаблонирование, единообразность элементовРазработав сетку, мы делаем основу для решений на будущее.

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 3

  • Слайд 4

    Примеры композиций и их сетки

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 4

  • Слайд 5

    Пример сайта с сеткой и без нее

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 5

  • Слайд 6

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 6

  • Слайд 7

    Виды сеток

    Самый простой вид сетки — блочная сетка. В западной литературе ее также называют «manuscriptgrid». Представляет собой грубо размеченную область — блок. Колоночная сетка 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 7

  • Слайд 8

    Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях есть модуль.

    Модульная сетка 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 8

  • Слайд 9

    В иерархической сетке размещение блоков интуитивное и не поддается закономерностям.

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 9

  • Слайд 10

    Отношения подразбиений

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 10 Сетка, которую мы построим, будет симметричной сеткой, базирующейся на последовательном разбиении страницы в отношении 1:1.414. Отталкиваясь от размера страницы (А4), мы можем сохранить пропорции на всей сетке, что выстроит отношение подобия между сеткой и листом. На рисунке диаграммы 1-6 показывают последовательность разбиения листа. Накладывая разбиения одно на другое, мы получаем симметричную сбалансированную сетку. Сначала лист делится на 4 части, используя указанную пропорцию (диаграмма 1). Потом создается сетка 3×3 в той же пропорции, и располагаем ее поверх предыдущей (диаграмма 2). Далее совершается еще одно деление, но при этом выполняется разворот на 90 градусов (диаграмма 3). После этого увеличивают пропорцию вправо вверх, чтобы создать отступы (диаграммы 4 и 5).

  • Слайд 11

    Включаем воображение

    Сетки могут содействовать воображению, предоставляя удобную платформу и отвечая на наиболее часто возникающие вопросы. Итак, мы создали сетку. Теперь мы можем начать эксперименты с различным размещением текста, изображений и общей композицией. На рисунке ниже видно как текст и изображения взаимодействуют друг с другом на созданной разметке для публикации. Диаграмма 7 показывает как располагается текст в сетке. Диаграммы 8 и 9 отражают адаптацию сетки к различным вариантам компоновки страницы. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 11

  • Слайд 12

    Пропорции

    Сетки могут быть как простыми — с одинаковыми по размерам модулями, так и сложными, с нелинейными пропорциями у размеров модулей.Типы пропорции: «Золотое сечение». Ряд Фибоначчи. Каждое последующее число оказывалось равным сумме двух предыдущих: 1, 2, 3, 5, 8, 1З, 21 и т. д. Он обладает тем свойством что, отношения между соседними членами по мере возрастания чисел ряда, все более приближаются к 1,618, то есть, к отношению «золотого сечения».Системы «предпочтительных чисел»и различные модульные системы. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 12

  • Слайд 13

    «Предпочтительные числа» — ряд чисел геометрической прогрессии, где каждое последующее число образуется умножением предыдущего числа на какую-нибудь постоянную величину.

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 13

  • Слайд 14

    В Древней Греции эпохи классики возник ряд учений о гармонии. Из них наиболее глубокий след в мировой культуре оставило Пифагорейское учение. Последователи Пифагора представляли мир, вселенную, космос, природу и человека как единое целое, где все взаимосвязано и находится в гармонических отношениях. Гармония здесь выступает как начало порядка - упорядочивания хаоса. Гармония присуща природе и искусству: «Одни и те же законы существуют для музыкальных ладов и планет».24Пифагорейцы и их последователи всему сущему в мире искали числовое выражение. Ими было обнаружено; что математические пропорции лежат в основе музыки (отношение длины струны к высоте тона, отношения между интервалами, соотношение звуков в аккордах, дающих гармоническое звучание). Пифагорейцы пытались математически обосновать идею единства мира, утверждали, что в основе мироздания лежат симметричные геометрические формы. 

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 14

  • Слайд 15

    Золотое сечение – гармоническая пропорция

    В математике пропорцией (лат. proportio) называют равенство двух отношений: a : b = c : d. Отрезок прямой АВ можно разделить на две части следующими способами: на две равные части – АВ : АС = АВ : ВС; на две неравные части в любом отношении (такие части пропорции не образуют); таким образом, когда АВ : АС = АС : ВС. Последнее и есть золотое деление или деление отрезка в крайнем и среднем отношении. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 15

  • Слайд 16

    Золотое сечение– это такое пропорциональное деление отрезка на неравные части, при котором весь отрезок так относится к большей части, как сама большая часть относится к меньшей; или другими словами, меньший отрезок так относится к большему, как больший ко всемуa : b = b : c или с : b = b : а.

    Геометрическое изображение золотой пропорции 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 16

  • Слайд 17

    Деление отрезка прямой по золотому сечению. BC = 1/2 AB; CD = BC

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 17

  • Слайд 18

    Из точки В восставляется перпендикуляр, равный половине АВ. Полученная точка С соединяется линией с точкой А. На полученной линии откладывается отрезок ВС, заканчивающийся точкой D. Отрезок AD переносится на прямую АВ. Полученная при этом точка Е делит отрезок АВ в соотношении золотой пропорции. Отрезки золотой пропорции выражаются бесконечной иррациональной дробью AE = 0,618..., если АВ принять за единицу, ВЕ = 0,382... Для практических целей часто используют приближенные значения 0,62 и 0,38. Если отрезок АВ принять за 100 частей, то большая часть отрезка равна 62, а меньшая – 38 частям. Свойства золотого сечения описываются уравнением: x2 – x – 1 = 0.Решение этого уравнения:

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 18

  • Слайд 19

    Золотой треугольник

    Для нахождения отрезков золотой пропорции восходящего и нисходящего рядов можно пользоваться пентаграммой. Построение правильного пятиугольника и пентаграммы 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 19

  • Слайд 20

    Для построения пентаграммы необходимо построить правильный пятиугольник. Способ его построения разработал немецкий живописец и график Альбрехт Дюрер (1471...1528). Пусть O – центр окружности, A – точка на окружности и Е – середина отрезка ОА. Перпендикуляр к радиусу ОА, восставленный в точке О, пересекается с окружностью в точке D. Пользуясь циркулем, отложим на диаметре отрезок CE = ED. Длина стороны вписанного в окружность правильного пятиугольника равна DC. Откладываем на окружности отрезки DC и получим пять точек для начертания правильного пятиугольника. Соединяем углы пятиугольника через один диагоналями и получаем пентаграмму. Все диагонали пятиугольника делят друг друга на отрезки, связанные между собой золотой пропорцией.Каждый конец пятиугольной звезды представляет собой золотой треугольник. Его стороны образуют угол 36° при вершине, а основание, отложенное на боковую сторону, делит ее в пропорции золотого сечения.

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 20

  • Слайд 21

    Построение золотоготреугольника

    Проводим прямую АВ. От точки А откладываем на ней три раза отрезок О произвольной величины, через полученную точку Р проводим перпендикуляр к линии АВ, на перпендикуляре вправо и влево от точки Р откладываем отрезки О. Полученные точки d и d1 соединяем прямыми с точкой А. Отрезок dd1 откладываем на линию Ad1, получая точку С. Она разделила линию Ad1 в пропорции золотого сечения. Линиями Ad1 и dd1 пользуются для построения «золотого» прямоугольника. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 21

  • Слайд 22

    Золотое сечение и симметрия

    Золотое сечение нельзя рассматривать само по себе, отдельно, без связи с симметрией. Великий русский кристаллограф Г.В. Вульф (1863...1925) считал золотое сечение одним из проявлений симметрии. Золотое деление не есть проявление асимметрии, чего-то противоположного симметрии Согласно современным представлениям золотое деление – это асимметричная симметрия. В науку о симметрии вошли такие понятия, как статическаяи динамическая симметрия. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 22

  • Слайд 23

    Статическаяи динамическая симметрия

    Статическая симметрия характеризует покой, равновесие, а динамическая – движение, рост. Так, в природе статическая симметрия представлена строением кристаллов, а в искусстве характеризует покой, равновесие и неподвижность. Динамическая симметрия выражает активность, характеризует движение, развитие, ритм, она – свидетельство жизни. Статической симметрии свойственны равные отрезки, равные величины. Динамической симметрии свойственно увеличение отрезков или их уменьшение, и оно выражается в величинах золотого сечения возрастающего или убывающего ряда. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 23

  • Слайд 24

    Построение шкалы отрезков золотой пропорции

    Построение ряда отрезков золотой пропорции можно производить как в сторону увеличения (возрастающий ряд), так и в сторону уменьшения (нисходящий ряд). Если на прямой произвольной длины, отложить отрезок m, рядом откладываем отрезок M. На основании этих двух отрезков выстраиваем шкалу отрезков золотой пропорции восходящего и нисходящего рядов 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 24

  • Слайд 25

    Золотые пропорции в фигуре человека

    Цейзинг проделал колоссальную работу. Он измерил около двух тысяч человеческих тел и пришел к выводу, что золотое сечение выражает средний статистический закон. Деление тела точкой пупа – важнейший показатель золотого сечения. Пропорции мужского тела колеблются в пределах среднего отношения 13 : 8 = 1,625 и несколько ближе подходят к золотому сечению, чем пропорции женского тела, в отношении которого среднее значение пропорции выражается в соотношении 8 : 5 = 1,6. У новорожденного пропорция составляет отношение 1 : 1, к 13 годам она равна 1,6, а к 21 году равняется мужской. Пропорции золотого сечения проявляются и в отношении других частей тела – длина плеча, предплечья и кисти, кисти и пальцев и т.д. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 25

  • Слайд 26

    Принципы формообразования в природе

    Все, что приобретало какую-то форму, образовывалось, росло, стремилось занять место в пространстве и сохранить себя. Это стремление находит осуществление в основном в двух вариантах – рост вверх или расстилание по поверхности земли и закручивание по спирали. Раковина закручена по спирали. Если ее развернуть, то получается длина, немного уступающая длине змеи. Небольшая десятисантиметровая раковина имеет спираль длиной 35 см. Спирали очень распространены в природе. Представление о золотом сечении будет неполным, если не сказать о спирали. Спираль Архимеда Цикорий 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 26

  • Слайд 27

    Алгоритм

    В случае веба чаще всего ширина холста колеблется от 1024 до 1280 пикселей. Разумеется, ваша задача и идея может изменить эти рамки. Высота макета — величина непредсказуема в большинстве случаев. В отличие от полиграфии, веб-страница чаще всего не фиксирована по высоте, и ее собственный контент может ее же и увеличить. Выбираем высоту строки единую для всего макета. Все элементы рубрикации с кеглем, отличным от кегля основного текста, должны иметь интерлиньяж кратный выбранной высоте строки; в сумме со всеми вертикальными полями высота каждого такого элемента должна содержать целое количество строк шрифтовой сетки. Шаг 1. Делаем шрифтовую сетку 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 27

  • Слайд 28

    Шаг 2. Выбор модуля (точнее микромодуля)

    Микромодулем определяется большинство небольших расстояний (и больших тоже).Таким образом, мы получаем прообраз будущей сетки — «зебру». На этой сетке будет лежать весь текст: абзацы, списки, заголовки, иллюстрации, плашки и проч. В практике чаще всего используют такие параметры для шрифтовой сетки: кегль — 12 пикселей, высота строки — 18 пикселей. 16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 28

  • Слайд 29

    Микромодуль

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 29 . Итак, микромодулем называют величину, равную высоте строки. Представьте, что сетка атомарна, а высота строки — неделимая частица.  Существует много ситуаций, когда микромодуль может подсказать, как решить «микропроблему».  Принимаем равным микромодулю расстояние между поясами и колонками. Тем самым закладываем фундамент ровного вертикального ритма. Используем микромодуль для отделения абзацов друг от друга — отбивка пустой строкой, или «швейцарский абзац» Йозефа Мюллера-Брокмана.

  • Слайд 30

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 30 3. Если мы не собираемся отбивать абзацы строкой, красную строку мы можем выделять отступами либо втяжкой, которые тоже равны микромодулю — высоте строки. (Брингхерст, «Основы стиля в типографике», русское издание, Аронов, 2006, стр. 45). 4. Как и абзацы, списки могут быть набраны с отступом или наоборот — заступом, когда маркеры списка «свисают» за левую вертикальную границу колонки сетки. Использование второго способа выделения списков оправдано лишь тогда, когда это позволяет сделать пространство слева. 5. Значения внутренних полей плашек делайте соразмерным с микромодулем. 6. Соблюдение значения микромодуля для малых величин позволяет нам держаться «зебры», а значит, не сбиваться с ритма, заданного нами во втором пункте алгоритма.

  • Слайд 31

    ШВЕЙЦАРСКИЙ АБЗАЦ

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 31 Строки складываются в полосу набора. Полоса набора начинается с абзацных отступов. В классической традиции абзацы были маленькими. Чтобы минимально нарушать ровность края. И чтобы дополнительная ось, неизбежно считываемая глазом по абзацным отступам, не представляла собой угрозы монархическому порядку в книжно - классическом царстве одной оси. Там, где может быть только одна вертикаль власти. Модернистская типографика и не думает избегать многоосности. Она как раз на том стоит и стоять будет. Абзацные отступы здесь могут быть любыми. Кроме вялых и невнятных. Ведь один из главных принципов модернистского дизайна ХХ века — контраст. А это означает, что оси не могут находиться в неопределенно близких отношениях. Или полное слияние, или развод и девичья фамилия. Невнятность, нечеткость, неопределенность квалифицируются как «шум», «грязь». Противоположное качество — «чистота». Высшая оценка профессионализма: «чистое решение».

  • Слайд 32

    Типографика контрастов не боится крайностей. Абзац здесь может быть сколь угодно большим. Видная втяжка лишь добавляет в многодетное семейство координатных осей еще одну опору.

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 32 Можно делать абзацный отступ обратным, противоположным способом. Не «отступом», а «выступом» В таком случае срабатывает эффект неожиданности. Выход строки за пределы левого края буквально бросается в глаза и создает выразительный ритмический эффект.

  • Слайд 33

    Настоящая «декларация принципов» минимализма — нулевое решение. Абзацный отступ становится… никаким. Полное слияние осей. Это, конечно, круто. Правда, о наличии смыслового членения текста приходится тогда догадываться лишь по более коротким последним строкам предыдущего абзаца. Но что не сделаешь ради принципа!

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 33

  • Слайд 34

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 34

  • Слайд 35

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 35

  • Слайд 36

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 36

  • Слайд 37

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 37

  • Слайд 38

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 38

  • Слайд 39

    Плашки

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 39 Плашки — самый популярный и простой прием у дизайнеров, когда речь идет об акцентах. Плашки представляют собой боксовую модель. Те, кто верстает HTML знает, о существовании блочных элементов. Боксовая модель характерна наличием у элементов полей — внешних (margins)ивнутренних (paddings). Если размеры этих полей понятны (микромодуль), то остается обратить на то, что эти поля сдвигают содержимое блоков. А значат ломают вертикали и сетку. Выход — сдвигать блоки на величину поля. Или не сдвигать? Все зависит от интенсивности цвета плашки (фона блока).  

  • Слайд 40

    Рассмотрим два примера:

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 40 Горизонтальные и вертикальные направления в композиции О с н горизонталь 2-3%

  • Слайд 41

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 41

  • Слайд 42

    На что нужно обратить внимание:

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 42   Яркие по отношению к фону плашки никуда не выносятся.   Яркие плашки должны «вписаться» в сетку — их высота должна быть равна кратному количеству строк. Это достигается манипулированием вертикальными внутренними полями (padding-top и padding-bottom). Текст внутри такого блока не попадает в шрифтовую сетку — заботимся об оптике.   Выносятся плашки, которые обладают маленьким оптическим весом. Они не контрастны, поэтому не оказывают влияния на ритм.   В случае «легковесных плашек» текста не выбивается из потока. Плашка ненавязчиво обтекает содержимое блока.

  • Слайд 43

    Висячая пунктуация

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 43 Суть висячей пунктуации изложена в «Ководстве» Артемия Лебедева. Ниже демонстрируется оптическая компенсация. Дело в том, что такие графемы, как кавычки, скобки и прочие знаки препинания имеют меньший визуальный вес, нежели основной текст. Поэтому их принято «свешивать» за линию выключки.

  • Слайд 44

    Шрифты с засечками и крупные кегли

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 44 Заголовки, набранные крупным кеглем свешиваются, за линию выключки по тому же принципу, что и висячая пунктуация. Засечки в крупном кегле выглядят тоже не маленькими и по этому, такие заголовки «рвут» вертикаль. 

  • Слайд 45

    Иллюстрации

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 45 Главная особенность при работе с графическим контентом — понимание того, что иллюстрация есть не тупо прямоугольник, а набор пятен с разной интенсивностью. Пример: Горизонтальное выравнивание графики

  • Слайд 46

    Вертикальное выравнивание графики

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 46 Обратите внимание на то, где должны находится вертикальные границы графических вставок (обозначены красными линиями). Верхняя граница лежит на одной линии вместе с высотой строчного знака (x-height). Но, если вы набираете сопроводительный текст слева или справа капителью или прописными — верхняя граница картинки сместится соответственно.

  • Слайд 47

    Управление сеткой в ФотошопеГриды

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 47 Для работы с сеткой может показаться очевидным использование в Фотошопе — гридов(Edit > Preferences > Guides, Grids & Slices) Но на деле оказалось, что они не обладают необходимой гибкостью :   сетка строго состоит из квадратных модулей,   невозможно регулировать начало сетки.

  • Слайд 48

    Гайды

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 48 Задавать сетку гайдами оказалось делом неблагодарным. Во-первых, гайды сетки мешаются со вспомогательными гайдами, которые появляются в процессе работы. Во-вторых,просто не подымается рука делать зебру через 18 пикселей гайдами.

  • Слайд 49

    Решение

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 49 К сожалению, в Фотошопе не нашлось средств для управления сетками. Поэтому сетку пришлось рисовать самостоятельно. Для создания зебры делается слой-заливки (это не обычный слой, а слой-заливки: чтоб не кропилось) (Layer >Newfilllayer > Solidcolor) с паттерном в стилях: Паттерн, образующий «зебру»

  • Слайд 50

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 50 Настройка слоя-заливки. Яркость добавьте по вкусу У слоя-заливки заполнение (Fill) нужно свети в ноль. А для макетов с черным фоном нужно сделать такой же паттерн, только белый.Для создания сетки целесообразно пользоваться полупрозрачными векторными фигурами. Они не обрезаются при кропе. Чтобы они потом не мешали работать, их объединяю в смарт-объект: получается один слой вместо нескольких, плашки лишний раз не выделяются при работе с Pathselectiontool.

  • Слайд 51

    Таймсэйвер

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 51 Инструмент, который предлагается использовать в самом начале работы над дизайном сайта — заготовки сеток. Для оптимизации работы, я пришел к выводу, что каждый проект целесообразно начинать в следующей последовательности:  Создать новый холст в Фотошопе, Перетащить на него заготовку с рамкой браузера, Сделать шрифтовую «зебру», чаще всего на 18, Спроектировать сетку на 12, либо на 10, либо на n колонок.  

  • Слайд 52

    Восприятие человеком информации

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 52 Движение взгляда по листу бумаги Активные направления Пассивные направления

  • Слайд 53

    Модульная сетка

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 53

  • Слайд 54

    Регионы

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 54

  • Слайд 55

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 55

  • Слайд 56

    Сетки

    Are Grids Good?

  • Слайд 57

    Две точки на листе – это уже дизайн

  • Слайд 58

    А сетка – это самое яркое выражение желания упорядочить графический дизайн

  • Слайд 59
  • Слайд 60
  • Слайд 61

    Сначала пропорции взяли с природы … Зачем используют сетки?

  • Слайд 62

    используют их и сегодня

  • Слайд 63

    От такого представления …

  • Слайд 64

    … к такому

  • Слайд 65

    От сильно рационального, стандартизированного дизайна Рационализм стал новым вызовом для дизайна. Нет декорации и формализмов, а логика и стандартизация.

  • Слайд 66

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

  • Слайд 67

    до единой сетки (unigrid) для большинства печатных изделий

  • Слайд 68

    также и в интернете

  • Слайд 69

    горизонтальная иерархия

  • Слайд 70

    Начнем с использованием сетки – хотя не так …

  • Слайд 71

    или так, где уже имеем рудиментарную сетку

  • Слайд 72

    а вот так …

  • Слайд 73

    Каждый дизайн начинается с определением проблемы и ограничений 1024 х 786 экран, большая область для объявлений

  • Слайд 74

    Это примерно 974 х 650 рх ‘Естественный’ размер браузера

  • Слайд 75

    Уменьшенные края, прим. 960 рх Полезная площадь

  • Слайд 76

    Самая полезная рекламная область - это так называемый Big Ad. 336 x 280 px как по рекомендации Internet Advertising Bureau

  • Слайд 77

    Дизайн основан на Big Ad будет приспосабливать ширины и других популярных областей

  • Слайд 78

    Единицы (Units) основные конструкционные блоки сеточки. Они все одинаковы. Столбы (Columns) - группы единиц, которые создают визуальную структуру страницы. Они необязательно должны быть одинаковы Использование ограничении Единицы области осложняют ситуацию, но они на самом деле могут быть полезны, потому что они служат как фиксированные ограничения. Ограничения – это источник изменении дизайна. В этом примере 4 единицы комбинированы в один столб.

  • Слайд 79

    В общем, мы хотим создать единицы в кратных трем или четырем. Идеально 12, потому что это 3 х 4. Правила 3, …, 4

  • Слайд 80

    3 столбика по 4 единицы. 12 единиц могут образовать 3 столба…

  • Слайд 81

    два столба по 6 единиц. или 2 столба…

  • Слайд 82

    4 столба по 3 единиц. 4 столба…

  • Слайд 83

    6 столбов по 2 единиц. 6 столбов…

  • Слайд 84

    К сожалению, 3 Big Ads не поместятся в нашу 960 px ширину. Неблагоприятный размер

  • Слайд 85

    Площадь - ((Общее количество единиц-1) x Промежуток) ÷ Общее количество единиц = Единица 950 - ((16 -1) x 10) ÷ 16 = Единица (Don’t worry about doing it this way.) Сгонять ширину полосы до кратного 340 px.

  • Слайд 86

    Разделите полосу в две единицы по165 px, с промежутком ширины10 pixel. (340 - 10) ÷ 2 = 165

  • Слайд 87

    Получаем 5 единиц по 165 px с общей ширины как раз в 865 px. Это могло бы делен на 10 единиц, но с сеткой из 10 единиц сложно работать.

  • Слайд 88

    Вторая попытка В этот раз сгоним до ширины 350 px.

  • Слайд 89

    Делим на 3 с двумя промежутками по 10 px, получаем полосы по 110 px. (350 - (2 x 10)) ÷ 3 = 110

  • Слайд 90

    Результат - 8 полос по 110 px и общая ширина 950 px.

  • Слайд 91

    8 единиц – это хорошее количество, и мы можем их даже дальше делить на сетку с 16 единиц и быть более свободными. Эти единицы по 50 px.

  • Слайд 92

    Сетка из 16 единиц дает возможность формировать два равных столбца в левой части.

  • Слайд 93

    и делить правую часть в 2 или 3 столбца.

  • Слайд 94

    Также мы сможем отделить две единицы на левой стороне, чтобы создать левую навигацию.

  • Слайд 95

    Третий раз - очарование Для более четкого подхода мы можем сгонять полосу в 338 px.

  • Слайд 96

    Делим в этот раз на 5 с 4 промежутками по 7 px, то каждая единица получается по 62 px. (338 - (4 x 7)) ÷ 5 = 62

  • Слайд 97

    Получаем 14 единиц по 62 px с общей шириной 959 px. 14 – это странное число, но иногда получается из-за этого более интересно.

  • Слайд 98

    Это позволяет левый регион консолидировать в 3 столбца.

  • Слайд 99

    Также позволяает чуть более широкий и более четкий левый столбец для навигации.

  • Слайд 100

    Пора заниматься дизайном Заголовок

  • Слайд 101

    Используете баланс региона логотипа для поискового региона.

  • Слайд 102

    The Box Model Использование сетки не только просто накладка элементов вдоль ее края.

  • Слайд 103

    Пишем 3 элемента в сетке из 9 модулей. Инстинктивно мы начинаем с левого края каждого столбца.

  • Слайд 104

    Разделим эти столбцы по простым правилам.

  • Слайд 105

    Такая строгая связь с сеткой приводит к визуальным напряжениям.

  • Слайд 106

    Что будет, если нужен текст внутри текстового поля?

  • Слайд 107

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

  • Слайд 108

    Ответ в том, что надо использовать одинаковую вставку для всех элементов.

  • Слайд 109

    Так мы получаем визуальную согласованность вне зависимости от того, какой текст вставлен и позволяет расстояние от линий элементов.

  • Слайд 110
  • Слайд 111

    Сегодня целесообразно использовать CSS box model в качествемодели представления визуального пространства вокруг любого элемента.

  • Слайд 112
  • Слайд 113

    Возвращаемся к поиску

  • Слайд 114
  • Слайд 115

    Также надо добавить возможности поиска: Web, Images, Video, Local, Shopping и More.

  • Слайд 116

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

  • Слайд 117

    Опрокидыванное состояние выравнивается с сеткой.

  • Слайд 118

    Навигация (и Framing) Выбрать две единицы чтобы формировать навигационный столбец на левой стороне.

  • Слайд 119

    Добавим линии между большинством навигационных элементов и чтобы комбинировать элементы в группы.

  • Слайд 120

    Ближе посмотрим размещение линии.

  • Слайд 121

    Каждая область должна быть формирована по тем же принципам как в framingе. Расстояния для всех сторон должно быть визуально одинаково (visually equal). Но только верх и левая и правая стороны должны быть математически равны. Низ под текстом должен быть меньше.

  • Слайд 122
  • Слайд 123

    Результат визуально уравновешенный.

  • Слайд 124

    Иллюзия визуальной уравновешенности усиливается, когда элементы сложены.

  • Слайд 125

    Даже группы из несколько элементов могут быть трактованы таким же образом.

  • Слайд 126
  • Слайд 127

    Виджеты

  • Слайд 128
  • Слайд 129
  • Слайд 130
  • Слайд 131

    Сделайте слой в верхнем регионе и передвиньте навигацию ниже.

  • Слайд 132

    Add a lightyellowlayer anddivideupthearea intoequalareas — except thenumberofunitsdon’t easilydivide.

  • Слайд 133
  • Слайд 134
  • Слайд 135
  • Слайд 136

    Гороскоп, локальная информация и радио.

  • Слайд 137

    Пользователи привыкли к цветным картинам в правом столбце в качестве рекламы (advertising).

  • Слайд 138

    Добавьте линии сетоки

  • Слайд 139

    Область для элементов

  • Слайд 140

    Группируете 7 единиц в выделенную область элементов. Табулаторы для 4 главных областей: Features, Entertainment, Sports, Life.

  • Слайд 141

    Add Tabs

  • Слайд 142

    Табулаторы вне сетки. Let tabs be tabs.

  • Слайд 143

    Главная тема

  • Слайд 144

    Размер картин Консолидируете 3 единицы в область шириной 200 px width. Высота 120 px.

  • Слайд 145

    Главный рисунок Выделите табулаторы – более интересно.

  • Слайд 146

    Другие темы Ниже пропорциональные области для фото.

  • Слайд 147

    Резервная область Большая область для ‘More Stories…’.

  • Слайд 148

    Посто готово С рисунками.

  • Слайд 149

    Добавьте больше интересное Передвиньте табуляторы вверх, чтобы их лучше видно было.

  • Слайд 150

    Completed Feature Stories Area

  • Слайд 151

    Headlines & Other Modules

  • Слайд 152
  • Слайд 153
  • Слайд 154

    Оцените общий эффект Проблемы читать табулаторы заголовок в общей области.

  • Слайд 155

    Приукрашивайте с помощью фона

  • Слайд 156
  • Слайд 157

    Autos 4 не выровненные столбцы.

  • Слайд 158

    More элементов Необязательно их тесно связать с сеткой.

  • Слайд 159

    Самое популярное Simple, Familiar Прямые списки. Можно их делать более интересными?

  • Слайд 160

    Разные ориентации Меняйте ориентацию чтобы улучить вид.

  • Слайд 161

    Списки с горизонтальной ориентации

  • Слайд 162

    Done!

  • Слайд 163

    Родные сайты Personals

  • Слайд 164

    Такие же единицы

  • Слайд 165

    Меняйте структуры столбцов

  • Слайд 166

    Меняйте структуры столбцов

  • Слайд 167

    ПОНЯТИЕ О ГАРМОНИИ МАТЕМАТИЧЕСКИЕЗАКОНОМЕРНОСТИ  КОМПОЗИЦИИ

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 167 Пропорциональность, соразмерность частей целого является важнейшим условием гармонии целого и может быть выражена математически посредством пропорций Пропорция означает равенство двух или нескольких отношений. Существует несколько видов пропорциональности: математическая, гармоническая, геометрическая и др. В прямоугольнике з. с. стороны находятся в отношении з.с. Этот пр-к содержит в себе квадрат и малый пр-к з. с. (его большая сторона является малой стороной первоначального пр-ка.) Можно построить пр-к з.с. на основании квадрата: сторона квадрата делится пополам, из той точки к вершине проводится диагональ, с помощью которой на стороне квадрата строится пр-к з.с. На основе пятиугольника На основе квадрата

  • Слайд 168

    Бесконечное повторение прямоугольника з. с. и квадрата при рассечении прямоугольника з. с. обнаруживает повторение целого в его частях, что является одним из условий гармонии целого. Это свойство прямоугольника з. с. является способом гармонизации, способ пропорционирования.

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 168 Схема идеальных Пропорций средневековой рукописи. Пропорции страницы 2:3, а плоскость, занятая письмом- в пропорции золотого сечения Один из способов определения размера полосы набора при заданном формате Пропорционирование - приведение частей целого к единому пропорциональному строю. 

  • Слайд 169

    Француз Корбюзье создал целую систему пропорционирования на основе чисел ряда золотого сечения и пропорций человеческого тела и назвал ее «Модулор», что по-латыни означает - ритмически размерять 

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 169

  • Слайд 170

    Варианты деления прямоугольника на основе Модулора

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 170

  • Слайд 171

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 171 Хэмбидж исследовал динамическую симметрию, которую он обнаружил в ряде прямоугольников, с целью ее практического применения художниками в композиционном построении. Он делает попытку раскрыть секреты, которыми пользовались древние греки, добиваясь гармонического решения формы. Используются свойства прямоугольников, составляющих ряд, где каждый последующий прямоугольник строится на диагонали предыдущего, начиная с диагонали квадрата Ö2. Это прямоугольники Ö4, Ö5 (с меньшей стороной равной стороне квадрата, принятой за единицу). Кульминацией ряда является прямоугольник Ö5, обладающий особыми гармоническими свойствами и «родственный» прямоугольнику золотого сечения

  • Слайд 172

    Предпочтительные числа

    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 Пропорционирование связано с понятиями соразмерности и меры. Одним из способов соизмерения целого и его частей является модуль. Модуль - размер или элемент, повторяющийся неоднократно в целом и его частях. Модуль (лат.) означает - мера.

  • Слайд 173

    Модульные сетки для рекламных изданий

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 173

  • Слайд 174

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 174

  • Слайд 175

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 175 Помимо прямоугольника золотого сечения и квадрата, наибольший интерес для нас представляют прямоугольники √2 и  √ 5. Древние греки эпохи классики предпочитали именно эти прямоугольники, Хэмбидж утверждает, что 85% произведений греческого классического искусства построено на прямоугольнике  √ 5. Чем интересен этот прямоугольник? Будучи разделенным по вертикали н по горизонтали на две части, он восстанавливает свои пропорции. Прямоугольник этот можно расчленить на квадрат и два малых прямоугольника золотого сечения. Кроме того, в нем просматриваются два прямоугольника золотого сечения, перекрывающие друг друга на величину квадрата.

  • Слайд 176

    Оставшаяся часть тоже представляет собой прямоугольник золотого сечения. Таким образом, прямоугольник Ö5 обнаруживает ритмические свойства. В нем возникает красивая симметрия (малый прямоугольник з. с.+квадрат+малыйпр-к з. с.)

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 176

  • Слайд 177

    Хэмбидж приводит композиционную схему греческой чаши для питья из бостонского музея: чаша вписывается (без ручек) в горизонтально вытянутый прямоугольник Ö5 Диагонали двух прямоугольников золотого сечения, перекрывающих друг друга на квадрат, пересекаются в точке, через которую проходит граница между чашей и ее ножкой. Ширина основания ножки равна высоте чаши и равна стороне квадрата, находящегося в центре прямоугольника Ö5 Ножка вписывается в два малых прямоугольника з. с., отсеченных от квадрата линией, горизонтальной к основанию пр-ка Ö5 и проходящей через точку пересечения двух диагоналей больших прямоугольников з. с.

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 177

  • Слайд 178

    Масштабные отношения

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 178  между вещами, предметным окружением и человеком выступают как средство гармонизации, ибо масштаб является одним из проявлений соразмерности, устанавливающим относительные размеры между человеком и предметом - в архитектуре, в дизайне, в прикладном искусстве, в частности, в прикладной графике, в искусстве книги. Так, размеры и форматы плакатов и любых объектов, служащих целям визуальной коммуникации - вывесок, дорожных знаков и т. д., а также их композиционное решение всегда избираются в зависимости от назначения и от условий эксплуатации, а значит и в соответствующих масштабных отношениях. То же самое касается и области книжного оформления и всевозможной печатной рекламы и упаковки.

  • Слайд 179

    Симметрия

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 179 В пропорции и соразмерности проявляются количественные отношения между частями целого и целым. Греки к ним присоединяли и симметрию, рассматривая ее как вид соразмерности, - как ее частный случай - тождество. Она, как и пропорция, почиталась необходимым условием гармонии и красоты. Симметрия основана на подобии. Она означает такое соотношение между элементами, фигурами, когда они повторяют и уравновешивают друг друга. В математике под симметрией подразумевается совмещение частей фигуры при перемещении ее относительно оси или центра симметрии.

  • Слайд 180

    Различные виды симметрии обладают различным воздействием на эстетическое чувство: зеркальная симметрия - равновесие, покой; винтовая симметрия вызывает ощущение движения.

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 180 Зеркальная, винтовая, центральная, по сдвигу "Линия грации и красоты" Хогарта Симметрия связана с понятием середины и целого. В древнегреческой философии и искусстве понятие «середины, центра связано с представлением о цельности бытия. Середина - «избегание крайностей» (Аристотель) - означает принцип уравновешенности. «Везде грек видел нечто цельное. А это и значит, что он прежде всего фиксировал центр наблюдаемого или постороннего предмета... Без понятия «середины» немыслимо античное учение о пропорциях, мере, симметрии или гармонии».

  • Слайд 181

    Гармония - понятие диалектическое

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 181 По древнегреческой мифологии Гармония - дочь бога войны Арея и богини любви и красоты Афродиты,- то есть, в ней слиты противоположные, враждующие начала. Поэтому понятие гармонии включает в себя контраст как необходимое условие. Контраст способствует многообразию и разнообразию, без которых немыслима гармония. «Гармония есть единение многого и согласие несогласного» (Филолай).

  • Слайд 182

    Гармония - эстетическая категория

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 182 Симметрия, пропорции, ритм, контраст, цельность – образующие гармонию объективно связаны с природой, с движением и развитием материи. В последующие эпохи проявления прекрасного стали обнаруживать и в нарушении порядка, в диссонансах, в кажущейся дисгармонии, ибо они свойственны жизни и, следовательно, являются частью какой-то иной гармонической системы, в которой обретают логику и смысл

  • Слайд 183

    Физические основы компьютерной графики

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 183 Человеческое зрение Спектральная чувствительность человеческого зрения Цветовое зрение У приматов (и человека) мутация вызвала появление колбочек — цветовых рецепторов. Мутация была вызвана появлением изменённой копии гена, отвечающего за восприятие средней, зелёночувствительной области спектра. Она обеспечила лучшее распознавание объектов «дневного мира» — плодов, цветов, листьев. В глазу человека содержатся два типа светочувствительных клеток (рецепторов): высоко чувствительные палочки, отвечающие за сумеречное (ночное) зрение, и менее чувствительные колбочки, отвечающие за цветное зрение.

  • Слайд 184

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 184 В сетчатке глаза человека есть три вида колбочек, максимум чувствительности которых приходится на красный, зелёный и синий участки спектра, то есть соответствует трём «основным» цветам. Они обеспечивают распознавание тысяч цветов и оттенков. Кривые спектральной чувствительности трёх видов колбочек частично перекрываются, что вызывает эффект метамерии. Очень сильный свет возбуждает все 3 типа рецепторов, и потому воспринимается, как излучение слепяще-белого цвета. Равномерное раздражение всех трёх элементов, соответствующее средневзвешенному дневному свету, также вызывает ощущение белого цвета. Трёхсоставную теорию цветового зрения впервые высказал в 1756 году М. В. Ломоносов, когда он писал «о трёх материях дна ока». Сто лет спустя её развил немецкий учёный Г. Гельмгольц. Чувствительность палочек (пунктирная линия) и трёх типов колбочек к излучению с разной длиной волны

  • Слайд 185

    Теория цветоощущения Гельмгольца

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 185 Теория цветоощущения Юнга-Гельмгольца, трёхкомпонентная теория цветоощущения— теория цветоощущения, предполагающая существование в глазу особых элементов для восприятия красного, зелёного и фиолетового цветов. Восприятие других цветов обусловлено взаимодействием этих элементов. Сформулирована Томасом Юнгом и Германом Гельмгольцем. Теория Юнга—Гельмгольца объясняет восприятие цвета только на уровне колбочек сетчатки, и не может объяснить все феномены цветоощущения, такие как цветовой контраст, цветовая память, цветовые последовательные образы, константность цвета и др., а также некоторые нарушения цветового зрения.

  • Слайд 186

    Оппонентная теория цвета Эвальда Геринга (Хьюбл и Вайзел)

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 186 Спектральная чувствительность рецепторов глаза: иллюстрация метаметрии.   Цветоразностное восприятие цвета

  • Слайд 187

    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 — функции коэффициентов баланса белого для любого освещения. Практически это выражается в том, что люди воспринимают цвет предметов одинаково при разных источниках освещения (цветовая адаптация).

  • Слайд 188

    Несмотря на кажущуюся противоречивость двух теорий, по современным представлениям, верны обе

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 188 На уровне сетчатки действует трёхстимульная теория, однако, информация обрабатывается, и в мозг поступают данные уже согласующиеся с оппонентной теорией. Проявление метамерии: разный спектральный состав света вызывает одинаковые цветовые ощущения.

  • Слайд 189

    Спектр, цвет, видимый свет

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 189 Разложение света по цветам при помощи призмы Спектр (лат. spectrum от лат. spectare — смотреть) — множество значений физической величины, распределенных по некоторому энергетическому параметру, а также графическое представление такого распределения. Видимое излучение — это электромагнитные волны, воспринимаемые человеческим глазом, которые занимают участок спектра ~ от 380 (Фиолетовый) до 780 нм (Красный). Интервал видимого излучения является малой частью интервала электромагнитного излучения вообще. За пределами этой ограниченной области электромагнитное излучение не вызывает у человека зрительных ощущений или, другими словами, является для него невидимым.

  • Слайд 190

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 190 Цвет — качественная субъективная характеристика электромагнитного излучения оптического диапазона, определяемая на основании возникающего физиологического зрительного ощущения, и зависящая от ряда физических, физиологических и психологических факторов. Индивидуальное восприятие цвета определяется его спектральным составом, а также цветовым и яркостным контрастом c окружающими источниками света, а также несветящимися объектами. Дополнительно можно ознакомиться со статьей Алексея Шадрина, Андрея Френкеля "ColorManagementSystem (CMS) в логике цветовых координатных систем", где подробно и наглядно разобраны вопросы цветообразования.

  • Слайд 191

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 191 Имя цвета — термин, отражающий психологическую компоненту в восприятии света и цвета. Имя цвета — психологическая его характеристика, имеющая выраженную этническую компоненту. Так, имя цвета зеленый достаточно однозначно определяет диапазон длин волн отраженного излучения (или же источника света), хотя и может быть синтезирован при помощи других цветов, в то время как имя цвета коричневый неоднозначно — этот ощущаемый человеком цвет, как и большинство других, может быть синтезирован с помощью разных спектральных наборов (метамерия). В разных языках имя цвета для одного и того же физического объекта могут отличаться, или даже отсутствовать. Этим объясняется тот факт, что у разных народов в радуге различается разное количество цветов. Люди, имеющие прямое отношение к работе с цветом, часто оперируютзаведомо большим количеством имен цветов, чем может однозначно понять "простой смертный". Так же, в среде художников применяются термины, плохо совместимые с компьютерным представлением и бытующими среди программистов понятиями. Так, пожелание дизайнера "сделать этот зеленый потеплее" может быть не понято веб-мастером, не владеющим знаниями, которые предлагаются в следующих частях данной лекции. В то же время цвет в колориметрии определятеся однозначно, как вектор в заданной системе координат. Системы координат могут быть разными, например, RGB, CMYK, XYZ.

  • Слайд 192

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 192 Температура цвета, баланс белого Баланс белого цвета (также кратко называемый баланс белого) — один из параметров метода передачи цветного изображения, определяющий соответствие цветовой гаммы изображения объекта цветовой гамме объекта съёмки. Человек при любом освещении видит объект белого цвета как белый, потому что необходимую «цветокоррекцию» «автоматически» проводят человеческий глаз и мозг. Если источник освещения имеет непрерывный спектр тепловой природы, то этому спектру можно поставить в соответствие некоторую температуру, до которой надо нагреть абсолютно чёрное тело, чтобы его излучение имело такой же спектральный состав. Эта температура получила название температуры.

  • Слайд 193

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 193 Цветовую температуру измеряют в Кельвинах. Пламя свечи имеет цветовую температуру около 1800 К, лампы накаливания — 2500 К, восход солнца — 3800 К, лампа-вспышка — 5500 К, голубое безоблачное небо в летний день — 11000 К и выше. Излучение нагретого чёрного тела в видимом диапазоне Примечание: Цвета даны в сравнении с рассеянным дневным светом (D65). Реально воспринимаемый цвет может быть искажен адаптацией глаза к условиям освещения. Шкала цветовых температур распространённых источников света

  • Слайд 194

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 194 Цветовая температура (К) в сравнении с некоторыми источниками света 800 К — начало видимого темно-красного свечения раскалённых тел 2000 К — свет пламени свечи, 2360 К — лампа накаливания, вакуумная, 2800—2854 К — газонаполненные (газополные) лампы накаливания с вольфрамовой спиралью, 3200—3250 К — типичные киносъёмочные лампы, 5500 К — дневной свет, прямой солнечный, 6500 К — стандартный источник дневного белого света, он близок к полуденному солнечному свету, 7500 К — дневной свет, с большой долей рассеянного от чистого голубого неба, 100000 К — цвет источника с «бесконечной температурой»

  • Слайд 195

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 195 Цветовой круг Для более удобной работы со спектром видимого света уже не одно столетие используется понятие "цветовой круг". Приведем примеры разных трактований этого понятия: Круг естественных цветов по Гёте Обозначение цветов и их правильное название в цветовом круге к - красныйко - красно-оранжевыйо - оранжевыйж - желтыйжз - желто-зеленыйз - зеленыйсз - сине-зеленыйс - синийсф - сине-фиолетовыйф - фиолетовыйкф - красно-фиолетовый сжк - основной треугольник, первичные (основные) цвета.фоз - перевернутый треугольник (вторичные цвета, смешанные цвета первого порядка).сз, сф, кф и т.д. - смешанные цвета второго порядка. 

  • Слайд 196

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 196 Расположение цветов в круге относительно друг друга дает возможность выделить следующие виды сочетаний: Контрастные сочетания. Цвета расположены друг против друга (например Ф и Ж). Считаются взаимно дополняющими друг друга и гармоничными. Сочетания цветов, расположенных по углам либо основного, либо перевернутого треугольника (например C и Ж), менее гармоничны. Сочетания цветов, расположенных в круге под углом 90° (для подбора сочетаний в два, три или четыре цвета), например, СФ и З или ЖО и З. Ньюансовые (монохромные) сочетания (например, голубые и синие цветы). Сочетания из разных предметов или растений одной окраски (например, букет из желтых роз, хризантем, нарциссов и тюльпанов).

  • Слайд 197

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 197 Красный, оранжевый, желтый и их оттенки человеческий глаз воспринимает как теплые; Синий и фиолетовый - как холодные тона; У зеленого цвета есть холодные и теплые оттенки; Белый, черный и все оттенки серого цветов называются ахроматическими, причем серый тон может быть до бесконечности разнообразен и при оформлении представляет большие возможности по его использованию; Все цветные тона называются хроматическими. Хроматические цветовые тона с ахроматическими наиболее гармоничны в следующих сочетаниях: красный, оранжевый и желтый (теплые) с черным; голубой, синий, фиолетовый (холодные) с белым.

  • Слайд 198

    Большой цветовой круг Освальда

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 198 Большой цветовой круг Освальда применяется для образования гармоничных сочетаний из двух, трех, четырех цветовых тонов. При комбинации окрасок часто сталкиваются с проблемой, почему одни цвета создают приятное сочетание друг с другом, а другие режут глаз. Помогает решить эту проблему цветовой круг. Он дает более полную возможность составить необходимые сочетания. Например: если в композиции имеется предмет с насыщенным цветом, то к нему можно подобрать другой предмет, цвет которого усилил бы ощущение насыщенности цвета первого. Необходимо помнить, что с помощью фона можно усилить звучание композиции в целом, отдельных ее частей или предметов. Серый, черный и белый фон часто образует приятное сочетание, но белые предметы на светлом фоне пропадают. Бежевые цвета теряются на сером фоне.

  • Слайд 199

    Представление цвета в компьютере

    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-системы.

  • Слайд 200

    Цветовые модели, цветовой охват

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 200 Субстрактивный синтез цвета в модели CMYK Аддитивный синтез цвета в модели RGB

  • Слайд 201

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 201 Работа с цветом на компьютере требует формализации его представления, описания цветовых пространств получили название "цветовые модели". Цветовые модели можно классифицировать по различным признакам. Рассмотрим самые распространенные. По способу формирования цвета: Аддитивные (белый формируется сложением составляющих), субстрактивные (вычитание из белого), перцептуальные (основанные на восприятии). Наиболее распространенной моделью субстрактивного синтеза цвета является полиграфическая система CMYK — голубой, пурпурный, жёлтый, ключевой (чёрный). Помимо субстрактивной схемы, в теории цветовоспроизведения выделяют аддитивную. Она предполагает не вычитание цветовых составляющих из «белого» потока, а суммирование разноцветных потоков в единый результирующий поток. Одним из вариантов аддитивной схемы является модель RGB — красный, зелёный, синий). Если субстрактивная схема применяется в полиграфии (с «нулём» в белой бумаге), то аддитивная (обладающая бо́льшим цветовым охватом) — в телевизорах, мониторах и т.п., где выключенный экран выглядит чёрным.

  • Слайд 202

    Цветовой охват

    16.05.2017 Проф.,д.т.н. Кузёмин А.Я. Каф. Информатики, "Основы компьютерного дизайна" 202 Цветовой охват CIE Цвета, которые может воспринимать человеческий глаз.

  • Слайд 203

    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

Посмотреть все слайды

Сообщить об ошибке