3.5 Подготовка рисунков в программе Xara Webstyle. Создание сайтов (самоучитель)
Мелкие графические элементы оформления, которые мы рассматривали в разделе 3.3, удобно готовить в программе, которая называется Xara WebStyle. Эта программа узкоспециализирована - она предназначена только . для создания мелких графических элементов оформления, и ни для чего другого. Такая узкая специализация - одновременно и достоинство, и недостаток. Достоинство - потому что даже неподготовленный пользователь может быстро сделать в ней все, что нужно. Недостаток - потому что, если у вас богатая фантазия, в скором времени вы исчерпаете ее возможности и вам станет "тесно" в ее рамках. Однако помните, что вы все равно сможете воспользоваться этой программой для получения промежуточного результата, который впоследствии можно "довести до ума" в полноценном графическом редакторе.
Можно выбрать тип графического элемента который следует создать. Таких типов здесь 6:
- обычные заголовки (Headings);
- 3-мерные заголовки (3D Headings);
- фоновые рисунки (Backgrounds);
- кнопки (Buttons);
- графические маркеры (Bullets);
- горизонтальные полосы-разделители (Dividers).
Выбор шаблона
Щелкнув кнопкой мыши на каком-либо из этих типов, мы попадаем в окно выбора шаблона, на основе которого будет создаваться графический элемент. Например, щелкнем на типе Headings - откроется окно. При этом в верхней части экрана появляется область, в которой наглядно виден результат наших манипуляций. Например, когда мы выберем какой-нибудь шаблон, его изображение тут же появится в области просмотра.
Настройка параметров рисунка
Выбрав шаблон, приступим собственно к созданию нашего элемента. Для этого можно воспользоваться кнопками, расположенными в левой части экрана: Text (Текст), Color (Цвет), Texture (Текстура), Shadow (Тень) и Size (Размер).
Чтобы ввести текст заголовка, нажмите кнопку Text. Далее можно набрать любое словосочетание, а также выбрать шрифт, которым оно будет начертано. Шрифт выбирается любой из числа установленных в операционной системе. Все происходящие изменения тотчас же отображаются в области просмотра. Удобно, что название каждого шрифта отображается самим этим шрифтом (кроме тех случаев, когда шрифт не алфавитный, например Maestro или Wingdings).
Нажатие на кнопку Color (Цвет) открывает возможность выбора цвета будущего заголовка. В зависимости от выбранного шаблона этих цветов может быть несколько. Например, шаблон заголовка Embossed (Тиснение) позволяет выбрать 3 цвета: цвет светлых краев, цвет темных краев и цвет тени. Кроме того, обычно есть еще возможность выбрать цвет фона (Background color), которая не влияет, собственно, на наш элемент, однако может помочь в его настройке, если заранее известно, на каком фоне он будет расположен.
Для выбора цвета предлагается интересная палитра, составленная из 216 (36*6) цветов и шести градаций серого цвета. 1 из предлагаемых цветов выбирается щелчком мыши. Если же этих цветов недостаточно, можно нажать кнопку Advanced (Дополнительно) и перейти к выбору цвета из полной TrueColor-палитры или даже ввести код цвета в цифровом виде, указав насыщенность красной, зеленой и синей составляющей в процентах или абсолютных значениях (десятичных или шестнадцатеричных), а также ввести параметры цвета в режиме HSV.
Кнопка Texture позволяет выбрать текстурное покрытие для графического элемента. Возможность наложения текстур также зависит от шаблона. Как и в предыдущем случае, предоставляется возможность выбора фоновой текстуры для просмотра.
Следующая кнопка, Shadow, позволяет отрегулировать тени, отбрасываемые графическим элементом. Для начала предлагаются восемь вариантов отбрасываемой тени. Если они не устраивают, нажмите на кнопку Advanced (Дополнительно) - откроется окно, средствами которого тени можно настроить аккуратнее. В левой части этого окна задают тип тени (Wail - тень, падающая на стену, или Floor - тень, падающая вниз, " на пол "; есть еще вариант None - без тени). В следующем разделе (projection) можно задать угол отбрасывания тени и ее размер по вертикали (в процентах). И, наконец, в правой части окна задают насыщенность тени (darkness) и степень размытия ее краев (blur).
И, наконец, кнопка Size позволяет установить размер создаваемого графического элемента в пикселах. Здесь есть, правда, 1 неудобство: высота и ширина изменяются только с сохранением пропорций. Но для начала хватит и этого - ведь работу всегда можно продолжить в любом ином графическом редакторе.
Выбор способа сохранения
Когда графический элемент создан, его нужно сохранить в оптимальном виде - чтобы качество было получше, а размер поменьше. Для этого в программе Xara WebStyle есть очень наглядная утилита. Если нажать на кнопку Save (Сохранить), открывается диалоговое окно, в котором можно выбрать тип файла - GIF или JPEG и размер файла (Fast Download - для быстрой загрузки, низкое качество; Medium Quality - среднее качество и средний размер, и High Quality - высокое качество, но и размер побольше). А если нажать на кнопку Advanced (Дополнительно), можно тонко настроить все параметры сохранения файла. Для формата JPEG - это стандартная шкала качества (от 0 до 100), а для формата GIF можно выбрать количество цветов (16 или 256), палитру, режим передачи полутонов, режим чересстрочной развертки и режим прозрачного рисунка. В последнем случае с помощью движка Trim transparency можно выбрать количество цветов, которые будут преобразованы в цвет, назначенный прозрачным. Самое замечательное, что во время всех этих манипуляций их результат можно непосредственно наблюдать в области просмотра, и контролировать при этом размер получающегося файла (указывается в нижней части панели предварительного просмотра). Кроме того, можно нажать на кнопку Browser Preview (Просмотр в браузере) и просмотреть результат работы так, как он будет выглядеть в браузере. При этом выдаются также дополнительные сведения, например кремя загрузки данного файла при различной производительности модемного соединения с Интернетом.
Обратите внимание на то, что в левом нижнем углу рабочей области практически всегда расположена кнопка Revert (Возврат), позволяющая сделать несколько "откатов" назад, если совершена трудноисправимая ошибка. А в правом нижнем углу часто располагается кнопка Theme (Тема), при нажатии которой предлагаются несколько заранее подобранных вариантов цвета, шрифта и т.п.
Мы рассмотрели работу в программе Xara WebStyle на примере выбора заголовка, но и работа с другими типами графики практически ничем не отличается от рассмотренного примера. Разница заметна лишь в возможностях выбора: например, при создании графического маркера нельзя вводить текст и т.п.
Как видите, интерфейс программы интуитивно понятен, и научиться работать с ней очень легко. Но если вы захотите сделать что-нибудь не совсем обычное или подготовить иллюстрацию для своей веб-страницы, вам придется воспользоваться более совершенной программой. Об этом и пойдет речь в следующем разделе.
