Помогни ни да направим Uroci.net по - богат! Добави урок

Rollover бутон в CS версиите

BUGZ_SY   трудност:    видян: 7913

Untitled Document

Има урок как се прави "rollover" бутон за по-старите версии на Фотошоп. Този урок е за създаването на rollover бутон в CS версиите.
1. В ImageReady си отворете изображението, което ще бъде "rollover" бутона. Аз ще използвам снимка, която направих на Бахамите през лятото:

photoshop tutorial

2. Създайте нов слой с нещата, които ще се показват, когато мишката минава над бутона/картинката ви:

photoshop tutorial

3. Отворете Web Content прозореца от менюто Window -> Web Content. Направете невидим слоя с всичко, което ще се показва при преминаването на мишката над бутона/картинката ви, като в панела със слоевете кликнете на оченцето пред слоя. Кликнете на слоя с оригиналното съдържание, за да го направите активен. За да създадете "rollover", кликнете на бутона Create Layer Based Rollover, който се намира долу в ляво в панела Web Content.

4. Създадохте "rollover", но слоя с всичко, което трябва да се показва при "rollover" не е активен. Първо маркирайте в панела Web Content частта Over и после в панела със слоевете направете видим слоя, като кликнете пред името му, за да се появи оченцето.

5. Ако искате "rollover"-а да води към друга страница, селектирайте rollover states в панела Web Content, после отидете в панела Slice. Ако не е отворен, извадете го от меню Window -> Slice. Попълнете необходимата информация в полетата. Ако бутонът ще отвежда на друг сайт в интернет, напишете http:// следвано от адреса на сайта, който е крайната цел. Ако бутонът ще е свързан с отварянето на друга страница от вашия сайт, напишете адреса на страницата, като не забравяте да сложите разширението й.

photoshop tutorial

6. Остана само да си сейфате "rollover" бутона/картинката. Изберете от меню File -> Save Optimized As... В полето Save as type изберете от падащото меню HTML and Images. Програмата ще създаде html файл. За да работи този бутон и на сайта ви, трябва да качите на сървъра изображенията на бутона и създадения от програмата html файл.
Превод: Ledenata
Източник на урока: www.webdesign.org



Сподели урока:



Регистрирайте се, за да добавите коментар


Калдейта Ком ЕООД - © 2003-. Всички права запазени.
Препоръчваме: IT Новини