Подготовка графических файлов для Интернета

ЛАБОРАТОРНАЯ РАБОТА № 2

РАЗРАБОТКА ДИЗАЙН-МАКЕТА САЙТА В PHOTOSHOP

Цель работы: закрепить знания и навыки, необходимые для проектирования и разработки web-приложений.

Теоретические сведения

Общий подход к размещению графики на странице

Графические вставки очень оживляют сайт. Даже на таких "текстовых" сайтах, как поисковые системы, всегда есть некие картинки, баннеры, буквицы и всякое тому подобное. Ну а если бы не было - их надо было бы придумать, настолько уныло выглядят страницы, на 100% состоящие из текста. С другой стороны, перенасыщение сайта графикой тоже производит удручающее впечатление, да и грузится он заметно дольше. По многочисленным публикациям можно сделать вывод – "вес" страницы не должен превышать ста килобайт (для фотоальбомов и качественных фотографий можно больше - там посетитель заранее готов подождать).

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

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

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

Общий вывод по баннерам - пара баннеров не ухудшает общий вид страницы, придает ей динамику, возможно приводит пару-тройку посетителей в день. Ну и для тех, кого раздражает чужая реклама - можно наделать своих баннеров, поставить скрипт-баннерокрутилку и весело заманивать посетителей со своих страниц на свои же. Изготовить баннер можно опять же в Macromedia Fireworks MX или в Adobe Image Ready - это дело вкуса.

Подготовка графических файлов для Интернета

Для Интернета используют графические файлы форматов jpg, png, gif. jpg и png - используются для многоцветных изображений (в том числе фотографий), а gif - для элементов оформления страницы с ограниченным количеством цветов и баннеров с анимацией.

Общая рекомендация при использовании графики в оформлении web-страниц - не перегружать страницы графикой. Чтобы страница быстро грузилась, ее общий "вес" не должен превышать 200 килобайт. Конечно, если пользователь Интернет сидит на скоростной линии - его не будет слишком волновать скорость загрузки, зато взволнует плата за трафик (за количество скачанных из Интернета кило- и мегабайтов) и, стало быть, рекомендация остается в силе.

Самый простой способ сжатия картинок - использование для этой цели программы Adobe Photoshop. При этом надо иметь в виду, что разрешение графических файлов для интернета - 72 пикселя/дюйм, максимальные размеры картинки, еще помещающиеся на экране - 760 пикселей (ширина) и 560 (высота). Конечно, экраны могут быть и побольше, но рассчитывать лучше на минимальные возможности посетителя странички. Задача сжатия картинки решается в два действия:

1. выбрать в меню Редактирование/Размер изображения и выставить необходимые разрешение и ширину (или высоту). Галка в окошке "Сохранять пропорции" должна быть выставлена, тогда второе измерение изменится автоматически;

2. выбрать в меню Файл/Сохранить для Web. В получившемся окне для форматов jpg, png можно ничего не менять, а для формата gif - можно уменьшить число цветов до минимально необходимого. Для формата jpg можно в следующем появившемся окне уменьшить качество, что приведет к уменьшению размера картинки.

Если приходится сжимать большое количество фотографий, удобнее применять программы для групповой обработки графических файлов. Из того, с чем приходилось сталкиваться лично, лучшие - плагин для Photoshop - Web Image Guru и программа Jpeg Imager. Они позволяют работать с большим количеством графических файлов одновременно, получая на выходе набор файлов с заданным качеством и размерами.

Теперь о размещении фотографий и картинок на Интернет-страницах. Очень раздражает просмотр фотографий по одной. Еще более убого будут выглядеть картинки в полноразмерном варианте по несколько штук на странице. Оптимально предъявлять фотографии в виде их копий уменьшенного размера (preview, предосмотр) по 15 - 30 штук на страничке. При таком способе для посетителя страницы облегчается выбор фотографий для просмотра и уменьшается вес страницы (трафик). При нажатии на превьюшку должна открываться новая страничка с соответствующей полноразмерной фотографией. Размер превьюшки, на мой взгляд, оптимально - 150 пикселей (больший размер).

Поиск по сайту: