Без диагональных полосок по фону красивого Web2.0 дизайна не бывает. Уже не бывает... Уверен пройдет пару лет и сама Гугля не выдержит и напустит у себя по фону полосок, а потом настанет эпоха тотального цифрового контроля и всех владельцев сайтов обяжут заполосить свои ресурсы с ног до головы :). Так что если кто еще не знает, как это делать - спешите узнать и научиться, тем более, что это ОЧЕНЬ ПРОСТО...
Первым делом идем в какой-нибудь
Генератор Полосатых Фонов. Например сюда
www.stripegenerator.com. Именно там мы и будем творить себе фон. Ребятушки создатели генератора постарались на славу. Во-первых, очень понятный интерфейс, а во-вторых куча возможностей, которые позволяют сгенерировать практически любой полосатый фон. С любым углом, с любым цветом, с тенью под полосками, без тени, с засветкой - без нее, полоски могут быть одной ширины, а могут быть разной, тоже самое касается цвета полос. Я не буду описывать как пользоваться этим генератором - это было бы чрезчур занудно - сами разберетесь.
После того как вы набалуетесь с этой чудо машиной и решите, что вот он тот самый фон, который вам нужен, жмите кнопку Download. Вам загрузится png файл, маленький квадратик - вроде такого (я назвал его back.png):
Это и есть ваш фон. Его можно сразу использовать в верстке, для этого положите файл back.png в папку с картинками сайта и пропишите в CSS файле вашего макета новое свойство для тега body.
body{background-image: url(../images/back.png);}
Если нет никаких ошибок, то весь ваш сайт будет теперь очень полосат (Понятно, что путь к вашему back.png может быть любым другим).
Но вернемся к Photoshop'у. Если вы работаете не для себя, а под заказ, то прежде чем верстать, надо утвердить вариант оформления у заказчика. Как "растянуть" этот маленький квадратик на всю картинку макета в Photoshop'e? Нет ничего проще - открывайте Photoshop, открывайте в нем ваш back.png. Жмем Ctrl+A и выделяем всю картинку. Теперь делаем из маленького квадратика новый шаблон (Pattern), для этого идем Edit >> Define Pattern.
И создаем шаблон (Pattern) под тем именем, которое больше нравится (жмем Ok).
Затем открываем макет в который нужно вставить фон. Я просто открыл пустой документ: 524 x 124 px, вы же можете создать в своем макете новый слой Shift+Ctrl+N и разместить его в палитре слоев (Layers) под всеми остальными слоями. В заключении нужно заполнить активный слой фоном, жмем Shift+f5. В появившемся окне Fill выбираем Pattern.
Теперь в этом же окне из всех шаблонов выбираем наш полосатый шаблон.
Всё! Жмем Ok и у нас получился сильно поласатый фон.
было:
стало: