Graphics Zone - Bullets

XRATED BUCKS

Creating Bullets in Photoshop and incorporating into UL/LI tags using a Stylesheet

by BarryHilton, Adult NetSurprise

Start by opening up your new image 9x9 pixels... Click Here to view Screen Shot with Instructions

Now, to make it easier to draw our arrow bullet, zoom in to 1600% magnification... Click Here to view Screen Shot with Instructions.

Select black as your foreground color and the pencil tool and draw your arrow... it's a bit tricky to start with, so click one pixel at a time, if you get it wrong hit crtl z to undo the last step... Click Here to view Screen Shot with Instructions.

Add a new layer then select red as your foreground color... Click Here to view Screen Shot with Instructions.

Fill in the inside of your arrow bullet with red... Click Here to view Screen Shot with Instructions.

Change the foreground color to orange... Click Here to view Screen Shot with Instructions.

Add a highlight to the arrow... Click Here to view Screen Shot with Instructions.

Change the foreground color to dark red... Click Here to view Screen Shot with Instructions.

Then add a shadow effect to your arrow bullet... Click Here to view Screen Shot with Instructions.

Reduce the magnification to 100% (normal size) and select Save as to save your bullet as a transparent gif... Click Here to view Screen Shot with Instructions.

Enter these values to make your transparent gif, and click ok... Click Here to view Screen Shot with Instructions.

Next, switch to your html editor and set up a UL unordered bulleted list... Click Here to view Screen Shot with Instructions.

Add a Stylesheet to define the UL bullet as your arrow graphic rather than a 'dot'... Click Here to view Screen Shot with Instructions and our final example page.