PDA

View Full Version : Psd website template



Chris4
Dec 20th, 2008, 06:18 PM
Hey,

So I downloaded a website template. It's got a html folder.. which has images, css and html files. Some of the images are for the menu, so it's a bit hard if I wanted to add something to the menu, which I do.

Then there's a PSD folder containing a Photoshop file, which is the layout and you can edit everything easily. There's also a fonts folder containing the different fonts for the layout; I imported these to my computer so I could edit the layout.

So.. my question is.. after editing everything in Photoshop, I've got the layout how I want, how do I put this onto my website? Is the answer to do with 'slicing' (I did a bit of research), or is there another way? Is slicing easy or hard to do?

Thanks,
Chris :)

Edit: Someone just told me FILE > SAVE FOR WEB, I tried that but it makes the text as an image, so I wouldn't be able to have text as hyperlinks.

Excavator
Dec 20th, 2008, 06:49 PM
Hello Chris4,
.psd files are just an image document created by PhotoShop. There is a lot of work between having an image and making a website and there is no single button, like save for web, that's going to do it for you.

You might have better luck editing the html files?

Chris4
Dec 21st, 2008, 01:49 AM
My friend showed me on Remote Assistance that you can slice the psd (it is already sliced), then open it in Dreamweaver and edit it, then 'save it to the web' as image and html files. That right?

twodayslate
Dec 21st, 2008, 01:57 AM
Dreamweaver and Photoshop generate really bad code.
Have someone on digitalpointforums code it for you for cheap.

Avril
Dec 21st, 2008, 08:20 AM
Do you have two versions of each image - one in .psd and the other in .jpg?

Usually the menu images are background images, and the text (which you should be able to edit) comes on top of them. The font file gives you a choice of fonts for the text. You have apparently saved the menu divs as images after putting text into it. Images saved as .jpg cannot be edited subsequently. Lay out your page without any text, but with the background images, then in your .html put in your text.

Hope this helps.

Chris4
Dec 22nd, 2008, 04:10 AM
Dreamweaver and Photoshop generate really bad code.
Have someone on digitalpointforums code it for you for cheap.
I wasn't thinking of paying anything, it's just a small website for a friend.


Do you have two versions of each image - one in .psd and the other in .jpg?

Usually the menu images are background images, and the text (which you should be able to edit) comes on top of them. The font file gives you a choice of fonts for the text. You have apparently saved the menu divs as images after putting text into it. Images saved as .jpg cannot be edited subsequently. Lay out your page without any text, but with the background images, then in your .html put in your text.

Hope this helps.
No I don't. Unfortunately they're not background images with text in front, they're actual images which are hyperlinked.

Chris4
Dec 23rd, 2008, 04:09 AM
Hey again. I'm having a few problems, maybe one of you could help me out?

Sorry for being a noob, first time I've done this. :(

In Photoshop, I've got a sliced .psd of my website layout. I then 'Save for Web' as HTML and Images, so I can open it up on Dreamweaver, right?

Problem is, the roll-over image is merged with the normal image in a .gif, so in Dreamweaver I can't set the 'hover over image' as anything.

I can't work out how to do it. The rollover image is a layer in Photoshop, I just don't know how to save that as a separate image or something?

Excavator
Dec 23rd, 2008, 05:20 AM
Like TwoDays said, DW and PS are famous for horrible code.
Here is an example of a CSS rollover done right. (http://nopeople.com/CSS/CSS_rollover/index.html)

-here is a couple examples of that method in action:

one (http://nopeople.com/doodlebug/) two (http://nopeople.com/CSS/2state%20CSS%20navbar/index.html)




To save your image in PS, you should be able to click File/Save As and select the file format you want... jpg I suppose.

Jason1001
Dec 23rd, 2008, 08:21 AM
Hey again. I'm having a few problems, maybe one of you could help me out?

Sorry for being a noob, first time I've done this. :(

In Photoshop, I've got a sliced .psd of my website layout. I then 'Save for Web' as HTML and Images, so I can open it up on Dreamweaver, right?

Problem is, the roll-over image is merged with the normal image in a .gif, so in Dreamweaver I can't set the 'hover over image' as anything.

I can't work out how to do it. The rollover image is a layer in Photoshop, I just don't know how to save that as a separate image or something?

Same problem ! So quoted yours point. Excavator, I find nothing on that so helpful. Need more help on that :rolleyes:

Skin Tags (http://www.skintagsremoval.net/)

Chris4
Dec 27th, 2008, 03:19 AM
Agree with Jason. Any help?

twodayslate
Dec 27th, 2008, 05:26 AM
http://forums.digitalpoint.com/forumdisplay.php?f=103

Chris4
Dec 27th, 2008, 06:01 AM
That's not helping me. I'm not paying someone.

It's a small thing that I don't know how to do, someone with Photoshop experience will know how and can tell me in less than a minute.

twodayslate
Dec 27th, 2008, 06:11 AM
Excavator tried to help you but you shut him down.

http://letmegooglethatforyou.com/?q=PSD+to+CSS 2nd one may be of use

:)

Chris4
Dec 27th, 2008, 06:13 AM
Excavator tried to help you but you shut him down.

It isn't related. He's talking about using HTML and CSS to do an image roll-over. I'm talking about Photoshop/Dreamweaver.

And lmao @ the link.

twodayslate
Dec 27th, 2008, 06:18 AM
It isn't related. He's talking about using HTML and CSS to do an image roll-over. I'm talking about Photoshop.

And lmao @ the link.I assume you will have a navigation for your site. And I assume your navigation will have a hover effect. Excavator told you the correct (and valid) way to code that navigation. He can't help you much more than that - unless he was actually doing all the work for you.
The only thing he did wrong was he told you to save the image as a jpg, save it as a gif or png.

I don't see what the problem is here. Are you having trouble slicing (http://www.google.com/search?hl=en&q=splice+photoshop&btnG=Google+Search&aq=0&oq=splice+phot) the (http://www.entheosweb.com/photoshop/slice.asp) images?

edit:// This is a coding forum. We do things by the book and make sure everything is valid. Using Photoshop/Dreamhost does not do this.

Chris4
Dec 27th, 2008, 06:27 AM
I asked my friend.

The problem was I had two layers on photoshop, one for normal image, the other layer hidden underneath was the roll-over. I had to hide the normal image layers, then Save To Web. With shift held down, select all the roll-over image layers, then Save 'Selected Layers'. Now I can import them to Dreamweaver.

Sorry for your trouble.