Кнопки часто зустрічаються на Web-сторінках, що мають навігаційну систему. Звичайно, цілком можна обійтися засобами HTML, а також редакторів Web-сторінок, які вже мають досить широкий вибір стандартних кнопок. Але якщо ви бажаєте зробити Web-сторінку дійсно стильної, то вам доведеться створити кнопки самостійно.

Кнопки можуть мати різні геометричні форми. Найпростішою з них є прямокутник.

прямокутна кнопка

Відкриваємо новий документ. Командою Image> Mode> Grayscale переводимо документ в режим градацій сірого кольору. Створюємо зображення прямокутника з параметрами майбутньої кнопки. Для цього використовуємо інструмент з палітри інструментів . Тепер переводимо зображення в режим RGB. На палітрі Color (Колір) значення параметрів R, G і В встановлюємо близько 170. Заливаємо наш прямокутник сірим кольором, використовуючи інструмент Paint Bucket (Ковш) <G>.

Мал. 351.

Мал. 352.

Після цього переводимо наше зображення в режим Bitmap за допомогою команди Image> Mode> Bitmap. Встановлюємо в списку Use в групі Method (Метод) значення Halftone Screen.

Мал. 353.

Мал. 354.

У вікні, встановлюємо значення параметрів для Halftone Screen: Frequency - 256 lines / inch (ліній на дюйм); Angle - 45; Shape - Round. В результаті перетворень прямокутник буде залитий дрібними сірими зірочками.

Тепер знову переведемо наше зображення в режим Grayscale за допомогою команди Image> Mode> Grayscale. Відношення розмірів Size Ratio встановлюємо - 1, т. Е. Один до одного. Після цього переведемо наше зображення в режим RGB. В е-те режимі застосовуємо фільтр: Filter> Stylize> Find Edges. Наш прямокутник повинен знайти темну окантовку.

Мал. 355. В режимі RGB застосовуємо фільтр Stylize> Fmd Edges, що додасть прямокутника темну окантовку

Застосовуємо фільтр Filter> Blur> Motion Blur з значеннями параметрів: Angle - 36 °, Distance - 19 пікселів. Параметр Angle регулює, кут падіння тіні, а Distance - глибину цієї тіні. Наведені тут значення параметрів не є обов'язковими (як, втім, і у всіх інших прикладах). Ви можете підібрати їх експериментально на свій розсуд, регулюючи опуклість вашої кнопки.

Мал. 356. Параметр Distance встановлює глибину тіні

Розмальовуємо зображення, використовуючи команду Image> Adjust> Hue / Saturation. Однак первісний колір робимо спокійним: не яскравий і не дуже тьмяний. Настроюється тут колір в майбутньому буде кольором окантовки кнопки.

Мал. 357.

виділяємо інструментом Rectangular Marquee (Прямокутне виділення) опуклу область кнопки. Трохи висвітлюються її, застосовуючи криві: Image> Adjust> Curves (<Ctrl> + <M>).

Мал. 358. Опуклу область кнопки трохи висвітлюємо, використовуючи для цього криві

Таким чином, ми отримали світлий прямокутник, вписаний в більш темну рамку.

Мал. 359.

Це цілком готова кнопка. Основні операції по її підготовці вже закінчені. Але ми бачимо, що наша кнопка має зрізані лівий верхній і правий нижній кути. Для того щоб зробити форму кнопки правильним прямокутником, виділяємо прямокутний фрагмент правій верхній частині кнопки - там, де кнопка має вигляд, який нас цілком влаштовує. Для виділення використовуємо інструмент Rectangular Marquee (Прямокутне виділення). Потім копіюємо цей фрагмент в буфер: Edit> Copy (<Ctrl> + C). Зверніть увагу: повинен бути активним шар з основним зображенням, інакше нічого не вийде. Вставляємо зображення з буфера: Edit> Paste (<Ctrl> + <V>). Воно повинно утворити новий шар. А розташовуватися буде на тому ж місці, де було виділено. Утримуючи ліву кнопку миші, зрушимо цей фрагмент на порожній фон.

Командою Image> Rotate Canvas> FIip Horizontal розгорнемо зображення дзеркально в горизонтальній площині. Знову виділяємо наш фрагмент (тепер він прийняв вид свого дзеркального відображення) і знову копіюємо його в буфер. Після чого ще раз виконуємо команду Image> Rotate Canvas> Flip Horizonva l, щоб повернути зображення в початковий стан. А потім видаляємо шар, що містить виділений фрагмент: мініатюру з його зображенням (зазвичай сама верхня) на панелі Layers (Шари), утримуючи ліву кнопку миші, перетягуємо на значок кошика .

На полотні у нас залишилося тільки зображення заготовки кнопки. Використовуючи команду Edit> Paste (<Ctrl> + <V>), вставляємо фрагмент з буфера. Мишею перетягуємо його в лівий край кнопки і орієнтуємо так, щоб верхній лівий кут став прямокутним. Аналогічним чином виправляємо нижній правий кут.
Настав час додати на заготовку кнопки текст. Вибираємо інструмент і в світлому прямокутнику набираємо текст. Попередньо міняємо колір тексту на більш відповідний (адже за замовчуванням у нас обраний колір, яким ми заливали все зображення кнопки). Текст розміщуємо рівно посередині внутрішнього прямокутника.

Для вирівнювання граней кнопки можна їх трохи розмити. Для цього виділяємо центральний прямокутник інструментом виділення (<М>), а потім командою Select> Inverse інвертуємо виділення. Далі фільтром Filter> Blur> Gaussian Blur трохи розмиваємо межі кнопки. От і все.

Мал. 360. Ще одна кнопка

Є ще один, що принципово відрізняється від розглянутого вище, спосіб створення прямокутних кнопок. Отже, створюємо новий документ невеликого розміру (в залежності від габаритів майбутньої кнопки). Головна умова - документ повинен мати прозорий фон. Тому, виконавши команду File> New, для параметра Contents встановлюємо значення Transparent. Коли новий документ відкриється, він матиме сірий картатий фон.

Мал. 361. Створюємо новий документ, в залежності від габаритів майбутньої кнопки

На палітрі інструментів вибираємо інструмент Rectangular Marquee (Прямокутне виділення) (<М>). Для нього задаємо параметри: Style (Стиль) - Fixed Size (Фіксований розмір), Width (Ширина) - 1> 0 pixels (пікселів), Height - 40 pixels (пікселів). Такі настройки створюють прямокутне виділення з фіксованими розмірами.

Ми отримали пунктирний прямокутник. Тепер створимо до нього окантовку з трохи округленими кутами. Виконавши команду Select> Modify> Smooth, скругляются кути прямокутника виділення. При цьому значення радіуса округлення (Sample Radius) встановлюємо приблизно в 10 пікселів.

Мал. 362. Значення радіуса округляем приблизно в 10 пікселів

Таким чином, ми отримали прямокутник із закругленими кутами. Тепер заливаємо виділення потрібним кольором (у нас - червоним).

Далі розширюємо межі нашого виділення, приблизно на 10 пікселів: Select> Modify> Expand (Виділення> Модифікація> Розширення). В результаті пунктирне виділення розшириться на 10 пікселів на всі боки, між червоним об'єктом і новим виділенням утворюється простір шириною 10 пікселів.
Створюємо бордюр (кордон, окантовку) нашої кнопки, використовуючи команду: Select> Modifity> Border. Ширину бордюру встановлюємо 5 пікселів. Тепер у нас є подвійне зовнішнє виділення. Тепер вибираємо колір для заливки простору між кордоном і серединою. Для нього вибираємо колір трохи світлішими (блідо-червоний), щоб відрізнявся. На закінчення набираємо необхідний текст і центруємо його на кнопці.

Мал. 363. На закінчення набираємо і центруємо потрібний текст

Для того щоб застосувати кнопку на Web-сторінці з прозорим фоном, зберігаємо зображення в файлі GIF-формату (команда FiIe> Save As).

Панель з кнопками (меню)

Раніше ми розглянули приклади створення кнопок. Однак окремі кнопки в Web-сторінках використовуються рідко. Найбільш популярні групи кнопок, що організують меню.
Створюємо новий документ, витягнутої вертикальної форми. Фон заливаємо темним кольором м'яких відтінків. Далі, створюємо новий шар, клацнувши на значку Create a New Layer (Створити новий шар) в палітрі Layers (Шари). Тепер вибираємо інструмент Rectangular Marquee ( «Прямокутне виділення») (<М>). Для того щоб створити квадратне виділення, необхідно утримувати клавішу <Shift>. Після створення квадратного виділення вибираємо інструмент Gradient ( "Градієнт") (<G>). Для градієнта на панелі параметрів вибираємо опуклу заливку «від центру до кутів» (конічну).

Мал. 364.

Для заливки виділення обраним градієнтом натискаємо ліву кнопку миші і, утримуючи її, простягаємо направляючу градієнта з лівого нижнього кута в правий верхній.

В результаті нижня права половина квадрата повинна змінити колір в чорний колір.

Мал. 365. Заливаємо квадратик градієнтом з лівого нижнього в правий верхній кут

Виконуємо команду Selection> Modify> Contract. Встановлюємо значення параметра Contract - 4 пікселя. Ця установка зменшує раніше встановлене виділення по діагоналі на 4 пікселя. Потім, використовуючи інструмент Paint Bucket <G> ( «Ківш»), заливаємо виділення будь-яким відтінком сірого кольору. Застосований ефект створює об'ємність кнопки. Знімаємо виділення: Select> Deselect (<Ctrl> + <D>).

Тепер знову вибираємо інструмент прямокутного виділення (<М>). Виділяємо праву половину нашої квадратної кнопки. Утримуючи комбінацію клавіш <Shift> + <Ctrl> + <Alt>, натискаємо клавішу < > До тих пір, поки кнопка не набуде необхідну довжину.

Мал. 366. Підганяємо клавішами управління курсором необхідний обсяг кнопки

Знімаємо вже не потрібне виділення: Select> Deselect. Виділяємо всю кнопку цілком. Утримуючи комбінацію клавіш <Shift> + <Ctrl> + <Alt>, копіюємо створену кнопку. Отриману копію мишею перетягуємо нижче першої кнопки. Слід звернути увагу на те, що між кнопками не повинно бути просвіту фону. Повторюємо вищеописані операції необхідне число раз.

Мал. 367. Шляхом копіювання маленького фрагмента збільшуємо кнопку до потрібного розміру

В результаті ми отримали колонку з декількох (в нашому прикладі з семи) кнопок майбутнього меню.

Мал. 368. Складаємо колонку з необхідного числа кнопок - це основа майбутнього меню.

Створюємо новий шар, клацнувши на значку Create a New Layer (Створити новий шар) на палітрі Layers (Шари). У цьому шарі створюємо вертикальне овальне виділення з правого боку майбутнього меню, використовуючи інструмент Elliptical Marquee (<M>). Форму і розмір овалу вибираємо за смаком.

Мал. 369. Виділену овальну область заливаємо вертикальним сірим градієнтом так, щоб більш темний колір був ближче до кнопок

Заливаємо виділену область вертикальним сірим градієнтом так, щоб темний колір знаходився ближче до кнопок. Утримуючи <Ctrl>, клацніть на мініатюрі шару з меню. Тим самим ми виділяємо всю панель кнопок. Потім інвертуємо виділення: Select> Inverse (<Shift> + <Ctrl> + <I>), а потім видаляємо виділений фрагмент (<Delete>). В результаті маємо сіру градієнтну заливку в рамках панелі меню.

Мал. 370. Виділяємо область утвореної фігури, а зайве - видаляємо

Створюємо новий шар. На верхній кнопці робимо прямокутне виділення так, щоб до кордонів кнопки залишалося небагато місця. Заливаємо виділення горизонтальним лінійним градієнтом сірих відтінків.

Для більшого ефекту можна додати ще по кутах чорні точки - «гвинтики». Вони виконуються за допомогою простого олівця.

Мал. 371. Для більшого ефекту по кутах кнопок розставляємо чорні точки - «гвинтики»

Використовуючи команду Image> Adjust> Hue / Saturation (<Ctrl> + <U>), змінюємо колір заливки кнопок. Потім, використовуючи інструмент Туре (Текст), набираємо на кожній кнопці відповідний текст.

Мал. 372. На заключному етапі вписуємо необхідні пункти меню

Ось все і готово. Отриману картинку можна використовувати на Web-сторінці. Відповідні текстові посилання можна зробити вже в HTML.