Discussion in 'Graphic Design' started by scrapmom, Oct 27, 2008.

to remove all ads.
  1. scrapmom

    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.
  2. 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: Oct 28, 2008
  3. 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!
  4. suz

    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.
  5. 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: Oct 29, 2008
  6. naresh_420_411

    naresh_420_411 New Member


    when photo shop 300pix/inch is done your web image; then u select "save for web" option in file menu and save the image; that is saved by 75pix/inch; that is clear and sharp image for ready to using

    [email protected]
  7. suz

    suz New Member

    lol Voodish
  8. 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.
  9. Lally Nettie

    Lally Nettie New Member

    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?

Share This Page