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

Красивый фон в Photoshop

Приветствую вас, друзья. Появлялась ли у вас когда-нибудь мысль создать красивый фон для сайта или очередной работы в photoshop? Уверен, что появлялась. В сегодняшнем уроке вы узнаете, как сделать фон в photoshop. Способ, который я покажу довольно прост, но при этом фон получится красивый и стильный.

Красивый фон в фотошопе

Красивый фон в Photoshop

1. Создайте новый документ (размер 1280x1024px), залейте его чёрным.

2. Возьмите инструмент Pen Tool (клавиша P), и с его помощью сделайте такой путь:

Красивый фон в фотошопе

3. Теперь образуйте новый слой (Shift + Ctrl + N), возьмите кисть (инструмент Brush) размером 9px, цвет установите #074d7a. Вновь перейдите к Pen Tool (P), кликните правой кнопкой мыши по недавно нарисованному пути, и выберите Stroke Path:

Красивый фон в фотошопе

Выберите из списка Brush Tool (Кисть) и нажмите ОК:

Красивый фон в фотошопе

4. Удалите путь, созданный с помощью Pen Tool (дабы не мешался). Для этого перейдите в во вкладку Paths (Пути) в панели слоёв. А теперь возьмите чёрно белый градиент со следующими настройками:

Красивый фон в фотошопе

Сформируйте маску слоя: Layer -> Layer Mask -> Reveal All и выполните заливку градиентом примерно таким образом:

Красивый фон в фотошопе

Будущий красивый фон на данном этапе должен выглядеть примерно так:

Красивый фон в фотошопе

Красивый фон в Photoshop: творческая часть

5. Закрепите маску: Layer -> Layer Mask -> Apply и создайте копию слоя (Правой кнопкой мыши по нему и Duplicate Layer):

Красивый фон в фотошопе

6. Нажмите сочетание клавиш Ctrl + T (свободная трансфомация), нажмите правой кнопкой мыши внутри появившейся рамки, выберите Rotate (Повернуть), и разверните изображение:

Красивый фон в фотошопе

Теперь переместите изображение (с помощью инструмента Move Tool) чуть ниже. После этих нехитрых манипуляций вы должны получить похожую картину:

Красивый фон в фотошопе

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

Красивый фон в фотошопе

8. Сейчас ваша задача продолжать сплетать линии таким образом, чтобы получался красивый абстрактный фон. Для облечения задачи, соединяйте (Ctrl + E) некоторые линии, и работайте уже не с одной линией на слое, а с группой линий на слое. (Если у вас возникают трудности при работе со слоями, рекомендую прочитать урок Photoshop слои):

Красивый фон в фотошопе

Используйте по максимуму инструменты из вкладки Edit -> Transform. Например, я несколько раз использовал Edit -> Transform -> Flip Vertical (Отражение по вертикали). Уменьшайте также непрозрачность некоторых слоёв, это придаст фону глубину:

Красивый фон в фотошопе

Сейчас ваш результат может быть похож на мой, а может и весьма сильно отличаться. Вот что получилось у меня:

Красивый фон в фотошопе

Красивый фон в Photoshop: прорабатываем детали

9. На этом этапе мы будем добавлять к красивому фону в Photoshop мелкие детали. В первую очередь займёмся созданием световых эффектов, они сделают фон для сайта намного красивее.

Возьмите кисть размером 20px, жёсткостью 70% и значением Flow (нажим) 40%:

Красивый фон в фотошопе

Нажмите F5 (Настройки кисти) и установите всё, как на изображениях ниже:

Красивый фон в фотошопе

Красивый фон в фотошопе

Красивый фон в фотошопе

10. На новом слое с параметрами смешивания Linear Dodge (Add) нарисуйте только что созданной кистью круги (Советую использовать разные цвета, преимущественно голубой и зеленый):

Красивый фон в фотошопе

11. Примените Filter (Фильтр) -> Sharpen (Заострение) -> Sharpen (Заострение) 4 раза (используйте Ctrl + F для повторного применения фильтра):

Красивый фон в фотошопе

12. Создайте ещё один слой, и проделайте тоже самое, но уже с кистью размером 10px:

Красивый фон в фотошопе

Красивый фон в Photoshop: финальные шрихи

Итак, красивый фон, созданный в Photoshop почти готов. Осталось совсем немного.

13. Изображение сейчас выглядит скучно, поэтому давайте поиграем немного с цветами. Выберите любой слой с линиями и дважды кликните по нему левой кнопкой мыши. Откроется окно Layer Style, перейдите во вкладку Color Overlay (Заливка цветом), установите параметр Blend Mode (Режим смешивания) на Screen (Экран), непрозрачность понизьте до 44% и поменяйте цвет на тот, какой вам больше понравится (я использовал #6596f8):

Красивый фон в фотошопе

Аналогичные операции проведите для некоторых других слоёв. У меня получился вот такой красивый фон:

Красивый фон в фотошопе

14. Объедините все слои с линиями (блики не трогайте): выделите их и нажмите Ctrl + E. Создайте копию этого слоя (правой кнопкой мыши по нему и Duplicate Layer). Теперь примените Filter -> Blur -> Gaussian Blur со значением Radius 5,5px. Режим смешивания установите Screen, непрозрачность 70%.

Красивый фон в фотошопе

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

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

Комментарии (12)

  1. Александра:

    У меня не получается с 3 пункта. 100 раз пробовала, переделывала. Контур исчезает и всё.

    • M@X M@X:

      Если исчезает, его можно легко вернуть, найдя на панели Paths (Пути):

      Решение проблемы с путями

      А затем можно выполнять всё как описано в уроке.

  2. Александра:

    но у меня в Путях ничего нет.
    и в слоях у меня не только Задний план и Слой 1.

    • M@X M@X:

      А что ещё? Тогда распишите подробнее, как именно создаёте путь инструментом Pen Tool.

  3. Александра:

    сначала внизу рисую линию, потом сверху, там появляется эта кривая, которая соединяет, и получается точно так, как на примере
    создаю новый слой, выбираю кисть, цвет, перехожу обратно к Pen Tool, нажимаю на правую кнопку мыши и все действия серые (т.е. не доступны)
    + не виден контур пути, на который нужно нажимать

    • M@X M@X:

      Если контур не виден, значит вы его не создали. И очень странно, почему вы рисуете линиями? Работа с Pen Tool — эта рисование по точкам. Ставите одну точку, затем вторую, и эти 2 точки соединяются линией: это и есть путь.
      Можете в принципе заранее создать новый слой, выбрать нужную кисть и т.д. А затем, создав контур, сразу же кликнуть по нему правой кнопкой мыши.

  4. Александра:

    а как нарисовать верхний путь?
    когда я ставлю точку сверху, не получается изогнутая линия.

    • M@X M@X:

      Для этого есть инструмент угол, вот он:
      Конвертировать контрольную точку
      Выбираете его, кликаете левой кнопкой мыши по точке, удерживаете левую кнопку мыши нажатой и ведёте в сторону. При этом путь вокруг этой точки будет изгибаться.
      Изогнутый путь
      Тоже самое можно делать прямо в процессе создания пути, когда ставите очередную точку, просто удержите кнопку нажатой и отведите курсор в сторону.

  5. Александра:

    всё равно не получается

  6. Александра:

    а где он?

  7. Александра:

    нашла)

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

Имя: *

Сообщение: