Уроки Веб и приложения Руслан Гильзидинов 23 августа 2013

Дизайн для делового сайта в Фотошоп

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

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

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

Создаем новый документ в Photoshop размером 1000х1100px. Заливаем фон цветом #2c2c2c. Качаем набор текстур 200 Photoshop seamless pixel patterns.

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

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

Указываем следующие стили для слоя:

Нужную текстуру вы найдете здесь:

Если вам не нравится эта текстура, поэкспериментируйте с другими – возможно, какая-та из них вам понравится больше.

Так получилось у меня:

С помощью инструмента Pen Tool (Перо) рисуем кнопку в самом верху шапки, как показано на рисунке:

Указываем следующие стили для слоя с шапкой:

Тень (Drop shadow):

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

Так пока выглядит моя кнопка, как вы могли заметить, я уже добавил некоторый текст в навигацию:

Создаём ещё один «квадрат», как в самом начале урока, сразу после шапки. Я использовал  цвет #131313 для фона.

С помощью инструмента Pen Tool (Перо) я нарисовал ещё одну форму. На картинке ниже я выделил её красным цветом, чтобы вам было лучше видна. Заливаем её тем же цветом #131313.

Создать подобную форму будет проще, если вы используете сетку (Ctrl+”).

Далее объединяем предыдущие последние два слоя в один. Для этого выделяем оба слоя и жмем Ctrl+E. Применяем к получившемуся слою следующие стили:

Внутренняя тень (Inner shadow):

Вот, что в итоге получилось у меня. Пожалуйста, кликните по картинке ниже и рассмотрите лучше в полном размере.

С помощью инструмента Rounded Rectangle Tool (Прямоугольник со скругленными краями) создаем несколько форм, как показано ниже:

Выделяем все созданные в предыдущем шаге слои и объединяем их в один, нажав Ctrl+E. Применяем следующие стили:

Наложение градиента (Gradint overlay):

Как вы догадались, это будущее слайдшоу. Так получилось у меня:

С помощью инструмента Rounded Rectangle Tool (Прямоугольник со скругленными краями) создаем ещё две формы. Верхняя форма предназначена для формы поиска, нижняя – это сайдбар для перечня последних записей, или любого другого виджета.

Для последних двух форм применяем следующие стили:

Внутренняя тень (Inner shadow):

Тиснение/скос (Bevel/Emboss):

Используя инструмент Pen Tool (Перо), создаем ещё одну форму в самом низу макета:

Для стилей слоя я использовал те же стили, что и при создании слайдшоу.

Рисуем маленькие кружочки серого цвета по бокам и размещаем слой с этими кружочками сразу после фонового слоя. Должно получиться так:

Теперь разбавим пока что скучный макет картинками. Я использовал Эффект Боке.

Последний штрих – добавим текст.

И готово!

Автор: grafpedia.com

Источник: grafpedia.com

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

Спааасибоооо!

Урок классный, но не работает ссылка на скачивание текстур. Пишет, что такой страницы не существует :( Не могли вы перезалить эти текстуры?

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

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

Спасибо огромное за урок! Наконец-то научился пользоваться пером! Потрясающая вещь!

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

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

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

Спасибо за урок! Огромное!!

Спасибо
Научился работать с сеткой)

Большое человеческое спасибо на многое открыли мне глаза. Успехов Вам в вашем творческом труде.

Хороший и понятный урок

Спасибо! Как всегда – урок замечательный!

Спасибо было интересно.

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

Спасибо за отличный перевод и интересный урок.

давно хотела попробовать сделать шаблон сайта

Люблю макеты рисовать.

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

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

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

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


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

Предыдущая Следующая
Добавлена {{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-адрес, помогающих нам сделать его удобнее для вас. Подробнее