14 Replies Latest reply on Aug 22, 2009 7:01 AM by Wade_Zimmerman

    Icon with reflection - messy on coloured background

    stradle

      I got an icon pack which was an Illustrator file, its pefrect on a white background, but my website is not going to have a solid white background.

      Each icon is seperated into layers, but I dont know how to save it in a way that I can have it showing up on different backgrounds.

       

      I know the issue is because the whole icon is mirrored, but a lot is white and that is contrasting with my backgrounds, but I just dont know how to fix it.

      Any help would be really appreciated,

      Thanks.

       

       

      green-1.jpg

      white-1.jpg

        • 1. Re: Icon with reflection - messy on coloured background
          Doug Katz Level 4

          Are you familiar with Illustrator?

           

          Do you know how to use the gradient tool?

           

          You'll need to change the gradient colors so the shadow fades to your background color.

          • 2. Re: Icon with reflection - messy on coloured background
            Steve Fairbairn Level 5

            Yep, but you can get most of the way by setting the reflections to Multiply.

            • 3. Re: Icon with reflection - messy on coloured background
              Wade_Zimmerman Level 6

              If you ate using CS 4 then it is not necessary to use multiply but rather to make the gradient from the color you want, in this case actually the color of the solid with a transparency setting to a transparency of 0%. The white background should be set to a fill of None.

              • 4. Re: Icon with reflection - messy on coloured background
                Jesseham Level 4

                And you might look into making the reflections compound paths as well which will allow the gradient to run along the entire reflection as opposed to along each object within the reflection.

                • 5. Re: Icon with reflection - messy on coloured background
                  Scott Falkner Level 5

                  Rather than fill the reflection with a gradient, fill it with a solid colour. Use a gradient on a rectangle over top of the reflection as an Opacity Mask (search help files).

                  • 6. Re: Icon with reflection - messy on coloured background
                    Wade_Zimmerman Level 6

                    In CS 4 it is not necessary to use the opacity mask since gradients 

                    now support transparency.

                    • 7. Re: Icon with reflection - messy on coloured background
                      gprobst

                      I'm loving being able to set transparency values in the gradients, but I think in this case, I'd go with the opacity mask, since you could change the color of the icons (should the need arise) pretty much on the fly without having to deal with gradients.

                      • 8. Re: Icon with reflection - messy on coloured background
                        Wade_Zimmerman Level 6

                        Yes but they made that easy as well click the color marker and select

                        either the swatch or color panel all with in the gradient panel and

                        select your color pretty much on the fly.

                         

                        It could not be simpler.

                         

                        So the opacity mask is really not the way for instance if you choose a

                        lighter color say a ale yellow in order to get the same impression you

                        might have that it less transparent  on the dark end and then might

                        have to change the mid point as well.

                         

                        All there right in front of you, no trap doors or hidden passageways.

                         

                        I did a video for those who do not have CS 4 to see where this all leading us to a cleaner work flow.

                         

                         

                        http://mysite.verizon.net/wzphoto/Gradient.mov

                        • 9. Re: Icon with reflection - messy on coloured background
                          Steve Fairbairn Level 5

                          For a simple job like this there's nothing wrong with the mulitply method I mentioned.

                          If you are on CS4 there's nothing wrong with making use of the gradient transparency stops feature either.


                          This example was done on CS3 with the reflection set to multiply at 75% opacity.

                          Looks o.k. to me, and of course the background can be in any colour you like.

                           

                          cup3.jpg

                          • 10. Re: Icon with reflection - messy on coloured background
                            Wade_Zimmerman Level 6

                            In CS 3 you have to use the multiply or opacity mask it simply is not necessary to use it in CS 4.

                             

                            Even if it looks good to you does not men you do not have more control in CS 4 as both color markers can have a transparency setting.

                             

                            I drew this not so good but it demonstrates the control you have with C S 4 of course we do not know what the OP has so it is really difficult to
                            recommend a method but for those who do not have CS 4 it is something to think about just for ths feature.

                             

                            Picture 2.png

                            • 11. Re: Icon with reflection - messy on coloured background
                              gprobst Level 2

                              I hear ya on the "trapdoor, hidden passageway" aspect. It seems like the way the opacity mask mode is set up in Illustrator is like switching into an alien world. I was thinking that the opacity mask would be more simple, because you could group the object and its reflection together and then changing colors would only require the single click of a swatch. However, I can see your point with switching to lighter colors and possibly needing to modify the midpoint or color stop positions of the gradient, which in the case of using the opacity mask would require directly selecting the reflection, entering the opacity mask mode, and then modifying the gradient. Given that situation, the whole idea of trying to simplify things using the opacity mask would fall apart.

                               

                              I appreciate being able to see all the different approaches possible to achieve similar results. And in the case of the O.P. I think Steve's suggestion of setting the blend mode to Multiply is probably the quickest and easiest solution. Using the Gradient Tool in CS4 certainly offers more control, but if the O.P. just wants to be able to place the icons over different colored backgrounds and be done with it, then the Multiply method is just as good as any.

                              • 12. Re: Icon with reflection - messy on coloured background
                                Wade_Zimmerman Level 6

                                gprobst

                                 

                                If the OP is using CS 4, and that is an if, you have to make a gradient first then you have to set it to multply.

                                 

                                Think about that, you first have to make a gradient…let me if you see what I ean?

                                • 13. Re: Icon with reflection - messy on coloured background
                                  gprobst Level 2

                                  That would be absolutely correct if the OP were trying to create the icons. The OP said that he/she got an icon pack as an Illustrator file and wanted to be able to place them on non-white backgrounds. In the case of the original question, the icons and the gradient already existed. Steve's suggestion to set the "reflection" layers to Multiply would be a viable solution without the use of the Gradient Tool.

                                  • 14. Re: Icon with reflection - messy on coloured background
                                    Wade_Zimmerman Level 6

                                    You know you are right I actually read the OP wrong, it was not clear that the mirrored art was already created.

                                     

                                    It only says that they know the problem is because the art is mirrored.

                                     

                                    So multiple would be faster.

                                     

                                    I still think if they are working in CS 4 they might want to make the white color marker in the gradients the same color as the solid
                                    of the icon and set it to a transparency of 0% and then do the same of the other color marker and set the transparency to less than 100%.

                                     

                                    The other thought I have since the OP is not still around is that if this is a group setting the group to multiply does not work as that would effect the icon as well and for accuracy sake setting the gradient filled reflection art to multiply might have an effect on the way the color overlaps the background since it had to be made from a tint or lighter version of the solid fill color as opposed to a transparency of the color as you can now achieve in CS 4.

                                     

                                    I think multiply will make it not nearly as soft since it is multiply. But of course that might not be an issue for the OP.

                                     

                                    But you can see my concerns. I know the OP sys they are on layers but if the icon and reflections are on different layers.

                                     

                                    You are correct though for the OP's needs multiply might work faster.

                                     

                                    Updated:

                                     

                                    That got me to thinking and so I made my example with a a darker green background and that also make the the color of the reflection darker
                                    As such

                                     

                                    Picture 8.png

                                     

                                    But when I set this to mode of Hue it looks like this

                                     

                                    Picture 9.png

                                     

                                    Which I think in many cases would be desirable, just thought everyone would find this interesting.