SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Photoshop to wordpress

    First of all watsup everyone I just joined!

    Ok I have been trying to figure out the best route to take for converting photoshop designs into wordpress themes. I came across this site: http://divine-elemente.com which made me intrigued, is there any other better alternative then using this software?

    Thanks, looking forward to your thoughts.

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I strongly suggest against using any software for that. I often design mockups in Photoshop first because that's what clients more often than not insist on. But these are mockups, visual guidelines/recommendations, they shouldn't be translated 1:1 into a workable design.

    I can't count the number of PSD designs I've done, but they're well in the hundreds. Never was it ever the case that the actual website looked exactly like the PSD. The more you code, the more you'll realize what works and what makes a design unnecessarily difficult to code.

    They are mere directions. Start with a code editor for the actual WordPress theme. Code the HTML first, the CSS second. When you're done, crop whatever images and backgrounds you need from the PSD file and add them to your HTML and CSS documents accordingly.

    I'm not a purist, so I won't tell you that you must start a design in your browser, though that is indeed good practice. It's one way of doing it. If you have a solid understanding of HTML and CSS, I don't see there being anything wrong with taking a different approach, even if that means starting out with visualizing a design. If that's how you work best and the results are in no way inferior to other means of tackling a design, then there shouldn't be a problem, as long as clients are aware that the visual mockup is precisely that; a mockup.

    Well, you asked for our thoughts.

    My suggestion is:

    1. After you've created your wireframes, visual mockups leave those idle and get to the coding part

    2. Design the HTML document structure for all required pages

    3. Once you have the structure down, get to the CSS, see whether you can use CSS techniques to replace some images (e.g. rounded corners)

    4. When everything's done, go back to your PSD file and crop out only the image portions you actually need. Make sure that backgrounds are neither too big nor too small (too small images require more HTTP requests, so if the file size is alright, no need to make a repeating background image 10x10px, instead make that 100x100 or bigger, depending on file size)

    5. Optimize your images, don't just crop and save your images for web. These images are heavy and contain more information than you need. If you have the CS Suite, go to Fireworks and load the images there, should you be using the .png format. Fireworks is pretty much the best "fat trimmer" I've ever encountered. Here's an article on the procedere by Dave Shea: http://www.mezzoblue.com/archives/20.../smaller_pngs/ I've found it to be much better than other PNG crushers. If you don't have the software, you can use other tools, of course, including Yahoo!'s SmushIt.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couldn't have been said and answered any better. Thank you so much kohoutek ..I'll be sticking around this forum for a while now


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
  •