Introduction.
This tutorial is mainly supposed to teach you how to get the pixel borders implanted into your html document. This can be done in many ways, using different techniques. But I’m going to use the one that I find to be the most effective and understandable. I used Photoshop 7.01 and Macromedia Dreamweaver making this tutorial.Photoshop Step 1.
Start by making a new document in Photoshop, I made a 300x300px canvas and filled the background with white.Photoshop Step 2.
Now make a new layer and make a 250x250px selection with the Rectangular Marquee Tool (M).Fill that selection with a light gray color (CDCDCD)
Photoshop Step 3.
Now go to "Select-Modify-Contract" and fill in the value that you want to be the thickness of your border. (I used 5 pixels)Click OK and hit the Delete button on your keyboard.
Photoshop Step 4.
Now we make a 1px border around your image by Ctrl+Clicking our layer to get the shape selected.Go to "Select-Modify-Expand" and use the value of 1 pixel.
Make a new layer underneath the current one and fill the selection with a dark-gray color (4B4B4B).
Now the image should look like this.
Photoshop Step 5.
Make a new layer and place it at the top.Select the Line Tool (U) (See my settings for the Line Tool here)
Set it to 1px in thickness, be sure that Anti-aliased is not on and finally select white as foreground color.
Photoshop Step 6.
Zoom in to the top of the pixel border and draw a straight line across it.
Do the same thing at the bottom of the pixel border.
Set the layer mode to "Soft light"
Photoshop Step 7.
Fill the inside with the color of your choice.I used light-gray (E6E6E6)
And the pixel border is ready!
Now to the HTML part.
First we need to slice the pixel border and get it ready for the html document.We need to divide the image into 3 images, top - middle and bottom.
Photoshop Step 8.
I used guides to define the areas of the border I need for the html document.Now zoom into 1600% and select the top area of the border with the Rectangular Marquee Tool (M).
Go to "Image-Crop" and then "File-Save For Web" (Alt+Shft+Ctrl+S)
Use the default "GIF 128 Dithered" settings and press the save button.
Name your image "pixelborder_top.gif" or something like that.
Now, use your history palette to go back to before you cropped the image.
Photoshop Step 9.
Do the same thing with the bottom part of the pixel border and save it as "pixelborder_bottom.gif"Photoshop Step 10.
Now for the middle image we select a 1 pixel thin area across the border, because we are going to use it as a background image and let it tile it's way down.
By doing this we can work freely with the height of the pixel border on our webpage.
Now crop the selection and save it the same way as before.
Name the image "pixelborder_bg.gif"
Now we have our 3 images that are needed to make it work:
Pixelborder_top.gif
Pixelborder_bg.gif
Pixelborder_bottom.gif
DreamWeaver Step 1.
Start by making a new html document and saving it.Insert a new table with the values below
Set "pixelborder_bg.gif" as the table background image.
Insert "pixelborder_top.gif" in the first row
Insert "pixelborder_bottom.gif" in the 3rd row
DreamWeaver Step 2.
Now you can insert an iframe by making another table inside the 2nd row
Align the table to "center" and set it's height to 150 pixels
Make a new html document and save it as "iframe.htm" (or any
name of your choise, just remember to change the name in the iframe
code) and set it's background color to #E6E6E6
Insert this iframe code into that table and set the align inside the table to bottom.
Fill the iframe.htm document with your content, and it will look like this:
Here is the scrollbar code I used in iframe.htm
If you dont know how that works, please read my tutorial on scrollbar colors.
The outcome
I hope this tutorial gave you insight on how the pixel border works in an html document. The main thing is to experiment with different colors and sizes on the borders.Good luck!
You can find more Photoshop tutorials at tutorialvault.net