nachodki.ru интернет-магазин
Видео урок

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

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

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

Смотреть видео:


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

Содержание:

 

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

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

  • Вы научитесь делать интерактивный поиск.
  • Сможете сделать интерактивную кнопку.
  • Вы сделаете двойную интерактивную кнопку.
  • Поймете, как делать интерактивное меню.
  • Вы научитесь делать интерактивный блок с сериалами.
  • Создадите интерактивные вкладки.
  • Вы научитесь делать интерактивный футер.
Страница курса - Веб-дизайнер – профессионал. Создание востребованных макетов. (Даниил Волосатов - Webformyself)
Рейтинг@Mail.ru   Яндекс.Метрика
2671093515531984