Бесшовный фон - Создание сайта

Фон web-страниц в значительной мере определяет стиль и привлекательность всего сайта.

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

Выберите команду Фильтр>Рендеринг>Облака. Фильтр будет применен, и на изображении появится узор в виде облаков.

Теперь применим команду Фильтр>Рендеринг>Облака С Наложением. Узор на изображении изменится. Повторное многократное применение этого фильтра создает эффект "прожилок", который напоминает текстуру мрамора. Для повторного применения последнего использованного фильтра достаточно нажать комбинацию клавиш Ctrl+F. Примените это сочетание несколько раз. Получится что-то вроде этого:

Выберите команду Фильтр>Стилизация>Свечение Краев. В появившемся диалоговом окне настройте параметры эффекта следующим образом:

Ширина краев - 1

Яркость краев - 20

Смягчение - 1.

После применения фильтра изображение будет затемнено. Воспользуемся командой Изображение>Коррекция>Яркость/Контрастность. Установите следующие значения:

Яркость - +50

Контрастность - +30

Теперь необходимо тонировать полученное изображение, состоящее из оттенков серого с помощью команды меню Изображение>Коррекция>Цветовой Тон/Насыщенность.

Установите флажок Тонирование и значения ползунков:

Цветовой тон - 216

Насыщенность - 60

Яркость - +17

Сохраните полученное изображение в своей папке под именем Fon. psd

На этом создание фоновой текстуры можно считать законченным. Но, так как рисунок будет повторен на Web-странице много раз, между фрагментами фона будут видны швы. В Adobe ImageReady имеется специальный фильтр - Конструктор Мозаики, который позволяет удалить швы, создавая таким образом бесшовный фон.

Нажмите кнопку Редактировать В ImageReady в нижней части панели инструментов. Будет запущена программа Adobe ImageReady, и в ее рабочем окне откроется документ Fon. psd.

Выберите команду Фильтр>Другие>Конструктор Мозаики. Данный фильтр смешивает пикселы на краях изображения для создания бесшовного фона. При установленном переключателе Blend Edges (Размытие краев) будет выполняться размытие краев рисунка для исключения швов между плитками при повторении изображения, на web-странице.

В поле Width (Ширина) указывается ширина полосы у края изображения, в пределах которой должен происходить плавный переход. Обычно используются значения от 5% до 15%. Оставим значение, предложенное по умолчанию - 10%.

При установленном флажке Resize Tile To Fill Image (Изменить размер плитки для заполнения изображения), размер плитки подгоняется под размер изображения. Если сбросить этот флажок, на Web-странице плитки не будут прилегать вплотную друг к другу. Установите этот флажок.

Установка переключателя Kaleidoscope Tile (Калейдоскоп) создаст фон в виде калейдоскопа, в котором изображение отражается по горизонтали и вертикали, создавая таким образом оригинальный узор.

Чтобы увидеть как будет выглядеть фон в программе просмотра Web-страниц следует указать программе, что данное изображение должно использоваться как фон.

Выберите команду Файл>Настройки Экспорта>Фон.

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

Теперь можно просмотреть фон в браузере. Выберите команду Файл>Предварительный Просмотр В>iexplore. Будет запущена программа Internet Explorer, в окне которого Вы увидите бесшовный фон. Кроме фонового рисунка в окне программы выводится информация о формате изображения, его размерах, размере файла и параметрах оптимизации, а ниже - HTML код автоматически сгенерированного файла.

Закройте окно браузера.

Чтобы созданное изображение можно было использовать как фон Web-страницы, его необходимо оптимизировать и сохранить в Web-формате.

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

Сохраните оптимизированный документ в своей папке на Server под именем Fon. gif с помощью команды меню Файл>Сохранить Оптимизированный.

Закройте программу Adobe ImageReady без сохранения документа Fon. psd.

Откройте программу FrontPage. Для сайта ООО "Динас" создайте новую страницу на основе обычного шаблона страницы, назовите ее Kontakt. htm и сохраните в корневой папке сайта. Назначьте созданный фон данной странице с помощью команды меню Формат>Фон>Форматирование. Используя возможности макетных таблиц выберите для созданной страницы макет вида. В верхней части расположим название страницы, область слева будет служить для перехода на другие страницы нашего сайта, в центральной части будет представлена контактная информация, и в нижней части расположим служебную информацию по сайту. Все работы выполним силами графических редакторов Adobe PhotoShop и Adobe ImageReady.

Похожие статьи




Бесшовный фон - Создание сайта

Предыдущая | Следующая