ВыWEBнись Stylьно! Тестируем ImageStyler

Xakep, номер #033, стр. 033-018-2

А вот теперь - час потехи!!! Посмотрим на возможности ImageStyler-а. Найди инспектор с закладкой "Styles". Выбирай любую пиктограмму и дави "Apply". Теперь твою надпись не узнать. Если не нравится, нажми Ctrl+Z.

Это еще не все! Найди форточку с закладкой "3D" и выпадающий список с надписью "None". Щелкни по треугольничку и поиграй с разными псевдо-3D эффектами. Ниже можно настроить параметры эффекта (яркость, размытие). И это еще не все! Натяни на надпись текстуру. Теперь найди закладку "Distort" и выбери что-то из списка и поиграй с настройками.

Ну как, почувствовал себя извращенцем :)? Комбинируя эффекты, ты всегда можешь забацать что-то необычное.

Но одним текстом сыт не будешь! Не вопрос! Найди закладку "Shapes". Тут валяется набор готовых форм (стрелочек, звездочек, галочек и прочей лабуды). Выбирай любую и дави "Place". Когда форма появится на поле, с ней можно будет сделать все, что ты только что делал с текстом. Но самое замечательное то, что можно импортировать свои формы.

Нарисуй в Photoshop-е какую-нибудь фигуру, например, женскую, закрась ее одним цветом и сохрани ее в jpeg-е (он весит меньше). Теперь лезь в ImageStyler. В меню "File" выбирай "Place..." и находи свой файл. Дави "Открыть". Рисунок появится в поле, но на белом фоне, и ничего с ним пока сделать нельзя.

Найди закладку "Properties" - там ты увидишь выпадающий список. Выбирай пункт "Build alpha from image" (построить альфа-канал или канал прозрачности, из изображения).

Твоя женская фигура станет полупрозрачной, зато избавится от фона, и ты сможешь сделать ее стильной и красивой. Если ты нарисуешь фигуру в Иллюстраторе, то ImageStyler без проблем откроет ai-файл. С такой формой можно работать сразу: фона там не будет.

Эй, а как же кнопочки?

Легко и непринужденно! Нарисуй какой-нибудь кружок или квадратик и пока с ним ничего не делай. Вытащи на свет божий окошко с закладкой "JavaScript"... Не вибрируй! Кодить не надо ничего! В форточке виднеются какие-то слои а-ля Фотошоп. Таким макаром в ImageStyler-е оформлены мышиные позы при контакте с батоном: мышь где-то бродит (noAction), мышь сверху (onMouseOver), мышь притиснула кнопарь (onMouseDown), мышь слезла с кнопки (onMouseOut). Первый слой белый, и рядом мордочка твоей кнопки, остальные - серые. Это значит, что объект пока еще не кнопка, и Яву на него вешать не будут.

Внизу инспектора виднеются листочек, двойной листочек и помойка. Дави один листочек. Второй слой ожил. Все, поздравляю - у тебя родился button. Но просто родить мало! Надо бы сделать, чтобы что-то менялось от тесных объятий с крысенышем. Кликни на второй слой. Теперь можно поменять цвет кнопки, применить 3D-эффект, стиль или текстуру натянуть. Вот так кнопка будет выглядеть при наведении курсора.

Следующий слой лично я делаю, как и второй (из экономии времени и дискового пространства). Для этого шлепни двойной листок, и слой скопируется. А вот последний слой должен быть таким же, как и первый, иначе после ухода мыша в другие края кнопка не вернется в прежнее состояние. Вывод: снова давим одинарный листок. Если какой-то слой не получился или просто надоел, юзай помойку.