Читать

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

01.12.2014 / Уроки

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

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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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


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

В новой части обзора интерактивного проекта "Поттермор" я рад сообщить, что стала доступна пятая книга «Гарри Поттер и Орден Феникса»! Уже можно насладиться первыми красочными главами...


01.12.2014 / Любопытное

9 анимационных фильмов для всей семьи

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


08.03.2015 / Кино

Вновь немного вдохновляющего арта с проекта dribbble! Плоский стиль сейчас на пике популярности. Ведь он несёт собой не только простоту и лаконичность, но и дарит необычный взгляд на обычные вещи.


31.05.2016 / Арт

И вновь фантастические пейзажи! На этот раз природы в работах больше, чем фантастики! Я подобрал 12 работ талантливого развивающегося немецкого художника с ником FrankAtt с проекта deviantart.


22.02.2016 / Арт