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?
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
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.
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.
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?
I would have thought that maybe there'd be an efficient way to export the PSD layout your design to CSS.
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.
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
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.
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.
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).
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!
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...
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.