Photoshop Basics: Create a Divider Image

Views : 27
Category : Photoshop
Tags : photoshop basics, divider bar, border divider
Report Video

Hello and welcome to my next basic Photoshop video tutorial. In this video I’m going to show you how to create a divider (border) image tag so we can incorporate it into our website. So let’s get started.

1. Have a Photoshop opened. I use Photoshop CS4 in this tutorial.

2. Go to File> New or press Ctrl+N on keyboard if you are using Windows.

3. Choose your preset and rename your file. Set the image width, height, and resolution based on the space in my website. Press OK.

4. Make sure your workspace show your image in 100%. Open the Layers Panel. Duplicate your background layer to make sure you don’t use the background layer to edit file. Hide your background layer to avoid confusion.

5. Create rectangle using the Shape Tool on the left sidebar. Your cursor will turn into a cross or plus icon. Click and drag over your layer to create a shape.

6. Your rectangle will become Shape 1 in the Layers Panel. You can change the color by double-clicking the layer. Double click on the phrase Color Overlay. Click on the color box on the right side of Blend Mode option. A color wheel window will pop up. Select your overlay color using the color wheel. Press OK.

7. Click the Move Tool to help you resize the image you have. Click the check mark on the upper right to set the changes.

8. You have your first divider tag. To save it, go to File> Save As> save it as a PSD file. To save it as an image file, go to File> Save As> choose JPG file. A JPG popup menu will show. Press OK. Once you are done, you should load the image in preview mode.

That’s how you create a divider image tag in Photoshop CS4. In my next video tutorial I’m going to show you how to insert this divider bar image into a normal HTML page or into your website. This video is brought to you by If you like my videos, please comment, subscribe or like my videos. Thanks for watching and have a wonderful day.