Фон для Web-страницы
Установка фона для Web-страницы
Мозаичная текстура из фотографии
Текстуры на основе палитры Assorted Brushes
Background, или фоновая текстура (background англ. — фон), — это небольшое точечное изображение, использующееся для создания фона Web-страницы. Фон часто представляет собой имитацию какой-либо поверхности, например песка, мятой бумаги, дерева, мрамора, и позволяет существенно украсить и оживить Web-страницы. Как правило, фоновые текстуры имеют небольшой фиксированный размер, а браузеры способны генерировать эти мелкие изображения на все пространство страницы. Основное требование при создании фоновых текстур для Web — добиться идеального соединения образцов — кирпичиков фона, благодаря чему получаются полностью бесшовные изображения.
Создание собственных фонов для Web-страниц — творческий процесс, и ImageReady предоставляет для него широкие возможности. Хотя можно пойти и более простым путем и позаимствовать готовые фоны в Сети, заглянув, например, по адресам http://creativemadness.com/graphics/backgrounds/, http://textures.bizland.com/, http://www.graphics4all.de/webd/texturen/, http://njet.net/heikki/backgrounds_index.shtml, http://www.textures.h1.ru/ или найти подходящие фоны на лазерных дисках. Правда, в этом случае дизайн страницы придется создавать, подстраиваясь под найденную текстуру, а ни один настоящий Web-дизайнер на такое не пойдет.
Поэтому фоновые текстуры, как правило, приходится создавать самостоятельно. Это делается вручную или с помощью специальных генераторов фонов, имитирующих
естественные материалы, такие как мрамор, воду, облака и пр. В Photoshop с этой целью удобно использовать возможности плагина Pattern Maker, позволяющего создать фоновую текстуру на основе любого фрагмента изображения, — этот вариант мы рассматривали с вами ранее. А в ImageReady есть интересный фильтр Tile Maker, обеспечивающий создание интересных текстур на основе фрагментов фотографий. Результат такой генерации может быть и удивительно реалистичный, и совершенно абстрактный, но главное — он всегда будет уникальным.
Установка фона для Web-страницы
Чтобы определить фоновый цвет для Web-страницы, откройте в ImageReady редактируемое изображение (рис. 1), выберите команду File > Output Settings > Background (Файл > Настройки экспорта > Фон) и задайте нужный цвет в списке BG Color (Цвет) (рис. 2). После закрытия окна настроек нажмите кнопку Preview in Default Browser (Просмотр в браузере по умолчанию) и вы увидите редактируемое изображение на фоне выбранного цвета (рис. 3). После сохранения Web-страницы с оптимизацией командой File > Save Optimized (Файл > Сохранить с оптимизацией), вариант «HTML и Image», будут получены файл Пример1.html и графическое изображение в папке Images.
Точно таким же способом можно определить в качестве фона и любую текстуру, установив в списке BG Color (Цвет) вариант None (Нет), щелкнув на кнопке Choose (Выбрать) и выбрав подходящую текстуру с диска (рис. 4). Посмотреть результат можно с помощью кнопки Preview in Default Browser (Просмотр в браузере по умолчанию) (рис. 5). Сохраните Web-страницу с оптимизацией командой File > Save Optimized (Файл > Сохранить с оптимизацией), вариант «HTML и Image», — в итоге получите файл Пример2.html и графическое изображение в папке Images.
 |
|
Мозаичная текстура из фотографии
Откройте в ImageReady подходящую фотографию и скопируйте в новое изображение фрагмент, на основе которого будете создавать мозаичную текстуру (рис. 6).
Воспользуйтесь фильтром «Мозаичные текстуры» Filter > Others > Tile Maker (Фильтр > Другие > Мозаичные текстуры). Установите режим Blend Edges (Совместить края) — в этом случае края каждого элемента «мозаики» будут перекрываться с соседним элементом и стыки станут незаметны. В поле Width (Ширина) оставьте значение 10%, принятое по умолчанию (рис. 7). В итоге текстура в окне документа преобразуется в мозаичную, размер которой будет на 10% меньше размера исходного изображения — освободившаяся площадь окажется прозрачной (рис. 8). Если установить флажок Resize Tile to Fill Image (Отмасштабировать до исходного размера), изображение после обрезания будет отмасштабировано до размеров исходного, но качество текстуры при этом пострадает. Поэтому данную возможность стоит использовать только в случае крайней необходимости.
Обрежьте прозрачные края изображения, применив команду Trim (Обрезка) из меню Image (Изображение) и определив, какие пикселы следует обрезать (рис. 9). Полученная в результате текстура станет похожа на ту, что приведена на рис. 10.
Объявите изображение в качестве фона с помощью команды FileaOutput SettingsaBackground (ФайлaНастройки экспортаaФон) (рис. 11).
Сохраните Web-страницу с оптимизацией командой File > Save Optimized (Файл > Сохранить с оптимизацией), вариант «HTML и Image», — в итоге вы получите файл Пример3.html и графическое изображение в папке Images. Готовая Web-страница после открытия ее в браузере будет напоминать страницу, приведенную на рис. 12.
|
|
Калейдоскопические текстуры
Для создания калейдоскопических текстур также потребуются подходящие фотографии. Откройте выбранную фотографию в ImageReady (рис. 13), выделите на ней фрагмент для создания текстуры (в ряде случаев можно создавать калейдоскопическую текстуру и на основе целого изображения) и воспользуйтесь командой Filter > Others > Tile Maker (Фильтр > Другие > Мозаичные текстуры) с режимом Kaleidoscope Tile (Калейдоскоп) (рис. 14). Полученное изображение будет напоминать рис. 15.
Переместите выделение в другое место изображения и повторите наложение фильтра, выбрав команду FilteraApply Tile Maker (ФильтрaПрименить мозаичные текстуры), — перед вами окажется другая текстура. Продолжайте действовать таким образом до тех пор, пока не получите подходящий результат. После этого скопируйте созданную текстуру в новый документ, объявите изображение в качестве фона с помощью команды FileaOutput SettingsaBackground (ФайлaНастройки экспортаaФон) и сохраните с оптимизацией командой File > Save Optimized (Файл > Сохранить с оптимизацией), вариант «HTML и Image», — в итоге будут получены файл Пример4.html и графическое изображение в папке Images. Готовая Web-страница с фоном после открытия ее в браузере будет похожа на приведенную на рис. 16.
|
|
Узорные текстуры
Достаточно интересные текстуры можно генерировать на основе узоров, которые создаются либо полностью вручную, либо с применением таких фильтров, как DitherBox (Гибридные цвета) — команда Filter > Others > DitherBox (Фильтр > Другие > Гибридные цвета) или Halftone Pattern (Образец палитры), вызываемый командой Filter > Sketch > Halftone Pattern (Фильтр > Эскиз > Образец палитры).
Вначале рассмотрим создание узорной текстуры на основе узора, сгенерированного вручную. Для этого на прозрачном фоне создайте новый документ, совпадающий по размеру с узором, например 5х5 пикселов, и сформируйте основу узора обычной кистью — в данном примере был создан узор в соответствии с рис. 17. Определите данный узор как образец, применив команду Edit > Define pattern (Редактирование > Определить образец).
После этого создайте новый документ размером с обычную текстуру и заполните его узором, воспользовавшись командой Edit > Fill (Редактирование > Заливка) (рис. 18). Результат может напоминать рис. 19. При желании можно наложить на созданную текстуру фильтры, изменить яркость, контрастность и прочие параметры, например, в соответствии с рис. 20.
Объявите созданную текстуру в качестве фона с помощью команды File > Output Settings > Background (Файл > Настройки экспорта > Фон) и сохраните с оптимизацией командой File > Save Optimized (Файл > Сохранить с оптимизацией), вариант «HTML и Image», — в итоге получите файл Пример5.html и графическое изображение в папке Images. Готовая Web-страница после открытия ее в браузере будет похожа на приведенную на рис. 21.
Можно поступить и еще проще, воспользовавшись возможностями фильтра Halftone Pattern (Образец палитры). Создайте новый документ размером 150х150 пикселов, установите в качестве основного любой цвет по вашему усмотрению, а в качестве фонового — белый и залейте изображение основным цветом (рис. 22).
Примените команду Filter > Sketch > Halftone Pattern (Фильтр > Эскиз > Образец палитры), например, при таких параметрах: Size (Размер) — 1, Contrast (Контрастность) — 5, Pattern Type (Тип палитры) — Dot (рис. 23).
Воспользуйтесь командой Filter > Brush Strokes > Sprayed Strokes (Фильтр > Штрихи кисти > Брызги) с параметрами, как на рис. 24. Изображение станет напоминать рис. 25.
Объявите созданную текстуру в качестве фона с помощью команды File > Output Settings > Background (Файл > Настройки экспорта > Фон) и сохраните с оптимизацией командой File > Save Optimized (Файл > Сохранить с оптимизацией), вариант «HTML и Image», — в итоге получите файл Пример6.html и графическое изображение в папке Images. Готовая Web-страница после открытия ее в браузере будет напоминать ту, что изображена на рис. 26.
|
|
Текстуры на основе палитры Assorted Brushes
Интересные текстуры можно очень просто получить, воспользовавшись палитрой кистей Assorted Brushes. Создайте в ImageReady новый документ размером 150х150 пикселов и залейте его подходящим цветом — в примере взят черный цвет (рис. 27).
Выберите нужную кисть из группы Assorted Brushes, смените основной цвет (в данном случае был выбран белый цвет) и с помощью кисти сформируйте основу текстуры (рис. 28). При необходимости скорректируйте тон командой Image > Adjustments > Hue/Saturation (Изображение > Регулировки > Оттенок/Насыщение) при параметрах, указанных на рис. 29. В итоге текстура будет иметь примерно такой вид, как на рис. 30.
Объявите созданную текстуру в качестве фона с помощью команды FileaOutput SettingsaBackground (ФайлaНастройки экспортаaФон) и сохраните с оптимизацией командой File > Save Optimized (Файл > Сохранить с оптимизацией), вариант «HTML и Image», — в итоге получите файл Пример7.html и графическое изображение в папке Images. Готовая Web-страница после открытия ее в браузере будет похожа на страницу, показанную на рис. 31.
