Кнопочки, кнопочки.
Кнопочки, кнопочки, ми вас поважаємо, тільки як вас малювати ми, на жаль, не знаємо!
Що ж, зараз ми заповнимо цю прогалину за допомогою все тієї ж програми Adobe Photoshop.
- Відкриваємо нове зображення на прозорій підкладці, як і на попередньому уроці в самому початку. Я для прикладу вибрала розмір 200х50 пікселів;
- Вибираємо інструмент Marquee Tool. його ж можна вибрати просто натиснувши клавішу M. Можете вибрати прямокутне або елипсні виділення. Я, наприклад, вибрала еліпс, і залила його інградіентной заливкою;
- Вибираємо колір (наприклад, синій);
- заливаємо виділення
У мене вийшло ось що:
А зараз ми створимо для кнопки обсяг і всякі тіні. Для цього виконайте команду Layer | Layer Style | Bavel and Emboss (Шар | Стиль Шару | Скос і Рельєф), з'явиться діалог Layer Style (Стиль Шару) і починайте творити! Рухаючи всякі движки, включаючи або відключаючи різні галочки добийтеся такого результату, який вас влаштує. Мені ось влаштували такі результати:
Але і це не все! Ми можемо написати на кнопці слово, і також зробити його об'ємним! І остаточно обрізаємо непотрібне простір Image | Crop (Зображення | образается), оптимізує для Web з настройками для GIF.
На відміну від малюнка на минулому уроці, де кольори були суцільні, тут - інша картина. Тому ми вибираємо дифузію, ну а інші настройки вибираємо візуально. Що більше подобається. Єдине, хочу зауважити, бачите, я вибрала Matte (Ореол) білого кольору? Це для того, щоб навколо картинки не було видно ореолу, тому що вона буде перебувати на сторінці з білим фоном. Але якщо навколишній фон буде, наприклад, червоним, я, натиснувши на віконце поруч з Matte (Ореол), виберу із запропонованої палітри червоний колір.
От і все. Так що ось моя люба кнопочка:
Ось така кнопочка
Але і це не все! Ми можемо зробити так, щоб при наведенні на кнопку, вона змінювала свій колір, і це теж неважко зробити! За допомогою налаштувань Image | Adjustments | Hue / Saturation (Зображення | Налаштування | Колір / Насиченість) ми можемо легко через нити колір кнопки і зберегти її під іншим ім'ям.
Якщо нам потрібно, щоб при наведенні курсору на кнопку вона змінювалася, а при натисканні переходила на сторінку www.dikarka.ru, то ми зробимо так. Нехай перша кнопка у нас називається but01.gif. а змінена - but02.gif. тоді, щоб описати дії кнопки, потрібно просто ввести наступний код:
>
Якщо ви все зробили правильно, то при натисканні кнопочки змінюється колір!
Якщо ви захочете присобачить ще кілька кнопочок, які будуть вести до інших розділів, то код залиште той же самим, змінюючи тільки значення наступної пари кнопок на pm1 на pm2. ще наступної пари на pm3 і так далі. Ну і підставляючи свої найменування кнопок. от і все. Думаю, цим уроком я вас порадувала. А на наступному ми займемося анімацією. І думаю, порадую вас ще більше!