Создаем Красивое Графическое Меню

Для того, чтобы создать красивое графическое меню ссылок нам понадобятся всего две вещи - знание основ html верстки и умение работать с графическим редактором Adobe Photoshop. И так, приступаем сразу к практике. Но сначала определимся, как именно будет выглядеть наше меню. Давайте создадим меню ссылок размерами 200Х200 пикселей, фоном у нас будет заранее подобраное какое-нибудь цветное изображение, а ссылки представлены в виде обьемных кнопок оприделенного цвета.

Открываем программу Photoshop, далее меню "Файл", "Открыть" и открываем заранее подготовленное изображение. Если его размеры совпадают с желаемыми, это хорошо. В противном случае нам придется подогнать изображение под нужные нам размеры. А это делается с помощью функции масштабирования, и инструмента "Кадрирование", другими словами обрезки. В первом варианте выделяем все изображение с помощью инструмента "Прямоугольное выделение", теперь выбираем вкладку "Редактирование" на верхней панели меню программы и "Трансформация", с выпадающего меню - функцию "Масштаб". Далее на верхней панели параметров функции масштабирования зададим одинаковые параметры высоты и ширины в процентном соотношении в полях "W" и "H". Изначально эти параметры равны 100%, но если например мы хотим уменьшить изображение на 30%, тогда следует вписать в выше упомянутые поля значения равные 70%. Жмем "Применить". Само изображение сохранило свое качество и целостность, но стало значительно меньшим. При этом реальные размеры все еще не совпадают с нужными нам размерами. Снимаем прямоугольное выделение. Теперь будем осуществлять обрезку ненужных фрагментов. Переходим на инструмент "Кадрирование", на панели параметров инструмента указываем параметры обрезки в виде 200 пикселей по ширине и высоте изображения. Выделяем курсором нужную нам область изображения, жмем правую клавишу и выбираем "Вырезание". После обрезки выделеная область останется. Все, сейчас у нас есть основа нужных нам размеров. Как видим пока она представлена в виде рисунка. Сейчас на ней мы будем создавать цветные кнопки меню с закругленными углами. Для этого активируем на панели инструментов иконку в виде закругленого прямоугольника. В верху на панели параметров этого инструмента следует выбрать "Фиксированый размер" и указать например ширину 195 пикселей и высоту - 40 пикселей, а также радиус закругления углов - например 15пкс. Там же можем выбрать нужный стиль слоя, то есть оприделенный вид и цвет будующей кнопки. А теперь с помощью курсора наносим столько кнопок на заранее подготовленную цветную основу, сколько будет пунктов меню. При этом следим чтобы кнопки располагались одна под другой равномерно, на однаковом расстоянии. Следующий этап - нанесение текста, то есть теперь нужно нанести название каждого пункта меню с помощью инструмента "Текст" выбраным стилем шрифта и цветом. Тут все просто. В подробности не будем вникать.

Если хотите изучить основы Photoshop более детально, тогда вам сюда - системное администрирование,инсталляция,компьютерная графика.

И наконец пришло время разрезать то, что получилось на столько частей, сколько будет пунктов меню. А зделаем мы это посредством инструмента "Фрагмент". Активируем его иконку. Курсор примет вид пера. Подноим его к верхнему левому краю изображения и выделяем первый фрагмент, иными словами самую верхнюю кнопку меню. Теперь подносим курсор к нижнему левому краю выделения и выделяем следующий фрагмент и так далее, пока все изображение не будет разделено на отдельные области. После всех этих операций нужно сохранить наш документ. Открываем меню "Файл" и выбираем пункт "Сохранить для Web". Программа сохранит изображение в виде нескольких графических файлов указаного формата и в указаном месте. Далее остается прикрепить эти изображения к html документу и зделать их графическими ссылками. Но это тема уже другой статьи.