Стили в ImageReady

Светлана Шляхтина

Графические заголовки

Gif-анимация

Текст с rollover-эффектом

Кнопки

 

Как правило, Web-дизайнеру приходится разрабатывать стиль целого сайта, что на деле означает создание огромного количества разнообразных элементов Web-графики (кнопок, ролловеров, графических заголовков и пр.), объединенных общим замыслом. В итоге многие манипуляции по подготовке Web-элементов перодически приходится повторять, поэтому масса времени уходит впустую. С эффективным способом автоматизации этого процесса — созданием дроплетов — мы ознакомились на предыдущем уроке, а теперь мы расскажем о широких возможностях использования палитры Styles (Стили), где фиксируются параметры слоев, в том числе с различными наложенными спецэффектами (тенями, свечением, границами, градиентными заливками и пр.) и особенностями их наложения, а также уровень прозрачности и ряд других параметров. Применение стилей значительно упрощает создание Web-элементов.

Открывается палитра Styles по команде Window=>Show Styles (Окно=>Показать стили). В палитре собрана целая коллекция основных приемов оформления кнопок, ролловеров и текста, которыми можно воспользоваться при разработке дизайна сайта. А еще интереснее пополнять коллекцию палитры Styles, сохраняя здесь собственные стили разработанных Web-элементов, которые потом можно будет быстро применить при подготовке аналогичных объектов. При этом стили будут сохраняться в папке C:\Program Files\Adobe\Photoshop 7.0\Presets\Styles с расширением ASL.

По умолчанию палитра Styles выглядит так, как показано на рис. 1. Однако в действительности для работы доступны еще десять групп палитр стилей — для открытия любой из них щелкните на треугольной кнопке в правом верхнем углу окна Styles и выберите нужную группу (рис. 2). Чтобы вернуться к загружаемой по умолчанию палитре стилей, воспользуйтесь командой Reset Styles (Перезагрузить стили) во всплывающем меню палитры Styles.

 

Внешний вид палитры Styles, открываемой по умолчанию

Рис. 1. Внешний вид палитры Styles, открываемой по умолчанию

Открытие другой группы стилей

Рис. 2. Открытие другой группы стилей

При желании можно изменить вариант представления стилей в палитре, выбрав нужный (Small List — Малый список, Small Thumbnail — Малые пиктограммы, Large Thumbnail — Большие пиктограммы) во всплывающем меню (рис. 3).

 

Режим отображения Large Thumbnail на палитре Styles

Рис. 3. Режим отображения Large Thumbnail на палитре Styles

Как уже говорилось выше, стили очень удобны при разработке графических Web-элементов, и все они применяются к слоям, для чего необходимо выбрать слой и затем щелкнуть по стилю на палитре Styles. А можно поступить иначе — перетащить имя стиля или его образец на любой слой на палитре Layers или на графический объект в окне изображения. Если применить стиль к слою, все использованные ранее эффекты будут заменены эффектами выбранного стиля, но если при этом удерживать в нажатом состоянии клавишу Shift, то эффекты стиля будут добавлены без замены существующих.

Необходимо отметить, что пиктограммы стилей ролловеров помечены в верхнем правом углу треугольником, а пиктограммы обычных стилей такого обозначения не имеют.

Остановимся на некоторых примерах применения стилей.

Графические заголовки

Создайте новый документ размером 200 на 100 пикселов и напечатайте на нем произвольный текст (рис. 4). Откройте подходящую палитру, например Text Effects 2, и выберите нужный стиль (рис. 5) — в данном примере был выбран стиль Double Green Slime. Результат будет таким, как на рис. 6, а окно слоев — как на рис. 7. Аналогичным образом очень быстро можно создать заголовки с достаточно трудоемкими вариантами текста, такими как «текст из пластика», «металлический текст» (на основе ртути, хрома, алюминия и популярного в Photoshop «голубого металла»), «стеклянный текст», «сатиновый текст» и пр.

 

Исходный текст

Рис. 4. Исходный текст

Выбор стиля Double Green Slime

Рис. 5. Выбор стиля Double Green Slime

Внешний вид текста после применения стиля Double Green Slime

Рис. 6. Внешний вид текста после применения стиля Double Green Slime

Окно Layers после наложения стиля

Рис. 7. Окно Layers после наложения стиля

А теперь попробуем создать собственный стиль для имитации «плазменного текста». Создайте новый документ размером 300 на 100 пикселов и напечатайте на нем произвольный текст (рис. 8).

 

Исходный текст

Рис. 8. Исходный текст

Переведите изображение в растровый формат, выбрав команду Layer=>Rasterize=>Layer (Слой=>Растеризация=>Слой) — рис. 9, а затем измените стиль слоя с помощью команды Layer=>Layer Styles=>Satin (Слой=>Эффекты слоя=>Атлас) — рис. 10 и 11.

 

Окно палитры Layers после растеризации слоя

Рис. 9. Окно палитры Layers после растеризации слоя

Окно палитры Layers после наложения эффекта слоя

Рис. 10. Окно палитры Layers после наложения эффекта слоя

Внешний вид текста

Рис. 11. Внешний вид текста

Выделите в палитре Layers слой с текстом и перетащите его на свободное место в палитру Styles (рис. 12) — это приведет к автоматическому сохранению стиля в данной палитре стилей на диске. Затем переименуйте новый стиль, щелкнув на стиле в палитре Styles и выбрав команду Style Options (рис. 13).

 

Перетаскивание слоя с текстом

Рис. 12. Перетаскивание слоя с текстом

Переименование нового стиля

Рис. 13. Переименование нового стиля

Теперь проверим на новом заголовке работу созданного нами стиля Plasma. Создайте новый документ размером 200 на 100 пикселов и напечатайте на нем произвольный текст (рис. 14). Щелкните на стиле Plasma в палитре Styles, и текст станет напоминать показанный на рис. 15.

 

Исходный текст

Рис. 14. Исходный текст

Текст после наложения стиля Plasma

Рис. 15. Текст после наложения стиля Plasma

В начало В начало

Gif-анимация

Сохранить анимационные эффекты в виде стилей, увы, не удастся, но использование стилей при разработке тех или иных анимационных эффектов представляет немалый интерес. Вначале попробуем создать переливающуюся надпись. На прозрачном фоне создайте новый файл и напечатайте произвольный текст (рис. 16).

 

Исходный текст

Рис. 16. Исходный текст

Трижды продублируйте кадр, щелкнув на иконке Duplicates current frame (Дублировать текущий кадр) палитры Animation (рис. 17).

 

Исходное состояние окна палитры Animation

Рис. 17. Исходное состояние окна палитры Animation

Активизируйте первый кадр, в палитре Styles загрузите группу стилей Class Buttons и подберите из нее подходящий вариант стиля — в данном примере использован вариант Black Glass (рис. 18). Аналогичным образом настройте каждый из кадров (в нашем случае у второго кадра установлен стиль Blue Glass, у третьего — Deep Blue Glass, у четвертого — Green Glass).

 

Внешний вид первого кадра после установки стиля Black Glass

Рис. 18. Внешний вид первого кадра после установки стиля Black Glass

По окончании определите длительность кадров — в этом примере для каждого кадра установлена длительность 0,2 с. Затем сохраните файл с оптимизацией, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией), — в результате получится примерно такая анимация, как на рис. 19.

 

Готовая анимация

Рис. 19. Готовая анимация

Так же быстро с помощью стилей можно получить и эффект постепенно проявляющейся надписи. На прозрачном фоне создайте новый файл и напечатайте произвольный текст (рис. 20). Откройте нужную палитру стилей (в примере выбрана палитра Text Effect 2) и наложите на текст подходящий стиль (рис. 21), например Double Turquoise Border.

 

Исходный текст

Рис. 20. Исходный текст

Текст после наложения стиля Double Turquoise Border

Рис. 21. Текст после наложения стиля Double Turquoise Border

Девять раз продублируйте кадр, щелкнув на иконке Duplicates current frame (Дублировать текущий кадр) палитры Animation — в итоге получите десять кадров. На первом кадре сделайте слой с невидимым текстом, а на втором — с видимым, но установите значение параметра Opacity (Непрозрачность) 10%, для третьего кадра — в 20, четвертого — в 30… и для последнего кадра — 100%. После этого подберите нужную для каждого кадра длительность — в данном случае для всех кадров она равна 0,2 с (рис. 22). По окончании сохраните файл с оптимизацией, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией). Полученный результат будет соответствовать рис. 23.

 

Окончательный вариант палитры Animation

Рис. 22. Окончательный вариант палитры Animation

Готовая анимация

Рис. 23. Готовая анимация

В начало В начало

Текст с rollover-эффектом

Создайте новый документ размером 100 на 50 пикселов и напечатайте на нем произвольный текст (рис. 24). В окне Styles откройте группу стилей Rollover Buttons и выберите подходящий стиль, например Blue Neon Rollover. Текст станет таким, как на рис. 25, а в окне Rollovers появится состояние Over State (рис. 26).

 

Исходный текст

Рис. 24. Исходный текст

Текст после наложения стиля Blue Neon Rollover в состоянии Normal

Рис. 25. Текст после наложения стиля Blue Neon Rollover в состоянии Normal

Внешний вид окна Rollovers после наложения стиля

Рис. 26. Внешний вид окна Rollovers после наложения стиля

Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов и перейдя в окно браузера (рис. 27).

 

Окно браузера с Rollover-элементом

Рис. 27. Окно браузера с Rollover-элементом

После этого сохраните файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html); Images Only (*.gif); HTML Only (*.html). В нашем примере был выбран вариант HTML and Images (*.html) и получены файл пример1.html и серия графических изображений в папке images.

В случае если ни один из встроенных стилей вас не устраивает, несложно разработать собственный стиль текста с rollover-эффектом и сохранить его в палитре Styles, поскольку состояния ролловеров могут храниться в виде стиля наряду с эффектами слоя. Возьмите исходное изображение (рис. 28). Откройте палитру Rollovers и щелкните на кнопке New Rollover state (Создать ролловер-состояние). Активизируйте состояние Over State в палитре Rollovers и измените для него состояние слоя, например воспользовавшись командой Layer=>Layer Style=>Gradient Overlay (Слой=>Стили слоя=>Наложение градиента). В начальный момент окно Gradient Overlay будет напоминать рис. 29, и потому потребуется его дополнительная настройка. Для этого щелкните на кнопку Select a named gradient (Выбор названия градиента) — рис. 30, а затем выберите нужный вид градиента, например как на рис. 31. Полученный результат будет подобен приведенному на рис. 32.

 

Исходное изображение

Рис. 28. Исходное изображение

Исходное состояние окна Gradient Overlay

Рис. 29. Исходное состояние окна Gradient Overlay

Выбор кнопки Select a named gradient

Рис. 30. Выбор кнопки Select a named gradient

Выбор градиента

Рис. 31. Выбор градиента

Внешний вид текста в состоянии Over State и текущее состояние палитр Layers и Rollovers

Рис. 32. Внешний вид текста в состоянии Over State и текущее состояние палитр Layers и Rollovers

Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов и перейдя в окно браузера.

Теперь желательно сохранить созданный стиль ролловера. Однако попытка сделать это путем перетаскивания слоя в окно Styles не даст нужного результата — новый стиль появится в палитре, но не будет иметь характерного для стилей ролловера треугольничка в левом верхнем углу (рис. 33). Это означает, что состояние ролловера не было включено при формировании стиля.

 

Палитра Styles с вновь созданным стилем без rollover-эффекта

Рис. 33. Палитра Styles с вновь созданным стилем без rollover-эффекта

Новое состояние ролловера в данном случае нужно создавать не совсем обычным образом. Попробуйте вновь взять исходное изображение (рис. 34), откройте палитру Rollovers и щелкните на кнопке Create layer-based rollover (Создать ролловер-состояние на основе базового слоя) — рис. 35 и 36. Активизируйте состояние Over State в палитре Rollovers и измените для него состояние слоя, вновь воспользовавшись командой Layer=>Layer Style=>Gradient Overlay (Слой=>Стили слоя=>Наложение градиента) (рис. 37).

 

Исходное изображение

Рис. 34. Исходное изображение

Выбор кнопки Create layer-based rollover

Рис. 35. Выбор кнопки Create layer-based rollover

Внешний вид палитры Rollovers после создания ролловера

Рис. 36. Внешний вид палитры Rollovers после создания ролловера

Палитра Layers после создания ролловера

Рис. 37. Палитра Layers после создания ролловера

Затем перетащите слой на палитру Styles, что приведет к созданию нового rollover-стиля (рис. 38).

 

Палитра Styles с новым стилем с rollover-эффектом

Рис. 38. Палитра Styles с новым стилем с rollover-эффектом

Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов и перейдя в окно браузера (рис. 39).

 

Окно браузера с Rollover-элементом при наведенном состоянии мыши

Рис. 39. Окно браузера с Rollover-элементом при наведенном состоянии мыши

После этого сохраните файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html); Images Only (*.gif); HTML Only (*.html). В данном примере был выбран вариант HTML and Images (*.html) и получены файл пример2.html и серия графических изображений в папке images.

В начало В начало

Кнопки

Если вам необходимо создать кнопки без rollover-эффекта, то самый быстрый путь для этого — вновь воспользоваться стилями из палитры Styles (в данном случае подойдут стили из групп Buttons и Glass Buttons).

Создайте новый документ размером, например, 50 на 50 пикселов, создайте новый слой командой Layer=>New=>Layer (Слой=>Новый=>Слой) и залейте его, скажем, белым цветом (для ряда стилей цвет не играет никакой роли, а для других формирование окончательного цвета опирается на исходный цвет слоя), но помните, что в любом случае слой не должен быть прозрачным (рис. 40 и 41).

 

Исходное изображение

Рис. 40. Исходное изображение

Окно Layers после создания и заливки слоя

Рис. 41. Окно Layers после создания и заливки слоя

Откройте группу стилей Buttons и наложите понравившийся стиль (рис. 42) — в данном случае выбран стиль Copper Tube.

Если вас устраивает выбранный стиль кнопки, но не нравится цвет, то его легко изменить, воспользовавшись командой Layer=>Layer Style=>Color Overlay (Слой=>Стили слоя=>Наложение цвета) — рис. 43. Затем в палитре Color Overlay измените цвет и скорректируйте непрозрачность, например как на рис. 44. Изображение кнопки станет таким, как на рис. 45, а в окне слоев появится дополнительный эффект (рис. 46). В случае внесения изменений в стиль кнопки лучше сохранить обновленный стиль кнопки под новым именем (рис. 47).

 

Внешний вид кнопки после применения стиля Copper Tube

Рис. 42. Внешний вид кнопки после применения стиля Copper Tube

Кнопка после применения команды Color Overlay

Рис. 43. Кнопка после применения команды Color Overlay

Настройка параметров палитры Color Overlay

Рис. 44. Настройка параметров палитры Color Overlay

Внешний вид кнопки после корректировки цвета

Рис. 45. Внешний вид кнопки после корректировки цвета

Появление эффекта Color Overlay в окне Layers

Рис. 46. Появление эффекта Color Overlay в окне Layers

Появление нового стиля в палитре Styles

Рис. 47. Появление нового стиля в палитре Styles

После этого на основе данной кнопки можно создать целую серию кнопок со стрелками или текстом.

А если перед вами стоит задача создания кнопки с rollover-эффектом, то использование палитры Styles тоже может значительно ускорить процесс. Самое простое — воспользоваться уже существующими группами стилей с rollover-эффектом: Rollover Buttons или Glass Button Rollovers.

Создайте новый документ размером, допустим, 50 на 50 пикселов, а потом создайте новый слой командой Layer=>New=>Layer (Слой=>Новый=>Слой) и залейте его белым цветом (рис. 48).

 

Исходное изображение

Рис. 48. Исходное изображение

Откройте палитру Rollover Buttons и наложите подходящий стиль — в данном случае выбран стиль Shadowed with Raised Bevel (рис. 49 и 50).

 

Внешний вид изображения после наложения стиля Shadowed with Raised Bevel в состоянии Over State

Рис. 49. Внешний вид изображения после наложения стиля Shadowed with Raised Bevel в состоянии Over State

Палитра Layers после наложения стиля

Рис. 50. Палитра Layers после наложения стиля

Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов и перейдя в окно браузера (рис. 51).

 

Окно браузера с rollover-элементом при наведенном состоянии мыши

Рис. 51. Окно браузера с rollover-элементом при наведенном состоянии мыши

Затем сохраните файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html); Images Only (*.gif); HTML Only (*.html). В этом примере был выбран вариант HTML and Images (*.html) и получены файл пример3.html и серия графических изображений в папке images.

А теперь попробуйте создать свой стиль для кнопки с rollover-эффектом и сохранить его в палитре Styles. Только стоит иметь в виду, что сохранить в виде стиля можно настройки лишь одного слоя, поэтому и кнопку в данном случае можно создавать лишь на основе одного слоя, что в некоторой степени ограничивает ваши возможности.

Создайте новый документ размером, например, 50 на 50 пикселов, затем создайте новый слой командой Layer=>New=>Layer (Слой=>Новый=>Слой), форму для предполагаемой кнопки и закрасьте ее произвольным цветом (рис. 52). Залейте форму линейным градиентом (основной цвет — темный, фоновый — светлый) с помощью команды Layer=>Layer Style=>Gradient Overlay (Слой=>Стили слоя=>Наложение градиента) (рис. 53).

 

Исходное изображение

Рис. 52. Исходное изображение

Результат применения команды Gradient Overlay для слоя Layer1

Рис. 53. Результат применения команды Gradient Overlay для слоя Layer1

Для того чтобы сделать кнопку более эффектной, наложите на слой внешнюю и внутреннюю тени командами Layer=>Layer Style=>Drop Shadow (Слой=>Стили слоя=>Внешняя тень) и Layer=>Layer Style=>Inner Shadow (Слой=>Стили слоя=>Внутренняя тень) (рис. 54).

 

Результат наложения теней на кнопку

Рис. 54. Результат наложения теней на кнопку

Откройте палитру Rollovers и щелкните на кнопке Create layer-based rollover (Создать ролловер-состояние на основе базового слоя). Активизируйте состояние Over State в палитре Rollovers и измените для него состояние слоя, воспользовавшись командой Layer=>Layer Style=>Bevel and Emboss (Слой=>Стили слоя=>Фаска и рельеф) (рис. 55).

 

Внешний вид изображения в состоянии Over State после применения команды Bevel and Emboss

Рис. 55. Внешний вид изображения в состоянии Over State после применения команды Bevel and Emboss

Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов и перейдя в окно браузера (рис. 56 и 57).

 

Окно браузера с rollover-элементом в нормальном состоянии

Рис. 56. Окно браузера с rollover-элементом в нормальном состоянии

Окно браузера с rollover-элементом при наведенном состоянии мыши

Рис. 57. Окно браузера с rollover-элементом при наведенном состоянии мыши

А теперь сохраните файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав один из трех типов файлов: HTML and Images (*.html); Images Only (*.gif); HTML Only (*.html). В данном примере был выбран вариант HTML and Images (*.html) и получены файл пример4.html и серия графических изображений в папке images.

В заключение перетащите слой на палитру Styles, что приведет к созданию нового rollover-стиля для кнопки (рис. 58).

 

Палитра Styles с новым стилем, который обладает rollover-эффектом

Рис. 58. Палитра Styles с новым стилем, который обладает rollover-эффектом

Если при дальнейшей работе потребуются кнопки такого же стиля, но другого цвета, то изменить цвет кнопки, созданной при помощи данного стиля, не составит ни малейшего труда — для этого достаточно воспользоваться командой Layer=>Layer Style=>Color Overlay (Слой=>Стили слоя=>Наложение цвета) и настроить параметры цвета соответствующим образом.

КомпьютерПресс 4'2004

Наш канал на Youtube

1999 1 2 3 4 5 6 7 8 9 10 11 12
2000 1 2 3 4 5 6 7 8 9 10 11 12
2001 1 2 3 4 5 6 7 8 9 10 11 12
2002 1 2 3 4 5 6 7 8 9 10 11 12
2003 1 2 3 4 5 6 7 8 9 10 11 12
2004 1 2 3 4 5 6 7 8 9 10 11 12
2005 1 2 3 4 5 6 7 8 9 10 11 12
2006 1 2 3 4 5 6 7 8 9 10 11 12
2007 1 2 3 4 5 6 7 8 9 10 11 12
2008 1 2 3 4 5 6 7 8 9 10 11 12
2009 1 2 3 4 5 6 7 8 9 10 11 12
2010 1 2 3 4 5 6 7 8 9 10 11 12
2011 1 2 3 4 5 6 7 8 9 10 11 12
2012 1 2 3 4 5 6 7 8 9 10 11 12
2013 1 2 3 4 5 6 7 8 9 10 11 12
Популярные статьи
КомпьютерПресс использует