Стильная навигация для сайта
Стильная навигация для сайта
В этом Фотошоп уроке Вы узнаете, как нарисовать стильную чёрную навигацию.Сложность урока: Средний
В этом уроке мы будем создавать стильную черную навигацию для сайта.
Вот так она будет выглядеть в конце урока:
Шаг 1. Для начала создайте новый документ, размер его 560x500 пикселов, и залейте этот новый документ черным цветом. На новом слое создайте фигуру большого прямоугольника со скругленными углами в режиме слой - фигуры, радиус скругления угла –70 пикселов. Растрируйте слой, установите в качестве основного цвета в палитре цветов белый, а в качестве цвета заднего плана – темно серый цвет: #434343
Загрузите выделение слоя с фигурой прямоугольника (<Ctrl+клик по миниатюре слоя с прямоугольником>), поменяйте местами задний и передний цвета в палитре цветов.
Теперь цветом переднего плана должен быть темно-серый, а цветом заднего плана – белый цвет. Используйте инструмент gradient tool (Градиент) для того, чтобы создать линейный градиент от основного к прозрачному на белом прямоугольнике. Этот градиент создаст эффект отражения.
Теперь нужно сжать выделение: Contract (Сжать) из меню select > modify > contract (Выделение – Модификация – Сжать) и сожмите выделение на 2 пиксела. Не снимая выделения, создайте новый слой и заполните его черным цветом. Выделение пока не снимайте.
Шаг 2. Теперь примените инструмент transform tool ( Трансформирование) из меню edit > transform (Редактирование – Трансформирование - Масштабирование), чтобы уменьшить высоту черного прямоугольника до 99 %.
Слою с черным прямоугольником нужно добавить немного растушевки: feather (Растушевка) из меню select > modify >feather (Выделение – Модификация – Растушевка). Размер растушевки – 15 пикселов, после растушевки края черного прямоугольника станут скругленными. Теперь создайте новый слой и заполните его цветом с показателем: #3A3A3A
Далее создайте еще один прямоугольник со скругленными углами – радиус скругления угла – 15 пикселов.
Шаг 3. Создайте еще один слой с округленным прямоугольником поверх всех остальных слоев и, используя инструмент gradient tool (Градиент) линейного типа, создайте заливку градиентом. При этом цвета в палитре должны быть такие: цвет переднего плана: #535353, цвет заднего плана: #2D2D2D
Шаг 4. Увеличьте масштаб изображения до 200% , и создайте отраженный градиент, используя для переднего плана белый цвет и темный серый в качестве цвета заднего плана: #3C3C3C.
Используйте инструмент distort (Искажение) из меню edit > transform > distort (Редактирование – Трансформирование – Искажение) для того, чтобы немного исказить созданный градиент, как показано на рисунке.
Дублируйте градиент и поверните его на 15 градусов.
Создайте еще 3 дубликата. Два из них отразите по горизонтали: flip horizontal (Отразить по горизонтали) из меню edit > transform > flip horizontal (Редактирование – Трансформирование – Отразить по горизонтали).
Шаг 5. Увеличьте масштаб изображения до 500% и используйте инструмент polygonal lasso tool (Прямолинейное лассо) для того, чтобы создать фигуру зеленого цвета (AADD01) на новом слое на одном из тех градиентных изображений, которые мы создавали в шаге четвертом.
Выделите верхнюю небольшую часть только что созданной зеленой фигуры
и примените к этой части hue / sauration (Цветовой тон/Насыщенность) из меню image > adjustments > hue / sauration (Изображение – Коррекция – Цветовой тон/Насыщенность): цветовой тон: -15, насыщенность: +15, яркость: +20.
Шаг 6. Далее к фигуре зеленого цвета из шага пятого примените drop shadow (Тень) из меню layer > layer style > drop shadow (Слой – Стили слоя – Тень) с теми параметрами, которые приведены на рисунке:
Шаг 7. Теперь создайте на новом слое овальную область выделения и заполните ее градиентной заливкой, используя при этом белый цвет – цвет переднего плана, черный цвет – цвет заднего плана.
Сожмите выделение на 2 пиксела, и заполните созданное выделение черным цветом.
Увеличьте масштаб изображения до 300% и выполните заливку градиентом на новом слое цветом, с показателем: от прозрачного к #696969.
Объедините оба этих слоя для создания кнопки и используйте инструмент elliptical marquee tool (Овальная область выделения) для того, чтобы немного обрезать слой с градиентом.
Шаг 8. Дублируйте круглую кнопку с градиентом, поместите ее под зеленую фигуру, которую мы создали в шаге пятом, и отразите ее по горизонтали.
Шаг 9. Создайте маленький округлый прямоугольник серого цвета (#535353), радиус скругления установите 20%.
Немного поверните этот прямоугольник
и добавьте к нему необходимую надпись.
Шаг 10. Создайте округлый прямоугольник, он будет располагаться под зелеными формами, и используйте инструмент rectangular marquee tool (Прямоугольная область выделения) для того, чтобы отсечь от округлого прямоугольника большую часть.
Загрузите выделение оставшейся части от округлого прямоугольника и создайте на ней градиент – цвет переднего плана - #535353, цвет заднего плана – черный.
Теперь добавьте текст.
Шаг 11. На этом урок закончен.
Желаю Вам успехов!
Автор: flash-game-design
Источник: www.flash-game-design.com
Комментарии 101
Урок просто супер)
Спасибо.
Класс! Спасибо
Спасибо! очень понравился урок!
Классный урок. Спасибо!
спасибо
Спасибо!
Только без текста.
А вот и моя работа!!!
Вроде ничего получилось:)
Нужно!
гуд урок! вот что получилось)
Спасибо за урок.
Большое спасибо за урок!
Спасибо за урок!
спасибо за урок))
Спасибо за урок!
Вот моя работа не совсем как у вас! Кто может сверстать это меню?
Действительно красиво! Но слишком сложно расписано! Вы так сказать пошли путём посложнее! Можно было бы сделать легче! Я половину урока делал по другому))
Спасибо!
Прекрасный урок!!! Мне очень понравилось! СпасиБо!!!
классная штука
Урок краетивный и то что надо для таких как мы - продвинутых людей. Респект автору и переводчику..
Постараюсь на днях выложить свою работу
Спасибо за урок! Очень увлекательно!
Спасибо за урок!
Правда было много деталей , которые не были толково разъяснены...
Вот что вышло...
автор, кнопки уныло сделано :О а вообще оригинально... 4.5
Спасибо за урок=) Очень понравился!
интересный урок!
Воть как хотел так и сделал спасибо большое!
Сложновато... Но круто, я делала для группы в контакте...)