Create an Abstract Geometric Gradient Background with Photoshop

Create an Abstract Geometric Gradient Background with Photoshop

Unique effect for website headers and app splash screens

This tutorial will show you the process behind creating one of our most popular recent freebies on Medialoot, the Geometric Gradient Backgrounds pack. This technique uses vector shape layers, layer styles and of course gradients to create a stunning abstract background.

Step 1

Launch Photoshop and create a new 3000 x 3000 pixel document. The size of the document can be changed depending on your intended use. how to make an abstract geometric gradient background

Step 2

Create a new Gradient Fill layer for the background with three stops, #9e7cd1 at 0%, #ed8dba at 50% and #edad91 at 100%. how to make an abstract geometric gradient background

Step 3

Draw a white oval shape using the Ellipse tool from the top of the canvas to the bottom and align it horizontally with the center of the canvas. how to make an abstract geometric gradient background

Step 4

Double click the oval shape to bring up the Blending Options, set the Blend Mode to Soft Light, Opacity to 50% and Fill Opacity to 75%. This will allow us to use a white stroke which is slightly more visible than the fill. how to make an abstract geometric gradient background Add a white stroke, set the size to 3 pixels, Position Outside and Blend Mode Soft Light. The effect is subtle but will become more visible as we add more layers to the composition. how to make an abstract geometric gradient background how to make an abstract geometric gradient background

Step 5

Duplicate the oval shape and rotate it 60° around the center. how to make an abstract geometric gradient background And repeat once more. how to make an abstract geometric gradient background

Step 6

Group all 3 oval shapes together (CMD+G or CTRL+G) and set the Opacity of the group to 50% how to make an abstract geometric gradient background

Step 7

Duplicate the group and rotate it 30°. how to make an abstract geometric gradient background

Step 8

Now duplicate all 6 oval shapes and put them in a new group with 75% Opacity. how to make an abstract geometric gradient background

Step 9

Resize the new group whilst holding down the shift key to constrain proportions. Reduce the overall size to approximately 65% or to where the points shown below intersect. how to make an abstract geometric gradient background how to make an abstract geometric gradient background

Step 10

Duplicate the top group. how to make an abstract geometric gradient background Select each of the oval shapes in the new group and change their fill colors to black, then set their Opacity to 10% and Fill to 75%. how to make an abstract geometric gradient background

Step 11

For a final touch, lets add a bit of noise. Create a new blank layer and fill it with white. how to make an abstract geometric gradient background Optionally, you can tidy up the layers panel by creating a new group for the noise layer and also grouping the existing layers together. how to make an abstract geometric gradient background

Step 12

With the Noise layer selected, go to Filter > Noise > Add Noise.. and enter 200% for the Amount, Gaussian for Distribution and check the Monochromatic option. how to make an abstract geometric gradient background

Step 13

Set the Blend Mode of the Noise layer to Soft Light and the Opacity to 20%. This will make the noise effect more subtle. how to make an abstract geometric gradient background

Result & Variations

Here is the final result, you can now play around with it and tweak the colors if desired. how to make an abstract geometric gradient background The feel of the whole image can be changed by simply updating the background gradient layer. Here are a few examples: how to make an abstract geometric gradient background how to make an abstract geometric gradient background how to make an abstract geometric gradient background

Download Geometric Gradient Backgrounds

geometric gradient backgrounds These free backgrounds combine vivid gradients and abstract geometric overlays for a unique effect. They are great for use in website headers, app splash screens and other backgrounds. Included in the pack are 8 high resolution (3000x3000px) JPG files.

Comments

X

You've successfully logged in!