В программе Photoshop создаётся порой шикарная графика, а также проектируются интерфейсы пользователя. Данное Photoshop-пособие поможет нам освоить построение интерфейса простой формы авторизации. Задействуем векторные контуры в сочетании с послойным разложением стилей. Итак, приступим!
Характеристики пособия:
* Программа: Adobe Photoshop
* Уровень сложности: Для начинающих
* Примерное время освоения: 45 минут
Посмотрите, что нам предстоит сконструировать:
Шаг 1:
Создайте новый файл, откройте меню ‘File’ -> ‘New’. Задайте значения - ширина 300 пкс, высота 267 пкс.
Шаг 2:
Выберите отображение линеек через опцию меню ‘View’->’Rulers’. Шкалу единиц измерения линейки задайте в пикселях, кликнув по ней правой кнопкой мыши.
Шаг 3:
Задайте сетку, выбрав в меню ‘View’->’New Guide’. Поставьте галочку для вертикали (‘Vertical’), проставьте нулевое значение координат (position: ’0px’), затем кликните ‘OK’.
Повторите снова, заполняя поля значений по вертикали и горизонтали следующим образом:
Vertical: '20px', '64px', '150px', '280px', '300px'.
Horizontal: '0px', '45px', '50px', '70px', '114px', '124px', '168px', '178px', '222px', '227px', '237px', '247px', '267px'.
Если вы проделаете всё так же, как я, то получиться у вас должно вот что:
Шаг 4:
Теперь, задав сетку, отмасштабируйте рабочее пространство ("холст"), выбрав в меню ‘Image’->’Canvas size’. Установите значения - ширины 600 пкс, высоты 500 пкс.
Шаг 5:
Дважды кликните по фону слоя. Присвойте слою название "фон" (“background”).
Шаг 6:
Выберите на панели инструментов режим заливки (‘Paint Bucket Tool’), в боковом окне задайте цветовое значение #dd6800. Закрасьте фон.
Правой кнопкой мыши кликните по фоновому слою (“Background”), выберите опции смешивания (‘Blending Options’).
Выберите угол наклона (‘Gradient Overlay’) и задайте вашему слою этот стиль.
Шаг 7:
Выберите на панели инструментов режим вычерчивания прямоугольника с округлыми углами (‘Rounded Rectangle Tool’), постройте такую фигуру, задав ей радиус скругления в 5 пкс и цвет #5C5C5C.
Присвойте слою "Фигура 1" (“Shape 1”) следующие значения:
Шаг 8:
Задайте новую группу параметров под названием "Заголовок" (“Header”).
Выберите на панели инструментов режим вычерчивания прямоугольника с округлыми углами (‘Rounded Rectangle Tool’), постройте такую фигуру, задав ей радиус скругления в 5 пкс и цвет #06BFC7, как показано ниже.
С помощью "пера" (‘Pen Tool’) удалите лишнюю точку, как показано ниже.
Присвойте слою следующие значения:
Шаг 9:
Введите текст.
Присвойте слою текста следующие значения:
Шаг 10:
Проведите линию в текстовой строке.
Присвойте слою линии следующие значения:
Шаг 11:
Возьмите "карандаш", прочертите линию по нижнему краю заголовка. Сначала задайте новый слой, затем в боковой панели инструментов выберите "Карандаш" ('Pencil Tool').
Шаг 12:
Завершив оформление заголовка, задайте новую группу параметров под названием "Заполняется пользователем" (“User Fill”).
Выберите на панели инструментов режим вычерчивания прямоугольника с округлыми углами (‘Rounded Rectangle Tool’), постройте такую фигуру, задав ей радиус скругления в 5 пкс и цвет #FFFFFF.
Продублируйте эту фигуру, заменив её цвет на #EEEEEE.
С помощью "пера" (‘Pen Tool’) удалите, передвиньте точки, как показано ниже:
Присвойте слою фигуры следующие значения:
Добавьте иконку и текст.
Мы заготовили для вас эту маленькую векторную иконку ( download-ico-login-form-tutorial.zip ).
Шаг 13:
Шаг 13 почти полностью повторяет Шаг 12. Или для ускорения процесса просто продублируйте группу параметров "Заполняется пользователем" (“User Fill”).
Замените название группы на "Ввод пароля" (“Pass Fill”).
Замените иконку и текст.
Шаг 14:
Задайте новую группу параметров под названием "Кнопка" (“Button”).
Выберите на панели инструментов режим вычерчивания прямоугольника с округлыми углами (‘Rounded Rectangle Tool’), постройте такую фигуру, задав ей радиус скругления в 5 пкс и цвет #06BFC7.
Присвойте её слою следующие значения:
По центру кнопки разместите текст.
Присвойте слою текста следующие значения:
Шаг 15:
И последнее - введите текст под кнопкой.
Заключение
Основной аспект данного пособия - взаимное расположение элементов. Поэтому прежде всего мы задали сетку для упрощения и ускорения процесса построения данной формы авторизации.
Вот и всё! Надеемся, это пособие вам пригодится.
Раздел: Образование и Изучение Комментариев: 1
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Подробности здесь
Опубликовал Design FactoRy Прочитано (раз): 9218 | Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com © | Источник материала / оригинал статьи Распечатать
Автор перевода — CoolWebmasters.Com © | Источник материала / оригинал статьи Распечатать