3,368 views

In today’s tip from the quick tips series, we’ll learn how to create a simple Colour Picker UI you can use in an app design or a web design. Let's start this Photoshop Tutorial.

By Supercolor, on September 28, 2012, under Photoshop Tutorials

Final Result Preview

 

Step 1 – THE New Document and Background

Let’s Start by opening Photoshop and create a new document, I choose 500x500px with a transparent background. Next fill the background with a dark grey colour, I used #373737.

 

Step 2 – Colours

Select the Rectangle Tool (U) and create a rectangle shape, I did 75x400px, rename this layer Color, then duplicate it, move the new one on the right and rename it B&W (Black and White).

 

We’ll work on the Color layer in this step, select back this layer and apply a few layer styles to add the colour and shadows.

 

Step 3 – B&W

Now we have the colours let’s do the black and white section, like before let’s add some layer styles to the rectangle shape:

 

Step 4 – Selection Tools

In order to select the colours or the tones in this color picker let’s create the selection tools using some shapes and effects. Create a new layer, select the Ellipse Tool (U) and create a perfect circle shape. Next we’ll modify this shape using the Direct Selection Tool (A), select the left anchor point on the circle shape with this tool and pull it a little on the left, then while holding the Alt key pull both direction point towards the anchor point. When that’s done resize the shape if it needs to.

 

Next select the Elliptical Marquee Tool (M) and create a small circle selection in the centre of the round part of the shape, create a layer mask on the shape with this selection.

 

Step 5 – Effect on Selection Tool

In this step we’ll add some effects to give it reflection and a more realistic feel using a few layer styles.

 

When you like the result, duplicate the modified shape and place the new one the B&W section.

 

That’s it for today’s tip, I hope you’ve learned a few tricks and techniques; maybe you’ll use it for your next website. Feel free to leave us a comment or share your creations.