Next week I have a job interview as psd to xhtml converter (company for web building) Before some months I built my own website http://www.gamesff.com, I converted it by myself to xhtml But I did it with the simple cut tool of photoshop (cuting and than click on "new" and "file", than paste and finally "save for the web", for each file) 1. how the professionals do it? They told me that the job interview will contain a test of 1 hour only of psd to xhtml conversion. 2. how to prepare? 3. how can it be 1 hour? converting to html take much more time 4. What do you think the most important thing? work faster? the way I do it? 5. can you give me tips?
Hi Danielll007, there are several ways that you could create an xhtml file from a photoshop image file, with varying degress of difficulty. For example, you could slice the entire image in large horizontal slices and just use div elements to hold the images as backgrounds. However, that would negate many of the advantages of using an xhtml/css layout. Ideally, you want to find opportunities where you can cut a small vertical slice no more than a few pixels wide that can be repeated as a background image in a div element. With this technique, you can fill the entire width of the template with a nice background image, but you've only used a single tiny image that repeats to fill the space. This, combined with a linked css stylesheet is the key to creating attractive xhtml/css sites that load super fast, are rewarded by search engines for high content-to-markup ratios and are flexible enough to load in a variety of user agents from modern web browsers to handheld mobile devices. This is just a small example, but once you've done a few of these, you will start to see the slices you'll need to create and you can mentally lay out the html just by looking at the photoshop image of the overall page. I would highly recommend that you begin reading as much as you can and learning from the people who have pioneered this field. One of my favorite mentors is Dan Cederholm. You can check out his book,Bulletproof Web Design for a great resource that will serve you well now and into the future. Another thing you'll want to do is to practice turning graphical menus into structurally semantic list item elements. Menus are the bulk of the work you will do as an xhtml designer. I spend more time on these than anything else. When you are first presented with the photoshop layout, break it down into horizontal slices in your mind. It might help to print the layout on a sheet of paper and draw rectangles on top of it. You will turn these into div elements that form the structural foundation to hold the design together. Think about the building blocks first. Lay out the design in blocks from top to bottom, then fill in each block with sub blocks. Most layouts will follow a similar and consistent pattern and its what's inside these blocks that will vary from design to design: header menu/nav main content sidebar footer This would most likely be represented with the following structural markup (I've omitted the html, head and body tags for brevity, but obviously you will use a complete and valid xhtml structure to hold your designs)... <div id="header">header goes here</div> <div id="nav">main navigation menu goes here</div> <div id="main"> <div id="content">content goes here, usually floated to the left or right of one or more sidebar elements</div> <div id="sidebar">sidebar goes here</div> </div> <div id="footer">footer goes here</div> </div> HTML: With this markup you can easily center the design within a 960 pixel width layout, with a header and footer whose background can span the entire width of the viewport. This is one of the most common layouts in use today. Two of my favorite and most often used techniques: Use margin:0 auto; to center the div elements. Use the html element as well as the body element to add background designs that span the entire width of a fixed width main layout. Example (from a linked css stylesheet): html {background:url(path-to-your-lowest-layer-background-image) repeat-x;} body {background:url(path-to-your-next-lowest-layer-background-image) repeat-x;}