Integrating Adobe Photoshop with Fireworks, making websites

Visit my website The MaStudios

Want to use the graphical tools of Photoshop with the web development tools of Fireworks? This hub will explain the very simple process of intergrating the two together, your website will never look the same again (in a good way).

You can visit both my Photoshop tutorial as well as my Fireworks tutorial if you would like. As always thanks for the support and continue to follow me as my technical web design hubs grow.

Lets get started by opening your web layout in Fireworks. You should use Fireworks for the majority of your layout, its tool are best used for just that. Use Photoshop for those times that you want to add a picture or graphic that is best manipulated with Photoshop.

With your layout open in Fireworks, open the graphic or item in Photoshop (open with Photoshop not Fireworks), in which you wish to add to your web page. From photoshop click Save for web and devices from the File menu at the top.

When the menu pops up with an image preview, switch it between Gif and Jpeg to see which one looks more clear. With Gif, put the Quality percentage as low as you can without roughing the image. Same goes for the Jpeg as well. You want to do this because the higher the quality of the image the bigger the file, the bigger the file the longer it takes for your image and web page to load. Just under the image preview you will see something like this:

Jpeg 8.14K 2 sec @ 56.6 kbps

This is telling you that it will take a viewers pc about 2 seconds to load that image at that connection. Ok, 2 seconds doesnt sound like much but, when your adding several pictures or take in to mind that it takes your web page time to load as well, it all add's up.

When you think you have it setup to your liking, you can preview how it reacts by using the preview button at the bottom. This will open the file in your browser showing you how it will come out with said specifications.

Click Save if satisfied. Rename your file how ever you want and set the settings to default. For the Save as Type, make sure to set it to Images Only, it will have a parenthisis next to it excasing your image extension of choice (.jpeg .giff ).

Now that you have an transferable file, go ahead an open it with Fireworks. You will now have two browser windows open in Fireworks. One containing your web page and one containing the image which you wish to add to your web page. With the web page browser open and select into view, click and drag the browser window icon near the top in a grey rectangle onto your webpage.

With the Move tool, you can now drag the image onto your webpage. You can move this around as much as you would like with no damage to the image. If you resize it several times, you will notice the quality goes down everytime you resize. Just delete that copy and drag over a new one. Try to limit the amount of times you resize and manipulate it to avoid quality deterioration.