Курсы Дизайна

Общая информация Схема обучения Работы слушателей Отзывы слушателей Расписание и стоимость

Условия обучения

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

Другие курсы

Курсы 3ds Max Курсы AutoCAD Курсы Maya Другие направления

Обратная связь

+7(812)703-02-02 Контакты Задать вопрос Форум
Печать

Технологии Adobe Creative Cloud для веб-дизайна


График обучения: 5 дней по 8 ак.ч. в день

Курс пока не поставлен в расписание. Оставить заявку

Аннотация

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

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

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

На сегодняшний момент Adobe Creative Cloud является наиболее эффективным набором профессиональных инструментов по созданию веб-графики и верстки адаптивных веб-приложений. Данный курс научит Вас использовать средства и возможности Adobe Photoshop CC, Adobe Illustrator CC, Adobe Dreamweaver CC для создания профессиональных веб-макетов и прототипов, а также добавлять в них интерактивность.

Веб-дизайн – это не только технические приемы по созданию графических объектов, но и организация пространства, единство композиционных, цветовых и стилистических решений. Как направлять взгляд пользователя по ключевым объектам на сайте? Как правильно использовать шрифты, формы, текстуры, чтобы улучшить восприятие информации? Какого размера должны быть элементы интерфейса веб-приложения, если они отображаются на мониторе с высоким разрешением или на мобильном устройстве? Данный курс дает ответы на эти вопросы и позволяет сформировать профессиональные навыки эффективной работы с инструментарием программ Creative Cloud.

Документы об окончании обучения

  • Сертификат учебного центра
    Сертификат учебного центра
  • Удостоверение повышении квалификации (выдается лицам имеющим высшее или среднее профессиональное образование)
    Удостоверение повышении квалификации (выдается лицам имеющим высшее или среднее профессиональное образование)

Преподаватели

Расписание

Курс пока не поставлен в расписание. Оставить заявку на курс

Стоимость

Дата Физ. лица, руб. Юр. лица, руб.
Без скидки Cкидка 10%* Cкидка 15%** Без скидки Cкидка 10% Cкидка 15%
Цена c 10.02.2014 13050 11700 11050 16300 14650 13850

*Скидка 10% для ранее обучавшихся, при одновременной оплате 2х курсов, а также по акциям.
**Скидка 15% при одновременной оплате 3х и более курсов.
Примечание. Студентам ВУЗов Санкт-Петербурга очной формы обучения скидка до 25%.
Скидки не предоставляется на курсы с дистанционной формой обучения.
Скидки не предоставляется на комплексные и модульные программы обучения.

Требования к начальному уровню знаний

Курс ориентирован на слушателей имеющих уверенные навыки работы в Adobe Photoshop в объеме курса «Adobe Photoshop для профессионалов» или прохождения тестирования. Необходимы базовые знания по HTML и CSS в объеме курса «Основы создания веб-сайтов. Adobe Dreamweaver» или прохождения тестирования.

Знание тем для успешной сдачи теста по Adobe Photoshop:

  1. Работа со слоевой структурой документа
  2. Построение простейших векторных форм
  3. Создание растровых масок
  4. Маски отсечения
  5. Создание и работа с векторной маской слоя
  6. Режимы смешивания
  7. Смарт-объекты
  8. Локальные инструменты
  9. Горячие клавиши
  10. Выделение
  11. Каналы
  12. Трансформация

Знание тем для успешной сдачи теста по HTML:

  1. Разметка HTML-документа
  2. Основные атрибуты элементов веб-страницы
  3. Создание стилевых блоков CSS
  4. Способы адресации документов
  5. Подключение стилевых описаний
  6. Специфичность стилевых правил
  7. Способы позиционирования элементов
  8. Блочная модель верстки
  9. Формирование таблиц
  10. Использование псевдоклассов
  11. Основные свойства стилизации блоков, текста
  12. Создание ссылок

Курсы, обеспечивающие достаточный начальный уровень знаний:

Программа курса

Занятие 1. Начало работы с Adobe Сreative Cloud

Преимущества использования Adobe Creative Cloud
Облачное хранение данных, обновления, расширенные возможности.

Подготовка растровой графики в Adobe Photoshop CC
Настройка рабочего пространства. Горячие клавиши.
Изменение размеров растровых изображений.
Алгоритмы интерполяции.
Масштабирование с учетом содержимого.
Инструменты обрезки.

Маскирование
Способы сокрытия пикселей слоя.
Виды масок и варианты их использования.

Корректирующие слои
Применение команд цветовой и тоновой коррекции.
Способы ограничения действия корректирующих слоёв.
Аналоги применения цветовой коррекции в CSS3.

Практические работы:
«Подготовка изображений для сайта».
«Цветовые дизайн-решения».

Занятие 2. Работа со служебными наборами в Adobe Photoshop CC

Логика работы со служебными файлами
Способы профессионального использования служебных наборов и предустановок.
Сохранение, импорт/экспорт настроек.

Работа со слой-формами и образцами цвета
Расширенные возможности форм.
Использование градиентов, образцов цвета для веб-макетов.
Импорт данных о цвете. Палитра Kuler.

Работа со шрифтами
Установка настроек шрифта для веб. Веб-типографика.
Решение проблем использования нестандартных шрифтов.
Создание пользовательских стилей текста.

Применение слоевых эффектов. Стили
Использование режимов смешивания.
Настройка Blending Options.
Пользовательские стили.
Ограничения применения слоевых эффектов в CSS3.

Создание паттернов
Алгоритмы создания бесшовных паттернов.

Практические работы:
«Анатомия слоевого эффекта».
«Цветовые дизайн-решения».
«Создание паттернов».
«Элементы веб-интерфейса».

Занятие 3. Создание прототипа дизайна сайта в Adobe Photoshop CC

Шаблоны проектирования
Технические требования к веб-макету. Правила юзабилити.
Проектирование макетов под различные размеры устройств.
Алгоритмы построения гибких модульных сеток.
Шаблоны 960 Grid, Boilerplate и Twitter Bootstrap.

«Умные объекты»
Профессиональное использование Smart Objects.
Применение «умных» трансформаций.
Профессиональное использование фильтров.

Организация слоев
Режимы блокировки. Фильтрация слоев.
Создание групп слоев.
Организация вариантов дизайн-решений. Палитра Layer Comps.

Практические работы:
«Гибкие сетки».
«Внедрение умных объектов».
«Создание прототипа веб-сайта».

Занятие 4. Подготовка дизайн-макета к верстке

Экспорт стилевых описаний
Возможности и ограничения копирования CSS со слоев.
Экспорт информации о шрифте.
Дополнительные средства генерации стилей для Adobe Photoshop CC.

Подготовка графики для веб
Нарезка макета. Slices.
Оптимизация графики. Форматы оптимизации.
Критерии выбора формата оптимизации.
Генерация содержимого по названию слоя.
Подготовка изображений для дисплеев Retina.

Автоматизация работа
Использование палитры Actions.

Тестирование адаптивности
Экспорт элементов дизайн-макета в Adobe Edge Reflow.
Настройка адаптивного прототипа.

Практические работы:
«Нарезка».
«Оптимизация».
«Подготовка содержимого Assets».

Занятие 5. Возможности векторной графики Adobe Illustrator CC

Настройка программы для работы с веб-графикой
Организация рабочего пространства.
Режим работы с пикселами.

Пространство документа
Использование артбордов.

Построение векторных объектов
Использование векторных форм для создания элементов интерфейса.
Масштабирование и настройка векторных объектов.
Палитры Appearance, Transform, Transparency, Swatches, Kuler.
Создание паттернов и символов.
Применение растровых эффектов.

Слои
Создание слоевой структуры макета в Adobe Illustrator CC.

Текст
Расширенные возможности работы с текстом и подготовка его для веб.

Практические работы:
«Маскирование».
«Создание масштабируемого интерфейса».
«Создание слоевых эффектов».

Занятие 6. Создание макета сайта в иллюстраторе

Подготовка макета
Требования к макету в Adobe Illustrator.
Построение модульных сеток.
Настройка слоёв.

Подготовка графики для веб
Нарезка макета. Slices.
Оптимизация изображений.
Формат Svg. Параметры экспорта векторной графики.

Создание CSS-стилей
Палитра CSS Styles. Настройка экспорта объектов для веба.
Создание нестандартных шрифтов. Настройки шрифта в стилевых описаниях.

Занятие 7. Работа с Adobe Dreamweaver CC

Настройка рабочего пространства
Основные настройки Dreamweaver CC. Горячие клавиши.

Структурирование будущего проекта
Детальная настройка проекта.
Организация структуры сайта. Палитра Files.

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

Стилевые описания CSS3
Современные cредства эффективной работы со стилевыми описаниями в Adobe Dreamweaver.
Основные свойства CSS3, которые можно использовать уже сейчас.
Поддержка стилей браузерами.
Использование нестандартных шрифтов. Интеграция с Adobe Web Fonts.

Практические работы:
«Семантическая разметка».
«Применение CSS3».
«Веб-шрифты».

Занятие 8. Шаблоны проектирования

Создание адаптивных макетов
Возможности проектирования «гибких макетов» в Dreamweaver CC.
Медиа-запросы. Адаптивный веб-дизайн. Способы реализации.

Работа с фреймворками
Использование Boilerplate и Bootstrap.
Интеграция с Dreamweaver CC. Настройка и стилизация веб-прототипов.

Практические работы:
«Отзывчивый дизайн».
«Фреймворки».

Занятие 9. Создание работающего веб-прототипа сайта

Верстка шаблона
Верстка основных сайта страниц сайта, основываясь на дизайн-макете.
Импорт стилевых описаний и контента сайта.

Кроссбраузерность
Обеспечение кроссбраузерности сайта.

Интерактивность
Добавление интерактивности на сайт.
Современные эффекты CSS для браузеров.

Практические работы:
«Верстка».
«Адаптивный дизайн».
«Фильтры».
«Переходы».

Занятие 10

Экзамен