Створення сайту

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

Відкриваємо програму Photoshop, далі меню “Файл”, “Відкрити” і відкриваємо заздалегідь підготовлене зображення. Якщо його розміри співпадають з бажаними, це добре. Інакше нам доведеться підігнати зображення під потрібні нам розміри. А це робиться за допомогою функції масштабування, і інструменту “Кадрування”, іншими словами обрізки. У першому варіанті виділяємо усе зображення за допомогою інструменту “Прямокутне виділення”, тепер вибираємо вкладку “Редагування” на верхній панелі меню програми і “Трансформація”, з випадного меню – функцію “Масштаб”. Далі на верхній панелі параметрів функції масштабування задамо однакові параметри висоти і ширини в процентному співвідношенні в полях “W” і “H”. Спочатку ці параметри рівні 100%, але якщо наприклад ми хочемо зменшити зображення на 30%, тоді слід вписати у вище згадані поля значення рівні 70%. Тиснемо “Застосувати”. Саме зображення зберегло свою якість і цілісність, але стало значне меншим. При цьому реальні розміри все ще не співпадають з потрібними нам розмірами. Знімаємо прямокутне виділення. Тепер здійснюватимемо обрізання непотрібних фрагментів. Переходимо на інструмент “Кадрування”, на панелі параметрів інструменту вказуємо параметри обрізання у вигляді 200 пікселів по ширині і висоті зображення. Виділяємо курсором потрібну нам область зображення, тиснемо праву клавішу і вибираємо “Вирізування”. Після обрізання виделеная область залишиться. Все, зараз у нас є основа потрібних нам розмірів. Як бачимо доки вона представлена у вигляді малюнка. Зараз на ній ми створюватимемо кольорові кнопки меню із закругленими кутами. Для цього активуємо на панелі інструментів іконку у вигляді закругленого прямокутника. У верху на панелі параметрів цього інструменту слід вибрати “Фиксирований розмір” і вказати наприклад ширину 195 пікселів і висоту – 40 пікселів, а також радіус закруглення кутів – наприклад 15пкс. Там же можемо вибрати потрібний стиль шару, тобто оприделенний вид і колір будующей кнопки. А тепер за допомогою курсора наносимо стільки кнопок на заздалегідь підготовлену кольорову основу, скільки буде пунктів меню. При цьому стежимо щоб кнопки розташовувалися одна під інший рівномірно, на однаковом відстані. Наступний етап – нанесення тексту, тобто тепер треба нанести назву кожного пункту меню за допомогою інструменту “Текст” вибраним стилем шрифту і кольором. Тут все просто. У подробиці не вникатимемо.

Якщо хочете вивчити основи Photoshop детальніше, тоді вам сюди – системне адміністрування, інсталяція, комп’ютерна графіка.

І нарешті прийшов час розрізати те, що вийшло на стільки частин, скільки буде пунктів меню. А зделаем ми це за допомогою інструменту “Фрагмент”. Активуємо його іконку. Курсор набере вигляду пера. Подноим його до верхнього лівого краю зображення і виділяємо перший фрагмент, іншими словами саму верхню кнопку меню. Тепер підносимо курсор до нижнього лівого краю виділення і виділяємо наступний фрагмент і так далі, поки усе зображення не буде розділено на окремі області. Після усіх цих операцій треба зберегти наш документ. Відкриваємо меню “Файл” і вибираємо пункт “Зберегти для Web”. Програма збереже зображення у вигляді декількох графічних файлів указаного формату і в указаном місці. Далі залишається прикріпити ці зображення до html документу і зделать їх графічними посиланнями. Але це тема вже іншої статті.