Ви коли-небудь робили графічне меню, яке в залежності від маніпуляцій мишею виглядало по-різному? Тоді ви знаєте, скільки незручностей пов'язано зі створенням для кожної кнопки окремих файлів для кожного стану: миша над кнопкою, клацання, миша за межами кнопки, і ін. Знаєте, яка буває плутанина, особливо якщо ви "адаптуєте" скрипт вручну для своєї сторінки.
Photoshop дозволяє створювати і зберігати кнопки і варінт для різних її станів в одному файлі. Нічого нового. Ті ж шари. Але для кожного стану можна зробити невидимим "зайвий" шар, і при збереженні Photoshop автоматично виконає зведення видимих шарів в кожному випадку і збереже всі варіанти в окремі файли і згенерує HTML-код, і вам майже нічого не доведеться робити.
Для роботи нам знадобляться Photoshop і ImageReady. При написанні статті використовувалися останні версії обох програм.
Я вирішив визначити чотири різних стану для майбутньої кнопки.
- Normal - нормальний - то, що буде видно відразу після завантаження сторінки
- Over - миша над кнопкою
- Down - натиснута ліва або права кнопка миші (і не відпущена)
- Out - в такому вигляді кнопка буде після того, як курсор миші вийде за її межі, тобто до стану Normal кнопка вже не повернеться до наступного перезавантаження сторінки.
Будьте уважні, тому що різні браузери і різні їх версії не однаково обробляють різні події. Тому протестуйте результат в різних версіях.
Ось як все втілювалося технічно.
У новоствореному файлі розміром 200 Х 200 Пікслей я
1. Створив новий шар (Ctrl + Shift + N) з назвою apple normal
і намалював на ньому щось схоже на яблуко.
2. Потім зробив дубль шару (Layer / Duplicate layer. Клавіатурні скорочення нету), обізвавши його apple over, і спробував зобразити надкус.
3. За логікою наступний стан укушеного яблука - це огризок. Технічно він робився не простим урізанням попереднього шару, але в даному випадку це не принципово. Шар з недогризком носить ім'я apple down.
4. Ну і сюрприз, який чекає багатьох поціновувачів яблук - великий черв'як. Ім'я шару apple out.
Назва шарів не мають значення, вони даються тільки, щоб самому не заплутатися. Я додав ще два шари - з текстом і сірими смугами.
5. Тепер інструментом Slice Tool (див.) Вирізаю яблуко.
Ця область і буде кнопкою, а решта частини - статичні.
Відправляю результат в ImageReady натисканням кнопки на панелі інструментів
ImageReady
Внизу на палітрі відкриваю ятати Rollover і натискаючи на кнопочку "create new rollover state", створюю чотири стану:
Кожному сайту - механізм організації власної стрічки новин безкоштовно! Детальніше >>
Тепер по черзі натискаючи мишею на піктограму кожного стану, я на закладці Layers роблю невидимими зайві шари з числа тих чотирьох, які зображують нашу кнопку в різних видах. Тобто для Normal. видимим я залишив apple normal. для Over - apple over. і так далі. На закладці rollover. на піктограммка ви можете бачити різницю. Наприклад, для состоний Down закладка Layers (в ImageReady) виглядає так:
Якщо вас все влаштовує, то залишилося тільки оптимізувати розмір зображення і зберегти результат.
А ось те що вийшло у мене (тестувалося в MSIE 5.5 і NC 4.7 - працює однаково):