Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

Экспресс-курс Опубликован: 26 июля 2019 года

Создаём 10 элементов дизайна для сайта

Смотреть трейлер Открыть доступ
Создаём 10 элементов дизайна для сайта
Создаём 10 элементов дизайна для сайта
Создаём 10 элементов дизайна для сайта
Создаём 10 элементов дизайна для сайта
Создаём 10 элементов дизайна для сайта
Экспресс-курс

Создаём 10 элементов дизайна для сайта

В этом экспресс-курсе Даниил Волосатов покажет вам технику создания десяти наиболее популярных элементов для дизайна сайта. Этот пакет уроков предоставлен вам из основного курса по «Основам коммерческого веб-дизайна» и даст хорошее понимание этой темы. Узнайте методы создания веб элементов и если эта тема вас серьёзно заинтересует, то вы можете углубиться в её изучение в большом полноценном курсе на обучающей онлайн-платформе Фотошоп-мастер.

Количество уроков Уроков: 11
Время урока Длительность: 03 ч. 22 мин
Исходники Исходников: 10
Разрешение Разрешение: 1280 x 720
Версия Версия PS: СС 2019 (ru)

Описание экспресс-курса

Что такое веб-дизайн?

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

Разделение и акценты

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

Выравнивание

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

Копирование элементов

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

Хотите углубиться в тему веб-дизайна?

Этот экспресс-курс является практическим модулем из большого курса от Даниила Волосатова «Основы коммерческого веб-дизайна» , который изучают ученики на платформе Фотошоп-мастер. Если эта тема вам интересна, и вы чувствуете и понимаете её важность для своего развития и заработка, мы приглашаем вас его изучить и полностью освоить эту тему.

Содержание экспресс-курса

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

Основные моменты из урока:

  • Как включить видимость направляющих;
  • Какие инструменты использовать для создания колонок;
  • Как автоматизировать процесс выравнивания колонок;
  • Правильные настройки для создания веб-документа;
  • Построение сетки из направляющих.

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

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

Что изучим в уроке:

  • Используем колонки для выбора размера элемента;
  • Как спрятать направляющие;
  • Как оптимизировать работу со шрифтами;
  • Удобный способ точного выравнивания элементов;
  • Как уменьшать дополнительные элементы, сохраняя пропорции;
  • Организация слоёв для удобства работы;
  • Как автоматически выравнивать элементы относительно друг друга;
  • Как расставить акценты на блоках;
  • Массово добавляем цвет элементам.

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

Из урока вы узнаете:

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

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

Основные моменты урока:

  • Как делить дизайн на блоки;
  • Как увеличить монтажную область;
  • Работаем с настройками шрифтов;
  • Используем обтравочную маску;
  • Как оптимизировать выравнивание;
  • Как сделать элементы слайдера;
  • Добавляем легко и быстро цвета.

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

Что изучим:

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

В этом уроке мы с вами перерисуем всплывающее окно с плейлистом из соцсети Вконтакте. Разберём, как делятся элементы дизайна на блоки. Также вы узнаете, почему и как важно делать визуальные разделения, чтобы не усложнять дизайн. Ещё вы узнаете работу с шаблонами и смарт-объектами для удобства и скорости разработки при создании веб-дизайна.

В ходе урока изучим:

  • Как выделять важность текстовой информации;
  • Создание кнопки;
  • Как визуально разделить блоки;
  • Используем шаблон для создания однотипных элементов;
  • Удобство применения смарт-объектов.

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

Основные моменты урока:

  • Как сделать шаблон кнопки, используя стили слоя;
  • Быстрое выравнивание и копирование элементов;
  • Как создать векторную кривую графика;
  • Добавляем визуальные эффекты элементам дизайна.

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

Важные моменты из урока:

  • Почему важно и как визуально разделять информацию;
  • Простой приём разделения блоков;
  • Добавляем визуальные эффекты посредством стилей слоя.

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

Из урока вы узнаете:

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

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

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

Этот урок научит вас таким моментам:

  • Работа с колоночной сеткой и направляющими для выбора размера формы;
  • Использование векторных фигур для создания блоков и элементов;
  • Как эффективно работать с текстовыми слоями;
  • Важность выравнивания информации для её лёгкого восприятия;
  • Как графически расставлять акценты на выделенных деталях;
  • Работа с быстрыми направляющими;
  • Способы как быстрого так и точного отделения объектов от фона;
  • Применение и редактирование градиентов с помощью стилей слоя.

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

Автор экспресс-курса

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

Ответы на частые вопросы

Такой возможности нет. Смотреть уроки и экспресс-курсы можно только на сайте.

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

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

Сертификаты можно получить за прохождение наших больших курсов с домашними заданиями и проверкой наставником/куратором. За прохождение уроков и экспресс-курсов премиум-раздела сертификаты не предусмотрены.

Да, вы можете смотреть уроки и экспресс-курсы с любого устройства (смартфон, планшет, ноутбук, ПК).

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

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

Популярные премиум-уроки

Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Пожаловаться Удалить

Оставить комментарий

(до 5 шт jpg, png, gif)
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Добавить комментарий / работу
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.