Turning PSD into webpage - I am clueless

by Nathan Hangen

Posted: 15 years ago 17 replies

WEB DESIGN

I am pretty good about figuring things out and learning how to code, but this has got me baffled. I paid for a site design and got a PSD file, but I have no idea how to turn it into a decent SEO'able web page. Does anyone have any advice or a good link?

Thanks,

Nathan

#clueless #psd #turning #webpage

pavondunbar 15 years ago

Hi Nathan!

Since you received a PSD file and you want to turn it into a webpage, here is what you do, in a nutshell...

1) Open the PSD document in Photoshop and edit it the way you want.

2) Once you are done, and this is important...use the SPLICE TOOL to break up the PSD document into images...each splice will be a jpg file that you would save.

3) Go to File--Save for Web and you'll see your splices pieced together.

4) Select JPG HIGH for your resolution so that your images don't appear all blocky and pixel-like...

5) Save the PSD file as a .html file (i.e. index.html, whatever.html, etc.)

6) Next, open Dreamweaver, or your favorite HTML editor. Go to File--Open to open the PSD document...

7) Center the document...

8) If you need to add meta tags or keywords for SEO purposes, do so in the document.

I'll upload 2 videos in a bit so you can see how it's done, just in case I'm talking gibberish...

Hope this helps...

Give me a minute, OK?

Pavon
- [ 2 ] Thanks
- 2 replies
Signature
Cost Effective Mobile Marketing For You & Your Business
{{ DiscussionBoard.errors[424597].message }}
- Nathan Hangen 15 years ago
  
  Dude you rock...thanks so much. Your explanation is good, but videos would be great!
  
  Thanks
  
  {{ DiscussionBoard.errors[424624].message }}
- CarolAnnT 15 years ago
  
  Great answer I appreciated that too! I've always wondered about that being a newbie myself.
  Thanks and Peace & Blessed Be...
  
  Thanks
  
  {{ DiscussionBoard.errors[436245].message }}
pavondunbar 15 years ago

Nathan, I'm uploading them to my server now...

It'll be a few minutes...

Thanks for your patience!

Pavon
- Thanks
Signature
Cost Effective Mobile Marketing For You & Your Business
{{ DiscussionBoard.errors[424632].message }}
pavondunbar 15 years ago

Nathan...

Thank You For Your Patience!

Here are the 3 videos...you have to download them...

This should help you out...

VIDEO 1

VIDEO 2

VIDEO 3

If you are having problems opening the videos, let me know...they are in .swf format...

These are 3 videos from a 10 Video Series called...

"How To Create A Squeeze Page From Scratch"...

That I have full PLR rights to...

Enjoy!

Pavon
- [ 1 ] Thanks
Signature
Cost Effective Mobile Marketing For You & Your Business
{{ DiscussionBoard.errors[424688].message }}
pavondunbar 15 years ago

Nathan...there seems to be a small problem with the video downloads...

Let me check it out, OK...it only uploaded part of the video...sorry about that...
- Thanks
- 1 reply
Signature
Cost Effective Mobile Marketing For You & Your Business
{{ DiscussionBoard.errors[424699].message }}
- Nathan Hangen 15 years ago
  
  No problem, I just really appreciate your help and effort. Take your time.
  
  Thanks
  
  {{ DiscussionBoard.errors[424791].message }}
pavondunbar 15 years ago

Nathan...

It should work now...

Here you go...

VIDEO 1

VIDEO 2

VIDEO 3

It should work for you now...

Sorry about the inconvenience...

Pavon
- Thanks
Signature
Cost Effective Mobile Marketing For You & Your Business
{{ DiscussionBoard.errors[424817].message }}
StealthA00 15 years ago

I've never really understood the 'Save To Web' and Splice tool in Photoshop. Thanks for the simplified explanation It alllll makes sense now ..
- Thanks
- 1 reply
{{ DiscussionBoard.errors[427027].message }}
- Christian Sawyer 15 years ago
  
  It is called the "Slice Tool", just wanted to clear that up before we cause further confusion.
  
  Thanks for your help though!
  
  -Christian
  
  Thanks
  
  Signature
  
  2-Step Offline Software Unlocks Profitable Opportunities - $50 Off
  
  {{ DiscussionBoard.errors[427082].message }}
absbica 15 years ago

I also created a thread for exactly this purpose...though it doesn't cover the chop/code automation process Photoshop does...it deals with handcoding the site using Web Standards and tableless design.

Part 1 - http://btk.name/videotuts/gcc_psd_code/gcc_psd_code.html

Part 2 - http://btk.name/videotuts/gcc_psd_code2/gcc_psd_code2.html

Part 3 - Created with Camtasia Studio 5
- Thanks
- 1 reply
{{ DiscussionBoard.errors[427242].message }}
- Nathan Hangen 15 years ago
  
  So suppose you wanted to pay someone to do this...what would the going rate be?
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[427801].message }}
  
  Chris Reeves 15 years ago
  
  Originally Posted by Nathan Hangen
  
  So suppose you wanted to pay someone to do this...what would the going rate be?
  
  Is it just a simple minisite PSD? If so, I'll help you out with it for free. Just shoot me a PM with your email addy if your interested and I'll contact you. I don't have enough posts to send PM's yet, so be sure send me your email if you still need help.
  
  Thanks,
  Chris
  
  Thanks
  
  {{ DiscussionBoard.errors[428526].message }}
greenexit 15 years ago

It's not easy turning a PSD into a site. Might be better off hiring someone on freelance sites and get it done fast. Someone who knows what they are doing can do it in a day. But someone who dont HTML or CSS will take months. Why waste time.
- Thanks
{{ DiscussionBoard.errors[431321].message }}
vijay420 15 years ago

I was stuck at the same place about a year ago but now i know how to do it, im just too lazy to do it
- Thanks
Signature

Free fast proxy
{{ DiscussionBoard.errors[431793].message }}
chillpill 15 years ago

If you are OK with forking out some cash, there are studios that specialize in splicing graphics into html/css.

If you wish, Google up "PSD to HTML" and that will get you started.

Cheers.
- Thanks
{{ DiscussionBoard.errors[436222].message }}
denniston 15 years ago

Video tutorial links above are not working?
- Thanks
{{ DiscussionBoard.errors[436248].message }}