Красивое вертикальное меню для сайта в Photoshop
В этом уроке вы узнаете, как создать красивое вертикальное меню для сайта при помощи Adobe Photoshop.
Материалы по теме:
CSS Tab Designer — программа для создания меню сайта
30 горизонтальных меню для сайта
38 примеров выпадающих меню в веб дизайне
Выберите инструмент «Rounded Rrectangle Tool» (U) — «Прямоугольник со скругленными углами» установите радиус в 20 px, цвет #1d97bc, а также другие настройки как показано ниже и нарисуйте прямоугольную фигуру.
Теперь выберите инструмент «Pen Tool» (P) — «Перо», затем зажмите клавишу CTRL и кликните на границе прямоугольника, в результате появится выделение. Далее зажмите клавишу Alt и при помощи скроллинга можете увеличить фигуру для более удобной работы с ней.
Не отпуская клавишу Alt, нажмите на точку 1, а затем 2, в левом верхнем углу прямоугольника, после этого отпустите Alt и нажмите на точку 3.
Сделайте то же самое с нижним правым углом, в результате у вас должна получится следующая фигура.
Примените следующие Blending Options — Параметры наложения. (Слой >> Стиль слоя >> Параметры наложения…)
Drop Shadow — Тень. Blend Mode: Multiply — Режим: Умножение.
Outer Glow — внешнее свечение. Blend Mode:Screen — Режим: Осветление; Technique: Softer — Метод:Мягкий
Stroke — Обводка. Position:Outside — Положение:Снаружи;
Добавьте название меню в самом верху. (Настройки смотрите на изображении ниже).
Далее выберите инструмент Pencil Tool (B) — Карандаш. Создайте новый слой Слой >> Новый >> Слой… (SHIFT + CTRL + N) и проведите горизонтальные линии, одну верхнюю черного цвета, вторую белого цвета.
Дублируйте этот слой нажатием сочетания клавиш CTRL + J и выбрав инструмент «Перемещение» (CTRL + V) переместите этот слой ниже на 27 px. Повторите дублирование и перемещение 5 раз.
Примечание переводчика:
Для того чтобы легче было делать линии лучше увеличьте масштаб прямоугольника, для этого нажмите клавишу ALT и увеличьте масштаб при помощи скроллинга. Для того чтобы линии были прямыми нажмите клавишу SHIFT, а затем рисуйте линию.
Создайте новый слой и при помощи инструмента «Прямоугольная область» (M) сделайте между двумя линиями небольшое выделение и заполните его цветом #75c5de. Тоже самое сделайте и для других позиций меню.
Примечание переводчика:
Заполнить выделение можно при помощи инструмента «Заливка» (G).
Теперь используя инструмент Horizontal Type Tool (T) — «Горизонтальный текст» напишите текст.
Теперь необходимо сделать ховер эффект.
При помощи инструмента «Прямоугольная область» сделайте прямоугольное выделение верхнего пункта меню, затем создайте новый слой Слой >> Новый >> Слой… (SHIFT + CTRL + N) и разместите его под слоем с текстом и используя Gradient Tool (G) — инструмент «Градиент» сделайте градиентную заливку.
Окончательный вариант:
Материал подготовлен проектом: webmastermix.ru
Источник
Рекомендуем ознакомиться:
- Подробности
Опубликовано: 09 Март 2010
-
Обновлено: 20 Сентябрь 2013
Просмотров: 21585
Вертикальное меню (панель). Основы bootstrap 3 для начинающих. Урок №11
Главная » Основы Bootstrap 3 » Вертикальное меню (панель). Основы bootstrap 3 для начинающих. Урок №11
05.08.2016
Всем привет!
Продолжаем изучать основы «bootstrap3».
В сегодняшнем уроке вы научитесь создавать вертикальное боковое меню для веб-страницы, используя компонент «Bootstrap панель». Панель резиновая и имеет свойства растягиваться.
Для создания вертикального меню, в <div> с классом «panel-body» нужно вставить текст либо меню.
Скажу простыми словами: Bootstrap панель можно использовать для отображения текста с полем (админ-панель для управления сайтом, управления товаром для интернет магазина и т.д.):
Или же для красивого оформления меню.
Сейчас вы все увидите:
Создание простой панели для меню
<div> <div>Пример простой панели</div> </div>
Результат:
Создание простой панели для меню с заголовком
<div> <div>Заголовок</div> <div> Содержимое панели </div> </div>
Результат:
Можно заголовок прописать через теги <h2> — <h6>, применяя к тегу класс «panel-title».
<div> <div> <h4>Панель с h4 заголовком</h4> </div> <div> Содержимое панели </div> </div>
Результат:
Акцентирующие панели
Панель можно выделить различным цветом, при этом создать не только красивый вид меню, но и привлечь внимание пользователей.
Дополнительные классы: «panel-primary», «panel-success», «panel-info», «panel-warning», «panel-danger».
<div> <div> <h4>Заголовок панели 1</h4> </div> <div> Содержимое панели </div> </div> <div> <div> <h4>Заголовок панели 2</h4> </div> <div> Содержимое панели </div> </div> <div> <div> <h4>Заголовок панели 3</h4> </div> <div> Содержимое панели </div> </div> <div> <div> <h4>Заголовок панели 4</h4> </div> <div> Содержимое панели </div> </div> <div> <div> <h4>Заголовок панели 5</h4> </div> <div> Содержимое панели </div> </div>
Результат:
Теперь попробуем создать полноценное меню, используя компоненты Bootstrap панель:
<div> <!-- Обычное содержимое панели --> <div>Товары</div> <div> Список товаров в нашем магазине.</div> <!-- Групповой список --> <div> <a href="#">Смартфоны <span>22</span></a> <a href="#">Ноутбуки <span>24</span></a> <a href="#">Планшеты <span>17</span></a> <a href="#">Компьютеры <span>1</span></a> </div> </div>
</div>
<!-- Групповой список -->
<div>
<a href="#">Смартфоны <span>22</span></a>
<a href="#">Ноутбуки <span>24</span></a>
<a href="#">Планшеты <span>17</span></a>
<a href="#">Компьютеры <span>1</span></a>
</div>
</div>
Результат:
Можно вот так:
<div> <div> <h4>Заголовок панели</h4> </div> <div> <ul> <a href="#"><li>Главная</li></a> <a href="#"><li>Портфолио</li></a> <a href="#"><li>Автор</li></a> <a href="#"><li>Контакты</li></a> </ul> </div> </div>
Результат:
Вот так вот! Сегодня вы снова почерпнули новые знания. Жду вас на следующих уроках.
Добавить комментарий
Витрина красивых дизайнов вертикальной навигации — Smashing Magazine
- Чтение: 9 мин.
- Витрины, Веб-дизайн, Navigation
- Share on Twitter, LinkedIn
Об авторе
Джейкоб Губе — основатель и главный редактор Six Revisions, веб-издания для веб-разработчиков и дизайнеров, а также заместитель редактора Design Instruct, веб-сайта… Больше о Джейкоб ↬
Зайдите на любой веб-сайт, и вы обязательно найдете одну вещь: меню навигации. Навигационные меню позволяют посетителям переходить со страницы на страницу; без них у нас не было бы возможности удобно просматривать веб-сайты.
Возможно, именно поэтому дизайнеры, информационные архитекторы, исследователи юзабилити и специалисты по пользовательскому опыту тратят так много времени и ресурсов на разработку эстетически привлекательных и удобных для пользователя навигационных систем.
Навигационные меню веб-сайтов обычно имеют одну из двух ориентаций: вертикальную и горизонтальную. Горизонтальные навигационные меню отображают элементы рядом друг с другом. Вертикальные навигационные меню располагают элементы друг над другом. В этом посте мы выделяем несколько замечательных вертикальных навигационных меню для вашего вдохновения.
- Демонстрация современных тенденций в дизайне навигации
- Горизонтальные навигационные меню: тенденции, шаблоны и лучшие практики
- Навигационные меню: тенденции и примеры
- Доводы против вертикальной навигации
Вертикальная навигация на этом веб-сайте портфолио проста и понятна по внешнему виду, но надежный по функциональности и взаимодействию.
Нажатие на «Интернет», «Печать» или «Идентификация» фильтрует миниатюры справа, а нажатие на пункт меню «О программе» сдвигает навигацию вправо, освобождая место для контента слева.
Больше после прыжка! Продолжить чтение можно ниже ↓
Здесь вы можете увидеть одно из преимуществ вертикальной навигации: она позволяет создавать очень компактные и модульные меню, которые кажутся отличными от остальной части макета. Расположенное в верхнем левом углу, чуть ниже названия веб-сайта, меню является одним из первых, что видят посетители (по крайней мере, при написании слева направо).
Это портфолио имеет четкий и простой дизайн навигации, который позволяет посетителю сосредоточиться на ярком содержании справа.
Довольно оригинальное навигационное меню с пятью разными шрифтами. Немного необычная навигация для краудсорсингового сообщества.
Навигационное меню в правой части макета для разнообразия: хотя дизайн простой, почти рудиментарный, он работает хорошо и в нем легко ориентироваться.
Навигационные меню не должны выглядеть выдающимися.
Элегантный и функциональный дизайн с вертикальной навигацией. Наведение курсора на пункт меню запускает горизонтальную анимацию.
Вертикальная навигация этого веб-сайта находится прямо посередине того места, на которое обращает внимание посетитель при первой загрузке страницы. Активные пункты меню обозначены указывающей рукой.
Дизайн навигации для Колледжа искусств Мэрилендского института демонстрирует еще одно преимущество вертикальной навигации: она демонстрирует иерархию и позволяет группировать пункты меню, не прибегая к раскрывающимся меню, подменю которых отображаются только при наведении курсора мыши. над предметом.
Дизайн вертикальной навигации на этом веб-сайте расположен прямо под названием веб-сайта, что делает его заметным, не привлекая внимания к большому вращающемуся баннеру в правом верхнем углу.
Вертикальная навигация демонстрирует еще одно преимущество: возможность размещения большего количества пунктов меню.
Портфолио арт-директора Ника Джонса имеет вертикальную навигацию к середине страницы. Меню обобщает его работу и имеет интерактивный компонент, который прокручивает меню вверх и вниз в зависимости от движений мыши пользователя. При щелчке элемента меню смещается влево, освобождая место для соответствующего содержимого.
Эта темная вертикальная навигация для Noam Design оставляет пункт меню для контактной формы постоянно открытым.
Вертикальная навигация на этом веб-сайте сгруппирована в две категории, что дает пользователям возможность быстро найти ссылку на интересующую их страницу. в книге. Пункты меню разбиты на две группы.
Эта простая вертикальная навигация представлена прямо под названием веб-сайта, что дает ему видное место в макете, не отвлекая внимание от области основного контента. Темно-серый фон обозначает активные пункты меню со стрелкой, указывающей на содержимое, что способствует естественному и эффективному движению глаз.
Меню вертикальной навигации Mellasat Vineyard представляет собой модульный цельный элемент дизайна, который также содержит название веб-сайта и логотип. Меню является центральным элементом здесь.
Навигация в этом элегантном минималистичном портфолио с типографикой является центральным элементом и вносит свой вклад в общий макет. Пункты меню повторяются справа более крупным шрифтом.
Это меню творчески вплетается в описание и назначение сайта.
Это интерактивное меню имеет красивое выдвижное меню, в котором отображаются вложенные ссылки и содержимое, когда пользователь наводит указатель мыши на элемент основного меню.
Цвет этой навигации едва уловим, но меню удается привлечь внимание пользователя благодаря своему заметному расположению в макете и высококонтрастному портретному снимку автора.
Навигация Go Media Inc представляет собой аккордеон с подменю. Щелчок по элементу основного меню вызывает анимированный нисходящий эффект, который открывает элементы подменю.
Это темное вертикальное меню в стиле гранж незаметно, но его трудно не заметить из-за его расположения.
Glass Tiger Surfboards выбирает вертикальное навигационное меню с низкой непрозрачностью, благодаря чему травянистый фон просвечивает.
Меню на этом минималистичном веб-сайте с портфолио имеет красный прозрачный фон, так что рекомендуемая фотография видна, даже когда меню развернуто.
Это художественное меню прозрачно, поэтому характерный цветочный узор на заднем плане не затенен.
Это меню имеет темно-серый полупрозрачный фон, через который просвечивает фоновое изображение.
Эта система навигации открывается, когда пользователь наводит курсор на «Меню». Простота дизайна творческая; фоновые изображения являются отличительным элементом.
В этом меню рядом с элементами меню есть иллюстрированные значки, которые дополняют общую тему и помогают визуально распознавать.
Это вертикальное меню является отличительным элементом этого макета.
Значки справа служат украшением для глаз и служат визуальным представлением пунктов меню.
Это меню интересно тем, что его зернистый стиль редко встречается на сайтах высших учебных заведений.
Навигация здесь выполнена на деревянном фоне, а ссылки выделены органичным шрифтом.
Основным визуальным элементом портфолио A J Miles является вертикальная навигация. Меню выполнено в виде листа бумаги, скрепленного скотчем.
Это меню имеет красочные шрифты с нарисованным от руки видом, дополняющие общую тему.
Это вертикальное меню занимает центральное место в макете. Он имеет большие шрифты и 3-D эффект.
На этом веб-сайте вы можете увидеть, насколько большими могут быть размеры шрифта, когда у вас больше вертикального пространства для работы.
Персональный сайт Рика Монро имеет навигационные ссылки поверх текстурированного фона, прямо под названием сайта.
Большой размер шрифта способствует минималистской тематике этого сайта.
Этот веб-сайт имеет органичный рукописный шрифт для меню, который задает тон макету (которое организовано в виде блокнота с сеткой).
Это меню предлагает интересное взаимодействие. При нажатии на элемент меню смещается влево или вправо, освобождая место для содержимого, что создает привлекательный пользовательский опыт.
Эта навигация имеет увеличенный шрифт, что делает ее изюминкой макета. При наведении курсора на пункт меню открывается интересный анимированный эффект.
В этой навигационной системе основные ссылки ориентированы вертикально. Пункты подменю располагаются горизонтально.
Это простое текстовое меню можно найти, не отвлекая слишком много внимания от фокуса страницы: слайд-шоу.
Элементы этого меню выполнены в виде полосок бумаги, что добавляет приятный штрих к иллюстрированной теме.
Вертикальное меню здесь занимает большую часть макета. При наведении курсора на элемент отображается простая анимация CSS, которая перемещает стрелки, указывающие вправо, вправо, давая пользователю ощущение движения вперед.
Это неупорядоченное меню действительно воплощает органичный внешний вид веб-сайта. Значки слева от каждого элемента помогают с визуальным распознаванием и дополняют дизайн.
На этом веб-сайте пункты меню расположены ближе к середине окна просмотра. Простая навигация добавляет элегантности, но не доминирует над макетом.
Навигация на этом веб-сайте уникальна и немного напоминает плетение корзин. Нахождение в правом верхнем углу придает ему известность.
Официальный сайт Билла Гейтса имеет уникальное меню, которое передает инновации и дальновидность: темы, которые технологический барон, несомненно, хочет донести до посетителей.
Элементы этого меню отображаются в виде полупрозрачных кругов. При наведении появляется символ, относящийся к этому конкретному пункту меню, что делает меню запоминающимся.
Это меню слегка наклонено, и его перекошенная ориентация обязательно привлечет внимание посетителя.
Дизайн подходит для сайта, который для ресторана.
Смелый, яркий, привлекающий внимание. Эти прилагательные точно описывают вертикальную навигацию Aussie BBQ Legends. Меню играет большую роль в создании тона для веб-сайта.
В этой навигационной системе основные ссылки ориентированы вертикально. Пункты подменю располагаются горизонтально.
Это простое текстовое меню можно найти, не отвлекая слишком много внимания от фокуса страницы: слайд-шоу.
Элементы этого меню выполнены в виде полосок бумаги, что добавляет приятный штрих к иллюстрированной теме.
Вертикальное меню здесь занимает большую часть макета. При наведении курсора на элемент отображается простая анимация CSS, которая перемещает стрелки, указывающие вправо, вправо, давая пользователю ощущение движения вперед.
Это неупорядоченное меню действительно воплощает органичный внешний вид веб-сайта. Значки слева от каждого элемента помогают с визуальным распознаванием и дополняют дизайн.
На этом веб-сайте пункты меню расположены ближе к середине окна просмотра. Простая навигация добавляет элегантности, но не доминирует над макетом.
Навигация этого веб-сайта уникальна и немного напоминает плетение корзин. Нахождение в правом верхнем углу придает ему известность.
Официальный сайт Билла Гейтса имеет уникальное меню, которое передает инновации и дальновидность: темы, которые технологический барон, несомненно, хочет донести до посетителей.
Элементы этого меню отображаются в виде полупрозрачных кругов. При наведении появляется символ, относящийся к этому конкретному пункту меню, что делает меню запоминающимся.
Это меню слегка наклонено, и его перекошенная ориентация обязательно привлечет внимание посетителя. Дизайн подходит для сайта, который для ресторана.
Смелый, яркий, привлекающий внимание. Эти прилагательные точно описывают вертикальную навигацию Aussie BBQ Legends.
Меню играет большую роль в создании тона для веб-сайта.
Агентство Sid Lee использует интерактивное навигационное меню в левой части страницы. Некоторые разделы навигации имеют подразделы, которые отображаются рядом с основной навигацией.
Harmony Republic размещает меню навигации слева от своего логотипа. Необычное расположение, но работает хорошо. Текущий раздел навигации выделен белым фоном.
Дополнительная литература
- 35 примеров эффективного использования вертикального меню навигации в веб-дизайне
- меню навигации: тенденции и примеры
10 примеров красивой вертикальной навигации, которая вас вдохновит | by Ano Nymous
В последние годы вертикальная навигация вызывала смешанные отзывы, и многие перечисляли ее ограничения, но я надеюсь, что приведенные ниже веб-сайты убедят вас в том, что когда все сделано хорошо, это может выглядеть фантастически. С распространением горизонтальных навигационных меню приятно видеть различные используемые макеты меню, которые не оставляют посетителя в замешательстве относительно того, где щелкнуть (как они часто делают, когда используются нетрадиционные макеты), или отвлекать внимание от основного содержания страницы, будучи чрезмерно навязчивый.
Чтобы вдохновить вас на создание собственного дизайна, я выбрал веб-сайты с различными стилями боковой навигации — некоторые из приведенных ниже примеров имеют сворачиваемые боковые панели навигации, некоторые используют скользящую анимацию, некоторые фиксированные, некоторые слева, а некоторые находятся справа. Многие утверждают, что лучше иметь навигацию слева, чем справа, учитывая тот факт, что исследования показали, что наше внимание, как правило, привлекается к левой стороне веб-страниц (т. е. это исследование показало, что веб-пользователи тратят 69% их времени просмотра левой половины страницы и 30% просмотра правой половины), но я считаю, что цель сайта вместе с дизайном в целом должны быть приняты во внимание, прежде чем можно будет сделать какое-либо суждение о том, является ли основной Область навигации на сайте должна быть сверху, снизу, слева, справа или посередине. Исследования на эту тему слишком часто давали узкое определение того, что является «хорошим», например, исследование EyetrackIII, которое пришло к выводу: самый высокий процент испытуемых, и на них смотрели дольше всего.
»
Многие дизайнеры утверждают, что увеличение количества посетителей, которые дольше смотрят на их область навигации, не является « лучшим » или чем-то, к чему нужно стремиться. Хватит дискуссий — посмотрите на дизайн ниже и дайте мне знать, что вы думаете.
Bad Assembly
Bad Assembly, цифровое рекламное агентство, разработало веб-сайт, который является прекрасным примером растущего использования выдвижной боковой панели меню, доступ к которой можно получить, щелкнув значок из трех сложенных строк в верхнем углу. . Эта иконка становится все более знакомой из-за ее распространенности в адаптивном дизайне мобильных веб-сайтов, и веб-дизайнеры начинают очень хорошо использовать ее на больших экранах. Преимущество заключается в том, что область навигации отображается только тогда, когда это необходимо, и поэтому внимание посетителя сосредоточено на содержании сайта. Исчезновение фона и эффект быстрой прокрутки навигации по страницам — еще два элемента навигации этого веб-сайта, которые выделяют его среди многих других.
Google Ventures
Компания Google Ventures разработала фантастически чистые и интуитивно понятные веб-сайты, которые очень успешно демонстрируют изображения, текст и высококачественные иллюстрации. Стоит посетить сайт, чтобы попробовать его, так как скриншот не передает его должным образом — после нажатия на боковую панель навигации она уменьшается в размере, и весь текст становится значками. Очень классный.
Тот факт, что они выбрали фиксированную панель навигации слева, позволяет им использовать больше возможностей, чем если бы они выбрали более традиционную горизонтальную панель, которая потребовала бы раскрывающихся списков или меньшего размера шрифта.
Kick Point
Kick Point, агентство цифрового маркетинга, базирующееся в Альберте, также выбрало трехстрочный навигационный значок меню, чтобы область навигации не мешала их контенту до тех пор, пока это не потребуется. Их использование больших изображений и цвета будет скомпрометировано горизонтальной текстовой областью, так что это еще один пример, когда вертикальная область меню выглядит правильно, если рассматривать ее в сочетании с сайтом в целом.
Dataveyes
Dataveyes — это визуализация данных Frech, в которой используется красочная тонкая панель навигации слева в сочетании с плавными переходами параллакса по вертикали. Каждое число на панели навигации расширяется, чтобы показать текст, и приятно нажимать на каждый раздел, в котором используются яркие цвета и качественные иллюстрации. Никакой неуклюжей прокрутки или загрузки страниц — весь дизайн действительно на высшем уровне.
Джонатан Да Коста
Веб-сайт Джонатана Да Косты использует значок меню из 3 строк, чтобы скользить по строке меню слева, чтобы его творческие таланты могли быть продемонстрированы с минимальным беспорядком в основном разделе сайта. Уникальность этого дизайна заключается в том, что при нажатии на значок меню область навигации расширяется примерно до 80% страницы, а новый контент размещается под горизонтальным навигационным блоком.
Arbor
На веб-сайте ресторана Arbor используется чистая и минималистичная фиксированная область навигации слева, позволяющая добавлять больше ссылок по сравнению с горизонтальным меню.
Полин Осмот
Полин Осмонт — французский иллюстратор, графический и веб-дизайнер, которая продемонстрировала свои навыки на собственном веб-сайте. Эффекты перехода по горизонтальной и вертикальной прокрутке при нажатии на навигационную ссылку очень элегантны, и весь сайт демонстрирует, что она очень хорошо разбирается в эстетике, а также в UX.
Джейсон Джеймс
Хотя приведенный выше снимок экрана jasonjam.es может показаться не таким впечатляющим, этот сайт следует посетить, чтобы увидеть боковую навигацию в действии, а также потому, что это пример размещения тонны контента в одной массивной вертикальной прокрутке. страницы. Домашняя страница, кажется, вечно продолжается примерами предыдущих проектов по брендингу и дизайну.
Mammoth Media
Веб-сайт Mammoth Media отличается редким дизайном, поскольку на нем отсутствует вертикальная прокрутка, поскольку весь контент находится в видимой области экрана. Плоский дизайн и цвета, используемые в области навигации и внутренних страницах, создают очень современный вид.