Search Query
April
2004

Build a Web Page in Photoshop

Living in the Internet Age is a pretty remarkable experience. There is a wealth of information just a click away and anyone can publish his or her own web pages. Many Internet Service Providers even give you free web hosting space with your account. Of course, the problem is that few people actually know how to create a web page from scratch. This month we take a look at how my favorite application, Adobe Photoshop, can help you create your web page without knowing a lick of code.

The first step is to design and build your web page graphic. You can do this in Photoshop or you can use an illustration program like Adobe Illustrator, Macromedia Freehand or Corel Draw and then import it into Photoshop. Size the graphic to fill a standard-sized browser screen, about 800 x 600 pixels (Fig. 1). This month’s example was put together in Photoshop with a photograph and some text. I also added some capsule shapes behind each line of text to use as a rollover, a graphic that will change interactively when the curser is over that menu item on the web page (Fig. 2).

Fig. 1
Fig. 2

Once you have your web page design, you need to divide it up so that some areas will respond a mouse click. This process is called Slicing and Photoshop gives you several tools for doing it. In the Tools palette there is the Slice Tool below the Magic Wand (looks like a knife); but because the design of this page is pretty simple, I can use the New Layer Based Slice command from the Layer menu (Fig. 3). Click on each of the capsule layers and repeat the command. You will now see a grid showing the sliced areas of the image (Fig. 4). In the final web page, each cell of the resulting table will contain a separate piece of the composite graphic. 

Fig. 3
Fig. 4
Fig. 5

You can only do have of this process in Photoshop itself, now it’s time to take the image into Photoshop’s companion program, Adobe ImageReady. This app gives you the rest of the tools to build your interactive web page and is included when you install Photoshop. To move the document into ImageReady, click the Edit in ImageReady button at the bottom of the Tools palette.

ImageReady looks and feels a lot like Photoshop. Make sure that ImageReady is showing the slices (View > Show > Slices) and select the top slice with the Slice Select Tool (on the Tools palette it looks like a knife with an arrow cursor next to it). Note that only the slice you are selected on is shown correctly, the others displayed lighter so you can tell what you’re working on.

Pull up the Slice palette (Window > Slice) and you can fill in the information about that slice (Fig. 5). In the Name field, replace the default name with a more descriptive name, in this case ‘home’. It is best to avoid any spaces or special characters. For the URL, type the web address of the page to which you want to create a link. It can be just the filename of an HTML web page (in this case index.html), or it can be a full address starting with http://. Target you don’t need unless you are using Frames or want the link to open in another browser window. Next to Alt, type in the text you would want seen if the viewer turned off the graphics on their browser or if they are on a slow connection. The last part to fill out is Status Bar Message. This text will be seen in the Status bar of some browsers. Repeat this for each button in the document.

To make the button change when the mouse moves over it, you need to use a combination of the Web Content and Layers palettes (Fig. 6). In the Web Content palette, select a slice and click the Create Rollover State button at the bottom (it looks like a document). By default this state is called Over. This will be what the button looks like when the mouse moves over the button. You can now make changes to the Layer Styles in the Layers palette; you can also alter which layers are visible and even vary their opacity. For this button’s Over State I just added a simple Color Overlay layer style to give the button a lit up appearance. 

Fig. 6

Click the Create Rollover State button again to add a Down State. For this Down State, what the button looks like when the mouse button is depressed, I changed the direction of the Bevel and Emboss layer style I already used to down instead of up. ImageReady remembers the differences between the layer properties for each of the different states. Again, repeat these steps for each button. If you need to change things in the normal state, click Normal at the top of the Web Content palette. 

Fig. 7
Each part of the image now needs to be saved in a web compatible format like GIF or JPG. To determine the specifics for each portion of the image, you can use the Optimize palette. For this example, I selected JPEG Medium from the Preset pop-up (Fig. 7), but you can adjust the setting to your taste. You can mix and match file formats for different sections of an image depending on if one will give you a smaller file or if you need a special feature of one format like animation in a GIF. 

If you want to preview your file as a web page, you can click the Preview in Browser button at the bottom of the Tools palette (it will have your default web browser’s icon). Or you can select your favorite browser from the list under File > Preview In. Once you are satisfied with the page, select File > Save Optimized As. Choose Format: HTML and Images, Settings: Default Settings and Slices: All Slices and click Save

You can now open the HTML page in any browser. The buttons change when the mouse moves over or clicks them and the links will work. To put the files on your web site, use your favorite FTP program. If you are already using Adobe Photoshop, this technique leverages knowledge you already have and makes Photoshop and ImageReady an indispensable part of your web creation toolbox. Remember, your ISP gives you free web space, but it’s only free if you use it.

[Click Here to see the finished page]

Paul Vaughn is a freelance graphic artist, writer and web designer. You can see color examples, including this finished web page, at www.graphicsguy.org. If you would like to see the Graphics Guy address a specific topic email Paul Vaughn at paulv@mac.com.

 

|| Home || Graphics Guy || Mac Guy || Gallery || Payment || ||


This site and all images and text contained in it are ©2006 Paul Vaughn.
(Unless otherwise noted)
Questions? Problems?