3 Replies Latest reply on Sep 13, 2009 8:58 AM by pixlor

    Quick question about hue / saturation / transparency etc

    johngordon12 Level 1

      I'm basically doing a simple photography website for a friend, and an trying out a few mouseover effects for the thumbnails.

       

      Initially I tried reducing the transparency, and now the brightness, but neither seem, quite right.

       

      Looking around online for what works well, I stumbled across Peter Lik's website.

       

      If you look here :

       

      http://www.peterlik.com

       

      And click on Collections to bring up a thumbnail gallery, can anyone with an eye for these things advise me as to what changes in hue / saturation / contrast etc look like they'd create the dulled thumbnail image compared with the brighter one when you mouse over.

       

      Many thanks.

        • 1. Re: Quick question about hue / saturation / transparency etc
          pixlor Level 4

          Looks like about 45% opacity over black.

           

          The middle of the image is a screen capture of the faded, the outside images are screen caps of the mouseover states. It's a Fireworks .png document, so you can see how it works.

           

          gallery.png

          • 2. Re: Quick question about hue / saturation / transparency etc
            johngordon12 Level 1

            Thank you!

             

            I originally just did the thumbs as a 60% opacity, but it was a default white background. I hadn't finished off a full gallery, so was showing the guy the Peter Lik page as an example of the effect. Looking at them together, we reckoned the Peter Lik one was more effective, as the reduced opacity on the white background was a bit washed out looking.

             

            So then I was trying different combinations of the brightness, which needed countering with the contrast, and I couldn't quite seem to get it.

             

            But you've hit the mail on the head - reducing the opacity on a black background is the winner!

             

            Many thanks for prepping that example PNG - much appreciated.

            • 3. Re: Quick question about hue / saturation / transparency etc
              pixlor Level 4

              You're welcome!

               

              Examples help me figure things out. Because of the way the thumbnails load into grey squares on the site, I'd originally thought he had them set over a medium grey. But after I set the canvas black to give the outer thumbnails a border and turned down their opacity, I realized I was about there. I just experimented with the opacity number till it looked right. Without a specific goal, I think most people will go for 5% increments.

               

              Glad I helped!