Профессиональная переподготовка

Курс «Веб-дизайнер ПРО» Университета ИТМО

Формат: дистанционно
Старт: в любое время
Длительность: 565 ак. часов / 6 месяцев
Стоимость: 66 000 ₽Беспроцентная рассрочка
от Университета и Кешбэк 13%
Выдаваемый документ: Диплом о профессиональной переподготовке

Курс научит вас создавать адаптивные веб-сайты, охватывая полный цикл разработки — от проектирования дизайн-макетов до реализации функционала (frontend × backend). Вы научитесь разрабатывать современные веб-ресурсы, соответствующие актуальным стандартам, и гарантировать их эффективность, кросс-браузерность и корректную работу.

Курс научит вас создавать адаптивные веб-сайты, охватывая полный цикл разработки — от проектирования дизайн-макетов до реализации функционала (frontend × backend). Вы научитесь разрабатывать современные веб-ресурсы, соответствующие актуальным стандартам, и гарантировать их эффективность, кросс-браузерность и корректную работу.

Программа подходит для начинающих — даже без опыта в Adobe Photoshop или HTML.

Вы научитесь создавать дизайн-макеты в Figma, Adobe Photoshop и Illustrator, верстать сайты, используя HTML5 и CSS3, и добавлять интерактивность через JavaScript, автоматизировать задачи с помощью Gulp, работать с Node.js для базовой серверной разработки, проектировать интерфейсы, учитывая принципы UX/UI и актуальные тренды в дизайне, освоите точную верстку и создадите сайт-портфолио, пройдя все этапы — от макета до размещения на хостинге.

Также, в процессе обучения вы освоите управление Docker, сможете создавать образы, настраивать контейнеры и разворачивать стек технологий (PHP + MySQL), научитесь организовывать взаимодействие между сервисами через API и инструменты Docker, работать с Unix-консолью на базовом уровне. Получите навыки работы с Git для совместной разработки и решения типовых задач, сможете ускорить создание прототипов с помощью конструктора Tilda.

  • На каждом этапе обучения Вас будет сопровождать личный преподаватель. Количество консультаций не ограничено.

Гибкий график обучения позволит совмещать курс с работой или учебой.

Широкий охват современных технологий и инструментов, глубина погружения как в область дизайна, так и в веб-технологии, практическая направленность курса позволит Вам создать портфолио, которое в совокупности с дипломом Университета ИТМО о профессиональной переподготовке станет гарантией успешного трудоустройства, что подтверждено опытом наших выпускников.

ITMO-WEBTECH

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

  • Тема 1. Основные сведения о программе. Интерфейс программы

    Типы обрабатываемых изображений. Свойства пиксельных изображений. Операции обработки цифровых изображений. Начальное окно Adobe Photoshop и элементы интерфейса. Меню. Панель быстрого доступа. Настройка интерфейса — рабочие среды. Панель настройки инструментов. Палитрыпанели. Диалоговые окна. Управление открытыми документами. Упорядочивание документов. Создание копии рабочего окна. Операции с файлами. Увеличение и уменьшение изображения на экране. Режимы отображения рабочего экрана. Вывод на экран и отключение видимости элементов интерфейса. Получение информации об изображении. Выбор и использование инструментов. Настройки и установки программы.

  • Тема 2. Элементарные действия с изображением

    Параметры нового документа. Размеры изображения. Размер холста (канвы). Обрезка изображения — кадрирование. Вращение изображения. Отзеркаливание или отражение изображения. Отмена действий.

  • Тема 3. Коррекция изображений

    Палитра Info (Инфо). Автоматическая коррекция. Простые решения по коррекции. Тоновая коррекция изображений. Характеристики тона изображения. Анализ гистограмм. Команды тоновой коррекции. Использование команды Brightness/Contrast (Яркость/Контраст). Оценка тона изображения с помощью команды Levels (Уровни). Коррекция тона изображения с помощью Curves (Кривые). Обработка 8- и 16-битных файлов. Цветовая коррекция. Изменение резкости и четкости. Добавление шума, удаление погрешностей.

  • Тема 4. Редактирование изображения

    Использование основного и фонового цвета. Кодировка цвета. Калибровка монитора. Управление цветом. Определение цвета с помощью диалогового окна. Синтез цвета с помощью палитры Color (ЦветСинтез цвета). Палитра Swatches (ОбразцыКаталог). Основные параметры рисующих инструментов. Инструменты Pencil (Карандаш), Brush (Кисть) и Eraser (Ластик). Инструмент Paint Bucket (Заливка). Инструмент Gradient (Градиент).. Слои фигуры. Инструменты ретуши.

  • Тема 5. Работа с выделенными областями

    Создание выделения с помощью инструментов. Геометрические выделения. Растушевка границы выделения. Выделение области, основанной на цвете. Комбинирование инструментов выделения. Команды меню Select. Редактирование выделенной области с использованием альфа-каналов. Перемещение границ выделенной области. Модификация выделенной области командами подменю Modify (Модификация). Перемещение выделенной области. Копирование выделенных областей. Копирование выделенной области при перетаскивании. Удаление выделенных пикселов. Трансформирование изображения в выделенной области.

  • Тема 6. Работа со слоями

    Послойная организация изображения. Палитра Layers (Слои). Использование палитры Layers (Слои). Настройка прозрачных областей слоя. Режимы рисования и наложения слоев. Применение эффектов и стилей. Применение к слою стиля. Smart-объекты. Деформирование изображений. Объединение и сведение слоев. Композиции слоев.

  • Тема 7. Корректирующие слои. Маскирование слоев

    Корректирующие слои в палитре Layers (Слои). Создание корректирующих слоев. Палитра Adjustments (Коррекция). Корректирующие слои тоновой коррекции. Корректирующие слои цветовой коррекции. Корректирующий слой Vibrance (Вибрация). Корректирующий слой Black and White (Белое и черное). Корректирующий слой Photo Filter (Фотофильтр). Корректирующий слой Channel Mixer (Смешение каналов). Корректирующие слои Invert (Инвертирование), Threshold (Порог) и Posterize (Постеризовать). Корректирующий слой Gradient Map (Карта градиента). Маскирование слоев. Создание слой-маски. Палитры для работы с масками. Диалоговое окно Refine Mask (Уточнить маску).

  • Тема 8. Создание и обработка текстов

    Основные термины. Ввода текста. Типы текста, их создание и использование. Палитры форматирования в Adobe Photoshop. Обработка маскированного текста. Обработка векторного текста. Создание из текста рабочего контура. Преобразование текста в кривые. Изменение формы текста. Создание текста вдоль контура. Создание текста внутри контура. Растеризация текстового слоя.

  • Тема 9. Изображения для интернета

    Графические форматы изображений в Интернете. Оптимизация отдельных изображений. Оптимизация формата JPEG. Оптимизация формата GIF. GIF-анимация. Видео и видеослои. Автоматизация действий.

  • Тема 10. Подготовка изображений для печати

    Размеры пиксельной графики для полиграфии. Использование форматов файлов для полиграфии. Формат TIFF. Формат EPS. Формат PDF. Использование формата RAW. Создание контуровпутей. Модель кривой Безье. Предварительное цветоделение. Параметры конвертации в CMYK. Рекомендуемые установки цветоделения. Печать из Adobe Photoshop.

  • Тема 1. Рабочая область и создание стандартных фигур и линейных объектов.

    Введение. Запуск и интерфейс программы. Создание и открытие документов. Установки документа. Использование инструментов, отображение рисунка. Палитры. Сохранение документа. Использование шаблонов документов. Создание основных геометрических фигур. Создание линейных объектов.

  • Тема 2. Выделение, расположение и размещение объектов

    Инструменты выделения. Сочетание фигур. Группирование объектов. Расположение объектов. Перемещение и копирование объектов. Удаление, фиксирование и скрытие объектов.

  • Тема 3. Работа с контурами.

    Инструменты для создания контуров. Элементы векторного контура. Создание контуров инструментом Pen. Выделение контуров и опорных точек. Изменение кривизны контура в точке. Использование инструментов группы Pencil. Инструмент Reshape. Команды обработки контуров.

  • Тема 4. Работа с цветом.

    Цветовые модели, используемые в программе. Цветовая модель RGB. Цветовая модель CMYK. Цветовая модель HSB. Цветовая модель Grayscale. Присваивание цвета объектам. Градиентные заливки. Конвертирование цветов моделей RGB и CMYK. Инструменты Live Paint Bucket и Live Paint Selection. Декоративные заливки

  • Тема 5. Преобразование объектов и контуров.

    Перемещение объектов в процессе их создания. Перемещение объектов с помощью палитры Control. Трансформирование объектов. Использование инструментов трансформирования. Трансформирование изображений с помощью палитры Transform. Использование инструментов группы Warp. Команды меню Effect.

  • Тема 6. Превращения, оболочки, трехмерные эффекты.

    Превращения. Оболочки. Обтравочные маски. Трехмерное представление объектов.

  • Тема 7. Работа с текстом.

    Инструменты для работы с текстом. Параметры символов. Заголовочные и абзацные текстовые блоки. Размещение текста в замкнутом объекте. Размещение текста вдоль контура. Обтекание текстом графических объектов. Отображение текста плашками. Преобразование текста в кривые. Текстовые стили.

  • Тема 1: Основы композиции.

    Необходимость и понятие композиции в дизайне. История композиции в дизайне. Принципы золотого сечения. Актуальная композиция 21 века. Основные элементы композиции. Равновесие в статической композиции. Динамическая композиция. Практика: Создание равновесной статической геометрической композиции по заданному количеству и типу геометрических плоских фигур (2-3 шт.). Создание динамической геометрической композиции по заданному количеству и типу геометрических плоских фигур (2-3 шт.). Выполнение серии практических упражнений «история про треугольник», в задании рассматривается статическое, скользящее, крутящее и летящее положение треугольника.

  • Тема 2: Орнамент и ритм в композиции.

    Примеры использования знаний о ритме в композиции. Орнамент, как основа текстильного дизайна и дизайна принта. Ритм в верстке и рекламе. Стилизация органического элемента. Практика: Создать ритмическую черно-белую геометрическую композицию. Стилизация. Создание черно-белого орнамента на основе стилизованного органического элемента.

  • Тема 3: Текстура и коллаж.

    Контраст, тон, масштаб элементов. Текстура. Примеры использования текстуры в графических интерфейсах. Художественные средства создания текстуры. Коллажи. Коллажные техники. Коллаж в полиграфии. Практика: Создание чб коллажа из фотографий. Необходимо создать 4 текстурных коллажа, посвященных различным стихиям (вода, земля, воздух, огонь). В процессе необходимо подобрать изображения органического и неорганического мира. В работе тренируется умение подобрать масштаб, тон и контрастность элементов.

  • Тема 4: Золотое сечение в искусстве.

    Золотые пропорции в истории. Золотое сечение сегодня. Понятие модуля, модульная сетка. Практика: Разобрать по модульной системе любое классическое произведение искусства. Разбор по модульной системе простого интерфейса (лендинга) на основе модульной сетки.

  • Тема 5: Цвет, цветовые модели. Использование цвета в композиции.

    Цветовой круг, теория цвета. Контраст, нюанс, дополнительные цвета. Сервисы подбора цветовых сочетаний. Цветовые модели RGB, CMYK, Lab Практика: 1. Создание простых композиций на тему нюанса (2 шт.) контраста (2 шт.). 2. Перевести изображение из RGB в CMYK. Перевод цветового режима при множестве активных слоев.

  • Тема 6: Цвет в искусстве, восприятие цвета.

    Психологическое восприятие цвета. Цвет, как средство эмоционального выражения. Практика: Создание абстрактной цветовой композиции на тему известного произведения искусства. (2 шт) или на литературную тему (2 шт). Дополнительно. Сделать цветовую инфоргафику по заданной теме (например, кофейня/ детская комната/ частное поликлиническое отделение) для СПб, для другого города. Несколько вариантов реализации. (2-3 шт)

  • Тема 7: Цветовой орнамент.

    Виды орнаментов, известные орнаменты, правило треугольника, бесшовные текстуры. Архитектоника формы. Стилизация формы. Практика: Стилизация(3-5 объектов) мира флоры/фауны. Создание цветового орнамента на их основе.

  • Тема 8: Реплика в искусстве. Современные направления и направления 20 века.

    Дадаизм, Дюшан и Реди-Мэйд, поп-арт, перфоманс и инсталяция. Упражнение на развитие креативности, внимательности к деталям, чувство композиции и цвета. Практика: Анализ характерных черт различных картин, интерфейсов. На основе картины Матисса «Танец» создать свой «танцующий сюжет». Отрисовать в кривых.

  • Тема 9: Плакат.

    Техники плаката, история плаката. Шрифтовой плакат. Фотография в плакате. Возможные подходы к созданию. Практика: Создание серии плакатов (3-4 шт.) для наружной рекламы (метро, улица). В процессе возможно использование фотоматериалов и шрифтов.

  • Форма аттестации: дизайн-проекты (презентация портфолио).

  • Тема 1:Письменность от начала до наших дней.

    Первые знаковые системы. Инструменты письма. Классификация шрифтов. Самые популярные шрифты и их история.

    Практика: Создание буквенной композиции (2 шт.), композиция должна отражать характер выбранного шрифта.

  • Тема 2: Анатомия буквы.

    Правильные и неправильные шрифты. Подробное рассмотрение особенностей кириллицы. Особенности строения и пропорций букв, символов. Наиболее общие отличия кириллицы и латиницы. Другие современные письменности.

    Практика: Разработка и создание собственного рукописного «уличного» шрифта.

  • Тема 3: Модульность в верстке.

    Особенности модулирования в типографике. Шведский плакат, сетки эпохи конструктивизма.

    Практика: Разработка и создание собственного модульного шрифта. Создание плаката с его использованием.

  • Тема 4: Художественные приемы оформления текста. Буквица.

    Обзор художественных приемов оформления текста. Из чего состоят книги, многополосные издания, газеты? Применяемые виды верстки.

    Практика: Нарисовать буквицу на основе существующего шрифта. Создать разворот многополосного издания с использованием буквицы.

  • Тема 5: Типографика, верстка и правила.

    Кернинг. Интерлиньяж. Трекинг.

    Практика: Исправить ошибки в существующем файле ID, содержащем в себе 2-3 разворота многополосного издания. Переверстать.

  • Тема 6: Сочетание шрифтов и стили в типографике.

    Принципы визуальной гармонии.

    Практика: Разработка разворота на основе графического стиля (2 шт, на выбор 2 противоположных, гранж и викторинская эпоха, например).

  • Тема 7: Леттеринг, каллиграфия и русская вязь.

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

    Практика: Разработка плаката на основе кириллической вязи.

  • Тема 8: Дизайн - искусство коммуникации.

    Плакат, как средство коммуникации со зрителем, инфографика. Основная функция дизайна.

    Практика: Создание социального плаката.

  • Тема 1. Введение в HTML. Ст