Для начала стоит определиться с задачами. Итак, нам необходимо создать простой шаблон со стандартным расположением основных элементов. Т.е. у нас будет шапка сайта, левая колонка, центральная часть и так называемый "footer".

Сразу хочу предупредить о том, что в этом уроке я опишу только общие моменты и не буду останавливаться на мелких. А если у вас все же возникнут вопросы, то задавайте их либо тут, либо на нашем форуме в теме обсуждения этого урока, но лучше на нашем форуме.

Данный урок не претендует на 100% инструкцию, т.е. не стоит воспринимать все действия как обязательные. Уверен, существуют более удобные и простые способы выполнения того или иного шага урока. Скорее урок надо рассматривать как описание того как я сделал данный шаблон, а не описание того как должны делать вы. Т.е. вы всегда можете сделать то или иное действие по своему, на свой взгляд и усмотрение и инструментами к которым привыкли вы.

Итак, начинаем.
Создаем новый документ с размерами 780 (ширина) пикселей Х 800 (высота) пикселей.



С помощью инструмента Прямоугольник рисуем вот такую полоску, размером на весь лист.



Не страшно если боковые стороны прямоугольника будут выступать за края нашего документа. Располагаем его в верхней части нашего шаблона (как показанно на рисунке). Теперь дважды щелкните по слою с прамоугольником в палитре слоев, чтобы установить стиль слоя (кстати, на моем изображении прямоугольник уже после настройки стилей).

Выставляем такие вот настройки.







Настройки градиента.



Для крайних маркеров я установил цвет #7C7C7C, а для центрального #DBDBDB.
В итоге и получим полоску как на рисунке.



Теперь с помощью инструмента Прямоугольник со скругленными углами нарисуем левую колонку.



Настройки стилей для колонки.



Цвет я выбрал #C8C8C8





Настройки для градиента.



Далее создадим центральную колонку с помощью все того же инструмента Прямоугольник со скругленными углами и применим те же настройки стилей как и у левой колонки.



Теперь с помощью инструмента Прямоугольник рисуем прямоугольник в самой нижней части нашего шаблона. Цвет для заливки #DF6900.



Продублируем этот слой и переместим прямоугольник в самую верхнюю часть нашего шаблона. Если надо трансформируем его так чтобы он занимал все пространство между горизонтальной полоской и верхним краем шаблона.



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

Рисуем еще один прямоугольник с помощью одноименного инструмента и применяем следующие настройки стилей.



Настройки градиента







И размещаем как показано на рисунке.



Теперь продублируем этот слой и разместим его в самом верху нашего шаблона.



Далее, визуально выделим верхнюю часть левой и центральной колонок, там будут заголовки.

Начнем с левой колонки. Продублируйте слой с левой колонкой и растеризуйте его. Далее, уберем лишнее. Я это сделал инструментом "Прямоугольная область", просто выделил ненужное, вырезал на новый слой, а потом удалил. Изменим настройки стиля в оставшемся фрагменте.

Установим вместо наложения градиента наложение цвета. Цвет я выбрал #C8C8C8.



Уберем настройки тени, а обводку оставим без иизменения.

Аналогичные действия проделаем и с центральной колонкой. В результате получим следующее.



Общие черты шаблона нарисовались, приступим к изготовлению шапки. Так как определенную тему для шаблона я не выбирал будем использовать первую попавшуюся картинку.



Отразим ее по горизонтали и просто перетащим ее в наш шаблон. Если нужно изменяем размер, стираем лишнее и располагаем следующим образом.



Как видно, картинка не очень подходит по цвету к нашему шаблону. Изменим это. Дважды щелкнем мышкой по слою в палитре слоев и в открывшемся окне настроек отметим галочкой Наложение цвета. И выберем цвет #DF6900. Кстати, тут все зависит от исходного изображения, для другого может понадобится наложение другого оттенка.



Как видим картинка стала более гармонично вписываться в наш шаблон. Но чем заполнить левую часть шапки, ведь там нет никакой картинки. Сделаем следующее. С помощью иснтрумента Прямоугольная область, выделим небольшую полоску нашего изображения.



Скопируем выделение на новый слой и растянем его в левую сторону до самого края нашего шаблона.



Теперь добавим к этому слою Слой-маску.



Выбираем инструмент Кисть с мягкими краями и большога размера. Устанавливаем основной цвет черный. Рисуем кистью с левого края, как видим слой становится прозрачным. Выберем белый цвет и применим кисть с правого края. В результате у меня получилось следующее.



Теперь для большей наглядности добавим логотип сайта, заголовки, текст, пункты меню, форму поиска. Описывать полностью это я не буду, так как тут и так все понятно, а если не понятно, то задавайте вопросы. И вот что у меня получилось.



Осталось только его поделить на части. Есвли вы не знаете как, то смотрим вот это урок.

Обсуждение этого урока на нашем форуме