Turning a PSD into a website using image ready and Dreamweaver
In this tutorial, I will teach you how to take those cool websites you’ve created in Photoshop and convert them into real working websites using Adobe ImageReady and Macromedia Dreamweaver.
Part 1: ImageReady
Open the .PSD file into Adobe ImageReady.
Select the slice tool.
When slicing the image, the [...]
Turning a PSD into a website using image ready and Dreamweaver
| In this tutorial, I will teach you how to take those cool websites you’ve created in Photoshop and convert them into real working websites using Adobe ImageReady and Macromedia Dreamweaver. | |
|
Part 1: ImageReady |
|
 |
Open the .PSD file into Adobe ImageReady. |
 |
Select the slice tool. |
 |
When slicing the image, the layer doesn’t matter at all. Select your first slice. It should be your banner or something that you want as one whole image. |
 |
After making your first slice, continue to slice the rest of the image. Each slice is an individual image. So you want to make each image that will act as a button its own slice, like I demonstrate. You will also want toreate the main content box its own slice. I will explain more on this later. |
 |
Your image should look something like this after all the slicing is done. |
 |
Go to File > Save Optimized As… |
 |
Where it says “Save as type:”, select “HTML and Images (*.html)”, and name the html file the appropriate name (home.html, or index.html or whatever) |
 |
If you go to the folder you saved it in, the file architecture should look like this at this point. There should be one html page and an images folder containing all the images of your slicing. |
 |
If you click on the html file and open it in your browser, it should look like this. If it doesn’t,you probably did something wrong while slicing the image (Or on a rar occasion, IR might have done something wrong and you need to redo the process). |
|
Part 2: Dreamweaver |
|
| If you are competent with HTML, you should be able to do this without Dreamweaver or with adifferent HTML editor. | |
 |
First step is to open the html page into Dreamweaver. It should look like it does above. |
 |
A trick to center the web page is to press CTRL + A or Edit > Select All, then press the center buttonat the bottom Properties bar. |
 |
Next step is to right click inside of the white part of the page, or the background.Select Page Properies (shown). |
 |
The above window should pop up. Click the small box next to “Background color” and use the Eyedropper tool to select the color of the background (in this example, its the gray part that I have already created in Photoshop). |
 |
Your page should no look like this, centered and correct background color. |
 |
The next thing we are going to do is so we can use the content box, because it is currently an imageand we are unable to type in it. What you need to do is select the image and delete it, but first take note of what the height of the image was before you deleted it (if you already did it, just press CTRL + Z to undo). |
 |
Now, make sure your cursor is inside of the table cell (the little box) where the content box image was. Down at the Properties toolbar, click the yellow folder to the right of the box that says “Bg”. This should open a file browser. Then browse to the image of the content box and press “OK”. |
 |
After you have done the above, you’ll notice that the content box isn’t the correct size. Here is how we fix it. Remember when I said to remember the height of the content box image? Here is where you’ll need it. In the Properties toolbar, put that number where the “H” is. Click outside the box in the background and it should update itself, with the content box as the correct size. |
 |
The next step is to create button links. Select the image that you made a slice for each button. In the Properties tool bar, type in the page you would like it to link to in the box that is labeled “Link:”. |
 |
You’re now finished with creating the site (other than entering content). Go to File > Save All. |
 |
If you now open the HTML page in your browser, it should work like a functioning website. |
| The links should work and everything! I hope you liked this tutorial ! | |
