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

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

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

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

Другие курсы

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

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

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

Веб-дизайн. Создание макетов сайтов

Продолжительность обучения: 40 ак.ч. очно
График обучения: 5 дней по 8 ак.ч. или 10 дней по 4 ак.ч.

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

Аннотация

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

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

Практические работы курса помогут Вам овладеть профессиональными методами разработки дизайна сайтов с использованием инструментов Adobe Creative Cloud и закрепить знания и навыки необходимые для подготовки макета сайта для следующего этапа разработки (для верстки).

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

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

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

Расписание

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

Стоимость

Дата Физ. лица, руб. Юр. лица, руб.
Без скидки Cкидка 10%* Cкидка 15%** Без скидки Cкидка 10% Cкидка 15%
Цена c 07.04.2016 13600 12200 11550 16600 14900 14100

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

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

Курс ориентирован на слушателей имеющих уверенные навыки работы в Adobe Photoshop в объеме курса «Средства растровой графики. Adobe Photoshop» или прошедших тестирование.

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

  • Работа со слоевой структурой документа
  • Построение простейших векторных форм
  • Создание растровых масок
  • Маски отсечения
  • Создание и работа с векторной маской слоя
  • Режимы смешивания
  • Смарт-объекты
  • Локальные инструменты
  • Горячие клавиши
  • Выделение
  • Каналы
  • Трансформация

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

Предварительное тестирование

Тест №ВПТ-209 Adobe Photoshop

Практическое задание по навыкам работы в Adobe Photoshop.

  • Знание основных элементов интерфейса программы.
  • Структура изображения: изменение размера и разрешения; кадрирование.
  • Ретуширование, восстановление изображений.
  • Выделение областей. Перемещение и дублирование выделенных областей.
  • Совмещение изображений в один файл.
  • Операция «Группировка (Clipping Mask)».
  • Smart Radius из диалогового окна Refine Edge - выделение ворсистых объектов.
  • Слой-маска (layer mask)
  • Работа со слоями.
  • Слоевые эффекты
  • Текст

Тест №ФКТ-454.1 Растровая графика. Adobe Photoshop

Знание тем, рассмотренных на базовом курсе Adobe Photoshop:

  • работа с локальными инструментами,
  • служебные наборы,
  • работа с выделением, знание «горячих клавиш»,
  • режимы смешивания,
  • маскирование.

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

Занятие 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 и Adobe Illustrator 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 XD
    Интерфейс графического редактора.  
    Возможности программы. Создание анимированного прототипа страницы.
  • Дополнительные возможности CSS Трансформация элементов страницы. Анимация средствами CSS. CSS фильтры и blending.

Занятие 9. Использование SVG

  • Cinemagraph
    Требования к контенту. Подготовка видео. Создание "Живой фотографии" средствами Adobe Photoshop CC.
  • Использование векторной графики
    Формат SVG. Подготовка и оптимизация файла.
    Способы подключения. Анимация SVG. Создание масок прозрачности и отсечения.

Занятие 10. Экзамен