Уроки Photoshop. Создание шаблона для профессионального бизнес-сайта

Источник: photoshoplove
alyssakidd

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

Выполнив все шаги урока вы получите примерно такое в вашем фотошопе:

Создание шаблона для профессионального бизнес-сайта

Итак, дорогие посетители photoshoplove.ru, открываем Photoshop и создаем новый документ размером 1020 на 1200 пикселей и выбираем цвет фона #a8a994

Создание шаблона для профессионального бизнес-сайта

Шаг 1. Создаем строку навигации

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

Создание шаблона для профессионального бизнес-сайта

Теперь выбираем инструмент Прямоугольник (Rectangle Tool) (U) и растягиваем прямоугольник 80 на 54 пикселя (я сделала его красным, чтобы показать наглядно, где он должен быть)

Создание шаблона для профессионального бизнес-сайта

Заходим в меню Слой - Стиль слоя (Layer-Layer Style) и устанавливаем следующие параметры

Создание шаблона для профессионального бизнес-сайта

Создание шаблона для профессионального бизнес-сайта

Вот как должно получиться

Создание шаблона для профессионального бизнес-сайта

Дальше поверх получившегося у нас прямоугольника добавляем еще один размером 71 на 50 пикселей и заливаем его цветом. Я использовала #cfbe27.

Создание шаблона для профессионального бизнес-сайта

Снова заходи в Слой - Стиль слоя (Layer-Layer Style) и устанавливаем следующие параметры для второго прямоугольника

Создание шаблона для профессионального бизнес-сайта

Создание шаблона для профессионального бизнес-сайта

Создание шаблона для профессионального бизнес-сайта

Затем добавим тень для ссылок, используемых в строке навигации. Для этого выделяем слой с текстом ссылки, заходи в Слой - Стиль слоя (Layer-Layer Style) и устанавливаем следующие параметры

Создание шаблона для профессионального бизнес-сайта

Тоже самое проделываем с каждым слоем, содержащим текст будущих ссылок.
Конечный результат выглядит так:

Создание шаблона для профессионального бизнес-сайта

Шаг 2. Создаем ознакомительную часть шаблона
Для начала выбираем инструмент Прямоугольник (Rectangle tool) и создаем прямоугольник под логотипом. Параметры моего прямоугольника - 106 на 24 пикселя, цвет белый (#FFFFFF) и также я уменьшила прозрачность слоя до 21%

Создание шаблона для профессионального бизнес-сайта

Дальше Выбираем инструмент Овал (Ellipse Tool) и создаем овал под нашим прямоугольником

Создание шаблона для профессионального бизнес-сайта

Выбираем слой с овалом, заходим в меню Фильтры - Размытие - Размытие по Гауссу (Filter>Blur>Gaussian Blur) и устанавливаем ползунок на отметку 7.8 пикселей.

Создание шаблона для профессионального бизнес-сайта

Выбираем инструмент Прямоугольное выделение (Rectangular Marque Tool) (M) и выделяем область как показано на рисунке:

Создание шаблона для профессионального бизнес-сайта

Удаляем выделенную область
Теперь добавляем текст в наш прямоугольник и с помощью инструмента Линия (Line tool) создадим линию прямо над нашей кнопкой (прямоугольник). Параметры линии: 866 на 1 пиксель.

Создание шаблона для профессионального бизнес-сайта

Теперь выбираем инструмент Перо (Pen Tool) и рисуем область как показано на рисунке

Создание шаблона для профессионального бизнес-сайта

Оставляем выбранным инструмент Перо (Pen Tool), жмем правой кнопкой внутри нарисованной вами области между двух линий и выбираем Выделить (Make Selection)

Создание шаблона для профессионального бизнес-сайта

У вас должно получиться вот такое выделение

Создание шаблона для профессионального бизнес-сайта

Жмем Ctrl+Shift+N (чтобы создать новый слой), выбираем инструмент Заливка (Paint Bucket Tool) и заливаем выделенную область на новом слое цветом # bebfab

Создание шаблона для профессионального бизнес-сайта

Теперь заходи в меню Фильтры - Размытие - Размытие по Гауссу (Filter>Blur>Gaussian Blur) и выбираем радиус размытия 40.2 пикселя.

Создание шаблона для профессионального бизнес-сайта

Затем выбираем инструмент Прямоугольное выделение (Rectangular Marque Tool) и выделяем как на рисунке

Создание шаблона для профессионального бизнес-сайта

Удаляем область

Создание шаблона для профессионального бизнес-сайта

Далее справа добавляем несколько картинок

Создание шаблона для профессионального бизнес-сайта

Затем выбираем инструмент Текст (Type Tool) и добавляем текст, который вам нужен. Параметры текста, показанного на рисунке: шрифт Euphemia , размер шрифта 32

Создание шаблона для профессионального бизнес-сайта

Продублируем слой с текстом и заходим в Фильтры - Размытие - Размытие по Гауссу (Filter>Blur>Gaussian Blur), устанавливаем параметры угол 0, дистанция 38

Создание шаблона для профессионального бизнес-сайта

Уменьшаем прозрачность этого слоя до 36%

Создание шаблона для профессионального бизнес-сайта

Теперь выбираем инструмент Овал (Ellipse tool) и создаем черный овал под текстом, затем используем Размытие по Гауссу (Gaussian Blur) с радиусом размытия 10 пикселей

Создание шаблона для профессионального бизнес-сайта

Выбираем инструмент Прямоугольное выделение(Rectangular Marque Tool) и отрезаем часть нашего размытого овала и уменьшаем прозрачность слоя до 50%
Выбираем инструмент Текст (Type Tool) и добавляем какой-либо необходимый вам текст как показано на картинке

Создание шаблона для профессионального бизнес-сайта

Первая часть нашего шаблона почти готова. Осталось только создать кнопку, открывающую сайт
Выбираем инструмент Прямоугольник (Rectangle Tool) и создаем прямоугольник. Я использовала цвет # b1a112

Создание шаблона для профессионального бизнес-сайта

Затем заходим в Слой - Стиль Слоя (Layer-Layer Style) и устанавливаем следующие параметры

Создание шаблона для профессионального бизнес-сайта

Создание шаблона для профессионального бизнес-сайта

Выбираем инструмент Перо (Pen tool) и рисуем стрелку прямо на нашей кнопке, т.е. внутри прямоугольника

Создание шаблона для профессионального бизнес-сайта

Правой кнопкой мышки на стрелке выбираем Выделить (Make Selection) (инструмент Перо (Pen tool) должен быть все еще выбран)

Создание шаблона для профессионального бизнес-сайта

Затем нажимаем клавиши Ctrl+Shift+N чтобы создать новый слой и выбираем инструмент Заливка (Paint Bucket Tool) и заливаем стрелку цветом # 84831e

Создание шаблона для профессионального бизнес-сайта

Заходим в Слой - Стиль Слоя (Layer-Layer Style) и устанавливаем параметры как на картинках

Создание шаблона для профессионального бизнес-сайта

Создание шаблона для профессионального бизнес-сайта

Создание шаблона для профессионального бизнес-сайта

Выбираем инструмент Текст (Type tool) и добавляем текст на нашу кнопку (я использовала шрифт Arial, размер 14 пикселей)

Создание шаблона для профессионального бизнес-сайта

Чтобы слегка выделить кнопку, выбираем инструмент Овал (Ellipse tool) (белый) и рисуем овал сверху прямоугольника

Создание шаблона для профессионального бизнес-сайта

Затем выбираем меню Фильтры - Размытие - Размытие по Гауссу (Filter>Blur>Gaussian Blur) и устанавливаем размытие 5.9 пикселей

Создание шаблона для профессионального бизнес-сайта

Вот что должно получиться

Создание шаблона для профессионального бизнес-сайта

С помощью инструмента Прямоугольное выделение (Rectangular Marque Tool) выделяем область как на картинке

Создание шаблона для профессионального бизнес-сайта

Удаляем выделенную область
Вот как в конечном счете должна выглядеть эта область шаблона

Создание шаблона для профессионального бизнес-сайта

Шаг 3. Создаем информационную область.

Чтобы создать информационную область выбираем инструмент Прямоугольник (Rectangle Tool) и создаем прямоугольник со следующими параметрами 496 на 399 пикселей

Создание шаблона для профессионального бизнес-сайта

С помощью того же инструмента Прямоугольник (Rectangle Tool) добавим несколько ярлыков наверху получившегося прямоугольника. Для каждого ярлыка используем стиль слоя как на картинках

Создание шаблона для профессионального бизнес-сайта

Создание шаблона для профессионального бизнес-сайта

Создание шаблона для профессионального бизнес-сайта

Получается вот так

Создание шаблона для профессионального бизнес-сайта

Выбираем Овал (Ellipse Tool) и создаем два длинных тонких овала как на рисунке (черные линии по бокам)

Создание шаблона для профессионального бизнес-сайта

Затем выбираем Фильтры - Размытие - Размытие по Гауссу (Filter>Blur>Gaussian Blur) и устанавливаем ползунок на 4.5 пикселя

Создание шаблона для профессионального бизнес-сайта

Вот что получилось

Создание шаблона для профессионального бизнес-сайта

Таким образом у нас получилась тень по бокам нашего прямоугольника
Снова выбираем инструмент Прямоугольник (Rectangle Tool) и создаем еще один прямоугольник справа от первого. Размеры 415 на 338 пикселей

Создание шаблона для профессионального бизнес-сайта

Информационная область почти готова. Чтобы закончить ее нужно добавить текст (с помощью инструмента Текст (Type Tool)) и значки. Вот что у меня получилось

Создание шаблона для профессионального бизнес-сайта

Шаг 4. Создаем Информационную строку нашего макета
Продолжаем наш урок фотошопа по созданию макета бизнес сайта . Теперь нужно создать информационную строку. Для начала выбираем инструмент Прямоугольник (Rectangle Tool) и создаем длинный прямоугольник (1020 на 74 пикселя). Я использовала цвет #b2a215

Создание шаблона для профессионального бизнес-сайта

Затем заходим в Слой - Стиль слоя (Layer - Layer style) и устанавливаем параметры как на картинках

Создание шаблона для профессионального бизнес-сайта

Создание шаблона для профессионального бизнес-сайта

Создание шаблона для профессионального бизнес-сайта

Создание шаблона для профессионального бизнес-сайта

Теперь сделаем разделения. Выбираем инструмент Овал (Ellipse Tool) и создаем небольшой тонкий овал как на картинке

Создание шаблона для профессионального бизнес-сайта

Заходим в Фильтры - Размытие - Размытие по Гауссу (Filter>Blur>Gaussian Blur) и устанавливаем радиус 7.6 пикселей

Создание шаблона для профессионального бизнес-сайта

Затем выбираем инструмент Прямоугольное выделение (Rectangular Marquee Tool) и выделяем область как на картинке

Создание шаблона для профессионального бизнес-сайта

Удаляем выбранную область
Теперь создадим еще одно разделение таким же образом. Вот что должно получиться

Создание шаблона для профессионального бизнес-сайта

Затем выбираем инструмент Текст (Type tool) и добавляем текст

Создание шаблона для профессионального бизнес-сайта

Теперь с помощью инструмента Прямоугольник (Rectangle Tool) создаем несколько прямоугольников

Создание шаблона для профессионального бизнес-сайта

Для каждого устанавливаем следующие параметры в Слой - Стиль Слоя (Layer - Layer style)

Создание шаблона для профессионального бизнес-сайта

Создание шаблона для профессионального бизнес-сайта

Вот что вышло

Создание шаблона для профессионального бизнес-сайта

Затем справа добавим кнопку так же, как мы это делали в шаге 2. только изменим текст.

Создание шаблона для профессионального бизнес-сайта

Шаблон почти готов, осталось сделать только колонтитул.

Шаг 5. Создание колонтитула
Это очень просто. С помощью инструментов Текст (Type tool) и Прямоугольник (Rectangle Tool) создаем колонтитул. Вот как выглядит конечный результат

Создание шаблона для профессионального бизнес-сайта

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

Создание шаблона для профессионального бизнес-сайта

Источник http://trendytuts.com/
Переведено для сайта photoshoplove.ru


Страница сайта http://test.interface.ru
Оригинал находится по адресу http://test.interface.ru/home.asp?artId=28083