Курс "Web-дизайн"

О программеСегодняшние тенденции в мире интерактивных технологий показывают, что наряду с постоянным спросом на программистов, front-версткуи т.д.,точно также затребованы грамотные дизайнеры сайтов, другими словами Web-дизайнеры. Эта специальность подразумевает непрограммирование как таковое, а именно макетирование внешнего вида и формы сайта. Зачастую необходимо передать большой блок информациив видепростых и доступныхрисунков – пиктограмм.Как научиться это делать, основные инструменты и правила у нас проходят на курсе «Web-дизайна». Всего 32 лекции по 2 часа.
  • Прорисовка внешнего вида нескольких сайтов (на примере сайта визитки, магазина и информационного).
  • Изучение растровых и векторных программ. Работа с шаблонами и анализ популярных сайтов.
  • Изучение основных принципов композиции, компоновки и соотношения элементов.
  • В программе работа со шрифтовым оформлением, правилами и способами спецэффектов при текстовом оформлении.
  • Мини-группы от 2 до 5 человек. Курс «Web-дизайн» состоит из 32 занятий. Одно занятие длиться 2 часа.
  • Стоимость одного занятия = 180 грн. Всего курса = 5760 грн. При полной оплате 10% скидки. Индивидуально: 1 час = 200 грн
На кого рассчитанКурс ориентирован на детей (с 6 класса) с творческим потенциалом. Не обязательным, но желательным условием должно быть  художественное образование. Дети научатся рисовать сайты визитки, сайты-магазины, а также гифки и анимационные картинки. Программа обучения веб-дизайну рассчитана на учащихся 6–10 классов.
Компьютерная графика – это целый мир, который не оставит вашего ребенка равнодушным, возможно, станет для него не только новым, серьезным увлечением, но и в дальнейшем востребованной, интересной работой.Набор в группыНаши курсы находятся в нескольких районах города Киева. Выбирайте удобный район для вас по расположению.
Что получаем в результате обучения
  • Свободное пользование программами векторной и растровой графики, а также навыки рисования с помощью программ. Работа с планшетом
  • Изучение цветовых наборов, шрифтов и шаблонов, используемых при веб-верстке
  • Работа со сложными элементами дизайна
  • Умение самостоятельно создать макет и воспроизвести внешний вид сайта
  • Подготовка фотоизображений к размещению на сайте, разработка пиктограмм
  • Знакомство с «подводными камнями», которые подстерегают начинающих дизайнеров
Программа обучения
  1. Введение в векторную графику
    Знакомство с основными элементами рисования. Состав, особенности использования при разработке web-страниц
    Расширение при хранении файлов.
  2. Основы работы с программой
    Рисование с нуля кнопок и элементов сайта
    Работа с точными размерами.Комбинирование объектов
  3. Преобразование объектов
    Выделение, преобразование объектов. Основные инструменты выделения
    Группирование и порядок объектов в стопке
    п/р. Рисование нескольких видов кнопок и простых элементов сайта (ссылки, стрелки)
    Основные операции: копирование, группировка. Распределение объектов в стопке
  4. Инструменты рисования и их роль в дизайне
    Рисование и редактирование объектов произвольной формы с помощью Карандаша
    Принцип работы с кривой Безье
    Пользование библиотеками. Подключение новых, сохранение собственных
  5. Способы заливки и оформление цветом
    Библиотеки и заготовки. Инструменты редактирования. Способы частичного искажения.
    п/р. Попытки комбинирования готового и собственного в одну композицию. Объединение стилем или цветом.
  6. Сложные объекты, принципы создания
    Обработка контуров и использование логических операций при создании новых форм
    Составляющие объекта, их редактирование с помощью инструментов и палитр.
  7. Точная трансформация и способы точного управления элементами
    Выравнивание и распределение. Дублирование с определенным шагом и правильное расположение элементов на странице
    п/р. Подготовка сетки для сайта. Предварительное макетирование. Расположение элементов по направляющим
  8. Работа с готовыми элементами (символы и библиотеки)
    Создание собственных рисунков и сохранение как символов. Извлечение образцов и их редактирование
    п/р. Скачивание готовых исходников и дополнение дизайна заготовками программы
  9. Модели цвета. Использование в работе
    Работа с цветом. Основные модели для web-дизайна. Режимы цвета
    Выделение цветом и изменение по всему рисунку
    Система управления цветом в программе Illustrator. Использование профилей цвета
    Градиент, радиальный и линейный переход. Новые образцы
  10. Работа с макетированием
    Позиционирование рисунков относительно направляющих.
    Сетка и ее настройка. Изменение единиц измерения. Построение элементов с привязкой
    Создание элементарных рисунков из расчета точных размеров. Заполнение элементами заготовок
  11. Формирование узоров
    Создание, формирование и редактирование узоров.
    Преобразование узоров в простые объекты для дальнейшей работы
  12. Текстовые надписи
    Создание текстовых надписей. Импорт и экспорт, маскирование и растрирование в зависимости от поставленной задачи. Фигурная обрезка.
    п/р. Дизайн сайта, текстовые элементы и их расположение (применение нескольких стилей в оформлении)
  13. Эффекты и способы оформления текста
    Текст вдоль кривой
    Эффекты, которые используются для оформления текста.
    Создание логотипа, как составляющей фирменного стиля. Основные правила оформления
  14. Слои и их назначение
    Знакомство с понятием слоев в программе. Редактирование с помощью слоев. Прямое предназначение частичного выделения
    п/р. Создание и адаптация собственного логотипа для сайта. Работа над фирменным стилем. Позиционирование элементов.
  15. Понятие графических стилей
    Окна стилевого оформления, редактирования с помощью палитры
    Образцы стилевого оформления.
    Работа с прозрачностью объектов.
    Растрирование объектов
  16. Подготовка сайта, работа с символьными элементами.
    Распылитель и заполнение фона. Система управления цветом
    п/р. Создание собственного символа. Подготовка нескольких вариантов фона с использованием собственных наработок
  17. Работа с фотоизображениями
    Использование оболочек для деформации рисунка
    Понятие обрезки рисунка. Размещение в контейнерах и работа с маскировкой растровых и векторных рисунков
  18. Понятие символов
    Работа с инструментами и палитрой
    Создание и редактирование рисунка из символов
  19. Импорт и экспорт
    Эффекты для растровых и векторных изображений. Растушевка, тень, перетекание Способы применения
    п/р. Из готовых элементов – делаем сайт по образцу. Добавляем свои дизайнерские решения
  20. Понятие трассировки
    Трассировки, инструменты и методы
    Требования к растровым изображениям, которые используются в рекламных целях
  21. Подготовка работы к печати
    Сохранение с форматом для просмотра на других компьютерах
    Выбор формата для сохранения
  22. Готовый сайт за 1 час
    От эскиза до воспроизведения. Мастер-класс, как с помощью библиотек, заготовок и текстур – создать сайт.
    п/р. На конкурс – делаем сайт на выбор: из предложенных заготовок или самостоятельно подбираем элементы. Обязательная защита – учимся отстаивать свои работы перед заказчиком
  23. Введение. Особенности работы с растровой графикой
    Интерфейс программы. Открытие и сохранение файлов
    Понятие растрового изображения. Особенности, параметры и форматы растровых изображений при открытии и сохранении
  24. Исходники и составляющие для веб-сайтов
    Исходники и составляющие для веб-сайтов
    Кадрирование. Нарезка по заданным размерам. Работа с цифровыми изображениями.
    п/р. Выбор из предложенных фото тех, которые подойдут в дальнейшем для работы над сайтом. Перевод в нужный формат и подготовка к работе над ними.
  25. Работа с областями выделения, основные операции
    Простое выделение, особенности, приемы и параметры настройки области выделения
    Выделение лассо, виды инструмента, назначение
  26. Работа с элементами дизайна
    Заливка узором, создание собственного образца градиента, настройка инструментов, быстрое выделение и одновременная заливка нескольких частей изображения. Удаление с проявлением другого цвета. Понятие прозрачности в дизайне сайта
    п/р. Эскизный вариант шапки сайта (из заготовок и фото). Подготовка фона с нуля (самостоятельно подбираем цвета и текстуры)
  27. Работа с цветом
    Инструмент заливка, выбор цвета
    Состав цвета
    Заливка текстурой, подключение библиотек и использование заготовок.
    Градиентная заливка. Виды градиентного течения.
    Практическая работа: заливка готового изображения. Подбор реалистичных цветов
  28. Трансформирование и обработка изображений
    Действия с выделенной областью: перемещение, дублирование, поворот, зеркальное изображение с помощью панели опций и инструментов
  29. Трансформация
    Создание вмятин и деформаций с помощью команд трансформирования. Дополнительная настройка ин-та Перемещения
    п/р. Работаем над эффектом «поломанных» кнопок. Эффект паззла в оформлении сайта. Стандартное представление элементов
  30. Создание многослойного изображения
    Работа со слоями. Создание, видимость, автоматическое переключение между слоями. Параметры
    Выделение и связывание нескольких слоев. Прозрачность, блокировки. Режимы наложения. Эффекты режимов
  31. Создание главной страницы сайта в программе Photoshop с нуля
    Создание нового изображения. Параметры изображения и качества для дальнейшего использования
    Рисунок с помощью выделения и заливки
  32. Слои, режимы заливки и эффекты слоя
    Понятие видимости, прозрачности и блокировки
    Повторяющиеся элементы дизайна сайта и дублирование эффектов
    п/р. Добавление к элементам эффектов. Корректировка существующих и создание новых.
  33. Обработка многослойных изображений
    Группировка, стили слоев: тень, ореол и прочее
    Текстовые слои. Работа с параметрами текста
    Практическая работа: создание открытки с несложными текстовыми надписями и оформление с помощью стилей слоя
  34. Повышение качества изображения с помощью коррекционных фильтров и окон
    Уровни и кривые. Повышение насыщенности цветов и смена цветового баланса Варианты сч/б элементами. Плюс или минус
    п/р. Разработка галереи фото для сайта. Рассмотрение вариантов переключения и цветовое заполнение переходов
  35. Инструменты рисования и коррекции
    Работа с масками. Повышение насыщенности части изображения с помощью инструмента Губка. Удаление ненужных надписей ин-том Штамп. Работа с карандашами и кисточками, настройка и сохранение своих библиотек
    п/р. Корректировка готового изображения и работа над собственным рисунком сайта. Карта (как добраться) с указателями – собственными руками!
  36. Возможность работы с векторными инструментами
    Описание палитры Path
    Работа с простыми векторными формами
    Создание контуров выделения с помощью кривой Безье. Коррекция узлов и сегментов
    Работа с символами. Создание собственного символа и сохранения в библиотеке
    Практическая работа: создание собственного символа и векторного изображения
  37. Макет сайта, эскиз и оформление по слоям
    Работа с вкладками. Выбор цветовой гаммы. Работа с шрифтовыми надписям
    Выбор и передача информации об использованных в макете шрифтов
    п/р. Добавляем к сайту надписи. Оформляем их в виде гиперссылок
  38. Добавление анимационных эффектов и форматы сохранения
    Построение элементарнойгифки с заготовок. Пробуем сделать по тех/заданию. Настройка анимации. Сохранение ее для веб-сайта. Форматы и предварительный просмотр
    п/р. Прибавление к сайту эффектов анимации. Построение для своего сайта баннера
  39. Создание сайта с учетом технических особенностей
    Размеры элементов сайта для ПК, телефонов и планшетов. Адаптация форматов и размеров. Подготовка каждой вкладки и надписей. Какие в дальнейшем погрешности дизайна можно ожидать, и правильное написание тех/задания для верстальщиков сайта
  40. п/р. Разработка своего сайта на части и анализ ошибок и погрешностей.