Объявление:
Наши контакты: +7 (928) 029 69 59

Создание и продвижение сайтов в Пятигорске, Черкесске и Ставрополе WEB студия DigitalART предоставляет услуги по разработке и созданию сайтов в Черкесске, Пятигорске и Ставрополе. Так же Мы предоставляем услуги по поисковой оптимизации и продвижению сайтов Черкесска, Ставрополя и Пятигорска в поисковых системах. Более подробные условия заказа создания или продвижения сайта в Ставрополе, Пятигорске или Черкесске, Вы можете узнать по телефонам +7 (928) 029 69 59 Разработка и раскрутка сайтов в Черкесске, Ставрополе и Пятигорске 

Последние работы по созданию и продвижению сайтов нашей WEB студии в Ставрополе, Черкесске и Пятигорске

Дизайн-студия DigitalART » Photoshop,WEB графика » Как нарисовать форму входа в Photoshop
06.01.2012

Как нарисовать форму входа в Photoshop

Как создать форму входа в Photoshop

Как нарисовать форму авторизации в Photoshop. В данной статье рассмотрен один из способов создания логин панели в Photoshop.

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

Если у Вас появятся какие-то вопросы или пожелания по созданию формы авторизации, Вы можете оставить их в комментариях в конце статьи.

Результат, полученный в конце статьи:

Готовый шаблон формы входа

Все исходные материалы и PSD шаблон готовой формы авторизации Вы сможете скачать в конце статьи.

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

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

Шаг 1 - Создаем новый документ в Photoshop

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

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

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

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

Шаг 2 - Выставляем направляющие
Скачать PSD шаблон готовой формы авторизации

Шаг 3. Фон.

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

Шаг 3 - Фон

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

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

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

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

Шаг 4.1 - Основа формы авторизации
Шаг 4.2 - Основа формы авторизации

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

Шаг 4.3 - Основа формы авторизации

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

Шаг 4.4 - Основа формы авторизации

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

Шаг 4.5 - Основа формы авторизации

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

Шаг 4.6 - Основа формы авторизации

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

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

Шаг 4.7 - Основа формы авторизации

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

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

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

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

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

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

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

Шаг 5.1 - Поля ввода формы авторизации

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

Шаг 5.2 - Поля ввода формы авторизации

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

Шаг 5.3 - Поля ввода формы авторизации

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

Шаг 5.4 - Поля ввода формы авторизации

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

Шаг 5.5 - Поля ввода формы авторизации

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

Шаг 5.6 - Поля ввода формы авторизации

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

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

Шаг 6 - Кнопка Войти

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

Шаг 6.1 - Кнопка Войти
Шаг 6.2 - Кнопка Войти
Шаг 6.3 - Кнопка Войти

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

Шаг 6.4 - Кнопка Войти

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

Шаг 6.5 - Кнопка Войти

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

Готовый шаблон формы входа
Скачать PSD шаблон готовой формы авторизации

Прокомментировать статью
Дата добавления: 06.01.2012
Эта запись опубликована 06.01.2012 в 13:23, автором DigitalART, и добавлена в рубрику Photoshop, WEB графика. Вы можете подписаться на обновления данной статьи по RSS 2.0

Об авторе

Студия WEB-Дизайна DigitalART предоставляет услуги по созданию и продвижению сайтов в поисковых системах в городе Черкесске и Карачаево-Черкесской Республике, а также в городе Ставрополе и Ставропольском крае.

WEB студия DigigtalART в интернете

Один комментарий на «Как нарисовать форму входа в Photoshop» Оставить свой

  1. Namari says:

    Never would have thunk I would find this so idnispsenalbe.

Вверх