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

Макет страницы для бизнес-сайта в Фотошоп

В этом уроке я покажу, как создать макет для бизнес-сайта.

Шаг  1

Создайте новый документ (Файл – Новый) (File > New) размером 780×700 px и с разрешением 72 dpi.

Создайте новый слой (Shift + Ctrl + N). Инструментом Прямоугольная область выделения (Rectangular Marquee Tool) (M) выделите необходимые области и залейте их черным цветом при помощи инструмента Заливка (Paint Bucket Tool) (G).

На этом же слое инструментом Овальная область выделения (Elliptical Marquee Tool) (M) создайте пять круглых выделений и нажмите клавишу Delete, чтобы вырезать их из черного фона (каждое выделение рисуйте отдельно, после чего нажимайте клавишу Delete).

Шаг 2

Дублируйте недавно созданный слой (Ctrl + J) и поместите его под слой с черным фоном. Инструментом Свободное трансформирование (Free Transform) (Ctrl + T) сдвиньте слой в правую сторону, изменив его цвет. Для этого, примените стиль слоя Наложение цвета (Color Overlay) и выберите цвет #AEAEAE.

Шаг 3

Выберите инструмент Кисть (Brush Tool) (B) такого типа, как показано на скриншоте (это одна из стандартных кистей).

Выбранной кистью сделайте несколько кликов рядом с отверстиями на фоне:

Теперь выберите инструмент Осветлитель (Dodge Tool) (O) с кистью, которая показана на скриншоте, и пройдитесь инструментом по черному фону:

Шаг 4

Найдите в Интернете гранжевые кисти, создайте новый слой (Shift + Ctrl + N) и выбранной ранее кистью нарисуйте потертые области на черном фоне. Уменьшите непрозрачность (Opacity) этого слоя до 40%.

Шаг 5

Дублируйте последний созданный слой (Ctrl + J) и поверните его на 180 градусов (Ctrl + T). Расположите дубликат, как показано на скриншоте:

Инструментом Прямоугольник (Rectangle Tool) (U) нарисуйте вертикальную линию серого цвета (#ACACAC).

Теперь инструментом Эллипс (Ellipse Tool) (U) нарисуйте маленький круг такого же серого цвета (#ACACAC), что и линия.

Также, инструментом Эллипс (Ellipse Tool) (U) нарисуйте круг меньшего размера. Этот круг должен быть белого цвета.

Шаг 6

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

Поместите только что созданные слои в группу (Ctrl + G).

Шаг 7

Дублируйте группу четыре раза (Ctrl + J) и расположите копии, как показано ниже:

Шаг 8

Теперь на хедере нужно нарисовать кнопку. Для этого воспользуйтесь инструментом Овальная область выделения (Ellipse Tool) (U).

Уменьшите параметр Заливка (Fill) слоя с кнопкой до 0% и примените к нему стиль слоя Внешнее свечение (Outer Glow):

Также, примените стиль слоя Наложение градиента (Gradient Overlay):

Параметры стиля слоя Наложение градиента (Gradient Overlay):

Также, добавьте стиль Обводка (Stroke). В открывшемся окне для обводки выберите градиент:

Параметры градиента для обводки:

Результат:

Для удобства, поместите все слои  с кнопками меню в группу (Ctrl + G). Дублируйте четыре раза получившуюся группу и передвиньте дубликаты:

Шаг 8

Теперь пронумеруйте кнопки меню. Выберите инструмент Текст (Т), откройте палитру Символы (Окно – Символы) и выберите в ней шрифт и его размер. Остальные атрибуты либо оставьте по умолчанию, либо выберите на свой вкус.

Шаг 9

Теперь над кнопками меню напишите названия:

Шаг 10

Теперь создадим узор. Создайте новый слой (Shift + Ctrl + N) размером 1×4 px и с разрешением 72 dpi, выберите инструмент Карандаш (Pencil Tool) (B) с цветом #4C4C4C и нарисуйте текстуру:

Из созданного узора создайте текстуру (Редактирование – Определить узор) (Edit > Define Pattern).

Шаг 11

Инструментом Прямоугольник (Rectangle Tool) (U) нарисуйте вертикальную линию.

Уменьшите параметр Заливка (Fill) для слоя с вертикальной линией до 0% и примените к ней текстуру, которую только что создали. Для этого, добавьте  стиль слоя Перекрытие узора (Pattern Overlay).

Шаг 12

Создайте новый слой (Shift + Ctrl + N) размером 4×4 px и с разрешением 72 dpi и инструментом (Карандаш) (Pencil Tool) (B) с цветом #25B0C3, нарисуйте еще один узор.

Из созданного узора создайте текстуру (Редактирование – Определить узор) (Edit > Define Pattern).

Шаг 13

Инструментом Прямоугольник со скругленными углами ( Rounded Rectangle Tool) (U) нарисуйте овальную фигуру. Поместите ее под слой с пунктирной линией:

К слою с овальной фигурой примените стиль слоя Наложение градиента (Gradient Overlay):

Параметры стиля слоя Наложение градиента (Gradient Overlay):

Примените также стиль Перекрытие узора (Pattern Overlay) с текстурой, которую создали в шаге 12.

Также, добавьте стиль слоя Обводка (Stroke) с градиентной заливкой:

Используйте вот такие параметры градиента для обводки:

Результат:

Шаг 14

Инструментом Эллипс (Ellipse Tool) (U) нарисуйте кнопку play:

К слою с этой кнопкой примените стиль Наложение градиента (Gradient Overlay) с такими параметрами:

Также, добавьте стиль Обводка с градиентной заливкой (Stroke):

Результат:

Шаг 15

Инструментом Карандаш (Pencil Tool) (B) нарисуйте стрелку на кнопке. Для этого, создайте новый слой (Shift + Ctrl + N) и используйте цвет #124E58.

Все слои, относящиеся к кнопке play, поместите в группу (Ctrl + G), дублируйте группу (Ctrl + J), отразите по вертикали (Ctrl + T) и опустите дубликат вниз:

Шаг 16

Под меню добавьте две области под контент:

В две области под контент добавьте текст:

           

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

Макет страницы для бизнес-сайта в Фотошоп
Этот урок по Фотошопу покажет вам, как сделать дизайн сайта или портфолио.
Макет страницы для бизнес-сайта в Фотошоп
В этом уроке я покажу Вам, как создать дизайн для приложения записной книжки.
Макет страницы для бизнес-сайта в Фотошоп
Приближается самый волшебный праздник – Новый год! Пора начинать подготовку, в этом уроке мы создадим простую новогоднюю открытку.
Макет страницы для бизнес-сайта в Фотошоп
В этом уроке будем учиться создавать креативный дизайн для блога.
Макет страницы для бизнес-сайта в Фотошоп
Создание привлекательных и функциональных веб-макетов – неотъемлемая часть жизни веб-дизайнера. В этом уроке мы будем создавать профессиональный макет сайта с нуля. В процессе урока Вы узнаете некоторые полезные трюки при создании дизайна.
Макет страницы для бизнес-сайта в Фотошоп
В этом уроке я покажу, как создать макет сайта на футбольную тематику.
Макет страницы для бизнес-сайта в Фотошоп
В этом уроке мы будем учиться создавать вот такие песочные часы – наглядный пример тому, что время - деньги!
Макет страницы для бизнес-сайта в Фотошоп
В данном уроке мы будем учиться создавать информационный блок для сайта.
Макет страницы для бизнес-сайта в Фотошоп
В этом уроке я покажу, как нарисовать реалистичную фотопленку.
Макет страницы для бизнес-сайта в Фотошоп
В этом уроке мы научимся рисовать губную помаду. Вот, что у нас получится.
Макет страницы для бизнес-сайта в Фотошоп
Создайте новый документ в Photoshop (Ctrl+N) размером 800x1024 пикс, режим RGB, разрешение 72 пикс/дюйм. Создайте новый слой (залейте его любым цветом) и кликнете по иконке Add a layer style (Добавить стиль слоя) внизу палитры слоев, выберите Gradient Overlay (Наложение градиента).
Макет страницы для бизнес-сайта в Фотошоп
В этом уроке Вы узнаете, как создать иконку в виде дома. Вот так будет выглядеть иконка в конце этого урока:
Макет страницы для бизнес-сайта в Фотошоп
В этом уроке мы будем создавать минималистичный макет блога.
Макет страницы для бизнес-сайта в Фотошоп
Шаг 1. Создайте новый документ размером 900 на 790 px (пикселей) и залейте фон черным цветом. Создайте новый слой и назовите его "Создание формы". Выберите инструмент  Ellipse Tool (Эллипс) (U) на панели инструментов:
Макет страницы для бизнес-сайта в Фотошоп
В этом уроке вы узнаете, как создать элегантный и стильный макет портфолио в Photoshop.