Всем привет. Сегодня мы будем рисовать HMENU.
Это две такие кнопки которые мы используем в дизайнах.
И в конце я расскажу как их задействовать. Приступим...
Создам прозрачный документ с такими размерами: 133х75.
За тем создадим новый слой: Ctrl + Shift + N.
Зальём его белым цветом: Ctrl + G (текущий цвет настраиваем на панеле).
За тем нарисуем какой нибудь квадрат/овал. Таким цветом: #bcbcbc.
Вот что вышло у меня:
За тем перейдём в: Слой > Стиль слоя > Тень...
И настроим всё так как тут:
За тем перейдём там же в: Тиснение.
И настроим всё так как тут:
У Вас должно всё получится как тут:
За тем выйдем из Настройки стилей. И сделаем отражение.
Выделим наш уже готовый HMENu и сделаем копию.
За тем сделаем из неё отражение.
Что бы сделать отражение перейдём в: Редактирование > Трансформирование > Отразить по вертикали.
Теперь делаем прозрачность - 20%.
И берём ластик...стираем не нужное.
И в итоге у Вас должно получится так:
Теперь уберём белый фон. И сохраним данное изображение как PNG и под названием: HMENU1.
После того как Вы сохранили первый рисунок Вам нужно придать какой нить эфект на вторую картинку.
А тоесть что будет происходить когда Вы наведетё мышь на HMENU.
Я добавляю в Стилях к нашей картинке эфект Глянца. Цвет: #00f6ff.
И настраиваю его так:
Теперь сохраняем его как HMENU2. Формат: PNG.
Вот и всё. Теперь будем его собирать...
Заливаем две картинки: HMENU1.png; HMENU2.png в файловый менеджер.
За тем зайдём в Ваш CSS (Таблица стилей)
И в любое место вставим:
Code
#hmenu a {
text-decoration: none;
color: #ffffff;
background: url(http://ПУТЬ К КАРТИНКАМ/HMENU1.png) no-repeat center top;
display: block;
height: 75px;
width: 150px;
text-align: center;
font: bold 13px/38px tahoma, Times, serif;
}
#hmenu a:hover {
background: url(http://ПУТЬ К КАРТИНКАМ/HMENU2.png) no-repeat top center;
display: block;
height: 75px;
width: 150px;
color: #ffffff;
text-align: center;
font: bold 13px/38px tahoma, Times, serif;
}
За тем в нужном Вам месте (где Вы хотите видеть данные картинки HMENU) ставим:
Code
<td width="80" height="37" id="hmenu"><a href="$HOME_PAGE_LINK$" title="В начало">Главная</a></td>
<td width="80" height="37" id="hmenu"><a href="/forum/" title="Форум">Форум</a></td>
<td width="80" height="37" id="hmenu"><a href="/load/" title="Файлы">Файлы</a></td>
<td width="80" height="37" id="hmenu"><a href="/publ/" title="Каталок статей">Статьи</a></td>
<td width="80" height="37" id="hmenu"><a href="/publ/" title="Каталок статей">Фото</a></td>
Все ссылки и названия ссылок заменяете на свои.
Вот и всё! Удачи в использовании
Желательно показывайте что выходит у Вас... Буду оценивать.