В этом уроке Photoshop вы узнаете, как сделать PSD макет web страницы с красивым дизайном в темных тонах, который идеально подходит для сайта портфолио, ориентированного на демонстрацию фотографий. Это довольно простой урок, подготовленный с целью показать некоторые замечательные приемы, которые вы могли бы использовать для своих текущих разработок в области web дизайна.

Иллюстрация конечного результата

Кликнув на изображении, вы увидите дизайн web страницы в полном размере.
Скриншот 1

Ресурсы для урока

Шаг1: Подготовка документа в Photoshop

Создайте в Photoshop новый файл (Ctrl/Cmd + N) с размерами 1200 х 910 px.

Скриншот 2

Шаг 2: Подключение системы сеток 960 Grid

Каркас нашего макета мы сделаем на основе 16-ти колоночного варианта системы сеток 960 grid. Вы можете бесплатно скачать PSD шаблон на этом сайте http://960.gs/. Скачав файл, откройте его в Photoshop и перенесите на ваш холст. Не забудьте расположить этот слой сетки на самом верху в панели слоев, так он нам понадобится нам в качестве трафарета для выравнивания элементов дизайна макета.

Скриншот 3

Шаг 3: Создание фона макета

Спрячьте пока шаблон сетки и создайте под ним новый слой. На панели инструментов выберите в качестве основного коричнево-оранжевый цвет (#bc7821), а для фона темно-коричневый (#362a21).
Возьмите Gradient Tool (Градиент), (G) и, выбрав радиальный тип (Radial Gradient), создайте градиент в центре холста.

Скриншот 4

Градиент выглядит немного плоским, поэтому давайте добавим ему кое-какую текстуру. Перейдите в Filter > Convert for Smart (Фильтр > Преобразовать для смарт-фильтров). Сделав это, мы сможем при необходимости изменять настройки фильтров, которые будут применяться к этому слою позже, а сейчас давайте добавим этому градиенту немного шума, перейдя в Filter > Noise > Add Noise (Фильтр > Шум > Добавить шум).

Скриншот 5

Давайте усилим свечение в верхней части нашего фона. Возьмите мягкую кисть (Brush Tool), (B) с главным диаметром около 700 px и выберите первым белый цвет.
Создайте новый слой над фоном и сделайте кистью мазок, щелкнув один раз на холсте.

Скриншот 6

Измените для этого слоя Blend Mode (Режим смешивания) на Overlay (Перекрытие) и задайте Opacity (Непрозрачность) 34%.

Скриншот 7

Откройте в Photoshop текстуру ржавчины "Rust Texture", включенную в список предложенных ресурсов урока. Перенесите изображение на свой холст и, включив Free Transform (Свободное трансформирование), (Ctrl/Cmd + T), измените размер текстуры, сделав ее немного меньше холста.
Выбрав обычную, мягкую, круглую кисть с размытыми краями отпечатка, слегка сотрите ластиком (Eraser Tool), (E) по бокам и нижнюю часть холста. Как альтернативный вариант, вы можете использовать маску слоя, если не хотите, чтобы изменения остались необратимыми (что неизбежно в случае применения ластика).

Скриншот 8

Измените Blend Mode (Режим смешивания) "ржавой текстуры" на Overlay (Перекрытие) и уменьшите Opacity (Непрозрачность) до 16%.

Скриншот 9

Далее откройте в Photoshop текстуру поцарапанного металла "Scratched Metal" и также перенесите ее на свой холст, а затем слегка сотрите по бокам и в нижней части. Режим наложения (Blending Mode) этого слоя измените на Multiply (Умножение) и уменьшите Opacity (Непрозрачность) до 15%.

Скриншот 10

Шаг 4: Добавляем название сайта

Включите видимость слоя сеток. Возьмите Type Tool (Горизонтальный текст), (T) и выберите шрифт ITC Avant Garde CE, или любой другой на свой вкус. Укажите для текста коричневый цвет с таким (#523117) кодом и напишите "JohnDoe Photography" (или свое название сайта) в верхней части макета по центру.

Скриншот 11

Скопируйте текстовый слой и, выбрав для дубликата белый (#ffffff) цвет, измените Blend Mode (Режим смешивания) на Overlay (Перекрытие) и установите Opacity (Непрозрачность) на 32%. Затем с помощью инструмента Move Tool (Перемещение), (V) в комбинации с клавишей "стрелка вниз" сдвиньте копию на 1px вниз. Этот прием создаст некий эффект вытравленного текста.

Скриншот 12

Шаг 5: Создание меню навигации

Создайте новый слой. Включите Horizontal Type Tool (Горизонтальный текст) и напишите с указанными ниже параметрами шрифта текст навигации, расположив его под названием сайта и выровняв по центру холста.

Скриншот 13
Скриншот 14

Давайте теперь придумаем, как будет выглядеть каждый элемент навигации при наведении курсора. Включите Rounded Rectangle Tool (Прямоугольник со скругленными углами), (U), выберите на панели настроек Shape Layers (Слой-фигура) и Radius (Радиус закругления) 30 px. Нарисуйте на новом слое скругленный прямоугольник под ссылкой меню с названием "Home".

Скриншот 15

Далее кликните дважды на миниатюре фигуры в палитре слоев, чтобы вызвать диалоговое окно Layer Style (Стиль слоя), и примените к скругленному прямоугольнику эффекты Color Overlay (Наложение цвета) и Inner Shadow (Внутренняя тень).
Color Overlay (Наложение цвета)
Выберите желтый цвет (#f9a81f).

Скриншот 16

Inner Shadow (Внутренняя тень)
Укажите в настройках черный цвет (#000000).

Скриншот 17

Непрозрачность (Opacity) слоя скругленного прямоугольника уменьшите до 30%, чтобы через него слегка просвечивался наш фон.

Скриншот 18

Давайте придадим нашему "округлому прямоугольнику" более рельефный вид. Выделите на холсте контур фигуры, кликнув на ее миниатюре в палитре слоев с нажатой клавишей Ctrl/Cmd.
Создав новый слой, перейдите в Edit > Stroke (Редактирование > Обводка).

Скриншот 19

Измените Blend Mode (Режим смешивания) на Overlay (Перекрытие) и установите Opacity (Непрозрачность) на 18%. Сотрите обводку слева и сверху, выбрав для этого Eraser Tool (Ластик), (E) с мягкой кистью маленького размера.

Скриншот 20

Вторая часть урока →

Комментарии

captcha
 19 апр. 2014 Ответить

We need more things like this in this thread.


Советы по настройке онлайн-календаря под себя Советы по настройке онлайн-календаря
Что такое облачное хранилище и как им пользоваться? Что такое облачное хранилище и как им пользоваться?
Как выбрать пластины для теплообменника? Пластины для теплообменника
Изучение языка ECMAScript: основа современной веб-разработки История языка ECMAScript
Как добавить комментарий в HTML? HTML примеры
Apple позволит разработчикам распространять приложения напрямую с их сайтов Apple позволит разработчикам распространять приложения напрямую с их сайтов
jQuery 4.0 сокращает поддержку браузеров, удаляет API Новое в jQuery 4.0
Как продвинуть Telegram-канал: с нуля до результата Как продвинуть канал в Telegram с нуля?
Получить IT профессию с нуля: академия Eduson Получить IT профессию с нуля
Перспективы эволюции SEO: встречайте будущее продвижения в поисковых системах Будущее SEO-продвижения
Создание сайтов в Алматы: агентство site-promote.kz Разработка сайта компании
Антипкин Михаил Сергеевич о метавселенной, открывающей безграничные возможности для инноваций и экспериментов Антипкин Михаил Сергеевич о метавселенной
Сёрфинг с браузером FraudFox: исчерпывающее руководство Сёрфинг с браузером FraudFox
Где найти лицензионные ключи активации к ПО? Где найти лицензионные ключи активации к ПО?
Курсы веб дизайна: обучение онлайн Курсы веб дизайна: обучение онлайн
Как продлить срок службы бытовой техники? Как продлить срок службы бытовой техники?
Основы VPS/VDS: что нужно знать перед арендой? Основы VPS/VDS: что нужно знать перед арендой?
Откройте для себя азарт Mostbet KZ - ведущего онлайн-казино для геймеров Откройте для себя азарт Mostbet KZ - ведущего онлайн-казино для геймеров
Топ-10 игр для Android стоимостью менее $5 Топ-10 игр для Android стоимостью менее $5
Проверка авто в базе ГИБДД перед покупкой Проверка авто в базе ГИБДД перед покупкой