How to convert your PSD creation to xHTML in a couple minutes!

Google+ Pinterest LinkedIn Tumblr +

This is a simple trick for photoshop and you can just put into practice today. Converting your PSD into xHTML is simply a matter of generating a CSS and adding a HTML file to it or simply generating it directly as xHTML. Let’s take a look in a step-by-step approach.

The trick is simple and it is ideal to support a designer like many of us who are not expert programmers. To convert a layout to a CSS is perhaps the easiest way for a site with many pages. xHTML is also a viable option. Both are equally easy to do. What you need first to do is not to use tables that are often tricky and whose code is much greater. Be simple, your user will appreciate that. This is simply a higher standards of web design and use less code.

Step 1: Open your design in Photoshop. It should work for older versions.

Step 2: Define the cuts (slices). Here it is important to cut the elements to use in your web using the “slices” (shortcut K) With the cuts we want to draw what photoshop does.

Step 3: Click on the tag of each cut and put a meaningful name. This will help you better understand the code once turned into CSS. Try to remember to put names to all elements of design.

Step 4: Repeat the operation with all cuts. In this way we ensure that code can get a better understanding. If you’re a developer be more familiar with the programming language. But if you’re a designer like me, is easier if we use an early way to understand the code more easily. After all a web designer finishes learning a little of all the codes and language used around the world.

Step 5: Save for Web & Devices. Now you have everything ready, click on “File and Save for Web & Devices” and select all SLICER here or cut and click on SAVE.

Step 6: Settings: Custom. This opens a screen where it asks you where you want to save your work. Before pressing the Save button, click on the bottom of the Settings dialog and select CUSTOM.

Step 7: Select “Generate CSS”. Navigate through the screens selecting 2 things: Export as (X) HTML and CSS Generate depending on what you need. This instead of generating a code with a code to generate html tables using the CSS.

Step 8: Open the page and see the code.


About Author

Leave A Reply