Designing for Drupal: Photoshop Best Practices (Part 1 of 3)

Usually the first thing that comes to a designer’s mind when designing a website for a Content Management System (CMS) like Drupal is the “boring square style.” It can be challenging to have an out-of-the-box design that is still flexible enough to be scalable, but it is possible. You might say that in order to be truly creative a designer needs some rules to break, and the tight boundaries that can come with designing for a CMS can offer new challenges. This is why designing for Drupal is anything but boring – it can be interesting and challenging for any designer.

I’ve been designing Drupal websites for over two years and have picked up a lot of helpful tips for building great-looking sites while still working within the parameters of your CMS.

This post will deal with the basics – getting set up in Photoshop and using tools such as vector objects and colour palettes. Next week, I’ll talk about designing your background, main navigation, columns and subheadings. Then we’ll round things off with headings and footers and the importance of fine-tuning.

Starting in Photoshop

The empty canvas in Photoshop might be intimidating when starting out. A good way to overcome this is to focus on the smaller things that need to be taken care of when starting your layout in Photoshop. For example:

a.) Look for the wireframes. Are they complete and approved? Do you already know the right number of links for the main navigation?

b.) Do you have the client’s branding files handy, like their logo in .ai format and their colour palette?

c.) How big is the website going to be? Is there a large amount of text and pictures, like a big portal? Or is it more like a standard corporate website? This will strongly affect your website’s width and your consistency effort.

These days, a screen resolution lower than 800 × 600px wide is quite obsolete. The recommended size range can go up to until 980px wide, as the real browser area will be up to 994px wide. A generally-accepted site width is now from 900px to 960px wide.
You can read more details about website dimensions in the links below:
Size does matter – Actual numbers
Browser Display Statistics
Screen Resolution and Page Layout by Jakob Nielsen

After taking care of all of the above steps, start on Photoshop with a new file and create the settings for your new project. The settings I usually use are in the image below, but you can, of course, use your own favourite settings if they are different than what’s pictured here.

Figure 01: Photoshop “New file” dialogue box

Dimensions – A very wide dimension gives you the most options for design. Your design is not limited to inside the website content area – outside the borders is the perfect place for a great background image or to keep the colour palette.
Resolution – Web resolution is based on 72dpi, which is what you would use as the resolution input.
Colour Mode – Use RGB, otherwise you can have issues with saturation and hue.
Background Content – White is the most popular, but you can start with any colour or make the background transparent.
Below Advanced – Usually Photoshop keeps these settings as default, once you selected “RGB” on the Colour Mode above, so there is no need to change them.

For more information about Photoshop preferences and settings check out:
Photoshop Preferences
Photoshop CS3 Essential Preference Settings

Vector Objects

For any website design, try to use vector objects as much as you can. Details can change down the road and it’s much easier to resize the layout if you’ve used vector objects. This keeps the design always sharp and allows for the flexibility to stretch and resize.

See in the picture below for examples of what you can use as vector objects:

Figure 02: Examples of vector objects in a website layout

Guidelines

Guidelines in Photoshop are as necessary as a car in a Nascar race. Of course, you can still design without them, but it would be the equivalent of entering a Nascar race on foot.

As soon as you choose the dimensions of the layout, e.g.: 940px wide, set guidelines to it. Also set distances between main columns and margins, as well as the column dimensions. This can seem like a boring task when you want to get on with the creative work, but it is an important step in order to keep consistency throughout the site.

Figure 03: Suggested Photoshop guidelines in the beginning of a layout

Colour Palettes

Using colour palettes is recommended to make all the colour-choosing easier and faster. Keep them to the far side of your window to maximize your working space.

A good way to handle colour changes on design objects is to set the colour in the layer style option (Colour Overlay).

Figure 04: Colour overlay – Layer style settings pop up

To improve your performance, you could set some keyboard shortcuts to copy and paste layer styles. For example, it is easy to select several bullets and apply a new colour all at once, which can save you lots of time.

To find and edit keyboard shortcuts to handle Photoshop layers just go Edit > Keyboard Shortcuts and then select in the combo Shortcuts for: Palette Menus. Below that you will see the layer subsection. At the very least, a keyboard shortcut that opens the entire layers style menu is highly recommended as it can greatly improve the performance of layer colour and style editing.

For more information about colour settings for Photoshop:
Color Settings in Adobe Photoshop CS4
Photoshop CS Color Settings
Photoshop Color Settings

Now that you’re set up and off to a good start, don’t forget to check back next week for more information on designing your background, main navigation, columns and subheadings.