Exporting PSD For The Web

J
Posted By
J8son
Sep 4, 2006
Views
243
Replies
14
Status
Closed
I just finished designing a website in Photoshop/Image Ready for a portfolio I’m putting together.

I have exported all the different pages to their own folders and I have ensured the the slice properties all contain the correct info for the links (IE: when a person clicks on a certain link it takes them to the intended spot).

Now I need to upload it to my web space I’ve purchased via FTP. I need to combined all these different folders so I can upload them (the usual format is to have one folder for the images and one html file entitled "index).

How would I accomplish that with the current folder full of all my different pages?
Related Tags
export

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

C
chrisjbirchall
Sep 4, 2006
Photoshop is great for designing web pages.

Image Ready is okay for coding them. But you must accept that the code generated is really quite basic.

Once you’ve hit "Save Optimized" it’s time to import the code into your choice of HTML editor to tidy it up and create/test all the hyperlinks etc.
J
J8son
Sep 4, 2006
Yeah, that’s OK because I’ve actually had some experience editing the source code over the last week or so (I basically had to teach myself HTML out of necessity).

What I’m confused about it how do I merge all my different "pages" folders (and each individual HTML file for that page) into one site? I need to upload it via FTP and I can’t do that with everything spread out.
C
chrisjbirchall
Sep 4, 2006
Like I said. Really this needs addressing via one of the HTLM forums. But basically, you can create a folder/subfolder system on your webspace to keep everything tidy. Just be sure your hyperlinks transcend the folder hierarchy.

This really is best done by importing all the HTML into a WYSIWYG HTML editor which will take care of all that. I use Front Page.

Best of luck.

Chris.
J
J8son
Sep 4, 2006
Oh I see. I’m guessing I should read some tuts on FrontPage in order to combine this into one site.

Know of any tuts for this specific issues?
C
chrisjbirchall
Sep 4, 2006
Google to your heart’s content 🙂
L
LenHewitt
Sep 5, 2006
You’d be better off forgetting all about Frontpage – it is probably the worst posssible application available as far as creating clean HTML code is concerned.
DM
Don_McCahill
Sep 5, 2006
it is probably the worst posssible application available as far as creating clean HTML code

With the exception of Word, Excel and other MS applications.
J
J8son
Sep 5, 2006
OK so now I’m a little confused on how to do this!

Any other suggestions?
DM
Don_McCahill
Sep 5, 2006
J8

Use ImageReady to save the file as HTML. You will probably get one HTML page, and a folder of image files. You need all these to make your site work.

On your web space, you will want to make a folder with the same name as the one IR created (usually Images). You copy all the folders in your local Images folder to the one you created in the FTP program.

The HTML file has to go in the same relative location to this folder. Normally, it is one level up. So it will appear in the same level or location as the folder (as opposed to inside of it).

You might have to use a specific name for the homepage of your site to make it appear automatically (often index.htm or index.html). Your web space provider will tell you what that is.
C
chrisjbirchall
Sep 5, 2006
Jason. There are many different makes of HTML editor out there. Some are better than others. I use Front Page because it’s what I am used to.

Certainly, if you are going to be undertaking a lot of web design work, you’ll want to take advice on which are the best of the modern programs and download a few 30-day trials.

However, almost any of them will suffice if all you want to do is take care of your linking and folder structure. You’ll probably even find some free ones if you Google for them.
J
J8son
Sep 6, 2006
Thanks for the help everyone. Let me pick you brain on exactly how to set this up in my FTP using the following example.

I have over 30 pages to configure here but I’ll use two as an example so you can help me understand the proper setup for each one.

We will use my Home page and my Contact Me page.

This is the current directory for each page:

Home = C:\Documents and Settings\The Nemesis\My Documents\My Portfolio\Pages\home

Contact Me = C:\Documents and Settings\The Nemesis\My Documents\My Portfolio\Pages\contactme

Each folder is set up like the following:

Home = images folder + home.html file
Contact Me = images folder + contactme.html file

Currently, I can open the home.html file in Internet Explorer and it loads my Home page. I can then click any link and it takes me to the proper place on the site (since each link is configured to look in a specific folder that also has an images folder and a subsequent .html file for that page).

So, seeing my set up here, how would It translate to work the same on my FTP as it would from my hard drive?
C
chrisjbirchall
Sep 6, 2006
Jason. Once we’d got to post #3, all your questions had been answered!

If you need HTML help, go to an HTML forum. They will tell you the convention for changing your link text from;

C:\Documents and Settings\The Nemesis\My Documents\My Portfolio\Pages\home

to

..//home.htm – or whatever,

Otherwize, import the whole lot into a WYSIWYG web authoring program such as <Len covers his ears> Front Page or Go Live. These programs are made for the job and will take care of all the link management for you.
JJ
John Joslin
Sep 6, 2006
I use Dreamweaver but you don’t need it for what you are doing. Try This freeware:

<http://www.nvu.com/index.php>
S
SDA
Sep 10, 2006
On Tue, 5 Sep 2006 00:34:44 -0700, in adobe.photoshop.windows wrote:
You’d be better off forgetting all about Frontpage – it is probably the worst posssible application available as far as creating clean HTML code is concerned.

Yup it used to be — Anything after 2003 will be OK. It’s bascially at GoLive’s level now and steadily improving.

The OP should do some web tutorials for his preferred HTML editor in order to understand how the whole HTML/Web workflow should work.

My advice to the OP is to forget about using Photoshop entirely for this type of work, and use tools specifically designed for the job at hand.

For this, I’d use the troika of Dreamweaver/Fireworks/Flash. Photoshop is extremely good at producing bitmap artwork for the Print industry, (in a colour managed workflow) and comps/scenes for video/gaming/16mm, not for web design work, which it really sucks at !

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

Related Discussion Topics

Nice and short text about related topics in discussion sections