Дополнения

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

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

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

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

Сложность: Средняя

Создаём макет сайта в Фотошоп

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

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

  1. 960 Grid System
  2. Набор иконок
  3. Иконка 1
  4. Иконка 2
  5. Иконка 3

Архив

Шаг 1. Работа со структурой сайта

Для начала скачайте шаблон 960 Grid System. Откройте 960_download\templates\photoshop\960_grid_12_col.psd Нажмите Ctrl+Shift+C чтобы изменить размер холста.

Используя инструмент Заливка (Paint Bucket Tool) залейте фон цветом #151515. Теперь Вам нужно создать папку для каждой части макета.

Шаг 2. Создание шапки сайта

Создайте новую направляющую (Просмотр > Новая направляющая (View > New Guide)), Положение (Position) установите на 150px, Ориентация (Orientation) - горизонтальная. Повторите этот шаг и создайте ещё две направляющие с положением в 5 и 100 пикселей.

Внутри папки Header создайте новый слой и назовите его "header_top".
С помощью инструмента Прямоугольная область (Rectangular Marquee Tool) создайте выделение 5px в высоту, залейте чёрным цветом и добавьте к слою 1 пиксельную светлую тень.

Создайте новый слой и назовите его "header_bg". Возьмите инструмент Прямоугольная область (Rectangular Marquee Tool) и создайте выделение, как показано на скриншоте ниже.

Возьмите инструмент Градиент (Gradient Tool), цвет градиента #242424 - #151515, и залейте выделение градиентом.

Откройте окно Стили слоя (Layer Style) и активируйте Внутреннюю тень (Inner Shadow) со следующими параметрами:

Шаг 3. Создание логотипа

Внутри папки Header создайте новую папку "Logo". Возьмите инструмент Текст (Text Tool) и добавьте название сайта и слоган используя параметры со скриншота ниже.

Откройте Стили слоя (Layer Style) и активируйте Тень (Drop Shadow).

Возьмите инструмент Произвольная фигура (Custom Shape Tool) и следуйте подсказкам на скриншоте ниже.

К фигуре добавьте следующие стили:

Тень (Drop Shadow)

Градиент (Gradient Overlay)

Шаг 4. Создание навигации

Внутри папки Header создайте новую папку и назовите её "navigation". С помощью инструмента Текст (Text Tool) добавьте категории, используя параметры указанные на скриншоте ниже.

Дублируйте текстовый слой. Измените цвет оригинального текстового слоя на чёрный и переместите на 1px вверх.

Теперь нам нужно создать эффект для активной категории. Под слоём с категориями создайте новый слой, выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), радиус 10pх, и создайте прямоугольник. В панели слоёв уменьшите Заливку (Fill) до 0%.
Примените следующие стили слоя:

Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Наложение градиента (Gradient Overlay)

Шаг 5. Создание поля поиска и хлебных крошек

Внутри папки Header, над слоём header_bg создайте новый слой и назовите его bg. Выберите инструмент Прямоугольная область (Rectangle Marquee Tool), создайте выделение как показано на скриншоте ниже и залейте его каким-нибудь цветом.

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

Тень (Drop Shadow)

Внутреннее свечение (Inner Glow)

Наложение градиента (Gradient Overlay)

Обводка (Stroke)

Внутри папки Header создайте папку Search. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), радиус 10px, и создайте прямоугольник как на скриншоте ниже.

Добавьте стили слоя:

Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Выберите инструмент Текст (Text Tool) и добавьте какой-нибудь текст в поисковое поле.

Теперь откройте набор соц. иконок и поместите их возле поиска.

Внутри папки Header создайте папку Breadcrumbs. Откройте иконку домика и поместите её, как на скриншоте ниже. Я добавил Наложение цвета (Color Overlay) #696969 к иконке и к текстовому слою.

Шаг 6. Создание слайд-шоу

Внутри папки Slideshow создайте новый слой и назовите его slide_bg. Создайте новую направляющую, для этого перейдите в Просмотр > Новая направляющая (View > New guide), Положение (Position) установите на 430px, Ориентация (Orientation) горизонтальная. Создайте выделение как на скриншоте ниже и залейте каким-нибудь цветом.

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

Тень (Drop Shadow)

Наложение узора (Pattern Overlay)

Обводка (Stroke)

Над слоём slide_bg создайте новый слой и назовите его highlights. Выберите инструмент Перо (Pen Tool), нарисуйте фигуру как на скриншоте ниже и создайте выделение.

Залейте выделение белым цветом, измените режим наложения на Мягкий свет (Soft Light) и уменьшите Непрозрачность (Opacity) до 50%

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

Шаг 7. Добавление кнопки «Читать далее»

Внутри папки slideshow создайте папку read_more. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), радиус 10px, создайте прямоугольник и поместите как на скриншоте ниже.

Заливку (Fill) слоя уменьшите до 0%. Добавьте следующие стили слоя:

Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Наложение градиента (Gradient Overlay)

Загрузите выделение для слоя, который мы только что создали. Перейдите в Выделение > Модификация > Сжать (Select > Modify > Contract), введите 5px и залейте выделение любым цветом.

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

Тень (Drop Shadow)

Внутреннее свечение (Inner Glow)

Наложение градиента (Gradient Overlay)

Обводка (Stroke)

С помощью инструмента Текст (Text Tool) добавьте надпись «Читать далее» на кнопку и залейте тёмным цветом. Дублируйте текстовый слой, измените цвет текста на белый и сместите на 1px вниз.

Шаг 8. Добавление изображения в слайд-шоу

Выберите инструмент Прямоугольник (Rectangle Tool), создайте прямоугольник и поместите как на скриншоте ниже.

Уменьшите Заливку (Fill) до 0% и добавьте следующие стили слоя:

Тень (Drop Shadow)

Обводка (Stroke)

Я поместил изображение над слоем с прямоугольником. Таким образом у Вас должно получиться что-то вроде этого:

Шаг 9. Добавление переключателей слайдов

Создайте внутри папки Slideshow новую папку и назовите её prev_next. Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool) с радиусом в 10px. Создайте фигуру как показано на скриншоте ниже и переименуйте слой на "prev".

Уменьшите Заливку (Fill) до 0% и добавьте следующие стили:

Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Наложение градиента (Gradient Overlay)

Дублируйте слой prev и переименуйте его на next. Отразите его по горизонтали и разместите в противоположной стороне.

Создайте ещё одну папку и назовите её Identifier. Внутри этой папки создайте слой и переименуйте его на inactive. Выберите инструмент Эллипс (Ellipse Tool), создайте несколько круглых фигур, залейте их чёрным цветом и разместите как на скриншоте ниже.

Добавьте им те же стили что и у кнопок prev_next.
Загрузите выделение для первой фигуры, перейдите в Выделение > Модификация > Сжать (Select > Modify > Contract) и введите 5px. Создайте новый слой, назовите его active, и залейте выделение каким-нибудь цветом.

Добавьте следующие стили:

Тень (Drop Shadow)

Внутреннее свечение (Inner Glow)

Наложение градиента (Gradient Overlay)

Шаг 9. Добавление контента

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

Теперь давайте добавим разделитель. Выберите инструмент Линия (Line Tool), ширина 1px. Создайте две линии и разместите их как на скриншоте ниже.

Создайте новую папку и назовите её service1. Выберите инструмент Текст (Text Tool) и добавьте заголовок используя параметры указанные на скриншоте ниже. Откройте набор иконок, который Вы скачали в начале урока, и добавьте иконку возле заголовка.

Дублируйте несколько раз группу. Разместите их так же как на скриншоте ниже. В каждой группе измените иконку.

Шаг 10. Добавление блока «О нас»

Внутри папки about us создайте новый слой. С помощью инструмента Текст (Text Tool) добавьте заголовок. Дублируйте слой с разделителем, который мы создали в предыдущем шаге, и переместите его под заголовок.

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

Перейдите в окно Стили слоя и добавьте следующие стили:

Тень (Drop Shadow)

Обводка (Stroke)

Шаг 11. Добавление последних записей из Твиттера

Внутри папки latest tweets создайте новый слой и с помощью инструмента Текст (Text Tool) добавьте какой-нибудь текст. С помощью инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) создайте прямоугольник и поместите его под какой-нибудь записью.

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

Тень (Drop Shadow)

Шаг 12. Создание футера

В папке footer создайте новый слой и назовите его footer_bg. Создайте выделение как на скриншоте ниже и залейте его каким-нибудь цветом.

Добавьте стили слоя:

Внутреннее свечение (Inner Glow)

Наложение градиента (Gradient Overlay)

Обводка (Stroke)

Возьмите инструмент Текст (Text Tool) и добавьте в центре футера свои копирайты.

Финальное изображение:

Автор: Michael John Burns

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

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

Здравствуйте, у вас есть исходник данной работы?

Helena_todorova, Здравствуйте, у вас есть исходник данной работы?

Лариса, Здравствуйте, у вас есть исходник данной работы?

Ну, это ж когда было!!! Нет, конечно.

скромная проба пера)

Petelka123, Здравствуйте, у вас есть исходник данной работы?

Благодарю. Очень красиво и довольно таки легко

Юлия Сартакова, Здравствуйте, у вас есть исходник данной работы?

Спасибо большое за урок) Очень понравился)

Спасибо за урок, хорошая идея для корпоративного сайта)

Спасибо!Очень интересно

подкорректировал (пере залил) спасибо за урок

Хороший урок! Интересный макет)

а как это потом использовать на своем сайте?

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

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

{{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