Урок 26 Как сделать форму входа в фотошопе

И вот я постепенно приближаюсь к выполнению еще одной цели, а именно “Сделать мини-курс по созданию макета (см. выше)”. Поэтому сегодня я покажу Вам как делать форму входа в фотошопе. Форма входа будет простая и в серых тонах, но очень элегантно выглядит.

3 часа ночи, завтра на пары, а я сижу и пишу статью Улыбка
Вдохновение, ты не вовремя
!

Давайте же сразу приступим к уроку, пока я не уснул за ноутбуком :)

Шаг 1. Создаем фон для нашей формы входа. Для этого используем инструмент “Прямоугольник с округленными краями”.

forma_vhoda1

Шаг 2. Теперь нужно поработать с нашим фоном, не оставлять же его просто белым? Хотя, в некоторых ситуациях так можно будет сделать.

Заходим в настройки слоя (Два клика левой кнопкой мышки по слою). И выставляем “Наложение градиента”. Ставим очень светлые тона серого!

forma_vhoda2

Шаг 3. Добавляем такие же прямоугольники, только уже на нашем фоне. Это будут поля для ввода данных. И немного поработаем с ними:

forma_vhoda3

forma_vhoda4

Шаг 4. А теперь же нам нужно создать кнопку. Как же пользователи входить будут?

Сделал кнопку выделяющейся на фоне “серой массы”, но тоже тускловатые тона, чтобы не слишком уж.

forma_vhoda5

А теперь добавляем надписи, и вуаля! Форма входа для сайта в фотошопе готова!

forma_vhoda_result

 

Это идет подготовка Вас к тому, что бы Вы могли нарисовать полноценный макет для сайта! Было бы время, запустил бы свой мини-курс по рисованию макета хоть сейчас.

Скорее всего, будет так:

  1. Текстовые уроки будут поделены на 2-3 части, и будут опубликованы в блоге.
  2. Видеоуроки для тех кому тяжело разобраться будут БЕСПЛАТНЫ, но доступны только подписчикам и будут высылаться на почту!

Подписывайтесь, чтобы не пропустить!

Успехов Вам в учебе! И доброй ночи
С ув. Владислав

Оцените, мне важно Ваше мнение:
DislikeLike (+2 )
Загрузка...



Понравилась статья? Поделитесь с друзьями в соц. сетях:
Хотите получать новые бесплатные уроки на свой email?
Подпишитесь!


Или же на странички в социальных сетях.


16 комментариев к записи “Урок 26 Как сделать форму входа в фотошопе

  1. Фотошоп, это конечно классно, я для себя там все делаю, что связанно с картинками и графикой, но например, форму входа, я бы делал на специальном сервисе «Генератор CSS и HTML». Там можно настраивать, как угодно форму и получить сразу все в готовом коде. Останется только вставить на сайт.

    P.S. Жду в гости оценить мой новый чат!

    • Да, но форма входа как элемент макета. Макет Вы тоже будете делать в сервисе?)

      P.S.: Сейчас зайду!)

      • Макет управляем в сервисе. Можно делать разные эффекты.

        Вот смотри: livetools.uiparade.com/form-builder.html

  2. Форма примитивная, хорошо бы еще эффектов добавить. Если бы еще это было сверстано, было бы интереснее, да и статейка больше была бы.

    • Я люблю минимализм (по блогу моему заметно, наверное), хотя эта форма не совсем в стиле минимализма. Углы закругленные не в этом стиле.
      И я учу рисовать, а не верстать :) Для верстки нужно знать хотя бы HTML и CSS, чего многие мои читатели не знают.

      А вот она же в стиле минимализма:
      http://adobe-master.ru/wp-content/uploads/2014/12/Форма-входа_min.jpg

  3. Очень познавательная и информативная статья, форма не примитивная — а доступная. Возьму себе на заметку, очень кстати.

  4. Полезная статья для тех кто сам верстает сайты, и для тех любит какие то переделки в шаблонах.

    • Скоро для таких любителей верстать будет мини-курс «Как создать свой макет». Ну, название будет другое, но смысл Вы поняли :)

      • Понял смысл. Владислав, не видел курсы от Е. Попова по созданию сайта с нуля? А. Вернадского «WordPress-мастер»? Там есть информация которая тебе может пригодиться для твоего мини-курса. Хотя ты наверное и сам все знаешь.

          • Да платные курсы и Попова и Вернадского, но можно найти на торрентах и скачать их ;) как сделал я. По моему на nnm-club.me

  5. Сделайте пожалуйста видео урок. Вродь всё получилось, но как сделать чтоб данные о пользователе сохранялись на всех страничках?

    • Это Вы уже просите сделать урок не по тематике сайта. Ведь я учу только как нарисовать форму входа, а Вы просите научить Вас как сделать со стороны программирования.

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

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

Вы можете прикрепить свое изображение (до 1мб):