поиск:
30.11.2007. | теги: фон | web2.0 | диагональные полоски
Без диагональных полосок по фону красивого 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.
Edit - Define Pattern
И создаем шаблон (Pattern) под тем именем, которое больше нравится (жмем Ok).
Pattern Name
Затем открываем макет в который нужно вставить фон. Я просто открыл пустой документ: 524 x 124 px, вы же можете создать в своем макете новый слой Shift+Ctrl+N и разместить его в палитре слоев (Layers) под всеми остальными слоями. В заключении нужно заполнить активный слой фоном, жмем Shift+f5. В появившемся окне Fill выбираем Pattern.
Fill - Pattern
Теперь в этом же окне из всех шаблонов выбираем наш полосатый шаблон.
Fill - Pattern
Всё! Жмем Ok и у нас получился сильно поласатый фон.
было:
заготовка для фона
стало:
полосатый фон
источник: http://psdtalk.ru | автор: Ikarushka | статьи | комментариев (3)
собираю на хостинг
ЯндексЯндекс. ДеньгиХочу такую же кнопку

ujin | 18.02.08, 21:29:25
Re:
Блин, за ссылку спасибо огромное! Столько времени потратил в поисках фонов...

Тоже искал | 01.08.08, 15:58:37
Re:
всем удачи!

Ксения | 23.07.09, 10:20:59
делаем полосатый фон (о самом простом)
Огромное спасибо автору за такие простые и доходчивые уроки!!! Это очень хороший и полезный сайт. Пишите, пожалуйста, побольше таких уроков! Еще раз спасибо!.. :-)
Добавить комментарий
Обязательные для заполнения поля помечены знаком *
Если у Вас возникли проблемы с чтением кода, нажмите на картинку с кодом для нового кода.
 
облоко тегов:
подарки к Новому году и Рождеству:
handmade подарки на Новый год и Рождество
толковые блоги:

www.designformasters.info

Очень сильный ресурс. Отличные переводы полезных статей о дизайне, верстке, типографике, продвижение, блогинге. Одним словом обо всем, что сейчас актуально в вебе. Хотите быть в курсе современных тенденций - заходите туда почаще.

www.nomagic.ru

Еще один мощный ресурс. Ориентирован на решение проблем создания сайтов как таковых. Много теории. Отличные переводы.

www.dimox.name

Просто если вдруг кто еще не знает. Практик от верстки - обалденный блог!

 
BUKI :) DUKI © 2008 ПРИ КОПИРОВАНИИ МАТЕРИАЛОВ НЕ ЗАБУДЬТЕ ПОСТАВИТЬ АКТИВНУЮ ССЫЛКУ WWW.PSDTALK .RU