Главная > Образование и Изучение > Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop


7 октября 2013, 15:30. Разместил: Design FactoRy
В программе Photoshop создаётся порой шикарная графика, а также проектируются интерфейсы пользователя. Данное Photoshop-пособие поможет нам освоить построение интерфейса простой формы авторизации. Задействуем векторные контуры в сочетании с послойным разложением стилей. Итак, приступим!

Характеристики пособия:

* Программа: Adobe Photoshop
* Уровень сложности: Для начинающих
* Примерное время освоения: 45 минут

Посмотрите, что нам предстоит сконструировать:

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 1:

Создайте новый файл, откройте меню ‘File’ -> ‘New’. Задайте значения - ширина 300 пкс, высота 267 пкс.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 2:

Выберите отображение линеек через опцию меню ‘View’->’Rulers’. Шкалу единиц измерения линейки задайте в пикселях, кликнув по ней правой кнопкой мыши.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 3:

Задайте сетку, выбрав в меню ‘View’->’New Guide’. Поставьте галочку для вертикали (‘Vertical’), проставьте нулевое значение координат (position: ’0px’), затем кликните ‘OK’.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Повторите снова, заполняя поля значений по вертикали и горизонтали следующим образом:
Vertical: '20px', '64px', '150px', '280px', '300px'.
Horizontal: '0px', '45px', '50px', '70px', '114px', '124px', '168px', '178px', '222px', '227px', '237px', '247px', '267px'.

Если вы проделаете всё так же, как я, то получиться у вас должно вот что:

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 4:

Теперь, задав сетку, отмасштабируйте рабочее пространство ("холст"), выбрав в меню ‘Image’->’Canvas size’. Установите значения - ширины 600 пкс, высоты 500 пкс.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 5:

Дважды кликните по фону слоя. Присвойте слою название "фон" (“background”).

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 6:

Выберите на панели инструментов режим заливки (‘Paint Bucket Tool’), в боковом окне задайте цветовое значение #dd6800. Закрасьте фон.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Правой кнопкой мыши кликните по фоновому слою (“Background”), выберите опции смешивания (‘Blending Options’).

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Выберите угол наклона (‘Gradient Overlay’) и задайте вашему слою этот стиль.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 7:

Выберите на панели инструментов режим вычерчивания прямоугольника с округлыми углами (‘Rounded Rectangle Tool’), постройте такую фигуру, задав ей радиус скругления в 5 пкс и цвет #5C5C5C.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Присвойте слою "Фигура 1" (“Shape 1”) следующие значения:

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 8:

Задайте новую группу параметров под названием "Заголовок" (“Header”).

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Выберите на панели инструментов режим вычерчивания прямоугольника с округлыми углами (‘Rounded Rectangle Tool’), постройте такую фигуру, задав ей радиус скругления в 5 пкс и цвет #06BFC7, как показано ниже.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

С помощью "пера" (‘Pen Tool’) удалите лишнюю точку, как показано ниже.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Присвойте слою следующие значения:

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 9:

Введите текст.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Присвойте слою текста следующие значения:

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 10:

Проведите линию в текстовой строке.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Присвойте слою линии следующие значения:

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 11:

Возьмите "карандаш", прочертите линию по нижнему краю заголовка. Сначала задайте новый слой, затем в боковой панели инструментов выберите "Карандаш" ('Pencil Tool').

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 12:

Завершив оформление заголовка, задайте новую группу параметров под названием "Заполняется пользователем" (“User Fill”).

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Выберите на панели инструментов режим вычерчивания прямоугольника с округлыми углами (‘Rounded Rectangle Tool’), постройте такую фигуру, задав ей радиус скругления в 5 пкс и цвет #FFFFFF.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Продублируйте эту фигуру, заменив её цвет на #EEEEEE.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

С помощью "пера" (‘Pen Tool’) удалите, передвиньте точки, как показано ниже:

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Присвойте слою фигуры следующие значения:

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Добавьте иконку и текст.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Мы заготовили для вас эту маленькую векторную иконку ( download-ico-login-form-tutorial.zip ).

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 13:

Шаг 13 почти полностью повторяет Шаг 12. Или для ускорения процесса просто продублируйте группу параметров "Заполняется пользователем" (“User Fill”).

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Замените название группы на "Ввод пароля" (“Pass Fill”).

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Замените иконку и текст.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 14:

Задайте новую группу параметров под названием "Кнопка" (“Button”).

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Выберите на панели инструментов режим вычерчивания прямоугольника с округлыми углами (‘Rounded Rectangle Tool’), постройте такую фигуру, задав ей радиус скругления в 5 пкс и цвет #06BFC7.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Присвойте её слою следующие значения:

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

По центру кнопки разместите текст.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Присвойте слою текста следующие значения:

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Шаг 15:

И последнее - введите текст под кнопкой.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Заключение

Основной аспект данного пособия - взаимное расположение элементов. Поэтому прежде всего мы задали сетку для упрощения и ускорения процесса построения данной формы авторизации.

Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop

Вот и всё! Надеемся, это пособие вам пригодится.
Вернуться назад