1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

PSD to CSS / Xhtml - Don't Get It

Discussion in 'CSS' started by mdvaldosta, Oct 23, 2007.

  1. #1
    It seems that designing a theme in Photoshop is pretty pointless, unless I'm missing something. I found a couple tutorials and, after spending a bunch of time designing the PSD, it looks as though the coding is done from scratch to "look" like the PSD. What a waste of time, right? Why even code a PSD if you're not going to export it to CSS for use with Wordpress or whatever template you're going to be using it for. I must be missing something...

    Can any PSD to xhtml or Wordpress or phpLD or whatever theme designer shed some light on the design process for me?
     
    mdvaldosta, Oct 23, 2007 IP
  2. jmhyer123

    jmhyer123 Peon

    Messages:
    542
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Yeah, you're missing the whole point! The point of using photoshop is to get a nice looking layout not just css colors and such using images and etc.

    With CSS you get basic colors for bg's and etc. but with Photoshop you get a nice detailed (professional quality if your good ;)) layout.

    Check out my portfolio Here and check out the templates section for examples. You can't do that without Photoshop ;)

    Also, you're not starting over after you design it. You slice the layout and code it using xhtml and css to use the images to code it into a usable template.

    Hope all that made sense :D
     
    jmhyer123, Oct 23, 2007 IP
  3. jBud

    jBud Peon

    Messages:
    387
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Well, here's how i do it,
    Design in Photoshop,
    (we all need to design graphics for the site somehow)
    once done with the design, i slice it into individual elements, than code into xhtml, using the previously mentioned graphics.
    Photoshop is a great design tool, (graphics only)
    but as far as web design / coding, you need to look elsewhere.
     
    jBud, Oct 23, 2007 IP
  4. mdvaldosta

    mdvaldosta Peon

    Messages:
    4,079
    Likes Received:
    362
    Best Answers:
    0
    Trophy Points:
    0
    #4
    So the entire point of creating a PSD template is to slice up a handful of images for use in your "made from scratch" CSS design? Seems hardly worth the effort of spending a few hours in Photoshop.

    Honestly, I know it's not a waste I just would have though there would be a better way.
     
    mdvaldosta, Oct 23, 2007 IP
  5. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #5
    What are you saying? Not use HTML at all? Save your PSD as a whole image and stare at it and call it a website? Or export as crappy HTML that uses tables for layout?
     
    soulscratch, Oct 23, 2007 IP
  6. mdvaldosta

    mdvaldosta Peon

    Messages:
    4,079
    Likes Received:
    362
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I would have thought that maybe there'd be an efficient way to export the PSD layout your design to CSS.
     
    mdvaldosta, Oct 23, 2007 IP
  7. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #7
    No, or everyone would be doing it.
     
    soulscratch, Oct 23, 2007 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Wholeheartedly agreed - I consider the whole 'design a PSD' first rubbish to be exactly that - rubbish... It falls you into the trap of thinking 'pixel perfect' making even THINKING about fluid design more work than most people are willing to undertake, it's more work than should really be needed, and frankly until you have your page content in place how in blazes are you supposed to design an efficient layout to PRESENT that data?

    That and the fact that it's the most inneficient bloated piece of crap software ever devised. SURE, it's great for painters and artists, but for web design using it is pure - well... What's Carlos Mencia's favorite 3 digit Hexadecimal color?

    My design process is 'backwards' from most of your photoshop folks:

    FIRST I lay out the page content with semantic markup - headers for headers, lists for lists, paragraphs around paragraphs but NOT around sentence fragments which get untyped wrappers, grouping sets of tag by type, using as few classes and ID's as one can get away with. NOTHING in the HTML Markup should actually say HOW it will appear, just WHAT it is.

    THEN I give it a rough basic layout and style with CSS - hence the separation of content from presentation is maintained.

    FINALLY I design images to put onto the CSS, occasionally adding a dummy sandbag or nesting DIV or SPAN to the markup as needed to achieve both fluid markup and to use as few image files as possible total - "sliding doors" and "eight corners under one roof" good as always.

    STARTING in photoshop to me is just #DDD - especially since it's more difficult to change stuff on the fly without screwing with layers, worrying about stuff you might have already merged down - at which point you should probably just be changing the CSS instead... Much less the headache of stripping all those layers into something useful when you could have just designed them in a useful format in the first damned place. It's a waste of time and time spent dicking around in something that has NOTHING to do with laying out the final product.

    In a number of ways I'd like to meet the jackass who started propagating that method in a dark alleyway.

    So mdvaldosta, you're not alone in that way of thinking... REGARDLESS of what I say, or anyone in favor of Photoshop first says, the bottom line is to use the technique you feel is the most efficient for YOU.

    Those of you who find PSD first more efficient, more power to you... But I still say you are just wasting your time.
     
    deathshadow, Oct 23, 2007 IP
    1 person likes this.
  9. jmhyer123

    jmhyer123 Peon

    Messages:
    542
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Well, for some it takes hours in photoshop, for others it only takes a about an hour (like me ;)) but it all depends on the quality of the design and the depth of detail you go into. There is an export function in photoshop, but like soulscratch said above, it is REALLY crappy and uses tables
     
    jmhyer123, Oct 23, 2007 IP
  10. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I can't understand why Adobe chose tables as the medium, knowing that this is incorrect
     
    Arnold9000, Oct 23, 2007 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    Because all you need to do is look at the steaming piles of crap the output their wysiwyg's like dreamweaver try to pass off as HTML to realize that web standards means jack shit to adobe.

    That and it's a tride and true proven method working back to netscape 3 and IE4... something CSS and DIV layouts can't say.
     
    deathshadow, Oct 23, 2007 IP
  12. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #12
    ^ Because it would be a lot more difficult to output proper HTML and CSS.
     
    soulscratch, Oct 23, 2007 IP
  13. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I don't use Photoshop, but practically the same thing (but $600 cheaper), for this:

    Joe Business wants a website. They have content and their own logo, but no other ideas other than "make it look professional".

    You're likely to use the standard header, sidebar(s), content, footer, so you already have that sitting in a text file somewhere.

    You make a few simple layouts in your image editing programme, the point being to show general box layout and colours. You show the various versions to Joe Company and say, pick one. They pick one, you stuff the text content etc in the code, you present it to them and say, Now work with me, what tweaking do you want?

    This is assuming that the content they already wanted also had a list of any dynamic crap/forms/whatever they wanted, what their server's already running, blah blah.

    Joe wants to see what you can make. You don't build 5 different layouts with different colours and then ask him to pick one. You draw 5 different "pretties" and then they tell you which one they like (or reject them all, whatever).

    Of course, you can also draw on paper, which is quicker and easier too, but this depends on what your client expects and how closely they want to work with you.

    I've heard that Gimp has a "slice" tool. I don't think I've found it yet, unless it's the "crop" tool.
     
    Stomme poes, Oct 24, 2007 IP
  14. webdesigner

    webdesigner Well-Known Member

    Messages:
    489
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    110
    #14
    I'd say its just like having an architect to draw up designs for a house before the builders come in to build the house.

    The builders start from scratch to reproduce the drawings of the house into a real house, without the drawings they'd be a bit stuck.

    The reason behind a mock-up in Photoshop (or any other photo editor) is just to know exactly what you are creating before you begin. Just slicing the PSD, whilst very easy is very bad in terms of usability, accessibility, load times and SEO hence the reason a coder would recreate the PSD from scratch (using as few images as possible).
     
    webdesigner, Oct 24, 2007 IP
    VimF likes this.
  15. WoodiE55

    WoodiE55 Well-Known Member

    Messages:
    193
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    125
    #15
    You make it sound like you can't get professional quality work from CSS - which is 100% completely false.


    webdesigner,

    You've hit the nail directly on the head. Well said!
     
    WoodiE55, Oct 24, 2007 IP
  16. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #16
    Nicely explained.
     
    soulscratch, Oct 24, 2007 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #17
    I dunno - to me a lot of times it seems more like having an artist paint a rendition of the house with no architectural knowledge... or a minimum of knowledge.

    Akin to taking someone who's biggest design was a 3 story home and letting them design a 1,776 foot tall building - then wondering why the whole thing isn't architecturally sound so you blow a ton more money bringing in an actual architect to fix it... followed by overrruns because the wrong type of concrete was poured so you have to rip it all out and start over, resulting in a building project that will take two decades to complete and end up costing the state of New York and federal government several trillion dollars when you can build a vegas casino inside a month for chump change.

    Not to draw a real world comparison, but you see that same mistake made over and over again it begins to grate.

    Though as one of the 'architects' always brought in to clean up the 'designers' mess, you want to keep designing in PSD go right ahead...
     
    deathshadow, Oct 29, 2007 IP
  18. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Pays the bills, right?
     
    Stomme poes, Oct 30, 2007 IP
  19. Trapped

    Trapped Well-Known Member

    Messages:
    1,832
    Likes Received:
    48
    Best Answers:
    0
    Trophy Points:
    130
    #19
    Graphic design is part of PhotoShop, turning that LAYOUT design into a working website is part of the css/xhtml coding process. You could anyway code your design automatically with ImageReady, but that would not become really a good job.

    Designer and coder are two different things, you took photoshop to design something and not to code it.
     
    Trapped, Oct 30, 2007 IP