Видеокурс "Веб-дизайнер – профессионал. Создание востребованных макетов". (Даниил Волосатов - Webformyself)
-
Автор: Даниил Волосатов
Веб-дизайн — это не просто востребованная профессия… В первую очередь, это стиль жизни. Профессия веб-дизайнера позволяет зарабатывать из любой точки планеты, путешествовать, расти и постоянно развиваться, ставить цели и добиваться новых высот. Если Вас привлекает возможность вести небольшой, но доходный интернет-бизнес из любой точки планеты и жить насыщенной, интересной жизнью — фриланс в сфере веб-дизайна вполне может Вам подойти. Поскольку именно профессия веб-дизайнера способна Ваши мечты о красивой свободной жизни воплотить в жизнь. Но есть одно «но»! Это не кнопка «Бабло», тут нужно работать! Но я могу пообещать Вам то, что уже очень скоро Вы сможете создавать первоклассные макеты сайтов, которые будут востребованными на рынке. Причем сможете делать это быстро и не затрачивая много времени и усилий. А чем больше качественных дизайнов сайтов Вы делаете, тем выше Ваш ежемесячный уровень дохода. Это аксиома.
- Вы узнаете о «4 инструментах создания шрифтовой пары».
- Я покажу 4 сервисах, где можно брать шрифты.
- Вы научитесь выравнивать текстовые блоки.
- Вы узнаете, что такое «Акциденция».
- Мы разберем виды черточек, а также виды кавычек и случаи, когда их надо использовать.
- Вы узнаете, что такое «кернинг» и «трекинг».
- Я расскажу Вам о «запрещенных приемах» в типографике.
- Вы научитесь оформлять ссылки.
- Рассмотрим основные горячие клавиши.
- Вы узнаете, что такое выделение.
- Мы разберем с вами окно со слоями.
- Уберем лишние инструменты.
- Разберем с Вами каждый инструмент, который будет использован в курсе.
- Вы узнаете, что такое режим наложения.
- Мы познакомимся с окном стиля слоя.
- Вы узнаете, как одним кликом прятать один объект за другой
- Вы узнаете о 7 правилах создания кнопок.
- Вы научитесь подбирать скругление.
- Вы научитесь подбирать шрифты.
- Вы научитесь подбирать цвета.
- Мы поработаем с окном стиля слоя и научимся создавать несколько эффектов.
- Вы научитесь накладывать текстуры на кнопки.
- Вы научитесь создавать интерактивные кнопки.
- Вы научитесь делать разметку.
- Вы научитесь работать с инструментом «Прямоугольник со скругленными углами».
- Вы научитесь подбирать иконки и сочетать их.
- Вы узнаете, какие иконки не стоит использовать.
- Вы научитесь делать интерактивное меню.
- Вы научитесь выравнивать элементы, чтобы все было ровно до единого пикселя, не используя линейки.
- Вы научитесь работать с быстрыми направляющими.
- Вы научитесь работать со слоями в Фотошопе и правильно группировать их.
- Вы научитесь быстро создавать простенькие логотипы для сайтов.
- Вы поработаете с шрифтами и научитесь подбирать начертание.
- Вы научитесь быстро выравнивать все объекты.
- Вы научитесь делать интерактивные вкладки меню.
- Вы научитесь создавать форму поиска.
- Вы научитесь быстро создавать из готового меню несколько вариантов с разным дизайном.
- Вы научитесь подбирать размер шрифта для навигации.
- Вы научитесь работать с непрозрачностью слоя + совместно со стилем слоя.
- Вы научитесь приводить все элементы к единому стилю.
- Вы научитесь создавать удобную всплывающую форму.
- Вы научитесь адаптировать иконки под общий дизайн.
- Вы научитесь работать с инструментом «Пипетка».
- В конце урока мы сделаем все интерактивные элементы.
- Вы научитесь работать с инструментом «Прямоугольник».
- Вы сможете работать с палитрой цветов.
- Вы научитесь создавать нестандартные формы для данных.
- Вы научитесь добавлять обводку элементам.
- Вы научитесь визуально показывать активные элементы и неактивные.
- Вы научитесь расставлять элементы, используя быстрые направляющие.
- Вы наконец-то научитесь работать с фотографиями при создании дизайна.
- Мы разберем несколько видов наложения фотографий на формы.
- Вы научитесь работать со стилем слоя «Наложение градиента».
- Вы научитесь добавлять аккуратные тени для элементов.
- Вы научитесь правильно совмещать фотографию с дизайном.
- Вы научитесь создавать еще одного вида формы для полей «имя/пароль/email».
- Вы научитесь добавлять стиль слоя для текста.
- Вы научитесь создавать двойную кнопку с разными стилями слоя.
- Вы научитесь работать с инструментом «Выделение».
- Вы научитесь добавлять фотографии фоном, так, чтобы был виден каждый объект, без дополнительной обработки фото.
- Вы научитесь создавать объемные элементы, работая сразу с прямоугольником, размытием, непрозрачностью и стилем слоя «Внутренняя тень»
- Вы научитесь размечать блоки.
- Вы научитесь создавать форму таймера.
- Вы научитесь работать с инструментом «Линия».
- Вы научитесь делать 3D эффект.
- Вы научитесь подбирать цвета под единый стиль.
- Вы научитесь расставлять приоритеты для элементов в макете.
- Вы научитесь создавать еще несколько различных форм с разными стилями.
- Вы научитесь продумывать будущие действия пользователя, так, чтобы все, что вы сделали, было удобным в использовании.
- Мы сделаем все элементы интерактивными.
- Вы научитесь делать базовую разметку.
- Вы научитесь создавать объединенную форму для email вместе с кнопкой.
- Вы научитесь корректировать фотографии под Ваш дизайн.
- И в конце мы подберем все цвета и приведем все в положенный вид.
- Вы научитесь создавать формы с текстом.
- Вы научитесь создавать стандартную форму со встроенными функциями.
- Вы научитесь сами создавать иконки.
- Вы научитесь добавлять градиент на фотографию.
- В конце мы выровняем все созданные нами формы и подведем общий итог.
- Научитесь делать акцент на объектах.
- Сможете сделать блок с буллитами.
- Поймете, как работать с векторными иконками.
- Научитесь правильно расставлять все элементы по макету.
- Вы научитесь работать с инструментом «кисть».
- Научитесь накладывать текст на объекты.
- Вы научитесь смягчать острые объекты.
- Научитесь работать с режимами наложения изображения.
- Изучите инструмент «Цветовой тон/Насыщенность».
- Поймете, как добавлять двойной градиент.
- Вы научитесь делать аккуратные ссылки.
- Сможете создать интерактивный слайдер.
- Поймете, как делать блоки «иконка/текст».
- Научитесь делать мягкие тени.
- Мы добавим другой градиент для фона.
- Вы научитесь быстро менять дизайн.
- Мы снова поработаем с режимом наложения.
- Научитесь добавлять тройной градиент.
- Мы сделаем все нужные элементы интерактивными.
- Вы научитесь создавать лаконичные заголовки.
- Вы научитесь работать с инструментом «Перо».
- Мы поговорим с Вами о размерах изображений в шапке.
- Вы научитесь работать со стилем слоя «Внутренняя тень».
- Вы научитесь добавлять фотографии, без потери их частей.
- Вы научитесь делать блок с контентом.
- Мы разберемся, как находить и адаптировать иконки под дизайн блога.
- Вы научитесь быстро работать с блоками и редактировать их.
- Вы научитесь делать красивые блоки на сайте.
- Поймете, как подбирать цвета к определенной фотографии.
- Вы научитесь расставлять акценты у блоков.
- Поймете, как работать с окном «символ».
- Сможете делать маленькие и удобные блоки со статьями.
- Научитесь создавать сдвоенную форму с кнопкой.
- Вспомните, как правильно находить и подбирать иконки для кнопок.
- Вы научитесь работать с инструментом «Рамка».
- Мы с Вами подберем иконки социальных сетей из одной группы.
- Вы научитесь выравнивать все блоки в футере.
- Вы научитесь делать интерактивную навигацию.
- Мы рассмотрим, как будут выглядеть все активные элементы на сайте.
- Мы сделаем базовую разметку для данного дизайна сайта.
- Вы научитесь создавать простенький логотип.
- Вы создадите форму поиска с полностью скругленными углами.
- Мы закрепим знания по непрозрачности слоев.
- Также мы сделаем лаконичное горизонтальное меню.
- Вы научитесь сочетать несколько шрифтов в одном дизайне.
- Мы поработаем с самим текстом, плюс добавим иконки.
- Создадим сдвоенную кнопку в двух вариантах.
- Вы научитесь сглаживать острые переходы у фотографий.
- Вы освоите работу с непрозрачностью слоя.
- Сможете создать интересные эффекты, используя стандартные варианты градиента.
- Научитесь работать со стилем слоя «Наложение градиента».
- В данном уроке я покажу Вам, как без подготовки сделать второй вариант дизайна для первого экрана. Мы с Вами разберем несколько методов и приемов.
- Вы научитесь правильно располагать фотографии в шапке.
- Вы научитесь высчитывать размеры каждого блока.
- Поймете, как работать во вкладке «Символ».
- Сможете создать эффект для текста, чтобы он читался с любым фоновым изображением.
- Научитесь прятать фотографии за объекты.
- Разберетесь, как работать с инструментом «Размытие по Гауссу».
- Овладеете стилем слоя «Градиент».
- Вы научитесь размечать небольшие блоки, чтобы вместить всю информацию.
- Более глубоко освоите работу с текстом.
- Вы научитесь быстро работать с имеющимися блоками и изменять их.
- Вы научитесь визуально разделять блоки фоновым изображением.
- Вы научитесь делать 3D-эффект для фотографий в виде галереи.
- Вы научитесь размечать блоки футера.
- Найдете круглые иконки соцсетей и адаптируете их под дизайн сайта.
- Вы научитесь делать интерактивный поиск.
- Сможете сделать интерактивную кнопку.
- Вы сделаете двойную интерактивную кнопку.
- Поймете, как делать интерактивное меню.
- Вы научитесь делать интерактивный блок с сериалами.
- Создадите интерактивные вкладки.
- Вы научитесь делать интерактивный футер.
-
Смотреть видео:
Веб-дизайнер – профессионал. Создание востребованных макетов. О курсе. (Даниил Волосатов - Webformyself)
-
ВСЕ МАТЕРИАЛЫ АВТОРА
Часть 1. Введение в веб-дизайн. Инструменты, техники, вдохновение
В первой части курса Вы узнаете об инструментах Фотошопа, техниках веб-дизайна и о том, как найти вдохновение. Перед тем как приступить к практической части, нужно знать базовые принципы веб-дизайна. В данном разделе собрана вся суть того, что должен знать начинающий дизайнер, и ничего лишнего.
Часть 1. Урок 1. Введение
Это ознакомительный урок, в котором я бы хотел дать напутствие по изучению данного курса.
Часть 1. Урок 2. Дизайн сайта по шагам. Поэтапный разбор.
Создание дизайна сайта можно разбить на 6 частей. В этом уроке мы разберем каждую из них. После изучения данного урока, придерживаясь этих правил, Вам гораздо легче будет даваться создание дизайна сайта.
Часть 1. Урок 3. Цвета в веб-дизайне
В уроке Вы узнаете, какие цвета использовать для фона и разных элементов сайта, чтобы вызвать те или иные ощущения, и как правильно сочетать цвета в веб-дизайне. Вы поймете, что такое резонанс. Узнаете значения цветов: красный, оранжевый, желтый, зеленый, синий, фиолетовый, черный и белый. Также узнаете о самом простом способе, как подобрать цвета для сайта. Кроме этого, Вы узнаете о методах «Двойная комплементарная система» и «Аналоги».
Часть 1. Урок 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. Кнопки
В этом уроке мы разберем виды кнопок.
Часть 3. Урок 2. Вертикальное меню
В данном уроке мы нарисуем вертикальное меню двух видов, скрытое и развернутое.
Часть 3. Урок 3. Горизонтальное меню
В этом уроке мы нарисуем горизонтальное меню.
Часть 3. Урок 4. Навигация по сайту
В данном уроке мы с Вами создадим многофункциональный дизайн навигации с удобным использованием.
Часть 3. Урок 5. Вход
В данном уроке показано, как создавать стильную всплывающую форму входа.
Часть 3. Урок 6. Регистрация
В этом уроке мы нарисуем очень красивую и большую всплывающую форму регистрации.
Часть 3. Урок 7. Блок акция
Мы сделаем интересный дизайн в форме билетика.
Часть 3. Урок 8. Всплывающее окно с товаром
В данном уроке мы создадим всплывающую форму с предпросмотром товара.
Часть 3. Урок 9. Вплывающее окно формы подписки
В данном уроке мы снова затронем темы всплывающих окон, а точнее, окно с формой подписки.
Часть 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. Подборки
Предпоследний блок у нас будет подборкой актеров.
Часть 6. Урок 8. Футер
Нам осталось сделать блок с футером.
Часть 6. Урок 9. Интерактивные элементы
В заключительном уроке данной части курса мы сделаем интерактивные элементы.