Уроки Веб и приложения Даниил Волосатов 23 ноября 2017

Создаем дизайн окна Авторизация для сайта Фотошоп-мастер

Сложность урока: Средний

Здравствуйте!

Представляем вашему вниманию Даниила Волосатова – нового автора по видеоурокам, которые посвящены web-дизайну.

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

В процессе урока автор расскажет:

  • об основных этапах работы при создании web-дизайна;
  • почему важно структурировать слои и группы на панели слоёв;
  • как выполнить дизайн формы в едином стиле;
  • как сделать точное выравнивание всех элементов;
  • как улучшить их визуальное восприятие.

*Если нет звука – установите в настройках плеера качество 1080p
Длительность - 22 мин 46 сек, формат MP4

Скачать архив с материалами к уроку

Предложить тему для нового урока

Источник: creativo.one

22 тыс. 82
Печать Жалоба

Комментарии 82

Форма регистрации при действии и в неактивном состоянии

1. Форма-действие (нажатие на кнопки, галочки, наведение курсора)
2. Дизайн формы авторизации по уроку

Отличный результат!

На свежую голову посмотрела, как можно улучшить эту форму авторизации:

1. Фотошоп мастер написать также, как на лого.
2. Вместо Email или имя написать Логин
3. Логин, Пароль и Запомнить пароль выставить непрозрачность текста на 70%
4. Забыли? сделать подчеркнутым, это же ссылка.
5. К Или дописать войти через соцсети (а то можно подумать, что это переход в сообщества ФМ в соцсетях)
6. Соответственно отпадет необходимость в прямых линиях по сторонам от Или
7. Иконки соцсетей уменьшить.

Вот такой вот апгрейд этой формы. Как вам?

Урок изучен и отработан на практике. Моя форма авторизации на сайте.

Моя работа. Спасибо за урок!

Спасибо!) Вроде получилось)

Спасибо за урок!

Спасибо за урок!

спасибо за урок , Ждем следующих

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

Спасибо за урок.

Вот что у меня получилось

И еще один недостаток и шушэственнай: вы забываетесь, что живете в РФ, а не в Англии! Все ПО нужно давно бы перевести на РЦССКИЙ язык. Не все сегодня переродились в англичан...

а по каким критериям высталялись размеры при выравнивании? есть какие то четкие правила или это ваше личное, основанное на опыте?

Опираясь на критерии, указанные в видео, сделал окно регистрации.
Домашнее задание, так сказать :з

Опираясь на указанные в видео критерии, сделал окно регистрации на сайте.
Домашнее задание, так сказать :з

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

Недостатки (ИМХО):
Концепция данного проекта - показывая любой материал, мягко пояснять новичкам, а опытным напоминать функционал программы. То бишь, хотя бы единожды в каждом ролике озвучить каждую исполняемую команду (грубо говоря - "на что нажимать?"). Для продвинутых пользователей ролик хорош, но для общего контингента не совсем познавательно, например, следить за "самостоятельно" выстраивающимися в гармоничный ряд заготовками, и появляющимися из ниоткуда показателями расстояний. Более того, самому автору важно помнить, какие новшества появлялись в ФШ после шестёрки, так как многие пользователи сидят ещё на ней, и соответственно упоминать в своих повествованиях, что какая-либо функция появилась в "такой-то" версии ФШ и у пользователей с более ранними версиями будет недоступна, или отображаться "так то".
Спасибо автору за работу и позитивного опыта в новой сфере преподавания!)

Мне все понравилось!

Спасибо за классный урок :) Урок очень понравился, всё очень четко и ясно! С нетерпением жду следующих уроков от Даниила!

Еще 22
Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

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

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

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

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

Комментарий

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

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

Исходник:

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

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

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

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

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

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

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

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

Комментарии к работе будут отключены, на их месте будет выведена реклама.

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


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

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее