.

Создание фрагментов Web-изображения

Еще одним способом оптимизации Web-графики является ее разбивка на отдельные части. Данный подход позволяет достичь трех целей.

Пользователям не придется ожидать загрузки больших блоков графики до тех пор, пока хоть что-нибудь появится на странице. Отдельные графические компоненты загружаются относительно быстро, так что пользователи практически сразу смогут увидеть часть дизайна страницы.

Однако не слишком увлекайтесь созданием фрагментов t рафики. Загрузка сотни крошечных графических компонентов может сильно затянуться.

Сохраните отдельно фрагменты графики. Для получения наибольшего эффекта вы можете задать разные настройки палитры и формата файла для каждого графического компонента. Например, 12.12 в области заголовка используется только один цвет, в то время как кнопки практически являются фотографиями. Если вы сохраните заголовок отдельно в формате GIF, то он будет содержать лишь четыре цвета. Если же вы не станете обрезать изображение и сохраните его сгруппированным вместе с кнопками, вам придется использовать палитру на 100 цветов (как минимум), чтобы передать и текст, и графику.

Фрагменты одного изображения можно использовать как отдельные независимые элементы на Web-странице. Например, вы можете преобразовать отдельные графические компоненты в интерактивные кнопки, которые изменяют свой внешний вид при наведении на них указателя мыши. При этом другая графика на странице остается неизменной вследствие того, что изображение каждой кнопки является независимым элементом (рис. 12.13).

Большинство программ для работы с графикой, например Fireworks и Photoshop, позволяют разрезать изображения на отдельные элементы. Получив фрагменты графики, эти программные продукты дают возможность применить различные настройки палитры и формата файла, добавить интерактивные ссылки и элементы, изменяющие внешний вид. После того как пользователь щелкнет указателем мыши на графическом компоненте, можно задать выполнение какого-либо действия.

Разрезая графику на части, вы получаете множество преимуществ, но, возможно, вы не имеете представления о том, как все эти элементы снова собрать вместе. Для этих целей обычно используют структуры HTML-таблиц. К счастью, и Fireworks, и Photoshop генерируют необходимый HTML-код для того, чтобы воссоздать правильное расположение фрагментированных графических элементов внутри Web-браузера.

Фоновые fiucifHKU

До того как я вас “выпущу на производство” больших объемов графики, мне бы хотелось рассказать еще об одном аспекте. Кроме всего остального, наиболее распространенная ошибка, встречающаяся при разработке графики, — это плохо обработанные края изображения. Нужно сделать так, чтобы край совпадал по цвету с фоном.

Если вы заранее не обратите внимания на края изображения, вы получите файл с эффектом свечения по краям. Изображение 12.14 создавалось на белом фоне. И хотя дизайнер выбрал белый цвет в качестве прозрачного, все равно наполовину белые края изображения остались. Если фон изображения темный, свечение на краях объектов будет видно особенно отчетливо.



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×