Как создать форму входа (авторизации) в Photoshop | Дизайн-студия DigitalART

Шаг 4. основа формы авторизации.

Создадим новую фигуру с помощью инструмента «Прямоугольник со скругленными углами» (U) белого цвета (#FFFFFF) и с радиусом углов 5px, как показано на рисунке ниже:

Зададим стили для данной фигуры – правый клик мышью на только что созданной фигуре и выбираем пункт параметры наложения и выставляем стили как показано на изображениях:

И установим заливку фигуры на 35%

Создадим еще одну фигуру серого цвета (#E8EBF2) с радиусом углов 5px, как показано на рисунке:

Теперь давайте создадим копию этого слоя и применим к нему фильтр (Фильтр > Шум > Добавить шум…) с параметрами как показано на рисунке:

Создадим еще одну копию этого слоя и выставим его заливку на 0%, и применим следующие параметры наложения:

Накладываемый на слой паттерн (узор) Вы сможете найти в исходных материалах в конце статьи.

Установим прозрачность этого слоя на 3%:

Apple login form

А какая форма понравилась вам?

Шаг 1. создаем новый документ в photoshop.

Давайте начнем и создадим в Photoshop новый документ (CTRL N) размерами 600px на 420px и белым фоном.

Шаг 2. выставляем направляющие.

Для удобства добавим направляющие линии (Просмотр > Новая направляющая…).

Вертикальные направляющие: 90px, 100px, 500px и 510px;

Горизонтальные направляющие: 70px, 80px, 340px и 350px;

Шаг 3. фон.

Теперь давайте вставим фоновое изображение. Мы использовали следующее:

Шаг 5. поля ввода формы авторизации.

Добавим новые направляющие по тому же принципу, как было сказано выше в статье.

Вертикальные направляющие: 124px и 480px;

Горизонтальные направляющие: 100px и 140px;

Создадим новую фигуру используя инструмент «Прямоугольник со скругленными углами» (U) белого цвета (#FFFFFF) с радиусом углов 5px, как показано на изображении:

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

Создадим дубликат данного слоя (CTRL J) и расположим его на 20px ниже, как показано на изображении:

Добавим в первое поле текст «E-mail:», а во второе текст «Пароль:». Используйте шрифт Tahoma Bold размером 16 пт и цветом #7EA431. Результат показан на рисунке ниже:

Теперь выберем инструмент «Эллипс» (U) и, зажав «SHIFT» на клавиатуре создадим белую (#FFFFFF) окружность размером 12px на 12px. И применим для нее такие же стили, как и для полей ввода формы. И расположим ее как показано на рисунке:

Добавим надписи «Запомнить меня» и «Забыли пароль?». Используйте тот же самый шрифт Tahoma Bold размером 4 пт, цветом #7EA431. Используйте инструмент линия (U) толщиной 2px и цветом #7EA431, для добавления линии под надписью «Забыли пароль?».

В результате должно получиться:

Шаг 6. кнопка «войти».

Добавим две новые горизонтальные направляющие 260px и 320px (Просмотр > Новая направляющая…). Создадим новую фигуру с помощью инструмента «Прямоугольник со скругленными углами» с радиусом углов 5px, как показано на рисунке:

Применим к данной фигуре следующие стили:

Результат показан на изображении:

Используя шрифт Verdana размером 30 пт, белого (#FFFFFF) цвета, добавим текст «Войти». Применим к тексту следующие стили:

PSD шаблон формы авторизации готов.

Похожее:  Как реанимировать Apple Pay в условиях санкций (инструкция для ЛЛ приложена) | Пикабу

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *