Adobe Photoshop для WEB

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

2. Настройка, видоизменение и работа с элементами дизайна. Заливка узором, создание собственного образца градиента, настройка инструментов, быстрое выделение и одновременная заливка нескольких частей изображение. Удаление с проявлением другого цвета. Понятие прозрачности в дизайне сайта. Практическая работа: Эскизный вариант шапки сайта (из заготовок и фото). Готовим фон с нуля (самостоятельно подбираем цвета и текстуры)

3. Трансформирование и обработка изображений. Создание вмятин и деформаций с помощью команд трансформирования. Дополнительная настройка ин-та Перемещения. Дополнение холста. Правильное и «неправильное» искажение. Практическая работа: Работаем над эффектом «поломанных» кнопок. Эффект Пазла в оформлении сайта. Стандартное представление элементов.

4. Слои, режимы заливки и эффекты слоя. Понятие видимости, прозрачности и блокировки. Работа с режимами наложения. Стили и их редактирование с помощью эффектов. Повторяющиеся элементы дизайна сайта и дублирование эффектов. Практическая работа: Добавляем к элементам эффекты. Корректируем существующие и создаем новые.

5. Инструменты рисования и коррекции. Работа с масками. Повышение насыщенности части изображения с помощью инструмента Губка. Удаление ненужных надписей ин-том Штамп. Работа с карандашами и кисточками, настройка и сохранение своих библиотек. Практическая работа: Корректируем готовое изображение и работаем над собственным рисунком сайта. Карта (как добраться) с указателями – собственными руками!

6. Макет сайта, эскиз и оформление по слоям. Работа с вкладками. Выбор цветовой гаммы. Работа с шрифтовыми надписями. Понятие типографики и насколько оно уместно при ограниченного количестве. Выбор и передача отдельно шрифтов для дальнейшей верстки. Практическая работа: Добавляем к сайту надписи. Оформляем их в виде гиперссылок.

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

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

9. Создание сайта с учетом технических особенностей. Размеры элементов сайта для ПК, телефонов и планшетов. Адаптация форматов и размеров. Подготовка каждоой вкладки и надписей. Какие в дальнейшем погрешности дизайна могут ожидаться и правильное написание тех/задания для верстальщиков сайта. Практическая работа: Разобрать свой сайт на части и проанализировать ошибки и погрешности. Adobe

Illustrator для WEB

1. Рисование с нуля кнопок и элементов сайта. Знакомство с основными элементами рисования. Работа с простыми фигурами. Группирование и порядок объектов в стопке. Практическая работа: Рисование нескольких видов кнопок и простых элементов сайта (ссылки, стрелки)

2. Способы заливки и оформление цветом. Библиотеки и заготовки. Инструменты редактирования. Способы частичного искажения. Практическая работа: Пробуем скомбинировать готовое и собственное в одну композицию. Объединение стилем или цветом.

3. Работа с готовыми элементами (символы и библиотеки) и создание собственных образцов. Извлечение образцов и их редактирование. Практическая работа: Скачиваем готовые исходники и дополняем дизайн заготовками программы.

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

5. Инструменты рисования и их роль в дизайне. Знакомимся с понятием слоев в программе. Редактирование с помощью слоев. Прямое предназначение частичного выделения. Практическая работа: Создание и адаптация собственного логотипа для сайта. Работа над фирменным стилем. Позиционирование элементов.

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

7. Подготовка сайта, работа с символьными элементами. Распылитель и заполнение фона. Система управления цветом. Практическая работа: Создать собственный символ. Подготовить несколько вариантов фона с использованием собственных наработок.

8. Импорт и экспорт. Эффекты для растровых и векторных изображений. Растушевка, тень, перетекание. Способы применения. Практическая работа: Из готовых элементов – делаем сайт по образцу. Добавляем свои дизайнерские решения.

9. Готовый сайт за 1 час. От эскиза до воспроизведения. Мастер-класс, как с помощью библиотек, заготовок и текстур – создать сайт. Практическая работа: На конкурс – делаем сайт на выбор: из предложенных заготовок или самостоятельно подбираем элементы. Обязательная защита – учимся отстаивать свои работы перед заказчиком.