Дополнения

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

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

Экспресс-курс Опубликован: 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+ лет
{{work.views}} Жалоба

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

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

Жалоба

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

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

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:


Название:
{{name}}
Описание:

{{text}}

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Вашу работу разберет один из экспертов проекта «Фотошоп-мастер». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

Пункт «18+» допустимо ставить только для работ, действительно содержащих элементы, которые не должны видеть несовершеннолетние: обнаженка, сцены жестокости, и т.д. Запрещается ставить такую метку на обычные работы. За подобное поведение у пользователя будет блокироваться возможность добавления новых работ. Все понятно, больше не показывать

После добавления работы:

Запланировать публикацию

Запланировать

Правила загрузки работ на «Фотошоп-Мастер»

  • 1. На сайте запрещается размещать изображения, которые содержат нецензурную лексику, угрозы, оскорбляет, унижает чье-либо достоинство, а также явно или косвенно нарушает законодательство Российской Федерации.

  • 2. Сайт photoshop-master.ru приветствует соблюдение авторских прав. В случае возникновения споров или разногласий Администрация сайта приложит все усилия для разрешения сложившейся ситуации.

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

Подробная информация о правилах публикации https://photoshop-master.ru/blog/post/rules