Ok - I'm kind of new to this side of things. But I needed a website built, and decided to hold a contest for the design. Ok - that was great, I picked a great design, it's in a layered PSD format. Now - How do I take this design, and convert it to working website, w/ actual text and html? I tried to hire someone to convert to css/html, but all I received was a sliced up image w/ html to put it back together. I'm looking to turn this webdesign into actual website w/ text. What is it called to make this conversion? And how much does it usually cost? This is what the design looks like:
Hi, Not every text on that layout can be converted to text. Because of font problems. If you want I can give you details or even do the work for you on low budget. Pm me.
$100 and I'll get it as close as standard fonts allow. visit www.pittdesign.com for my portfolio and other work. I've been doing web design for 10+ years and all I use is Photoshop... so, I know I can get this very very close in HTML format. Do you have hosting? I'll need to know your hosts features, like if it supports php and such. Let me know, -Eric
Which is why starting from a PSD is back-assward, as most of the so called 'designers' churning out pretty pictures know next to nothing about accessability, SEO, semantic coding or any of the dozen other things that are the difference between a professionaly done website, and some crap get rich quick scammers page.
Interesting concept you have here. But, don't you think at least some PSD designers have an inkling about proper SEO and semantic coding? I think its safe to assume that at least some do. Just because 'pretty pictures' are used for logos, and backgrounds it doesn't mean the foreground text doesn't pass the SEO gauges.
I agree that the design above isn't the best design I've seen in terms of psd to xhtml friendliness, but it still can be done.
No, I don't... mostly because most CODERS don't even know that ****, much less some art *** who's bread and butter is photoshop. But it is with total disgust that I look upon 90% of the code being deployed in new sites online, much as I look upon PSD 'designers', SEO as an industry, use of flash for content, abuse of ajax for pages that would be better without it, and fixed width layouts with disgust to the point of nausea. In any case starting from photoshop or any other paint program is putting the cart before the horse. People do not visit websites for the art *** graphics, they visit for the CONTENT. Therin you should START with the content marking it up semantically - bending that markup to your will with the CSS... Then and ONLY THEN should you be starting up the goof assed paint program to create the graphics to hang on your layout. Starting from a PSD usually amounts to little more than shoehorning content into a layout never meant for it, fat bloated oversized pages that are a disaster to navigate, crappy fixed metric layouts that are an accessability /FAIL/ for people on different size screens than the designer. Seriously whoever started this RUBBISH of starting out in photoshop needs to be taken 'round back o' the woodshed and put down like old Yeller. It ranks right up there with all the jackasses still teaching presentational markup.
You only really need photoshop for the header, some little custom pattern, like gradient in png format, or stripes, and maybe a little graphic for list bullets and titles... other than products or photos, not sure why else youd need the entire site to be graphic oriented
Nice design but only the fonts issue can be focused on, anyways i can do that also, means i can make is 99% similar to the one shown here. Provided you send me the fonts that are used in PSD.
Since you guys are talking about this, I'd like to ask a really silly question (not for me at least). When your site is PSD to xHTML ...... how that affects you SEO ? I'm asking based on what I've read about images not being as valuable as text for Search Engine purposes. Thanks in advance
PSD to XHTML can result in a poorly coded webpage which results in poor SEO on-site. Meaning poor order of content, bloated code, bad naviagtion and poor indexing ability for the page in question. However if you know how to code correctly most of this can be avoided, although it's often desirable to have good edcuation on how on-site SEO works along with how to code before attempting such a thing correctly. When you comment on images being not as valuable as text: Text inside a HTML document can be read by Search Engine Spiders when they read your page allowing them to index it correctly inside your Search Engine. However Search Engine Spiders do not have the ability to read text which is part of an image. Therefore it's desirable to only use text, or if you must use an image then make sure the text is still there behind the image for the spider to read.
Really it depends on the coder... You sleaze out some slices from fireworks to dreamweaver, inlining your presentational images (images representing text, borders, gradients, etc) then it will fare quite poorly... even if you include ALT text, ALT is an attribute and therin ignored by most earch engines. There ARE techniques that when used properly not only give you your fancy images and semantic markup that is effectively 'free' SEO, but also give you proper fallbacks for people browsing the page with images disabled - and semantic markup means graceful degredation to plaintext with CSS disabled... making life easier should you decide to make a print CSS as well. Glider-levin image replacement would make short work of all your headings if they REALLY have to be images - though the 'lesser' headings on the page I would just composite in realtime (font doesn't 100% match, oh well). Techniques like sliding doors and image recombination could be exploited to reduce the total number of images on the page meaning less handshakes and faster page loads, etc, etc... Coding any site, be it from PSD or direct from content it is more about the markup used, how the coder was taught and if they are using MODERN techniques instead of decade out of date methodologies. Hang on a few minutes and I'll post up how I'd make the markup for that page. This will JUST be the html, and everything else would go into the CSS. There will be a few empty sandbag tags for hanging images on for glider-levin type image replacement and/or sliding doors effects, but nothing 'too' unusual.
It really depends on who does the conversion, you can't just break the psd into image chunks and expect it to work well.. I dont doubt thats what some companies do, but there are people, like me, who take the time to find patterns in the design that will reduce the load size and is also correctly coded.
Ok, for example, THIS would be the markup I'd probably use for that layout - plus or minus maybe 2% code. EVERYTHING else on that page would be done through the CSS. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> PSP Repair Guide </title> </head><body> <div id="container"> <h1> PSP Repair Guide <b>NEW!</b><br /> <em>Don't Spend Big Bucks Getting it Fixed!</em> <span></span> </h1> <div id="content"> <div class="topBorder"></div> <div class="firstSection"> <h2>Do you have a PSP that needs repair?</h2> <ul> <li>Did you try to flash your PSP & now it doesn't work right?</li> <li>Does your PHP have the Blue Screen of Death?</li> <li>Would you like to be able to fix a cracked screen?</li> <li>Would you like to be able to downgrade or upgrade your PSP firmware?</li> </ul> <p class="standout"> Then This Guide is for you! </p> <img src="images/productBoxAndBigArrow.png" alt="PSP Repair guide cover" /> <!-- .firstSection --></div> <div class="halfBox highlighted"> <h2> Does this PSP Guide Really Work? </h2> <p> I have <strong>repaired hundreds of broken PSP's</strong>. Now you can gain <strong>personal benefit</strong> from my experience. I'll show you how to <strong>easily fix</strong> or downgrade your PSP. This step by step guide is easy to understand and will have you up and running in about an hour. </p> <img src="images/pspWithBookAndTools.jpg" alt="PSP showing repair guide text, with a book, screwdriver and wrench." class="standout" /> <p> Some of the repairs may require a few items from online or your local Radio Shack, but will still be much cheaper than paying for the repairs or purchasing a new one. </p> <!-- .halfBox --></div> <div class="halfBox"> <h2> This Repair Guide will save you money! </h2> <p> Learning how to repair a PSP will save you major money. </p> <div class="sonyWontTell"> " Sony will not tell you how to fix your PSP! " <span></span> </div> <p> They'll ask you to <strong>send your system back</strong> to them for repair, or have you send it to a certified repair center. The typical cost for a repair can be as much as $125 USD plus shipping and handling. Also - <strong>they do not always guarantee a fix!</strong> Use this guide to repari them, then sell them for huge profits. <strong>This guide will pay for iteself</strong> with just one repair. </p> <!-- .halfBox --></div> <div class="wideBox"> <h2> Just Some of the Info You Will Find in This Guide... </h2> <ol> <li class="first"> <h3> We will show you how to convert your current DVD collection </h3> <p> into Sony MP4 video format so you can view them on your PSP. Why pay for a UMD movie that you already own on DVD! We show you what software to use, and how to use it. Best of all it is <strong>100% legal</strong>! </p> </li><li class="second"> <h3> Did you know that there is a <em>hidden web browser</em> in your PSP? </h3> <p> If you didn't then this guide shows you how to browse the web using your Sony PSP! (the game <i>Wipeout Pure</i> is required for this to work) </p> </li><li class="third"> <h3> Have you cracked your LCD screen and need to replace it? </h3> <p> Let us show you how to take apart your PSP <strong>without breaking it</strong>! </p> </li><li class="fourth"> <h3> Have you ever bought an eBook on eBay? </h3> <p> I bet you didn't know that you can view these <strong>eBooks on your PSP</strong>. Again we give you detailed instructions with pictures on how to do this using your PSP. </p> </li><li class="fifth"> <h3> Do you know how to check your PSP for dead pixels? </h3> <p> This guide provides you with software that will identify dead pixels of ANY colour. </p> </li><li class="sixth"> <h3> Do you find the new PRO DUO memory sticks far <em>too expensive</em>? </h3> <p> This guide will show you how to use your old "non-duo" memory sticks in your PSP. </p> </li><li class="seventh"> <h3> Have you got a friend or relative at the other side of the world? </h3> <p> Now you can play PSP games online using your MAC! No matter where in the world you are located. </p> </li><li class="eighth"> <h3> Do you like reading web comics? </h3> <p> Well now you can read them on the go using your PSP. We give you <strong>full instructions with pictures</strong> of how to read your web comics on your PSP. </p> </li> </ol> <!-- .wideBox --></div> <div class="wideBox highlight quotes"> <h2> What are others saying about this PSP Repair guide? </h2> <blockquote> <p> <span>"</span>Your repair guide was <strong>very easy</strong> to understand. The pictures made it very <strong>easy to follow.</strong> Thanks for helping me bring my PSP back online.<span class="endquote">"</span> </p><p> <cite>Eddie Sears</cite> </p> </blockquote> <img src="images/multipleBoxes" alt="Picture of multiple boxes of the repair guide" class="blockSpacer" /> <blockquote> <p> <span>"</span>I made an easy $50 with your guide. I found a PSP at a garage sale with a cracked LCD Screen. They gave it to me for next to nothing. I repaired it using your guide and sold it to my idiot cousin.<span class="endquote">"</span> </p><p> <cite>Herbert Carter</cite> </p> </blockquote><blockquote> <p> <span>"</span>Thank you so much for this e-book. I used it to <strong>trick out my PSP</strong>. My friends are wondering where I bought my tricked out PSP. They refuse to believe that I <strong> did it myself!</strong><span class="endquote">"</span> </p><p> <cite>Jeremy Johnson - JJ</cite> </p> </blockquote> <!-- .wideBox --></div> <div class="buyNowBox"> <h2> Click below to secure through ClickBank,<br /> the most trusted name in digital<br /> products online! </h2> <p> This guide is in PDF format, and you will be able to download it after payment is made. You can access the guide instantly after payment is made. </p> <div class="purchaseLinks"> <a href="#" class="buyNowLink">BUY NOW!<b></b></a> <div><!-- sandbag for credit images --></div> <a href="#" class="payPalLink">Checkout with Paypal<b></b></a> </div> <!-- .buyNowBox --></div> <div class="bottomBorder"></div> <!-- #content --></div> <div id="footer"> <!-- since content identical to header, just assign as background to #footer --> <!-- #footer --></div> <!-- #container --></div> </body></html> Code (markup): Any empty bold or span tags are sandbags for glider-levin image replacements... If I was to convert the layout to dynamic width I would probably add a few more for sliding doors, but as fixed width that is really all you need for markup. Makes proper use of heading orders, valid XHTML 1.0 Strict, when finished you could add proper images off degredation, and as is it's formatted to look about like a page should with CSS turned off... and being fairly semantic markup, it would also index really well for search engines - though I'd do some market research on your keywords to see what words and phrases are ranking high at the moment, swapping around the strong tags and/or writing new copy to match the trends. So it is possible to do - it depends on the coding style and knowledge of the person doing the conversion, not so much what you are working from for a content source. The problem is most people end up slicing from a PSD and dealing with the layout BEFORE marking up actual content, sleazing together dreamweaver and fireworks for table based layouts or go nuts with tons of unneccessary div's, classes and img tags... Though determining which images to treat as content and which are presentation is always a challenge.