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

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

Оглавление:
  1. Сбалансированная форма регистрации
  2. Окончательный результат:
  3. Шаг 1
  4. Шаг 2
  5. Шаг 3
  6. Шаг 4
  7. Шаг 5
  8. Шаг 6
  9. Шаг 7
  10. Шаг 8
  11. Шаг 9
  12. Шаг 10
  13. Шаг 11
  14. Шаг 12
  15. Шаг 13
  16. Шаг 14
  17. Шаг 15
  18. Шаг 16
  19. Шаг 17
  20. Шаг 18
  21. Шаг 19
  22. Шаг 20
  23. Шаг 21
  24. Шаг 22
  25. Шаг 23
  26. Шаг 24
  27. Шаг 25

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627 http://samartsy.ru/

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

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

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

Ресурсы:

Полотно модели, Дерево 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». Использовать параметры, указанные ниже.

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

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

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

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

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)