Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I am trying to understand what is the effect that is applied in the dashboard icons of Facebook and LinkedIn android application. They change the icon when the user press it, replacing to another darker icon. In the following links you can see the original icons.

LinkedIn:
enter image description here

Facebook:
enter image description here

I am not a photoshop expert so I can't figure out what is the effect that was created in the hover icon. It seems to be a gray transparent mask over the original image. I am thankful for any answer to this question that can lead me to the same effect.

Also, what is the best approach to have the same border lines in my icons. They have smooth borders using a lighter color.

share|improve this question
1  
any chance you can also provide a screenshot of the "darker icon" or the hover icon you're asking about? –  Lauren Ipsum Apr 23 '11 at 1:31
    
@lauren-ipsum/@laurenIsum hey... check this out, twitpic.com/4ok84t you can see Connections image without effect and connections image with effect (darker color). In this one twitpic.com/4ok8bt, you can see friends and messages icons with darker effect. Do you know how to achieve this? –  Thiago Apr 23 '11 at 18:53

1 Answer 1

up vote 4 down vote accepted

dear thaigo this answer is based on what I understood:

  • Normal and hover icon effects can be achieved with CSS.
  • Normal images have less fill in photoshop and hover images full fill

A 1 px stroke has been applied to the hover icons. You can reduce their opacity or fill to gain a clean stroke, take a look at this image, I tried to let you know whats happening within Photoshop, hope this gives you some clues...
enter image description here

share|improve this answer
    
Hello @leugim and @Jack, thank you guys for your reply. Since I am building an android application, i cant use css. I need to edit my original images and then apply these effects. Take a look at how my dashboard look like. twitpic.com/4oh4pw . So, according to you reply, for the border i need to apply a 1px stroke in photoshop. But te first effect, since i can not use css, how can I create a layer over the original image which will make the image a little bit darker. –  Thiago Apr 23 '11 at 17:35
    
As I understand it apps generally use sprites. one image with all the states in it. On Android it might be different, though. You can create the normal state in photoshop, export that and then create a new layer on top with a black fill and, for example, 20% opacity then export the image again. I found some guidelines here: developer.android.com/guide/practices/ui_guidelines/… . As for photoshop you need to research Blending Effects and adjustment layer also Layer masks are very useful. –  leugim Apr 23 '11 at 20:04
    
What I did, I created the image... created a new layer with 30% opacity and filled with black. After that created a clipping mask to keep the transparent background and it was fine! Thanks for all the help! –  Thiago Apr 23 '11 at 20:07
    
leugim thanks for corrections :) –  Jack Apr 25 '11 at 4:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.