Часть 1. Введение в веб-дизайн. Инструменты, техники, вдохновение

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

Часть 1. Урок 1. Введение

Это ознакомительный урок, в котором я бы хотел дать напутствие по изучению данного курса.

Часть 1. Урок 2. Дизайн сайта по шагам. Поэтапный разбор.

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

Часть 1. Урок 3. Цвета в веб-дизайне

В уроке Вы узнаете, какие цвета использовать для фона и разных элементов сайта, чтобы вызвать те или иные ощущения, и как правильно сочетать цвета в веб-дизайне. Вы поймете, что такое резонанс. Узнаете значения цветов: красный, оранжевый, желтый, зеленый, синий, фиолетовый, черный и белый. Также узнаете о самом простом способе, как подобрать цвета для сайта. Кроме этого, Вы узнаете о методах «Двойная комплементарная система» и «Аналоги».

Часть 1. Урок 4. Типографика в веб-дизайне

Типографика в веб-дизайне — это очень важная часть создания дизайна. Это умение подобрать шрифтовую пару для сайта.

• Вы узнаете о «4 инструментах создания шрифтовой пары».
• Я покажу 4 сервисах, где можно брать шрифты.
• Вы научитесь выравнивать текстовые блоки.
• Вы узнаете, что такое «Акциденция».
• Мы разберем виды черточек, а также виды кавычек и случаи, когда их надо использовать.
• Вы узнаете, что такое «кернинг» и «трекинг».
• Я расскажу Вам о «запрещенных приемах» в типографике.
• Вы научитесь оформлять ссылки.

Часть 1. Урок 5. Как повысить качество работы

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

Часть 1. Урок 6. Photoshop для веб-дизайнера. Настройка необходимых инструментов

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

• Рассмотрим основные горячие клавиши.
• Вы узнаете, что такое выделение.
• Мы разберем с вами окно со слоями.
• Уберем лишние инструменты.
• Разберем с Вами каждый инструмент, который будет использован в курсе.
• Вы узнаете, что такое режим наложения.
• Мы познакомимся с окном стиля слоя.
• Вы узнаете, как одним кликом прятать один объект за другой

Часть 2. Сервисы для веб-дизайнера

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

Часть 2. Урок 1. Мировое сообщество графических дизайнеров #1

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

Часть 2. Урок 2. Мировое сообщество графических дизайнеров #2

В этом уроке мы затронем еще одно мировое сообщество дизайнеров. Его плюс в том, что оно русскоязычное. Здесь больше различных видов работ и больше дизайнеров. Данный сайт Вы также можете использовать для создания своего портфолио. Сайт совершенно бесплатный и не требует никаких вложений, кроме Вашего времени.

Часть 2. Урок 3. Сервис иконок

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

Часть 2. Урок 4. Бесплатный сайт с качественными фотографиями

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

Часть 2. Урок 5. Фотостоки

Не всегда мы можем найти качественные фотографии на определенную тему. Использовать «Гугл картинки» — плохая затея, которая загубит всю работу. Поэтому существуют фотостоки. На них Вы можете найти фотографию практически на любую интересующую Вас тему.

Часть 3. Практика. Основные элементы сайта

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

Часть 3. Урок 1. Кнопки

В этом уроке мы разберем виды кнопок.

• Вы узнаете о 7 правилах создания кнопок.
• Вы научитесь подбирать скругление.
• Вы научитесь подбирать шрифты.
• Вы научитесь подбирать цвета.
• Мы поработаем с окном стиля слоя и научимся создавать несколько эффектов.
• Вы научитесь накладывать текстуры на кнопки.
• Вы научитесь создавать интерактивные кнопки.

Часть 3. Урок 2. Вертикальное меню

В данном уроке мы нарисуем вертикальное меню двух видов, скрытое и развернутое.

• Вы научитесь делать разметку.
• Вы научитесь работать с инструментом «Прямоугольник со скругленными углами».
• Вы научитесь подбирать иконки и сочетать их.
• Вы узнаете, какие иконки не стоит использовать.
• Вы научитесь делать интерактивное меню.
• Вы научитесь выравнивать элементы, чтобы все было ровно до единого пикселя, не используя линейки.
• Вы научитесь работать с быстрыми направляющими.

Часть 3. Урок 3. Горизонтальное меню

В этом уроке мы нарисуем горизонтальное меню.

• Вы научитесь работать со слоями в Фотошопе и правильно группировать их.
• Вы научитесь быстро создавать простенькие логотипы для сайтов.
• Вы поработаете с шрифтами и научитесь подбирать начертание.
• Вы научитесь быстро выравнивать все объекты.
• Вы научитесь делать интерактивные вкладки меню.
• Вы научитесь создавать форму поиска.
• Вы научитесь быстро создавать из готового меню несколько вариантов с разным дизайном.

Часть 3. Урок 4. Навигация по сайту

В данном уроке мы с Вами создадим многофункциональный дизайн навигации с удобным использованием.

• Вы научитесь подбирать размер шрифта для навигации.
• Вы научитесь работать с непрозрачностью слоя + совместно со стилем слоя.
• Вы научитесь приводить все элементы к единому стилю.
• Вы научитесь создавать удобную всплывающую форму.
• Вы научитесь адаптировать иконки под общий дизайн.
• Вы научитесь работать с инструментом «Пипетка».
• В конце урока мы сделаем все интерактивные элементы.

Часть 3. Урок 5. Вход

В данном уроке показано, как создавать стильную всплывающую форму входа.

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

Часть 3. Урок 6. Регистрация

В этом уроке мы нарисуем очень красивую и большую всплывающую форму регистрации.

• Вы научитесь правильно совмещать фотографию с дизайном.
• Вы научитесь создавать еще одного вида формы для полей «имя/пароль/email».
• Вы научитесь добавлять стиль слоя для текста.
• Вы научитесь создавать двойную кнопку с разными стилями слоя.
• Вы научитесь работать с инструментом «Выделение».
• Вы научитесь добавлять фотографии фоном, так, чтобы был виден каждый объект, без дополнительной обработки фото.

Часть 3. Урок 7. Блок акция

Мы сделаем интересный дизайн в форме билетика.

• Вы научитесь создавать объемные элементы, работая сразу с прямоугольником, размытием, непрозрачностью и стилем слоя «Внутренняя тень»
• Вы научитесь размечать блоки.
• Вы научитесь создавать форму таймера.
• Вы научитесь работать с инструментом «Линия».
• Вы научитесь делать 3D эффект.
• Вы научитесь подбирать цвета под единый стиль.

Часть 3. Урок 8. Всплывающее окно с товаром

В данном уроке мы создадим всплывающую форму с предпросмотром товара.

• Вы научитесь расставлять приоритеты для элементов в макете.
• Вы научитесь создавать еще несколько различных форм с разными стилями.
• Вы научитесь продумывать будущие действия пользователя, так, чтобы все, что вы сделали, было удобным в использовании.
• Мы сделаем все элементы интерактивными.

Часть 3. Урок 9. Вплывающее окно формы подписки

В данном уроке мы снова затронем темы всплывающих окон, а точнее, окно с формой подписки.

1. Вы научитесь делать базовую разметку.
2. Вы научитесь создавать объединенную форму для email вместе с кнопкой.
3. Вы научитесь корректировать фотографии под Ваш дизайн.
4. И в конце мы подберем все цвета и приведем все в положенный вид.

Часть 3. Урок 10. Онлайн чат

Мы с Вами создадим красивый и удобный дизайн онлайн чата.

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

Часть 4. Практика. Рисуем лендинг пейдж

В данном разделе курса мы приступим к созданию реального полноценного дизайна сайта. Сейчас очень популярны и востребованы лендинги. На одном из примеров мы с Вами сделаем дизайн, состоящий из 3 экранов. Мы создадим не совсем обычный лендинг, а поэкранный.

Часть 4. Урок 1. Введение. Базовая разметка

В данном уроке разберем дизайн сайта и сделаем базовую разметку. Вы научитесь делать базовую разметку для поэкранного дизайна.

Часть 4. Урок 2. Меню. Футер

В этом уроке мы с Вами сделаем дизайн горизонтального меню и добавим футер. Вы создадите еще одну красивую кнопку. Научитесь находить иконки и адаптировать их под общий дизайн.

Часть 4. Урок 3. Первый экран. Часть 1

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

• Научитесь делать акцент на объектах.
• Сможете сделать блок с буллитами.
• Поймете, как работать с векторными иконками.
• Научитесь правильно расставлять все элементы по макету.

Часть 4. Урок 4. Первый экран. Часть 2

Здесь Вы научитесь адаптировать картинки из интернета под Ваш дизайн.

• Вы научитесь работать с инструментом «кисть».

• Научитесь накладывать текст на объекты.
• Вы научитесь смягчать острые объекты.
• Научитесь работать с режимами наложения изображения.
• Изучите инструмент «Цветовой тон/Насыщенность».
• Поймете, как добавлять двойной градиент.

Часть 4. Урок 5. Второй экран

• Вы научитесь делать аккуратные ссылки.
• Сможете создать интерактивный слайдер.
• Поймете, как делать блоки «иконка/текст».
• Научитесь делать мягкие тени.
• Мы добавим другой градиент для фона.

Часть 4. Урок 6. Третий экран

Аналогично второму экрану, третий по дизайну не особо будет отличаться. Зато мы закрепим все полученные знания и навыки работы с различными инструментами.

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

Часть 5. Практика. Рисуем блог

В пятой части курса мы с Вами сделаем еще один вид сайта - блог. Мы создадим очень много разных элементов, научимся адаптировать под дизайн готовые psd. Мы будем создавать дизайн, опираясь на ТЗ (техническое задание).

Часть 5. Урок 1. Базовая разметка

В данном уроке поговорим о дизайне блогов, о том, как они создаются, и произведем базовую разметку. Добавим линейки и базовые блоки. Я покажу Вам собственное видение разметки блога.

Часть 5. Урок 2. Меню

Мы начинаем делать основной дизайн, и первым на очереди у нас будет горизонтальное меню. Вы создадите форму поиска для блога.

Часть 5. Урок 3. Шапка

В данном уроке мы с Вами создадим шапку для блога.

• Вы научитесь создавать лаконичные заголовки.
• Вы научитесь работать с инструментом «Перо».
• Мы поговорим с Вами о размерах изображений в шапке.
• Вы научитесь работать со стилем слоя «Внутренняя тень».

Часть 5. Урок 4. Контент. Часть 1

Здесь мы изначально сделаем блоки со статьями.

• Вы научитесь добавлять фотографии, без потери их частей.
• Вы научитесь делать блок с контентом.
• Мы разберемся, как находить и адаптировать иконки под дизайн блога.

Часть 5. Урок 5. Контент. Часть 2

В этом уроке мы добавим несколько статей, сделаем блок с видео и встречей.

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

Часть 5. Урок 6. Навигация

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

Часть 5. Урок 7. Правый блок. Часть 1

Здесь мы нарисуем категории, популярные новости и форму рассылки.

• Вы научитесь расставлять акценты у блоков.
• Поймете, как работать с окном «символ».
• Сможете делать маленькие и удобные блоки со статьями.
• Научитесь создавать сдвоенную форму с кнопкой.
• Вспомните, как правильно находить и подбирать иконки для кнопок.

Часть 5. Урок 8. Правый блок. Часть 2

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

Часть 5. Урок 9. Футер

Финальный элемент этой части — футер.

• Вы научитесь работать с инструментом «Рамка».
• Мы с Вами подберем иконки социальных сетей из одной группы.
• Вы научитесь выравнивать все блоки в футере.

Часть 5. Урок 10. Интерактивные элементы

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

• Вы научитесь делать интерактивную навигацию.
• Мы рассмотрим, как будут выглядеть все активные элементы на сайте.

Часть 6. Практика. Рисуем сайт с онлайн просмотром кино

В шестом разделе курса мы совместим привычный нам вид сайта с лендингом. В итоге мы получим очень красивый и удобный в использовании сайт.

Часть 6. Урок 1. Введение. Верхнее мен

Для начала мы с Вами разберем сам дизайна сайта и каждый элемент, который нам предстоит сделать.

• Мы сделаем базовую разметку для данного дизайна сайта.
• Вы научитесь создавать простенький логотип.
• Вы создадите форму поиска с полностью скругленными углами.
• Мы закрепим знания по непрозрачности слоев.
• Также мы сделаем лаконичное горизонтальное меню.

Часть 6. Урок 2. Первый экран. Вариант 1

В данном уроке сделаем дизайн первого экрана, на нем будет много информации, кнопка и фоновое изображение.

• Вы научитесь сочетать несколько шрифтов в одном дизайне.
• Мы поработаем с самим текстом, плюс добавим иконки.
• Создадим сдвоенную кнопку в двух вариантах.
• Вы научитесь сглаживать острые переходы у фотографий.
• Вы освоите работу с непрозрачностью слоя.
• Сможете создать интересные эффекты, используя стандартные варианты градиента.
• Научитесь работать со стилем слоя «Наложение градиента».

Часть 6. Урок 3. Первый экран. Вариант 2

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

Вы поработаете с многими стилями слоя.

Часть 6. Урок 4. Блок сериалы

В этом уроке мы нарисуем блок с сериалами. В нем будет 4 блока.

• Вы научитесь высчитывать размеры каждого блока.
• Поймете, как работать во вкладке «Символ».
• Сможете создать эффект для текста, чтобы он читался с любым фоновым изображением.
• Научитесь прятать фотографии за объекты.
• Разберетесь, как работать с инструментом «Размытие по Гауссу».
• Овладеете стилем слоя «Градиент».

Часть 6. Урок 5. Кино. Часть 1

В первой части мы добавим заголовок, вкладки меню и первую карточку с фильмом.

• Вы научитесь размечать небольшие блоки, чтобы вместить всю информацию.
• Более глубоко освоите работу с текстом.

Часть 6. Урок 6. Кино. Часть 2

Во второй части мы поменяем обложки, изменим информацию о кино и добавим фоновое изображение.

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

Часть 6. Урок 7. Подборки

Предпоследний блок у нас будет подборкой актеров.

• Вы научитесь делать 3D-эффект для фотографий в виде галереи.

Часть 6. Урок 8. Футер

Нам осталось сделать блок с футером.

• Вы научитесь размечать блоки футера.
• Найдете круглые иконки соцсетей и адаптируете их под дизайн сайта.

Часть 6. Урок 9. Интерактивные элементы

В заключительном уроке данной части курса мы сделаем интерактивные элементы.

• Вы научитесь делать интерактивный поиск.
• Сможете сделать интерактивную кнопку.
• Вы сделаете двойную интерактивную кнопку.
• Поймете, как делать интерактивное меню.
• Вы научитесь делать интерактивный блок с сериалами.
• Создадите интерактивные вкладки.
• Вы научитесь делать интерактивный футер.