Hi,
How do we make CSS from a design image? (not PSD but a simple JPG). For example, if a client gives this design: http://www.photoshopstar.com/wp-content/uploads/2007/08/professional-design-24.jpg
and tells to make a CSS out of it, how do we achieve that?
Hi,
Thank you all for your replies.
There’s this design that I have to make a CSS & HTML from. I’ve begun working on it and I’m attaching the design and my rough CSS & HTML. Would it be possible for you guys to guide me from there on how to proceed.
As far as I understand, there are 4 main elements in this design and I’ve done 1 element.
I’m having serious trouble doing the 3 and 4 elements. Could anyoe make a rough draft of CSS & HTML for this design. I’d be so grateful to you, guys.
(The design is design.png and my work is in a zip file)
Without the PSD you will usually be unable to easily remove any text or elements that overlaying your graphics unless you want to redraw them pixel by pixel which is a real pain and often looks a mess.
If you have an image of a site then someone must have the PSD or the source - unless the image isn’t yours and then that would sound alarm bells.
As Jason said above there isn’t much to that design anyway as its basically a 2 column page with header and footer. There doesn’t look like there’s too much overlap and you could probably cut the graphics out of that image assuming it’s a very good quality image.
The left full length column would be a repeating image on the parent that holds both columns so that it is always full length.
Apart from that it’s straight forward stuff and Jason has given you a good start above.
<teal’c PI>Indeed</teal’c PI>
As I often say drawing some goofy picture before you have content, semantic markup and a layout in CSS is putting the cart before the horse. The pictures you hang on the layout should be the last part of the process, not the first.
Especially since quite often they have zero knowledge of accessibility, standards, and good practices making their goofy **** picture ultimately useless resulting in tinkertoy websites with over the top bounce rates. Most can’t even seem to accept the notion that fixing the width and height of ANYTHING in the layout is a bad idea.
Well, there is the third option of kicking the dumbass art *** who knows nothing of how a website actually works in the nerts and telling them to bugger off.
Though that often doesn’t go over well; Even if it IS the correct course of action in most cases.
In this particular case looking at the greatly reduced picture, I’m not seeing any real deal-breakers in that regard though. This could easily be turned into a real site with nothing truly horrid about it… apart from the redundancy between the top right menu and the horizontal menu – or wasting time telling people “Website Menu” as if they are too stupid to know what that is. (I swear that’s getting outright insulting these days)
Simply “turning it into CSS” isn’t the whole picture - As I’ve said time and time again CSS is only as good as the markup it is applied to… so the first step is to get some semantic markup with some sensible section divers on it.
When writing said markup you generally need to forget that the appearance even exists when choosing the primary tag, and ask yourself “what is this element?” – then you can add the extra bits to apply similar styling, or if need be a hook/sandbag (empty tag) for image-replacement methods like on a site logo.
For example…
<div id="pageWrapper">
<h1>
PHOTOSHOP<span>STAR</span>
<small>Free Photoshop Tutorial & Resources</small>
<b></b>
</h1>
<ul id="topMenu">
<li><a href="\\">Home</a></li>
<li><a href="about">About</a></li>
<li class="last"><a href="contact">Contact</a></li>
</ul>
#pageWrapper would be used to constrain the width so you only really have to say the target width once, the h1 is because that’s the top-most heading, the span and small tags being to apply similar styling to the image logo for when images are disabled (a concept most PSD whackjobs never even think of), and the empty B tag being to place the image version of the logo over the text gilder-levin style.
Menus are always LI. I would float the menu right and use a negative margin to slide it up next to/over the h1. This removes the need to dick with floats on the h1 or to waste code on an extra container. The .last class I’d use to apply the rounded corner on that side so that the hover state would also be rounded.
The other reason for this approach is I’d be designing for fluid or semi-fluid, which makes that banner/palette image a really bad idea in the site layout… Which is part of why the “drawing a goofy picture” approach is completely broken.
Frankly, with that much ‘content’ already laid out before you even have markup, the pooch has already been shtupped, and you’ll end up making all sorts of accessibility sacrifices to support it.
first of all, you don’t make CSS from an image. you use the image as the starting point to make a layout using html markup and css styling that looks like the initial image but feels more like a usable modifiable interaction document.
option 1: learn how to do it (by trying your self, that is 
)
option 2: hire someone that knows how.
both guarantee to success.
@Paul: Thanks a TON!!! Though I had done the three frames but I didn’t know how to do the breadcrumb. You solved my problem completely. You are AWESOME!. Thanks a lot guys!
Sitepoint rocks!
Hi,
You could just float the summary to the right and then float the other column left assuming you give both appropriate dimensions. If both columns are a fluid width then you could do something like this example (just view source for the code).
The breadcrumb trail at the top could just be a list with some images for the arrows in the background. The images would need transparent parts and then overlap each other slightly as shown in my example above.
if you really can do PSD to HTML&CSS (since CSS alone means nothing), your best bet would be to transform/make the jpg to psd
How, indeed … that’s why trying to build a web page design from a single static image of a page is a complete bum-about-face way of doing it.
This is where graphic designers often get it wrong - they think that turning an image into a web page is just a matter of skill with coding, but there’s a lot more to it than that. You need to understand the page, you need to know how it works, you need to know what each bit of the page does and what meaning it has … and a static image just can’t convey that.
You’ve got two options really. One is to work with the designer to figure what he actually wants, and to break down the design into its constituent sections and elements, and look at how he envisages them interacting and relating with each other. The other is to do that yourself, to apply your own interpretation to the image, and to treat the given design as a suggestion as to what the final page might look like under certain circumstances.
Thanks all for your replies…
@stevie D: I know CSS and HTML upto an intermediate level and I’ve done PSD to CSS but I’ve never designed CSS from an image. In PSD, there are layers and each layer has to be converted to a CSS element. But how do I break it up into elements just by looking at an image deign? How do I decide the width and other parameters?
@noonnope: I’d like to go for option 1 Can you please point me to any tutorial or tell me ho to start?
You start by learning HTML and CSS. If you don’t understand the languages that are used to build and style web pages then you will never be able to make a successful website. It’s like trying to build a house from a photo someone showed you, without knowing anything about architecture or construction…
The first thing to do when someone gives you a visual design is to break it down into blocks of content … eg the header box, the menu box, the main content box - and within the main content box, you might have sub-boxes. Then think about how those elements interact with each other - which ones are fixed, which ones can flex. Remember that an image is just static - it knows how it is laid out, because every pixel is pinned to the canvas and will stay there forever more, or until you delete the file. A web page is not like that - it lives, it breathes, it moves, it grows. Work out whether you want your design to adapt to fit people’s window size or whether your precious design is more important than your visitors’ ease of use (you can probably guess which way I swing on that one).
Now code up the blocks of content with CSS to achieve the overall layout and structure that you’ve decided on. Then it’s a case of adding colours, backgrounds, images, spacing and padding … and of course, content.