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

Модный минималистический интерфейс входа для сайта в Фотошопе

В этом уроке мы создадим минимальный элегантный красивый интерфейс входа в систему с помощью Adobe Photoshop используя некоторые простые методы и некоторые вариации серого цвета.

 

Данное руководство идеально подходит для начинающих.

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 

Скачать файл PSD

 

Интерфейс входа

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 

Шаг 1

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 

Создайте новый документ 800 пикселей в высоту и 600 пикселей в ширину. Вы также можете использовать любые другие размеры, главное чтобы имелось некоторое пространство для работы. Используя инструмент  Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)) заполните пространство размером в 320 на 210 пикселей светло-серым цветом. Это будет основа нашего интерфейса входа.

 


Шаг 2

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 

Добавьте к прямоугольнику  темно-серую (# dbdada) тень с смещением и размером в 1 пиксель. Режим наложения (Blend mode) измените на  Умножение (Multiply) и снизьте непрозрачность до 50 процентов.

 

Шаг 3

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 

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

 

Шаг 4

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 

И заключительным эффектом для нашего базового прямоугольника будет наложение градиента. Цвета для градиета возьмём белый и очень светло-серый (# f1f1f1). Этим мы добьёмся того, что наш градиент станет действительно тонким, почти невидимым, так же прозрачность должна быть снижена до 60-65%.

 

Шаг 5

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 

Итак, мы закончили с эффектами для базового прямоугольника, но мы должны его немного доработать, поэтому мы добавим  линию толщиной в 1 пиксель, чтобы он не выглядел пустым и слишком простым. Линия должна быть такого же цвета, как и все предыдущие эффекты так же должны быть к ней применены. Так же добавьте ещё одну линию, но на этот раз полностью белую. Разместите её прямо под серой линией.


 

Шаг 6

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 

В левом верхнем углу мы добавим текст. Я просто написал фразу "Login Form", которая описывает то, для чего предназначен данный интерфейс. Текст должен быть темно-серого цвета, который будет отлично контрастировать с остальными цветами.

 

Шаг 7

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 

Используя инструмент  Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U)) создайте две белые фигуры. Сделайте обводку в 1 пиксель (# dbdada) и используя тот же цвет для текста напишите случайный адрес  электронной почты в верхней форме (которая будет использоваться для ввода адреса электронной почты), а в нижней форме, введите пароль скрытый звёздочками ( *). Используемый мною шрифт  Droid Sans вы можете получить бесплатно на Google Шрифты.

 

Шаг 8

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 

Теперь давайте преукрасим нашу форму  и мы добавим несколько иконок. Я использовал иконки  YummyGum с сайта  iconSweets 2, найти им применение можно практически в любом проекте.

 

Шаг 9

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 

Используя инструмент  Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U))  создайте две маленькие формы (10 × 10 пикселов) и примените к ним эффект обводки с тем же цветом, который мы использовали в предыдущих шагах. Внутри верхнего бокса, используя Пользовательские фигуры (Custom Shape Tool (U)),  нарисуйте галочку и поместите её точно  в центр бокса. Используя тот же шрифт Droid Sans, напишите какой-нибудь текст в непосредственной близости от чекбокса.

 

Шаг 10

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 

Последним штрихом к нашему интерфейсу будет большая кнопка, которая будет завершать "процесс входа в систему". Используя всё тот же инструмент  Прямоугольник со скруглёнными углами (Rounded Rectangle Tool (U))  создайте форму  размером около 110 на 35 пикселей, и залейте её темно-серым цветом (# 6d6d6d). Нанесите немного белых теней, и не забудьте изменить Режим наложения (Blend mode) с  Умножение (Multiply) на Нормальный (Normal).

 

Шаг 11

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 

Далее примените эффект внутренней тени на кнопку, используйте настройки, как показано на изображении выше.

 

Шаг 12

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 

И в качестве последнего штриха  для кнопки добавьте обводку толщиной в  1 пиксель используя цвет(# 595656).

 

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

 

Модный минималистический интерфейс входа для сайта в Фотошопе

 


Автор урока: Stelian Subotin

 

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

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



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


  • 19.12.2012
  •   Просмотров: 2697
Комментарии Вконтакте:
Комментарии 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
Партнерские ссылки