Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Spoono Pixel Border

Spoono Pixel Border


You must have all seen them by now

image 1

This aint at all hard. A bit different from other pixel borders. but you'll learn the difference here. So first open a new image. I suggest not using a white background, but just for the first part. Open a new image, get the selection tool, and make a rectangle... or square...

image 2

If you havent already, create a new layer and go to Edit -> Stroke. Set it at 2px, make the color white (FFFFFF), Choose "center", at normal and 100%.

image 3

So now you have a 2px white line on its own layer. Right click that layer and choose Blending options. First thing to add is a drop shadow like below. The color you should use is BED0EF

image 4

Then add an inner shadow. This time make sure the color you use is 92B3E4

image 5

And the last part for the border, a stroke like below. The color your going to use is 535B6E

image 6

And theirs your border. If you want more than just a box, get your pencil tool and 1px at start making lines (side by side of course, so they'll be 2px thick). And to make the lines strait, hold shift while dragging.

image 7

Now were moving on to making the box inside that top part. So zoom in to the max, get the selection tool, and make a selection so its just touching the border's stroke., not overlapping.

image 8

Again, if you havent already, create a new layer. Then fill in that selection with color 3454A0. Get that layer, right click on it, select Blending Option, add a bevel and emboss using settings below.

image 9

And now your finally done. Pixel Borders exactly like Spoono's.

Spoono Pixel Border Tutorial: Final Result



Author's URL: Invano.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Spoono Pixel Border"

Only registered users can write comment

No comments yet...