Веб-дизайн. Создание макетов сайтов: Курсы

Занятие 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. Экзамен