Действие 1:
Сегодня мы будем учиться хитростям, необходимых для создания продвинутых шаблонов (читай "дизайнов") для сайтов. Для данного урока необходимо немножко терпения. В общем, пора открывать фотошоп. Но для начала небольшое замечание - все представленные здесь рисунки имеют разрешение 720х500 рх, поэтому советую открывать их все (ну кроме может быть первых двух-трех). Создаем новый файл размером 720х500 пикселей. Заливаем бэкграунд темно серым цветом. Затем создаем новый слой (). На нем при помощи Rectangular Marquee Tool делаем выделение сверху до низу так, чтобы выделенная область была на пару пикселей с обоих сторон меньше, чем наш бэкграуннд. Заполняем это выделение чуть более светлым цветом, чем наш фон. Снимаем выделение (ctrl+D) и заходим в blending options данного слоя (можно кликнуть два раза на активный слой или в меню Layer>Layer Style>blending options). Здесь ищем пимпочку Stroke и делаем однопиксельную черную рамку согласно рисунку:
Действие 2:
Двигаемся дальше. Создаем новый слой и в самом верху делаем прямоугольное выделение для будущего меню. Само собой, следует убедиться, что выделение не слишком узкое, но и не слишком уж здоровое. Получилось? Теперь заливаем это выделение градиентом от светло-серого к более темному серому цвету. Теперь добавляем нижнюю границу (черную, однопиксельную) получившейся полосочке. Можно использовать черный карандаш, а можно использовать stroke. Должно получиться как на рисунке:
Действие 3:
Теперь надо придать хоть какой-нибудь объем нашей будущей менюшке. Идем в blending options активного слоя и там ищем gradient overlay. Делаем градиент таким образом, как показано на рисунке. Придется повозиться, но теперь стало более симпатично, правда ведь?
Действие 4:
Если все сделано верно, то наше будущее меню стало похожим на эдакий матовый пластик, отражающий луч света. Если не получилось, то пробуйте еще и еще - потому что без градиентов ничего никогда у вас не получится толкового. Я серьезно. Можно даже сохранить это как стиль, нажав на кнопку "new style" в "blending options". Это упростит вашу дальнейшую жизнь. Поехали дальше. Создаем новый слой. Делаем прямоугольное выделение в правой части нашего меню. Заполняем его градиентом от темно серого (практически черного ) к более светлому серому цвету. А теперь применяем стиль, который мы только что сохранили. Если все сделано правильно, то должно получиться как на рисунке снизу. Получилось? НЕТ? Тогда рисуйте заново и читайте дальше.
Действие 5:
Теперь будем создавать место для лого и прочей ерунды. Создаем новый слой. На нем делаем прямоугольное выделение прямехонько под нашим меню. Здесь тоже главное - не переборщить с размерами. Заливаем получившееся выделение серым цветом, но чуть-чуть другой тональности, отличным от имеющихся уже цветов.
Действие 6:
Теперь сделаем такую немаловажную деталь как разделитель. "Разделять" мы будем шапку и основную часть сайта. Создаем новый слой и делаем прямоугольное выделение 5-7 пикселей в ширину и по всей длине сайта. Выделение должно быть в самом низу шапки. Смело заливаем выделение градиентом от средне серого к темно серому цвету. Затем применяем на сохраненный ранее стиль. Можно поиграть еще с серым цветом в градиенте и сохранить это как новый стиль.
Действие 7:
Создаем новый слой. Сделаем небольшое прямоугольное выделение на нашем получившемся разделителе. Теперь заливаем его темно-серым градиентом (таким же, как в верхней правой части нашего будущего сайта). Теперь применяем наш стиль.
Действие 8:
Создаем новый слой. Помести его под те два слоя, которые получились после создания разделителя. Затем делаем выделение по всей длине сайта и небольшое по ширине. Заливаем это выделение серым цветом. Создаем границу снизу edit>stroke (шириной 1 пиксель, черного цвета).
Действие 9:
С верхней частью закончили. Теперь пора приниматься за место для нашего основного контента и для функционального поля (туда можно поместить голосование, последние новости сайта или кнопки дружественных сайтов). Создаем опять новый слой и делаем на нем выделение и заполняем его светло-серым цветом. Добавляем однопиксельную рамку черного цвета (edit>stroke).
Действие 10:
Теперь создаем новый слой, выбираем опять Rectangular Marquee Tool и делаем прямоугольное выделение в верхней части нашей будущей таблицы с контентом. Заливаем таким же градиентом, как и в меню и применяем тот же самый стиль. В этом месте будет заголовок для контента.
Действие 11:
Осталось совсем чуть-чуть. Создаем новый слой на котором делаем выделение в правой части области с будущим заголовком. Заливаем его темно серым градиентом как в верхней правой части нашего меню. Применяем заготовленный стиль.
Действие 12:
Теперь, точно таким же способом добавим в правую часть функциональное поле Теперь можно побаловаться с внешним видом сайта, добавив различные детали. Все! Если все получилось правильно, то теперь вам не составит никакого труда сделать себе (pro)двинутый сайт. Удачи! P.S. Вот какую шапку для своего сайта я сделал за 20 минут работы, используя технику, которую я здесь описал.