Convert Photoshop Layout Image to HTML/CSS

We have several Photoshop files that illustrate web pages we would like to create. We would like you to write HTML/CSS code to that produces web pages that match our images. The Photoshop image files we will supply to you were created by a graphic designer in Photoshop and include all the fonts, colors, etc. An example of the general type of file is here: [login to view URL] (Note that this example is a JPEG, not a PSD file. For the real project, we will provide you with full PSD files.) Clarification 1: This bid request is for the conversion of one single PSD file to one single HTML/CSS web page. Please provide your quote based on just one conversion. (If we are happy with the results, we have about 10 more of these files that we would like to hire you to do.) Clarification 2: I need a pixel perfect copy. This is not something you can do in Dreamweaver or another WYSIWYG tool. Of course, it is up to you what tools you use, but I can guarantee you this is going to require hand editing of the HTML and CSS to get the positioning right. ## Deliverables 1. Plain text HTML and CSS files that will produce a webpage matching exactly the image file we supply you. Layout, text size, etc., must be exactly the same (to the pixel) when the page is viewed at 1024x768 in Internet Explorer 6 on Windows. It must also look approximately the same in Firefox 1.5, Safari, IE on Macintosh, and other major browsers. 1a) We would prefer that all positioning be done in HTML/CSS rather than with TABLE tags. We may accept a table-based layout if the price/reputation of the coder is preferable, but given the choice we would greatly prefer no TABLEs anywhere in the HTML files. Please indicate in your bid whether you can complete the project without TABLEs for positionin. 1b) You must produce valid XHTML that passes validation in the W3C online validator: [login to view URL] 1c) We will provide specific guidance on what parts of the page should be image files and what parts should be text HTML. For example, in the sample image ([login to view URL]) we would require that the words "My PokerSavvy" be rendered as HTML text, not an image file. 1d) We will indicate certain portions of the page that must be enclosed in invisible tags like FORM or DIV. You do not need to write any backend server code or Javascript. However, you need to put the FORM and DIV tags in the appropriate places and make sure they do not break the page rendering. 2. PSD files of the individual page graphics, e.g., icons, buttons, etc. For example, in the sample file ([login to view URL]) you would create a yellow rectangle with the word "ADD" on it to use as the button. We need this PSD file. Keep in mind that you will receive a PSD file with the entire desired layout, including fonts, etc., so all you are doing is "cutting up" the PSD that we provide to you into many smaller PSDs. The file should retain the layers that are in the original, i.e., do not flatten the image or merge layers together if that is now how they appear in the PSD. 3. JPEG or GIF image files created from the PSD "cut outs" you create in Deliverable 2 (above). For example, the ADD button that you will create would then be saved as a JPEG or GIF, and this is the image that you would reference in your HTML/CSS code. ## Platform Internet Explorer, Firefox, Safari and other common web browsers for the HTML/CSS and GIF or JPEG iamges. PSD files should be editable in Photoshop 5.5 or later.