Дополнения

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

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

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

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

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

Рисуем шаблон для сайта Креативной студии

В этой детальной консультации вы узнаете, как нарисовать впечатляющий веб-сайт для Креативной Студии.

Начните свою работу с создания нового файла 845 x 900 px и 72 dpi. Выберите после этого Инструмент и залейте документ цветом #151616

Сейчас мы попробуем создать эффект освещения в верхней части нашего шаблона.
Возьмите Инструмент Прямоугольник в режиме фигур .
Растяните его так, как показано на рисунке:

Установите этому слою параметр Fill (Заливка) на 0%

Теперь к этой фигуре применим стиль слоя "Наложение градиента"

Параметры градиента:

Посмотрите, что получилось! Сверху нашего документа появилась мягкая подсветка.

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

Для слова CREATIVE использовались настройки:

Для слова STUDIO использовались настройки:

В результате:

К тексту примените следующие стили слоя.

Тень:

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

Параметры градиента:

Используя Инструмент , нарисуйте тонкую горизонтальную линию цвет #323537

Примените стиль слоя "Тень":

Сделайте копию слоя с линией (Ctrl + J) и расположите ее внизу документа:

Пришло время для создания кнопок навигации на хедере нашего шаблона.

Выберете инструмент , радиус скругления углов установите на 10 px. Нарисуйте первую кнопку, цвет для нее установите на #3D4A4E

Дублируйте слой с кнопкой два раза. Разместите их так, как показано на рисунке. Для центральной кнопки изменим цвет на #1194FC

Напишите названия кнопок. Здесь использовались такие параметры:

Продолжаем рисовать шаблон для сайта.

Переходим к основной части. С помощью инструмента нарисуйте большой серый прямоугольник, скругление 10 px

Примените стиль слоя "Наложение градиента":

Параметры градиента:

На созданную панель размещаем первую картинку.

Для этого переместите картинку на документ, Ctrl+клик по слою с панелькой, переходим на слой с картинкой, нажимаете Ctrl + Shift + I, чтобы инвертировать выделение и Delete, чтобы удалить лишние части от картинки.

Добавим Тень:

Обводку:

С правой стороны от картинки вводим текст, в этом уроке использовались такие параметры:

Проведите линию цвета #363A3C там, где заканчивается текст.

Под чертой мы разместим еще кнопку "Вид".

Снова берем , цвет #F79700, скругление 10 px

Параметры для текста кнопки:

Выделите в палитре все слои, которые относятся к первой панельке - это серый прямоугольник, картинка, текст, линия и кнопка. Нажмите Ctrl + G, чтобы объединить все слои в одну группу.

Дублируйте эту группу 2 раза. Чтобы не путаться сразу каждой группе дайте свое имя. Расположите новые панельки так, как показано ниже.

Вам остается в последних двух группах поменять содержание - картинку и текст.

На каждой панельке напишите дату:

А теперь посмотрите на ваш шаблон! Стильно и креативно!

Автор: adobetutorialz

 

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

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

Спасибо за урок. Цветовая гамма просто великолепна.

Урок понравился! Спасибо! Скреативила с цветом, так как он лучше подходил к моим картинкам.

Спасибо! Вот другой вариант.

Спасибо, сделала из своих старых работ

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

Отличный урок, спасибо автору и за перевод!

Отличный урок, спасибо!

Спасибо. Полезный урок.

Спасибо за очень интересный урок!

Большое спасибо за урок!

Урок замечательный! Просто в исполнении, и в то же время весьма впечатляюще получилось!

Урок интересный, спасибо))))

очень красиво :) спасибо :)

Спасибо. Отличный урок!

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

aidyslayn, Это уже вопросы вёстки сайта, а не дизайна и фотошопа.

Урок отличный, огромное спасибо, безумно понравилось)
Делала оформление для своей темы с креативом на один форум.
Первый вариант - http://tinypic.com/r/r8id4w/5
Потом произошел регресс(или прогресс?:))), я поработала с кисточками и получилось вот что)

Сорри за поганое качество))

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

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

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