PSP Tutorial: Web 2.0 Caution Bars

Posted 1 year, 9 months ago at 3:41 pm. 3 comments
Posted in Design, Tutorials.

Web 2.0 has a whole bunch of graphic memes where certain styles and patterns are used. Caution bars are easy to do when you manually create alternating rectangles and rotate them. This is a great technique and all but it falls short when you want to make a seamless tile. In Photoshop, the technique is rasterized and easy to do. However for a Web 2.0  design, we’d like to keep things  vector just in case we need to change something quickly, for example, making one of the colors transparent. Now I’ll introduce the 1st out of a series of tutorials that explains how to make some elements of a web 2.0 design.

Elements of Seamless Caution Bars

1. Horizantal Rectangles.
2. Alternating Colors.

Step 1: Open a new graphic, and make the size larger than 200×200. Because we can’t be quite sure how thick the bars are, you can choose to make it any size around that.

Step 2: Now you will create your first bar that will take up approximately 1/4 of the total space for it’s duplicates. This vertical bar must start from the top and end at the bottom of the picture. Click on Rectangle Tool (G), make sure your Tool Options has Create on Vector Checked. Create the rectangle, and then click on Object Selection Tool (O) and double click on the rectangle to make it any color. Fill must be checked, Stroke Must be Unchecked.

Step 3: Duplicate the bar by right clicking on it, click on copy. Click somewhere else in the image to deselect your rectangle. Right click and press paste new vector selection (Cntr+G). Change the color to something other than your first color. Now you should have two colored bars. You will basically do the same thing again, and duplicate those 2 bars so that you have 4 bars side to side with alternating colors. For example, Red Blue Red Blue. You will then need to carefully zoom in and move the bars so that they all touch each other and do not overlap. If the bars are anti-aliased you may run into a few problems.

Anti Aliasing: Anti-Aliasing prevents objects and shapes from being pixelated with jagged edges. In my previous tutorials, anti-aliasing was required since most of the shapes had curves. In this tutorial its optional whether the bars are anti-aliased or aliased, but to line the rectangles perfectly you may need to turn anti aliasing off for every rectangle. You can do this by using the Object Selection Tool (O) and double clicking on the rectangle. Or you can right click on the rectangle and press properties. Then uncheck anti-alias, and press OK. The rectangles will look more sharper, and now you can zoom in to make each rectangle touch each other. If you choose not to disable anti-aliasing you will notice there is a slight transparent color at the edge of the rectangle, make sure these slight transparent colors overlap, but the opaque colors should not overlap. In the picture below, the pink lines indicate a transparent color.

Step 4: After making your 4 bars, take out your crop tool and carefully crop the width so that there are 4 bars of equal width and distance alternating between colors.

Step 5: To view your results, open a new image and create any sized rectangle you want. Do not close your original image.  Go to your object selection tool and edit the properties. Click on Fill, then Pattern [1],  and click on the current pattern [2]. Your bars from the original image will appear near the top. Click on that, and edit the angle to 50, and scale it accordingly, you can scale it to anything below 100, try not to go over 100 because blurry edges may appear. Now you can resize that rectangle and you will see that the caution bars stay with it no matter what size.

Page 2: Transparent Bars