From PSD to Drupal Theme Tutorial Part I

While at a recent meeting held at Bryght's Office, there was great interest by the audience in seeing how to convert a Photoshop file into a Drupal theme.

This tutorial will show you how to take an existing design in either Photoshop or Illustrator to XHTML to a working Drupal theme.

For this example, I will be using Photoshop CS3 on a mac, however older versions of Photoshop and PC users should be able to follow along as the primary tools and menus that we will be using should remain very similar.

Those who prefer Illustrator, the method is almost exactly the same as in Photoshop. But since there was an interest in Photoshop specifically, it is the program I'll be using for this example.

SECTION ONE: PHOTOSHOP
So: First, open up your version of Photoshop and open up your completed design file.

To start off with, we will need to use the slice tool. Situated in the main toolbar (it looks like an X-acto blade). In the menu there is two options for the Slice tool, slice and select slice. For what we need the slice selection should do fine (pictured here), the other option allows slice that have already been created to be edited and resized.

Click and drag on your document with the slice tool to create a box around the section you wish to slice up. A number with a blue background will appear inside the box you've created and may also create grey faded boxes outside that one (this is normal and does not effect final result).


*NOTE* Slices can be hidden and shown under the VIEW menu: VIEW >> SHOW >> SLICES, and can be cleared and locked at the bottom of the VIEW menu.

/images/tutorials/slice1object.png" class="thickbox" title="Start Slicing!">

While I'm slicing, I start to remove any text that I planned to have as text and not on the image that I will be outputting. In this case, I will remove the illustrated login/password fields on the bottom.

Next, I finish slicing the rest of the image.



Things to keep in mind when slicing: I have removed the background layer of solid white, and made the background transparent (this allows an easy change of background without re-outputting the images)

Try to keep the slices as close to the object as possible- this ensures the most accurate placement and alignment, as all objects will have the same white space. Feel free to use guides and turn on snap to guides (VIEW >> SNAP TO >> GUIDES) to help aid in slicing precision.

Avoid slicing blocks of text as they are not searchable by Google. It is also difficult to read small text with image compression, and is not resizable which limits website accessibility.

There are exceptions for this rule, as in the case of the logo in my example. But for paragraph text or other large bodies, avoid this.

Keep images small: use as little image as possible (keep in mind that images can be tiled if set as a background image. In my example, for the right multicoloured blocks, I have only sliced the rounded corners, and since they are fully coloured, I will just continue the rest of the solid colour in HTML rather than making a large image.

Now! Assuming you're satisfied with your slices, we move on to SAVING. Before you save, make sure that you're in the correct colour space.

Your document should be in RGB not CYMK. Go to the IMAGE menu, (IMAGE >> MODE >> RGB) And make sure RGB is selected. If your document was in CMYK, there may be a slight colour change.

Now! On to saving, (FILE >> SAVE FOR WEB)

/images/tutorials/savemenu.png" class="thickbox" title="Saving">

You will be brought into a new window with a simplified toolbar, your document with your slices and some file format options.
Shift-Select all the slices you wish to save. The unselected slices should appear faded out.

When all slices are selected, focus your attention on the righthand side bar. Choose from the file format menu the format you want to output as. I am using PNG-24, as it has the a higher support of colours over PNG-8, since one of my photos I'm outputting is a photograph. PNG-8 may be better if all you are dealing with are solid colors or minimal colour ranges. Select transparency, if you want that enabled. Click SAVE.

Select your destination. Saving to Web automatically saves all files in an images folder in the chosen destination folder, with a number sequence (01, 02, 03, etc...). I would suggest renaming afterwards.

FINISHED SECTION 1
Move onto Part II