Графические редакторы на примере Adobe ImageStyler (стр. 3 из 3)
Группа: Object Layers, JavaScript.
·
Object Layers - эта палитра содержит список всех слоев для данного объекта. Можно переключаться между активными слоями путем выбора нужного. Каждый слой имеет название (название можно изменить, дважды нажав левой кнопкой мыши на нем) и уменьшенное изображение. Слева от слоя есть значок глаза. Нажав на него можно сделать слой временно невидимым. Если снова нажать на то же место, то слой снова станет видимым. Самый верхний слой в списке будет первым видимым слоем. Слои можно менять местами, для этого нужно "перетащить" мышкой данный слой на другое место.Внизу находятся три кнопки, это: создать новый слой, создать копию данного слоя и удалить слой.
· JavaScript - см. Дополнительные возможности.
Пример №2
Создадим объемную надпись с мягкой тенью.
Откроем новый документ. Зададим основной цвет красным, а фон - белым. Выберем Type tool и создадим объект с текстом (рис.1). Откроем палитру 3d и выберем эффект Emboss (выпуклость), Light = 130, Edge = Plateau (возвышающиеся стороны) (рис.2). Теперь делаем тень. Тенью будет служить увеличенный и смещенный контур объекта. Создадим копию слоя и сделаем ее активной. Сделаем новый слой черного цвета (если он уже не черный). Откроем палитру Layer. Зададим Width=2 (относительное увеличение объекта), Softness=6 (размытие), XOffset=-4, YOffset=-4 (смещение слоя по горизонтали и вертикали). Объемная надпись с тенью готова (рис.3).
Группа: Styles, Textures, Shapes.
·
Styles - эта палитра содержит набор заранее заготовленных стилей (наборов свойств для объекта и каждого из его слоев), которые можно применять к любым объектам не тратя времени на задание параметров вручную, как мы это делали прежде. Например, можно нарисовать прямоугольник и легко сделать из него объемную кнопку, выбрав соответствующий стиль из списка. IS предусматривает возможность добавления новых стилей и создание собственных. 
· Textures - палитра содержит набор текстур (изображений), которыми можно заполнять объект. Для применения текстуры к объекту нужно выделить объект, выбрать текстуру и нажать кнопку Apply внизу палитры. Например, во втором примере можно сделать объемную надпись из дерева, выбрав соответствующую текстуру для основного слоя. IS так же предусматривает возможность добавления собственных текстур в коллекцию.
· Shapes - набор контуров, которые можно использовать в качестве объектов, либо в качестве масок. IS предусматривает возможность добавления новых контуров. Единственное условие - контур должен храниться в файле как черно-белое изображение.
Пример №3
Теперь на основе полученных знаний о возможностях Adobe ImageStyler, создадим демонстрационную картинку:
 |
Создадим новый документ. Сделаем фон активным, щелкнув на нижний квадрат на панели инструментов. Зададим для фона текстуру, для этого откроем палитру Textures и выберем нужную. Теперь вставим в документ картинку, для этого воспользуемся возможностью Windows Drag-and-drop, т.е. "перетащим" картинку из Windows Explorier в документ IS:
Растянем картинку по вертикали так, чтобы она имела высоту 246 (это значение взято из дальнейшего расчета пропорции), а инструментом Crop урежем ее до ширины 240. Теперь надо присвоить картинке форму кляксы. Откроем палитры Properties (для нашего объекта) и Shapes. В свойствах выберем Alpha Channel = Active Matte (маска прозрачности на основе заданного контура). Наша картинка сразу приняла форму круга, т.к. по умолчанию установлен круглый контур. В маленьком окошке снизу видим черный круг – это и есть заданный контур. В палитре Shapes ищем контур с названием Blob 4 (переключить в моду показа с названиями можно нажав черную стрелку в левом верхнем углу и выбрав Names view). Затем перетаскиваем его в окошко в палитре Properties, в котором находится круг.
Теперь наша картинка имеет новую маску (см. образец в описании палитры Properties). Но картинка находится не совсем так, как хотелось бы. Используя Crop tool, выровняем положение картинки:
Создадим эффект объема, для этого зададим в 3d палитре эффект Emboss (выпуклый), Depth=13 (глубина), Softness=1 (размытие). Теперь немного исказим картинку, для этого откроем палитру Distort, зададим Spherize (сферическое искажение), Magnification=100 (увеличение), Amount=-83 (глубина):
Теперь нужно добавить эффект полупрозрачности с клетчатым фоном.
Создадим второй слой и присвоим ему текстуру в виде шахматной доски. Откроем палитру Distort и зададим тип Twirl (закрутить), Turns=27 (количество оборотов), Band size=2 (размер сегмента). Чтобы сделать текстуру помягче, откроем палитру Opacity и зададим прозрачность слоя в 40%. Пока нашего клетчатого фона не видно, потому что передний слой непрозрачен. Сделаем активным первый слой и откроем палитру Opacity. Установим тип Linear (линейное изменение прозрачности), угол=13, правый ползунок Opacity Bar передвинем на середину.
Все, наша картинка готова.
Дополнительные возможности
IS позволяет создавать из сделанного документа готовые web-страницы для Internet.
Для этого необходимо создать страницу так, как бы вам хотелось её видеть, затем выбрать File->Export, File->Export As, или File->Export Selection и ввести в появившемся окне имя файла, в котором будет сохранен документ на диске. IS создаст готовый HTML файл и набор графических файлов, которые будут лежать на диске в директории Images. При генерации изображений, IS помещает все объекты, которые соприкасаются друг с другом, в один файл. Остальные же объекты записываются в отдельные файлы. Фоновое изображение так же записывается в отдельный файл.
Для Internet немаловажен размер графических файлов, по этому IS предоставляет возможность выбрать, в каком формате будут сохранены графические изображения и степень сжатия изображений (для JPEG формата). Эти установки можно сделать в палитре Export settings.
Она вызывается из меню File->Export Settings.Можно так же выбрать и способ создания готового документа:
· Entrie Composition - весь документ рисуется как единая картинка и записывается в один графический файл.
· Trimmed Composition - из документа выбирается прямоугольный участок минимального размера, охватывающий все объекты, и затем он, аналогично предыдущей опции, записывается один графический файл.
· Auto Slice - картинки (объекты IS) помещаются в HTML документ в порядке следования из левого верхнего угла в правый нижний.
· Auto Layout - IS создает автоматически таблицу в HTML файле и размещает в ней графические объекты для того, чтобы готовый документ выглядел так, как было запланировано при его создании. Это наиболее предпочтительный вариант.
Можно включить режим предварительного просмотра (Active Preview), при этом картинка в документе будет изображаться так, как она будет выглядеть после сжатия. Кроме того, IS напишет размер файла напротив надписи Size.
IS поддерживает автоматическую генерацию кода JavaScript при экспорте HTML документа. При помощи него можно создать простейшую анимацию на web-страничке: при нажатии кнопки мыши на картинку, проведении курсора над ней, картинка может изменять вид. Для этого существует палитра JavaScript, о которой уже упоминалось раньше. Теперь рассмотрим ее более детально:
Существует три типа событий, по которым может произойти изменение картинки:
· onMouseOver - активизируется, когда курсор мыши находится непосредственно над объектом.
· onMouseDown - активизируется при нажатии на картинку.
· onMouseOut - активизируется, когда курсор мыши "уводят" с картинки.
По умолчанию каждый объект не имеет установленных событий (noAction в палитре JavaScript).
Можно добавлять, копировать и удалять события, используя три кнопки внизу палитры.
При создании нового события, создается новая копия объекта, которую можно редактировать независимо от первоначального. Единственное условие - нельзя изменить тип объекта.
IS может автоматически "оформлять" уже созданные HTML документы, заменяя обычный текст картинками. Эта функция называется Batch Replace и доступна из меню File->Batch Replace HTML. Перед ее использованием, нужно создать заготовку. Для этого создается новый документ и в нем создается набор объектов (эти объекты должны быть текстовыми, и из этих объектов затем берется информация о стиле). Затем, используя палитру Web, каждому объекту задается тип данных, которые им будут заменены (список Replace). При создании HTML документа, каждому текстовый элемент в нем присваивается определенный тип (так же, как и в программе MS Word тексту можно присваивать тип заголовка, обычного текста и т.д.), т.е. заголовки и обычный текст имеют разные типы. Т.о., создав объект и указав ему в поле Replace тип, который был присвоен заголовку в HTML документе, можно заменить заголовок красиво оформленной надписью.
При замене, IS берет из HTML документа текст, соответствующий данному типу, переводит его в объект и применяет к нему соответствующий стиль, после чего записывает результат в графический файл и заменяет текст в HTML документе на созданное изображение.
Список литературы
Adobe ImageStyler On-line help.
Product Guides: Batch Generation
Layers and attributes
Working with images
Другие примеры дизайна можно найти в Интернет по адресам
http://www.imagestyler.com - сайт поддержки
http://codexorg.webjump.com - сайт, созданный автором реферата.