Pixel Borders

Use Photoshop to make those trendy pixel borders and boxes.

1. We have all seen those sites that section there sites content inside little miniature beveled borders (Similar to Spoono v3). Its quite easy to create in Photoshop 7.0. First, start create a New Image, 600 x 600 px with a white background. Fill the background layer with a mid-gray color so we can help see the details of our borders. #E5E5E5 is the one I used. As you can see I am using a grid background but that's not really important right now.

2. Now, use the Rectangular Marquee Tool to make a rectangle selection to the size you would like your box to be. Then, from the Layers Tab, create a New Layer. Type D then X on the keyboard to reset your colors. Now go to Edit > Stroke and choose 1 px. Make sure the color is set to white and select the Location to Center. Then click OK. You should have a very faint white line that's hard to see at this point. Make sure not to deselect your box. Now, create a New Layer and fill the selection with white by going to Edit > Fill. Now press CTRL + D to deselect. You should now have what looks like a white rectangle. Click on the original Layer 1 from the Layers Palette so it becomes the active layer. Now drag Layer 1 above Layer 2 so the layers palette is like the one shown on the left.

3. Now, we are going to apply some Layer Styles to our thin line. Go to Layer > Layer Style > Stroke. Match your setting up to these ones. Stay inside the Layer Styles, and apply Drop Shadow settings on to your border. Match your settings with these. When finished, click OK.

4. Now we're going to add some details. First of all, we want to section a part at the top of the border. Make sure Layer 1 is your active layer. Then, grab your line tool and use these settings. Paint near the top of your rectangle with white as your foreground color (hold shift to make a straight line) and you'll notice it becomes instantly mini beveled. It should hopefully look something similar to the image on the left.

5. Now you can call your self a pixel artist, well almost. With a little bit more effort you can have something like I have on the left. Its pretty easy to make. Remember to save any styles you create so you can use them later with ease, this will save you time. Hope you enjoyed the tutorial.