SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tutorial on building a website from Photoshop psd files

    Buongiorno from 2 degrees C sunny Wetherby UK :-)

    I know front end developes build web sites from a designer whos passed on there artistic vision in pile of photoshop psd files. Now whilst i can get a tonne of tutorials on CSS & HTML where can i get some experience of building sites from photoshop files?

    Ive Googled around & got a tonne of garbage so if any Sitepoint member can point me towards a resource that introduces you to the process of converting photoshop files into a website I'd be eternally gratefull.

    Grazie tanto,
    David
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Have a look at the community book we put together a few years ago. It has a chapter by Paul O'B on this:

    http://www.sitepoint.com/thinking-we...the-community/

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just downloaded it, Chapter 5 Perfect - Thank you Ralph :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    Non-Member
    Join Date
    Jun 2012
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you considered just getting software that does it for you automatically? PSD to HTML conversion can be done with SiteGrinder. I use it all of the time to get my PSD designs into working sites. It saves me time instead of having to slice and such. Lately, I've been using the PSD to Wordpress conversion plug-in because I recently moved over to Wordpress.

  5. #5
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by shanshan View Post
    Have you considered just getting software that does it for you automatically? PSD to HTML conversion can be done with SiteGrinder. I use it all of the time to get my PSD designs into working sites. It saves me time instead of having to slice and such. Lately, I've been using the PSD to Wordpress conversion plug-in because I recently moved over to Wordpress.
    Really? How is the code that it spits out?
    I have had a look in the past at apps like SiteGrinder and decided it would be easier and much quicker to crop and remove just the parts that I needed fro the psd and write the code by hand.

    If things have changed and the code is of a high standard then fair enough but I really have found no use for them.

    Could you give us an example of the type of site you have done and have online?
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Personally, I just use the PSD files I'm given as a guide. I just rebuild the page from scratch. I don't care if it's slower, because I end up with a much better coded page. The PSD file is only really useful for colors etc. If it has background images, I hide the other layers and save them for the web—often having to modify them first so that they tile nicely etc. (Print designers tend to foget about that issue.)

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    From a designer's point of view, I'd expect you to do that, @ralph.m! (although it must be noted not all designers might feel the same way). Make sure to keep the designer in the loop as changes might be made that alter the intent of the design. I think 'artistic vision' is rubbish, but the design has to serve a purpose. I do weigh up a lot of considerations when designing that can impact on legibility, UX and communication and sometimes this is altered in the conversion to code. I'm sure you probably already do this with designers you collaborate with, but not all devs do and I thought it was worth a mention

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cheli View Post
    I'd expect you to do that
    The whole PSD to HTML industry seems to see it differently, though, sliding up the PSD as a bunch of images and pasting them into the page. Awful ...

    Quote Originally Posted by cheli View Post
    I'm sure you probably already do this with designers you collaborate with, but not all devs do and I thought it was worth a mention
    Yes, certainly, although it is depressing that lessons don't seemed to be learned. Designs keep coming with background effects cut off at the sides (with no thought for the ever expanding canvas of a web page), the assumption of fixed heights for everything ... the list goes on. This is after a lot of coaching and explanation of the nature of the web.

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I can see how that's incredibly annoying. Here's hoping they eventually listen and learn from your feedback

  10. #10
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Personally, I just use the PSD files I'm given as a guide. I just rebuild the page from scratch. I don't care if it's slower, because I end up with a much better coded page. The PSD file is only really useful for colors etc. If it has background images, I hide the other layers and save them for the web—often having to modify them first so that they tile nicely etc. (Print designers tend to foget about that issue.)
    And this is the best way to do it! Automated tasks can`t do it right. Never.

  11. #11
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, certainly, although it is depressing that lessons don't seemed to be learned. Designs keep coming with background effects cut off at the sides (with no thought for the ever expanding canvas of a web page), the assumption of fixed heights for everything ... the list goes on. This is after a lot of coaching and explanation of the nature of the web.
    And that is just because a designer MUST know how to turn his own work into html template. This gives him the skill to create functional sites from the beginning, thus saving coder`s time.

  12. #12
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I always thinks its odd that in some agencies the designer & front end develop are seperated. In an ideal world me thinks the designer and front end developer should be one.
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Zygoma View Post
    In an ideal world me thinks the designer and front end developer should be one.
    That covers a lot of skill sets, though. They should just have a good understanding of each other's discipline, without necessarily being good at it.

  14. #14
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello! I think 'artistic vision' is rubbish, but the design has to serve a purpose.
    www.cusabio.com/pro_3.html antibody


Bookmarks

Posting Permissions

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