Навигация для сайта в Photoshop
Этот урок рассчитан скорее для новичков в веб-дизайне. Он покажет, как сделать элементы будущего сайта более контрастными и четкими.
Рисовать будем горизонтальную панель навигации. В действительности, она может быть гораздо шире. Моя будет шириной 600 пикселей.
Создайте новый документ (Ctrl+N) и активируйте 
Rounded Rectangle Tool с радиусом 3 пикселя. Нарисуйте прямоугольник со скругленными углами.
Приблизьте изображение и рассмотрите края. Очень часто они бывают не четкие и плохо выглядят. Это нужно обязательно исправлять, многие этого не делают.
С помощью 
Pen Tool выделите прямоугольник, чтобы были видны все направляющие, а затем, с зажатой клавишей Shift, выделите по четыре точки с каждой стороны и на большом увеличении изображения двигайте в нужную сторону стрелками на клавиатуре, пока не достигните резкости на краях.
4 точки нужно выделять, чтобы не деформировать углы.
В итоге должен получиться прямоугольник с четкими границами.
Кликните по слою дважды, чтобы открыть настройки его свойств (либо Layer→Layer Style). Добавьте тень. Желательно чтобы тень имела оттенок основного цвета будущей навигации.
Небольшой градиент сверху-вниз.
И обводка.
Наша плашка преобразилась.
Уменьшите Opacity (Прозрачность) слоя до 80%. И нарисуйте два темно зеленых градиента сверху и снизу под слоем с плашкой. Нижний градиент можно немного размыть 
Blur Tool-ом с большим радиусом, чтобы образовалась тень по центру.
Создайте новый слой (Ctrl+Shift+N) и проведите две светлые однопиксельные линии параллельно верхней и нижней сторонам прямоугольника. Они придадут плашке дополнительную контрастность и объем.
А для полноты картины на дополнительном слое сделайте по однопиксельному градиенту сверху-вниз слева и снизу-вверх справа.
На новом слое разместите пункты будущего меню. Текстовое поле лучше делать параграфом с выравниванием по обеим сторонам. Тогда между словами будут равные расстояния. Если пункт меню состоит из двух слов, то выделите пробел между ними и уменьшите размер шрифта.
Текст тоже нуждается в дополнительном объеме и контрасте. Войдите в свойства слоя и установите вот такие настройки тени.
Теперь текст кажется немного вдавленным. Возле пунктов меню расставляем иконки для наглядности.
Добавьте разделительные линии между пунктами.
Вуаля! Менюшка готова. Осталось только нарисовать поведение активного пункта меню.
На новом слое сделайте градиент такого же цвета как разделители между пунктами меню.
Хорошо, но этого недостаточно. Нужно добавить объема.
С левой стороны необходимо сделать легкую тень. Вот так.
А справа и по нижней грани проведите светлые линии.
Совсем другое дело.
Поэкспериментируйте с цветом, формой, плюс можно прорисовать поведение пунктов меню при наведении курсора. Не забывайте о дополнительных мелких деталях, придающих контраст, объем и законченный вид элементам будущего сайта.
>Приблизьте изображение и рассмотрите края. Очень часто они бывают не четкие и плохо выглядят. Это нужно обязательно исправлять, многие этого не делают.
Можно добавить, что если изначально рисовать прямоугольник при View > Actual pixels, то края сразу будут ровным, соответствуя пиксельной сетке. При дальнейшем редактировании в этом режиме (то есть без увеличения или уменьшения картинки), края останутся четкими — шаг при нажатии клавиши-стрелки будет равен строго одному пикселю.
Другой способ: задавать в Options четкие размеры прямоугольника перед его созданием. Тогда он ляжет точно на пиксельную сетку независимо от увеличения изображения.
Каждый раз ровнять края очень уж муторно.
Ответить
uggallery, пасибо, есть такое дело. Добавлю.
Я здесь специально заострил внимание, потому что урок для новичков. А я не редко вижу на сайтах мутные края у блоков. Хотел ткнуть носом =)
Ответить
fazeful, Браво. Как у тебя получаются такие приятные цвета? Поделишься секретом подбора цвета? :)
Ответить
Спасибо.
Да вроде нет секрета. По-разному. Иногда тыкаю в палитру, иногда смотрю веера (пантон например), иногда какие-то вещи вдохновляют. Как-то так =)
Ответить
Где смотришь веера? На pantone.com? Или другие адреса знаешь?
Ответить
в шопе =) переключением палитры =)
Ответить
рекомендую для цветовых дел ходить на kuler.adobe.com :)
Ответить
да, да! точно, точно!
Ответить
Ответить
спасибо
Ответить
Заранее СПС)
Ответить
Двигать направляющие нужно только если стороны не попали в пиксели. Можно двигать две точки с угла, а можно 4 с одной стороны, что удобней, на скрине один угол.
Ответить
Ну, что-то, вроде, как бы понял, для чего это Спасибо)
Ответить
Что интересно, практически всё это можно в современных браузерах сделать практически без картинок :) Вот интересно, пробовал кто-нибудь установить паралели между СSS3 параметрами для тени и закруглений, и параметрами в PS?
Я попробовал, вроде получается более-менее похоже, но помоему что-то не то, всё-равно
Ответить
Прикольно) Никогда так уголки не загибал.
Ответить
Спасибо, красивое меню получается. Сделаю-ка я такое и для своего сайта.
Ответить
спасибо за урок. А насчет цвета то хорошо подобранный.
Ответить