Skip navigation
Currently Being Moderated

Color Issues .... Background vs PS Image not matching ......

Jul 5, 2013 5:21 AM

I am rebuilding a website using a color scheme that I have used numerous times. However this time it is not working properly.

 

The Background color for the website is #dddddd.

 

In PS I am using RGB Background color #dddddd and then I 'place' an image on that and then I take it over to Dreamweaver.

 

It is not a perfect match like it should be. I have checked various things ... like RGB color mode in PS and that's ok.

 

What am I missing.

 

I have created several websites before where this actaully worked right.

 
Replies
  • Currently Being Moderated
    Jul 5, 2013 5:37 AM   in reply to MelissaHoffmann

    MelissaHoffmann wrote:

     

     

     

    In PS I am using RGB Background color #dddddd and then I 'place' an image on that and then I take it over to Dreamweaver.

     

     

    Instead of using the color #ddd in PS, why not use the background to be transparent so that it blends with the website colors.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 5, 2013 2:15 PM   in reply to MelissaHoffmann

    Your workspace should be transparent -- denoted by a checkerboard pattern.  Save for Web as PNG with transparency.  See screenshot from PS:

    Twitter-Icon-Saved.jpg

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 5, 2013 2:33 PM   in reply to Nancy O.

    I concur with Nancy - save as a full 24bit png in Photoshop, and you will save yourself the trouble with background colours.

     

    The only issue with Photoshop's png export is the lack of an indexed colour pallette option with a full alpha channel. It results in far too heavy png images that impact the loading times of a web page quite severly. In that regard Photoshop is still stuck in the nineties.

     

    To solve this, download Color Quantizer (free), and optimize your Photoshop 24bit generated png (actually a 32bit png when it includes an alpha channel), and decrease the number of colours while retaining full transparency!

     

    The cool thing about CC is that is supports a limited colour palette beyond 256 colours as well (which Fireworks, while it supports full alpha channel with indexed coloured png files cannot achieve either!). And for those crucial areas you can use a simple quality mask brush tool to make sure those areas remain identical to the original.

     

    Take this icon as an example: the original PH version is 273kb. The optimized 512 colour version is 85kb. Quite a difference in file size, while maintaining full transparency and full visual quality.

    Untitled.jpg

     

    Get it at http://www.softpedia.com/get/Multimedia/Graphic/Graphic-Others/Color-q uantizer.shtml

    Sadly, no mac version. A real shame.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 9, 2013 9:23 PM   in reply to MelissaHoffmann

    I Have A Site. I Want To Create A Nice Logo. How Can I Create A Nice Logo ? Please Help Me.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 10, 2013 4:03 AM   in reply to Songsa4u.com

    Please post your question in a new discussion..Follow the thread http://forums.adobe.com/docs/DOC-2322

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points