С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Псевдотрёхмерная форма входа для сайта в Фотошопе

Псевдотрёхмерная форма входа для сайта в Фотошопе

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

 

Ресурсы

 

Midnight Blue Grunge Pattern

 

Окончательный результат

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 1: Создание нового документа

 

Откройте Photoshop и создайте новый документ размером в 650 пикселей шириной и 400 пикселей высотой.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе


 

Шаг 2: Цвет фона

 

Залейте фон цветом # ececec, а затем в меню Фильтр> Шум> Добавить шум (Filter> Noise> Add Noise). Установите настройки, как показано на изображении ниже.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 3: Создание левой стороны формы

 

Теперь мы начнем делать нашу форму сложенном бумаги. Итак, создайте новый слой и выберите инструмент Перо (Pen Tool), создать левую часть формы. Затем щелкните правой кнопкой мыши на контуре, далее в контекстном меню выберите команду Образовать выделенную область (Make selection) и залейте его цветом # 262626.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 4: Наложение градиента

 

Откройте стили слоя и добавьте стиль Наложение градиента (Gradient Overlay). Используйте настройки, как показано на изображении ниже.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 


Шаг 5: Наложение узора

 

Теперь добавьте текстуру, для этого снова откройте стили слоя и добавьте стиль Наложение узора (Pattern Overlay) и добавьте узор из ресурсов урока.  

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 6: Создание средней части формы

 

Снова выберите инструмент Перо (Pen Tool) и создайте еще одну фигуру, она должна быть больше, чем предыдущая, заполните форму цветом # ab0707.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 7: Наложение градиента

 

Откройте стили слоя и добавьте стиль Наложение градиента (Gradient Overlay), измените Угол (Angle) на 180 градусов.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 8: Наложение узора

 

Снова откройте стили слоя и добавьте стиль Наложение узора (Pattern Overlay) и на этот раз добавьте узор из ресурсов программы.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 9: Создание правой стороны формы

 

Ещё раз выберите инструмент Перо (Pen Tool) и создайте правую часть нашей формы. Залейте её цветом # 262626.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 10: Дублирование стиля слоя

 

Просто щелкните правой кнопкой мыши на первом слое и в контекстном меню выберите команду Скопировать стиль слоя (Copy Style). Затем щелкните правой кнопкой мыши на новом слое и выберите команду Вклеить стиль слоя (Paste Style).

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 11: Обводка

 

Теперь возьмите инструмент Линия (Line) и создайте рамку вокруг нашей формы, установите толщину линии в 8 пикселей и используйте цвет # cdcdcd.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 12: Заполнение пробелов

 

Чтобы заполнить пробелы между нашими сторонами, мы снова будем использовать инструмент Линия (Line) с тем же цветом (# cdcdcd), но с толщиной в 6 и 3 пикселя.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 13: Видимый изгиб

 

Выберите круглую кисть белого цвета с размером в 1 пикселей и создайте тонкую линию между левой и средней частью формы, чтобы сделать складку более заметной. Затем уменьшите непрозрачность до 50%.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 14: Добавление логотипа

 

Добавить логотип в виде текста используя цвет# a02727. Затем откройте стили слоя и добавьте стиль Наложение градиента (Gradient Overlay).

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Затем выберите стиль Обводка (Stroke) и добавьте обводку толщиной в 1 пиксель, измените цвет на # 860c0d.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Далее добавьте стиль слоя Тень (Drop Shadow).

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 15: Добавление текста

 

Добавьте ещё текст. В этот раз используйте цвет # f2f2f2. Затем просто скопируйте стиль слоя из текста выше и вставить его на новый слой.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 16: Создание полей формы

 

Во-первых, напишите текст над формой, используя инструмент Горизонтальный текст (Text Tool) и цвет # FFFFFF. Добавить тонкую тень, используя следующие параметры.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Теперь выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) и создайте поле «Имя пользователя». Затем перейдите в меню Редактирование> Трансформирование> Деформация (Edit> Transform path> Wrap) и отрегулируйте правую сторону прямоугольника так, чтобы он казался немного меньше, чем слева.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Затем выберите стиль Обводка (Stroke) и добавьте обводку толщиной в 2 пикселя.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Далее добавьте стиль Наложение градиента (Gradient Overlay).

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Теперь повторите ту же процедуру, чтобы создать еще один прямоугольник и добавьте нужный текст в поле.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Выберите инструмент Прямоугольник (Rectangle Tool) и создайте маленький прямоугольник. Добавьте галочку с использованием пользовательских форм. Затем выберите инструмент Горизонтальный текст (Text Tool) и добавьте текст с помощью цветов # b5b5b5 и  # eb4545.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 17: Добавление кнопки входа

 

Используя те же методы, которые мы использовали для полей ввода формы, создайте небольшую кнопку, но на этот раз для обводки используйте цвет # FFFFFF. Затем примените стиль Наложение градиента (Gradient Overlay), чтобы добавить оранжевый градиент. Настройки градиента смотрите на изображении ниже.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Далее добавьте стиль слоя Тень (Drop Shadow) и надпись «Login» используя инструмент Горизонтальный текст (Text Tool).

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 18: Добавление маркеров и текста

 

Выберите круглую кисть с размером в 13 пикселей и используйте его на правой части нашей формы, чтобы создать круглый маркер. Убедитесь в том, что в качестве цвета переднего плана установлен цвет # 761818. Затем добавьте стили слоя Тень (Drop Shadow) и Наложение градиента (Gradient Overlay).

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Теперь добавьте необходимый текст рядом с маркером используя цвет # 949494. Далее просто повторите тот же процесс, чтобы создать дополнительные маркеры и текст.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 19: Добавление блика

 

Этот шаг не является обязательным, но если вы хотите, то можете добавить некоторое сияние в форме. Если вы хотите иметь глянцевый вид, то выберите инструмент Полигональное лассо (Polygonal Lasso Tool), создайте треугольник и залейте его цветом # FFFFFF.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Затем измените Режим наложения (Blend Mode) на Перекрытие (Overlay) и уменьшите непрозрачность до 25%.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Шаг 20: Создайте тень

 

Создайте новый слой и поместите его над фоновым слоем. Теперь выберите инструмент Перо (Pen Tool) и создайте тень под формой, залейте её цветом # 595c59.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Далее перейдите в меню Фильтр> Размытие> Размытие по Гауссу (Filter> Blur> Gaussian Blur) и размойте её немного.

 

Псевдотрёхмерная форма входа для сайта в Фотошопе

 

Вот и всё. Форма готова.

 


Автор урока: Anum

 

Переводчик урока: Ирина Шипилова 

Ссылка на источник



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 14.01.2013
  •   Просмотров: 5277
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

Помощь сайту
Если вам нравится у нас на сайте, и мы вам помогли, вы можете внесите свой вклад в его развитие, пожертвовав любую сумму на один из кошельков:

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки