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

Multi-layer Background for Your Website
Вы интересуетесь веб-дизайном? Я покажу вам, как сделать многослойный фон для вашего сайта.
Очевидно, что первое, что мы должны сделать, это создать новый документ. Для этого урока я использую не очень большой размер 1000 ? 700 пикселей. Затем заполните холст черным цветом. После этого мы будем создавать фон Шаг за шагом.
Multi-layer Background Image 01
Теперь создаем новый слой, после чего взять Прямоугольную область Rectangular Marquee Tool и сделать выделение как показано на картинке ниже и заполните его цветом # 302f13:
Multi-layer Background Image 02
Снимите выделение Ctrl+D и применить Фильтр>Шум Noise>Добавить шум Add Noise с низкими параметрами:
Multi-layer Background Image 03
Ваше изображение должно выглядеть как у меня:
Multi-layer Background Image 04
После этого применяется Внутренняя тень стиля слоя к этому слою:
Multi-layer Background Image 05
Multi-layer Background Image 06
Теперь скопируйте этот слой CTRL + J и переместите его вниз, после чего действие изменения угла Внутренняя тень от -90 до +90 градусов:
Multi-layer Background Image 07
Ок, давайте делать дальше шаги в создании нашего сайта фон. Выберите Прямоугольную область Rectangular Marquee Tool вновь и сделать выделение около половины оставшихся в черном поле, а затем создать новый слой и заполните ее с цветами 2a400f # и # 1a2f06.
Multi-layer Background Image 08
Теперь я хотел бы внести некоторые  градиентной линии. Для этого создайте новый документ размером 3 ? 3 пикселей и сделать косую линию с помощью Карандаша Pencil Tool как показано на картинке ниже:
Multi-layer Background Image 09
Затем перейдите в Редактирование-Определить узор Edit> Define Pattern и сохранить его как шаблон. После этого вернемся к нашему основному документу и применить Перекрытие узором Pattern Overlay стиля слоя, чтобы получить следующее фото:
Multi-layer Background Image 10
Multi-layer Background Image 11
Теперь выберите снова Rectangular Marquee Tool и выберите оставшуюся часть черного фона, затем создайте новый слой и заполните его градиентом, используя цвет 374a20 # и # 1a2d08.
Multi-layer Background Image 12
Я думаю, мы должны добавить пару строк на второй план. Теперь выйти Горизонтальная строка Single Row Marquee Tool, Создать новый слой и заполните выделение черным цветом. Затем переместите выделение на один пиксель ниже и заполните его белым цветом. Жмём Ctrl + D чтобы отменить выделение и изменение прозрачности слоя 20%.
Multi-layer Background Image 13
Добавить еще одну линию в нижней части области коричневый фон.
Multi-layer Background Image 14
!
Multi-layer Background Image 15
Теперь нам нужно добавить окно, чтобы закончить фон сайт . Создадим новый слой. Теперь взять Закруглённый прямоугольник Rounded Rectangle Tool, Созданная радиусом около 10 пикселей и нарисуйте прямоугольник с закругленными углами на свой холст, то это будет в главном окне.
Multi-layer Background Image 16
При необходимости Вы можете применить Тень,Внешнее и внутреннее свечение и Обводку Drop Shadow, Outer Glow, Inner Glow, Gradient Overlay и Обводка  стили слоя к этому слою:
Multi-layer Background Image 17
Multi-layer Background Image 18
Multi-layer Background Image 19
Multi-layer Background Image 20
Multi-layer Background Image 21
Multi-layer Background Image 22
Чтобы закончить фон мы должны добавить вертикальные темные линии с левой и правой стороны холста . Теперь создаем новый слой, после чего активировать Инструмент градиента – черный с прозрачным градиентом, заполнить в рабочей области, как показано на картинке ниже:
Multi-layer Background Image 23
Мы сделали  многослойным фон сайта. Надеюсь, что это руководство было полезным для вас.
Multi-layer Background Image 24.
Перевод: swaego



Случайный пост Оставить комментарий