Путешествуя в Интернете мы постоянно встречаем сайты на которых кнопки меню и другие кнопки вызывающие окна выглядят объемно. Это выглядит довольно красиво и в сочетании с плоским «миром» Интернета придает реалистичный объем страницам сайта. И так эта статья будет посвящена тому, как самостоятельно сделать объемные кнопки для оформления меню навигации на вашем сайте.

Для такой работы нужно всего лишь иметь под рукой графический редактор Adobe Photoshop. Буду рассказывать, как им воспользоваться, как будто вы впервые услышали об этой программе. Хотя что бы научиться профессионально пользоваться этим графическим пакетом, я советую Вам пройти специальные авторизованные курсы Adobe

После запуска программы открывается рабочий стол в верху которого находится главное меню, справа несколько складываемых панелей, слева меню графических кнопок. На рабочем столе пока только серый фон. Чтобы организовать рабочую область нужно выбрать в меню «файл» вкладку «новый». Появится диалоговое окно предлагающее задать размер документа. В полях высота и ширина задаем желаемые размеры кнопки, для удобства встраивания этого графического элемента в программный код сайта задаем размеры в пикселях. Подтверждаем заданные параметры кнопкой «Ок». Созданный документ выглядит девственно белым и готовым для любой импровизации.

На левой панели инструментов выбираем Прямоугольник. Но не спешите его рисовать, ведь нам нужен не просто прямоугольник, а с закругленными углами. Для этого подводим курсор на прямоугольник и нажимаем правую кнопку мыши, вызывая, таким образом, подменю с различными видами фигур и выбираем нужную. Затем, в верхней части меню (под главным меню) выбираем радиус – это задание радиуса скругления углов. Подбираем такой, чтобы нам нравился. Далее необходимо придать объем кнопке. Это делается в графе меню «стиль слоя», которая находится в самом низу экрана, справа и выглядит как знак функции от х (fx). На эту клавишу нажимаем правой кнопкой мыши и выбираем подходящий для наших целей стиль.

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

В правой части экрана находим кнопку «Текст» она выглядит как квадратик с буквой Т. Нажимаем ее. Помещаем курсор на созданную нами кнопку в нужном месте, учтите, что там где вы поместите курсор будет находится первая буква текста. Далее, выбираем цвет и переносим его на палитру инструментов, щелкнув по нему мышкой. Теперь пишем текст.

На этом наша работа завершена. Если есть желание, то можно с помощью кадрирования обрезать лишнее поле вокруг созданной кнопки, сделать тени на самом тексте, поиграть со стилем текста. В общем навести всяческую красоту.

Теперь наш шедевр необходимо сохранить. Причем сделать это надо так, что бы не потерять все полученные эффекты и в тоже время файл не был очень тяжелым, мы же не хотим что бы наш сайт еле ворочался. Графические файлы следует сохранять в форматах gif или jpg.

Ну вот, теперь ваш сайт тоже обзавелся объемными кнопками, а вы, в свою очередь, освоили еще один инструмент, позволяющий не только сделать то, что вам хочется, но и получить от этого удовольствие!

Автор Евгений Григорянц.