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

Basic Web Page Techniques


You must have all seen them by now

image01

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...

image02

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%.

image03

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

image04

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

image05

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

image06

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.

image07

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.

image08

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.

image09

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

Basic Web Page Techniques Tutorial: Final Result

Author's URL: scudworkz
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 "Basic Web Page Techniques"

Only registered users can write comment

Reader's comments