Створюємо панель меню за допомогою CSS-спрайтів, Все для веб-дизайнера та програміста
Створюємо нову групу шарів і називаємо її "Панель до". У цю групу ми виділятимемо шари для панелі меню яке відображатиметься за замовчуванням, до наведення на нього курсору миші. Беремо інструмент Rounded Rectangle Tool (Прямокутник із округленими кутами) і малюємо в цьому шарі прямокутник з радіусом закруглення країв 10 пікселів довільного розміру. Тепер виставляємо точні розміри елемента та його положення в документі, для чого переходимо в Edit – Free Transform (Ctrl+T) та виставляємо значення як на скріншоті
Перейменовуємо шар із прямокутником у «Панель до». Наступним кроком ми додаємо до цього шару градієнтну заливку та обведення. Для цього подвійним натисканням на шарі відкриваємо панель зміни стилів шару (Layer Style). Відзначаємо Gradient Overlay (Накладення градієнта) та створюємо градієнтну заливку від кольору #b7b7b7 до білого (#ffffff) як на скріншоті
Додаємо внутрішнє (inside) обведення (Storke) в 1 піксель кольором #c6c6c6
У нас вийшла панель із м'яким градієнтом. Тепер ми намалюємо роздільники пунктів меню. Для цього інструментом Rectangle Tool (Прямокутник) малюємо прямокутник висотою 30 пікселів і шириною 1 піксель і розміщуємо його точно покоординатам як на малюнку
Перейменовуємо шар на «розділювач». Дублюємо цей шар три рази і розподіляємо їх по всій панелі, змінюючи для кожного шару координати Х. Для другого роздільника встановлюємо по Х 200 пікселів, для третього – 300, для четвертого – 400
Об'єднуємо шари з усіма роздільниками в один і називаємо його "розділювачі". Тепер до цього шару до панелі стилів додаємо градієнт від кольору #929292 до кольору #dddddd. Відзначаємо Reverse (Інверсія)
І тепер нам залишилося додати лише тексти написів. Інструментом Horizontal Type Tool (Горизонтальний текст) вводимо текст «Головна». Вибираємо шрифт Tahoma, жирний, 15 пікселів, без згладжування
Розташовуємо його так як на скріншоті
Інші пункти меню створюємо дублюванням цього та зміною їх положення по осі Х. Розміщуємо їх так: Блог - 150 пікселів, Галерея - 250, Файли - 350 і Про сайт - 450 пікселів
Поєднуємо шари з текстом в один і називаємо його «Написи». Додаємо до цього шару тінь
Тепер нам потрібно збільшити розмір полотна. Викликаємо панель Canvas Size (Розмір Полотна) (Alt+Ctrl+C) та вводимо параметри як на малюнку нижче
Дублюємо повністю нашу групу «Панель до» та копію перейменовуємо на «Панель після». Виділяємо групу "Панель після" переміщаємо її точно під іншою панеллю
Наступним кроком замінюємо градієнти панелі та тексту у групі «Панель після». Ця темніша панель буде відображатися при наведенні курсору миші на пункт меню, імітуючи тим самим натискання на кнопку. Застосовуємо такі градієнти: для панелі від кольору #8f8f8f до #d7d7d7, для тексту від #6a6a6a до #939393. Для градієнта до текстовогошаром відзначаємо галочкою пункт Reverse (Інверсія). І останнім кроком видаляємо шар Background
Ми отримали підсумкове зображення. Зберігаємо його для Web (Alt+Shift+Ctrl+S) у форматі PNG-24.
І ось ми підійшли до другої частини нашого уроку, де ми займемося версткою нашого меню за допомогою HTML і CSS для представлення його на веб-сторінці. Редактор можна використовувати будь-хто. Я редагуватиму код у Notepad++. Першим пунктом створюємо новий документ index.html та прописуємо в ньому DOCTYPE, теги HTML, HEAD, META, TITLE, а також BODY
На цьому з файлом index.html ми поки що закінчимо і займемося таблицею стилів. Створимо новий файл style.css і відразу пропишемо в ньому скидання всіх стилів
далі ми поставимо розміри нашого меню, спосіб відображення елементів списку, а також загальні стилі для посилань
тепер задамо розташування картинки для кожного елемента нашого меню за допомогою властивості background-position для відображення за замовчуванням
та для відображення при наведенні на елемент курсору миші
А тепер повернемося до файлу index.html і долучимо до нього нашу таблицю стилів
От і все! Ми з Вами пройшли всі кроки цього уроку та отримали пристойне інтерактивне меню. До швидких зустрічей!