How to Code WordPress From Illustrator

Creating a Static HTML Site
1. Open Illustrator and load the file containing your website template.
2. Create “Smart” slices for the objects in your design. Select the object, then click “Object,” “Slice,” then “Make.” Illustrator formats the object based on its content. For example, if the slice contains text, Illustrator will detect it and automatically format it to HTML code upon export.

3. Create any additional sections you need using “dumb” slices. Click the 'Slice' tool, then drag the cursor over the region you want to slice. Dumb slices are necessary when an object holds two parts of the site. For example, you might want two columns in the object containing your main content area.
4. Define the slices. Click the 'Slice Select' tool, then click on a slice. Go to “Object,” “Slice,” then “Slice Options.” Choose “Image” for images, “No Image” for areas to be left blank, or areas to be filled with other code or content, and “HTML Text Slice” for slices containing text. Repeat until all slices have been defined.
5. Click “File,” then “Save for Web and Devices.” Select “HTML,” choose a location for the site, then click “Save.” You now have a static HTML site.
Transforming the Static Site to a WordPress Template
6. Go to starkerstheme.com and click “Download the .zip.” Locate and extract the file on your hard drive. These files are the WordPress theme files.
7. Load “header.php,” then load up your static HTML file. From your site, copy the code for the main header, below the
tag, and paste it below the
tag in header.php.
8. Open “Style.css.” If you have a CSS file with your static site, copy and save the contents into this file. Otherwise, continue.
9. Open “footer.php.” Delete everything above “
” and paste in the code for the footer area from your static site.
10. Open “Sidebar.php.” Paste in the code for the sidebar area, if you have one.
11. Locate the main content area on your static site, where the WordPress “Loop” must be placed. The loop starts with “
12. Save all files and compress the file into a .zip file. The template is ready to upload to WordPress.