Posted on on Friday, August 14th, 2009 at 7:44 pm.
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
Channel
on February 5th, 2010 Says:
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?
on February 5th, 2010 Says:
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.