Профессия Веб-дизайнер -Geekbrains

Профессия Веб-дизайнер -Geekbrains

HTML/CSS. Основы создания сайтов-1 месяц

• 
  
  Спойлер: подробнее

  Урок 1. Основные понятия в веб-разработке
  Что представляет собой веб-страница; виды сайтов; процесс разработки сайта; что такое гипертекст, теги и атрибуты; подготовка рабочего места; структура HTML-документа; основные теги оформления текста; простой пример HTML странички; пример сложной веб-страницы; горячие клавиши для перемещения по документам.
  Урок 2. Основы языка разметки документов HTML
  Спецсимволы; комментарии в HTML; гиперссылки; типы изображений для web; загрузка изображений на страницу; списки, формы и их элементы.
  Урок 3. Основы языка оформления стилей документа CSS
  Что такое CSS; синтаксис CSS; способы объявления CSS; селекторы (id, class, tag); селекторы атрибутов.; основные свойства стилей; вложенность; наследование и группирование свойств; проверка подключения файла стилей.
  Урок 4. Псевдоклассы и псевдоэлементы, табличная вёрстка
  Приоритеты применения стилей; псевдоклассы и псевдоэлементы; создание таблиц; объединение ячеек; вложенные таблицы; стилевое оформление таблиц.
  Урок 5. Формирование блочной модели; блочная вёрстка
  Основные теги для верстки (div и span); отступы элементов (margin и padding); обтекаемые элементы; позиционирование блоков.
  Урок 6. Работа с макетом дизайна в формате PSD
  Основные функции и знакомство с программой Photoshop; выделение основных частей макета; нарезка макета; вёрстка макета сайта при помощи блоков; вставка частей макета в вёрстку; установка плагина PerfectPixel.
  Урок 7. Разметка сайта и знакомство с Bootstrap
  Создание основной разметки сайт; применение overflow и clear в реальной вёрстке; заполнение разметки частями нарезанного макета; приёмы позиционирования элементов; знакомство и применение Bootstrap.
  Урок 8. Стандарты web и вспомогательные инструменты
  Загрузка проектов на сервер; проблема «кроссбраузерности»; стандарты HTML/CSS; будущее за стандартами HTML5 и CSS3; грамотная, универсальная вёрстка; знакомство с препроцессорами на примере LESS.
  
  
  Photoshop. Растровая графика для начинающих-1 месяц
  
  • 
    
    Спойлер: подробнее

    Урок 1. Adobe Photoshop, первое знакомство. Работа с файлами
    Интерфейс программы, Командное меню, Рабочие пространства и операции с палитрами, Preferences — настройки работы программы, Color Settings — настройки системы управления цветом, Навигация в открытом изображении, Команды Open и Open Recent, Универсальный браузер Adobe Bridge, Команды Save и Save As, Сохранение для интернета: Save for Web & Devices, Форматы файлов psd, tiff, jpg
    
    Урок 2. Изменение размера и кадрирование изображения.Тоновая коррекция черно-белых изображений
    Растровое изображение, Размер изображения , Разрешение, Изменение размера изображения. Команда Image Size, Изменение размера холста. Команда Canvas Size, Повороты и отзеркаливание картинки. Команды Image Rotation, Инструмент ручного кадрирования Crop Tool, Как компьютер задает яркость, Глубина цвета, Гистограмма, Анализ изображения, Curves (кривые) — интерфейс и принципы работы, Установка белой и черной точек, Цвет, как ощущение наблюдателя, Цветовой охват, Адитивная (RGB) и субтрактивная (CMYK) цветовые модели, Цветовой круг, Измерительные инструменты: Eyedropper (пипетка) и палитра Info, Задание цвета в палитре Color Picker, Каналы изображения, палитра Channels, Установка цветового баланса инструментом Curves, Автоматические коррекции и область их применения, Аналоги работы с экспозицией: Exposure и Photo Filter
    
    Урок 3. Свет и цвет. Каналы
    Цветовые модели, Цветовые профили для конкретного пользователя ПК, Коррекция изображений на компьютере, Инструменты из группы Осветлитель, Инструменты из группы Размытие, Инструменты из группы Штамп, Инструменты из группы Пипетка, Обзор панели «Каналы», Типы каналов, Отображение панели «Каналы», Отображение или скрытие канала, Демонстрация цветовых каналов в цвете, Выделение и редактирование каналов, Палитра Info, Коррекция изображения
    
    Урок 4. Выделение. Инструменты ручного выделения. Быстрое создание и доработка выделения
    Общие команды меню Select: All, Deselect, Reselect, Inverse, Grow и Similar, Сохранение выделений. Альфа-каналы, Инструменты выделения: Rectangular Marquee Tool, Lasso, Magic Wand, QST, Настройки инструментов ручного выделения, Выделение инструментом Pen Tool, Взаимодействие новой области выделения с уже существующими, Quick Mask (быстрая маска), Доработка маски инструментами рисования Brush Tool и Gradient Tool, Команда Transform Selection — геометрические преобразования выделений, Команда группы Select\Modify, Инструмент Color Range, Универсальняй инструмент доработки выделения Refine Edge, Создание маски из канала изображения
    
    Урок 5. Слои. Базовые приемы работы. Режимы наложения (Blending Modes)
    Принцип построения послойного изображения, Палитра Layers, Управление слоями, Геометрические трансформации изображения в слое, Связывание, группировка и объединение слоев, Smart Objects (смарт-объекты), Затемняющие, осветляющие и контрастные режимы наложения, Приемы коррекции с использованием контрастных режимов, Режимы Color и Luminosity, Логика разделения тоновой и цветовой коррекции
    
    Урок 6. Маска слоя (Layer Mask). Основы неразрушающей обработки
    Маска — возможность «стереть изображение без его удаления, Операции с маской в палитре слоев (Layers), Маска вырезания (Clipping Mask), Использование маски слоя для вырезания объектов, Понятие корректирующего слоя, Слои заливки: Solid Color, Gradient, Pattern, Корректирующие слои: Levels, Curves, Color Balance, Brightness/Contrast, Photo Filter,, Exposure, Что такое неразрушающая обработка, Основные принципы создания «хорошей» послойной структуры, Сохранение истории обработки в слоях, Сравнение методики неразрушающей обработки и инструмента History Brush
    
    Урок 7. Выборочная коррекция. Перевод в ч/б и тонирование
    Hue/Saturation, коррекция отдельного цветового тона, Vibrance — аккуратный способ поднять цветовую насыщенность, Selective Colors, особенности работы инструмента в контексте цветовоспр, человека, Shadow/Highlight — принципы применения и настройки инструмента, Преобразование цветовых контрастов в яркостные, Классические способы перевода в ч/б, Black&White — самый лучший из быстрых и самый быстрый из лучших, Тонирование. Разновидности, принципы и область применения, Тонирование при помощи Hue/Saturation и кривых (Curves), Раздельное (сплит) тонирование. Инструмент Gradient Мар
    
    Урок 8. Ретушь. Инструменты и приемы
    Почему приходится ретушировать фотографии, «Упрощенные» инструменты — Healing Brush Tool, Spot Healing Brush Tool, Patch Tool и опция интеллектуального совмещения границ (Content-Aware), Команда Edit \ Fill и опция Content-Aware — быстрое избавление от мусора, Content-Aware Move Tool — «волшебное» перемещение объектов, Clone Stamp Tool — основной инструмент ретушера, Палитра Clone Source, Особенности и проблемы применения Clone Stamp Tool, Встраивание ретуши в методику неразрушающей обработки, Особенности и виды портретной ретуши, Инструмент Brush Tool в различных режимах наложения, Инструменты Dodg Tool и Bum Tool, History Brush как скоростная альтернатива работе на слоях, Исправление геометрии — фильтр Liquify
    
    
    Веб-дизайн. От новичка до профи-1 месяц
    
    Спойлер: подробнее

    Урок 1. Теория веб-дизайна
    Введение. Что такое веб-дизайн? Основы хорошего дизайна. Цвет, форма, типографика. Основы гармоничной композиции. Единство, пропорции, баланс. Масштабируемость в веб-дизайне. Подготовка к работе. Необходимые программы. Настройка Photoshop для удобной работы. С чего начинать дизайн. Чит-коды, облегчающие дизайнеру жизнь.
    
    Урок 2. Типографика. Визуальные знаки
    Что такое типографика? Классификация шрифтов. Сочетания шрифтов. Визуальные знаки и их типы.
    
    Урок 3. Предварительный анализ в веб-дизайне. Процесс работы над сайтом
    Постановка задачи. Брифинг клиента. Изучение аудитории сайта, создание персонажей для сайта. Изучение предметной области. Изучение конкурентов. Составление пользовательского сценария. Прототипирование.
    
    Урок 4. Сетка в веб-дизайне и практика
    Создание дизайна сайта. Вертикальная и горизонтальная сетка.
    
    Урок 5. Тренды в веб-дизайне
    Минимализм. Флэт-дзайн. Изображения в веб-дизайне. Сторителлинг. Видео и веб-дизайн. Эффекты анимации. Google material дизайн.
    
    Урок 6. Дизайн landing page
    Что такое landing page? Что такое конверсия? Как создавать сайты, стимулирующие продажи?
    
    Урок 7. Дизайн интернет-магазина
    Принципы прототипирования магазина, анатомия интернет-магазина. Главная страница, карточка товара, корзина. Особенности дизайна интернет-магазина.
    
    Урок 8. Секреты, техники, инструменты веб-дизайна. Что делать дальше?
    Личный опыт преподавателя, советы и рекомендации для дальнейшего развития.
    
    Подробнее: