Close this search box.

Custom Joomla websites, from Illustrator to the web, a condensed version

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.

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


white label guide to success

Simply the Best at White Label Marketing in the World


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

Get Started

"*" indicates required fields

Do you run a marketing agency?*
What services are you interested in?

Trending News
Featured News
Listen to our CEO’s podcast “The Daily Drive” to stay driven and get great business insights from top business leaders. – Are you ready to scale your agency with a quality white label SEO, white label PPC, or white label social media provider?
If so schedule a meeting here – Let’s Talk