I generally use Illustrator* for all my website design mock-ups. Illustrator is fast and allows for real time improvisation and alterations. However the downside is that it displays typefaces a bit differently from a web browser. So be prepared to take your Illustrator mock-ups with a pinch of salt. Don’t be too precious about them. Allow the design to evolve.
To begin with I set up an RGB file with a size of 902 x 902 px.
The grid is set to 18px to establish a baseline. Using the guides I created 4 columns each with a width of 203px and a margin of 18px.
Download the Illustrator file: opencartai
Here is a pic of the Illustrator mock-up.
We can see that each section in the mock-up roughly corresponds with the default layout.tpl template. (opencart/upload/catalogue/template/default/template.tpl) ie Header, Bar, Column, Content, Footer. However there is one deviation from the layout.tpl file in that the mock-up has a large home pic directly underneath the navigation bar. Later we will make a structural alteration to the layout.tpl template to accomodate the home pic.
Okay so our mock-up is more or less complete. What now?
We need to slice the mock-up into sections that will correspond with our layout.tpl template. ie Header, Bar, Column, Content, Footer.
I have already completed this task for you using Illustrator’s own ‘Save for web’ facility. I don’t always use Illustrator for this task it simply depends on the job. When slicing graphics for the web in Illustrator it is a good idea to view the slices in pixel preview, ‘View – Pixel Preview’. This will help you make sure that you are saving the slices cleanly with no additional pixels being added.
Download the files here: opencart_files
In the next tutorial Theming OpenCart – Header, I will be looking at combining the design elements with the code structure.
Tutorials
- Theming OpenCart – An overview
- Theming OpenCart – Design
- Theming OpenCart – Header
- Theming OpenCart – Column
- Theming OpenCart – Content
- Theming OpenCart – Footer
*As this is not an Illustrator tutorial I will not be covering the use of Illustrator in any depth in this tutorial.
Theming Opencart 1.5 is now available in e-book format. You can purchase the book here.
Tags: Catalogue Template, Column Content, Default Template, Design Elements, Footer, Header Bar, Illustrator, Mock Ups, Navigation Bar, Web Facility