Уроки Веб и приложения Creativo 16 ноября 2008

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

Сложность урока: Средний

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

Начните свою работу с создания нового файла 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

 

Источник: designstacks.net

251 тыс. 161
Печать Жалоба

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

FranS1k, обычно изображения режутся на отдельные части, кнопки и тд, ну а потом пишется код в котором задействуются эти нарезанные изображения, но для этого нужно знать хотябы html коды, они самые распространённые при написании кода страницы.

Сделал немного по своему, но за урок спасибо большое

Спасибо за урок)

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

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

Спасибо за урок и перевод.

несложно, спасибо

исправила ошибки)

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

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

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

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

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

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

Остановился на этом этапе:

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

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

Как сделать подскажите пожалуйста

Администратор
Вопросы по уроку задавайте на форуме. В конце каждого урока есть ссылка "Задать вопрос на форуме"

познавательно :))

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

Спасибо за урок!

Пожалуй я попробую сверстать шаблончик)

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

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

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

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

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

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

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


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

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

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

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

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

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

Комментарий

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

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

Исходник:

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

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

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

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

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

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

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

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

Комментарии к работе будут отключены, на их месте будет выведена реклама.

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


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

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее