Tutorial on How to Create a Webpage in Adobe Photoshop
While Photoshop is designed primarily to edit and enhance photos and create graphics, you can use the program's "Slice Tool" and "Save for Web & Devices" options to create web pages from your PSD image files. Use the Slice Tool to cut (or "slice") the PSD into sections. Each slice becomes a separate web element, such as a button or text field. Photoshop places each slice in its own HTML table. You can then add hyperlinks or other HTML tags to the various slices and export the PSD to an HTML web page.
Other People Are Reading
Instructions
-
Creating a Webpage in Photoshop
-
1
Start a new PSD image in Photoshop with the dimensions you want for your web page, like this: Click "File" on the menu bar and choose "New" to display the New dialog box. Type the page width (in pixels) in the "Width" field and the height (in pixels) in the "Height" field.
-
2
Type "96" in the "Resolution" field and click "OK." This creates a blank canvas for your web page.
-
-
3
Create the banner graphics and buttons across the top of the page. You can import existing images and place them where you want them or use Photoshop's graphics and text tools to create and layout the banner.
-
4
Select the "Slice Tool" (fifth button from the top in the Toolbox). If the Slice Tool is not currently displayed, click and hold the button and choose "Slice Tool" from the fly-out.
-
5
Drag the mouse cursor around the first button or area in the banner where you want to create a link. Photoshop creates a box, or "slice," around the object and places it in a table. When you export the page, your slices display as separate objects in individual HTML tables.
-
6
Right-click the slice and choose "Edit Slice Options" from the fly-out menu to open the Slice Options dialog box. Use this dialog box to define the properties of your button. For example, type the URL link in the "URL" field. Enter the target browser page, alternative tags, and so on. Click "OK."
-
7
Repeat these steps for creating buttons and editing slice options for each area you want to make clickable.
-
8
Use the Slice Tool to define an area on the page where you want to place a text box. Right-click the slice and choose "Edit Slice Options" from the fly-out menu.
-
9
Click the "Slice Type" drop-down and choose "No Image." The "Text Displayed in Cell" field is displayed. You can either type your text in this field or copy and paste it from a word processor. When you finish, click "OK.'
-
10
Click the "Slice Type" drop-down and choose "No Image." The "Text Displayed in Cell" field is displayed. You can either type your text in this field or copy and paste it from a word processor. When you finish, click "OK.'
Note: This field supports most HTML tags. For example, to make some of the text italics, simply place the text between the "<i>your text</i>" tags. Use "<p>" to create paragraph breaks, and so on.
Note also that the text in this table does not display inside Photoshop---you can't see it until you export the page.
-
11
Continue adding and defining slices for text, images, graphics, and so on, until you finish the layout.
-
12
Click "File" on the menu bar and choose "Save for Web & Devices." This opens the Save for Web & Devices dialog box. Use this dialog box to control background color, image compression and quality, and so on.
-
13
Click the "Save" button to name and export the web page.
-
1
Tips & Warnings
Each slice becomes a new image file. Photoshop saves the slices in a sub-directory named "images." Be sure to upload this folder when you deploy the page to a web server.
References
- Photo Credit Internet hyperlink image by Star from Fotolia.com
