И вот я постепенно приближаюсь к выполнению еще одной цели, а именно “Сделать мини-курс по созданию макета (см. выше)”. Поэтому сегодня я покажу Вам как делать форму входа в фотошопе. Форма входа будет простая и в серых тонах, но очень элегантно выглядит.
3 часа ночи, завтра на пары, а я сижу и пишу статью
Вдохновение, ты не вовремя!
Давайте же сразу приступим к уроку, пока я не уснул за ноутбуком :)
Шаг 1. Создаем фон для нашей формы входа. Для этого используем инструмент “Прямоугольник с округленными краями”.
Шаг 2. Теперь нужно поработать с нашим фоном, не оставлять же его просто белым? Хотя, в некоторых ситуациях так можно будет сделать.
Заходим в настройки слоя (Два клика левой кнопкой мышки по слою). И выставляем “Наложение градиента”. Ставим очень светлые тона серого!
Шаг 3. Добавляем такие же прямоугольники, только уже на нашем фоне. Это будут поля для ввода данных. И немного поработаем с ними:
Шаг 4. А теперь же нам нужно создать кнопку. Как же пользователи входить будут?
Сделал кнопку выделяющейся на фоне “серой массы”, но тоже тускловатые тона, чтобы не слишком уж.
А теперь добавляем надписи, и вуаля! Форма входа для сайта в фотошопе готова!
Это идет подготовка Вас к тому, что бы Вы могли нарисовать полноценный макет для сайта! Было бы время, запустил бы свой мини-курс по рисованию макета хоть сейчас.
Скорее всего, будет так:
- Текстовые уроки будут поделены на 2-3 части, и будут опубликованы в блоге.
- Видеоуроки для тех кому тяжело разобраться будут БЕСПЛАТНЫ, но доступны только подписчикам и будут высылаться на почту!
Подписывайтесь, чтобы не пропустить!
Успехов Вам в учебе! И доброй ночи
С ув. Владислав
Фотошоп, это конечно классно, я для себя там все делаю, что связанно с картинками и графикой, но например, форму входа, я бы делал на специальном сервисе «Генератор CSS и HTML». Там можно настраивать, как угодно форму и получить сразу все в готовом коде. Останется только вставить на сайт.
P.S. Жду в гости оценить мой новый чат!
Да, но форма входа как элемент макета. Макет Вы тоже будете делать в сервисе?)
P.S.: Сейчас зайду!)
Макет управляем в сервисе. Можно делать разные эффекты.
Вот смотри: livetools.uiparade.com/form-builder.html
Я имел ввиду макет сайта :)
А сервис интересный!
Форма примитивная, хорошо бы еще эффектов добавить. Если бы еще это было сверстано, было бы интереснее, да и статейка больше была бы.
Я люблю минимализм (по блогу моему заметно, наверное), хотя эта форма не совсем в стиле минимализма. Углы закругленные не в этом стиле.
И я учу рисовать, а не верстать :) Для верстки нужно знать хотя бы HTML и CSS, чего многие мои читатели не знают.
А вот она же в стиле минимализма:
http://adobe-master.ru/wp-content/uploads/2014/12/Форма-входа_min.jpg
Очень познавательная и информативная статья, форма не примитивная — а доступная. Возьму себе на заметку, очень кстати.
Спасибо, Ольга :)
Я никого не осуждаю, на вкус и цвет…
Полезная статья для тех кто сам верстает сайты, и для тех любит какие то переделки в шаблонах.
Скоро для таких любителей верстать будет мини-курс «Как создать свой макет». Ну, название будет другое, но смысл Вы поняли :)
Понял смысл. Владислав, не видел курсы от Е. Попова по созданию сайта с нуля? А. Вернадского «WordPress-мастер»? Там есть информация которая тебе может пригодиться для твоего мини-курса. Хотя ты наверное и сам все знаешь.
Нет, не видел.
Этот курс платный?
Да платные курсы и Попова и Вернадского, но можно найти на торрентах и скачать их ;) как сделал я. По моему на nnm-club.me
Спасибо, было интересно и полезно почитать)))
Сделайте пожалуйста видео урок. Вродь всё получилось, но как сделать чтоб данные о пользователе сохранялись на всех страничках?
Это Вы уже просите сделать урок не по тематике сайта. Ведь я учу только как нарисовать форму входа, а Вы просите научить Вас как сделать со стороны программирования.