From Photoshop to Composite in seconds

Ever tired of the trivial task of cutting up a Photoshop design and putting it into an HTML template in a CMS? Well, at Composite we were… So, instead of just accepting the facts we created our own reality – a reality, where you simply export your Photoshop designs to Composite C1 using the new Deployer tool in version 1.1. C1 does all the necessary HTML work for you. We even upload images, put them into place – and allow you to do function calls and create content areas from Photoshop directly.

So, instead of showing your design proposals to customers as print-outs, why not show it to them in a running site. Using Photoshop and the new Deployer and Packages for Composite C1, you can have such a site up and running in 10 minutes. No kidding!Moving a design from your Photoshop environment to your CMS has never been easier…

In Composite C1 version 1.1, you can use the Deployer (please see the article about version 1.1 to read more about this tool) and the Photoshop Exporter script to create your own packages of Photoshop design, and install these into Composite C1. But, how can you do that…?

We have created a Photoshop Script, that generates a Composite C1 Package based on your design. Basically, this script runs through your Photoshop layers and converts these into divisions in a HTML layout. Images (including transparency options etc) are embedded, text is regarded as text etc etc. Once you run the script, you will end up with a ZIP file, that has the structure of a Composite C1 package. In reality, this means you now have a package you can install into any Composite C1 installation – without any programming at all. Composite C1 interprets the content of the package and generates the necessary HTML (including divisions, placeholders etc) and uploads the images. Composite C1 even generates a CSS file for your new design, allowing you to modify everything you want in the exact same manner, as if you had done the HTML work yourself.

But, design is one thing. One of the basic principles of running a CMS on a website is to have areas in which an editor can modify content once the site is up and running. If the designer knows where these areas shall be located in the design, including them in the Composite export is as easy as inserting a new layer. All you have to do is give the layer a name starting with “placeholder:”. Composite will then interpret this layer as a content area, and include a HTML field instead of the image itself. In the illustration below, the pink boxes are layers with names all starting with “placeholder:”. Once exported, these areas will be transparent content areas – so the pink color is only for overview purposes.

In the same illustration below, there is also a blue box. Whereas the pink boxes (all being layers with the “placeholder:” naming) creates content areas, the layer with the blue box is named “function:” and then a function name (i.e. a menu, a newslist, a sitemap – or any other function in the Composite solution). Instead of creating a content area, Composite C1 will position the appropriate function at this location – allowing Photoshop workers to include functionality into the design directly. With the number of packages for the Composite C1 Deployer tool increasing over the next months, this feature makes the creation of websites extremely fast and efficient.

Process

1. Create your layout in Photoshop

A design in Photoshop – notice the different layers.

2. Run the Composite Export script from within Photoshop

3. Install your design package in Composite C1

4. Your design is ready[