ГЛАВНАЯ ФОРУМ F.A.Q ПРАВИЛА КОНТАКТЫ
Всё для Adobe Photoshop - photoshop-free.ru
Добро пожаловать в мир Adobe Photoshop! На сайте Вы можете найти уроки для фотошопа, файлы для фотошопа,принять участие в конкурсах,скачать Adobe Photoshop[cs5,сs3,cs4]. На форуме Вы можете задать любой вопрос и быстро получить на него ответ, в перерывах между Photoshop'ом - просто пообщаться на любые темы.
Каталог файлов Уроки для фотошопа Фотоальбом
Логин:
Пароль:
Забыл пароль · Регистрация |
RSS Файл-хостинг

Категории каталога

НАВИГАЦИЯ ПО САЙТУ

Главная » Каталог статей » Уроки по веб-дизайну:

 


  готовое меню

На этот раз будет посложнее немного, тока не в плане рисования, а в плане хтмл icon_biggrin.gif
Для начала сделаем базу для меню, допустим вот такую


теперь сделаем кнопки. Для этого берём Line tool 2 пиксела шириной и рисуем вертикальную линию чёрного цвета, где предположительно будет кнопка. Копируем линию и нижний слой делаем белого цвета. Сдвигаем вправо или влево на один пиксел белую линию и соединяем слои. Копируем столько раз. сколько кнопок хотим сделать. ставим наш слой на Overlay (Soft Light по желанию)



Добавляем к каждой кнопке надпись чтобы меню выглядело как меню icon_biggrin.gif



Теперь, надо поставить направляющие на границы кнопок. Кто не знает как это делается - жмём Ctrl+R (или выбираем вид-линейка) и мышкой с левой линейки перетягиваем направляющие в нужное место



Самое интересное начинается сейчас icon_biggrin.gif Импортируем нашу менюшку в Image Ready. Есть там такое меню - Slice, вот оно-то нам и нужно icon_wink.gif Идём Slice -> Create Slices from Guides. Получаем примерно вот такой вид


Теперь нам нужна панель Web Content. Если у вас её нет, то активируем её через Window -> Web Content.
На ней для каждого куска будет отдельный слой. Нам нужно создать кнопку, которая будет менятся при нажатии. В прнципе можно сделать когда она меняется при наведении указателя и при нажатии, но это уже после того как вы освоите этот урок icon_wink.gif тогда без проблем сами сделаете icon_wink.gif
Возвращаемся к уроку ) Для каждого куска создаём Rollover State. Для этого есть специальная кнопочка, которая так и называется, Create Rollover State icon_wink.gif



Теперь главно осмыслить следующее - когда вы находитесь на этой панельке в этой Rollover State, то изменения будут касаться только одного куска, который выделен и только при наведении мышки. Поэтому - выделяем нужный кусок, точнее его over state (см. скрин ниже), скрываем в панеле слоёв меню, и на месте нашего куска, над которым работаем в данный момент делаем какую-нибудь кнопку (я просто залил одним цветом).



После того как мы сделали это - меню почти готово icon_wink.gif осталось только правильно сохранить icon_wink.gif Идём File-Saved Optimized as и внизу выбираем Images and HTML (или HTML and Images icon_biggrin.gif)
Всё! У вас должна создаться папка с рисунками и html страничка, если вы откроете которую, будет наше меню icon_wink.gif

Если открыть в редакторе хтмл страничку, то будет примерно такой код, в котором вам надо только вписать в нужные места ссылки на вашем сайте icon_wink.gif Ну а если вы не понимаете что написано внизу, то вам надо срочно учить хтмл и яву или не морочить себе голову с сайтами icon_lol.gif icon_wink.gif
Код:
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<!-- ImageReady Preload script (Untitled-1.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
   if (document.images) {
      rslt = new Image();
      rslt.src = arg;
      return rslt;
   }
}

function changeImages() {
   if (document.images && (preloadFlag == true)) {
      for (var i=0; i<changeImages.arguments.length; i+=2) {
         document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
      }
   }
}

var preloadFlag = false;
function preloadImages() {
   if (document.images) {
      menu_01_over = newImage("images/menu_01-over.gif");
      menu_02_over = newImage("images/menu_02-over.gif");
      menu_03_over = newImage("images/menu_03-over.gif");
      menu_04_over = newImage("images/menu_04-over.gif");
      menu_05_over = newImage("images/menu_05-over.jpg");
      preloadFlag = true;
   }
}

// -->
</script>
<!-- End Preload script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (Untitled-1.psd) -->
<table id="Table_01" width="500" height="50" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td>
         <a href="#"
            onmouseover="changeImages('menu_01', 'images/menu_01-over.gif'); return true;"
            onmouseout="changeImages('menu_01', 'images/menu_01.gif'); return true;"
            onmousedown="changeImages('menu_01', 'images/menu_01-over.gif'); return true;"
            onmouseup="changeImages('menu_01', 'images/menu_01-over.gif'); return true;">
            <img name="menu_01" src="images/menu_01.gif" width="100" height="50" border="0" alt=""></a></td>
      <td>
         <a href="#"
            onmouseover="changeImages('menu_02', 'images/menu_02-over.gif'); return true;"
            onmouseout="changeImages('menu_02', 'images/menu_02.gif'); return true;"
            onmousedown="changeImages('menu_02', 'images/menu_02-over.gif'); return true;"
            onmouseup="changeImages('menu_02', 'images/menu_02-over.gif'); return true;">
            <img name="menu_02" src="images/menu_02.gif" width="100" height="50" border="0" alt=""></a></td>
      <td>
         <a href="#"
            onmouseover="changeImages('menu_03', 'images/menu_03-over.gif'); return true;"
            onmouseout="changeImages('menu_03', 'images/menu_03.gif'); return true;"
            onmousedown="changeImages('menu_03', 'images/menu_03-over.gif'); return true;"
            onmouseup="changeImages('menu_03', 'images/menu_03-over.gif'); return true;">
            <img name="menu_03" src="images/menu_03.gif" width="99" height="50" border="0" alt=""></a></td>
      <td>
         <a href="#"
            onmouseover="changeImages('menu_04', 'images/menu_04-over.gif'); return true;"
            onmouseout="changeImages('menu_04', 'images/menu_04.gif'); return true;"
            onmousedown="changeImages('menu_04', 'images/menu_04-over.gif'); return true;"
            onmouseup="changeImages('menu_04', 'images/menu_04-over.gif'); return true;">
            <img name="menu_04" src="images/menu_04.gif" width="100" height="50" border="0" alt=""></a></td>
      <td>
         <a href="#"
            onmouseover="changeImages('menu_05', 'images/menu_05-over.jpg'); return true;"
            onmouseout="changeImages('menu_05', 'images/menu_05.jpg'); return true;"
            onmousedown="changeImages('menu_05', 'images/menu_05-over.jpg'); return true;"
            onmouseup="changeImages('menu_05', 'images/menu_05-over.jpg'); return true;">
            <img name="menu_05" src="images/menu_05.jpg" width="101" height="50" border="0" alt=""></a></td>
   </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

АНГЛО-РУССКО-НЕМЕЦКИЙ ПЕРЕВОД ОСНОВНЫХ МЕНЮ В ФОТОШОПЕ
Режимы смешивания/Режимы наложения
Фотошоп для начинающих
Рейтинг: 0.0/0



Добавил: To4kA Изменить репутацию Вручить награду
Название материала : готовое меню
Дата добавления материала: 05.08.2007 , 23:48 , Воскресенье
Просмотров : 1868
Категории: Уроки по веб-дизайну:
Другие новости по теме:
Как добавить сайт в закладки/избранное?
Chrome
Mozilla Firefox
Opera
Еxplorer


Написать администрации сайта

E-mail отправителя *:
Тема письма *:
Ссылка на страницу *:
Комментарии:
Защитный код *:

 
  Всего комментариев: 0
 

Имя*:
Email:


  

=)
Код *:

Курсы менеджмента и логистики. Курсы логистика таможня.. Доставка торфа: торф. Торф, сертификат МЭР.. MyLove - популярные знакомства: знакомства бесплатно.

ПОИСК

Поиск

ПОМОЩЬ НОВИЧКУ

ЧАТ

ДРУЗЬЯ САЙТА

СТАТИСТИКА САЙТА


Где то тут
Онлайн всего: 7
Гостей: 7
Пользователей: 0



 
Анализ сайта Каталог-Молдова - Ranker, Statistics

статистика
WOlist.ru - каталог качественных сайтов Рунета


 
Rambler's Top100
Вход | Регистрация | Контакты
При использовании любых материалов с сайта ссылка на http://photoshop-free.ru/ обязательна!
Хостинг от uCoz | Все для Adobe Photoshop. Кисти(Brushes) , стили(Styles) , клипарт(Kliparts) , действия(Actions) , фигуры(Shapes), шрифты (Fonts) , текстуры (Textures) , градиенты (Gradients) бесплатно, виньетки, шаблоны для фотомонтажа, иконки , рамки!