Working with PSD templates

Discussion in 'HTML & Website Design' started by jgjg, Jul 2, 2007.

  1. #1
    for the longest time I didn't understand how to make a PSD template into a useable website template.

    Now I see you have to slice them up and use them.

    I wonder how many average webmasters actually know this when they visit template sites?

    Does anyone know of any really good tutorials on taking a PSD template to a completed site chock full of content?

    thanks
     
    jgjg, Jul 2, 2007 IP
  2. AstarothSolutions

    AstarothSolutions Peon

    Messages:
    2,680
    Likes Received:
    77
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Never sure of the definition of "webmaster" as it means many different things to different people.

    To be honest, if someone wants to combine the words web and master in their job title they should know something basic that image files are sliced to make templates.
     
    AstarothSolutions, Jul 2, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Someone else posted this link in another thread, try it:

    designtutorials.info/layout-design-and-implementation/

    Success!
     
    Stomme poes, Jul 5, 2007 IP
  4. PHPGator

    PHPGator Banned

    Messages:
    4,437
    Likes Received:
    133
    Best Answers:
    0
    Trophy Points:
    260
    #4
    Honestly, if I were you I would just go straight for learning how to do it in CSS. It seems to be the most sought after (over HTML tables) format for professional designs. There is a pretty simple tutorial at pixel2life.com. Look in the Web Development -> CSS -> Layout section.
     
    PHPGator, Jul 5, 2007 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Part of the problem as I see it - and one perpetuated by HORRIBLY BAD ADVICE as found at sites like the one Stomme Poes linked to, is people treating .psd's as a template in the first place - it's not a template, that is a MOCKUP.

    Images for text is a bad practice, any elements that can be created in HTML/CSS without images... shouldn't be done as images. Even so for the odd text of the logo it's semi-acceptable - but flat gradients on one axis should be created with a repeat-x or repeat-y 1 pixel background, NOT using multiple separate images for each and every section. Sections should be dynamically defined in CSS so things like the 'current' menu item uses the same code across all pages, instead of having to play with the layout for each and every page.

    You follow the advice of using dreamweaver's "Layers" and what do you get? A badly laid out page that's broken across different resolutions and browsers, with no SEO, overreliance on absolute positioning instead of flow, no non-image or non-CSS graceful degredation, two to three times as much code as you should have and a page >400k in size for something that likely shouldn't total more than 100k.

    Much like most things Photoshop/Dreamweaver, it's a total /FAIL/ a REAL professional should know better than to use in the first place.

    Dreamweaver is a professional quality tool - RIGHT. By the way, I have some land in Florida I'm looking to sell.
     
    deathshadow, Jul 5, 2007 IP
  6. jgjg

    jgjg Peon

    Messages:
    595
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I agree with you that templates are simply mockups. and I think you are right that it is bad advice to use all this mad slicing and layers due to browser compatibility...It's just a big hassle!

    however I completely disagree what you say that dreamweaver is not a good tool. It's just how you use it ;)
     
    jgjg, Jul 9, 2007 IP
  7. mopguy

    mopguy Active Member

    Messages:
    733
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    70
    #7
    You have to get used to tables or div if you wanna come up with complex layout from psd templates.

    I myself use dreamweaver to speed things up.

    It's not about how good/bad the software is. It's how you use it that makes the difference.
     
    mopguy, Jul 9, 2007 IP
  8. seoemporium

    seoemporium Well-Known Member

    Messages:
    947
    Likes Received:
    22
    Best Answers:
    0
    Trophy Points:
    108
    #8
    seoemporium, Jul 9, 2007 IP
  9. pfek

    pfek Member

    Messages:
    98
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    45
    #9
    I'm integrating Photoshop templates only with Rectangle selection tool, Ctrl + Shift + C and CSS...forget about tables, this should be over now. There is nothing too hard with that, just buy a little book or go see a couple of tutorials and you will be able to come up with a lot of nice designs quickly.
     
    pfek, Jul 9, 2007 IP