Basic Web Page Techniques
you must have all seen them by now
![](images/spoonopxb1.gif)
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 rectiange... or square...
![](images/spoonopxb2.gif)
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%.
![](images/spoonopxb3.gif)
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
![](images/spoonopxb4.gif)
Then add an inner shadow. This time make shure the color
you use is 92B3E4
![](images/spoonopxb5.gif)
And the last part for the border, a stroke like below.
The color your going to use is 535B6E
![](images/spoonopxb6.gif)
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.
![](images/spoonopxb7.gif)
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.
![](images/spoonopxb8.gif)
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.
![](images/spoonopxb9.gif)
And now your finally done. Pixel Borders exactly like
spoono's.
![](images/spoonopxb10.gif)
|