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

МДК 01.01 Компьютерная графика
для специальности 54.01.20
Графический дизайнер

Курс/группа

Дата

1 курс
6 группа

19.12.
2019

Тема занятия

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

Вид занятия

Урок

Тип занятия

Комбинированное учебное занятие

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

Технология проектной деятельности

Методы стимулирования и мотивации учения

Методы эмоционального стимулирования, методы учебного поощрения

Методы организации и осуществления учебных действий и операций

Методы иллюстраций, демонстраций

Методы контроля и самоконтроля

Методы устного контроля, методы самоконтроля, взаимоконтроля

Цель занятия

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

Формируемые компетенции

ОК 1. Выбирать способы решения задач профессиональной деятельности применительно к различным контекстам.
ОК 2. Осуществлять поиск, анализ и интерпретацию информации, необходимой для выполнения задач профессиональной деятельности.
ОК 9. Использовать информационные технологии в профессиональной деятельности.
ПК 1.1. Осуществлять сбор, систематизацию и анализ данных, необходимых для разработки технического задания дизайн-продукта.
ПК 1.2. Определять выбор технических и программных средств для разработки дизайн-макета с учетом их особенностей использования

Результат

Должны знать

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

Должны уметь

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

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

Оценка результатов деятельности обучающихся в процессе выполнения практической работы

Межпред-
метные
связи

Обеспечивающие дисциплины

Информатика

Материаловедение

Дизайн-проектирование

Обеспечиваемые дисциплины (модули, МДК)

Общепрофессиональные дисциплины

Средства обучения

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

Основная литература

1. Ёлочкин, М.Е, Тренин, Г.А., Костина, А.В. Дизайн-проектирование. Композиция, макетирование, современные концепции в искусстве: учебник для студ. учреждений сред. проф. образования. — М.: Издательский центр «Академия», 2017. — 160 с., [16] с. цв. ил.
2. Ёлочкин, М.Е., Скиба, О.М., Малышева, Л.Е. Основы проектной и компьютерной графики: учебник для студ. учреждений сред. проф. образования. — М.: Издательский центр «Академия», 2017. — 160 с.
3. Левковец, Л.Б. Adobe InDesign CS4. Базовый курс на примерах. — СПб.: БХВ-Петербург, 2019. — 560 с.: ил.

№ этапа

Этапы занятия, учебные вопросы, формы и методы обучения

Временная регламентация этапа

1

Организационный этап

1 мин.

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

2

Мотивация учебной деятельности обучающихся. Актуализация. Постановка цели и задач учебного занятия:

5 мин.

- Начнем урок с объявления результатов оценивания домашнего задания, полученного мной по электронной почте. Петрова Полина, Шестаева Яна, Фомина Анна, Калеев Никита поработали на «отлично», остальные студенты справились на «хорошо». Вам отправлены работы с исправленными ошибками и дополнительные задания на закрепление, что нужно будет выполнить к следующему уроку.
- На прошлом уроке мы создавали текстовый фрейм, поясните что же это такое?
- Фрейм – это контейнер, в который можно вставить и редактировать текст.
- Уточните зачем дизайнеру умение работать с фреймами?
- Дизайнеры работают с многостраничными изданиями в программе InDesign. Фреймы позволяют упростить работу по верстке.

На доске вам представлены предложения с пропущенными словами, которые необходимо вставить. Юсупова Гузель приглашаю к доске. Работает индивидуально. Остальные аналогичную работу выполняют самостоятельно по карточкам. После чего проверим.
- Что, кроме текста, можно наблюдать в многостраничных изданиях?
- В многостраничных изданиях можно наблюдать не только текст, но и изображения.
- Какие фреймы предусмотрены в индизайне?
- В индизайне предусмотрены как текстовые, так и графические фреймы.
- Какие способы существуют для набора текста?
- Текст можно набрать, выбрав инструмент «текст», либо нарисовать фрейм и вставить текст в него.
- В какой фрейм мы можем поместить изображения?
- Изображения мы можем поместить только в графический фрейм.
Проверяем. Есть ли другой ответ? Нет. Правильно.

Вот мы и приблизились к теме нашего сегодняшнего занятия. Сформулируйте ее.
- Тема урока: Создание графических фреймов.
- Действительно, тема нашего урока – создание графического фрейма. Давайте попробуем сформулировать вашу цель урока?
- Научиться создавать графические фреймы.
- Любая цель достигается планомерно. С чего начнем?
- рассмотрим процесс создания графического фрейма;
- научимся редактировать графический фрейм;
- применим полученные знания на практике.

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

3

Первичное усвоение новых знаний и проверка понимания:

15 мин.

П: На прошлом уроке вами было получено задание ответить на вопрос Какие действия можно выполнить при работе с объектами в программе InDesign?
С:
- изменение объектов с помощью графических фреймов;
- вставка объекта внутрь фрейма;
- подгонка размеров объектов к размерам фрейма;
- перемещение графического фрейма или его содержимого.
П: Полина подготовила индивидуальное сообщение об изменении объектов с помощью графических фреймов. Слушаем внимательно, эти знания вы примените в практической деятельности.
К объектам AdobeInDesign относятся все элементы, которые могут быть добавлены или созданы в окне документа, в том числе открытые и закрытые контуры, составные формы и контуры, текст, растрированные графические объекты, 3D-объекты, помещенные изображения и другие файлы.
Если изображение находится внутри фрейма (как все импортированные изображения), оно может быть изменено посредством изменения его связи с фреймом, как в следующих примерах. (обращается к экрану)

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

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

• Чтобы вставить внутрь фрейма один объект, выделите его.
• Выберите Редактирование > Копировать (или Редактирование > Вырезать, если не требуется сохранение оригинала).
• Выделите контур или фрейм, а затем выберите Редактирование > Поместить.

П: У каждого из вас на столе лежит информационный лист с ответом на вопрос как выполняется удаление содержимого, прочтите.

- С помощью какого инструмента выбирается объект при удалении?
- «Частичное выделение» . Либо выбирает инструмент «Выделение»
- Чтобы полностью удалить содержимое, какую клавишу необходимо нажать?
- Delete или Backspace.
- Может ли импортированное изображение существовать без фрейма?
- Импортированное изображение не может существовать без фрейма.

П: Случается так, что размеры фрейма и его содержимого не совпадают, какие действия надо выполнять в таких случаях вы найдете ответ в документе «Подгонка» в папке «Сетевая папка». Информация представлена из учебника Левковец Л.Б. Adobe InDesign CS4. Базовый курс на примерах. — СПб.: БХВ-Петербург, 2019. — 560 с.: ил.

- Если размеры фрейма и его содержимого не совпадают, какими командами можно воспользоваться?
- Командами «Подгонка».
- Каким образом осуществляется подгонка размера объекта к размерам фрейма?
- Надо выделить фрейм объекта. Выбрать Объект > Подгонка и указать один из следующих параметров: заполнить фрейм с сохранением пропорций, уместить содержимое с сохранением пропорций, подгонка с учетом содержимого, фрейм по размеру содержимого, содержимое по размеру фрейма, содержимое по центру фрейма.

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

4

Физминутка

3 мин.

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

5

Первичное закрепление

12 мин.

«В кабинете находится сложная и требующая аккуратного обращения аппаратура – компьютеры. Какие правила необходимо соблюдать?

НЕОБХОДИМО:

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

СТРОГО ЗАПРЕЩАЕТСЯ?:

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

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

П: Приступаем к выполнению практической работы. На рабочем столе есть папка «Сетевая папка», в которой предложены разные варианты изображений. Вам необходимо выполнить два обязательных задания. Первое задание - по алгоритму на карточке. Второе – техническое. В нем представлены только условия без дополнительных подсказок. Тем, кто быстрее выполнит задания, предлагается выполнить задание под номер 3 и 4. У вас 10 минут.

Обязательные задания:

1.Задание по алгоритму.

• Создать новый документ А4.
• Создать фрейм (f).
• Вставить объект во фрейм (кнопки ctrl+D) предварительно скопировав его в носителе.
• Подогнать под размер (ctrl+shift+alt+c).
• Выделить объект (инструмент выделение + кнопка v).
• Выбрать в меню Окно - отбравочные контуры (Ctrl+Shift+alt+k).
• Выбрать инвертировать контуры.
• Нажать ввод (enter).
• Создать новый фрейм поверх готового объекта.
• Вставить в него новое изображение.
• Подогнать.
• Упорядочить фон на задний план (ctrl+[).
• Сохранить в рабочем файле под названием «АЛГОРИТМ ФИО» (файл-экспорт) в папке «АЛГОРИТМ», в папке «сетевая папка»

2.Техническое задание

Фрейм
Основные программы: InDesign

Создайте фрейм сложной формы на свободную тему:

Необходимая информация для работы:

Изображение – папка «объекты» в папке «сетевая папка».

Обязательные элементы продукта

Изображение

Технические параметры создания продукта

Рабочее пространство для фрейма:

- Формат ( 210х 290 мм)
- Цветовая модель CMYK
- Припуски под обрезку 5 мм
- Overprint при использовании черного цвета

Технические параметры сохранения к печати:

Рабочее пространство для фрейма:

- Метки реза с учетом припусков под обрезку
- Линкованность вставленных элементов
- ICC profile: СoatedFogra 39
- Рабочий файл под названием «ФИО» в папке «ОБЪЕКТЫ» в папке «сетевая папка»

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

Дополнительные задания:

3.Какого действия не хватает?

- Создать новый документ А3.
- Вставить объект, предварительно скопировав его в носителе.
- Выделить объект (инструмент выделение + кнопка v).
- Выбрать отбравочные контуры.
- Нажать ввод (enter).
- Вставить новое изображение.
- Подогнать.
- Сохранить в рабочем файле под названием «АЛГОРИТМ 2 ФИО» (файл-экспорт) в папке «АЛГОРИТМ», в папке «сетевая папка».

_______________________________

_______________________________

_______________________________

4.Техническое задание

Фрейм

Основные программы: InDesign

Создайте фрейм сложной формы на свободную тему:

Необходимая информация для работы:

Изображение – папка «объекты» в папке «сетевая папка».

Обязательные элементы продукта

Изображение

Технические параметры создания продукта

Рабочее пространство для фрейма:
- Формат (А3)
- Цветовая модель RGB
- Припуски под обрезку 10 мм

Технические параметры сохранения к печати:

Рабочее пространство для фрейма:
- Метки реза с учетом припусков под обрезку
- Линкованность вставленных элементов
- ICC profile: СoatedFogra 39
- Файл PDF под названием «ФИО» в папке «ОБЪЕКТЫ2» в папке «сетевая папка»

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

6

Контроль усвоения, обсуждение допущенных ошибок и их коррекция.

5 мин.

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

Критерии оценивания обязательных заданий:

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

- Если все критерии совпали: прослеживается линкованность элементов, алгоритм соответствует заданию и грамотное композиционно расположение ставим отметку 5.

- Если прослеживается линкованность элементов, алгоритм не полностью соответствует заданию и грамотное композиционно расположение ставим отметку 4.

- Если линкованность элементов не прослеживается, алгоритм не полностью соответствует заданию и композиционно размещено не гармонично ставим отметку 3.

Второе задание проверяем самостоятельно каждый в своей работе по критериям, сохраняем: ФИО и отметку:

- Формат (210х 290 мм).
- Цветовая модель CMYK.
- Припуски под обрезку 5 мм.
- Линкованность вставленных элементов.
- ICC profile: СoatedFogra 39.
- Рабочий файл под названием «ФИО» в папке «объекты» в папке «сетевая папка».

- Если все критерии совпали ставим отметку отлично.
- Если 1 или 2 критерия не верны – хорошо.
- Если более трех критериев выполнены неверно – отметку 3.

Критерии оценивания дополнительных заданий:

3. Какого действия не хватает? Самоанализ.

Создать фрейм (f).

Подогнать под размер (ctrl+shift+alt+c).

- Выбрать в меню Окно - отбравочные контуры (Ctrl+Shift+alt+k).
- Выбрать инвертировать контуры.
- Нажать ввод (enter).
- Создать новый фрейм поверх готового объекта.
- Упорядочить фон на задний план (ctrl+[).

- Если все критерии совпали ставим отметку отлично.
- Если 1 или 2 критерия не верны – хорошо.
- Если более трех критериев выполнены неверно – отметку 3.

4.Техническое задание. Взаимооценивание.

- Формат (А3).
- Цветовая модель RGB.
- Припуски под обрезку 5 мм.
- Линкованность вставленных элементов.
- ICC profile: СoatedFogra 39.
- Файл PDF под названием «ФИО» в папке «ОБЪЕКТЫ2» в папке «сетевая папка»

- Если все критерии совпали ставим отметку отлично.
- Если 1 или 2 критерия не верны – хорошо.
- Если более трех критериев выполнены неверно – отметку удовлетворительно.

Посмотрите какие оценки вы получили за первое задание. Троек у нас нет. Пятерок у на 5 четверок 4. Проанализируем работу на отлично и работу на хорошо.
Вывожу несколько работ на экран и провожу анализ.

Посмотрите какие оценки вы получили за второе задание. Троек у нас нет. Пятерок у на 5 четверок 4. Проанализируем работу на отлично и работу на хорошо.
Вывожу несколько работ на экран и провожу анализ.

За дополнительные задания вы получите отлельные оценки.

7

Информация о домашнем задании:

1 мин.

Домашнее задание я вам отправила на почту, проверьте до всех ли дошло письмо?

Задание вам необходимо выполнить по алгоритму:

1.Создание границы или фона

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

Добавление границ к графическим фреймам

A. Фотография в графическом фрейме B. Фрейм с примененной обводкой C. Увеличенный фрейм с обводкой и заливкой.

- Чтобы выбрать фрейм целиком, щелкните импортированный графический объект за пределами маркера захвата содержимого инструментом «Выделение» .

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

- Цвета обводки и заливки могут быть заданы на панели «Образцы» или панели «Инструменты».

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

Примечание. Быстро увеличить фрейм равномерно со всех сторон можно с помощью панели «Управление» или панели «Трансформирование». Выделите фрейм с помощью инструмента «Частичное выделение» , установите локатор контрольной точки к центральной точке и введите новые значения для ширины и высоты.

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

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

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

Обрезка изображения с помощью графического фрейма

- Чтобы обрезать или замаскировать любой объект, выделите один объект для маскирования с помощью инструмента «Выделение» или «Частичное выделение». Выберите Редактирование > Копировать, выделите пустой контур или фрейм меньшего размера, чем объект, а затем выберите Редактирование > Вставить в.

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

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

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

По желанию выполните следующее задание: подготовить сообщение на тему: «Параметры экспорта объектов»

8

Рефлексия

1. Итак, проведем итог уроку.

Какую цель вы ставили перед собой в самом начале урока?

Научиться создавать графические фреймы.

Что вы сделали для того, что бы достичь цели?

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

2. Электронное письмо

- Напишите электронное письмо и отправьте его мне, ответив на следующие вопросы:

- Что мне удалось на сегодняшнем уроке?

- Какие были допущены ошибки?