Уроки фотошопа, графика, дизайн
arrow

Как сделать фон для сайта

 

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

Созданный нами фон для сайта будет выглядеть таким образом:

фон для сайта

Давайте приступим!

Как сделать фон для сайта: линии

1.Создайте новое изображение произвольного размера (при выборе исходите из размера, который нужен вам для фона сайта, я выбрал 1280x1024x) и залейте его чёрным цветом (инструмент Paint Bucket Tool (Заливка)).

2. Возьмите инструмент Line Tool (U) белого цвета с такими параметрами:

фон для сайта

И проведите линию из правого нижнего угла в левый верхний:

фон для сайта

3.Растеризуйте линию (правой кнопкой мыши -> Rasterize). Затем создайте копию слоя (Ctrl+J) и нажмите Ctrl+T, появится рамка свободной трансформации. А сейчас внимание — один из ключевых моментов нашей работы: переместите ось вращения на правый нижний угол рамки:

фон для сайта

фон для сайта

Это делается для того, чтобы вращение (и любые другие трансформации) объекта производилось относительно этой точки, а не относительно центра, как установлено по стандарту.

Итак, ось вращения перемещена, теперь нужно повернуть линию на 1 градус, делается это так:

фон для сайта

фон для сайта

Смещение выполнено, теперь нажмите Enter для применения трансформации.

4. Слейте 2 слоя с линиями (Ctrl+E), затем клонируйте получившийся слой (Ctrl+J) и вновь выполните вращение, но уже на 2 градуса (не забывайте перемешать ось):

фон для сайта

5. Проделайте ещё раз те же самые действия (слейте слои, затем дублируйте их и вращайте, но уже на 4 градуса). Должно получиться следующее:

фон для сайта

6. И ещё раз сделайте тоже самое, только теперь вращение на -8 градусов.

Как сделать фон для сайта: витраж и цвета

7. Теперь возьмите инструмент Polygonal Lasso Tool (L), и сделайте выделение вокруг пучка линий:

фон для сайта

Создайте новый слой (Shift+Ctrl+N) и залейте его чёрным цветом:

фон для сайта

А теперь примените Filter (Фильтр) -> Render (Визуализация) -> Difference Clouds (Облака):

фон для сайта

Не снимая выделения Filter -> Texture (Текстура) -> Stained Glass (Витражное стекло):

фон для сайта

8. По прежнему оставляем выделение, создаём новый слой, берем градиент (Gradient Tool), выбираем градиент радугу (или любой другой, который вам понравится) и заливаем таким образом:

фон для сайта

Для слоя с градиентом устанавливаем режим наложения Overlay и  Opacity (Непрозачность) 52%, для витража — Screen и 40%. Для линий ставим непрозрачность на 57%:

фон для сайта

9. Осталось поработать немного с фоном: возьмите линейный градиент с цветами #000210 и #11005b и выполните заливку, чтобы получилось нечто похожее:

фон для сайта

фон для сайта

10. Создайте новый слой, залейте его чёрным цветом и примените уже знакомый Filter -> Render  -> Difference Clouds, а затем Filter -> Texture -> Stained Glass с такими параметрами:

фон для сайта

Режим смешивания поставьте Overlay, Opacity 42%:

фон для сайта

Вот такой фон для сайта получился в результате:

фон для сайта

На этом урок photoshop урок «как сделать фон для сайта» закончен. Я показал лишь способ, дайте волю своей фантазии, и получите замечательные результаты. К примеру, вот мой эксперимент:

Art Wallaper

Я прощаюсь с вами до следующего урока photoshop и желаю вам успехов. Не забывайте также оставлять комментарии и нажимать на социальные кнопки.

M@X
Веб-дизайнер, основатель проекта psforce.ru и студии веб-дизайна Disarto.

Оставить комментарий

Имя: *

Сообщение: