what to consider when using .psd/photoshop files to make websites?

davidle

New member
Aug 30, 2010
232
5
0
we are having our website layout designed with photoshop. we now have the .png files for our landing page.

are there are any issues that stem from designing a website layout/look/elements within photoshop? i know very little about photoshop and am just looking for things that we should look out for/or consider to ensure that our site gets up and running without a problem. i just get the feeling that most websites aren't created in photoshop....
 


actually LOTS of websites are created in photoshop, but then someone chops it up and codes it. Doing it in photoshop is purely for the design process (unless your site is just gonna be an image ha)
 
Website graphics are quite often created with Photoshop. Other people prefer Fireworks. They both do the same thing pretty much, it's just a matter of preference. There are other programs but these would be the two main choices. I prefer Photoshop myself.

I don't know what issues you might be concerned about unless I see the design. Some designs are a lot more complicated to code than others, but just about anything is possible. You say you have PNGs now? I assume these are large flat files for you to look at for proofing? Websites are made up of many slices and layers of numerous smaller files (GIF, JPG, PNG, etc.) that are pieced together though the HTML/CSS code. These slices are made and exported out of Photoshop or Fireworks.

The HTML/CSS/Javascript/PHP etc. should then be written by hand in a text editor.

Your designer should be able to satisfactorily explain all this to you though. If they are unable to then you probably have yourself a problem.
 
basically, there are a ton of websites created with photoshop. Personally, i only use photoshop for design purposes, and once i have my design done, i start coding. The only thing you have to worry about when you design with photoshop, is to optimize correctly all the images (in your case the .png files), this way you will ensure the page will run very fast once it's uploaded on the server

cheers!
 
yup, photoshops the industry standard software to create mockups. These mockups are then approved or whatever, then sliced and diced and 'saved for web'. These images are then combined with web typography, borders and background colors to replicate the photoshop design in xhtml/css.
Things to consider are things like fonts, drop shadows etc, just bear in mind if they can't be replicated using html they will have to be used as straight images. Stick to the standard range of web fonts, and also maybe venture out into googles open source fonts and such.
 
Photoshop is the standard IMO. Every designer I know, including myself uses it to produce site comps / mockups. That said, I'm a little concerned when you say that your landing page is now .png files. It could just be a misunderstanding, but I hope you're designer didn't just spit out straight image files for use on your site or use the HTML generation out of Photoshop. If this is what they did, they probably lack the technical ability to do this piece of it for you correctly. There are a few people around here that do great PSD > HTML conversion work, for pretty reasonable rates if you need help in that area.

Edit > After rereading, your designer may have just sent the png over to you for approval before he / she coded. That's pretty normal. I can't really tell from the way your original post was phrased.