Красивый фон для веб-сайта

Статья для тех, кто хочет нарисовать в Photoshop красивый фон (background) для своего блога/сайта. Или как урок начинающему веб-дизайнеру.

Создайте новый документ размером 1000×700 пикселей и залейте его черным цветом:

Теперь создайте новый слой и используйте инструмент прямоугольного выделения (Rectangular Marquee Tool) а выделенную область залейте цветом #302f13 как на рисунке:

Далее выберите Filter > Noise > Add Noise with a low settings (добавить шум):

Должно получиться следующее:

Потом примените стиль слоя ‘Внутренняя Тень’ (Layer > Layer Style > Inner Shadow):

Теперь продублируйте этот слой Ctrl+J и переместите вниз, затем опять используйте стиль слоя ‘Внутренняя Тень’ (Layer > Layer Style > Inner Shadow), только параметр Угол (Angle) поверните с -90 до +90:

Выберите инструмент прямоугольного выделения (Rectangular Marquee Tool) снова и выделите остальную черную область, затем создайте новый слой и заполните его цветами #2a400f и #1a2f06:

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

Затем сохраните его как образец (Edit > Define Pattern). Вернитесь к исходному документу и примените стиль слоя Pattern Overlay:

Теперь используйте инструмент прямоугольного выделения (Rectangular Marquee Tool), выделите оставшуюся черную полосу и создайте новый слой. Закрасьте его с помощью инструмента ‘Градиент’ (Gradient), применяя цвета #374a20 и #1a2d08:

Теперь добавим горизонтальные границы между блоками цветов. Для этого используйте инструмент выделения двух строк (Single Row Marquee Tool). Один верхний пиксель по горизонтали залейте черным, второй снизу — белым. Задайте непрозрачность с помощью инструмента ‘стиль слоя’ 20 %:

Добавьте еще одну строку внизу коричневой области фона:

Почти все готово:

Теперь нам нужно добавлять окно, чтобы завершить фон для веб-сайта. Создайте новый слой. Теперь выберите инструмент выделения ‘Закругленный Прямоугольник’, установите радиус около 10 пикселей и сделайте закругленный прямоугольник на вашем холсте, это будет основным окном сайта:

Вы можете использовать для этого слоя стили Тень (Drop Shadow), Внешнего Свечения (Outer Glow), Внутреннего Свечения(Inner Glow), Градиент (Gradient Overlay) и Жесткость (Stroke):

Наконец, добавляем справа и слева вертикальные тени. Создаем новый слой и используем Градиент (Gradient Tool) цвета: черный -> прозрачный:

Окончательный результат: