Видеокурс "Веб-дизайнер – профессионал. Создание востребованных макетов". (Даниил Волосатов - Webformyself)

Это электронный видеокурс
Видео урок
461

Издательство:
  • Автор курса:
  • Полная информация

    • Автор: Даниил Волосатов

      Веб-дизайн — это не просто востребованная профессия… В первую очередь, это стиль жизни. Профессия веб-дизайнера позволяет зарабатывать из любой точки планеты, путешествовать, расти и постоянно развиваться, ставить цели и добиваться новых высот. Если Вас привлекает возможность вести небольшой, но доходный интернет-бизнес из любой точки планеты и жить насыщенной, интересной жизнью — фриланс в сфере веб-дизайна вполне может Вам подойти. Поскольку именно профессия веб-дизайнера способна Ваши мечты о красивой свободной жизни воплотить в жизнь. Но есть одно «но»! Это не кнопка «Бабло», тут нужно работать! Но я могу пообещать Вам то, что уже очень скоро Вы сможете создавать первоклассные макеты сайтов, которые будут востребованными на рынке. Причем сможете делать это быстро и не затрачивая много времени и усилий. А чем больше качественных дизайнов сайтов Вы делаете, тем выше Ваш ежемесячный уровень дохода. Это аксиома.

    • Часть 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. Интерактивные элементы

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

      • Вы научитесь делать интерактивный поиск.
      • Сможете сделать интерактивную кнопку.
      • Вы сделаете двойную интерактивную кнопку.
      • Поймете, как делать интерактивное меню.
      • Вы научитесь делать интерактивный блок с сериалами.
      • Создадите интерактивные вкладки.
      • Вы научитесь делать интерактивный футер.
    • ВСЕ МАТЕРИАЛЫ АВТОРА

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

      Видеокурс
      Видеокурс "Веб-диза...

      Видеокурс
      Видеокурс "Веб UX/U...

      Видеокурс
      Видеокурс "Марафон ...

      Курс
      Бесплатный видеокур...

      Курс
      Видеокурс "Веб-диза...

      Видеокурс
      Видеокурс "Дизайн-с...

      Видеокурс
      Видеокурс "Осваивае...

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

    • СМОТРИТЕ БЕСПЛАТНЫЕ МИНИ - КУРСЫ АВТОРА

      Мини-курс
      Мини-курс "Веб-диза...

      Мини-курс. Веб-дизайн. Быстрый старт. (Даниил Волосатов - Webformyself)
      Мини-курс. Веб-диза...

      Дизайн-система. Loyal. (Даниил Волосатов - Фотошоп-Мастер)
      Мини-курс. Дизайн-с...

      Веб-дизайн. Практический курс создания лендинга. (Даниил Волосатов - Webformyself)
      Мини-курс. Веб-диза...