Статья 2. Создание фона контейнера и необходимых частей шаблона.

Так как при изготовлении макета будет использоваться большое кол-во слоёв для каждого блока,необходимо что бы все эти слои находились в понятном для верстальщика месте и не «убивалось» продолжительное время для поиска нужного изображения.


Первым делом необходимо создать  вот такие папочки  и соответственно дать им нужные названия.

Как видно на картинке все блоки выстроены в порядке очерёдности и вложены в основную папку с названием сайта  (mysite-001).  Следует заметить  что уроки по созданию макета шаблона сайта  рассчитаны на  пользователей уже знакомых с азами программы Фотошоп.  Если вы не знаете как вырезать, совместить , наложить изображения то вам следует внимательно ознакомиться с начальными уроками «Фотошоп для начинающих»  В этих уроках вполне достаточно информации для уверенного использования программы.  Так как  при написании данного курса я не буду подробно рассказывать как вырезать клипарт, использовать кисти, градиенты и прочее приёмы использования возможностей графического редактора Фотошоп.

Итак чистый лист с размерами 990 х 1500 px создан. Назову его background-color ( цвет фона)  и помещу в папку container. Естественно вы можете называть каждый документ по своему,  но я рекомендую вам использовать названия такого типа.  Почему? Верстальщику будет сразу понятно  что это за слой. Кто знает? возможно и вы займётесь в дальнейшем вёрсткой  и уже будете знать и понимать что означают данные названия.  Заливка данного слоя определённым цветом  производится на ваше усмотрение. Если следующие слои- блоки полностью закрывают весь контейнер, цвет фона не важен.   Если же части фона будут использоваться как некие фоновые участки,  естественным будет заливка  цветом  сочетающимся с общим видом шаблона.  Я залью лист оранжевым цветом.  Я ещё не знаю как будет выглядеть изготавливаемый нами шаблон, но мне хочется тёплых, ярких цветов.  О сочетаниях цвета  и оттенков вы можете прочесть в сети. Благо публикаций на эту тему множество, включая таблицы и всевозможные картинки.

Следующим шагом будет создание  дубликата слоя фона и его стилизация.

Для чего?  На основе этого стилизованного фона будут изготовлены  «header» ( шапка сайта)  и «footer» ( подвал сайта).  После необходимой цвето-коррекции слоя  я сохраню этот слой в формате jpeg. И вновь открою его с уже сохранёнными эффектами. Давать имя  этому слою я не буду потому что его следует разрезать на три части.  Верхняя часть  для шапки, средняя часть удаляется ( ведь у меня есть фон контейнера)  и  нижняя часть сохраняется для подвала шаблона.

Перемещаем созданные слои в нужные папки. Верхний в папку «header»  нижний соответственно в папку «footer».  Именовать их пока не нужно потому что к этим слоям будут добавляться ещё слои и только после окончательной прорисовки слой получит своё название.

Теперь когда необходимые мне слои находятся на своих местах можно приступать к их оформлению. Естественным будет начать оформление с верхней части макета.  Значит следующим уроком будет оформление   «шапки » макета шаблона сайта.   Удачи!  :)