Часть 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. Вплывающее окно формы подписки
В данном уроке мы снова затронем темы всплывающих окон, а точнее, окно с формой подписки.
- Вы научитесь делать базовую разметку.
- Вы научитесь создавать объединенную форму для email вместе с кнопкой.
- Вы научитесь корректировать фотографии под Ваш дизайн.
- И в конце мы подберем все цвета и приведем все в положенный вид.
Часть 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. Интерактивные элементы
В заключительном уроке данной части курса мы сделаем интерактивные элементы.
- Вы научитесь делать интерактивный поиск.
- Сможете сделать интерактивную кнопку.
- Вы сделаете двойную интерактивную кнопку.
- Поймете, как делать интерактивное меню.
- Вы научитесь делать интерактивный блок с сериалами.
- Создадите интерактивные вкладки.
- Вы научитесь делать интерактивный футер.
