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

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

Delivered by FeedBurner

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

users online

Продолжаем создавать текстовый дизайн формы регистрации такого вида как на рисунке ниже.
Данная статья – это технология возможной отрисовки различных текстовых форм регистрации, подписки, продажи, дарения и т. д.

Применены приёмы тиснения текста, тиснения формы, создания 3d выступов кнопки над полем формы, стилизация текста и подбор цветовых оттенков текста в зависимости от цвета фона. Показана достижимость эффектов с помощью программы Фотошоп CS 6  и на основе видео курса А. Захаренко Веб дизайн 2.0.

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

форма регистрации

Начало работы: файл создан, текстура наложена в виде формы. Пишем текст РЕГИСТРАЦИЯ  р-ром шрифта 24рх, жирный, цвет тёмный, приближён к цвету фона. Посередине формы в верхней части. По вертикали  после подрегулируем по высоте.

 Для выразительности сделаем тиснение текста. Для этого, дублируем текстовый слой и красим его белым текстом. Инструментом перемещение сдвигаем текст вниз на 1 рх, и на 1рх вправо (стрелки на клавиатуре). После чего расположить этот текст ниже основного текстового слоя. Если получилось слишком резко, применим непрозрачность до 70% или режим для слоя – мягкий свет.

мягкий свет

На сегодня, такой приём есть тренд в стилизации текста.

Определяем места полей под тексты формы. Если ширина файла 340 рх, тогда отнимем с каждой стороны по 40 рх и останется тело формы шириной 300 рх. Ошибки здесь нет, посмотрите на линейки и рисунок и все вопросы отпадут. Установим вертикальные направляющие  через команду: просмотр, новая направляющая, поставить 40 рх и 340 рх вертикальные и  Ок. Теперь ещё раз сделаем отступы по 40 рх от боков тела формы. Вот и определили ширину полей под текст  формы. Она равна 220 рх. Устанавливаем высоту поля 50 рх.

В Фотошоп CS 6 есть прекрасная функция рисования  фигур, сходу определяя изменение их параметров. Рисуем инструментом фигура прямоугольник с закруглёнными углами,  радиус закругления  = 5 рх. Цвет текстового поля перекликается с фоном, но гораздо темнее. Подправляем цвет текстового поля в цвет слова Регистрация.

Для выразительности текстового поля сделаем его тиснение. Дублируем эту фигуру. Удаляем стиль в дубле, красим дубль в белый цвет и  опускаем слой с дублем под низ на 1 рх. Конечно, слой с дублем д.б. под основным слоем поля. Размываем его по Гауссу на 1 рх, режим мягкий свет.

красим белым цветом

Пишем текст: Ваш e- mail.  Р-р 14 рх, обычный, цвет приближён к фону поля., но светлее. Стилевое оформление: тень, р-р 1 рх, смещение 1 рх, непрозрачность  60%, угол 120°.

Объединяем все слои этого поля в одну папку.  Папку дублируем  и перемещаем  ниже по телу формы. Папку открываем и меняем текст,  на другой,  Ваше имя. Остальное оформление остаётся  без изменения.

форма регистрации

Переходим к полю кнопка. Рисуем фигуру  с размерами  ш = 220 рх, в = 60 рх, R = 5px, цвет  немного светлее фона других полей. Она ложиться точно по вертикальным направляющим, как и ранее рассчитывалось. Добавляем стиль внутреннюю тень  с параметрами: непрозрачность 100%,  р-р 4 рх, смещение — 0 рх, цвет темнее фона поля и Ок.

дизайн

Рисуем непосредственно кнопку внутри поля кнопка.   Берём инструмент фигура и назначаем параметры: прямоугольник с закруглёнными углами, R = 5рх, ш = 210 рх, в  = 50 рх, цвет светло оранжевый. Если у вас другая версия Фотошоп, тогда просто сделайте это по направляющим линейкам, как показано на рисунке.  Выравниваем положение кнопки равномерно по отступам в поле.

тиснение текста

Подсветка кнопки сверху.  Создадим новый слой сверху кнопки и прикрепим его обтравочной маской (ОбтрМ).  Далее берём кисточку белого цвета, р-р 140 рх, Ж = 0, непрозрачность 100%, Делаем засветку на кнопке в 3 щелчка. Как на рисунке.

тиснение поля

 Далее ставим режим  мягкий свет. Получилось ниже на рисунке.

мягкий свет

Рисуем блик на кнопке. Создаём ещё новый слой сверху и крепим его ОбтрМ. Затем инструментом выделение, рисуем притуплённый  эллипс. Показано на рисунке.

глянец

Активируем инструмент градиент и рисуем его от белого к прозрачному от границы выделения и до кромки кнопки.размытие по Гауссу

Отменяем выделение и уменьшаем непрозрачность до 30% или рядом. Готово.

 

уменьшаем непрозрачность

 Рисуем рельеф кнопки.Дублируем основной слой кнопки.  Заливаем его  цветом гораздо темнее фона поля и после этого опускаем ниже основного слоя на 2 рх. Под кнопкой образуется тень.

Делаем тиснение кнопки. Дублируем тёмный слой кнопки, красим его белым цветом, растрируем, размываем по Гауссу на 1 рх, выставим режим наложения, мягкий свет. Кнопка получилась выступающей в поле формы.

 

дублируем тёмный слой кнопки

Пишем текст  ПОЛУЧИТЬ ДОСТУП.   Р-р 18 рх, цвет в тон фону полей – тёмный. Располагаем точно посередине со всех сторон.

текстура

Делаем тиснение текста, как обычно: дублируем текстовый слой, заливаем белым цветом, перемещаем этот слой на один пиксель вниз и вправо. Перемещаем  слой ниже основного.  Если считаете нужным уменьшить резкость, снизить прозрачность слоя до 70%.

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

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

рекомендации

Копирование слоёв удобно делать так: выделить слой  — зажать Alt – курсор на слое и потянуть курсором вниз до появления двух полосок под слоем, который копируете. Отпустить  лкм и Alt. Появляется дубль слоя.

Вызов функции размытие по Гауссу назначить кнопку, например F4, так как пока до самой функции  доберёшься, надо пройти путь фильтр – размытие – размытие по Гауссу и попадаешь  в нужное место. Как назначить клавишу самостоятельно, нажмите комбинацию  Ctrl + Shift + Alt + K. В открывшемся окне найдите строку ФИЛЬТР, щелчок по треугольнику, строка РАЗМЫТИЕ по ГАУССУ, ставьте нужную букву и цифру F4  и ПРИНЯТЬ + Ок.  Готово.

Может оказаться, что где то, что то захотите исправить, переделать и вообще иметь этот шаблон Формы регистрации для своих проектов, тогда скачивайте его архив  в  PSD формате c Яндекс диска  https://yadi.sk/d/ZbcYbfFE3LgLtR   Монтаж файла проводился на версии ФОТОШОП  CS 6.

Если есть вопросы, задавайте в комментариях.

Ну и лёгкая романтическая песенка  metro, скачивайте   c Яндекс диска     https://yadi.sk/d/9Z_DfYdN3FYRvw  и расслабляйтесь после тяжёлого труда.

Хотите познакомиться с другими дизайнами страниц сайтов,  лендингов, обложек, баннеров переходите на страницу http://infookno.ru/uslugi

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

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