все самое интересное о веб-дизайне

Создаем в фотошопе блок подписки на обновления по email

0

21-02-2013

Создаем в фотошопе блок подписки на обновления по emailСегодня будем создавать в фотошопе блок подписки на обновления с полем для введения Email и цветной кнопкой. Для начала создадим светло-серый фон и украсим его пиксельным узором. Затем создадим основной белый прямоугольник и применим к нему мягкие стили слоя. После создадим узкую темную полоску для заголовка, опять-таки применим стили слоя. Далее займемся полем для ввода Email и красивой цветной кнопкой для завершения операции. Украсим их градиентами, мягкими свечениями и тенью. После напишем крупный заголовок на темном фоне. Потом создадим иконку с изображением конверта и напишем смысловые тексты в поле ввода и на кнопке.

Шаг 1.
Создаем в фотошопе новый документ 500х250 пикселей, заливаем цветом #eaeaea.Создаем в фотошопе блок подписки на обновления по email

Шаг 2.
Применим стиль слоя «Перекрытие узора» (Pattern Overlay).Создаем в фотошопе блок подписки на обновления по email

Шаг 3.
Получили такой результат.Создаем в фотошопе блок подписки на обновления по email

Шаг 4.
Создаем прямоугольник размером 322х78 пиксель, заливаем его цветом #efefef.Создаем в фотошопе блок подписки на обновления по email

Шаг 5.
Применим стиль слоя «Обводка» (Stroke), цвет #c2c3c5.Создаем в фотошопе блок подписки на обновления по email

Шаг 6.
Применим стиль слоя «Тень» (Drop Shadow).Создаем в фотошопе блок подписки на обновления по email

Шаг 7.
Получили такой результат.Создаем в фотошопе блок подписки на обновления по email

Шаг 8.
Создаем прямоугольник размером 326х40 пиксель, заливаем его цветом #2d4456.Создаем в фотошопе блок подписки на обновления по email

Шаг 9.
Применим стиль слоя «Обводка» (Stroke), цвет #000209.Создаем в фотошопе блок подписки на обновления по email

Шаг 10.
Применим стиль слоя «Внутреннее свечение» (Inner Glow), цвет белый.Создаем в фотошопе блок подписки на обновления по email

Шаг 11.
Получили такой результат.Создаем в фотошопе блок подписки на обновления по email

Шаг 12.
Создаем прямоугольник со скругленными краями, радиус 3 пикселя, размер 182х32.Создаем в фотошопе блок подписки на обновления по email

Шаг 13.
Применим стиль слоя «Наложение градиента» (Gradient Overlay). Цвет от белого слева к #ededed справа.Создаем в фотошопе блок подписки на обновления по email

Шаг 14.
Применим стиль слоя «Обводка» (Stroke), цвет #939393.Создаем в фотошопе блок подписки на обновления по email

Шаг 15.
Применим стиль слоя «Внутренняя тень» (Inner Shadow).Создаем в фотошопе блок подписки на обновления по email

Шаг 16.
Получили такой результат.Создаем в фотошопе блок подписки на обновления по email

Шаг 17.
Создаем прямоугольник со скругленными краями, радиус 3 пикселя, размер 81х32 пикселя, цвет #d5084d.Создаем в фотошопе блок подписки на обновления по email

Шаг 18.
Применим стиль слоя «Наложение градиента» (Gradient Overlay). Цвет от #d30647 слева к #e70b6f справа.Создаем в фотошопе блок подписки на обновления по email

Шаг 19.
Применим стиль слоя «Обводка» (Stroke), цвет #7b0126.Создаем в фотошопе блок подписки на обновления по email

Шаг 20.
Применим стиль слоя «Внутреннее свечение» (Inner Glow).Создаем в фотошопе блок подписки на обновления по email

Шаг 21.
Применим стиль слоя «Внутренняя тень» (Inner Shadow).Создаем в фотошопе блок подписки на обновления по email

Шаг 22.
Получили такой результат.Создаем в фотошопе блок подписки на обновления по email

Шаг 23.
Теперь, чтобы создать эффект объема, мы создадим маленький треугольник под синим блоком, зальем его черным цветом и прислоним его к белому блоку слева.Создаем в фотошопе блок подписки на обновления по email

Шаг 24.
Делаем дубликат маленького треугольника, трансформируем его по горизонтали и прислоняем к белому блоку справа, под синим блоком.Создаем в фотошопе блок подписки на обновления по email

Шаг 25.
Пишем текст «Подписка на обновления», цвет #e3ebf6.Создаем в фотошопе блок подписки на обновления по email

Шаг 26.
Применим стиль слоя «Тень» (Drop Shadow).Создаем в фотошопе блок подписки на обновления по email

Шаг 27.
Получили такой результат.Создаем в фотошопе блок подписки на обновления по email

Шаг 28.
Воспользуемся инструментом «Произвольная фигура» (Custom Shape Tool) и выберем из стандартного набора фотошопа фигуру Mail, цвет #444444.Создаем в фотошопе блок подписки на обновления по email

Шаг 29.
Пишем текст «Введите ваш Email», цвет #636363.Создаем в фотошопе блок подписки на обновления по email

Шаг 30.
Пишем текст «ОК», цвет #f1f1f2.Создаем в фотошопе блок подписки на обновления по email

Шаг 31.
Применим к тексту ОК стиль слоя «Тень» (Drop Shadow).Создаем в фотошопе блок подписки на обновления по email

Шаг 32.
Получили такой блок подписки на обновления.Создаем в фотошопе блок подписки на обновления по email

6344
  • Поделиться:
  • Короткая ссылка на этот пост: http://www.designonstop.com/?p=8917
  • Подписаться на обновления:

  • Понравился пост? Поддержите DesingNonstop рублём!

Написать комментарий с помощью формы ВКонтакте

Написать комментарий с помощью формы Facebook

Написать комментарий с помощью формы Facebook

Написать комментарий с помощью обычной формы блога

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!