The first step is to create your canvas, so load up Adobe Photoshop and create a New File with a Black background ( #000000). (Actually, the color really doesn’t matter.) Mine will be 640 pixels in width and 480 in height. Not to exciting yet, I know.

Hit Control + H and turn on the grid setting in the show submenu found in the view main menu. This will make it much easier.


Next, select the polygonal lasso tool shown below.



Then, holding shift, click on a grid point that’s touching the left side of your canvas, and then another touching the top of the canvas diagonal to that. Next, click on one that’s also touching the top, but further to the right than the last one, and then one touching the left side that’s perfectly diagonal from the last. Now finish your selection by clicking on the first.



Create a new layer either by using Control + Shift + N or a menu item.



Your selection should still be selected. Create a gradient by using the gradient tool from the toolbox and then altering the settings at top. Leave it linear though.



Now drag your mouse tip from a point on the top-left most side of your banner to the bottom-most, while holding shift to keep it diagonal.



Optionally, you can double click on your banner layer and add a stroke.



Then, using the type tool, type something to your liking and hit Control + T or select Free Transform from the edit menu. Using the top bar, rotate it 45 degrees to the left as shown below.




Now select the position tool and agree to apply the changes.



Move your text layer over your banner, so that it sits on top of it.


Congratulations, you’re done. Here’s and example of this put to use on a real site. Note this banner never really existed on cssThesis; I just took a screen capture and used it as the background for an example.