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

what do I do from here?

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...

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...

1064336237[/snapback]

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

you need too slice it

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

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 :)RegardsDhanesh.

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.

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?

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?

1064337528[/snapback]

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.

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 layerI need help ASAP

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

1064338012[/snapback]

I use PS CS1 so I'm not sure what changes are in the newest version. I might be confused on the request here but here's my 2 cents, heh.

 

You will want to save your PS images as a graphic format such as JPG, PNG, GIF, etc. HTML is what you will use to place the images on your webpage. (If you understand this skip ahead).

 

Now if you're using the slicing options in PS it will save an HTML file with the code to place your image back into it's un-sliced appereance. To change the placement of the images so they are background images you will need to remove the image links from within the tablecell and place them in the tablecells property tag (ie the <TD> tag).

 

Example:

 

If the PS HTML file shows:

 

<table><tr><td><img src="http://forums.xisto.com/no_longer_exists/;

You will want to change it to:

 

<table><tr><td background="http://forums.xisto.com/no_longer_exists/, blah, the text you want OVER the images.</td></tr></table>

You can also use CSS position tags to place objects over each other.

 

I hope I understood the question and have been able to help.

You can also use CSS position tags to place objects over each other.

maybe CSS position tags is the solution to my own placing problems. My images move anywhere in my page, while I want them to stick to the top of the page.Now I probably need to learn how to put CSS position tags...

I use PS CS1 so I'm not sure what changes are in the newest version.  I might be confused on the request here but here's my 2 cents, heh.

 

You will want to save your PS images as a graphic format such as JPG, PNG, GIF, etc.  HTML is what you will use to place the images on your webpage.  (If you understand this skip ahead).

 

Now if you're using the slicing options in PS it will save an HTML file with the code to place your image back into it's un-sliced appereance.  To change the placement of the images so they are background images you will need to remove the image links from within the tablecell and place them in the tablecells property tag (ie the <TD> tag).

 

Example:

 

If the PS HTML file shows:

 

<table><tr><td><img src="http://forums.xisto.com/no_longer_exists/ https://g;

You will want to change it to:

 

<table><tr><td background="http://forums.xisto.com/no_longer_exists/ https://g, blah, the text you want OVER the images.</td></tr></table>

You can also use CSS position tags to place objects over each other.

 

I hope I understood the question and have been able to help. 

1064338018[/snapback]

I see, so I guess I was doing the same thing others were doing to make the images a background. I thought there was an easier way of doing it such as making them as backgrounds in photoshop, but I guess the coding method is what other people do. Thanks for the help.

.psd

How To Use Psd File

 

Hi,

 

I just bought a bunch of .Psd templates and do not know how to use them with Photo Shop or how to get them on the net as my site. I am starting a web hosting company and hope someone here can shine a little light on me.

 

Thanks.

 

-Jeremy

using .psd and .cdr files in php

How To Use Psd File

 

Is there any technology which is used to implement/use .Psd (adobe) or .Cdr (coreldraw) source files with PHP / Javascript or any other computer programming language please tell me I'm in very much trouble at the moment

 

-question by noman