Рубрика: Photoshop Уроки | Урок прочитали: 570
 (голосов: 0)

Создаём в Фотошоп макет для сайта в бизнес-стиле

В сегодняшнем уроке вы научитесь создать стильный бизнес макет в прохладной голубой теме.
Что мы будем создавать:

Ресурсы, используемые в этом уроке
Абстрактные обои
Кисти «Облака»
Элегантные социальные иконки

Шаг 1 - Создание фона
Создайте новый документ (Ctrl + N) 1200 х 1140px с белым фоном. Выберите инструмент Прямоугольная область "Rectangular Marquee Tool" (M) и сделайте выделение верхней части холста. Затем залейте выделение (G) черным цветом #000000.

После заливки добавьте Наложение градиента "Gradient Overlay", как показано ниже.

Далее, снова выберите инструмент Прямоугольная область Rectangular Marquee Tool" (M), только на этот раз выделите прямоугольник в два раза меньше первого. Залейте выделение (G) черным цветом #000000. После этого перейдите в меню Фильтр>Рендеринг>Блик "Filter> Render> Lens Flare", разместите блик в левом верхнем углу нового прямоугольника.

После добавления блика установите режим смешивания на Экран "Screen". У Вас должно получиться примерно так:

Выберите и скачайте кисти с облаками (см. ресурсы к уроку). Затем добавьте облака на синюю часть прямоугольника. Добавьте тяжелые облака по белой линии, чтобы скрыть линию, где заканчивается прямоугольник. Если вам не удалось скрыть края прямоугольника, то вы можете использовать маску слоя.

Не беспокойтесь, что в середине будет видна граница края, т.к. она будет закрыта остальной частью заголовка.

Шаг 2 - Создание области заголовка

Выберите инструмент Прямоугольник со скругленными углами "Rounded Rectangle Tool" (U) с радиусом около 20px.

Растяните прямоугольник, оставляя достаточно места для заголовка сайта.

Теперь нужно изменить прямоугольник. Для этого повторно выберите инструмент Прямоугольник со скругленными углами "Rounded Rectangle Tool" (U) и растяните два новых прямоугольника, один вверху и один внизу. Сделайте прямоугольник в нижней части немного меньше, чем в верхней. Чтобы убедиться, что прямоугольник прилегает к слою с формой, удерживайте нажатой клавишу Shift перед рисованием двух новых прямоугольников.

На двух новых прямоугольника нужно отрезать углы. Выберите инструмент Перо "Pen Tool" и измените параметр в верхней части на Вычесть из области фигуры «Subtract From Shape Area".

Обрежьте закругленный угол у верхнего и нижнего прямоугольников, просто удерживайте клавишу Shift, чтобы добавить контур к форме, затем сделайте маленький треугольник.

Теперь, когда углы были обрезаны, скачайте и откройте синие абстрактные обои (см. ресурсы к уроку).
Скопируйте обои в буфер обмена, а затем загрузите выделение вокруг прямоугольника, который вы только что изменяли. Чтобы загрузить выделение выберите слой с фигурой, затем перейдите в меню Выделение>Загрузить выделенную область "Select> Load Selection". После загрузки выделения перейдите в меню Редактирование>Специальная вставка>Вставить "Edit> Paste Special> Paste Into".

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

Тень:

Внутренняя тень:

Обводка:

Должно получиться что-то вроде этого:

Шаг 3 - Добавление текста в область заголовка

В верхней части макета поверх бликов добавьте название сайта. Я использовал шрифт Verdana, а синий цвет выбрал из обоев с помощью инструмента Пипетка "Eye Dropper Tool" (I).

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

Шаг 4 - Создание навигации
Выберите инструмент Прямоугольник со скругленными углами "Rounded Rectangle Tool" (U), создайте слой позади формы с синими обоями и нарисуйте прямоугольник в верхней правой части. Прямоугольник должен стройно выравниваться с указанными областями.

Затем добавьте следующие стили слоя:

Внутренняя тень:

Наложение градиента:

Обводка:

Внутри прямоугольника с навигацией добавьте текст.

Шаг 5 - Завершение создания области заголовка

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

Для кнопки связи добавьте следующие стили слоя.

Тень:

Внутренняя тень:

Обводка:

У вас должно получиться что-то вроде этого:

Наконец на правой стороне области заголовка добавьте 4 маленьких кружка с помощью инструмента Эллипс "Ellipse Tool" (U).

Эти 4 круга будут имитировать, что показывается некоторый слайд, что это JQuery слайдер.

Шаг 6 - Создание области контента

Область контента будет состоять из 3 блоков с содержанием и небольшой галереи. Начните с фона областей, выберите инструмент Прямоугольник со скругленными углами "Rounded Rectangle Tool" (U)

Для каждого из 3 прямоугольников добавьте следующие стили слоя.

Внутренняя тень:

Наложение градиента:

Обводка:

Должно получиться, примерно, следующее:

Заполните блоки содержимым, каким хотите. Я сделал окно «Добро пожаловать», «Услуги» и «Некоторые отзывы клиентов». В названиях каждого блока используйте оттенки серого и синего, как в названии сайта. Это хороший способ использовать несколько цветов, вместо одного тусклого, обычно серого или черного.

Шаг 7 - Создание галереи

Создайте 4 прямоугольника с помощью инструмента Прямоугольник "Rectangle Tool" (U), залейте (G) каждый прямоугольник с серым цветом #f1f1f1.

Загрузите выделение вокруг первого прямоугольника Выделение>Загрузить выделенную область "Layer> Load Selection", затем перейдите в меню Выделение>Модификация>Сжать "Select> Modify> Contract" границу выберите около 5-10 пикселей. Скопируйте и вставьте одно из изображений галереи в прямоугольник, перейдя в Редактирование>Специальная вставка>Вставить "Edit>Paste Special>Paste".

Повторите эти действия для следующих 3 прямоугольников. У вас должно получиться примерно так:

Шаг 8 - Создание футера (нижней области)

Продублируйте слой с формой области заголовка, затем переместите форму в нижнюю часть холста. Перейдите в меню Редактирование>Трансформация>Отразить по горизонтали "Edit> Transform> Flip Horizontal", чтобы перевернуть форму по горизонтали.

Внутри прямоугольника, в месте выступа, загрузите и добавить некоторые социальные иконки из сборника элегантных социальных иконок (см. ресурсы к уроку). Внутри остальной части футера добавьте информацию об авторских правах.

Заключение

Спасибо за участие в этом уроке! Выкладывайте ваши работы.

Автор: photoshop-plus
Переводчик: Морозов Виталий

           

Похожие файлы и публикации:

Создаём в Фотошоп макет для сайта в бизнес-стиле
Итоговый результат:
Создаём в Фотошоп макет для сайта в бизнес-стиле
В процессе изучения этого урока вы научитесь создавать стильное меню для сайта.
Создаём в Фотошоп макет для сайта в бизнес-стиле
Совместно с Sohan Negi мы разработали урок, который в подробностях покажет вам, как создать иконку пары динамиков. Урок получился длинным, поэтому мы его разбили на две части.
Создаём в Фотошоп макет для сайта в бизнес-стиле
В этом Photoshop уроке мы будем учиться создавать баннер с простым, но эффектным дизайном.
Создаём в Фотошоп макет для сайта в бизнес-стиле
В этом небольшом фотошоп уроке мы будем создавать разноцветные обои с эффектом трёхмерной радуги. Начнём с создания нового документа в Photoshop - около 1900 × 1200 пикселей, или какой вы захотите. Лучше использовать разрешение по умолчанию, 72 пикс./д. Теперь  применим инструмент прямоугольное выделение  (Rectangular Marquee Tool) для создания одной полосы примерно 1/7 холста и заполним выделенную область цветом  #490d69.
Создаём в Фотошоп макет для сайта в бизнес-стиле
В этом интересном и полезном уроке мы будем с «нуля» создавать макет для делового сайта.
Создаём в Фотошоп макет для сайта в бизнес-стиле
Если вы хотите знать, как сделать выразительные обои, тогда почитайте этот Photoshop урок.
Создаём в Фотошоп макет для сайта в бизнес-стиле
Совместно с Sohan Negi мы разработали урок, который в подробностях покажет вам, как создать иконку для сабвуфера и пары динамиков. Урок получился длинным, поэтому мы его разбили на две части.
Создаём в Фотошоп макет для сайта в бизнес-стиле
Стили слоя являются мощным инструментом в Photoshop,  которые позволяют быстро создавать эффекты, которые можно применить к дополнительным объектам.
Создаём в Фотошоп макет для сайта в бизнес-стиле
В этом уроке мы будем рисовать анимацию летающего ангела.
Создаём в Фотошоп макет для сайта в бизнес-стиле
Сегодня мы создадим симпатичную кнопку-переключатель, которую вы сможете использовать в своих работах. Для начала взглянем на финальное изображение.
Создаём в Фотошоп макет для сайта в бизнес-стиле
Берём инструмент  Rectangular Marquee Tool (прямоугольное выделение), делаем выделение, как на рисунке ниже и заполняем его цветом  #7000a4 на новом слое. Это будет основа для первого карандаша.
Создаём в Фотошоп макет для сайта в бизнес-стиле
В этом уроке мы будем комбинировать простые векторные фигуры, стили слоев и большое количество блеска для создания прекрасной лупы для вашей иконки "Поиск", при необходимости. Давайте начнем!
Создаём в Фотошоп макет для сайта в бизнес-стиле
Создайте новый документ произвольного размера. Чтобы края вашей сим-карты были закруглены, возьмите инструмент rounded rectangle tool (u) (прямоугольник с закругленными углами), нарисуйте прямоугольник и заполните его цветом, каким захотите.
Создаём в Фотошоп макет для сайта в бизнес-стиле
Финальное изображение
Создаём в Фотошоп макет для сайта в бизнес-стиле
В этом уроке Вы научитесь создавать оригинальные веб - кнопки для сайта.
Создаём в Фотошоп макет для сайта в бизнес-стиле
В данном уроке мы будем учиться создавать «цветовую» шапку для сайта.