Вебграфика »

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

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

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

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



Итак, дорогие посетители 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
В мой мир
Bookmark and Share
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Уроки фотошопа
Свежие уроки
{lastnews}
Видео уроки
Популярные уроки
Наш опрос
Какие уроки вам больше нравятся?