How to Create a Web Page Image
by Foye Robinson, Demand Media
new layer
Web images come in different formats, styles and sizes. Image editors like Photoshop and Paint Shop Pro make it easy for anyone to create images and logos for the Web. And while this tutorial will use Photoshop as an example, you can follow the same basic steps using the image editor of your choice.
Items you will need
- Adobe Photoshop
- Text Editor
Creating the Web Page Image
Step 1
Open Photoshop and select "File/New" to create a new file.
Step 2
In the "New" dialog box, enter a name (optional) and enter the image dimensions: 400 pixels x 400 pixels, for example (or the size you'd like to use).
Step 3
Add a new layer to your image by selecting the new layer button (F) from the Layers palette (or Layer/New/Layer from menu). To place an object above another, drag its layer above the layer of the object you want below it.
Step 4
Select the "Custom Shape Tool" (U) from the tool box. Within the shapes option, select the small drop-down arrow beside "Shape."
Step 5
Click on the shape you'd like to use. Choose a color and style from the options bar and drag it onto your canvas. In the example, the "cat print" shape was used.
Step 6
Make sure that the layer for the new shape you just created is active in the Layers palette. Within the Layers palette, select the "Layers Style" button and choose "Bevel and Emboss." Place a checkmark beside "Bevel and Emboss" and select "Inner Bevel" in the "Layers Style" dialog box.
Step 7
Place a checkmark beside "Pattern Overlay" and highlight the style with your mouse. Select the "Wood" style and set the opacity to 50%.
Step 8
Place a checkmark beside "Stroke" and highlight the style with your mouse. Change the stroke color by clicking on the color sample. In the color dialog box, select the color you'd like your stroke to be. Black is used in this example. Leave the default size of the stroke at 3 pixels and hit OK to close the "Layers Style" dialog box.
Step 9
Select the "Move Tool" (V) from the toolbox. Drag your shape where you'd like it on the canvas.
Step 10
Add another layer. We'll be adding some text. To add text, select the "Text Tool" (T) from the toolbox. Click within the cat's paw, and type your text.
Step 11
To slant your text, select the "Move Tool" (V) and place a checkmark beside "Show Bounding Box" in the options box. Place your cursor beside the text until the curved double-headed arrow displays. Drag the text and rotate it to match the direction of the paw. To add a glow, select the "Outer Glow" from the layer style button in the Layers palette.
Step 12
Create a new layer and add a pair of scissors by selecting the "Scissors" custom shape. Follow steps 6-8 to change its color and stroke. Bevel and emboss it.
Step 13
Create a new layer and add the copyright custom shape, changing its color to black.
Step 14
Add a new layer and add the other text as shown in the example. To create a warped text, select the "Warp Text" button from the options bar. In the "Warp Text" dialog box, select "Arc Lower," with 50% for bend. Hit OK.
Step 15
Add a new layer and select the "Rectangle Tool" from the toolbox. Choose red for the foreground color and draw a rectangle around your new design. Add a black stroke to your rectangle (see step 8).
Step 16
Trim your canvas to fit your image by selecting "Image/Trim." In the dialog box, select "Top Left Pixel Color" and place checkmarks beside top, bottom, left and right. Hit OK.
Step 17
Save your file as a Photoshop PSD so you can edit it again later. Duplicate the image by selecting Image/Duplicate from the menu and give it a new name.
Step 18
Flatten the image to shrink the file size by selecting "Layer/Flatten Image." Resave your file as a Web image by selecting "File/Save As Web" from the menu. The finished image should look like this.
Adding the HTML Code
Step 1
Open a text editor.
Step 2
Add the following code into the
tag of your HTML code in the area you want your image displayed:
Step 3
Replace the folder/file names and alt tag description with your image's information.
Step 4
Save your HTML file.
Step 5
Preview your work in a Web browser.
Tips
- Create a larger image that you can shrink and re-use in other projects. Enlarging a smaller image is more difficult and can distort your image.
