Получить новую статью

Вставьте здесь свой адрес:

Delivered by FeedBurner

Подписаться на статьи рубрики
Подписаться на статьи рубрики
Подписаться на статьи рубрики
БЫТОВАЯ ТЕХНИКА
новинки, содержание, ремонт
Подписаться на статьи рубрики
СЕРВИСЫ ОНЛАЙН
описание, рекомендации
Подписаться на статьи рубрики
ДИЗАЙН ВЕБ САЙТОВ
советы, показ, нюансы

users online

Дизайн формы регистрации с прозрачным фоном от А до Я

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

Основная цель статьи показать использование возможностей программы ФШ CS 6 при создании дизайна формы регистрации с прозрачным фоном инструментами: фигура, выделение, градиент, заливка, вырезка, фильтр, кисть.
Пользование параметрами:
• размытие по Гауссу
• режимы наложения.
• непрозрачность.
• копирование (дублирование) слоёв.
• стили, тиснение текста и формы.
• сочетаемость цвета фона и фигуры с текстом.

Что касается функции размытие по Гауссу, учёного, в честь которого назван закон (функция) нормального распределения, (о функции на сайте  здесь ), то она даёт возможность особым образом совершать переход тональности цвета не равномерно, а по графику «колокола». Проще говоря, чем ближе к началу размытия цвета, тем он сильнее, а с увеличением расстояния быстро убывает на малом отрезке. А на большом отрезке, даже в начале размытия цвет не яркий и в дальнейшем убывает слабо.
Ниже представлен шаблон, к которому мы придём в конце статьи.  Работаем в программе Фотошоп CS 6.

Дизайн формы регистрации с прозрачным фоном от А до Я
Откроем заранее подготовленный фон размером 1024 на 625 рх. Если подходящего фона под рукой нет, просто создадим чистый файл с белым фоном и покрываем через стили узором. Делаем 2 щелчка ЛКМ по слою фона, щелчок ЛКМ по строке — наложить узор, выбираем узор и ок. Фон готов.

фон
Создадим папку на панели слоёв и назовём её Прозрачно – глянцевая форма. И поместим в неё наш фон. Для выразительности и концентрации внимания создадим посередине светлую подсветку, а по краям и углам, затемнение.

Создаём сверху новый слой и на нём делаем подсветку.
Берём большую кисть р-р 600 -700 рх, Ж= 0, цвет белый, непрозрачность 100% и делаем 2 щелчка посередине фона. Переходим на режимы в верху панели слоёв – мягкий свет. Образуется плавная белая подсветка в центе фона. Или выбрать режим перекрытие и задать непрозрачность 70%.

делаем засветку
Создаём сверху новый слой и на нём делаем затемнение. Берём снова кисть, но уже чёрного цвета, р-р 60 рх, Ж = 0 и по краям делаем затемнение, как на рисунке ниже.

Затемнение по углам
Размываем — фильтр, размытие, размытие по Гауссу и ставим 56 рх или на ваше усмотрение, ок.Размытие по Гауссу
Включаем режим мягкий свет или перекрытие, кому что нравиться.
фон с засветкой
В результате получаем фон с акцентом просмотра в средней его части и лёгким затемнением по углах. Создадим ещё одну папку внутри папки прозрачно — глянцевая форма и назовём её – Каркас формы.
Создаём новый слой и на нём рисуем фигуру – прямоугольник со скруглёнными краями, прототип формы. 2 щелчка по раб. столу ФШ при активированном инструменте – прямоугольник со скруглёнными углами, появляется всплывающее окно – Создать прямоуг. со скругл. углами. Проставляем ш = 300 рх, в = 400 рх, R = 10 px. и ок.

рисуем фигуру
Зальём нашу фигуру цветом немного темнее, какого либо элемента фона. Выберем синий цвет.

Синий цвет
Затем, на новом слое, рисуем точно такую же фигуру внутри первой фигуры с параметрами: ш = 280 рх, в = 380 рх, R = 10px, цвет светлее фона первой фигуры.

Прямоугольник с закруглёнными углами
Выравниваем  фигуру равно удалённо от всех сторон.  Это было  сказано  в  параметрах второй фигуры.
яррко- синий цвет
Накладываем градиент на внутреннюю фигуру от тёмно – от синего  к ярко – синему.

Накладываем градиент
И уменьшаем непрозрачность до 30%.  Градиент временно становиться не видим. Далее необходимо вырезать внутреннюю часть первой формы. Для этого растрируем её слой.  Щелчок  ПКМ по слою и выбрать – растрировать слой.
Не переходя никуда зажать Ctrl и щелчок по иконке внутренней фигуры,  она выделиться.

растрировать слой.

Далее редактирование, вырезать и внутренний слой первой формы уходит.Теперь мы видим через градиент с непрозрачностью 30%  главный фон.  Увеличим до 40%  непрозрачность вырезанного места.

вырезать
Создаём внутреннюю тень. На слое первой фигуры включаем стиль – внутренняя тень. Параметры: Смещение – 2 рх, размер – 4 рх, непрозрачность – 100%, глобальное освещение 90°, чек бокс снять. Шум – 0. Ок. Тень падает сверху. Эффект заметен снизу и сверху. С боков эффект тени мало заметен. Появилась некоторая вдавленность по первой фигуре.

Создаём тиснение формы.
Дублируем первую фигуру (удерживая Alt , курсором и ЛКМ тянем слой вниз до появления на границе слоёв двух полосок и отпускаем) Удаляем стиль слоя копии (нажать ЛКМ на знак fx и переместить в корзину ниже на панели слоёв или ПКМ и нажать – очистить стиль слоя.) Вызываем уровни Ctrl+ L и двигаем движок (слева направо до конца, то есть убираем чёрный цвет). Инструментом перемещение, опускаем на 1 рх вниз (стрелка на клавиатуре). Появляется снизу и сверху резкая видимость выдавленности. Заходим — фильтр, размытие, размытие по Гауссу , ставим 0,6 рх и Ок. Тиснение переходит в плавную форму явно снизу и сверху, немного по бокам.
Если эффект слабый, дублируем слой, размываем до 1,5 рх и выставляем режим — мягкий свет.
Создаём тиснение формы.
Создаём глянец (блик на второй фигуре.) Создаём новый слой сверху второй фигуры. Инструментом выделение создаём эллипс как показано на рисунке.
Создаём глянец- блик
Инструментом градиент рисуем градиент от белого к прозрачному в выделенной области как на рисунке. Снимаем выделение эллипсом.

рисуем градиент
Зажимаем клавишу Ktrl и щелчок ЛКМ по иконке фигуры. Происходит выделение прозрачной части,

выделение прозрачной части
далее идём в — выделение, инверсия, а в редактировании нажать вырезать и остаётся только блик в форме.

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

Уменьшаем прозрачность, мягкий свет
Пишем текст Вход на сайт Шрифт PT Sans, bold, р-р 24 рх, цвет рамки формы
Делаем тиснение текста. Дублируем слой текста, заливаем белым цветом. Смещаем вниз на 1 рх и вправо на 1 рх, а затем слой перемещаем ниже основного текстового слоя. Регулируем непрозрачность до 70%, по необходимости, избавляясь от резкости тиснения.

Пишем текст Вход
Рисуем текстовые поля размером 200 на 40 рх. Как это рассчитать? От ширины первой фигуры 300 рх, — ( 10 рх. + 10 рх.) рамка – (40 рх +40 рх) отступы с боков и остаётся 200 рх. Инструментом фигура рисуем прямоугольник с параметрами указанными выше и выравниваем точно по отступам 40 рх справа и слева. Для точности воспользуемся направляющими. Цвет текстового поля соответствует цвету рамки.

текстовые поля
Делаем внутреннюю тень текстового поля через стили, внутренняя тень, смещение – 0 рх, р-р -4 рх, непрозрачность 100% , цвет немного темнее цвета поля и ок.
Тиснение текстового поля. Дублируем данный слой, заливаем белым цветом, удаляем стиль слоя, растрируем, смещаем вниз на 1 рх, размываем по Гауссу на 0,6 рх, выставляем режим наложения – мягкий свет.
Пишем текст - Логин – р-р 14 рх, обычный, цвет от белого к цвету фона. Оформляем стиль тень: смещение – 1 рх, р-р – 1 рх, непрозрачность 75%,

Делаем внутреннюю тень текстового поля
Собираем все слои поля логин в одну папку, назовём её Логин,сворачиваем её, дублируем папку (назовём её Пароль). Инструментом перемещение фигуру Пароль опускаем ниже фигуры Логин на некоторое расстояние. Открываем скопированную папку и Корректируем текст — слово Логин на слово Пароль и второе текстовое поле готово.

дублируем папку
Рисуем кнопку. Создаём для неё папку. Инструментом фигура, аналогично выше сказанному, рисуем кнопку. Параметры: ш = 200 рх, в = 60 рх. Цвет аналогичен остальным двум.

 Рисуем кнопку.
Делаем подсветку белым цветом кнопки сверху. Создаём новый слой сверху и прикрепляем его обтравочной маской к фигуре кнопки. Берём кисть белого цвета р-р = 200 рх, Ж = 0, и делаем пару раз засветку по верхней грани кнопки.

Делаем подсветку белым цветом кнопки сверху
Включаем режим наложения — перекрытие.

режим наложения - перекрытие.
Создаём блик (глянец). Создаём новый слой и прикрепляем его обтравочной маской. Берём инструмент прямоугольное выделение и рисуем выделение прямоугольником пол кнопки.

Создаём блик (глянец)
Инструментом градиент от белого к прозрачному, рисуем градиент от начала выделения до края кнопки.

рисуем градиент
Снимаем выделение. Уменьшаем непрозрачность до 25 — 35%. Готово

Уменьшаем непрозрачность
Создаём 3d объём кнопки. Дублируем кнопку. Красим более тёмным цветом. Перемещаем на 2 рх ниже. Появляется снизу тень, как будто свет падает точно сверху.

Создаём 3d объём кнопки
Тиснение поля формы. Ещё раз дублируем слой, красим в белый цвет, растрируем слой, опускаем на 1 рх, размываем по Гауссу на 1.1 рх, мягкий свет.

Тиснение поля формы
Пишем текст кнопкиВойти посередине кнопки со всех сторон. Вертикальное расстояние считать до заглавной буквы В. Р-р 20 рх, цвет белый, жирный.
Включим тень текста: стили, тень, р-р 1 рх, смещение 1 рх, непрозрачность 80%, цвет – темнее немного фона кнопки. Одновременно уменьшим яркость белой подсветки кнопки, уменьшив непрозрачность слоя до 65%.

Пишем текст кнопки
Пишем окончательный текст внизу формы: Зарегистрироваться, вспомнить пароль. Шрифт р-р 14, обычный, межстрочное расстояние 24 рх, цвет темнее фона поля формы до нормальной узнаваемости.

цвет темнее фона
На этом всё, окончательный вид Дизайн Формы регистрации с прозрачным фоном представлена ниже.

Форма регистрации с прозрачным фоном

Следующая статья «Дизайн Flat формы регистрайии от А до Я» находится в разработке. Заходите или подписывайтесь и вы узнаете первыми.

 

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *