Курс Adobe Photoshop для веб-дизайнера рассчитан на людей, имеющих желание работать в области веб-дизайна.

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

Веб-дизайнер сосредотачивается не только на визуальном оформлении, он должен заботиться и об удобстве использования веб-сайта. В своей работе он применяет знания языка разметки документов HTML, языка оформления стилей документов CSS, основы HTML-вёрстки.

Данный курс является первым шагом на пути к профессии веб-дизайнера. В рамках курса мы учим работать в Adobe Photoshop, рассказываем о структуре и элементах веб-сайтов, даём базовые представления об HTML и CSS, делимся техническими приёмами и секретами работы. Бóльшая часть курса посвящена самостоятельной работе над собственным проектом. Вместе с нашим преподавателеми Вы создаете макет веб-сайта и по окончанию обучения защищаете свой проект.

Каковы требования

Если Вы желаете учиться дистанционно, то нужно иметь Adobe Photoshop на Вашем компьютере.

Что я вынесу из этого курса

• освоите основные инструменты Adobe Photoshop;
• освоите пошаговую технику создания макетов веб-сайтов;
• создадите современный макет веб-сайта;
• приобретёте практические навыки работы в Adobe Photoshop;
• научитесь создавать элементы пользовательского интерфейса;
• научитесь использовать и настраивать дополнительный инструменты;
• узнаете о различных фотобанках и полезных ресурсах.

Какова целевая аудитория

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

Содержание

Раздел. 1 Основные определения и настройка Adobe Photoshop

• Введение
• Основные определения
• Описание HTML5 элементов
• Элементы интерфейса веб-сайта
• Настройка интерфейса Adobe Photoshop

Раздел. 2 Знакомство с основными инструментами Adobe Photoshop

• Инструмент прямоугольник
• Инструмент прямоугольник со скругленными углами
• Инструмент эллипс
• Инструмент многоугольник
• Инструмент линия
• Инструмент произвольная линия
• Инструмент перемещение
• Выравнивание объектов
• Работа с текстом
• Работа с абзацами текста
• Инструмент пипетка
• Палитра «Образцы» и «Цвет»
• Работа со слоями
• Стили слоя
• Инструмент «Выделение контура»
• Инструмент «Выделение узла»
• Практика «Рисуем кнопки»

Раздел. 3 Создание пользовательского интерфейса (UI — элементы) и других элементов веб-сайта

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

Раздел. 4 Полезные советы и ресурсы для веб-разработчика

• Горячие клавиши
• Сетка для будущего сайта
• Работа с изображениями
• Психология цвета или как выбрать цветовую гамму
• Выбор шрифтов
• Работа с Font Awesome
• Где брать изображения для сайта
• Узоры и фоновые изображения
• Кисти
• Стили и градиенты
• Формы
• Иконки
• Где искать вдохновение

Раздел. 5 Начинаем работать над макетом главной страницы сайта визитки

• Планирование цветовой гаммы и выбор шрифтов
• Создаём сетку сайта
• Создаём шапку веб-сайта и её элементы
• Создаём слайдер сайта
• Создаём новостной блок
• Создаём галерею примеров работ в виде карусели
• Создаём блок отзывов клиентов
• Создаём контактною форму
• Создание подвала веб-сайта и его элементов

Раздел. 6 Практическая работа по созданию макета сайта

• Этап №1. Выбор проекта и его темы для самостоятельной работы, по созданию личного макета веб-сайта. На выбор предлагается три варианта (сайт-визитка компании, портфолио дизайнера, лэндинг)
• Этап №2. Выбор цветовой гаммы, шрифтов и др. элементов веб-сайта.
• Этап №3. Создание сетки, разметка блоков веб-сайта и UI элементов.
• Этап №4. Финальное оформление блоков веб-сайта.
• Этап №5. Защита проекта.