Онлайн учебник по работе
с программой ImageReady

Создание графики для сайта

       

Заполнение фона повторяющимся узором

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

Программа ImageReady позволяет преобразовать изображение в HTML-файл элемента «черепицы», а затем использовать этот файл в качестве фона какого-либо изображения (см. раздел «Использование HTML-файла в качестве фона»). Фон будет отображаться при предварительном просмотре файла в браузере. Также можно указать цвет вместо «черепицы» для заливки фона Web-страницы.

Создание файла «черепицы»

  1. В программе ImageReady откройте изображение, которое будет использоваться в качестве «черепицы». По возможности выберите низко контрастное изображение с близкими оттенками цветов, так чтобы картинки и текст, загружаемые поверх повторяющегося узора, было легко рассматривать и читать. Если изображение содержит ломтики, то воспользуйтесь командой Slices > Delete All (Ломтики > Удалить все).
  2. Кадрируйте изображение, если необходимо использовать только его часть.
  3. Выполните команды Filter > Other > Tile Maker (Фильтр > Другие > Создать черепицу) - см. рис. 23.175.
  4. Включите опцию Blend Edges (Совместить края), чтобы края каждого элемента «черепицы» перекрывались с соседним элементом. Введите значение в процентах (от 1 до 20) в поле Width (Ширина), чтобы определить степень наложения краев мозаичных элементов (рис. 23.175)

Tile Maker

Рис. 23.175. Диалоговое окно Tile Maker

Tile Maker

Рис. 23.176. «Черепица» с перекрывающимися краями

Узор

Рис. 23.177. Узор, созданный без применения фильтра Tile Maker; края элементов не перекрываются

  1. Установите флажок Resize Tile to Fill Image (Изменять размер «черепицы» при заполнении изображения), чтобы размер «черепицы» соответствовал текущему размеру изображения. Если этот флажок не будет установлен, то элемент «черепицы» уменьшится в размерах в соответствии со значением в поле Width (Ширина). На рис. 23.176 показан узор, созданный при установленной опции Blend Edges (Совместить края), значении в поле Width (Ширина) равном 10% и установленном флажке Resize Tile to Fill Image (Изменять размер «черепицы» при заполнении изображения). Сравните его с узором, показанным на рис. 23.177. Альтернативный вариант - установите флажок Kaleidoscope Tile (Калейдоскоп), чтобы программа создала абстрактное изображение из исходного.
  2. Щелкните по кнопке ОК.
  3. Выполните команду File > Save Optimized (Файл > Сохранить с оптимизацией) либо нажмите клавиши Ctrl+ Alt+S, измените имя файла, выберите папку, в которой он будет храниться, и щелкните по кнопке Save (Сохранить).

Предварительный просмотр мозаичного фона

  1. Откройте файл в программе ImageReady.
  2. Удалите все ломтики.
  3. Выполните команды File > Output Settings > Background (Файл > Настройки вывода > Фон).
  4. Поставьте переключатель View As (Просмотреть как) в положение Background (Фон) - см. рис. 23.178.
  5. Щелкните по кнопке ОК.
  6. Для того чтобы просмотреть фон, на панели инструментов щелкните по кнопке Preview in Default Browser (Предварительный просмотр в браузере по умолчанию), либо выберите браузер из списка доступных.

В диалоговом окне File > Save Optimized (Файл > Сохранить с оптимизацией) или Save Optimized As (Сохранить с оптимизацией как), щелкните по кнопке Output Settings (Настройки вывода), чтобы вывести диалоговое окно Output Settings (Настройки вывода), из второго всплывающего меню выберите вариант Background, затем выполните шаги 3-4.

Упрощайте!

Несмотря на то, что программа ImageReady способна создать «черепичный» HTML-фон, возможно, вы захотите связать такой фон с Web-страницей при помощи специальных программ, таких как GoLive компании Adobe, HomeSite или Dreamweaver компании Macromedia. Узнайте у Web-программиста или специалиста по Web-страницам, какую программу лучше использовать, чтобы включить код фона в код Web-страницы.

Output Settings

Рис. 23.178. Окно настроек вывода Output Settings в режиме Background

Советы по созданию фонового узора

Вот несколько советов по созданию фонового узора:

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

Output Settings

Рис. 23.179. Окно Output Settings в режиме Image

Использование HTML-файла в качестве фона

  1. Откройте изображение.
  2. Воспользуйтесь командами File > Output Settings > Background (Файл > Настройки вывода > Фон).
  3. Поставьте переключатель View As (Просмотреть как) в положение Image (Изображение), если она доступна (рис. 23.179).
  4. В поле Image (Изображение) щелкните по кнопке Choose (Выбрать), выделите оптимизированный файл и щелкните по кнопке Open (Открыть).

    Чтобы указать однотонный цвет для фона, в разделе Background выберите его из всплывающего меню Color (Цвет), рядом с которым есть образец цвета (рис. 23.179), либо щелкните по образцу цвета и выберите цвет из палитры (установите флажок Only Web Colors (Только Web-цвета)). Этот цвет будет отображаться при загрузке изображения и будет виден сквозь прозрачные области основного изображения или элемента «черепицы».

  5. Щелкните по кнопке ОК.
  6. Для того чтобы просмотреть фон, щелкните на панели инструментов по кнопке Preview in Default Browser (Предварительный просмотр в браузере по умолчанию), либо нажмите эту кнопку и выберите браузер из списка.

Удаление HTML-файла «черепицы» или однотонной фоновой окраски изображения

  1. Откройте изображение и воспользуйтесь командами File > Output Settings > Background (Файл > Настройки вывода > Фон).
  2. Удалите имя файла в поле Image (Изображение) или из всплывающего меню Color (Цвет) выберите вариант None (Нет).
  3. Щелкните по кнопке ОК.

Диалоговое окно Save for Web в программе Photoshop

Нас бы мучила совесть, если бы, в конце концов, мы не показали, как выглядит диалоговое окно Save for Web (Сохранить для Web) в программе Photoshop. Ранее было сказано, что окно Save for Web похоже на окно Lite в ImageReady. В программе ImageReady есть все те же настройки оптимизации, что и в диалоговом окне Save for Web, и даже больше, гораздо больше. Если вам необходимо изучить возможности окна Save for Web, то воспользуйтесь указателями (рис. 23.180) и найдите соответствующие разделы по программе ImageReady.

Save for WebЧтобы открыть диалоговое окно Save for Web, воспользуйтесь комбинацией клавиш Ctrl+Shift+Alt+S

Save for Web

Рис. 23.180. Диалоговое окно Save for Web

 

 

 

Top.Mail.Ru
Top.Mail.Ru