Archive for June, 2010

Channel Palette and Layer Masking

Wednesday, June 9th, 2010

In this tutorial, we will be using Photoshop’s Channel Palette along with Layer Masking to learn an easy technique that can be used to remove the background from an image.

STEP 1: Find an image to use for the tutorial and open it up in Photoshop. This technique works best with an image that has a solid and/or clearly defined background. For this tutorial I used a stock image from sxc.hu which can be found here: http://www.sxc.hu/pic/l/c/co/colinbroug/1284789_21675104.jpg

STEP 2: Find the appropriate channel to use as a base for your mask. To do this, click on the Channels Palette, and look for the channel that separates the background from the foreground with the most contrast. In my example image, this happened to be the blue channel (because the background is completely blue).

STEP 3: Drag the “Blue” channel into the new channel button as shown below. This will make a new channel, “Blue copy”, which we will be using as a base for our mask.

STEP 4: In order to completely remove the background, yet keep the foreground intact, the background must be completely white and the foreground completely black. To do this, click on the “Blue copy” channel, then bring up the Levels tool (CTRL + L) and move the sliders around to make the background as white as possible, and the foreground as black as possible. When you are happy with the results, press OK.

STEP 5: Brush in any background areas that did not turn completely white with a soft white brush (#ffffff), and any foreground areas that did not turn completely black with a soft black brush (#000000).

Before:

After:

STEP 6: Click on the RGB Channel in the Channels Palette to display all of the channels, then hide the “Blue copy” channel.

STEP 7: Load your new “Blue copy” channel as a selection by clicking “Load Selection” under the Selection Menu. Be sure to check off the Invert option.

STEP 8: Now that you have loaded your selection, click the layer that your image was placed on from the Layers Palette, then press the Add Layer Mask button. Your background should now be transparent.

STEP 9: At this point, the only thing left to do is to add your own custom background image. I have added a winter scene to the background in my example below (also found on sxc.hu):

Tags: , , , ,
Posted in Layers | No Comments »

Making a Seamless Background for a Website

Sunday, June 6th, 2010

In this tutorial, you will learn how to create your own seamless background pattern, by making use of Photoshop’s Offset filter.

STEP 1: Open a new canvas in Photoshop, the canvas can be whatever size you would like, but it must be square. In the example we will be working with a 100x100px canvas.

STEP 2: Delete the background layer from the Layer’s Palette, and add a new layer (so that the background will be transparent).

STEP 3: Create the pattern. In my example I created a very simple pattern by using a hard Black Brush and varying the size and opacity.

TIP: Keep the pattern black & white/transparent so that you can easily color it with layer styles at a later time.

STEP 4: In order to actually use the above image as a pattern, you first need to make it seamless. The first step in doing this it to open of the “Offset” filter from the Filters > Other menu. In the Offset filter menu, change the Horizontal and Vertical offset to exactly 50% of your canvas width/height. In my 100x100px example, each of these would be set to 50. Also set the undefined areas to wrap around, and press OK.

Your image should now look like this:

STEP 5: Clean up the seams. Using the eraser, remove the unfinished parts of your pattern that run into each other at the ‘seams’ of your pattern.

Before                              After

STEP 6: The last step in creating the pattern, defining the image as a Pattern. From the Edit menu, click on “Define Pattern…”, and give it a name.

STEP 7: Using the pattern. To test your new pattern out, create a new canvass (any size will do), and from the Edit menu, choose “Fill…”, then choose your new pattern from the list of Custom Patterns, and press OK. That’s it! Your new pattern will also be available to be used in layer styles, which will allow you to change the size, color, transparency, etc. of your pattern. This same technique to small seamless patterns out of a large texture images as well.

Tags: , , , , ,
Posted in Websites | No Comments »

Create a Button for a Website

Thursday, June 3rd, 2010

In this tutorial, we will be using a few of Photoshop’s vector based tools along with layer styles to create a button perfect for use on the web.

STEP 1: Open a new 80x24px Canvas in Photoshop.


STEP 2: Click on the Rounded Rectangle Tool (Hotkey: U). Change the Radius to 6px in the Rounded Rectangle Options Toolbar, and draw a rounded rectangle that stretches from the top left corner to the bottom right corner of the canvas.

STEP 3: Add text above your button by using the Type Tool (Hotkey: T), and center it on the canvas. I used a 14px Bold Arial font type.

STEP 4: Now we are going to use layer styles to style our button, starting with a Gradient Overlay. First, you need set your Foreground and Background colors to the colors that you would like to use in your Gradient.  In my example, I am using #004b54 for my foreground color (a dark blue/green), which fades to #0f656f, a lighter shade of the same color.

STEP 5: Next, click on the layer with your Rounded Rectangle Shape (by default it will be named “Shape 1”). Then, click on the Layer Styles   dropdown menu (located at the button of the Layers Palette), and select Gradient Overlay.

STEP 6: In the Gradient Overlay dialog box, change the Gradient to a Foreground to Background Gradient.


STEP 7: Still in the Layer Style Window, Click on “Stroke” tab and add a 1 pixel stroke to the inside of the button, using your Foreground Color as the Stroke Color.

STEP 8: Again, in the Layer Style window, click on the “Inner Shadow” tab, which we will be using to add a highlight to the button. Change the Angle to 90 degrees, the Distance to 4 pixels, the Choke to 0 pixels, and the Size to 10px. Press OK to save the Layer Styles and close the Layer Style window.

STEP 9: Now we will add a slight Drop Shadow to our Text to make it stand out a bit more. Click on the layer with your button text, and bring up the Layer Style window once again by clicking on Drop Shadow. Change the Distance to 1 pixel, Spread to 0%, and Size to 1 pixel, and press OK.

Your finished button should look like this –  

Tags: , , ,
Posted in Websites | No Comments »