In part one of our latest video blog, Nick and I show you a quick and simple way to take a Photoshop (.PSD) website prototype, and get it working as a dummy web page on the Internet for your client’s approval. To the untrained eye, these prototype websites look like the real thing with rollovers, flash and drop-down menus. However they are simply slices, made using Adobe’s Fireworks Programme.
In this demonstration we are using Adobe Dreamweaver CS4, Adobe Photoshop CS4 and Adobe Fireworks CS4. Despite us using the latest versions, you can use the same method for most recent previous versions of the applications.
Part Two of this video tutorial is available here.
Script from the video blog
James: Hi and Welcome to our web design video blog, we’re Nick and James from Creare. Over the course of 3 parts, we are going to show you a way of taking a prototype website in Photoshop and turning it into a working online prototype in less then 10 minutes. The process that we’re going to show you is an excellent way of presenting something to your client that you’ve made in Photoshop in a matter of minutes, without loosing any quality.
Nick: Because of the 10 minute YouTube time-cap, we have broken this tutorial down into 3 parts. These are:
- Preparing your photoshop document and your web-site’s background. (Which we are going to show you now).
- Taking your design into Fireworks then slicing and moving it to Dreamweaver. (Which will be published on Monday).
- Finishing the site in Dreamweaver and uploading it to the Internet. (Which will be published on Wednesday).
CAMTASIA MOVIE
Nick: Don’t forget part two of this tutorial is released on Monday. Before we close part one, we thought we’d show you another cool website that we have come across to help you Analise your web site’s ‘on-site’ optimisation. It’s called websitegrader.com, here’s a quick look:
CAMTASIA MOVIE
James: Thanks for watching, part two will be uploaded on Monday or if Monday has already passed, click on the link above to check out the second part of this tutorial.
Nick: Please subscribe to our Youtube Channel, and you can stay up to date with our latest videos by following us on Twitter at twitter.com/crearegroup
What page size do you use in Photoshop. Or do you just use the Photoshop defaults for web.
If I was designing a site aimed at 1024×768 size which size would I use in Photoshop taking into consideration the average browser width and allowing for Explorer margin bugs?
Hi Carl, I like to make my canvas 1200 x 900. I then keep the width of the main website within 1000px. Having the larger document size, allows you to see a little of the background, which helps with the design.
Hi there,
Kinda unrelated to this tutorial, but i wanted to know how to make the flash billboard that you have on this tutorial. I wanted to make a billboard that could have say a few menu buttons on the bottom and then the image changes when u highlight each one.
thanks!
Jeff
Perhaps you can explain why you even use Photoshop for your initial design? Is it just because your designers prefer PS?
I prefer to design entirely in Fireworks and only use PS rarely (for any required photo manipulation).
Designing in FW gives several advantages not least of which is the extensive use of vectors so that page elements can be resized to my hearts content when the client changes their mind.
Adobe need to do more to help designers and their employers understand the advantages that FW has over PS for web design.
Hello James your tutorial is so good for me but how you open the webpage on photoshop i dont have the format in Cs4 if you can please tell me how i need the format only the link to download the format for :CS4 please…!?