www.webdeveloper.com
Results 1 to 2 of 2

Thread: Transform photoshop image into working page

  1. #1
    Join Date
    Jul 2006
    Posts
    146

    Transform photoshop image into working page

    Hi,

    I have a photoshop mockup, psd file and would like to use that as a background image on the site and have the buttons which are etched into that image be hotspots that react to mouse clicks. What do you think is the best approach for doing this? Can i just use the image as a body background image, and use css created hotspots?

    For mobile, i am thinking of doing the same approach, but using different sized images depending on the screen size. But then, the expand option of the mobile device wont respond, will it ... ?

    I would really appreciate some practical guidance to get me started. I have been developing as a day job for a long time, but this is my own contract and i am having to think of things others do for me during the daytime.

    Thanks for replying.

    mp

  2. #2
    Join Date
    Mar 2012
    Posts
    1,191
    Quote Originally Posted by mparker1113 View Post
    I have a photoshop mockup, psd file and would like to use that as a background image on the site and have the buttons which are etched into that image be hotspots that react to mouse clicks. What do you think is the best approach for doing this?
    I think that the best approach is to use Photoshop as a creative guideline, but to develop the web site using HTML, CSS etc... Why? see below...

    Quote Originally Posted by mparker1113 View Post
    For mobile, i am thinking of doing the same approach, but using different sized images depending on the screen size. But then, the expand option of the mobile device wont respond, will it ... ?
    The zoom option is only disabled if you chose to disable it. However, I would suggest that this approach will only work if you are going for a niche market, like iPhones. Why? Because IE8 (and below) do not obey media specific code, and they still account for 16% of global web usage. Which is an awful lot of users. So, if you instruct one graphic to be displayed on high res screens, and another on low res ones, IE8 will display both! Which will make a right mess of your carefully crafted layout.

    The alternative of dynamically scaling a single graphic might get round that, but involves sending a large image to mobile devices which:
    a) Is likely to be slow (even on 3G).
    b) May fail, depending on the bandwidth available.

    Then there is the alternative of setting up different sites, which is a nightmare unless you have an army of staff to do the donkey work. Even then, you still have the problem of how many screen sizes to support?

    So what is left? Fluid design, with media specifics limited to suppressing content on "handheld" devices, (i.e. not providing alternative content). Even then, you may need to be careful with image sizes. I've not yet been able to test whether suppressing output of large graphics with "display: none;" stops the graphics from being downloaded. That is work in progress...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles