Featured Templates
Home
Photoshop
Photoshop Basics
Photoshop to Dreamweaver
Added: July 14, 2005 Rating: 
Level: Beginner Software:
Level: Beginner Software:
Slice and convert a Photoshop website template into an editable web page.
 |
1. Open the website template in Adobe ImageReady. |
 |
2. If your document is currently opened in Adobe Photoshop, transfer the document to Adobe ImageReady (File> Edit in ImageReady). |
 |
3. Using the Slice tool (K), draw boxes where the content will be. Also, draw boxes over any images that will be hyperlinked. Create only the necessary amount of slices. For this step, I've created three slice areas: the menu, main content, and the logo. |
 |
4. To convert this file into a template, use the Save Optimized As tool (Ctrl+Shift+Alt+S) to save the document inside a folder where you would like the website to be stored. |
 |
5. Run Macromedia Dreamweaver and open the HTML file that Adobe ImageReady has created. We will now begin to remove all the images and place them as cell backgrounds so that the content can be added over the images. |
 |
6. With one of the images selected, highlight and cut (Ctrl+x) the image source location then press Enter to apply the changes. The image should now appear to be a gray box with the width and height on it. |
 |
7. Select the cell containing the image. |
 |
8. Paste (Ctrl+V) the image source location into the cell background field. Press Enter to apply the changes. |
 |
9. Use the image width and height properties and apply them to the cell width and height fields. Press Enter to apply the changes. Sometimes the W or H field property may disappear when you press Enter to apply the changes. This is normal and indicates that the cell does not need to have a width or height set. Once you've specified the width and height, delete the image. |
 |
10. Repeat steps 6 to 9 with the remaining images except for any images that will be hyperlinked. For example, I've left the image of the logo inside the cell so that I can add a link to the main page. |
 |
11. You'll notice that when you type inside the cells, they'll be vertically centered instead of starting from the top. To adjust the positioning, select the cell you would like to modify and change the horizontal or vertical cell properties. |
 |
12. The template is now sliced and editable. However, if you preview the template (F12), the template is aligned to the top left with a white surrounding. Lets center the template and replace the surrounding white background with a background that blends in with the template. In the document status bar, select the table. |
 |
13. A quick way of centering the template is to switch into Code view (View> Code), add a <center> tag in front of the table and close the tag using a </center> tag after the table. This technique will work if the left and right sides use the same background. However, for this template I'm editing, I would like to use a two different background; one for the left side and one for the right side. |
 |
14. To begin, select the entire table and cut (Ctrl+X). Create a new table (Ctrl+Alt+T) with the following properties:
Row: 1 Columns: 3 Table width: 100 percent Border thickness: 0 pixels Cell padding: 0 Cell spacing: 0 Header: None |
 |
15. With the table created, select the middle cell and paste (Ctrl+V) the table you've cut. |
More Photoshop: Most Popular Materials | Fresh Materials
| TutorialKit New Photoshop Tutorials
10 Random Photoshop Basics :
10 Random TutorialKit Materials:
sky2k4 September 27, 2005 says:Very nice tutorial..informitave and strait to the point,Thanks