Читать


Главная » 2014 » Декабрь » 1 » Урок 9. Рисуем форму авторизации
04:09
Урок 9. Рисуем форму авторизации

В новом уроке нарисуем простую форму авторизации. На данном проекте эта форма имеет стандартный вид, но в уроке нарисуем другую - нестандартную - форму. Фоном нам послужит как раз скрин главной страницы.

Форму я задумал в виде выплывающего окошка. Чтобы она не сливалась и выделялась на фоне сайта, предположим, что сайт затемняется при всплывании окна. Для этого просто создадим новый слой (Ctrl+N) и зальём его чёрным цветом, а прозрачность слою выставим 20%.
 

Урок 9. Рисуем форму авторизации


Затем рисуем непосредственно подложку окна. Инструментом "Прямоугольник со скруглёнными углами" рисуем прямоугольник с радиусом скругления углов - 5 пикс.

Урок 9. Рисуем форму авторизации


Сразу придадим небольшого объёма подложке - зайдём в стили слоя (двойной клик по слою с прямоугольником) и выберем вкладку "Тень" со следующими настройками:

Урок 9. Рисуем форму авторизации


Поля для ввода логина и пароля нарисуем той же фигурой только с меньшим радиусом скругления углов. Цвет для неё выберем: #f4f4f4, а настройки стилей слоя как на изображении ниже:

Урок 9. Рисуем форму авторизации


У нас получились хорошие поля для ввода:

Урок 9. Рисуем форму авторизации


Но для привлекательности, нужно добавить мелочей. А именно - иконки: простые, едва заметные:

Урок 9. Рисуем форму авторизации


Теперь добавим необходимые ссылки и кнопку "войти":

Урок 9. Рисуем форму авторизации


Кнопку, пожалуй, сделаем объёмной. В предыдущих уроках было уже не мало хороших примеров для кнопок, так что останавливаться на этом не будем. Уточню только что в стилях слоя я "поигрался" с настройками 3-х вкладок: Обводка, Наложение градиента, Внутренняя обводка и Тень. (Их настройки можете посмотреть, скачав исходник - ссылка внизу).

Урок 9. Рисуем форму авторизации


И ещё один нюанс. Во всплывающих окнах всегда должна быть кнопка закрытия. Обычно она располагается справа сверху. Теми же фигурами ("Эллипс" и "Линия"), нарисуем эту самую кнопку:

Урок 9. Рисуем форму авторизации
 
И как обычно, прикладываю исходник запакованный в архив весом всего 58 КБ
Скачать


Категория: Уроки | Просмотров: 378 | Добавил: M-Wizard | Теги: урок, фотошоп, форма авторизации, Веб-дизайн | Рейтинг: 0.0/0

Всего комментариев: 0
avatar


НЕКОТОРЫЕ ПУБЛИКАЦИИ БЛОГА