Занятие 1. Начало работы с Adobe Сreative Cloud
-
Преимущества использования Adobe Creative Cloud
Облачное хранение данных, обновления, расширенные возможности.
-
Подготовка растровой графики в Adobe Photoshop CC
Настройка рабочего пространства. Горячие клавиши.
Изменение размеров растровых изображений.
Алгоритмы интерполяции.
Масштабирование с учетом содержимого.
Инструменты обрезки.
-
Маскирование
Способы сокрытия пикселей слоя.
Виды масок и варианты их использования.
-
Корректирующие слои
Применение команд цветовой и тоновой коррекции.
Способы ограничения действия корректирующих слоёв.
Аналоги применения цветовой коррекции в CSS3.
Практические работы:
«Подготовка изображений для сайта».
«Цветовые дизайн-решения».
Занятие 2. Работа со служебными наборами в Adobe Photoshop CC
-
Логика работы со служебными файлами
Способы профессионального использования служебных наборов и предустановок.
Сохранение, импорт/экспорт настроек.
-
Работа со слой-формами и образцами цвета
Расширенные возможности форм.
Использование градиентов, образцов цвета для веб-макетов.
Импорт данных о цвете. Палитра Kuler.
-
Работа со шрифтами
Установка настроек шрифта для веб. Веб-типографика.
Решение проблем использования нестандартных шрифтов.
Создание пользовательских стилей текста.
Иконочные шрифты.
Конвертирование шрифтов
-
Применение слоевых эффектов. Стили
Использование режимов смешивания.
Настройка Blending Options.
Пользовательские стили.
Ограничения применения слоевых эффектов в CSS3.
-
Создание паттернов
Алгоритмы создания бесшовных паттернов.
Практические работы:
«Анатомия слоевого эффекта».
«Цветовые дизайн-решения».
«Создание паттернов».
«Элементы веб-интерфейса».
Занятие 3. Введение в HTML
-
Использование текстового редактора Adobe Dreamweaver CC для создания гипертекстовых документов.
-
Встраивание HTML тегов. Основные структурные теги, метаинформация, заголовок документа.
-
Форматирование и разметка документа.
-
Создание гипертекстовых ссылок.
-
Встраивание изображений.
-
Создание списков: упорядоченные, неупорядоченные, списки определений.
Практические работы:
«Верстка примитивного сайта на HTML5».
Занятие 4. Введение в CSS
-
Оформление структурных элементов.
-
Свойства текста, выравнивание.
-
Свойства ссылок.
Практические работы:
«Применение стилей CSS к сайту».
Занятие 5. Структура сайта, изучение аналогов и создание wire-фреймов в Adobe Photoshop CC
-
Построение схемы сайта
-
Элементы страницы
Стандартные элементы страниц
Виджеты
-
Изучение аналогов
Зарисовка прототипов аналогов
Определение преимуществ и недостатков интерфейсов аналогов
-
Шаблоны проектирования
Правила юзабилити.
Проектирование макетов под различные размеры устройств.
Алгоритмы построения гибких модульных сеток.
Шаблоны 960 Grid, Boilerplate и Twitter Bootstrap.
-
Создание прототипа сайта
Стандартные блоки сайта
Элементы с состояниями
Практические работы:
«Исследование и зарисовка аналогов».
«Гибкие сетки».
Занятие 6. Создание прототипа макета сайта в Adobe Photoshop CC
-
«Умные объекты»
Профессиональное использование Smart Objects.
Применение «умных» трансформаций.
Профессиональное использование фильтров.
-
Организация слоев
Режимы блокировки. Фильтрация слоев.
Создание групп слоев.
Организация вариантов дизайн-решений. Палитра Layer Comps.
Практические работы:
«Гибкие сетки».
«Внедрение умных объектов».
«Создание макета веб-сайта».
Занятие 7. Подготовка дизайн-макета к верстке
-
Экспорт стилевых описаний
Возможности и ограничения копирования CSS со слоев.
Экспорт информации о шрифте.
Дополнительные средства генерации стилей для Adobe Photoshop CC.
-
Подготовка графики для веб
Нарезка макета. Slices.
Оптимизация графики. Форматы оптимизации.
Критерии выбора формата оптимизации.
Генерация содержимого по названию слоя.
Подготовка изображений для дисплеев Retina.
-
Автоматизация работа
Использование палитры Actions.
-
Тестирование адаптивности
Настройка адаптивного прототипа.
Практические работы:
«Нарезка».
«Оптимизация».
«Подготовка содержимого Assets».
Занятие 8. Возможности векторной графики Adobe Illustrator CC
-
Настройка программы для работы с веб-графикой
Организация рабочего пространства.
Режим работы с пикселами.
-
Пространство документа
Использование артбордов.
-
Построение векторных объектов
Использование векторных форм для создания элементов интерфейса.
Масштабирование и настройка векторных объектов.
Палитры Appearance, Transform, Transparency, Swatches, Kuler.
Создание паттернов и символов.
Применение растровых эффектов.
-
Слои
Создание слоевой структуры макета в Adobe Illustrator CC.
-
Текст
Расширенные возможности работы с текстом и подготовка его для веб.
Практические работы:
«Маскирование».
«Создание масштабируемого интерфейса».
«Создание слоевых эффектов».
Занятие 9. Создание макета сайта в иллюстраторе
-
Подготовка макета
Требования к макету в Adobe Illustrator.
Построение модульных сеток.
Настройка слоёв.
-
Подготовка графики для веб
Нарезка макета. Slices.
Оптимизация изображений.
Формат Svg. Параметры экспорта векторной графики.
-
Создание CSS-стилей
Палитра CSS Styles. Настройка экспорта объектов для веба.
Создание нестандартных шрифтов. Настройки шрифта в стилевых описаниях.
Занятие 10. Экзамен
