Курс веб-дизайна для детей от 10 до 12 лет включает три части: создание сайта с помощью конструктора сайтов WIX, рисование макета сайта с помощью графического редактора Adobe Photoshop и проектирование интерфейса этого сайта с помощью графического редактора Figma. Курс рассчитан на детей 10-12 лет
Программа курса:
| № занятия | Тема |
| Вводное занятие | |
| Занятие 0 | Основные понятия Web-дизайна. Примеры профессиональных дизайнов для сайта. Виды Web-ресурсов. Этапы создания web-ресурса. DNS и IP. Синтаксис URI/URL. |
| Создание сайта с помощью конструктора Wix | |
| Занятие 1 | Знакомство с конструктором Wix. Регистрация на сайте, создание собственного аккаунта для работы с конструктором Wix, обзор интерфейса и возможностей конструктора. |
| Занятие 2 | Выбор шаблона сайта. Выбор шаблона сайта из галереи шаблонов, изменение стилей кнопок, галереи, меню. Подбор шрифтов для сайта. |
| Занятие 3 | Наполнение сайта контентом. Добавление меню, выпадающего меню, кнопок, слайд-шоу и галереи на сайт. |
| Занятие 4 | Наполнение сайта контентом. Добавление текстовой информации на сайт и настройка SEO. |
| Занятие 5 | Работа с изображениями и видео на сайте. Добавление видео и изображений на сайт и их настройка. Работа со стилями галереи, фото, кнопок, меню. |
| Занятие 6 | Разработка внутренней навигации сайта. Организация страниц на сайте. |
| Занятие 7 | Настройка виджетов сайта. Добавление кнопки и панели социальных сетей и комментариев из них. Добавление контактной формы. |
| Занятие 8 | Настройка мобильной версии сайта. |
| Графический редактор Figma | Занятие 1 | Интерфейс Figma.Создание, сохранение, открытие документов. Палитра History (Отмена действий). Инструменты рисования (Кисть, Карандаш). Практическое задание. Палитра Swatches, Color. Настройка этих палитр. Палитра Navigator (Навигация по документу). Режимы работы с документами. |
| Занятие 2 | Знакомство с инструментами, их настройка. |
| Занятие 3 | Градиенты, общее знакомства. Работа с градиентами. Типы градиентов. Настройка. |
| Занятие 4 | Палитра слоев (Layers). Операции со слоями. Понятие прозрачности слоев (Opacity). Трансформация слоев (Free Transform). Наборы слоев (Set). Практическое задание. Группы-контейнеры слоёв. Стиль слоя. Настройка стилей, создание своих стилей. Операции со стилями. Практическое задание. |
| Занятие 5 | Теория цвета. Цветовые модели. Типы растровых изображений, перевод из одного типа в другой. Параметры графических форматов. Графические форматы файлов и область их применения. Команды сохранения документов. Модуль Save for Web. Индексированные цвета (Indexed Color). Дуплексные цвета (Duotone). Тоновая коррекция изображения (Levels, Curves). |
| Занятие 6 | Цветокоррекция и отличие от Adobe photoshop. Связывание слоев. Совмещение корректирующих слоев и масок. |
| Занятие 7 | Рисование мокапов и работа в команде в Figma |
| Занятие 8 | Текстовые слои. Текстовые слои-маски. Деформация текста (Warp text). |
| Занятие 9 | Работа со слоями и масками. Основные шорткаты, выделение, перемещение, трансформация и режимы наложения. |
| Занятие 10 | Для чего нужны эффекты и как их применять. Поиск референсов, добавление объекта на фон, стили, 3D-слои и художественные эффекты. |
| Занятие 11 | Практическая работа по подготовке сайта-одностраничника. Работа с Figma-mirror |
| Занятие 12 | Заключительное. Нарисовать полупрофессиональный макет сайта-одностраничника. |
| Редактор растровой графики Adobe Photoshop CS6 | |
| Занятие 1 | Интерфейс Adobe Photoshop.Создание, сохранение, открытие документов. Палитра History (Отмена действий). Инструменты рисования (Кисть, Карандаш). Практическое задание. Палитра Swatches, Color. Настройка этих палитр. Палитра Navigator (Навигация по документу). Режимы работы с документами. |
| Занятие 2 | Привязка. Режимы отображения полей программы Adobe Photoshop. Инструменты ретуши: Размытие (Blur), Резкость (Sharpen), Размазывание (Smudge), Инструмент штамп (Stamp). Инструменты Healing Brush (Восстанавливающая кисть), Patch Tool (Заплатка). Инструменты Sponge, Dodge, Burn. |
| Занятие 3 | Градиенты, общее знакомства. Работа с градиентами. Типы градиентов. Настройка. |
| Занятие 4 | Палитра слоев (Layers). Операции со слоями. Понятие прозрачности слоев (Opacity). Трансформация слоев (Free Transform). Наборы слоев (Set). Практическое задание. Группы-контейнеры слоёв. Стиль слоя. Настройка стилей, создание своих стилей. Операции со стилями. Практическое задание. |
| Занятие 5 | Цветокоррекция. Основы тоновой и цветовой коррекции. Теория цвета. Цветовые модели. Типы растровых изображений, перевод из одного типа в другой. Параметры графических форматов. Графические форматы файлов и область их применения. Команды сохранения документов. Модуль Save for Web. Индексированные цвета (Indexed Color). Дуплексные цвета (Duotone). Тоновая коррекция изображения (Levels, Curves). |
| Занятие 6 | Яркость, контраст. Понятие чёрной и белой точки. Автоматическая корректировка изображения (Auto Levels, Auto Contrast). Цветовая коррекция (Auto Color, Hue/Saturation и т.д.). Другие методы корректировки. Замена цвета (Replace Color). Корректирующие слои (Adjustments Layers). Связывание слоев. Совмещение корректирующих слоев и масок. |
| Занятие 7 | Основные сведения о фильтрах. Обзор галереи фильтров. Фильтр Пластика (Liquify ). Применение фильтров для ретуширования. Создание различных эффектов на основе фильтров. |
| Занятие 8 | Текст. Работа с текстом. Текстовые слои. Текстовые слои-маски. Деформация текста (Warp text). |
| Занятие 9 | Работа со слоями и масками. Основные шорткаты, выделение, перемещение, трансформация и режимы наложения. |
| Занятие 10 | Эффекты, для чего они нужны и как их применять. Поиск референсов, добавление объекта на фон, стили, 3D-слои и художественные эффекты. |
| Занятие 11 | Принципы построения растровых изображений Цветовые режимы и модели. Как пользоваться каналами и сохранять выделения. |
| Занятие 12 | Нарисовать полупрофессиональный макет сайта-одностраничника. |
Ваш преподаватель
