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

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

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

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

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

forma_vhoda1

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

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

forma_vhoda2

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

forma_vhoda3

forma_vhoda4

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

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

forma_vhoda5

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

forma_vhoda_result

 

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

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

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

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

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

Оцените статью
Добавить комментарий

  1. Алексей

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

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

    Ответить
    1. Владислав автор

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

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

      Ответить
      1. Алексей

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

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

        Ответить
        1. Владислав автор

          Я имел ввиду макет сайта :)
          А сервис интересный!

          Ответить
  2. inetwmr

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

    Ответить
    1. Владислав автор

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

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

      Ответить
  3. Ольга

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

    Ответить
    1. Владислав автор

      Спасибо, Ольга :)
      Я никого не осуждаю, на вкус и цвет…

      Ответить
  4. Александр

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

    Ответить
    1. Владислав автор

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

      Ответить
      1. Александр

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

        Ответить
        1. Владислав автор

          Нет, не видел.
          Этот курс платный?

          Ответить
          1. Александр

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

  5. Нонна

    Спасибо, было интересно и полезно почитать)))

    Ответить
  6. Виктор

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

    Ответить
    1. Владислав автор

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

      Ответить
Adblock
detector