Winglitch / Tutorials / Adobe Photoshop 6.0 / Splicing an Image for the Web [Creating a Website]
Tutorials / Adobe Photoshop 6.0 / Splicing an Image for the Web [Creating a Website]
Step 1
A lot of designers use Adobe Photoshop to
create their sites. A lot of rookie designers try this method, but then they
have troubles exporting it all into HTML so that its web-ready. This guide
will help you do just that, fast and easily.
Start by opening your website
(at this point it should be a large graphic) in Adobe Photoshop. If the file
has layers, flatten it via the "Layers" menu.
Step 2
Now you want to go to View > Show Rulers so
you can make guidelines for your splicing. Also make sure that "Show Extras"
is marched in this menu.
Step 3
Some basic steps for guidelines:
For a horizontal guideline; go to the top ruler, for a vertical guideline;
go to the side (left) ruler.
To make a guideline simply click on the ruler
and drag the line to where you want it. You can fine tune the position of
the guideline by holding CTRL + Mouse or you can use CTRL + Arrow Keys.
(Arrow Keys is usually the most accurate.) Once you have your guidelines in
position yours should look like this (is your using the image I used to
follow along.)
Step 4
Now that you have your guidelines in position
all you have to do is use the rectangular marquee tool to easily select each
area by dragging in the box.
Step 5
Once you select a box (Note: You have to repeat this
for every box on the screen!) you know press CTRL + C, or you can go to Edit
> Copy. Once you do this go to File > New and then press OK. (The size you
copied should be selected already when you got to new.)
Step 6
Save the new image, and as stated previously,
do this for each box. Congratulations! You now have easily sliced your 1 big
image to many images and can now put them in an HTML table, or use an editor
such as Macromedia Dreamweaver or HomeSite. (www.macromedia.com
for a free trial version of Dreamweaver MX.)
Tutorials / Adobe Photoshop 6.0 / Splicing an Image for the Web [Creating a Website]
