0

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.

Improve this question
2
  • 1
    any chance you can also provide a screenshot of the "darker icon" or the hover icon you're asking about?
    – Lauren-Clear-Monica-Ipsum
    Apr 23, 2011 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, 2011 at 18:53

1 Answer 1

Reset to default
4

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

Improve this answer
3
  • 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, 2011 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, 2011 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, 2011 at 20:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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