Выполнив все шаги урока вы получите примерно такое в вашем фотошопе:
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730467_1.jpg)
Итак, дорогие посетители photoshoplove.ru, открываем Photoshop и создаем новый документ размером 1020 на 1200 пикселей и выбираем цвет фона #a8a994
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730439_2.jpg)
Шаг 1. Создаем строку навигации
Слева разместим логотип вашей фирмы, а справа будут ссылки для навигации по сайту.
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730462_3.jpg)
Теперь выбираем инструмент Прямоугольник (Rectangle Tool) (U) и растягиваем прямоугольник 80 на 54 пикселя (я сделала его красным, чтобы показать наглядно, где он должен быть)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730454_4.jpg)
Заходим в меню Слой - Стиль слоя (Layer-Layer Style) и устанавливаем следующие параметры
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730487_5.jpg)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730494_6.jpg)
Вот как должно получиться
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730432_7.jpg)
Дальше поверх получившегося у нас прямоугольника добавляем еще один размером 71 на 50 пикселей и заливаем его цветом. Я использовала #cfbe27.
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730478_8.jpg)
Снова заходи в Слой - Стиль слоя (Layer-Layer Style) и устанавливаем следующие параметры для второго прямоугольника
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730423_9.jpg)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730441_10.jpg)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730508_11.jpg)
Затем добавим тень для ссылок, используемых в строке навигации. Для этого выделяем слой с текстом ссылки, заходи в Слой - Стиль слоя (Layer-Layer Style) и устанавливаем следующие параметры
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730441_12.jpg)
Тоже самое проделываем с каждым слоем, содержащим текст будущих ссылок.
Конечный результат выглядит так:
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274732121_13.jpg)
Шаг 2. Создаем ознакомительную часть шаблона
Для начала выбираем инструмент Прямоугольник (Rectangle tool) и создаем прямоугольник под логотипом. Параметры моего прямоугольника – 106 на 24 пикселя, цвет белый (#FFFFFF) и также я уменьшила прозрачность слоя до 21%
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730496_14.jpg)
Дальше Выбираем инструмент Овал (Ellipse Tool) и создаем овал под нашим прямоугольником
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730452_15.jpg)
Выбираем слой с овалом, заходим в меню Фильтры - Размытие - Размытие по Гауссу (Filter>Blur>Gaussian Blur) и устанавливаем ползунок на отметку 7.8 пикселей.
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730444_16.jpg)
Выбираем инструмент Прямоугольное выделение (Rectangular Marque Tool) (M) и выделяем область как показано на рисунке:
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730443_17.jpg)
Удаляем выделенную область
Теперь добавляем текст в наш прямоугольник и с помощью инструмента Линия (Line tool) создадим линию прямо над нашей кнопкой (прямоугольник). Параметры линии: 866 на 1 пиксель.
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274732125_18.jpg)
Теперь выбираем инструмент Перо (Pen Tool) и рисуем область как показано на рисунке
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274732161_19.jpg)
Оставляем выбранным инструмент Перо (Pen Tool), жмем правой кнопкой внутри нарисованной вами области между двух линий и выбираем Выделить (Make Selection)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274732089_20.jpg)
У вас должно получиться вот такое выделение
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274732146_21.jpg)
Жмем Ctrl+Shift+N (чтобы создать новый слой), выбираем инструмент Заливка (Paint Bucket Tool) и заливаем выделенную область на новом слое цветом # bebfab
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274732143_22.jpg)
Теперь заходи в меню Фильтры - Размытие - Размытие по Гауссу (Filter>Blur>Gaussian Blur) и выбираем радиус размытия 40.2 пикселя.
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730494_23.jpg)
Затем выбираем инструмент Прямоугольное выделение (Rectangular Marque Tool) и выделяем как на рисунке
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274731426_24.jpg)
Удаляем область
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274732147_25.jpg)
Далее справа добавляем несколько картинок
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274732110_26.jpg)
Затем выбираем инструмент Текст (Type Tool) и добавляем текст, который вам нужен. Параметры текста, показанного на рисунке: шрифт Euphemia , размер шрифта 32
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274732114_27.jpg)
Продублируем слой с текстом и заходим в Фильтры - Размытие - Размытие по Гауссу (Filter>Blur>Gaussian Blur), устанавливаем параметры угол 0, дистанция 38
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730520_28.jpg)
Уменьшаем прозрачность этого слоя до 36%
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274732118_29.jpg)
Теперь выбираем инструмент Овал (Ellipse tool) и создаем черный овал под текстом, затем используем Размытие по Гауссу (Gaussian Blur) с радиусом размытия 10 пикселей
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274732105_30.jpg)
Выбираем инструмент Прямоугольное выделение(Rectangular Marque Tool) и отрезаем часть нашего размытого овала и уменьшаем прозрачность слоя до 50%
Выбираем инструмент Текст (Type Tool) и добавляем какой-либо необходимый вам текст как показано на картинке
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274732178_32.jpg)
Первая часть нашего шаблона почти готова. Осталось только создать кнопку, открывающую сайт
Выбираем инструмент Прямоугольник (Rectangle Tool) и создаем прямоугольник. Я использовала цвет # b1a112
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274732148_33.jpg)
Затем заходим в Слой - Стиль Слоя (Layer-Layer Style) и устанавливаем следующие параметры
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730471_34.jpg)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274732164_35.jpg)
Выбираем инструмент Перо (Pen tool) и рисуем стрелку прямо на нашей кнопке, т.е. внутри прямоугольника
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730563_36.jpg)
Правой кнопкой мышки на стрелке выбираем Выделить (Make Selection) (инструмент Перо (Pen tool) должен быть все еще выбран)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730544_37.jpg)
Затем нажимаем клавиши Ctrl+Shift+N чтобы создать новый слой и выбираем инструмент Заливка (Paint Bucket Tool) и заливаем стрелку цветом # 84831e
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730538_38.jpg)
Заходим в Слой - Стиль Слоя (Layer-Layer Style) и устанавливаем параметры как на картинках
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730494_39.jpg)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730539_40.jpg)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730569_41.jpg)
Выбираем инструмент Текст (Type tool) и добавляем текст на нашу кнопку (я использовала шрифт Arial, размер 14 пикселей)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730550_42.jpg)
Чтобы слегка выделить кнопку, выбираем инструмент Овал (Ellipse tool) (белый) и рисуем овал сверху прямоугольника
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730493_43.jpg)
Затем выбираем меню Фильтры - Размытие - Размытие по Гауссу (Filter>Blur>Gaussian Blur) и устанавливаем размытие 5.9 пикселей
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730525_44.jpg)
Вот что должно получиться
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730541_45.jpg)
С помощью инструмента Прямоугольное выделение (Rectangular Marque Tool) выделяем область как на картинке
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730476_46.jpg)
Удаляем выделенную область
Вот как в конечном счете должна выглядеть эта область шаблона
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730479_47.jpg)
Шаг 3. Создаем информационную область.
Чтобы создать информационную область выбираем инструмент Прямоугольник (Rectangle Tool) и создаем прямоугольник со следующими параметрами 496 на 399 пикселей
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730569_48.jpg)
С помощью того же инструмента Прямоугольник (Rectangle Tool) добавим несколько ярлыков наверху получившегося прямоугольника. Для каждого ярлыка используем стиль слоя как на картинках
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730527_49.jpg)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730513_50.jpg)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730517_51.jpg)
Получается вот так
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730533_52.jpg)
Выбираем Овал (Ellipse Tool) и создаем два длинных тонких овала как на рисунке (черные линии по бокам)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730524_53.jpg)
Затем выбираем Фильтры - Размытие - Размытие по Гауссу (Filter>Blur>Gaussian Blur) и устанавливаем ползунок на 4.5 пикселя
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730537_54.jpg)
Вот что получилось
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730571_55.jpg)
Таким образом у нас получилась тень по бокам нашего прямоугольника
Снова выбираем инструмент Прямоугольник (Rectangle Tool) и создаем еще один прямоугольник справа от первого. Размеры 415 на 338 пикселей
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730509_56.jpg)
Информационная область почти готова. Чтобы закончить ее нужно добавить текст (с помощью инструмента Текст (Type Tool)) и значки. Вот что у меня получилось
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730508_58.jpg)
Шаг 4. Создаем Информационную строку нашего макета
Продолжаем наш урок фотошопа по созданию макета бизнес сайта. Теперь нужно создать информационную строку. Для начала выбираем инструмент Прямоугольник (Rectangle Tool) и создаем длинный прямоугольник (1020 на 74 пикселя). Я использовала цвет #b2a215
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730529_59.jpg)
Затем заходим в Слой - Стиль слоя (Layer - Layer style) и устанавливаем параметры как на картинках
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730502_60.jpg)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730502_61.jpg)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730564_62.jpg)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730559_63.jpg)
Теперь сделаем разделения. Выбираем инструмент Овал (Ellipse Tool) и создаем небольшой тонкий овал как на картинке
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730560_64.jpg)
Заходим в Фильтры - Размытие - Размытие по Гауссу (Filter>Blur>Gaussian Blur) и устанавливаем радиус 7.6 пикселей
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730594_65.jpg)
Затем выбираем инструмент Прямоугольное выделение (Rectangular Marquee Tool) и выделяем область как на картинке
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730564_66.jpg)
Удаляем выбранную область
Теперь создадим еще одно разделение таким же образом. Вот что должно получиться
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730503_67.jpg)
Затем выбираем инструмент Текст (Type tool) и добавляем текст
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730569_68.jpg)
Теперь с помощью инструмента Прямоугольник (Rectangle Tool) создаем несколько прямоугольников
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730599_69.jpg)
Для каждого устанавливаем следующие параметры в Слой - Стиль Слоя (Layer - Layer style)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730537_70.jpg)
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730562_71.jpg)
Вот что вышло
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730599_72.jpg)
Затем справа добавим кнопку так же, как мы это делали в шаге 2. только изменим текст.
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730558_73.jpg)
Шаблон почти готов, осталось сделать только колонтитул.
Шаг 5. Создание колонтитула
Это очень просто. С помощью инструментов Текст (Type tool) и Прямоугольник (Rectangle Tool) создаем колонтитул. Вот как выглядит конечный результат
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730605_74.jpg)
А окончательный результат урока фотошопа по созданию макета сайта выглядит вот так
![Создание шаблона для профессионального бизнес-сайта Создание шаблона для профессионального бизнес-сайта](/uploads/posts/2010-05/1274730550_75.jpg)
Источник http://trendytuts.com/
Переведено для сайта photoshoplove.ru