Using web skills to create product catalog / brochure

update : Brochure we created using below discussed points, for Postoz - SaaS hosted business process system is accessible at https://s3.amazonaws.com/postoz/postoz-brochure.pdf

In this blog we discusses about creating professional looking product catalog / brochure by leveraging web development skills.

You need,

• jQuery (http://jquery.com/) - Cross browser javascript library.
• Blue print CSS (http://www.blueprintcss.org/) - Cross browser CSS Framework with grid based layouts, typography.
• Cufon (http://cufon.shoqolate.com/) - Javascript frame work for displaying visually interesting fonts by replacing existing texts.
• Cufon fonts (http://www.cufonfonts.com/) - Free catalog of fonts to use with Cufon.
• Wkhtmltopdf (http://code.google.com/p/wkhtmltopdf/) - Webpage to PDF converter that uses webkit rendering engine.

To outline steps involved, we will create simple brochure.

Create brochure layout with Blue print CSS

if you haven't used Blue print CSS before, have a look at this tutorial

Apply necessary styles

Download and apply Cufon fonts

For this demo, i used vanilla font from Cufon fonts.

Export your webpage as pdf

You can download files associated with this blog entry at github repo : https://github.com/selvan/sample-brochure

update : Brochure we created using above discussed points, for Postoz - SaaS hosted business process system is accessible at https://s3.amazonaws.com/postoz/postoz-brochure.pdf