I'm wondering how people make PSD websites? I know people build templates in photoshop and then sell them and people just go in and edit the options to fit there needs. but how do these people do it? How exactly does a PSD covert to a website? would they save it as a GIF and upload it on there servers and then there buttons become clickable and what not? Is it really just a big image with clickable parts? It would be very easy to for me to design templates in photoshop with doing the very small coding part just to make some things work. Im tired of dealing with DIV's and Tables and crap that wont align. Can i just design my template in photoshop and make some buttons and what not?
You design what the website would look like in photoshop. You would then slice the images and use them in the page and code around that css, etc. in html. Hope that helps. It's not one big image with clickable links. You slice the big image into small images from the 'big image'.`
almost all professionally created sites will be done in this way. The skill comes in working out how it is best to slice up the image and minimise the file sizes to ensure quick loading of the site. Solid colours will normally be done with code rather than images, likewise a gradient bar across the screen will typically be only 2-3 pixels wide and then repeated etc
thanks for that link hostcord very helpful, +rep given. So basically all your doing is designing the site in Photoshop then slicing the images and saving the ones you really want to use and basically pasteing them back on your website through dreamweaver to save space? But if you could load a huge site with one picture on it fast enough people would do that rather than chopping everything up right?
Professionally speaking, no. The advantage of slicing and dicing is that you enable the site to dynamically adjust which an image can never do. This can be either adjusting to different window sizes or different content. Take an ecommerce store, you may want the categories of products listed down the left hand side and to make life easy for updates have them dynamically generated. With HTML (and server side code) simple, have a list with a repeating "button" image behind each link and so the site will function if you have 2, 3, 4 or 55 categories of products. Make them a static image and you have to redesign the template and upload a new file for every single page each time you want to make a change. The second issue is that whilst you can have the worlds fastest server the speed of a sites download is as slow as the weakest part. If you have someone in the middle of no where on a flaky dialup connection the giant image approach could easily mean each page takes minutes to load. The final complication is server bandwidth, every KB your clients download cost you money, why make them download 300kb for every page by having a giant image when HTML would only be 30kb?
If you realy can design nice websites in photoshop then forget about HTML and hire someone else for it. But only if your designs are realy good.
Unfortunately, Div's and Tables are how websites are constructed. Designing in photoshop is one skill, but converting that photoshop mockup into a quality website is another skill. You have to move from the incredible freedom of photoshop to the constrained, difficult world of websites. The fact is, you're never going to get the pixel-perfect control you have in photoshop since you never know what browser, OS, resolution, etc your users have. Plus, people need the freedom to increase text-size and change contrast to read your websites. Check out the CSS Zen garden for some inspiration. Good luck!
Thanks for this site! This is what I have been searching for, for days. Anyone else have something like this? The more I read the better I'm also looking for the easiest tutorial to follow to then make (port) an xhtml template to a wordpress theme. Anyone have one that really helped them learn? I've been searching for days and find all outdated material that doesn't work well with the new wordpress. Oh and the tutorial doesn't have to be for dreamweaver, I don't even have it I'm just looking for guidance.
The sites I've designed, I've drawn in GIMP (Photoshop basically) and then take the images I used (they were made in seperate windows and thus were seperate files anyway) and make them as lean as possible (like gradiented menu bars) and send the real builder a pile of image files along with the big GIMP image so they know what to shoot for. mainpage The top blue gradient is really this: headerbackground and the menu background is this: menubackground I have little gifs for the arrows, questionmarks, warning box symbols, and I just give them to whoever is building the site.
I find that sites designed entirely within Photoshop and then sliced up, look very "over-engineered" - the designer will most likely have gone crazy with Photoshop burn and dodge tools, and added in lots of effects which, yeah, look nice, but most likely detract from the overall content of the site I use Photoshop to build sites "in my mind", first of all - I find it's much easier spending an hour or so in Photoshop messing around with the layout and getting it looking just so instead of messing around with HTML and CSS for an hour, trying to achieve the correct look With a layout in mind, it's much easier to jump in and create the template to duplicate the layout, rather than just copying the PSD template pixel for pixel. an HTML/CSS site that scales beautifully in all browsers, offers clean, crisp navigation and takes up minimal bandwidth to be a wonderful thing indeed