Мы уже говорили, что графика для web-страниц должна быть оптимизирована, максимальное качество изображения должно сохраняться при минимальном размере файла. Для этого идеально подходит программа Adobe Photoshop. Изучение данной профессиональной программы выходит за рамки данной статьи. Но без нескольких действий в этой программе нам не обойтись.

я могу порекомендовать мой курс «Обработка фотографий в Adobe Photoshop», опубликованный в журнале «Информатика и образование»,
а также на сайте www.titorov.ru

4.1. Уменьшение изображения

Для уменьшения фотографии нам потребуется две команды. Первая команда меню Изображение - Размер изображения

Окно Размер изображения в Adobe Photoshop
Рис. 23. Окно «Размер изображения» в Adobe Photoshop.

Данная команда позволит вам увидеть размер вашего изображения в пикселях, а также пропорционально уменьшить увеличить изображение. Работая с данным окном нужно помнить несколько важных моментов.

Во-первых, любое изменение размера влечет ухудшение качества фотографии. Если изменение невелико, то эта потеря может быть невидима глазу. За качество изменения размеров отвечает параметр «Интерполяция», более качественные результаты дает использование бикубической интерполяции. Во-вторых, для графики подготовленной для Интернета не важно разрешение фотографии и размер печатного оттиска, важна только ширина и высота, выраженная в пикселях. Если готовить графику для web вам приходится часто, имеет смысл выставить пиксели, как основную единицу измерения, делается это с помощью команды Редактирование - Установки - Единицы измерения и линейки.

Подготавливая фотографию для интернет страницы, в первую очередь обратите внимание на размер фотографии в пикселях (первые два поля). На рисунке размер равен 1772 на 1181 пикселей. Разумеется, эти значения велики для интернет страницы, т.к. наиболее распространенная ширина экрана составляет 1024 пикселя. Необходимо уменьшение фотографии. Отношение ширины к высоте в примере равно три к двум. Изменяя значение ширины вы автоматически изменяете значение высоты так, чтобы отношение сторон оставалось неизменным.Так если выставить в поле ширина значение 300, то значение высоты автоматически станет равно 200.

Пропорции будут сохраняться если у вас стоит галочка рядом с параметром «Сохранять пропорции».

А как быть если нам нужно из исходной фотографии сделать уменьшенную копию с отношением сторон четыре к трем, например 400 на 300 пикселей. Сделав значение ширины 400, значение высоты будет меньше необходимых 300 пикселей. Выставив значение высоты равное 300, значение высоты станет больше необходимых 400 пикселей (рисунок 24). Какой вариант нам выбрать?

Окно Размер изображения в Adobe Photoshop
Рис. 24. Окно «Размер изображения» в Adobe Photoshop.

Нам подойдет второй вариант уменьшения, когда одно значение размера станет равным заданному, а второе значение будет чуть больше. Для отрезания части изображения в Adobe Photoshop служит команда меню Изображение - Размер холста (рисунок 25)

Окно Размер холста в Adobe Photoshop
Рис. 25. Окно «Размер холста» в Adobe Photoshop.

Вы выставляете необходимое значение ширины, в нашем случае 400 пикселей и выбираете способ обрезания фотографии. Это делается с помощью кнопок в поле «Расположение». В примере, показанном на рисунке, нажата центральная кнопка, это означает, что после уменьшения ширины центральная часть останется без изменения, а слева и справа будет отрезано равное количество, в нашем случае по 25 пикселей.

4.2. Оптимизация графики

Уменьшить изображение недостаточно, его еще нужно оптимизировать. Для этого служит команда меню Файл - Сохранить для Web (рисунок 26).

Оптимизация изображения
Рис. 26. Оптимизация изображения.

Это окно - мощный инструмент оптимизации. Обратите внимание на вкладки в верхней части окна. В примере выбран режим «4 варианта». В результате вы можете одновременно видеть четыре варианта одного изображения, окно «1» - это исходное изображение, а остальные окна показывают, как будет выглядеть фотография после сохранения в различных форматах. Так в поле «2» фотография сохранная в формате .gif, а в окне «4» фотография сохранная в формате .jpg. Каждый формат имеет параметры, которые вы можете изменять в правой части окна, на рисунке активно второе окно и соответственно в правой части мы видим параметры для формата .gif.

Для формата .gif главные параметры:

  • количество цветов (чем их меньше, тем меньше финальный файл);
  • прозрачность. Если галочка установлена, то прозрачные пиксели в Adobe Photoshop останутся прозрачными и в gif-файле. Только не забывайте, что прозрачность в gif-файле однобитная, то есть пиксель либо прозрачен, либо нет, поэтому полупрозрачные тени будут отображаться некорректно.

Для формата .jpg главный параметр:

  • качество изображения (параметр изменяется от нуля до ста)

Важно, что изменяя любой параметр, вы можете видеть, какая картинка у вас получится на выходе и какой размер она будет иметь. Сравнивая полученные значения, можно быстро подобрать необходимые значения.

4.3. Разрезание изображения

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

Пример изображения для разрезания
Рис. 27. Пример изображения для разрезания.

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

Для разрезания нам понадобится программа Adobe Image Ready, она входит в поставку Adobe Photoshop. Программа внешне очень сильно напоминает своего старшего брата, она специально предназначена для создания и оптимизации web-графики, в ней можно создавать несложную gif-анимацию, кнопок и т.д. В данном разделе мы остановимся только на разрезании изображений.

Открыв изображение в Adobe Image Ready в первую очередь проверьте, видны ли вам линейки по краям изображения. Если это не так, то их необходимо включить меню View - Rulers (меню Просмотр - Линейки). Взяв мышкой за вертикальную и протянув ее вправо вы создадите первую направляющую, разделяющую наше изображение на две части. Выполнив это действие несколько раз вы получите рисунок, разделенный на фрагменты (рисунок 28).

Направляющие в Adobe Image Ready
Рис. 28. Направляющие в Adobe Image Ready.

Осталось только, разделить изображение. Делается это с помощью команды меню Slices - Create Slices from Guides (меню Фрагменты - Создать фрагменты по направляющим).

Изображение, разбитое на фрагменты
Рис. 29. Изображение, разбитое на фрагменты.

Если теперь сохранить изображение с помощью команды меню File - Save Optimized As - (меню Файл - Сохранить оптимизированный как), то на диске компьютера появится один html-файл и папка Images, содержащая 15 рисунков. Html-файл содержит невидимую таблицу, в ячейках которой вставлены фрагменты.

Нет необходимости загружать рисунки с надписями меню, их можно написать вручную. Также, не нужны рисунки из верхней полосы, ими могут быть пустые ячейки с заданным цветом фона. Удалив ненужные фрагменты и отредактировав html-файл мы получим нужный код:

Листинг 5.

<table width="522" height="92" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="FFF8E3">
  <td height="26">  </td>
  <td height="26">  </td>
  <td height="26">  </td>
  <td height="26">  </td>
  <td height="26">  </td>
</tr>
  <tr align="center" bgcolor="0C5945">
  <td height="22">о компании</td>
  <td height="22">новости </td>
  <td height="22">Каталог </td>
  <td height="22">Прайс лист</td>
  <td height="22">Вопрос-ответ </td>
</tr>
<tr>
  <td><img src="/images/menu_11.gif" width="96" height="44"></td>
  <td><img src="/images/menu_12.gif" width="106" height="44"></td>
  <td><img src="/images/menu_13.gif" width="104" height="44"></td>
  <td><img src="/images/menu_14.gif" width="102" height="44"></td>
  <td><img src="/images/menu_15.gif" width="114" height="44"></td>
</tr>
</table>

Практические задания:

1. Создание личной фото галереи, используя изученные возможности Adobe Photoshop.
2. Разрезание предложенного дизайн-макета сайта на отдельные фрагменты, макетирование страницы.

  • Скачайте дизайн-макет сайта (рисунок 30).
  • Выделите в нем шапку и разрежьте ее на части в Adobe Image Ready (рисунок 31)
  • Отредактируйте полученный html-файл, добавьте в него произвольный текст в нижние колонки. Придумайте, как сделать только вертикальные разделительные полосы внутри таблицы.

Пример дизайн-макета, предложенного ученикам
Рис. 30. Пример дизайн-макета, предложенного ученикам.

«Шапка» макета с направляющими
Рис. 31. «Шапка» макета с направляющими.

3. Создание «резинового» поля.

  • Предположим нам нужно создать поле для текста, такое как показано на рисунке 32 слева. Проблема в том, что мы не знаем количество строк, которое должно помещаться в поле, оно должно автоматически тянуться вниз при добавлении текста. Для того, чтобы это реализовать:
  • возьмите изображение поля без текста в Adobe Image Ready создайте направляющие, так как показано на рисунке справа;
  • на основе направляющих создайте фрагменты изображения и сохраните оптимизированное изображение, так, чтобы образовалось девять графических файлов (pole1.gif, pole2.gif и т.д.) и один html-документ, содержащий таблицу объединяющий фрагменты в единое поле.

Создание поля, тянущегося вниз
Рис. 32. Создание поля, тянущегося вниз.

  • Отредактируйте значение ячеек в созданной таблице: ячейки 4 и 6 не должны содержать рисунков, они должны иметь фоновое изображение, где в фоном являются рисунки pole4.gif и pole6.gif.
  • ячейка 5 должна быть пуста, в ней будет располагаться произвольный текст. Соответственно рисунок pole5.gif можно удалить.

Вопросы для самоконтроля

  1. Как связаны три характеристики: разрешение, размер изображения в пикселях и размер печатного оттиска?
  2. В чем смысл оптимизации графики?
  3. С помощью какого инструмента (окна) оптимизируется графика для web?
  4. Что создает программа Adobe ImageReady после «сохранения оптимизированного изображения»?
  5. Какие параметры таблицы нужно изменить для создания «резинового» графического поля?