photoshop/dreamweaver

S

scrapmom

New Member
Hi all,

First time here...

I've created my template for my website in photoshop CS3 800x600, sliced up the parts and save for web, images and HTML , brought into dreamweaver, and the quality is really bad. It looks all fuzzy and not sharp at all. I have the quality set to very high in photoshop, so not really sure what I am doing wrong. Thanks for any help possible.
 
voodish

voodish

New Member
Hi there, welcome to the forums.

Are your HTML dimensions reflecting the Actual image dimensions?

For example
File Name: logo.jpg
Actual dimensions: 300px by 100px
HTML dimensions: 301px by 101px = This will make the image look blurred / jagged / not sharp

Your HTML dimensions have to be exactly the same as your Actual dimensions or the image will not look as it should; either correct this by entering the correct values or remove completely (the latter not great for accessibility)

A screenshot, or file would help with finding you a solution.
 
Last edited:
adamblan

adamblan

New Member
The first thing you should check is your export resolution - always make sure to find a good balance between image compression & quality. The bad quality you mention is most likely a case of the jaggies caused by exporting a low quality jpeg.
To fix this, after your image has been sliced & diced, go to File -> Save for Web & Devices
Then, in the upper right corner, select "jpeg" from the drop down menu, check the "Optimized" option, and set the Quality to somewhere between 60 & 80- photoshop displays the image file size at the new resolution in the lower left.
Again, balance acceptable quality against acceptable file sizes.

Good luck!
 
S

suz

New Member
As well as all the things everyone said above... sometimes you just have to go with a gif or png format. Sometimes a jpg has to be huge file before the colours look right.
 
voodish

voodish

New Member
Why is it we help people and they never come back!?

I feel used! lol

General web image file format usage
GIF if the colours are < 257 (low qual)
GIF for low qual. transparencies
PNG for high qual. transparencies > 256 colours (yeap, there is code to make them work in IE6 :))
JPEG for more than 256, some overlap here, no transparency available
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
Key thing to remember when optimizing images for the web is when to use the different file types (PNG, JPEG, GIF).
PNGs are great because they hold great detail but you pay for that with large file sizes. Plus PNGs are the best at handling transparency, though I would steer away from transparency in web images as not all browsers handle them the same.

JPEGs should be used with bitmap images/photos or any other image that contains complex detail.

GIFs are great for vector images or any image with slight gradients and large chunks of solid color.

It makes a big difference if you select the right file type when optimizing. I always use the PS "4 UP" method in Save For Web and play with the settings (# of colors, quality). Compare and contrast and find that comfortable medium.
 
L

Lally Nettie

New Member
Hi!!!!
I have been able to import my Photoshop files into Dreamweaver, but want to create a hyperlink with the text that is in the Photoshop document but as the text are infused with the images (merged visible) I am not able to edit or select the text.
What can I do? Would I have to redo the Photoshop document?
Thanks
 
You must log in or register to reply here.
Top