Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

крупнейшая в мире социальная сеть пользователей Adobe Photoshop

207 383 чел. 399 071 работа 4 089 уроков
  • Обучайтесь и совершенствуйтесь
  • Разместите своё портфолио
  • Участвуйте в конкурсах
  • Подписывайтесь и оценивайте
  • Комментируйте и общайтесь
Присоединиться

Сложность: Сложная

Макет для бизнес-сайта

Итоговый результат:

Исходники к уроку:

  1. Шрифт PT Sans Bold
  2. Иконки

Архив

Шаг 1

Создайте новый документ 1200х1200px и залейте фон белым цветом.

Шаг 2

Для начала мы создадим шапку сайта. Возьмите инструмент Прямоугольник (Rectangle Tool) и создайте фон шапки, высота 74px, в стилях слоя добавьте Наложение градиента (Gradient Overlay).

Поверх фона создайте ещё один прямоугольник, высота 70px, и добавьте стили Тень (Drop Shadow), Наложение градиента (Gradient Overlay) и Обводку (Stroke).

Шаг 3

Теперь мы нарисуем блок с поиском. Для этого создайте прямоугольник (255х27px), залейте его белым цветом и добавьте Обводку (Stroke).

Создайте ещё один прямоугольник (70х27px), это будет кнопка поиска. Добавьте следующие стили слоя: Внутренняя тень (Inner Shadow), Наложение градиента (Gradient Overlay) и Обводка (Stroke).

С помощью инструмента Текст (Type Tool) добавьте слово "SEARCH" на кнопку используя шрифт PT Sans Bold. Добавьте стиль Тень (Drop Shadow).

Шаг 4

Добавьте новый прямоугольник под шапкой сайта (высота 50px), это будет фон для навигации. Добавьте стиль Наложение градиента (Gradient Overlay).

Также в стилях слоя добавьте 1 пиксельную Обводку (Stroke), цвет #cbcbcb, и Внутреннюю тень (Inner Shadow) .

Добавьте свои категории в меню используя тёмно-серый цвет. И добавьте стиль Тень (Drop Shadow).

Создайте разделители для ссылок с помощью инструмента Линия (Line Tool).

Для активной ссылки создайте прямоугольник и в стилях добавьте Наложение градиента (Gradient Overlay).

Измените цвет активной ссылки на белый и измените стиль Тень (Drop Shadow).

Шаг 5

Отступите на 2px вниз от навигации и создайте прямоугольник высотой в 280px, залейте его цветом #eaeaea.

Теперь поверх него создайте ещё один прямоугольник белого цвета (970x330px) и добавьте Тень (Drop Shadow) в стилях слоя.

Добавьте какое-нибудь изображение в левую часть прямоугольника, отступ от краёв должен быть, примерно, 4px. Изображение должно занимать, примерно, 70% пространства.

Напишите какой-нибудь текст на изображении используя шрифт PT Sans Bold. Цвет текста - #224096.

Оставшееся пространство залейте серым (#EEEEEE) цветом. Сюда Вы можете поместить какой-нибудь текст.

Для заголовка используйте цвет #224096 и стиль слоя Тень (Drop Shadow).

Добавьте небольшое описание под заголовком.

Шаг 6

Создайте прямоугольник размером 970x110px. Перейдите в стили слоя и добавьте там Тень (Drop Shadow) и Градиент (Gradient Overlay).

Теперь мы можем добавить несколько категорий и иконки к ним. Иконки Вы можете найти в исходниках к уроку в самом начале.

Для того чтобы выделить активный элемент меню, создайте прямоугольник и добавьте к нему следующие стили слоя:

Загрузите выделение для прямоугольника, создайте новый слой и измените параметр наложения на Перекрытие (Overlay), Непрозрачность (Opacity) уменьшите до 80%, или меньше. С помощью мягкой белой кисти добавьте осветление в верхней части прямоугольника.

По краям добавьте два небольших круга и добавьте стили, указанные на скриншотах ниже.

С помощью инструмента Произвольная фигура (Custom Shape Tool) добавьте стрелки в центр круга. И добавьте несколько стилей к ним.

Шаг 7

Добавьте какое-нибудь изображение и напишите заголовок к нему, как на скриншоте ниже.

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

Шаг 8

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

Шаг 9

Также, не забудьте нарисовать футер для сайта, и добавить свои копирайты.

Итоговый результат:

Автор: Stelian Subotin

Комментарии 15

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты

Здравствуйте:) Я старался как мог. Искал иконки, искал подходящую цепь, искал смысл но получилось на мой взгляд не очень хорошо. Переход от шапки к меню получился по другому, видно не понял как правильно сделать. Решил попробовать по своему и не знаю на сколько хорошо или плохо получилось. Почитал не много о шрифтах - это целая наука как оказывается. Захотел использовать, по импровизировать со шрифтом Baskerville, Baskerville Win9... и тоже не знаю удачное решение или нет. Английский плохо знаю... точнее в обще не знаю но пытался подбирать тексты по смыслу. Учусь из всех сил, жаль посоветовать рядом ни кто ни чего не может а сайты мне уже начали заказывать. Один сделал, клиенту показал, клиент пока молчит. Возможно не понравился... пока еще не знаю. За урок огромное спасибо!

спасибо, хороший урок

С выравниванием текста пока что всё ещё очень плохо. Но думаю с опытом придет и это.
Спасибо за урок!

Спасибо за перевод. Очень хороший и сдержанный макет.

Спасибо. Захотелось сделать дизайн более строгим, на мой взгляд, получилось.

Спасибо, урок очень понравился!

спасибо, жаль, ссылка на иконки для меню битая

первый макет. Услышал много критики, продолжаю учится.

Добавить комментарий / работу

Новые работы пользователей

{{work.views}}

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска, или сбросить фильтры


Смотреть все работы

Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Мне нравится {{work.likes}} {{work.views}} Жалоба

Оставить комментарий {{work.childs.length || 0}}

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Сначала популярные Сначала старые Сначала новые
Добавить комментарий
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:


Название:
{{name}}
Описание:

{{text}}

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Вашу работу разберет один из экспертов проекта «Фотошоп-мастер». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

Пункт «18+» допустимо ставить только для работ, действительно содержащих элементы, которые не должны видеть несовершеннолетние: обнаженка, сцены жестокости, и т.д. Запрещается ставить такую метку на обычные работы. За подобное поведение у пользователя будет блокироваться возможность добавления новых работ. Все понятно, больше не показывать

После добавления работы:


Запланировать публикацию

Запланировать

Правила загрузки работ на «Фотошоп-Мастер»

  • 1. На сайте запрещается размещать изображения, которые содержат нецензурную лексику, угрозы, оскорбляет, унижает чье-либо достоинство, а также явно или косвенно нарушает законодательство Российской Федерации.

  • 2. Сайт photoshop-master.ru приветствует соблюдение авторских прав. В случае возникновения споров или разногласий Администрация сайта приложит все усилия для разрешения сложившейся ситуации.

  • 3. Правило третье. Публикуемые работы не должны содержать изображения, связанные с наркотиками , порнографического содержания, сцены насилия.

Подробная информация о правилах публикации https://photoshop-master.ru/blog/post/rules