Читать


Главная » 2018 » Апрель » 11 » Урок 29. Рисуем калькулятор
21:06
Урок 29. Рисуем калькулятор

Многие сайты, предлагающие, к примеру, услуги по строительству домов, размещают для удобства такой важный инструмент, как онлайн-калькулятор. От его визуальной составляющей зависит очень многое. Главное правило: чем проще интерфейс, тем легче пользователю будет воспользоваться этим инструментом, а значит и больше вероятность заказа услуги.

Так как мы рисуем произвольный калькулятор, то и размер его мы возьмём произвольный. Желательно, чтобы блок с калькулятором был ограничен определённой областью, а если он ещё и на фоновом изображении будет размещаться, то лучше всего залить основу блока непрозрачным цветом. Таким образом, мы используем подложку. Рисуем её в нашем случае "Прямоугольником со скруглёнными углами".


Урок по фотошопу. Рисуем калькулятор


Заголовок тоже лучше выделить цветной полосой. Вновь рисуем фигуру поверх первой и создаём обтравочную маску (Alt+Ctrl+G), чтобы новая фигура приняла границы первой. Добавляем надпись по центру.


Урок по фотошопу. Рисуем калькулятор


Теперь определимся с количеством параметров и функционалом каждого из них. Т.е., если нам необходимо показать несколько разных параметров, которые содержат разное количество значений, то и показать их стоит разными способами. Например, параметр "площадь" у нас включает множество значений, которые не вместить в выпадающий список и тем более тут будут неуместны радиокнопки. Идеальный вариант использовать шкалу. Вновь фигурами рисуем основу всех параметров, обязательно обозначив каждый фрагмент пояснительными надписями.


Урок по фотошопу. Рисуем калькулятор


Каждое поле теперь нужно привести в привычный вид. К примеру, выпадающему списку нужно добавить стрелочку вниз ("рисуем её прямоугольником") и однопиксельную обводку, которая выставляется в стилях слоя.


Урок по фотошопу. Рисуем калькулятор


Тот же стиль с обводкой можно скопировать со слоя с выпадающим списком и вставить на слой с одним из чекбоксов. Второй из чекбоксов мы покажем как бы нажатым. Для этого выкрасим его в яркий цвет, а поверх нарисуем галочку.


Урок по фотошопу. Рисуем калькулятор


Переходим к шкале (или иначе, к ползунку). Главный управляющий элемент должен быть заметным и понятным. Рисуем фигурой 2 круга разных размеров и цветов. А область до управляющего элемента можно закрасить в бледный оттенок основного яркого цвета: для этого (как делали вначале) рисуем новую фигуру над шкалой от начала и до бегунка, и создаём обтравочную маску.


Урок по фотошопу. Рисуем калькулятор


Можно добавить тень бегунку, чтобы он стал более выраженным. Для этого в стилях слоя первого (бОльшего) круга добавляем тень.


Урок по фотошопу. Рисуем калькулятор


Осталось добавить кнопку. Вновь используем фигуры, на этот раз можно скруглить углы прямоугольника до максимума, и также придадим кнопке небольшую тень (можно скопировать стиль слоя с фигуры бегунка).


Урок по фотошопу. Рисуем калькулятор


Осталась одна мелочь. Когда поля одного цвета с фоном (в данном случае с цветом подложки) они визуального немного теряются. Поэтому можно слегка затенить цвет подложки. Я выбрал едва заметный светло-серый #f1f1f1. Тогда и обводку самих полей можно будет также немного смягчить, но это уже мелочи, касающиеся вашего вкуса. Калькулятор готов!


Урок по фотошопу. Рисуем калькулятор


Исходник урока, запакован в архив - 45 КБ

Скачать архив




Самые первые уроки, рассчитанные для начинающих, смотрите здесь.



Категория: Уроки | Просмотров: 116 | Добавил: M-Wizard | Рейтинг: 0.0/0
Теги: урок, фотошоп, ui/ux

Всего комментариев: 0
avatar


НЕКОТОРЫЕ ПУБЛИКАЦИИ БЛОГА


ПОДПИШИТЕСЬ НА ОБНОВЛЕНИЯ