Читать


Главная » 2017 » Декабрь » 5 » Урок 27. Рисуем вкладки (табы)
21:44
Урок 27. Рисуем вкладки (табы)

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

Для рисования табов не используется много графики. Основное — форма блока. С этого и начнём. Используя инструмент «Фигура», а именно «Прямоугольник со скруглёнными углами», рисуем подложку для информации и (с нажатой Shift) активную вкладку.


Урок по фотошопу. Рисуем вкладки (табы)


Создаём новый слой под уже нарисованными фигурами (Shift+Ctrl+N) и рисуем неактивные вкладки: их можно дублировать и двигать на нужное расстояние. Цвет выбираем отличный от активной вкладки.


Урок по фотошопу. Рисуем вкладки (табы)


Можно сразу расставить заголовки вкладок. Для бОльшей графичности можно сопроводить заголовки пиктограмками.


Урок по фотошопу. Рисуем вкладки (табы)


Собственно, всё! Классический вид вкладок готов.


Урок по фотошопу. Рисуем вкладки (табы)


Но табы не обязательно должны выглядеть именно так. Можно немного осовременить дизайн и разместить вкладки несколько иным образом. Например, разместить табы поверх подложки.


Урок по фотошопу. Рисуем вкладки (табы)


Или ещё больше отойти от классического вида и показать табы в форме навигационного меню. Для этого стоит оставить лишь заголовки вкладок, а активный — подчеркнуть цветом или тоненькой полосой.


Урок по фотошопу. Рисуем вкладки (табы)


Ну и давайте рассмотрим ещё один вариант. Чтобы, в отличие от предыдущего варианта, вкладки и непосредственно содержимое активной вкладки были отделены более явным образом, можно в качестве разграничения использовать цвет. Точнее, оттенок. Нарисуем поверх подложки фигуру (Прямоугольник) с оттенком, отличающимся от цвета самой подложки и создадим обтравочную маску (Shift+Ctrl+M).


Урок по фотошопу. Рисуем вкладки (табы)


Осталось подчеркнуть принадлежность содержимого вкладки к её заголовку. Для этого добавим в тело последней фигуры прямоугольник (с зажатой Shift получится квадрат) и трансформацией (Ctrl+T) повернём его на 45 градусов.


Урок по фотошопу. Рисуем вкладки (табы)


Получился довольно современный лаконичный вариант.


Урок по фотошопу. Рисуем вкладки (табы)


Без содержимого, правда, вкладка выглядит пустой, а весь блок больше похож на схему, нежели на готовый оформленный элемент. Поэтому давайте разместим немного текста и картинок (пусть и не связанных с заголовком вкладки), чтобы увидеть, как заиграет наш лаконичный вариант.


Урок по фотошопу. Рисуем вкладки (табы)


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

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




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



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

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


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


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