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

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

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

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

Другие курсы

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

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

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

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

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

Начало занятий:

    21.08.2017, 1000

Записаться на курс

Аннотация

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

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

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

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

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

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

Расписание

Начало курса Окончание курса Даты занятий Время занятий Номер аудитории Преподаватель
21.08.2017 25.08.2017 По будним дням 1000-1720
5 дней по 8 ак.ч. в день
Аудитория №227 Кривохатько Андрей Александрович Записаться на курс

Стоимость

Дата Физ. лица, руб. Юр. лица, руб.
Без скидки 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. Экзамен