Tuesday, March 1, 2011

Making Your Photoshop Website Template LIVE! (PSD to HTML)

Soooo you know want a website but you have zero web development skills. You already picked out and registered the perfect domain name (domain registration?) and you have signed up for web hosting services (who's hosting what now?)

After that, you considered paying someone to build it for you , but being the ambitious go-getter that you are, you decided building a website can't be that hard...

I mean, really.

A lot of Googling later, you've found a free website template you want to use as the basis for your new website, but hold on a second! This template is in .PSD format, and I KNOW websites are supposed to be .HTML... you aren't fooling anyone you fake website template distributor!!

Oh, what's that? A .PSD can be turned into .HTML? Is that so...
Here's how:

First, get the tools required for the job!
Photoshop, Dreamweaver and an FTP client (Filezilla)

You'll need to "acquire" the first two, but the last is a free download.

1. Open your template in Photoshop
2. Use the SLICE Tool, extensively - watch this video for FULL details
3. Save for "Web & Devices" and optimize your slices.
4. IMPORTANT - Make sure to save as type "HTML with images"
5. Open that new HTML file in Dreamweaver - video with FULL details
6. Templatize and "save as template" for building every other page of your site.
7. Open up Filezilla and upload your site to your hosting provider's server.
8. Save your homepage as "index.html" in the root of your domain name folder.
9. Visit your site, !

There's a lot of ways to build a website, but this is the easiest way I've discovered aside from trying to morph a blog into a website.

PSD to HTML pwnt ;)

3 comments:

Richard C. Lambert said...

After that, you considered paying someone to build it for you , but being the ambitious go-getter that you are, you decided building a website can't be that hard... psd to wordpress

Robert F. Crocker said...

When it first comes to me, I didn't get it right, but as I started searching, it almost worked in many other ways, which has brought about the success to me. psd to email

Richard C. Lambert said...

After that, you considered paying someone to build it for you , but being the ambitious go-getter that you are, you decided building a website can't be that hard...psd to wordpress