I am designing for an app, where there are two tabs at top and bottom of them there is a table/list with some content. The tabs are added drop-shadow layer style in photoshop, and so the blur portion of shadow comes on top of table content (giving impression that tabs are top-level element and table/list content will go beneath them on scroll).

Now my developer says, in Android this is not getting possible. As the table content is starting where tab image shadow is lasting (i.e. the blur portion), causing extra pixels white space between tabs and table/list content. The blur portion of shadow is not coming on top of table content as its in my design.

Could anyone please let me know what should be the solution for this? Do I need to change the way I created images, or developer should do something else to get this work.

| improve this question | | | | |
  • 1
    Why are you designing in Photoshop in the first place? If it's for an app then you should be designing it using actual elements that are available for the OS. Photoshop is for editing and manipulating photographs, apps are not photographs. – JonW Jan 14 '14 at 11:50
  • 1
    @JonW - It is a common practice to design skeuomorphic interfaces, graphics-rich sites/UIs, and modern wordpress sites using photoshop. Just google for PSD to HTML to sense how common that is. – Izhaki Jan 14 '14 at 12:25
  • 3
    @Izhaki: Yes, it's common, but it leads to these very issues. Just because something has always been done that way doesn't mean it's always going to be appropriate. The web changes, android devices are all different, resolutions are all different... If you were to design for all permutations in PS then you'd spend years just designing it. Perhaps the time is right to leave Photoshop to the photo editors and pick up something new that's fit for purpose instead. – JonW Jan 14 '14 at 12:30
  • @JonW Do you have a tool you suggest? I notice often people say "don't use or do x" without offering a set of alternatives. (anecdotally I just write the stuff in html) – VoronoiPotato Jan 14 '14 at 18:36

Your developer is right. Controls on screen generally can't 'leak' to the area of adjacent controls. For graphically complex interfaces, instead of using the native graphic engine, a special graphic engine is needed. You should remove the drop-shadow or any other outer bounds graphics.

As a graphic designer your deliverable is the photoshop document. If the stakeholder still wishes for the actual UI to be identical to the photoshop file, the developers will have to sort that out and you may need to produce custom graphics (like the shadow alone, so it can be place on the boundary of the adjacent control).

| improve this answer | | | | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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