Recently we posted a tutorial on how to build your own Javascript color picker. That tutorial uses a semi-transparent gradient image for choosing colors. This tutorial will go through all the steps required to create the gradient image using Photoshop.

Here’s what we’re going to create with a red background.

The image is created by using two black and white gradient images with two gradient transparencies going in different directions. Let’s start by creating the black and white gradients. First create a new image with your desired size. I chose 200×200 for my image. The color picker tutorial uses a 256×256 image.



Using the gradient tool, draw a black to white gradient across the entire width of the image.



Here’s what the image looks like now:



We need two layers of this gradient, so now just duplicate the layer you applied this gradient to.



Now that we have our gradients, we need to apply the transparency. We’re going to use Layer Masks to do this. A layer mask is a way to control the level of transparency applied to a layer. White areas on the mask are visible and black areas are invisible. All the values of gray in between correspond to a level of opacity. In case you don’t know where to button is to apply a layer mask, here it is:



You’re going to use the exact same gradient tool that was used to create the original gradients to create the layer masks. One mask will have to go from top to bottom and the other from right to left.



Once the layer masks are applied, the image is complete. Here’s the finished product.



There you have it, you’re now ready to save the image and use it for your very own Javascript color picker.