Рубрика: Photoshop Уроки | Урок прочитали: 659
 (голосов: 0)

Делаем навигацию для сайта в Фотошоп

В процессе изучения этого урока вы научитесь создавать стильное меню для сайта.


Создайте новый документ и залейте его серым цветом. Создайте новый слой, используйте Rounded Rectangle Tool " width= (Прямоугольник с округленными краями) и залейте его этим  #313131 цветом.


" width=


Измените стиль этого слоя:
Тень


" width=



" width=



" width=


Результат этого шага


" width=


Создайте новый слой и при помощи того же инструмента Rounded Rectangle Tool " width= (Прямоугольник с округленными краями) сделайте выделение внутри первого прямоугольника и залейте его цветом #313131


" width=


Стиль слоя также нужно изменить.
Внутренняя тень


" width=



" width=



" width=


Результат этого шага:


" width=


Создайте новый слой и при помощи Rectangular Marquee Tool " width= (Прямоугольная область) сделайте выделение для кнопки и залейте ее #262626


" width=


Меняем стиль слоя:
Наложение градиента


" width=



" width=


Создайте новый слой, вновь используя инструмент Rectangular Marquee Tool " width= (Прямоугольная область) сделайте выделение на половину кнопки, залейте его белым цветом и измените Непрозрачность (Opacity) на 10%


" width=


Результат этого шага:


" width=


Создайте новый слой. Сделайте выделение ниже кнопки и залейте его при помощи Радиального градиента " width=. От центра, переход черного в белое, измените непрозрачность на 30 %


" width=


Результат этого шага:


" width=


Продолжите делать выделение:


" width=


Нажмите CTRL+J, чтобы дублировать слой и у нас получится:


" width=


Продолжайте нажимать Ctrl + J, чтобы дублировать слой, затем переместите его выше, как показано на рисунке ниже.


" width=


Наконец слейте все слои с этой «светящейся» линией. Размножите кнопки и эту линию и соберите меню. Вот конечный результат автора:


" width=


А вот моя работа:


" width=


Перевод: Любимова Юлия
Ссылка на источник

           

Похожие файлы и публикации:

Делаем навигацию для сайта в Фотошоп
Шаг 1. Создайте новый документ 102*50 пикселей. Фон залейте цветом  #838383. Выберите инструмент Rounded tool (Прямоугольник со скругленными краями). Установите следующие настройки:
Делаем навигацию для сайта в Фотошоп
В этом уроке Вы научитесь создавать оригинальные веб - кнопки для сайта.
Делаем навигацию для сайта в Фотошоп
Идите в Filter > Sharpen > Sharpen ( Фильтр – Резкость – Резкость). Назовите слой S1. Создайте новый слой под слоем S1 и воспользуйтесь инструментом Прямоугольная область (Rectangular marquee tool) для того, чтобы произвести выделение:
Делаем навигацию для сайта в Фотошоп
В этом интересном и полезном уроке мы будем с «нуля» создавать макет для делового сайта.
Делаем навигацию для сайта в Фотошоп
В этом уроке мы будем создавать дизайн шаблона для автомобильного сайта в тёмных цветах.
Делаем навигацию для сайта в Фотошоп
Шаг 2. Создайте новый слой и назовите его “camera2”. Выделите содержимое слоя “camera1” (CTRL + клик по миниатюре слоя). Выполните команду “Select > Modify > Contract” (Выделение > Модификация > Сжать). Установите сжатие в 7 пикселей. Залейте выделение цветом.
Делаем навигацию для сайта в Фотошоп
Шаг 1. Создайте новый документ размером 500px на 400px с разрешением 72 dpi в режиме RGB.
Делаем навигацию для сайта в Фотошоп
В данном уроке мы будем учиться создавать информационный блок для сайта.
Делаем навигацию для сайта в Фотошоп
В этом Фотошоп уроке вы научитесь создавать старинное винтажное радио с использованием простых фигур, градиентов, узоров и текстур. Необходимые материалы:
Делаем навигацию для сайта в Фотошоп
В этом уроке я хотел бы показать вам интересный способ смещения текста.
Делаем навигацию для сайта в Фотошоп
Этот урок по Фотошопу покажет вам, как сделать дизайн сайта или портфолио.
Делаем навигацию для сайта в Фотошоп
Создайте новый файл, размером 773х220 px и разрешением 72. Используя следующий инструмент , разметьте документ как показано ниже.
Делаем навигацию для сайта в Фотошоп
В этом уроке мы воспользуемся комбинацией базовых фигур, текстур, фильтров и готовых изображений для создания купона.
Делаем навигацию для сайта в Фотошоп
Программа Photoshop – фантастическая программа, с помощью которой можно обрабатывать не только фотографии, но и создать реальные объекты. В сегодняшнем уроке, мы продемонстрируем, как создать изображение реалистичного ножа похожего на фотографию в программе Photoshop, используя векторные инструменты для рисования, стили слоя, текстуры, и эффекты.
Делаем навигацию для сайта в Фотошоп
В этом Photoshop уроке мы будем учиться создавать баннер с простым, но эффектным дизайном.
Делаем навигацию для сайта в Фотошоп
Вот такой домик получится после данного урока
Делаем навигацию для сайта в Фотошоп
Итоговый результат:
Делаем навигацию для сайта в Фотошоп
В этом уроке я покажу, как создать макет для бизнес-сайта.