Сбалансированная форма регистрации

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

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

Сбалансированная форма регистрации

Сегодня мы создадим форму регистрации, и сбалансируем проект, который одновременно простым, привлекательным и стильным. Итак, давайте начнем!

Ресурсы:

Полотно модели, Дерево Patterns

к меню ↑

Окончательный результат:

Форма регистрации для сайта
к меню ↑

Шаг 1

Откройте Photoshop и создайте новый файл с шириной 575px и высотой 600px.

Форма регистрации для сайта
к меню ↑

Шаг 2

Теперь создайте новый слой и заполните его цветом # 2d3335.

Форма регистрации для сайта
к меню ↑

Шаг 3

Чтобы добавить хороший фон, нажмите на кнопку “Layer Style” > “Pattern Overlay” и добавить шаблон.

Форма регистрации для сайта
к меню ↑

Шаг 4

Для базовой формы или фона, создайте прямоугольник, используя цвет # d7d7d7.

Форма регистрации для сайта
к меню ↑

Шаг 5

Теперь, нажмите на стили слоя и добавить шаблон, Satin, Inner Shadow и Stroke.

Форма регистрации для сайта
Форма регистрации для сайта
Форма регистрации для сайта

Добавить в 1px с помощью цвета # bfbfbf.

Форма регистрации для сайта
к меню ↑

Шаг 6

Для заголовка, выберите тип инструмента и добавить нужный текст. Затем нажмите на кнопку “Layer Styles” > “Drop Shadow.”.

Форма регистрации для сайта
к меню ↑

Шаг 7

Теперь мы создадим две строчки. Для первой строки, нарисуйте линию в 1px, используя цвет # bcbcbc.

Форма регистрации для сайта

Теперь, нажмите на кнопку “Layer Styles” > “Drop Shadow”, чтобы добавить тени к линии. Используйте следующие параметры.

Форма регистрации для сайта
к меню ↑

Шаг 8

Щелкните правой кнопкой мыши на новом слое линии и выберите пункт «Rasterize Layer». Затем выберите Eraser Tool с мягкой круглой кистью и используйте её по бокам, чтобы добиться эффекта показанного ниже.

Форма регистрации для сайта
к меню ↑

Шаг 9

Повторите тот же процесс, описанный выше, чтобы создать вторую линию.

Форма регистрации для сайта
к меню ↑

Шаг 10

Теперь, давайте начнем с наших полей регистрационной формы. Выберите инструмент прямоугольник и создайте прямоугольную полоску цветом # 9e0039.

Форма регистрации для сайта
к меню ↑

Шаг 11

Нажмите на кнопку “Layer Styles” и добавить Stroke, Inner shadow, и Drop Shadow используя следующие параметры.

Форма регистрации для сайта
Форма регистрации для сайта
Форма регистрации для сайта
к меню ↑

Шаг 12

Теперь добавим в поля формы текст, используя цвет # efefef. Затем нажмите на кнопку “Layer Styles” > “Drop Shadow” и используйте настройки, показанные ниже.

Форма регистрации для сайта
к меню ↑

Шаг 13

Повторите тот же процесс для создания дополнительных полей формы.

Форма регистрации для сайта
к меню ↑

Шаг 14

Теперь, выберите инструмент прямоугольника снова и создайте прямоугольник внизу, используя цвет # 464646.

Форма регистрации для сайта
к меню ↑

Шаг 15

Нажмите на кнопку “Layer Styles” и добавить Stroke, Inner Shadow, and Drop shadow с помощью следующих значений.

Форма регистрации для сайта
Форма регистрации для сайта
Форма регистрации для сайта
к меню ↑

Шаг 16

Добавить текст с очень небольшой тенью.

Форма регистрации для сайта
к меню ↑

Шаг 17

Выберите инструмент прямоугольник и создайте маленький прямоугольник, используя цвет # 464646. Затем нажмите на «Layer Styles» и добавить Stroke и Inner Shadow к прямоугольнику. Используйте следующие параметры.

Форма регистрации для сайта
Форма регистрации для сайта
к меню ↑

Шаг 18

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

Форма регистрации для сайта
к меню ↑

Шаг 19

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

Форма регистрации для сайта
к меню ↑

Шаг 20

Выбрать группу всех слоёв и нажмите на кнопку «Edit»> «Free Transform» и немного наклонить. Не наклоняйте слишком много, а то поля формы будет выглядеть странно.

Форма регистрации для сайта
к меню ↑

Шаг 21

Теперь давайте начнем с гвоздя и веревки. Для отверстий, создайте новый слой, выберите круглую кисть, и использовать его размер 16px и цвет # 424242.

Форма регистрации для сайта
к меню ↑

Шаг 22

Нажмите на кнопку “Layer Styles” > “Inner Shadow” и примените следующие настройки.

Форма регистрации для сайта
к меню ↑

Шаг 23

Уменьшите размер кисти на 10px и создайте наклонную линию. Затем нажмите на «Layer Styles» и добавить «Bevel & Emboss» для ткани фона. Используйте настройки ниже.

Форма регистрации для сайта
Форма регистрации для сайта

Повторите тот же процесс, чтобы создать другую сторону.

Форма регистрации для сайта
к меню ↑

Шаг 24

Для гвоздей, выберите инструмент ellipse и создайте небольшую круглую форму. Затем нажмите на «Layer Styles» и добавим Stroke, Gradient, и Drop Shadow для формы, используя следующие значения.

Форма регистрации для сайта
Форма регистрации для сайта
Форма регистрации для сайта
к меню ↑

Шаг 25

Для Drop Shadow, создайте новый слой, выберите инструмент Polygonal Lasso, создайте форму, близкую к нашей форме, и залейте её цветом # 000000.

Форма регистрации для сайта

Теперь, нажмите на кнопку «Filter»> «Blur»> «Gaussian Blur». Использовать параметры, указанные ниже.

Форма регистрации для сайта

Всё! Форма регистрации готова.

Форма регистрации для сайта

Надеюсь, что вы, без особого труда сделали эту форму. Берегите себя!