This is a basic overview of PSD slicing and converting PSDs to cross-browser compatible, valid, semantic XHTML / CSS code.
I slice with software.
You can use Fireworks as a substitute for Photoshop, but there is a chance that it will misinterpret the PSD, causing the colors and shapes to be off.
Second, I use Microsoft Expression Web, a powerful text editor that dramatically increases my efficiency.
IE6, IE7, FF2, FF3, Opera 9.5, Safari 3.1, and Google Chrome are all supported for browser compatibility testing.
The skills necessary to slice PSD files into HTML
Complete familiarity with XHTML is required, as is an understanding of the finer points of the semantics behind each tag available in XHTML 1.0.
You must have an in-depth understanding of CSS, including all of the possible styling rules for every one of the HTML tags at your disposal. You also understand how to stack selectors to benefit both you and your users, who will almost certainly alter your code during actual implementation. It would be best to have a highly well-organized collection of CSS tricks, tips, and hacks for coding out of any conceivable jams, including cross-browser techniques and browser-specific issues.
The key to a successful conversion is.
1. W3C-compliant XHTML markup
Second, CSS that conforms to W3C standards
Clean, well-commented, indented code
4. An awareness of semantics supported by tags
5. The code is easy to understand and not too complicated.
Sixth, the code/style structure is well-built with an eye toward modification and expansion.
Modularization of styles / atomicity
Rules of Thumb
First, the converted product must be as close to the original design in pixels as possible. Not a dogma but an example: the designer may have been in a hurry, so you may notice some inconsistencies in the design and choose to fix them rather than blindly following the PSD.
Second, font sizes should typically be specified in ems or relative sizes rather than absolute sizes; this isn’t strictly necessary anymore as browsers are becoming increasingly capable of resizing content on their own. Many up-to-date browsers allow for the absolute resizing of text. Fundamental values, such as ‘px,’ may also be helpful when modularizing the styles, as when only a portion of a page is being delivered to the client so that it can be incorporated into other pages. If absolute font sizes were used, compatibility issues would be reduced, and the font sizes wouldn’t be altered from the originals.
Because of the rise in available screen real estate, it is recommended that all designs be centered unless otherwise stated.
Fourth, ensure that the background of your header, body, and footer fills the entire screen and goes well with the rest of your content.
5. Designs with excessively rounded corners and background gradients may incur a high cost in the form of flexible layouts or vertically expandable content boxes.
Decomposed page elements make it easy for customers to make changes.
Seven more will be added as soon as they come to mind. You can also check out the front-end SEO, accessibility, and usability advice I’ll post on my blog as I add new posts.
Procedures and methods, roughly
First, establish a framework, which includes sectioning or how the pages will be broken up. Consider contexts as a general rule of thumb. Is the design overly complicated, with a lot of moving parts and a lot of colors? In other words, does it stand upright? And maybe it’s horizontal. I don’t see how you can expand that horizontally or vertically to fill the whole screen.
Most of the designs I’ve converted so far can be broken down into a header, body, sidebar(s), and footer. To accommodate for the vertical growth or contraction of content, each one may be able to contain another for the sake of elaborate backgrounds or even just rounded-corner content boxes.
If more than one PSD file exists, look through all of them. This is highly recommended, especially if there are a lot of them. Many of the design’s visual components—sidebar widgets, section headings, and unique floating image boxes—should appear multiple times. Modularizing your style slightly will help you reduce conversion time and boost output.
Third, while it may not always be transparent with repeating patterns, following the cascading rules of CSS can save a lot of time and effort. For instance, when working on a complex project, you’ll have to deal with many a: link, a: visited. Before diving in, though, it’s essential to determine what commonalities exist between the various styles involved. You should later reset the default values you have set whenever you encounter a slightly more specific situation, such as with #header a: visited or #header a: link.
Now that you know where everything on a page typically goes, you can create dozens of code snippets that can be rearranged in any order while retaining their unique formatting. It’s beneficial, and you’ll quickly develop skills in utilizing it to increase output and boost self-esteem. Let’s focus on the nitty-gritty, specifically inline elements. Don’t forget to create generic classes for widely applying frequently used notices, mistakes, and emphases.
5. After finishing the first pass of your conversion, you should check to see if your coded pages accurately reflect the original designs. Start up Internet Explorer 6 (old), Internet Explorer 7, Internet Explorer 8, Firefox 2, Firefox 3, Opera 9.5, Safari for Windows, and, most luxurious of all, Safari for Mac OS, and see how they fare. Find and correct the inconsistencies in appearance.
Check your XHTML markup with validator.w3.org and your CSS with jigsaw.w3.org/css-validator, number 6.
We could go on and on about other geeky tests like accessibility, usability, the image on/off, etc., but we’ll stop here. You’re probably wracking your brain right now, thinking of a more straightforward guide.
Here are some more excellent PSD to HTML conversion examples for your perusal.
The following are additional worries and frequently asked questions
Is a reset.css file necessary? The answer is probably different for each individual. You should probably give it a shot before making up your mind. Using CSS reset is enjoyable and has helped me get more done in less time.
What expertise do I need to ensure I can meet any reasonable coding standards? That, of course, is the final response. To be successful in your career, you must have an exhaustive understanding of XHTML and CSS.
To what extent does it challenge you? Answer: Not if you’re having fun with it.
How much money can I expect to make working as a converter? We can’t say. How well you market yourself will determine how successful you are. XHTML/CSS converters can make anywhere from $30 to $80 per hour, depending on experience and demand.
Where can I find someone to help change a PSD file into HTML? Conversion services, however, come in a wide variety. W3-markup.com is one of the best tools available. I think they’re charging too much because I can provide comparable services at a lower cost.
How can I get in touch with you? Simply email info@charmhtml.com with your inquiry.
At Charm HTML, where he is a senior web developer, Yang Yang helps startups and other internet entrepreneurs realize their goals.
Read also: Multilevel Monitoring Equipment – Light Beer Still Active and Powerful?
