How To Use Psd File

I'm redesigning my website, and I found a template for it that is in a PSD format. I have Adobe Photoshop so I can open it and edit it. I changed the text and images exactly the way I want it, but what do I do from here? How do I get the images and text from the PSD to the individual files that makes it up? Or am I supposed to be doing that at all? Thanks

Comment/Reply (w/o sign-up)

I guess that you want people to see the result on your website ? Then, it's simple. I'm not very familiar with PhotoShop, so experts will correct me, but I guess that the next step is to save your work as an html page. If it's your first page, you save it as "index.html" and put it on your site.
and use the same template for the second page, etc...

Comment/Reply (w/o sign-up)

I figured out how to save it as an html file, but it looks like its just an html file with an image of the page. There is nothing clickable on the html file, its all embedded as a gif.

I would need to have all the links working, so this method wouldn't help.

In the mean time, I'll be searching around google to find out what to do next.

Thanks

Comment/Reply (w/o sign-up)

you need too slice it

Comment/Reply (w/o sign-up)

Since you downloaded the .psd file and it is a template it might've already been sliced. Try opening up the original file (if you got it in a zip, just re-extract it into another directory or rename your modified psd) and go to View > Show > Slices. If there are no slices saved, or if you want to cut it up yourself, click on the icon. You should see faint blue lines and the number "01" in the top left corner of your document. You can then right click and go to "Promote to user slice" to make the slice resizable, where you can drag out the dimensions of the slice to whatever size and position you need it to be. You can also right click and go to "Edit Slice Options" to enter the dimensions automatically. Keep slicing until you get all of your sections figured out, then save it as your html page. If you want to do imagemaps or rollovers, go to File > Jump To > ImageReady.

Good Luck

 

 

 

Comment/Reply (w/o sign-up)

Well incase this helps, I assume u have the full image as a gif and all the text you want to put up as links are in the image itself.

You will need dremweaver for this, the process here is called Image Mapping by creating HotSpots. HotSpots have links attached to them, HotSpots can be of any shape from a circle to a rectangle. When someone moves a cursor over the image where say you have a hotspot put on a text "HOME", the cursor changes into a finger, indicating a link. Here is how you do it:

Open up DreamWeaver, Insert the image file. Save your current work as a HTML file with the picture in the same folder. Select the image by clicking it and you will see a hotspot panel at the bottom left of the properties. Click on a shape and draw it over the text or area you want to use as a link. When you are done select the arrow tool to get out of the hotspot tool. Now you will see a transparent blue layer over the text or the area you wanted to select as the link.

To add a link, select the hotspot and type in the link in the properties or browse the file you want to link it to (remember all files related to your website or HTML should be in the same folder). The link box will have a " # " by default so delete this and type in your link.

Hope this helps

Regards
Dhanesh.

Comment/Reply (w/o sign-up)

Okay, here's what you want to do...

Your website would have a template package.. within that package/ module - there would be a folder full of images. Now, the images in this folder would be used to create the specific areas of the output HTM file that is sent to the browser.

So the simplest way to go about getting the template psd image to get onto your website is to splice the PSD into little bits - bits that corrospond to the images in the template module folder. You'll have cornor images, BG images & pixels, you'll have block side and header images etc...

Open up a new layer in your PSD and import the images from your template folder. Overlay these on your seperate layer in the sections of your new template and splice the image into parts that corrospond to the images from your website template.

PM me should you require more help.

Comment/Reply (w/o sign-up)

I have a question about slicing. Isn't slicing used to make image links? I have both Photoshop CS and Dreamweaver 8. I know a good enough amount of making Photoshop web layouts but instead of slicing, I use the Marquee tool to copy and paste areas and save them as individual .gif images. Can you tell me what the difference is between slicing and my method?

Comment/Reply (w/o sign-up)

Well, I was talking about slicing a template image into the corrosponding bits relating to borders, corners, headers.. etc.. these form the very basic structure of a webpage design as defined by the rendering machine through the css/ template page it outputs. You may slice an image to make links out of or use scripting to define any area of a page (which may corrospond to an area of an image that you'd like a link over which to appear) as a link. Of course, in a template design, bits of the template result in link areas (which may be images) in which case, whichever way you look at it, it'd be using an image as a hyperlink.

Comment/Reply (w/o sign-up)

Okay, I just got the new version of Photoshop (cs2). I tried slicing my webpage layout. I found a way to export it as an html but the thing is i want to know how you guys export or save your psd files as html.

Another problem I have is that when I open up the webpage in Dreamweaver, the DIVS are filled up obviously because of the sliced up images. Is there a way to but text and images over the DIV so that the layout image would be like a background? What I tried doing is editing the DIVs and making their background the sliced image and then put text over it. Is that the proper way or is there another way of doing this.

Problems need to resolve:
1. Saving PSD as HTML
2. Putting in text over the DIV layer

I need help ASAP

Comment/Reply (w/o sign-up)