После того как в растровом редакторе paint нарисуешь линию ее цвет уже нельзя изменить

Фигуры

Инструмент «Фигуры» предназначен для создания фигур разных форм. Инструмент имеет 29 предопределенных фигур: 8 основных форм, 8 многоугольников или звезд, 4 стрелки, 4 формы выноски и 5 символов.

При активизации инструмента «Фигуры» из выпадающего меню на Панели инструментов можно выбрать предустановленные формы.

Основные фигуры:

• Прямоугольник.
• Прямоугольник со скругленными углами.
• Эллипс.
• Ромб.
• Трапеция.
• Параллелограмм.
• Треугольник.
• Прямоугольный треугольник.

Многоугольники и звезды:

• Пятиугольник.
• Шестиугольник.
• Семиугольник.
• Восьмиугольник.
• Трехконечная звезда.
• Четырехконечная звезда.
• Пятиконечная звезда.
• Шестиконечная звезда.

• Стрелка.
• Зубчатая стрелка.
• Пятиугольная стрелка.
• Шеврон.

• Прямоугольная выноска.
• Округлая прямоугольная выноска.
• Выноска-эллипс.
• Выноска-облако.

• Молния.
• Флажок.
• Умножить.
• Шестеренка.
• Сердце.

Совет! Клавиша A циклически перемещает фигуры вперед при активизации опции Фигуры (сочетание Shift + A циклически перемещает назад).

Чтобы создать фигуру, кликните на выбранный тип фигуры в меню Панели инструментов и начинайте создавать фигуру на полотне. Фигура будет создана в режиме Редактирования. В режиме Редактирования форма не является фиксированной и может быть изменена в размере, ориентации, заливке и цвете наряду с параметрами сглаживания и режима смешивания. Все эти параметры доступны на Панели инструментов при активном инструменте «Фигуры». Кликните «Готово» на Панели инструментов для фиксации созданной фигуры на активном слое.

Внимание! При создании фигуры удерживайте клавишу Shift чтобы сохранить исходное соотношение высоты и ширины.

Перемещение фигуры

Прежде чем фигура будет зафиксирована на холсте, ее можно переместить в любое место на холсте. Щелкните и перетащите пульсирующий значок с четырьмя стрелками в квадрате (см. рисунок ниже), используя левую кнопку мыши, чтобы изменить положение фигуры.

Фигуру также можно перемещать, поместив указатель внутри фигуры. Он превратится в четырехстороннюю стрелку. Щелкните и перетащите левой кнопкой мыши, чтобы переместить фигуру.

Клавиши клавиатуры со стрелками ↑ ← ↓ → также можно использовать для перемещения фигуры. Одно нажатие клавиши перемещает объект на один пиксель в направлении стрелки. Одновременное нажатие с клавишей Ctrl перемещает объект на 10 пикселей.

Вращение фигуры

Прежде чем фигура будет зафиксирована на холсте, ее также можно вращать.

Точка вращения определяет центр вращения. Он выглядит как круг с крестом внутри (рис. ниже) и изначально расположен в центре фигуры. Щелкните и перетащите точку поворота, чтобы переместить ее (ее можно переместить за пределы фигуры или даже за пределы холста).

Поверните фигуру вокруг точки вращения, используя правую кнопку мыши, чтобы щелкнуть и перетащить. Альтернативой является размещение курсора сразу за пределами фигуры, когда он станет двухконечной изогнутой стрелкой (см. ниже). Это означает, что фигуру можно повернуть вокруг ее центра, щелкнув и перетащив с помощью левой кнопки мыши.

При удержании клавиши Shift нажатой, возможен только пошаговый поворот с дискретностью в 15 градусов.

Для поворота фигуры можно использовать клавиши клавиатуры со стрелками ↑ ← ↓ →, удерживая при этом правую клавишу мыши.

Фиксация фигуры на полотне

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

1. Нажмите клавишу Enter.
2. Кликните за пределами текущего прямоугольника, который ограничивает фигуру.
3. Нажмите Готово на Панели инструментов.
4. Начните рисовать новую фигуру.

Режим рисования и заливка Фигуры

Формы можно рисовать в трех различных режимах: Только контур, Только заливка, Контур и заливка. В первых двух вариантах используется Основной цвет при использовании Левой клавиши мыши или Дополнительный цвет при использовании Правой клавиши мыши. В режиме Контур и заливка заливка будет Дополнительным цветом, а контур — Основным цветом при использовании Левой клавиши мыши. Правая клавиша мыши меняет цвет.

Совет! Фигуры будут иметь равные ширину и высоту при вытягивании, если удерживать клавишу Shift.

Пример рисования фигур

Размер и стиль кисти

Формы зависят от настроек кисти на панели инструментов. Ширина кисти и стили линий настраиваются.

Радиус скругления

(только для Скругленного прямоугольника)

Фигура Скругленный прямоугольник имеет дополнительную настройку на Панели инструментов: Радиус скругления.

Радиус скругления — это радиус, приложенный к каждому из углов фигуры Скругленный прямоугольник. Маленькие значения закругляют углы мало. Большие значения закругляют углы больше.

Совет! После того, как в выпадающем списке выделено значение Радиуса скругления, для изменения значения можно использовать клавиши со стрелками вверх ↑ и вниз ↓.

Обратите внимание, что значение, применяемое при каждом нажатии клавиши, выбирается из предлагаемого списка. Размеры 1, 5, 25, 50 или 100 могут применяться в зависимости от величины текущего Радиуса скругления.

Стили Заливки

Фигуры могут отображаться одним из типов Заливки, выбранным из выпадающего списка на Панели инструментов.

Эта функция позволяет заполнять Фигуры одним из многочисленных шаблонов, а не сплошным цветом. Заливка с использованием выбранного стиля будет использовать Основной и Дополнительный цвета.

Сглаживание

Существует два режима сглаживания, связанных с инструментом «Фигуры». Эти параметры настройки определяют, будут ли линии, используемые для создания фигуры, отображаться в режиме пиксель к пикселю или нет.

• Когда Сглаживание включено, линии выглядят более гладкими, жирными и более мягкими (верхний пример).
• Когда Сглаживание выключено, линии отображаются в виде сплошных пикселей и выглядят более неровными и тонкими (нижний пример).

Сглаживание можно включить или отключить на Панели инструментов при активном инструменте «Фигуры».

Режимы Смешивания

Для инструмента «Фигуры» могут быть применены Режимы смешивания выбираемые на Панели инструментов. Инструмент «Фигуры» будет применен в соответствии с другими параметрами, а затем проинтерпретируется так, как если бы пиксели были на своем слое с установленным режимом смешивания слоев.

После того как в растровом редакторе paint нарисуешь линию ее цвет уже нельзя изменить

Для запуска графического редактора Paint необходимо выполнить: Пуск _ Программы > Стандартные > Графический редактор Paint . После запуска окно графического редактора Paint имеет вид, представленный на Рис. 47

Рис. 47 . Окно графического редактора Paint

Элементы окна редактора Paint :

1 � строка заголовка (имя файла рисунка и затем название редактора);

2 � строка меню (команды Файл , Правка , Вид , Рисунок , Палитра и Справка) ;

3 — панель инструментов;

4 — палитру цветов;

5 — поле выбора ширины линии;

6 — горизонтальную и вертикальную полосы прокрутки;

7 — рабочее поле (рабочая область).

Управлять работой в графическом редакторе Paint можно посредством выбора команд из меню и пиктограмм панели инструментов. Существуют команды, вызываемые или только через меню, или только через панель инструментов.

Основные действия с рисунком

Для создания нового рисунка применяют последовательность: Файл _ Создать . После этого в рабочей области окна появится белый прямоугольник, на фоне которого и работают.

Для изменения стандартного размера рисунка следует установить курсор в правый нижний угол белого прямоугольника (при этом курсор поменяет свой вид на две диагональные стрелки) и переместить курсор при нажатой левой кнопке мыши на новое место. Другой способ задания размеров рисунка выполняется посредством выбора из пункта меню Рисунок пункта Атрибуты и вводом в поля Ширина и Высота нужных значений. Также есть возможность выбрать Единицы измерения и Тип цветовой палитры (цветная или черно-белая). Следует отметить, что если текущие размеры рисунка превышают новые размеры, то рисунок обрезается по правому и нижнему краю. Если новые размеры больше текущих размеров, то добавленная область получает текущий фоновый цвет.

Для сохранения рисунка используют последовательность Файл _ Сохранить ( Сохранить как ). При этом необходимо задать имя файла, выбрать тип файла ( BMP , JPG или GIF ) и каталог для сохранения. Выполнение сохранения производится выбором мышкой действия Сохранить .

Если рисунок, который ранее находился в рабочей области, не был сохранен, но дана команда закрыть редактор, то будет задан вопрос: Сохранять изменения в файле . с вариантами ответа Да , Нет и Отмена . Выбор варианта Отмена приведет к отмене команды выхода и возврату к редактированию рисунка.

Для удаления всего нарисованного с рабочей области используют пункты меню Рисунок _ Очистить .

Для загрузки рисунка с диска используется последовательность Файл _ Открыть . После чего надо выбрать место расположения файла на диске (каталог), тип файла, и имя файла из списка. Действие подтверждается нажатием кнопки Открыть .

Панель инструментов

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

Рис. 48 . Панель инструментов Paint

Выделение произвольной области (1) и Выделение (2)� позволяют выделить часть рисунка произвольной формы или весь рисунок для последующего копирования, удаления и т.д.

Ластик (3)- стирание части рисунка. Можно менять размер ластика. Удаленный участок рисунка будет иметь цвет фона.

Заливка (4)- позволит закрасить выбранным цветом внутреннюю часть произвольной замкнутой области. Для этого требуется выполнить щелчок в любой точке внутри области. Если область не является замкнутой, то закрасится вся рабочая область.

Выбор цвета из имеющегося на рисунке (5)� для последующего рисования, например, карандашом или кистью.

Масштаб (6)� 1, 2, 6 или 8 � кратное увеличение фрагмента рисунка.

Карандаш (7)- при нажатой левой кнопки мыши за курсором мыши рисуется его след выбранного цвета толщиной 1 пиксель. При отпущенной левой кнопке след не рисуется.

Кисть (8)- действие похоже на карандаш, но можно менять форму кисти — кружок, квадратик и др. и толщину кисти.

Распылитель (9)- рисование с использованием эффекта распыления краски.

Надпись (10)� позволяет набирать текст символами выбранного размера, начертания и гарнитуры в прямоугольном окне с непрозрачным или прозрачным фоном.

Линия (11)- предназначена для рисования прямой линии (отрезка) выбранного цвета и толщины. Концы отрезка — места, где была нажата и отпущена левая кнопка мыши.

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

Прямоугольник (13)- используется для рисования закрашенных и незакрашенных прямоугольников и квадратов. Требуется нажать на левую кнопку мыши, перенести курсор в иную точку и отпустить кнопку. Возможные режимы � �только рамка�, �рамка и заполнение�, �только заполнение�.

Многоугольник (14)- рисование многоугольников. Для рисования первой стороны требуется перетащить курсор при нажатой кнопке. Для построения следующих сторон можно щелкать мышкой в вершинах многоугольника.

Эллипс (15)- рисование эллипса, вписанного в намеченный прямоугольник. Можно выбрать режим (см. прямоугольник).

Скругленный прямоугольник (16)- рисование прямоугольника со скругленными вершинами.

Редактирование рисунка

Выбор палитры

Для выбора цвета можно использовать два способа.

Во-первых, существует палитра цветов с 28 предлагаемыми цветами ( Рис. 49 ). Для выбора цвета линии и фона следует щелкнуть левой кнопкой мыши над нужным цветом. Для выбора цвета фона щелкают правой кнопкой. Используемые �по умолчанию� основной и фоновый цвета отображаются в левом нижнем углу окна Paint.

Рис. 49 . Цвета �по умолчанию� и палитра цветов

Во-вторых, можно выбрать инструмент Выбор цвета и щелкнуть им в том месте рабочей области, которая закрашена нужным цветом.

Для изменения палитры выберите цвет, который следует изменить. В меню Палитра выберите команду Изменить палитру . Нажмите кнопку Определить цвет , затем измените значения компонентов цвета, используя модель RGB (красный, зеленый, синий) или HLS (оттенок, контраст, яркость). Нажмите кнопки Добавить в набор и ОК .

Преобразование цветного рисунка в черно-белый

Для выполнения указанного действия в меню Рисунок выберите команду Атрибуты , затем выберите параметр палитры �черно-белая�. Преобразование рисунка в черно-белый является необратимым. После возвращения к цветной палитре цветными можно будет сделать только новый объект.

Обращение всех цветов рисунка

Производится путем выбора в меню Рисунок команды Обратить цвета . Каждый цвет будет заменен на обратный к нему (белый станет черным, желтый � синим и т.д.).

Вставка текст а в рисунок

Для вставки текста в рисунок используют инструмент Надпись . Для этого требуется щелкнуть мышкой на кнопке в панели инструментов. Щелчок мышью на рисунке приведет к появлению прямоугольника (рамки) для ввода текста в месте щелчка. В месте ввода появится текстовый курсор в виде буквы I. Рамка показывает границы участка рисунка, где будет размещен текст.

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

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

Для набора текста можно использовать различные шрифты. Шрифт представляет собой набор букв, цифр, символов и знаков пунктуации определенного внешнего вида. Характеристики шрифта: гарнитура (Times New Roman, Arial, Courier и др.), размер и начертание (обычное, полужирное, курсив, подчеркнутый). Для изменения всех атрибутов шрифта можно использовать �панель атрибутов текста� ( Рис. 50 ).

Рис. 50 . Панель атрибутов текста

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

Изменение масштаба, просмотр рисунка

Инструмент Масштаб служит для увеличения масштаба отображения текущего рисунка. Можно выбрать коэффициент увеличения �1х�, �2х�, �6х� и �8х� или можно установить появившийся прямоугольник над той областью рисунка, который хотят рассмотреть в увеличенном масштабе, и нажать на левую кнопку мыши. В увеличенном масштабе можно работать с отдельными пикселями, составляющими изображение рисунка. Чтобы восстановить исходный масштаб изображения, выбирают коэффициент �1х�.

При изменении масштаба нужная часть рисунка может пропасть с видимой части рабочего окна Paint, т.к. новый размер рисунка в несколько раз превосходит размер рабочей области. Необходимо прокрутить окно, чтобы рисунок появился в рабочей области. Для этого используются полосы вертикальной и горизонтальной прокрутки соответственно в правой и нижней сторонах рабочей области.

Также можно изменять масштаб изображения через меню Вид , используя команду Масштаб , Другой . В этом случае коэффициент масштабирования задается в процентах: 100%, 200%, 400%, 600% и 800% .

При выборе масштаба 400% и более имеется возможность включить сетку для более удобной работы с рисунком. Это осуществляется путем выбора из меню Вид команды Показать сетку .

В графическом редакторе Paint существует удобный способ для просмотра всего рисунка в обычном масштабе. При этом с экрана исчезнут рамка окна, все панели инструментов, палитра и полосы прокрутки. Будет виден только редактируемый рисунок в обычном масштабе в полноэкранном изображении. В этом режиме можно только просматривать изображение с запретом редактирования. Для просмотра используют последовательность Вид , Просмотреть рисунок . Возврат в режим редактирования щелчок левой кнопкой мыши.

Работа с фрагмент ом рисунка

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

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

Существует два режима выделения — прозрачное (из фрагмента исключается цвет фона) и непрозрачное (во фрагменте сохраняется цвет фона). Для выбора режима на экране появляется специальная временная панель.

Выделенный фрагмент рисунка можно перемещать на другое место, создавать несколько копий фрагмента или передавать его в другое приложение.

Для перемещения фрагмента на другое место нажимают левую кнопку внутри выделенной области, затем, не отпуская ее, буксируют фрагмент на другое место. Если при этом удерживать нажатой клавишу Ctrl , то будет перенесена копия фрагмента.

Над фрагментом рисунка можно производить и другие операции: изменять размеры, растягивать, поворачивать, наклонять и отражать с помощью команд меню Рисунок .

Использование буфера обмена

Выделенную область можно поместить в буфер через меню Правка . Для этого используют команды Копировать или Вырезать . Также можно поместить фрагмент в файл командой Копировать в файл .

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

Отмена выполненной операции

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

Что же делать, если случайно рисунок был испорчен? Можно отменить три последних сделанных изменения рисунка. Для этого используют меню Правка и команду Отменить .

Если операцию отменили по ошибке, то ее можно восстановить пунктами меню Правка и Восстановить .

Преобразование рисун ка

С помощью команд меню Рисунок можно отражать, растягивать, сжимать, увеличивать или наклонять выделенные фрагменты рисунка.

С помощью команды Отразить/повернуть можно отразить выделенный фрагмент относительно вертикальной или горизонтальной оси. Для этого в диалоговом окне есть переключатели Отразить слева направо , Отразить сверху вниз и Повернуть на угол 90, 180 и 270 градусов .

С помощью команды Растянуть/наклонить можно растянуть или наклонить выделенный фрагмент по вертикали или по горизонтали. Для этого в диалоговом окне есть соответствующие переключатели и поля ввода.

Предварительный просмотр и печать рисунка

Рисунок можно напечатать на принтере используя последовательность Файл _ Печать . Из-за различий между разрешающей способностью экрана и принтера, один и тот же рисунок на экране и на бумаге может выглядеть по-разному. Чтобы заранее проверить, как будет выглядеть рисунок в отпечатанном виде, используют меню Файл и команду Предварительный просмотр . Далее с помощью кнопок Крупнее и Мельче можно подобрать подходящий масштаб изображения. Чтобы завершить предварительный просмотр, нажмите на кнопку Закрыть .

Используя меню Файл и команду Параметры страницы , можно изменить размер страницы, размеры полей, ориентацию рисунка и используемый принтер.

Копирование (�захват�) изображения с экрана

Для копирования в буфер обмена содержимого всего экрана необходимо нажать клавишу Print Screen . Для копирования в буфер обмена содержимого активного окна — нажать одновременно клавиши Alt + Print Screen .

Для дальнейшей работы с рисунком используйте в меню Правка команду Вставить .

Выравнивание логотипов средствами CSS

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

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

Пара слов о дизайне

Прежде чем мы углубимся в CSS-код и в разговор о том, как лучше всего организовывать и стилизовать логотипы различных размеров, мне хотелось бы немного рассказать о том, как я, выступая в роли дизайнера, работаю с логотипами в специальном приложении. Здесь я буду говорить о приложении Sketch, но вы можете пользоваться любым другим подобным инструментом.

Итак, у меня есть восемь логотипов, которые нужно разместить в сетке. Первым делом я их выделяю и перетаскиваю в рабочую область Sketch.

Выглядит эта куча логотипов весьма некрасиво. Давайте это исправим.

Выделяя логотипы, проверьте, чтобы соотношение их ширины и высоты было бы заблокировано, после чего доведите их ширину или высоту до 150px . В этом видео показано изменение размера логотипов и размещение их в сетке.

Размещение логотипов в сетке

Обратите внимание на то, что некоторые логотипы кажутся более крупными, чем другие. Логотип Airbnb — самый большой из всех. Для того чтобы разобраться в происходящем, я обычно размещаю их в прямоугольниках. Эти прямоугольники помогают мне лучше оценивать размеры логотипов, их выравнивание относительно друг друга и расстояние между ними.

Анализ логотипов

Учитывайте то, что расстояние между всеми прямоугольниками должно быть одинаковым. В Sketch этого легко добиться, выбрав строку, щёлкнув в верхнем правом углу на Tidy , и настроив расстояние. Лучше всего, чтобы это расстояние составляло бы, как минимум, 10px .

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

Результат изменения размеров логотипов и их выравнивания. Логотип Dropbox Business после этого выглядит слишком маленьким

После изменения размеров логотипов и их выравнивания обнаружилась проблема с одним из них — с логотипом Dropbox Business. Я, чтобы сделать эту проблему заметнее, оставил на предыдущем рисунке соответствующий вспомогательный прямоугольник. Для начала, этот логотип ориентирован горизонтально (он очень длинный), и, кроме того, он имеет белый фон. Исправить ситуацию можно, обрезав фон в Sketch и увеличив логотип.

Исправление логотипа Dropbox Business

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

Реализация макета для логотипов, основанного на CSS Grid

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

• Раздел с логотипами должен следовать правилам отзывчивого веб-дизайна.
• Размеры логотипов должны быть как можно ближе друг к другу. То есть — не рекомендуется, чтобы среди логотипов, например, был бы какой-то очень большой логотип, и какой-то — очень маленький.
• Нужно, чтобы для логотипов заранее были бы установлены минимальные/максимальные размеры.

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

.brands < display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-gap: 1rem; >.brands__item < background: #eee; >.brands__item img < display: block; /* Не забудьте о свойстве max-width */ max-width: 100%; >

Начало работы над разделом сайта с логотипами

Как видите, в результате оказалось, что логотипы занимают всю ширину родительских элементов. Размеры логотипов неоднородны. Поэтому давайте начнём улучшать наш раздел с того, что настроим свойство логотипов width :

.brands__item img < display: block; /* Не забудьте о свойстве max-width */ max-width: 100%; width: 100px; >

Результат настройки ширины логотипов

Изменение ширины хорошо показало себя на некоторых логотипах. Но, например, внешний вид логотипа Dropbox это лишь ухудшило. Дело тут в том, что это — горизонтальный логотип. Прежде чем рассматривать решение этой проблемы, давайте попробуем настроить высоту логотипов:

.brands__item img < display: block; /* Не забудьте о свойстве max-width */ max-width: 100%; height: 70px; >

Результат настройки высоты логотипов

Так, у нас проблема. Логотип Dropbox нехорошо растянуло по высоте. Дело тут в том, что высота этого логотипа меньше, чем у других. В результате установленное в CSS значение height для этого логотипа слишком велико. Его применение приводит к растягиванию логотипа с нарушением пропорций.

Решить эту проблему можно, воспользовавшись свойством object-fit :

.brands__item img < /* Другие стили */ object-fit: contain; >

В результате я пока остановлюсь на решении, предусматривающем использование свойства width .

Нашим следующим шагом будет выравнивание логотипов по горизонтали и по вертикали.

.brands__item a

Flexbox-стили позволили отцентровать логотипы. Вот как они теперь выглядят.

Логотипы выровнены по центру, но логотип Dropbox получился слишком маленьким

Обратите внимание на то, что логотип Dropbox получился слишком маленьким. Это позволяет нам сделать вывод о том, что одна только настройка ширины для него не подходит. Как нам быть? Ещё один испытанный мной подход к решению этой проблемы, который показал себя лучше width-подхода, заключался в комбинировании свойств width и height . Но это, если помните, привело к деформации логотипа. Это, правда, можно исправить с помощью свойства object-fit: contain .

.brands__item img

Результаты применения разных подходов к стилизации логотипов

Свойство object-fit: contain хорошо тем, что оно, независимо от ширины или высоты логотипа, заставляет изображение занимать отведённое ему пространство и при этом не искажаться.

О директиве supports и о свойстве object-fit

Я, уже после публикации данного материала, добавил в него этот раздел. А именно, речь идёт о применении директивы @supports для обнаружения поддержки браузером свойства object-fit . Если браузер это свойство поддерживает, то оно используется вместе со свойством height . Это нужно для того чтобы не дать логотипам растягиваться в браузерах, не поддерживающих object-fit . Благодарю Луиса за подсказку.

Для того чтобы убедиться в том, что эта методика работает так, как ожидается, я испытал её на другом наборе логотипов. Результат мне понравился.

Использование свойства object-fit

Тут мне хотелось бы продемонстрировать одну иллюстрацию, которая призвана показать сильные стороны свойства object-fit . Обратите внимание на то, что на следующем рисунке логотипы содержатся в пределах двух линий. Если же они, учитывая соотношение их сторон, не в состоянии заполнить всё доступное им пространство, они выравниваются по центру.

Анализ размещения логотипов

Использование свойства mix-blend-mode для удаления белого фона

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

Если вы не можете достать версию изображения логотипа с прозрачным фоном, вы, чтобы всё же избавиться от фона, можете воспользоваться CSS-свойством mix-blend-mode . С его помощью белый фон исчезнет как по волшебству.

.brands__item img

Дело сделано! Белый фон исчез. Хотя тут стоит отметить то, что этот приём может сделать некоторые логотипы темнее. Например — так случилось с логотипом McDonald’s.

Логотипы до и после избавления от белого цвета. Обратите внимание на выделенные изображения

Использование CSS-селекторов

Я, после публикации, внёс в статью ещё одно дополнение. Дело в том, что в этом твите мне предложили использовать CSS-селекторы для того чтобы применить свойство mix-blend-mode только к .jpg- и .png-изображениям:

.brands__item img[src$='.jpg'], .brands__item img[src$='.png']

Выравнивание последнего ряда логотипов по центру

Выводя на страницу некий набор логотипов и используя сеточный макет, нельзя быть полностью уверенным в том, что в последнем ряду занятыми окажутся все места. Пустое место в последнем ряду логотипов (именно такой последний ряд имеется в нашем примере) выглядит не очень хорошо. Для того чтобы выровнять последний ряд логотипов по центру, лучше всего использовать для разработки макета соответствующего раздела не Grid, а Flexbox.

.brands < display: flex; flex-wrap: wrap; justify-content: center; >.brands__item < flex: 0 0 50%; >@media (min-width: 700px) < .brands__item < flex: 0 0 33.33%; >> @media (min-width: 1100px) < .brands__item < flex: 0 0 25%; >> 

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

Flexbox-макет и выравнивание последнего ряда логотипов по центру

Заключительные рекомендации

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

• Проверьте реальную ширину и высоту изображений логотипов. Например, какие-то из них могут иметь размеры наподобие 2500×1200. Для логотипа это очень много. Если вы столкнётесь с такими изображениями, обсудить с дизайнером возможность изменения размеров слишком больших логотипов, поговорите о том, чтобы привести все изображения к примерно одинаковым размерам. Например, это может быть что-то вроде 250×100.
• Если вам попался логотип с белым фоном, попросите у дизайнера вариант этого логотипа с прозрачным фоном. Если подобной версии этого логотипа не существует, тогда вы, чтобы избавиться от фона, можете прибегнуть к свойству mix-blend-mode .

• Блог компании RUVDS.com
• Веб-разработка
• CSS

Примитивными в графическом редакторе называют. Конспект урока «Создание графических примитивов в графическом редакторе

Для чего используются графические редакторы;
— что такое растровая графика;
— что такое векторная графика;
— из каких элементарных объектов строится рисунок и какие инструменты используются для их создания.

Назначение графических редакторов

Рисовать можно кистями и красками или использовать для этого карандаши. Можно рисовать на бумаге, холсте, ткани, а можно и на экране компьютера .

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

Шло время, и люди научили компьютер строить простые изображения: точку, прямую линию, окружность. Мониторы в то время были только черно-белые, и поэтому все построенные компьютером изображения напоминали работы художников-графиков.

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

Создание рисунков на компьютере осуществляется с помощью специально предназначенной для этого программы — графического редактора.

Графический редактор — это прикладная среда, предназначенная для создания и редактирования графических изображений.

Документом графического редактора является рисунок . По принципу построения графические изображения могут быть векторными и растровыми.

Векторное графическое изображение

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

Процесс редактирования в векторных графических редакторах заключается в добавлении новых объектов и изменении их параметров . Вы создаете один из объектов, изменяете его параметры (размер, положение, угол поворота), а программа сама чертит его в соответствии с заданными характеристиками (рис. 2.2). Такие действия напоминают черчение, когда из простейших геометрических фигур можно создавать разнообразные объекты.

Средства редактирования векторных изображений могут встраиваться в прикладные программы. Например, они есть в текстовом редакторе Word и в табличном редакторе Excel.

Растровое графическое изображение

Растровое изображение состоит из равных по величине очень мелких точек . Каждой из этих точек может быть назначен свой цвет. На экране точки сливаются в целостную картинку, однако при увеличении растрового изображения они становятся хорошо видны как квадратики и «ступеньки» (рис. 2.3).

Элементы (точки), из которых состоит растровое изображение, называются пикселами (от англ. pixel — picture element, элемент картинки), а способ представления изображения в виде сплошного массива точек, упорядоченных в строки и столбцы, называется растром (от англ. raster).

Вы часто могли слышать слова: «Рисунок имеет разрешение 800 на 600». Это означает, что по горизонтали он состоит из 800 пикселов, а по вертикали — из 600.

Полученное при помощи растрового редактора изображение состоит как бы из «мазков» кистью по холсту. Представьте себе, что вы нарисовали солнце, а затем изобразили закрывшее его облако (рис. 2.4).

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

♦ линия;
♦ кривая;
♦ прямоугольник;
♦ эллипс (овал);
♦ многоугольник;
♦ скругленный прямоугольник.

✔ Линия — это отрезок прямой произвольной длины . Настраиваемыми параметрами линии являются толщина и длина. При необходимости угол наклона линии можно ограничить строго горизонтальным, строго вертикальным или диагональным (45°) направлением.

✔ Кривая — это изогнутый в двух местах (без образования углов) отрезок прямой . Наследует все свойства объекта линия.

✔ Прямоугольник, эллипс, скругленный прямоугольник . Эти объекты различаются между собой только формой и характеризуются следующими параметрами: размер, цвет контура (границы), цвет заливки.

✔ Многоугольник — замкнутая ломаная линия . Наследует все свойства объекта прямоугольник. Если это необходимо, можно построить многоугольник, сторонами которого являются только горизонтальные, вертикальные и диагональные отрезки.

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

Кривая строится в три этапа . Первый этап — построение прямой линии. Второй и третий — это формирование двух изгибов. Для создания изгиба нужно установить указатель мыши рядом с точкой предполагаемого изгиба и перетащить мышь при нажатой левой кнопке в сторону от линии до получения желаемого эффекта.

При формировании многоугольника сначала создается первый отрезок прямой, затем последовательными щелчками мыши указываются остальные вершины многоугольника. Линии между вершинами будут нарисованы автоматически. Для соединения последней и первой вершин многоугольника надо дважды щелкнуть левой кнопкой мыши. Обратите внимание, что закрашивание многоугольника происходит после завершения его формирования.

В простейших графических редакторах, таких как Paint , любой объект изображения теряет свою «самостоятельность» сразу после создания. Он становится неотъемлемой частью общего рисунка и в дальнейшем уже воспринимается только как совокупность пикселов. Поэтому говорить о графических примитивах как об объектах с собственными параметрами можно только на стадии их создания.

В более сложных графических редакторах имеется возможность редактировать отдельные объекты и после создания рисунка.

Типовые действия над фрагментом растрового изображения

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

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

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

Выделение прямоугольной области выполняется движением мыши по диагонали выделяемой области. Для выделения произвольной области ее надо «обвести» инструментом выделения, как карандашом.

К типовым действиям над фрагментом изображения относятся масштабирование, поворот, инверсия цвета , а также выполнение операций редактирования : удаление (стирание), изменение цвета, вставка, замена надписей и т. д.

✔ Масштабирование в растровом редакторе осуществляется за счет добавления новых или удаления уже имеющихся закрашенных точек (пикселов). При этом не всегда удается сохранить первоначальную прорисовку линий. Некоторые лини при увеличении масштаба теряют точность границ, а при уменьшении исчезают (рис. 2.6 и 2.7).

✔ Инверсия цвета — это замена выбранного цвета на противо-положный (рис. 2.8).

✔ Поворот. Выделенный фрагмент можно повернуть по часовой стрелке на заданный угол (90°, 180°, 270°), а также отразить сверху вниз или слева направо, получив его зеркальное отражение относительно вертикальной или горизонтальной оси.

Инструменты графического редактора

Для выполнения типовых действий в графическом редакторе предусмотрена специальная панель инструментов (рис. 2.9). Ниже приводится описание инструментов графического редактора Paint для создания и редактирования фрагментов рисунка. Все действия с инструментами выполняются при нажатой левой кнопке мыши.

✔ Инструменты Выделение и Выделение произвольной области позво-ляют выделить фрагмент изображения для последующего вы-полнения операции с ним (копирования, удаления и т. д.).

✔ Инструмент Ластик закрашивает фоновым цветом пикселы, попадающие под курсор мыши при его перемещении.

✔ Инструмент Заливка позволяет заменить один цвет на рисунке на другой. Закрашивание осуществляется во всех направлениях от пиксела, на котором установлен указатель мыши, до границы с любым другим цветом.

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

✔ Инструмент Масштаб позволяет выбрать масштаб отображения рисунка на экране. Изменения размеров самого рисунка при этом не происходит. Рисунок можно рассматривать с увеличением в 2, 6 и 8 раз. Дополнительные значения масштаба можно выбрать с помощью команды меню Вид Масштаб .

✔ Инструмент Карандаш предназначен для рисования объектов произвольной формы. Для рисования надо перемещать мышь при нажатой левой кнопке.

✔ Инструмент Кисть имитирует движение кисти с краской или пера по бумаге. Можно выбрать несколько различных конфигураций кистей.

✔ Инструмент Распылитель позволяет наносить краску на поверхность не сплошным слоем, а «рассеивая» отдельные точки. Ширину следа распылителя можно настраивать.

✔ Инструмент Надпись позволяет вставлять в рисунок текст. При создании текста можно выбирать гарнитуру шрифта, изменять его размер и начертание. После создания надпись, как и другие графические примитивы, перестает быть самостоятельным объектом.

✔ Инструменты Линия, Кривая, Прямоугольник, Многоугольник, Эллипс, Скругленный прямоугольник позволяют создавать соответствующие графические примитивы. Их создание было рассмотрено ранее.

Помимо инструментов рисования в графическом редакторе имеется палитра (рис. 2.10). С ее помощью можно выбирать основной и фоновый цвета. Информация о том, какие цвета заданы в данный момент в качестве основного и фонового, представлена на панели текущих цветов.

Ресурсы ЕК ЦОР

Среда графического редактора Paint

Контрольные вопросы

1. В чем заключаются особенности графического редактора?

2. Что такое растр? Что такое пиксел?

3. Как вы понимаете слова «изображение выполнено с разрешением 640×480»?

4. Что такое графический примитив?

5. В чем состоят особенности векторной графики?

6. Какие вы знаете объекты растровой графики?

7. Перечислите основные действия над объектами растрового графического редактора.

Практикум

Лабораторно — практическая работа «Знакомство с программой Paint»

Цель работы: изучение основ растровой графики и первоначальное знакомство с графическим редактором Paint.

Теоретический материал.

Графический редактор Paint – это прикладная программа, предназначенная для работы с растровыми изображениями – изображениями, построенными из множества отдельных цветных точек (пикселей), подобно тому, как формируется изображение на экране монитора. Каждое растровое изображение имеет строго определенный размер по горизонтали и вертикали и использует фиксированное число цветов. При использовании растровой графики с помощью определенного числа бит кодируется цвет каждого мельчайшего элемента изображения — пикселя. Изображение представляется в виде большого числа мелких точек, называемых пикселями. Каждый из них имеет свой цвет, в результате чего и образуется рисунок, аналогично тому, как из большого числа камней или стекол создается мозаика или витраж, из отдельных стежков — вышивка. Основным недостатком растровой графики является большой объем памяти, требуемый для хранения изображения. Это объясняется тем, что нужно запомнить цвет каждого пикселя, общее число которых может быть очень большим. Пример изображения, созданного с использованием растровой графики:

Файлы с расширениями *.bmp, *.pcx, *.gif, *.msp, *.img и др. соответствуют форматам растрового типа. Еще одним недостатком является то, что при увеличении и уменьшении изображения оно теряет свои качества, как на нашем примере, это объясняется тем, что изменении размеров, изменяется каждая точка в отдельности, что приводит к потере качества информации. Однако именно с помощью растровой графики мы создаем высокохудожественные качественные изображения: пейзажи, портреты и т.д.

Получить растровые рисунки можно с помощью цифровой фото и видео камеры, сканера, а так же создать самим с помощью графического редактора. Мы с вами рассмотрим особенности растровой графики с помощью программы Paint.

Задание 1.1. Изучение интерфейса приложения Paint

1. Запуск программы Paint: Пуск – Программы — Стандартные – Paint или значок

2. Изучите вид окна Paint.(рис.1.1.) Рассмотрите кнопки на Панели инструментов.(рис.1.2.) Если панель инструментов отсутствует на экране, то откройте её командой Вид – Набор инструментов.

3. Изучите Палитру цветов. Если палитра отсутствует на экране, вызовите её командой Вид – Палитра (рис. 1.3.). Найдите область, которая отражает текущий цвет . Верхний квадрат – это текущий цвет, т.е. цвет которым рисуем, он выбирается левой кнопкой мыши, а цвет фона (нижний квадрат) – правой кнопкой мыши. Для изменения оттенков цветов зайдем в меню Палитра – Изменить палитру (рис.1.4.)

Ответить на вопросы:

Как строится изображение растровой графики?
— дайте определение, что такое растровый графический редактор?
— какие расширения могут иметь файлы растровой графики?
— какие изображения можно создавать с помощью растровой графики?
— каким образом можно получить растровое изображение?
— перечислите основные элементы рабочего окна программы Paint.
— какими инструментами мы можем пользоваться при рисовании?

Практическая работа «Настройка инструментов»

Выполнив данную практическую работу, вы научитесь:

Создавать простейший рисунок, используя графические примитивы и встроенные инструменты графического редактора Paint,
Настраивать инструменты графического редактора Paint.

Задание 1. Панель настройки инструментовt

Щелкая левой кнопкой мыши, выбирайте инструменты на панели инструментов. При этом следите за изменением панели настройки инструментов. Рассмотрите, какие настройки есть для разных экранных инструментов. Нарисуйте несколько линий разной толщины, прямоугольник только с границами, эллипс полностью залитый цветом,скругленный прямоугольник с границами одного цвета и заливкой другого.

Задание 2. Нарисуйте простейший пейзаж:

Нарисуйте простейший пейзаж: лучистое солнце на голубом небе; облака; извилистая дорога, убегающая к линии горизонта; небольшое озеро, заросшее по берегам тростником.

1. Выберите Карандаш или Кисть .

2. В палитре выберите голубой цвет.

3. Проведите линию горизонта от правой границы листа до левой.

4. Выберите инструмент Заливка . Указатель мыши примет ту же форму.

5. Щелкните кончиком льющейся краски по любой точке свободного пространства в верхней части листа. Голубая краска разольется, и получится небо.

6. В палитре выберите зеленый цвет.

7. Щелкните кончиком льющейся краски по любой точке свободного пространства в нижней части листа. Получится трава.

8. Выберите инструмент Эллипс .

9. На панели настройки выберите сплошное заполнение.

10. В палитре выберите желтый цвет.

11. На голубом небе нарисуйте круг.

12. Выберите инструмент Линия .

13. На панели настройки выберите толщину луча.

14. Нарисуйте лучи солнца.

15. Распылителем (выберите самый большой профиль) нанесите легкие белые облачка на голубом небе.

16. Дорисуйте пейзаж самостоятельно.

Информатика 3 класс Учитель____________________ Дата______________

Тема урока: Создание графических примитивов в графическом редакторе

Цель урока: продолжение работы над изучением возможностей графического редактора Paint; знакомство с графическими примитивами; закрепление полученных знаний на практике; развитие активности и самостоятельности; воспитание культуры работы в графической среде.

Тип урока: комбинированный .

Оборудование: доска, компьютер, проектор, компьютерная презентация.

Структура урока

I. Организация класса.

II. Мотивация учебной деятельности.

III. Объяснение нового материала.

IV. Работа за компьютером. Физкультминутка

V. Домашнее задание

Организация класса. Приветствие.

Добрый день! — это удачи мы желаем всем, друзья.

Здравствуйте — здоровы будьте!

Без здоровья нам нельзя.

Слова эти золотые нужно сердцем говорить,

И добра желать всем людям,

И самим добрее быть!

Улыбнитесь и садитесь.

Мотивация учебной деятельности. Ученики вспоминают, с какой компьютерной программой они ознакомились на предыдущих уроках и что научились делать на последнем уроке (создавать различные объекты и менять их свойства). Учитель предлагает учащимся посмотреть фрагмент мультфильма “Как Незнайка учился” (о том, как Незнайка решил стать художником). После просмотра учитель спрашивает, вышел из героя настоящий художник и почему это не случилось. Учитель: К сожалению, Незнайке не хватало терпения и работоспособности, чтобы научиться рисовать, а вы сегодня имеете возможность научиться рисовать при помощи графического редактора “Paint”. И вашим помощником в таком интересном рисовании будет Тюбик — коротышка, который любит рисовать

Объяснение нового материала. Среди инструментов есть такие, что позволяют рисовать геометрические фигуры с заданными свойствами, или графические примитивы. Графический примитив — простейшая геометрическая фигура с заданными свойствами, выполненная соответствующим инструментом графического редактора. Если при использовании инструмента «Прямоугольник», «Эллипс», «Скругленный прямоугольник» удерживать нажатой клавишу Shift, то можно получить правильные фигуры: «Квадрат», «Круг», «Скругленный квадрат». Когда выбран любой из инструментов Прямоугольник, Эллипс, Скругленный прямоугольник или многоугольник, во второй части панели инструментов, а именно на панели настройки появляются три возможных способа их заполнения. Давайте посмотрим эффект от применения каждого из них. Сначала определим цвета основной и фоновый: пусть основной цвет будет — синий, цвет фона — зеленый. Тогда при выборе 1 варианта настройки фигура будет выполнена без заполнения, контур фигуры будет рисоваться основным (синим) цветом. При выборе 2 варианта настройки фигура будет заполнена фоновым цветом (зеленым), а контур выполнен основным цветом синим. В случае выбора 3 варианта настройки и контур, и заполнение фигуры выполняется основным цветом.

Вот мы и изучили с вами все инструменты этой панели. Сделаем выводы. Панель инструментов содержит 16 инструментов. В соответствии с выполняемыми ими функциями их можно условно разделить на пять основных групп: 1. инструменты выделения: Прямоугольное выделение, Выделение произвольной формы;

2. инструменты рисования: Карандаш, Кисть, Распылитель, Ластик, Линия, Кривая;

3. графические примитивы: Эллипс, Прямоугольник, Многоугольник и Скругленный прямоугольник;

4. инструменты работы с цветом: Выбор цветов и Заливка;

5. инструменты редактирования: Масштаб и Текст.

Работа за компьютером. Физкультминутка

Домашнее задание

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

. Итак, скажите, чему же вы научились на сегодняшнем уроке?

. Что такое графические примитивы?

. Какие фигуры мы относим к графическим примитивам?

. Какую клавишу нужно удерживать нажатой, чтобы получились правильные фигуры: круг, квадрат, скруглённый квадрат?

. Сколько инструментов на панели инструментов?

. На какие группы их можно разделить?

Область рисования может иметь различные размеры. Наиболее распространенным является формат А4, который соответствует размеру стандартного листа писчей бумаги (шириной 21 см и высотой 29,7 см), часто используются вполовину меньший формат А5 (шириной 14,8 см и высотой 21 см) или в два раза больший формат A3 (шириной 29,7 см и высотой 42 см).

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

Область рисования можно расположить вертикально (ширина листа меньше высоты) — такая ориентация называется книжной. Область рисования можно также расположить горизонтально (ширина листа больше высоты) — такая ориентация называется альбомной.

Технология рисования графических примитивов. Растровый и векторный графические редакторы позволяют рисовать в поле рисования графические примитивы (прямая линия, кривая линия, прямоугольник, многоугольник, окружность).

Кнопки для рисования графических примитивов находятся на панели инструментов , которая обычно размещается вертикально, вдоль левого края окна графического редактора (рис. 1.13). Для рисования выбранного объекта необходимо щелкнуть на кнопке с его изображением на панели инструментов и переместить указатель мыши в поле рисования, где он примет форму крестика. Затем щелчками в поле рисования требуется зафиксировать положения опорных точек рисуемого объекта.

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

Рис. 1.13. Графические редакторы: растровый Paint и векторный OpenOffice Draw

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

Существует возможность перед рисованием задать тип линии (сплошная, пунктирная и т. д.), ее толщину и цвет с помощью дополнительных меню.

Кривая. Для рисования кривой необходимо выбрать графический примитив Кривая , нарисовать произвольную линию и перетаскиванием мышью придать ей требуемую форму.

Прямоугольник. Для рисования прямоугольника необходимо выбрать графический примитив Прямоугольник , щелчком зафиксировать положение первой вершины, перетащить указатель по диагонали и зафиксировать положение второй вершины.

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

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

Палитра цветов. Различают цвет линий , которым рисуются контуры геометрических примитивов, и цвет заливки , которым закрашиваются внутренние области примитивов. Операцию выбора цвета можно осуществлять с помощью меню Палитра , содержащего набор цветов, используемых при создании объектов.

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

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

Если навести указатель мыши на кнопку на панели инструментов графического редактора, то появится всплывающая подсказка с названием инструмента.

Контрольные вопросы

1. Каковы основные параметры области рисования?

2. Какие вы знаете графические примитивы и процедуры их рисования?

3. Как можно задать цвет линии и цвет заливки?

Задания для самостоятельного выполнения

1.10. Практическое задание. Продемонстрировать возможности растрового графического редактора, создав изображение, подобное рис. 1.13.

1.11. Практическое задание. Продемонстрировать возможности векторного графического редактора, создав изображение, подобное рис. 1.13.

1.12. Практическое задание. В растровом графическом редакторе добавить цвет в расширенную палитру.

1.13. Практическое задание. В векторном графическом редакторе добавить цвет в расширенную палитру.

Под графическими примитивами понимаются минимальные графические объекты, которые составляют векторный рисунок — подобно кирпичам, из которых строится здание.

К графическим примитивам в OpenOffice.org Draw относятся:

• линии и стрелки;
• прямоугольники;
• окружности, эллипсы, дуги, сегменты и секторы;
• кривые;
• соединительные линии;
• трехмерные объекты (куб, шар, цилиндр и т.д.);
• текст.

Графические примитивы могут составлять более сложные объекты благодаря функции комбинирования и логическим операциям над формами; об этом речь пойдет позже.

Создание графических примитивов

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

Линии и стрелки

Для создания линии укажите начальную и конечную точку линии на листе рисунка: начальная точка линии задаётся левой кнопкой мыши; затем, не отпуская кнопку, установите курсор на конечную точку линии и отпустите кнопку. Линия создана.

Соединительная линия

Этот объект создается точно так же, как и обычная линия. Особенностью соединительной линии является способность привязываться к объектам, поэтому при создании соединительной линии вместо указания точки начала или конца линии можно указать какой-нибудь объект и программа сама подберет наилучшую точку подключения линии к нему.

Прямоугольники

Здесь нужно указать положение двух противоположных вершин прямоугольника — первая указывается нажатием левой кнопкимыши; затем, не отпуская её, подведите курсор ко второй точке и зафиксируйте фигуру, отпустив кнопку.

Окружности, эллипсы, дуги, сегменты и сектора

Для создания окружности и эллипса достаточно указать габаритные размеры примитива двумя точками нажатием, перетягиванием и отпусканием левой кнопки мыши. В случае дуги, сегмента или сектора нужно указать ещё две точки на контуре примитива простым нажатием и отпусканием левой кнопки.

Трехмерные объекты

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

Текст

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

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

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

Кривые Безье, рисованные кривые, многоугольники

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

Кривые Безье строятся по нескольким точкам и направляющим линиям. Точки, по которым строится кривая, называются опорными точками; каждая из них характеризуется двумя отрезками, расположенными на касательной к кривой Безье в опорной точке (они называются направляющими). Длина каждой из них задает крутизну следующего или предыдущего сегмента кривой, а угол касательной задает направление в обе стороны от опорной точки.

При создании кривой в OpenOffice.org Draw последовательно указываются её опорные точки с помощью левой кнопки мыши. Если после нажатия кнопки для создания опорной точки не отпустить кнопку, то можно задать угол и длину направляющих; если же кнопку не удерживать, то длина направляющих будет нулевая, и такая точка будет угловой. Направляющая первой опорной точки должна быть указана, иначе операция отменяется. Двойной щелчок левой кнопкой мыши завершает рисование кривой.

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

Удерживание клавиши Shift в процессе создания кривой позволяет указывать углы, кратные 45 градусам; для замыкания кривой можно использовать клавишу Alt .

Рисованная линия также является кривой Безье, только количество опорных точек, величины и углы направляющих определяются программой автоматически. Для создания рисованной линии нужно, нажав и удерживая левую кнопку мыши, нарисовать желаемую кривую от руки.

Создание многоугольников состоит в указании всех вершин многоугольника. Вторая вершина должна указываться отпусканием нажатой левой кнопки мыши, иначе операция будет отменена; остальные вершины указываются обычным щелчком, а последняя вершина — двойным. Так же, как и при создании кривой, можно пользоваться клавишами Alt и Shift для замыкания многоугольника и рисования с углами, кратными 45 градусам, соответственно.

1. Графические примитивы.

Графические примитивы это заранее определенные элементы, которые можно поместить в чертеж при помощи одной команды. Каждый графический примитив формируется на основании геометрического описания объекта.
Примитивы (табл.№1.) можно классифицировать:

• односложные и составные;
• плоские и объемные (3d).