Photoshop Tutorial: Coloured Bars Background Design

September 30, 2010

Designers often need to come up with different background designs that they can use in their website designs, their business card designs or any other graphic design work that they may be doing. Today, I want to teach you a quick and easy technique for adding coloured bars to your background designs. This is an intermediate Photoshop tutorial that will teach you how to use filters and gradients. Simply follow the steps outlined below, watch the instructional video and most importantly, have fun!

Here is the background with coloured bars that we are going to create:

Coloured Bars Background

Step 1: The Set Up

Open Adobe Photoshop and create a new document with a transparent background that is 900px by 600px. In the main menu, go to Edit -> Fill.... -> Use: black to fill the layer with black. Create a new layer. In the main menu, go to Edit -> Fill... -> Use: white to fill this layer with white.

Step 2: Adding Filters

In the main menu, go to Filter -> Render -> Fibers. Set the Variance to 45px and the Strength to 4px. Click OK. Next, go to Filter (yes, again) ->Blur -> Motion Blur... Set the angle to 90 and the Distance to 999px. Click OK.

Step 3: Adding a Gradient Overlay

Go to Layer -> Layer Style -> Gradient Overlay. Set the Blend Mode to Overlay, select the Preset Rainbow Gradient and set the Angle to 0.  Convert the layer to a Smart Object. You can do this by either going to Layer ->Smart Objects -> Convert to Smart Object or by holding down the Control key on a Mac and clicking once on the layer.

Step 4: Adding Another Filter

Duplicate the layer that you just converted into a Smart Object. Go to Filter -> Other -> High Pass and set the Radius to 10px. Click OK. Set the Blend Mode to Overlay.

Step 5: Merging Layers

Hide the black background layer. Merge the two remaining visible layers. To do this, go to Layer -> Merge Visible or by holding down the Control key on a Mac, clicking once on the layer and selecting Merge Visible. Once this is done, make the black background layer visible again.

Step 6: Adding a Mask

Add a layer mask to the layer with the coloured bars selected. To do this, go to Layer -> Layer Mask -> Reveal All. Make sure that your foreground colour is set to white and that your background colour is set to black. Select your Gradient Tool (G). Adjust your gradient so that it is set to the standard Foreground ot Background, White to Black. Drag out your gradient from the top of your design to about halfway down your stage. That's it!

Here is a video to help guide you through the steps:

Also in Pixellogo blog archive

Adobe launches Document Cloud, Acrobat Mobile and Fill & Sign Apps

March 19, 2015

Adobe is one of those great companies out there that is constantly pushing the envelop, testing new ideas and reinventing the way that we interact with technology and our environment. The people at Adobe are ambitious, creative and inventive. The newly unveiled Document Cloud by Adobe is a testament to this fact. Adobe has done it again and this time with Document Cloud, they are...

Read More

6 Free Color Resources for Logo, Graphic and Web Designers

March 06, 2015

Color is very important in every project. Designers use color to captivate their audience, convey emotions and establish associations. Color is often what attracts users to a design and it is a vital component in every design. Color excites us, stimulates us and draws in our eyes. Color is everywhere and it subtly moves us every day.

Designers are very aware of the power of color....

Read More

20 Creative & Inspiring Workspaces

February 04, 2015

If you are a creative person then you definitely need a creative workspace. It is important that you have a very special sanctuary in which you can conduct your business. Your workspace should be inspiring and motivating. It should spur you to action, spark your imagination and and trigger originality. Your workspace should be personal and it should be...

Read More