Шаблоны - Photoshop-Tutorials / ru Шаблоны - Photoshop-Tutorials /yandexlogo.gif Шаблоны - Photoshop-Tutorials / DataLife Engine Шаблон «Фан-клуб» /tutorials/template/540-design-an-awesome-band-website-template.html В этом уроке вы узнаете как создать темный гранжевый шаблон для Фан клуба вашей любимой группы. Шаблоны Sun, 10 Apr 2011 19:04:16 +0400 : Для начала создайте новый документ, я использовал размеры 760x760px Залейте фон цветом, я использовал #47433a : Теперь примените фильтр Filter > Noise > Add Noise > 0.9 Теперь добавим к фону несколько деталей. Для начала мы добавим эффект гранжа к фону, для этого используйте гранжевые кисти, можете загрузить отсюда На новом слое добавьте гранж и смените тип смешивания слоя на Soft Light или Overlay Продолжайте пока не получите что-то похожее : Далее я добавил на фон своего рода печать, как ее сделать я писал в отдельном уроке, читаем тут Я сменил непрозрачность (opacity) слоя с печатью до 30% и сменил тип смешивания слоя на Soft Light. После этого я продублировал все слои в один слой (Layer > Flatten Image), и еще примените фильтр Filter > Render > Lighting Effect : Теперь добавьте прямоугольный блок в середину документа. Цвет моего блока #716A5D, я уменьшил заполнение (Fill) до 40% и применил следующие стили слоя. Добавьте маску слоя (Layer > Layer Mask > Reveal All) и потрите по углам и краям блока гранжевой кистью. : Теперь добавьте текст на шаблон. За основу текста возьмите название группы и разместите текст сверху слева. Я использовал шрифт 4990801, 48pt, Цвет: #C9C4B8 и добавьте стили слоя к тексту. Добавьте копирайты под блоком, я использовал шрифт: Tahoma, 11pt, #5C584E Добавим текст который будет навигацией по сайту. Я использовал каллиграфический шрифт Cornet (похожий шрифт можете загрузить здесь ). Написал написал News, Tours, Discography, Biography, Gallery и применил к тексту стили слоя. И еще я изменил непрозрачность для каждого текстового слоя в отдельности поставил разную непрозрачность. С помощью Line Tool :line0000: я добавил линии под текст и применил к ним те же стили слоя что и к тексту. : Добавим несколько изображений в шаблон. Я изменил размеры изображений на 140x100 px, затем добавил две границы, 4px светлая граница с внутренней стороны (inside) и 2px темная граница с внешней стороны (Outside). Добавим текст справа от изображений. Я использовал Tahoma 11/12pt светло серые цвета. Еще я добавил несколько гранжевых кнопок под текстом, это обычные прямоугольные кнопки с маской слоя. В результате получили довольно симпатичный шаблон. Шаблон «Гранж» часть 1 /tutorials/template/528-design-a-grungy-web-layout-part-1.html В этом уроке я покажу вам как создать стильный гранжевый шаблон для сайта. Для выполнения урока необходимы хоть малейшие знания программы Photoshop. Шаблоны Wed, 23 Mar 2011 18:04:00 +0300 Вот что мы будем создавать. (нажмите чтобы посмотреть во всю величину) : Файлы которые понадобятся вам для выполнения урока. Фото 1: Колонка Фото 2: Зеленая абстракция Образец 1: Растровые линии 16х16 Образец 2: Образец для фона Образец 3: Текстура для фона Образец 4: Текстура с пузырьками Кисти: Гранжевые кисти 1 Кисти: Гранжевые кисти 2 : Сначала создадим новый документ. Я использовал размеры 760x760px Залейте фон светло желтоватым цветом, я использовал #D7CEAF Создайте новый слой и залейте холст образцом «Растровые линии 16х16» Примечание: Ваши косые линии будут черного цвета, для того чтобы инвертировать цвета нажмите CTRL+I. Измените тип смешивания этого слоя на Overlay и понизьте непрозрачность до 50% Склейте все слои вместе и примените Filter > Noise > Add Noise с такими параметрами. Создайте новый слой и заполните образцом «Образец для фона» Смените тип смешивания слоя на Overlay и непрозрачность 40% : Переходим к заголовку. Создайте новый слой и создайте большое выделение почти на весь документ, у меня выделение с размерами 700x200px и залейте выделение белым. нажмите чтобы увеличить Примените стиль слоя Outer Glow Загрузите выделение этого слоя (CTRL+щелчок по слою), сожмите это выделение на 4 пиксела (Select > Modify > Contract) и на новом слое залейте выделение радиальным градиентом (Radial Gradient) с цветами #F5D57C и #A32C1E Вернемся к слою с белым бордюром, добавляем к нему маску слоя и с помощью гранжевых кистей добавляем эффект грязи. Если вы не знаете что такое маска слоя то используйте инструмент Eraser Tool (Ластик) :eraser00: Примените стили слоя Inner Glow и Stroke к слою с градиентом Теперь загрузите фотографию «Зеленая абстракция» перенесите на ваш документ, измените размеры под размер баннера и обрежьте ненужное. С помощью большой мягкой кисти сотрите углы и смените тип смешивания слоя на Overlay или Soft Light и понизьте непрозрачность на свое усмотрение. С помощью большой гранжевой кисти на новом слое добавим эффект грязи на градиент и сменим тип смешивания слоя на Overlay или Soft Light Загрузите фото «Колонка» перенесите его на холст и измените размеры под размер заголовка. С помощью Polygonal Lasso Tool :polygona: создайте выделение вокруг колонки и удалите белую часть. Я добавил немного тени с помощью кистей и еще чуток изменил размер. Затем я добавил текст с помощью шрифта Standart 07_53 (можете загрузить его здесь ), размеры 24 и 32 pt без Anti-Aliasing Примените к слою с текстом следующие стили слоя Drop Shadow, Inner Shadow, Gradient Overlay. : Теперь будем создавать кнопки навигации. Для начала нужно создать на палитре слоев папку (группу слоев) и в этой группе создать новый слой. Создайте выделение под заголовком, это будет первая кнопка. Мое выделение 36x60px Залейте выделение градиентом из двух темных цветов #6D5E39 и #51462A Добавьте к этому слою с градиентом стили слоя Inner Glow и Pattern Overlay (Текстура с пузырьками) Добавьте на слой с кнопкой маску слоя и потрите его гранжевой кистью. Добавьте на кнопку текст, я добавил «01» Для текста я использовал Шрифт: Tahoma, размер: 12, жирный (Bold), цвет: белый, AA: None. Понизьте заполнение (Fill) до 50% и примените стили слоя Inner Shadow, Outer Glow, Gradient Overlay Кнопка фактически готова, теперь добавим текст ссылки. Добавьте текст справа от кнопки. Я использовал шрифт с теми же параметрами но цвет изменил на #BA5E38 Примените стили слоя Inner Shadow, Gradient Overlay, Stroke Продублируйте слой с кнопкой и переместите вправо, измените текст. Шаблон «Гранж» часть 2 /tutorials/template/527-design-a-grungy-web-layout-part-2.html Продолжение к уроку Шаблон «Гранж». В этом уроке мы добавим в шаблон блоки «Последние работы», «Последние обновления» и «нижний колонтитул». Шаблоны Wed, 23 Mar 2011 17:45:41 +0300 : Прежде чем начать этот урок вы должны выполнить этот и у вас должен быть готовый шаблон в который мы будем добавлять новые блоки. : Создаем блок «Последние работы». На открытой работе с прошлого урока копируем набор слоев с кнопкой и перемещаем копию вниз. Меняем текст и номер. Создайте новый слой и создайте прямоугольное выделение под кнопкой У меня выделение 140x100px, залейте выделение светло желтоватым цветом, я использовал #EFEBDB и с помощью гранжевой кисти сотрите уголок. Загрузите выделение этого слоя и сожмите его на 2 пиксела (Select > Modify > Contract), залейте выделение темным цветом #5B5234 Смените тип смешивания слоя на Linear Burn и понизьте непрозрачность до 30% Загрузите выделение темного слоя и сожмите его на 2 пиксела, поместите изображение в это выделение. Добавьте небольшой блок под изображение который будет содержать ссылку на последнюю работу. Продублируйте эти слои и разместите ниже. Смените изображение и текст : Теперь создадим область обновлений. Продублируйте кнопку, измените цифру и текст. Создайте новый слой и создайте большое выделение, залейте выделение цветом #EFEDBD и добавьте темный блок в верхнюю область. Смотрите это изображение Добавьте текст в блок обновлений. Добавьте изображений. : Теперь создадим нижний колонтитул. Для этого повторим шаги в которых нужно создать блок немного замазанный гранжевой кистью. Создайте этот блок в нижней части шаблона. Загрузите выделении всего блока и сожмите его на 2 пикселя (Select > Modify > Contract), после сжатия создайте новый слой и залейте его градиентом как в заголовке, цвета #A32C1E и #F5D57C Добавьте на новом слое гранжа для градиента. Кисти с гранжем ставим те цвета которые использовали в градиенте, я понизил непрозрачность слоя с гранжем до 30% Тип смешивания слоя с гранжем я сменил на Overlay. Наконец я добавил текст шрифтом Tahoma, 12pt, bold (жирный), цвет белый. После написания текста добавьте к нему стиль слоя Outer Glow Вот и все наш гранжевый шаблон готов. Изображение в наутральную величину Простой шаблон /tutorials/template/494-simple-web-layout.html В этом уроке мы создадим простой, но полноценный шаблон для сайта. Шаблоны Tue, 15 Feb 2011 01:39:38 +0300 : Для начала создайте новый документ с размерами 1024x768px Залейте фон черным : Создайте новый слой (CTRL+SHIFT+N), используя Rounded Rectangular Tool :rounded_: (Радиус 25) создайте прямоугольник посередине холста как показано ниже. Щелкните правой кнопкой мыши по слою и выберите Make Selection, залейте выделение белым : Создайте новый слой, снова используя Rounded Rectangular Tool :rounded_: с теми же параметрами создайте прямоугольник для заголовка и залейте его синим цветом. Двойным щелчком по слою с заголовком откроем диалог Blending options И применим такие настройки. : Создайте новый слой, снова используя Rounded Rectangular Tool :rounded_: (радиус между 5 и 10) нарисуйте небольшой блок между заголовком и базой шаблона. Повторите для этой формы шаги 2 и 3 и выберите инструмент Gradient Tool :gradient: . Для градиента выберите два цвета #000000 и #360783 Вы должны получить что-то похожее Примените к кнопке стиль Drop Shadow и Bevel And Emboss с параметрами по умолчанию Продублируйте слой четыре раза и расположите кнопки как показано ниже. (Зажимайте SHIFT и нажимайте стрелки клавиатуры чтобы точно переместить кнопки) : Выберите слой с белой формой () и примените к нему стили слоя Drop Shadow и Inner Shadow с параметрами по умолчанию. Выберите инструмент Rectangular Marquee Tool :rectangu: и выделите 1:3 от формы и нажмите Delete на клавиатуре чтобы удалить ненужную часть. : Создайте новый слой. Выберите Rounded Rectangle Tool :rounded_: и создайте форму на кнопке сверху и до середины. Залейте путь белым цветом и понизьте непрозрачность до 10%, затем выберите в меню Edit > Transform > Warp и протяните левую сторону вниз а правую поднимите вверх. Продублируйте слой и разместите на всех кнопках. : Создайте новый слой выше слоя с фоном и ниже слоя из шага 2 Создайте прямоугольник так чтобы он немного торчал из под слоя базы шаблона (белый слой из шага 2). Залейте его темно серым цветом. Обратите внимание на изображение ниже. : Создайте еще слой и расположите его выше всех остальных, на него поместите ваш логотип : Добавьте текст, содержимое и прочее. В итоге я получил это Шаблон "Blue-Gray" /tutorials/template/436-clean-professional-web-layout.html Создаем стильный шаблон для сайта "Blue-Gray" Данный урок состоит из серии уроков из раздела Веб-дизайн Шаблоны Thu, 03 Feb 2011 07:20:50 +0300 : Создайте новый документ с такими параметрами : Залейте фон светло серым или белым цветом : Создайте заголовок сайта используя Этот урок : Создайте панель навигации используя Этот урок : Создайте нижний колонтитул используя Этот урок : Создайте самую главную панель интерфейса, используя Этот урок Объединяем все результаты уроков вместе и получаем профессиональный шаблон Клановый шаблон /tutorials/template/195-quick-and-clean-clan-template.html Создаем шаблон для игрового сайта Темно-красный клановый щаблон. Шаблоны Sun, 29 Aug 2010 18:41:27 +0400 Шаг первый: Новый холст Создайте новый документ с размерами 900x800px. Залейте фон цветом #363636 Шаг второй: Тело документа Включите обображение линеек (View > Rulers), линии линеек должны быть по пикселам (если это не так идите в настройки и установите Edit > Preferences > Units and Rulers и поставьте в меню Rulers: pixels) Теперь вытащите вспомогательную линию (просто наведите курсор на линейку и зажав кнопку мыши тащите линию) слева. Расположите линии по 50 пикселей от краев, повторите снизу и сверху. Вы должны получить блок подобно этому. Теперь выберите инструмент Rectangle Tool :rectangl: и нарисуйте квадрат заполняющий внутреннюю часть документа, цвет #252525, в вернем меню выберите Layer > Rasterize > Shape Теперь выберите Magic Wand Tool и щелкните по этому квадрату, в меню выберите Select > Modify > Contract > 10px Вырежьте (CTRL+X) выделенную область, и снова вставьте (CTRL+V) Теперь выберите слой с именем Shape 1 и примените к нему следующие стили слоя (Blending Options) В результате этих манипуляций, вы получите что-то подобное Теперь выберите предыдущий слой (на нем тот квадрат что мы вставили), возьмите Magic Wand Tool :magic_wa: и щелкните по квадрату, снова идем Select > Modify > Contract > 10px и опять вырезаем и вставляем выделенный участок. Выберите слой из которого сейчас вырезали и примените к нему стили слоя. Теперь мы получим вот это. Шаг третий: Создание заголовка Сверните окно в котором мы сейчас работали и создайте новый документ с размерами 760x160px Создайте новый слой и залейте его цветом #6D0303. В этом шаге вы можете проявить свои навыки, вставьте баннер, добавьте название вашего клана. После завершения перенесите изображение в наш шаблон. Чтобы вам было от чего оттолкнуться при создании заголовка я создал вот это. Ваш шаблон должен выглядеть примерно вот так. Шаг четвертый: Создание панели навигации Создайте новый документ с размерами 760x32px. Создайте новый слой и залейте его цветом #790000, добавьте следующие стили слоя (удостоверьтесь что цвет переднего плана #790000 а заднего #000000) Теперь возьмите инструмент Rectangle Tool :rectangl: и нарисуйте прямоугольник по верхней части наполовину рисунка. Цвет #790000, понизьте непрозрачность (opacity) до 55% Затем, сделайте очень тонкий прямоугольник снизу используя те же самые параметры. Теперь разделите полосу на части по 125px в ширину, используйте вспомогательные линии линейки. Теперь выберите инструмент Line Tool :line0000: с цветом #000000 и нарисуйте линию вдоль вспомогательной линии, затем примените стили слоя Продублируйте слой 4 раза и расставьте линии по вспомогательным. Удостоверьтесь что слои с линиями расположены ниже слоя с тонким прямоугольником (тот что внизу). Добавьте текст ссылок, и перенесите панель в ваш шаблон. Установите панель под заголовком. Изображение полного размера Создаем шаблон простого сайта /tutorials/template/165-create-simple-web-template.html Если вы впервые начали рисовать шаблон для будущего сайта, то начните с этого урока. Один из самых простых шаблонов. Шаблоны Sun, 11 Jul 2010 10:28:01 +0400 Начнем с создания холста размером 900x770 (или любой другой размер, который вы хотите использовать для сайта). Залейте фон темно серым цветом #121212 Теперь смените цвет переднего плана на белый #FFFFFF и выберите инструмент Rounded Rectangle Tool :rounded_: , убедитесь то радиус установлен в 10px Также убедитесь что включена опция Shape Layers Теперь начертите прямоугольник закрывающий почти весь холст. (ширина и высота по усмотрению) Щелкните по созданному прямоугольнику правой кнопкой мыши и в выпадающем меню выберите Make Selection Если вышло сообщение жмите ОК, теперь в меню выберите Select > Modify >Contract, установите 3px и жмите ОК Заголовок должен быть приблизительно от 75 до 100px в высоту. Выбираем инструмент Rectangle Marquee Tool :rectangu: и зажав левую кнопку мыши тянем выделение с правого нижнего угла в верхний правый, оставив сверху приблизительно 100px Видно автор забыл указать что перед созданием выделения нужно включить опцию Subtract from Selection в верней панели инструмента (прим. переводчика) Теперь создайте новый слой Layer > New > Layer или нажмите CTRL+SHIFT+N C помощью инструмента Gradient Tool :gradient: создадим заливку синего цвета. Цвет переднего плана выберите светло синий, задний этот же цвет но оттенок должен быть немного темнее. Автор использовал цвета #217EDE и #173655 (прим. переводчика) Протяните градиент сверху вниз (зажмите клавишу SHIST чтобы получить четкую линию) Теперь используя Rectangular Marquee Tool :rectangu: создайте еще одно выделение приблизительно на 3-4px от низа заголовка, затем нажмите CTRL+U и установите Lightness в -20, чтобы сделать низ заголовка немного темнее. Теперь добавьте текст навигации, начните с правого нижнего угла заголовка. Чтобы показать на какой странице находиться пользователь, нужно выделить соответствующий элемент меню на панели навигации. Перейдите к слою с заголовком (Layer 1 если вы не переименовывали слоев) и создайте новый слой CTRL+SHIFT+N На этом слое создайте выделение чтобы оно покрывало элемент меню (в моем случае это HOME) и выходило в темную нижнюю область. Навигация готова, теперь займемся содержимым страницы. С помощью Rectangular Marquee Tool создаем выделение той же ширины что и заголовок 200px в высоту, отступ от заголовка 3px Цвет переднего плана установите светло серый #E1E1E1 и выберите инструмент Gradient Tool :gradient: Убедитесь что градиент стоит от цвета переднего плана к прозрачному (Foreground to Transparent) Протяните градиент сверху вниз Возьмите инструмент Rounded Rectangle Tool :rounded_: и установите цвет переднего плана оранжевого цвета #FFBC66, с правой стороны создайте блок для текста. Практически все уже готово, осталось добавить логотип, текст нижнего колонтитула и заполнить текстом пустое пространство. Подключите воображение и добавьте что-нибудь свое. Шаблон - Modern /tutorials/template/130-modern-template.html В этом туториале я покажу как создать современный шаблон для сайта. Шаблоны Sun, 23 May 2010 12:11:13 +0400 В этом туториале я покажу как создать современный шаблон для сайта. Создайте новый файл с размерами 820x790px, 72 точки на дюйм. C помощью Rectangle Tool :rectangl: создадим фон будущего сайта. Стили слоя (нажмите правой кнопкой мыши по слою в палитре слоев и выберите Blending Options). Применим Gradient Overlay. Параметры градиента. Теперь с помощью Pen Tool :pen00000: Нарисуйте несколько лучей. (стили слоя те-же) Применим Blending Optios > Color Overlay Склейте все слои с лучами CTRL+E, зажав кнопкой мыши слой перетащите его вниз на кнопку Create A New Grop, это создаст новую группу, примените к ней стили слоя предоставленные выше и смените тип смешивания с Pass Taught на Pin Light, Opacity уменьшите до 64% Теперь возьмите инструмент Rounded Rectangle Tool :rounded_: чтобы нарисовать первичный слой панели и разделов сайтаб цвет используем #E3E3E3 Примените к слою Blending Options > Stroke с такими параметрами. Создайте новый слои и выбрав обычную кисть Brush Tool :brush000: нарисуйте белым приблизительно как на рисунке ниже. Зажав CTRL щелкните по слою с панелью, загрузив выделение конвертируйте его CTRL+SHIFT+I и нажмите DELETE Используйте предыдущий инструмент, чтобы создать раздел сайта, цвет белый. Примените Stroke с такими параметрами. Создайте новый слой и выберите такую кисть. Теперь с помощью пипетки подбираем цвета (просто зажимайте ALT) и создаем эффект разрушенности панелей. Используя Line Tool (U) :line0000: , создайте своего рода календарную таблицу белого цвета (чтобы линии были ровные зажимайте SHIFT) Создадим индикатор подсветки текущего дня, c помощью Rectangle Tool :rectangl: цветом #F2F2F2 Используя Rouded Reсtangle Tool :rounded_: пробуйте создать слой для кнопок меню. Примените стиль слоя Drop Shadow Gradient Overlay Параметры градиента Сделайте копию этого слоя и вынесите эффекты: Drop Shadow, Gradient (правой кнопкой мыши по панели слоев и нажмите Create Layer) Слой с тенью Drop shadow поправьте с помощью ластика Eraser Tool :eraser00: Примените Blending Options > Stroke к копии слоя. Вы должны получить это. | Страница 1 | [page=2]Страница 2[/page] | [page=3]Страница 3[/page] | {PAGEBREAK} Создадим часть кнопки с помощью Ellipse Tool :ellipse0: Применим к ней стили слоя Gradient Overlay Параметры градиента Сделайте четыре копии этого слоя и разместите кнопки как показано ниже Теперь сделаем своего рода разделители из маленьких точек, между кнопками. Теперь вставим заголовоки для кнопок меню Теперь напишите название сайта, сохраняя текущие требования. Примените стиль слоя Stroke Заполните ваш календарь. Числа Дни недели Заполните раздел календаря заголовком Добавьте несколько специальных кнопок в верхней части сайта. | [page=1]Страница 1[/page] | Страница 2 | [page=3]Страница 3[/page] | {PAGEBREAK} Выберите Line Tool :line0000: и добавьте делящие вертикальные полосы цветом #DA6900 Заполните оставшиеся части разделов текстом Текст выделенный жирным шрифтом Подчеркнутый текст Создайте новый слой и разметьте некоторую зону с помощью Rectagular Marquee Tool :rectangu: используя светлый цвет подчеркнем края. Сделайте копию этого слоя и отразите ее зеркально с помощью Free Transform, после этого с помощью Burn Tool :burn0000: затемним слой. Проделайте тот же самый вид работы к горизонтали. Используйте Burn Tool :burn0000: чтобы затемнить копию слоя. Выберите кисть (Brush Tool :brush000: ) и на новом слое, белым цветом добавим несколько штрихов подобно рисунку ниже. Поместите этот слой под слой с заголовком сайта. Вот и все, мы закончили. Изображение полного размера (Нажмите чтобы увеличить) | [page=1]Страница 1[/page] | [page=2]Страница 2[/page] | Страница 3 | {PAGEBREAK} Шаблон - Рождественская тема /tutorials/template/122-designing-a-christmas-themed-web-layout.html Создаем симпатичный новогодний (рождественский) шаблон для своего сайта. Урок очень не очень сложный но очень долгий... Шаблоны Wed, 19 May 2010 12:05:38 +0400 Этот туториал расчитан на людей знакомых с Photoshop, а не для новичков, так как здесь очень много работы. 1) Новый документ Прежде всего создайте новый документ для шаблона, я буду использовать размер 780x880 пикселей. Теперь залейте фон темно красным. Я использовал цвет #4f0100 2) Полоски Теперь создаем полоски леденца. Сначала сделайте выделение с помощью Rectangular Marquee Tool приблизительно 10x80 пикселей. Убедитесь что находитесь на новом слое когда заливаете выделение белым цветом. После того как создали прямоугольник, создаем новый слой и берем Polygonal Lasso Tool Зажав SHIFT, чтобы была правильная диагональ, делаем выделение подобно рисунку ниже. Убедитесь что вы находитесь на новом слое, когда заливаете выделение ярко красным цветом, удалите лишние части. Дублируйте слой с полоской (CTRL+J) и переместите слой вверх приблизительно на 10 пикселей. (Зажав SHIFT щелкайте стрелку вверх на клавиатуре) Снова дублируйте слой и перемещайте вверх, повторите 2-3 раза. Склейте все слои с полосками и примените стиль слоя Gradient Overlay В результате вы получите это. Теперь применим Gradient Overlay к белой полоске. Теперь нужно вырезать полоску и создать из нее образец Делаем выделение во всю ширину и в высоту как на рисунке. Я сделал выделение так чтобы при копировании линия не прерывалась, немного терпения и у вас получится. После того как вы сделали правильное выделение, копируйте его и вставляйте, расоложите полосу как на рисунке ниже. Продублирейте полученную полоску и отразите ее горизонтально (Edit > Transform > Flip Horizontal) и переместите в противоположную сторону шаблона. Я также применил Outer Glow 3) Панель заголовка Во-первых создайте новый слой. Теперь создайте выделение в промежутке между обоими полосками и залейте цветом немного свелее чем фон (#690806) Теперь создадим полосу заголовка. Создайте новый слой, и создайте выделение приблизительно 738x60 пикселей в середине сверху. Залейте выделение более светлым красным (#7e0a07) | Страница 1 | [page=2]Страница 2[/page] | [page=3]Страница 3[/page] | [page=4]Страница 4[/page] {PAGEBREAK} Теперь примените следующие стили слоя и параметры к полосе заголовка. Inner Shadow Gradient Overlay Paletten Overlay Pat файл загружаем отсюда Щелкните правой кнопкой мыши по текстовому слою и выберите Blending Options и примените следующие стили слоя. Drop Shadow Gradient Overlay Теперь вы должны получить такой текст. Теперь добавим текст с правой стороны заголовка, выключите опцию Anti-Aliasing при написании. Я использовал шрифт Tahoma, размером 11px, полужирный (Bold), цвет #ebbe97 без сглаживания (Anti-Aliasing) 4) Кнопки навигации Теперь будем делать навигационный блок/кнопки Сначала создадим новый слой, и сделаем небольшое прямоугольное выделение под полосой заголовка. Теперь залейте это выделение ярко-оранжевым цветом, я использовал #d53900, фактически вы можете заполнить выделение любым цветом, но если вы следуете шагам этого тутора то используйте мои цвета. Примените следующие стили слоя к этому блоку. Inner Shadow Gradient Overlay По завершении вы получите это. | [page=1]Страница 1[/page] | Страница 2 | [page=3]Страница 3[/page] | [page=4]Страница 4[/page] {PAGEBREAK} После этого я добавил немного гранжа используя различные кисти с сайта http://www.photoshopbrushes.com/ Я зачистил немного левую сторону на новом слое, и изменил тип его смешивания на Soft Light понизив непрозрачность до 60% Следующий шаг это добавление кнопок, на новом слое сделаем прямоугольники на расстоянии 1px Я делал выделение размером 180x26px. Теперь переходим в Blending Options и применим такие настроки. Blending Options: Custom Inner Glow Bevel and Emboss Gradient Overlay Stroke Ваши кнопки должны выглядеть так. Теперь добавим текст для этих кнопок. Я использовал: Шрифт Tahoma; размер 12pt; Bold; #FFFFFF 5) Графический символ для заголовка Теперь добавим графический символ для шаблона. Сначала создайте новый слой, сделайте выделение той же высоты что и блок навигации, во всю ширину (оставив по 1px по краям) Залейте выделение синим цветом (#1d78c4) Примените к этому слою следующие стили. Inner Shadow Gradient Overlay Я снова добавил немного гранжа в верхнем углу, изменив тип смешивания на Overlay, непрозрачность не трогал. Затем добавил немного снежинок, с помощью Сustom Shape Tool (на новом слое). Если у вас нет таких форм, щелкните на маленькую стрелку справа вверху и выберите Nature Примените следующие стили слоя к снежинкам. Blending Optios: Custom Inner Shadow Outer Glow Inner Glow Теперь снежинки выглядят должным образом Теперь добавим небольшой клипарт дерева, я не рисовал дерево, можете загрузить его здесь Я добавил темного градиента на 1px от вершины баннера и навигационного блока. Теперь добавим немного снега снизу баннера. Чтобы его создать, сначала рисуем путь с помощью Pen Tool, полученное выделение заполним белым, удалим ненужные части. Возьмите большую мягкую кисть, цвет светло-серый. Наконец добавим текст для заголовка, я использовал тот же шрифт что и прежде. К текстовому слою я применил такие стили. Drop Shadow Gradient Overlay | [page=1]Страница 1[/page] | [page=2]Страница 2[/page] | Страница 3 | [page=4]Страница 4[/page] {PAGEBREAK} 6) Последние новости Теперь создадим блок последних новостей. Сначала создадим новый слой, сделаем выделение приблизительно в 200x30px Заполним выделение зеленым цветом (#307017) И применим следующие стили слоя. Inner Shadow Gradient Overlay Pattern Overlay Создайте новый слой и сделайте выделение на половину этой панели, залейте градиентом от белого к прозрачному. Смените тип смешивания на Soft Light и понизьте непрозрачность до 15% Добавьте полоску шириной в 1px сверху. Тип смешивания на Soft Light, непрозрачность до 50% Я добавил текст исползуя шрифт и его настройки что и прежде. Теперь создаем новый слой, выделение делаем немного меньше чем до этого (у меня было выделение 200x30px) Заполним тем же цветом что и полоса выше (#307017), и применим следующие стили слоя. Bevel and Emboss Gradient Overlay Pattern Overlay Дублиреум этот слой и перемещаем вниз на 16 пикселей (Если вам нужно несколько прямоугольников) Повторим этот шаг 8-10 раз и добавьте ваш текст. 7) Последние обновления Цвет который я использовал для этой полосы #1f7bc5 Эта полоса создается во всю оставшуюся ширину по высоте такая же как и полоса недавних новостей. Метод создания тот же. Создаем новое выделение во всю ширину, почти до самого низа. Если вы создали новый слой, то залейте его белым и примените такие стили слоя. Blending Options: Custom Bevel and Emboss Сейчас ваш блок должен выглядеть так. Добавьте текст в центре блока. Наконец я добавил блок поменьше в самый низ с более высокой прозрачностью, высота блока 80px (как раз под баннер) 8) Нижний колонтитул Вспомните в последнем шаге вы добавляли непрозрачности к нижнему блоку. Продублируйте главный блок, сместите его влево, под блок недавних новостей. Я добавил в этот блок маленькие обьявления. Хорошо теперь добавим нижний колонтитул. Сначала сделайте выделение внизу шаблона, где хотите разместить нижний колонтитул, у меня размер выделения составил 738x40 пикселей. Заполним слой красным цветом (#7e0a07). Теперь применим следующие стили слоя. Inner Shadow Gradient Overlay Paletten Overlay Вместо того чтобы выставлять эти стили, можете просто скопировать их с главной полосы заголовка. Теперь добавим немного света к панели, напомню как это сделать. 1) Делаем выделение в два раза меньше по высоте чем нижний колонтитул. 2) Заполняем градиентом от белого к прозрачному. 3) Изменяем тип смешивания на Soft Light непрозрачность на 20-35% 4) Делаем линию шириной в 1px сверху, тип смешивания на Soft Light и непрозрачность на 40-70% Добавим для нижнего колонтитула текст. Слева я добавил копирайты (Copyright) в том же стиле что и текст заголовка, справа добавил авторские права. Для текста поменьше я использовал Tahoma 11pt, #ebbe97 Вот мы и закончили, я думаю что вы узнали для себя что-то новое. Спасибо за внимание. | [page=1]Страница 1[/page] | [page=2]Страница 2[/page] | [page=3]Страница 3[/page] | Страница 4