Скрипты

ovoo-v2-5-4-cms-онлайн-кинотеатра-и-тв OVOO-это мощная, гибкая и удобная для пользователя CMS с передовой системой управления видеоконтентом. Она была создана, чтобы обеспечить уникальный опыт...
stackposts-v1-5-–-social-marketing-tool Stackposts-это инструмент маркетинга в социальных сетях, который позволяет и помогает вам легко публиковать автоматические сообщения, планировать...
grameasy-2-0-nul-автоматическая-публикация-в-instagram Grameasy - это мощный программный инструмент, который помогает настроить вашу учетную запись Instagram на автопилот, круглосуточно заниматься лайками и...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Рисуем Web 2.0 панель навигации в Photoshop.

Рисуем Web 2.0 панель навигации в Photoshop.

В этом уроке вы увидите как с помощью несколько несложных приёмов нарисовать панель навигации для сайта стиля Web 2.0 в программе Photoshop. И для начала создадим в фотошопе новый проект размером 550 на 150px. цвет фона я выбрал # 686868. Теперь установим направляющие которые очень сильно облегчают работу, в общем без них не как. В нашем случае панель навигации будет 50px. в высоту, и мы сделаем три кнопки размером 166 px. в ширину.

np-00_

Создадим новый слой с названием «Фон навигации», и на этом слое с помощью инструмента  Прямоугольное выделение сделаем как на изображении ниже и зальём выделенную область  цветом # 2c2c2c.

np-01_

Теперь снимем выделение (Ctrl+D) и зайдем в стили слоя  «Фон навигации», и зададим легкий градиент как показано ниже на изображении.

np-03_

Вот получившийся результат лёгкого градиента.

np-05_

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

np-06_

Уменьшим непрозрачность последнего слоя до 8%

np-07_

И так теперь нам нужно добавить разделяющие линии кнопок, для этого создадим новый слой и возьмём инструмент Однопиксельное выделение (вертикальная строка) и по вертикальным направляющим делаем выделение, которое заливаем белым цветом.

np-11_

Конечно теперь нужно удалить ненужные выступающие за пределы панели навигации линии, для их удаления возьмём опять же инструмент Прямоугольное выделение, делаем выделение как на изображении ниже и нажимаем клавишу Delete, тем самым удалим всё что в области.

np-12_

Тоже сделайте и с нижней частью панели навигации, после чего уменьшим непрозрачность линий да 30%.

np-13_

Теперь создадим новый слой назовём «Активный», берём инструмент Прямоугольное выделение которым делаем выделение по размеру средней кнопки панели навигации и заливаем любым цветом у меня это синий.

np-14_

Теперь заходим в стили слоя «Активный» и придаём стили как на изображениях ниже.

np-15_

np-16_

np-18_

Ну вот осталось добавить необходимы текст и панель навигации для сайта в стиле Web 2.0 готова.

np-19_

 



  1. Комментарии (0)

  2. Добавить свои

Комментарии (0)

There are no comments posted here yet

Оставьте свой комментарий

Posting comment as a guest. Sign up or login to your account.
Вложения (0 / 3)
Share Your Location

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...