—»     —»   Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
  Раздел: Образование и Изучение   Комментариев: 1  

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

В программе 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

Вот и всё! Надеемся, это пособие вам пригодится.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Photoshop, отправные формы
Опубликовал Design FactoRy   Прочитано (раз): 9218   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 7 октября 2013 @ 17:14
Написал: Олег — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
В программе Photoshop создаётся порой шикарная графика - забавно что "порой" wink
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031