PDA

View Full Version : Using .PSD files as background image


humpfry
11-11-2011, 06:10 PM
I have been using dreamweaver cs5 for a few months now to make a website for my father and recently i have been having problems with background images. I have been downloading 1920*1080 wallpapers from sites and using them as background images but if i edit one of these images in photoshop, the file is automatically saved as a PSD file. When i try and select the file location in the edit rule area for the background image, dreamweaver says that it needs to convert the psd to a jpeg or another extension. I select to change it to whatever extension but the background image will not appear and when i go back to the edit rule area there is no file location in the background image file location selector. I have tried converting the psd files to all kinds of different file extensions but nothing will make the background image appear. I have even put the image in fireworks which flattens all the layers and saves it as a fireworks png file but that does not even work. If anyone could possibly help me it would be greatly appreciated. Thank you!

johnMoss
11-11-2011, 10:58 PM
1) In Photoshop, click file up at the top left, then choose save for web & devices.
2) You should a series of choices, which have to do with the size of the file. Choose the second one.
3) To keep things simple, look up at the top right of the box that opened and you will see either JPG, PNG, or GIF. Choose JPG if necessary.
4) Click save, and navigate to your site images file.
5) You're all set, and the file will certainly be a fraction of the size it was.

DWcourse
11-13-2011, 03:57 AM
Actually, you can place a PSD image in photoshop as an img or a background. In either case DW should open the Image Preview dialog and allow you to preview the image, choose an image format (jpg, png, etc.) and other options for the placed image. When you click OK the Save Web Image dialog should open and allow you to choose the location for saving the file in its new format. You should, of course, save it somewhere within the folder containing your site. For all this to work properly you must have your site set up correctly.

humpfry
11-16-2011, 05:46 PM
johnmoss, i have tried to use the save for web and devices multiple times but it has not worked. i did not understand what you meant about the option for file size but the other night when i read your post i decided to fool around with the settings for saving for web and devices. believe it or not all i had to do was turn the quality up to 100 and then it worked. Thank you for guiding me in the right direction.

johnMoss
11-16-2011, 05:56 PM
Hmmm... That should not matter. Quality of course gives a better picture, but that setting can be manipulated to reduce the file size, which is something that starts to matter if you are using many pictures on one page.
I encourage you to play with it some more, and to fool around with the settings. You can save as GIF, PNG, & JPG. Each file type has it uses, and for now a simple rule of thumb is as follows
GIF- simple or few colors.
PNG- a lot of colors
JPG- a lot more colors, as in complex imagery or photographs.

domedia
11-16-2011, 11:58 PM
PNG support just as many colors as a JPG or GIF btw, the rules of thumb for JPG and GIF are really good.

domedia
11-17-2011, 12:33 AM
Also, turning the jpg quality to 100% is not the solution, although it seemed like it is..

When you have the file like you want it in Photoshop, do 'save for web and devices'.

Saving for the web is a basic functionality for PS, so maybe look at the manual too? This is not hard at all.

johnMoss
11-17-2011, 12:37 AM
I've not looked into it too deeply, but my own approach is simply if I don't think an 8 bit png is sufficient, I'll go with jpg just to simplify things. Taking an environmental approach about it, i.e. don't lock up space I don't need sort of thing...

johnMoss
11-17-2011, 12:39 AM
Saving for the web is a basic functionality for PS, so maybe look at the manual too.

Definitely. H, won't take 20 minutes & you'll have it down forever...

domedia
11-17-2011, 01:30 PM
8 bit PNG's are comparably to GIF's. They basically do the same thing. Sometimes a 16 color GIF is of smaller size and somestimes the 16 color 8 but PNG is lower size. The 24 bit PNG has alpha transparency, which neither JPG or GIF has.

d a v e
11-17-2011, 02:57 PM
from what i've read - but i can't point to any hard facts - the general consensus is that png-8 is usually around 10-20% smaller than an equivalent gif (or something like that;) )

and of course 8-bit png also supports *alpha* transparency : natively in fireworks, and there was some way of doing it in photoshop too http://www.ethangardner.com/articles/alpha-transparency-in-png-8-images-without-using-fireworks/

DWcourse
11-17-2011, 03:18 PM
Just an obscure fact for Dreamweaver users. DW CS4+ also supports importing a Photoshop file as a smart object and saving it as an 8-bit gif with alpha transparency. You can get some good results at a relatively small file size.

d a v e
11-17-2011, 03:27 PM
i've often read (but cant rememmber where) that 8-bit png is usually about 10% smaller than equivalent gif.

also worth noting is that png-8 also supports alpha transparency: natively in fireworks and http://www.ethangardner.com/articles/alpha-transparency-in-png-8-images-without-using-fireworks/

domedia
11-17-2011, 04:05 PM
i've often read (but cant rememmber where) that 8-bit png is usually about 10% smaller than equivalent gif.

Depends on the image really, from my initial testing in PS some years ago. This might have changed in recent versions

ialso worth noting is that png-8 also supports alpha transparency That is great news! Do you know if someone made support in PS for this? Like they the ICO plugin does for favicons?

.

domedia
11-17-2011, 04:06 PM
Just an obscure fact for Dreamweaver users. DW CS4+ also supports importing a Photoshop file as a smart object and saving it as an 8-bit gif with alpha transparency. You can get some good results at a relatively small file size.

I was wondering about that Jim, but your first post said "Actually, you can place a PSD image in photoshop as an img or a background."

d a v e
11-17-2011, 05:57 PM
"That is great news! Do you know if someone made support in PS for this? Like they the ICO plugin does for favicons?"

yes, well sort of
http://www.ethangardner.com/articles/alpha-transparency-in-png-8-images-without-using-fireworks/

d a v e
11-17-2011, 05:58 PM
ogh sorry i posted the same link again - i dont think there is a ps plugin, only the separate app that you can convert your exported file from photoshop

DWcourse
11-17-2011, 08:13 PM
I was wondering about that Jim, but your first post said "Actually, you can place a PSD image in photoshop as an img or a background."
I tried to explain the process a bit in the rest of the post but probably wasn't clear. I think I actually have a video of the process somewhere, Ill see if I can find and post it.

johnMoss
11-17-2011, 11:02 PM
Sounds like gif desirability is about down to low res moving objects then?

domedia
11-18-2011, 03:04 AM
Sounds like gif desirability is about down to low res moving objects then?

Statement asked as a question, love it :)

I don't agree, but the differences in PNG and GIF on that level are marginal imho; it doesn't matter.

DWcourse
11-21-2011, 03:53 PM
I found and posted the video on using Photoshop Smart Objects and other web images in Dreamweaver:

Web Images and Photoshop Smart Objects in Dreamweaver: http://www.dwcourse.com/dreamweaver/images-photoshop-smart-objects.php

Tomcat104
11-29-2011, 04:13 PM
I started off using only JPG files, then "save for web & devices" where I usually chose GIF's then had some trouble with transparency and switched to PNG files. I still use all 3, trying to decide if quality or file size is the most important.