Бесшовный узор для фона сайта

Как создать бесшовный узор для фона сайта? Мы нашли два способа.

Бесшовный узор. 1-й способ

Используя изображение, показанное на рисунке 1, мы будем создавать web-страницу с фоном, как на рисунке 2. Также результат можно просмотреть здесь (откроется в новой вкладке/окне).

Рисунок 1

Рисунок 2

  1. Откройте в Photoshop понравившееся изображение. В нашем случае - это файл vetton_ru.jpg (рис. 3). Скачать можно здесь.
  2. Сохраните изображение под новым именем fon.jpg

    Рисунок 3

  3. Измените размер изображения, сделав 300 пикселей по ширине и 225 пикселей по высоте. Для этого выполните команду Image-Image Size… (Изображение-Размер изображения…). В появившемся окне сделайте соответствующие настройки (рис. 4). Нажмите ОК.

    Рисунок 4

  4. Увеличьте размер холста в четыре раза. Для этого выполните команду Image-Image Size… (Изображение-Размер холста…) и увеличьте каждый размер (по ширине и высоте в два раза), анкор поставьте в левый верхний угол, как на рисунке 5. Результат на рисунке 6.

    Рисунок 5

    Рисунок 6

  5. Выделите сам рисунок инструментом прямоугольного выделения , как показано на рисунке 7.

    Рисунок 7

  6. Скопируйте этот фрагмент командой Edit-Copy (Редактировать-Копировать), а затем вставьте Edit-Paste (Редактировать-Вставить).
  7. Откройте палитру слоев Window-Layers (Окно-Слои). В палитре должно быть два слоя, как на рисунке 8.

    Рисунок 8

  8. Инструментом перемещения сдвиньте верхний слой и установите, как показано на рисунке 9.

    Рисунок 9

  9. Теперь верхний слой надо развернуть по горизонтали. Для этого выполните команду Edit-Transform-Flip Horizontal (Редактировать-Трансформация-Развернуть по горизонтали). Результат на рисунке 10.

    Рисунок 10

  10. Склейте все слои командой Layer-Flatten Image (Слой-Выполнить сведение). В результате в палитре слоев у Вас должен снова образоваться один слой (рис. 11).

    Рисунок 11

  11. Инструментом прямоугольного выделения выделите цветной фрагмент, как на рисунке 12.

    Рисунок 12

  12. Скопируйте этот фрагмент командой Edit-Copy (Редактировать-Копировать), а затем вставьте Edit-Paste (Редактировать-Вставить).
  13. Откройте палитру слоев Window-Layers (Окно-Слои). В палитре слоев должно быть два слоя, как на рисунке 13.

    Рисунок 13

  14. Инструментом перемещения сместите верхний слой и расположите, как показано на рисунке 14.

    Рисунок 14

  15. Теперь верхний слой надо развернуть по вертикали. Для этого выполните команду Edit-Transform-Flip Vertical (Редактировать-Трансформация-Развернуть по вертикали). Результат на рисунке 15.

    Рисунок 15

  16. Склейте все слои командой Layer-Flatten Image (Слой-Выполнить сведение). В результате в палитре слоев у Вас должен снова образоваться один слой. Сохраните файл.
  17. Фоновый узор готов! Сейчас его надо применить в качестве фона web-страницы. Для этого откройте шаблон web-страницы. Шаблон можно скачать здесь.
  18. Откройте шаблон в блокноте и впишите строку, как показано на рисунке 16.

    Рисунок 16

  19. Откройте файл в браузере. Результат на рисунке 17. Также результат можно просмотреть здесь (откроется в новой вкладке/окне).

    Рисунок 17

    Бесшовный узор. 2-й способ

    Описан в наших уроках по основам HTML. Для этого способа Вам потребуется файл rodonit.jpg. Скачать его можно здесь. Для изучения способа перейдите по ссылке.