Кнопки »

Красивые меню и кнопки

  • Besty
  • 25 май 2011
  • 12:24:39
  • 20083
В этом уроке фотошопа я собираюсь научиться вас создавать красивые панели и кнопки для вашего сайта. Этот стиль распространен сейчас на просторах Интернета.

Красивые меню и кнопки
Вот так будет выглядеть результат урока



Создание меню:

Шаг 1:

Открываем свежий документ, устанавливаем ююбой размер, я выбрал 600x300px, потому что он хорошо вписывается в экран. Заливаем фон светло-серым цветом. Я использовал цвет #e5e5e5.

Красивые меню и кнопки
Создаем новый документ



Шаг 2:

Создаем новый слой и устанавливаем цвет переднего плана #3e3e3e. Теперь возьмите инструмент rectangle tool с радиусом 5px. Создаем прямоугольник с закругленными краями, ширина должна соответствовать ширине будущей панели, а высота - 100px. Высота не должна быть точно такой, мы будем её обрезать.

Красивые меню и кнопки
Новый документ с шаблоном меню


Шаг 3:

Берем инструмент marque tool и создаем рамку вокруг больше части прямоугольника (оставляем около 60px вверху). Нажимаем кнопку delete.

Красивые меню и кнопки
Удаляем нижнюю часть прямоугольника


Шаг 4:

Теперь давайте применим стили слоя stroke и gradient overlay к нашей панели. Открываем настройки стилей слоя blending options и используем следующие настройки.

Красивые меню и кнопки
Gradient Overlay для слоя с меню


Красивые меню и кнопки
Stroke(обводка) для слоя с меню


Красивые меню и кнопки
Вот так у вас может получиться


Шаг 5:

Отлично, теперь, когда мы создали базу, давайте добавим полоску, чтобы заставить это все засиять. Создаем новый слой и увеличиваем масштаб, пока вы не увидите отдельные пиксели. Теперь берем инструмент pencil tool, выбираем размер 1рх и берем белый карандаш. Теперь мы будем рисовать обводку в один пиксель по всему верху (1 пиксель ниже) и вокруг углов. Посмотрите на картинку, и вы поймете, что я имею в виду.

Красивые меню и кнопки
Добавим полоску в меню


Красивые меню и кнопки
Вот так выглядит при масштабе 100%


Шаг 6:

Устанавливаем режим отображения слоя с белыми полосками на overlay и уменьшаем непрозрачность, как это необходимо.

Красивые меню и кнопки
После установки режима отображения на Overlay


Шаг 7 (необязательныйl):

Теперь у нас закончена базовая панель. На данном этапе вы можете добавить детали, чтобы она выглядел немного по-другому. Настройки стиля слоя Drop shadow с pattern overlays как правило работают отлично! Представляю вашему вниманию несколько вариантов:

Drop Shadow:

Красивые меню и кнопки
Добавим тень на меню с помощью Drop Shadow


Pattern Overlays:

Красивые меню и кнопки
Добавим pattern на слой с меню


Красивые меню и кнопки
Или вот так с косыми линиями


Красивые меню и кнопки
А может так с шахматкой


Красивые меню и кнопки
Или такой паттерн с красивым узором для меню


Красивые меню и кнопки
Или только шум


Вы также можете изменить цвета. Практически любой цвет будет хорошо смотреться. Я буду использовать различные цвета для кнопок.

Панель навигации:

Отлично, если вы хотите превратить панель в панель навигации, то всё, что вам нужно, это добавить разделители по 2рх и текст.

Шаг 1:

Создаем новый слой, увеличиваем масштаб и рисуем разделитель, как я показываю на картинке ниже:

Красивые меню и кнопки
Добавим вертикальные полоски для псевдо-3Д эффекта в меню


Шаг 2:

Устанавливаем режим отображения слоя overlay и снимаем непрозрачность до 15%.

Красивые меню и кнопки
Режим отображения для слоя Overlay


Шаг 3:

Решаем, сколько ссылок навигации нам необходимо, и делим панель на такое количество секций. Моя панель очень короткая, поэтому я их добавляю всего несколько.

Красивые меню и кнопки
Дублируем полоски и делим меню на пункты


Шаг 4:

Добавляем текст.

Красивые меню и кнопки
Добавили текст и меню готово!


Создание кнопок:

Чтобы создать кнопки вы будете использоваться такую же технику, только нижние углы тоже будут закруглены.
Вот как это будет выглядеть:

Красивые меню и кнопки
Такую кнопку создать в фотошопе вы уже сможете быстро и легко!


Итак, это всё! Вот как выглядит мое окончательное изображение:

Красивые меню и кнопки
Вот теперь такую навигацию вы запросто сделаете сами!


Перевод урока сделан для photoshoplove.ru
Оригинал урока http://crypticgfx.com/
Bookmark and Share
  • Виктор
  • 23 июля 2013 22:08
  • Комментариев: 0
  • Новостей: 0
Меню красивое только не понятно как ссылки будут работать, ведь текст просто нарисован на панели?
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Уроки фотошопа
Свежие уроки
{lastnews}
Видео уроки
Популярные уроки
Наш опрос
Какие уроки вам больше нравятся?