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

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

Delivered by FeedBurner

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

users online

Форма обратной связи в стиле Flat в наше время особо популярна на большинстве лендингов и приобрела тренд в веб дизайне.
Вы легко сможете, следуя по шаговой технологии изложенной ниже, создать самостоятельно любую форму обратной связи в стиле Flat, цветовом решении и надписями для ваших проектов.
Форма обратной связи в стиле Flat
Создаём файл 500 на 500 рх и зальём белым цветом — получили фон.
Создадим папку и прикрепим этот файл.
Создадим дополнительный слой над фоном.
Рисуем фигуру, прототип ФОС ш = 300 рх, в = 300 рх, r = 10 px., цвет слабо голубой.
фон
Создаём 3d объёмность. Дублируем фигуру на новый слой и заливаем цветом немного темнее основной фигуры. Копируем код цвета, он нам понадобится в дальнейшем. Смещаем её на 3 пикселя ниже основной фигуры. Получаем 3d толщину ФОС.
w2
Переходим на слой основной фигуры и включаем стиль обводка, цветом кода известного ранее, размер 1 рх, снаружи, непрозрачность 70-80%, ок.
тень
Дублируем тёмный слой. Далее редактирование, свободное трансформирование, зажимаем Shift и сдвигаем фигуру на право и вниз. Как на рисунке.
w4
Создаём ещё один слой. Берём инструмент прямоугольное лассо и соединяем углы как показано на рисунке.
заливка
Заливаем оба выделения углов цветом дублированной фигуры
слой
Объединяем эти два слоя в один.
тень
Мы получили полный 3d объект.
Уменьшаем непрозрачность этого объекта до 50%.
w8
Берём ластик Ж=25% и стираем часть тени, как на рисунке.
Уменьшаем непрозрачность слоя до 50%.
Создадим тональный фон над основным фоном. Создаём новый слой и заливаем серо голубым цветом. Можем белой кисточкой большого размера подсветить всю форму обратной связи. Я сейчас этого делать не буду.прозрачность
Пишем текст Обратная связь, р – р 24, шрифт PT Sans, Bold – по середине с боков и отступ сверху на 30 рх, цвет тёмный с оттенком фона.
Сделаем тиснение текста. Дублируем слой с текстом и красим текст белым цветом. Инструментом перемещение опускаем текст на 1 рх вниз и на 1 рх вправо. А сам слой перемещаем под основной слой текста. Если буквы слабо контрастны, продублируем текст и он засветятся.
Рисуем текстовое поле — прямоугольник с закруглёнными углами. Ш = 220 рх, В = 50 рх. R= 5 рх. Цвет белый. Работая в программе Фотошоп CS 6, переходим на инструмент фигура, делаем 2 щелчка по рабочему столу и в таблице пишем вышеуказанные параметры.
Получаем прямоугольник. Сделаем обводку через стилевое оформление. Р-р — 1 рх, непрозрачность – 100%, цвет темнее фона и подбираем непрозрачность.
пишем текст
Пишем текст Ваш e – mail. Группируем слои этого поля в папку, выделяем их и Ctrl + G и назовём Ваш емаил.
Дублируем эту папку, удерживая Alt и тянем слой папки чуть ниже и она дублируется.
Открываем папку дубль и меняем текст на Ваше имя. Получаем второе готовое текстовое поле.
обратная связь
Создаём ещё одно текстовое поле Кнопка. Активируем инструмент фигура и рисуем прямоугольник с закрулёнными углами с параметрами: ш = 220 рх, в = 60 рх. = 5 рх. Цвет точно в цвет текста обратная связь. Просто скопировать код цвета текста и перенести на кнопку.
Придадим объёмность кнопке. Копируем слой с кнопкой, красим более тёмным цветом и опускаем этот слой на 2 рх ниже. Появляется вид объёма снизу кнопки.

тень

Пишем текст Отправить, белым цветом, р-р 24 рх, жирный. Расположить равномерно и по середине со всех сторон.

w14

Сделаем тень от кнопки. Для этого, копируем слой кнопки с тенью и используя свободное трансформирование   смещаем её вправо и вниз.

 

копия

Создаём дополнительный слой  над слоем с тенью кнопки и инструментом прямоугольное лассо выделяем углы тени слева и справа, заливаем их цветом тени и объединяем эти слои.

 

w16

Уменьшаем непрозрачность до 30% или больше и ластиком больших размеров 100 рх, Ж = 0, подчищаем тень как на рисунке, регулируем непрозрачность. Форма обратной связи в стиле Flat готова.

Обратная связь

 

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

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