![]() |
Уроки Photoshop. Графика для сайта. Сайт в виде школьной доски в ФотошопИсточник: photoshop-master Руслан Гильзидинов
В этом уроке Photoshop вы узнаете, как сделать уникальный и достаточно оригинальный макет под WP в стиле школьной доски. Для скачивания доступен PSD конечного результата - это должно помочь вам. Вот что у нас должно получиться в итоге: Материал, который нам пригодится:
Давайте приступим. Шаг 1Первое, что мы сделаем - мы создадим новый документ со следующими параметрами: ![]() Шаг 2В этом шаблоне фон будет темным, поэтому заливаем фон цветом #1C1C1C с помощью инструмента Paint Bucket Tool Шаг 3Создадим новый слой поверх фонового слоя и назовем его "Background Texture". Заливаем его тем же цветом. Мы добавим немного шума, для этого жмем Filter > Noise > Add Noise (Фильтр > Шум > Добавить шум) и, выставив следующие настройки, жмем ОК. ![]() После этого снижаем непрозрачность слоя до 30%. Шаг 4Самое время начать работу над шапкой. Для логотипа я использовал шрифт Eraser (выше я выложил ссылку на него) цветом #FFFFFF. Позади текстового слоя создадим некую "иллюзию мела". Выберите следующую кисть: ![]() Шаг 5Используя цвет #000000, нарисуйте что-то подобное на специально созданном для этого слое (вам нужно создать новый) и снизьте непрозрачность нового слоя до 20%. ![]() Шаг 6Для навигационного меню в шапке я использовал шрифт Chalkboard. Для активной ссылки выберем цвет #272727, для неактивной ссылки - пусть будет #FFFFFF. Сзади активной ссылки нарисуем небольшой мазок той же кистью, которой мы пользовались в предыдущем шаге, как показано на рисунке. ![]() Шаг 7Перейдем к созданию блока основного контента. Используя Rectangle Marquee Tool ![]() Шаг 8Теперь нам нужно дублировать новоиспеченный слой и выделить его, зажав Ctrl+J. Переименовываем дубликат в "Noise" и применяем к нему шум, который мы использовали в третьем шаге. Меняем режим наложения на Lighten (Осветление) и понижаем непрозрачность до 40%. Шаг 9Теперь вернемся к слою "Green Back" и применим к нему следующие настройки слоя: ![]() ![]() ![]() Шаг 10У вас должно получиться что-то подобное: ![]() Шаг 11Теперь приступим к созданию рамки нашей доски. Для этого создаем выделение, как показано на рисунке, с боку доски, используя Rectangle Marquee Tool ![]() Шаг 12Теперь нам нужно добавить текстуру. Жмем Filter > Render > Fibers (Фильтр > Стилизация > Волокна) и выставляем параметр Variance (Отклонение) на 11 и параметр Strength (Интенсивность) на 28. ![]() Шаг 13Очевидно, что рамка не должна быть белой. Поэтому жмем Ctrl+U и в появившейся панели выставляем следующие параметры: ![]() Шаг 14Наша рамка выглядит немного плоской - мы это исправим, применив следующие настройки для стилей слоя: ![]() ![]() Шаг 15У вас должно получиться что-то вроде этого: ![]() Шаг 16Повторите предыдущие шаги для остальных сторон и получите что-то подобное. Однако удостоверьтесь, что слои с боковыми сторонами рамки лежат поверх слоев со слоями верхней и нижней рамки - это важно. ![]() ![]() Шаг 17С рамкой мы закончили! Чтобы сделать меню категорий, мы должны добавить текст в следующем стиле. Для активной ссылки "Graphics" я использовал цвет #EEE2D5, для неактивных ссылок - #D8C0A8. ![]() Шаг 18На фон активной ссылки добавим небольшое поле, используя Rounded Rectangle ![]() Шаг 19Непрозрачность заливки снизим до 50% и поменяем режим наложения на Soft Light (Мягкий свет). Также применим следующие настройки для стилей слоя: ![]() Шаг 20Если у вас получилось что-то подобное - значит, все готово. ![]() Шаг 21Теперь поработаем с левой частью контента. Создадим небольшую надпись для заголовка, написав, например, "Latest Articles". Я использовал шрифт "Georgia". Для создания "иллюзии размытого мела", используем ту же технику, что и в четвертом шаге. Лучше использовать белый цвет, но вы можете и поэкспериментировать. Снижаем непрозрачность слоя до 7%. ![]() Шаг 22 ![]() Шаг 23 ![]() Шаг 24Дублируем первую картинку и все примочки к ней и множим, меняя фон: ![]() Шаг 25Используя Rectangle Marquee Tool ![]() Шаг 26Теперь жмем Filter > Blur > Motion Blur (Фильтр > Имитация > Размытие в движении). Ставим угол -90 градусов и значение 120рх - получится что-то такое: ![]() Шаг 27Теперь понижаем непрозрачность слоя до 50% и меняем режим наложения на Soft Light (Мягкий свет). Снова выделяем прямоугольную область, на это раз справа, как показано на рисунке и заливаем цветом #000000. ![]() Шаг 28Понижаем непрозрачность слоя до 30% и меняем режим наложения на Soft Light (Мягкий свет). Шаг 29Для заголовков сайдбаров используем тот же эффект, что и в шаге 21. Тот же шрифт и те же настройки: ![]() Шаг 30Для заголовка поиска делаем то же самое. Все, что я сделал для самого поля поиска, я взял кисть Chalk и поставил горизонтальный мазок, как на рисунке. Для цвета используем #515151. ![]() Шаг 31Последнее, что нам предстоит сделать для сайдбара - это добавить иконки социальных сетей. Иконки вы можете найти в самом верху урока - я давал на них ссылки. Единственное - нам нужно будет наложить сверху белый цвет, дабы они стали белыми. Для мела вверху снова используем кисть Chalk. ![]() Шаг 32Последний шаг до того, как наш макет будет готов, это создание футера или подавала. Убедитесь, что все эти слои расположены под всем остальным, кроме слоев фона. Создайте выделение внизу и залейте его цветом #000000. ![]() Шаг 33Понижаем значение непрозрачности до 18% и добавляем немного текста: ![]() Готово! ![]() Источник: devisefunction.com Перевёл: Руслан Гильзидинов |