Last Updated on June 5, 2019
1. I prefer Illustrator, make sure your art board width is 900-1100 pixels wide. We want to stay in the 1024×768 monitor resolution most still browse on. Any wider, people will have to scroll horizontally to view your site. Bad user experience.
2. Do your thing in Illustrator, design and make sure you are working/viewing at 100%.
3. Export your illustrator art as a jpg – 72dpi.
That! Company provides captivating and effective web design services for agencies world-wide. Learn More about our White Label Web Design Services and how we can help you and your clients create or improve their web presence. Get started today!
4. Open jpg in Photoshop. If you need to, crop your jpg to the website width – 900-1100 pixels. Sometimes exporting from Illustrator exports elements outside the art board area.
5. Select your slice tool and create slices/boxes of all main areas. Header, side navs, footer, main content area, etc.
6. Click “Save for Web & Devices”, select JPEG max quality, click save, select HTML and Images
7. You should now have an HTML file and images folder. Open the HTML in Dreamweaver
8. Fine tune all css and HTML here. Delete images where live HTML will go. Wherever live HTML will go place joomla’s module position code, e.g., <jdoc:include type=”modules” name=”newposition”/>, <jdoc:include type=”modules” name=”footer”/>
9. Delete all current header code and replace with Joomla php header code and then save file as index.php
10. Zip all necessary files into a folder. This zip file name will be the template name in Joomla. Files include css folder with css file, images folder, js folder (javascript), your index.php file and a templateDetails.xml file.
11. Upload this zip file to your base install of Joomla.
Voilà! your done.
Written By: Izaak Hale – Web Designer
