Главная > Образование и Изучение > Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop
Уроки Photoshop: Проектирование простой формы авторизации средствами Photoshop7 октября 2013, 15:30. Разместил: Design FactoRy |
В программе 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: И последнее - введите текст под кнопкой. Заключение Основной аспект данного пособия - взаимное расположение элементов. Поэтому прежде всего мы задали сетку для упрощения и ускорения процесса построения данной формы авторизации. Вот и всё! Надеемся, это пособие вам пригодится. Вернуться назад |