To mark the recent release of Drupal 7.7, I'm going to walk you through designing a simple website which can be converted into a functional Drupal theme. In this, the first part, we'll cover basic photoshop techniques, such as styles, slicing, guides, layer structure and much more.
I will also be discussing Drupal's structure and how we allow for it in our design. Let's begin!
Step 1: Setup
This is what our basic structure will look like. These areas are referred to in Drupal as regions, which can contain various blocks of information.
Begin by opening the 960_grid_12_col.psd you downloaded from the 960 Grid download link above. Go to Image > Canvas Size and change the width to 1240 pixels and the height to 1480 pixels, this will give us some extra space to work with. Make sure you have Rulers (Ctrl + R) and Guides (Ctrl + ; ) turned on.
Step 2: Layer Structure
Create a new group (CRT + G) and call it 'HOME', then add 6 more groups within it: 'header', 'featured', 'welcome', 'columns', 'container' and 'footer'.
Step 3: Background
Unlock the background layer by clicking on the lock icon at the top of your layers palette.
Double-click on that layer and give it a color overlay of #f3f3f3.
Step 4: Header Background
Under 'header' add two new groups called 'header container' and 'header bg'. Next within 'header container' add two more groups 'logo 'and 'nav'.
To create a new guide go to View > New Guide. Now add a horizontal guide at 100px.
Now create a new layer in 'header bg' name it 'bg'. Draw a rectangle between the horizontal guides 0 and 100px and fill it with #327aa7.
Add a stroke: 1px inside color: #295f94.
Step 5: Logo
Create new horizontal guides at 30px and 70px.
In the 'logo' group, type in some logo text with the following settings:
Step 6: Navigation
Starting from the vertical guide 630px, type in some navigation links: 'home', 'services', 'portfolio', 'about', and 'contact'. Separate them by 8 pixels.
Step 7: Featured Background
The featured section will be a region in our Drupal theme and we will configure the slider block to only appear on the homepage in Part two of this tutorial.
Under 'featured' create two new groups 'featured container' and 'featured bg'. Within 'featured container' add 3 new groups: 'arrows', 'bullets' and 'image'.
Create new horizontal guides at 140px, 460px and 500px. Within the 'featured bg' group add a new layer called 'bg' and draw a rectangle from 100px to 500px with a fill of #338fca
Add a stroke gradient:
Step 8: Slider Image
Within 'featured container' > 'image' create a new layer and name it 'placeholder'. Next draw a rectangle from 140px to 460px, fill with #FFF and place in a large image.
Right-click on the image and select create clipping mask on the 'placeholder' layer.
Step 9: Slider Arrows
Create new horizontal guides at 280px and 320px.
Go to your custom shape tool and select an arrow shape.
Refer to the guides created earlier and draw an arrow in between the vertical guides 172px and 210px. Place the shape in the arrows group and name it 'prev'.
Next go to edit > transform and select rotate 180 degrees.
Change its opacity to 50% and add a color overlay #000.
Duplicate that arrow and move it to the other side of the slider at 1030px (vertical) and then go to Edit > Transform > Rotate 180 degrees.
Step 10: Slider Bullets
Create new horizontal guides at 470px and 480px. Now draw a 10x10 circle between the vertical guides 610px and 620px, fill it with #FFF and call the shape 'current'. Move the layer to the bullets group.
Duplicate that circle twice, move them 3px apart to the right, and name both layers 'inactive'.
Add an inner shadow with these settings:
Add a color overlay with #327ba8.
To duplicate those styles onto the other button, hold ALT and drag the fx style onto the next layer.
The final result:
Step 11: Welcome Section
The welcome region will contain the title of the page and a block for our call to action button.
Create a new horizontal guide at 600px. Within the 'Welcome' group create two new groups: 'welcome container' and 'welcome bg'.
Create a new layer under 'welcome bg', call it 'bg', draw a rectangle from 500px to 600px and fill with #FFF
Add a stroke:
Create new horizontal guides at 525px and 575px.
Create a new group within 'welcome container' and name it 'page-title h1'
Add some text such as 'Welcome to business template' with the following settings:
Create another group within 'welcome container' and name it 'call to action'. Now draw a rounded rectangle with a 5px radius from 790px to 1090px.
Add a linear gradient #338fca to #327ba8
Now add some text with the following settings:
Step 12: Columns
The columns region will be configured to only display on the homepage just like the image slider.
Create new horizontal guides at 640px, 660px, 700px, 810px and 840px.
Setup the folder structure like this:
In the h2 folder add a title with the following settings:
Add an icon from the icons supplied above. Move it to the icon folder and move the left edge of the icon to the guides 700px (horizontal) and 150px (vertical)
In the p folder add some dummy text at the vertical guide 230px with the following settings.
Between the horizontal guides 810px and 840px. Create a rounded rectangle with a 5px radius and fill with #338fca.
Add some 'read more' text inside the button with these settings:
Repeat this step two more times to create the other two columns, just change up the icons and titles.
Step 13: Content
Setup the container folder structure like this:
Create new horizontal guides at 880px, 920px and 1180px. Create a new layer in the 'bg' folder and call it 'content-bg'. Now draw a rectangle from 880px to 1180px with a width of 620px and a fill of #FFF
Give it a stroke:
In the 'h2' folder add a title below the 920px horizontal guide and at 190px vertically.
Create new a horizontal guide at 960px and add some dummy text with these settings:
Now add in the 'read more' button, just copy one from the columns section and place 20px from the p text.
Step 14: Sidebar Search
Now we will work on the sidebar, which will appear on the homepage
Within the sidebar folder setup your folder structure like this:
Create a new layer: 'search bg' and put it in the 'search' > 'bg' folder. Next draw a rectangle from 880px to 920px with a width of 300px, fill it with #FFF
Place in the search button near the end of the search form and fill with #999.
Step 15: Sidebar login
At the horizontal guide 960px type in a title: 'User Login' with the following settings:
Create a new horizontal guide at 1000px and in the 'user' folder add a group label. Now add text: 'Username' with these settings:
Create new horizontal guides at 1020px and 1050px.
Create a new group 'input' and a new layer 'input-bg'. Now draw a rectangle in between those guides with a width of 160px and fill with #FFF.
Create new horizontal guides at 1070px, 1090px and 1120px. Duplicate the user group and move it down to 1070px. Rename the 'username' label to 'password'.
Create new horizontal guides at horizontal guide at 1140px and 1170px. To create the login button repeat the steps from the 'read more' button section above.
Step 16: Footer
Within the 'footer' folder setup your folder structure like this:
Create new horizontal guides at 1260px and 1360px.
Within the 'footer-bg' group, create a new layer 'bg'. Now draw a rectangle in between the guides created in the last section and fill with #999.
Create a new horizontal guide at 1290px.
Within the links group, add in some text links: 'home', 'services', 'portfolio', 'about' and 'contact' with these settings at the 150px vertical guide.
Within the 'social icons' group add in the facebook, twitter and rss icons at the 470px vertical guide. Separate them by 6px.
Within the 'copyright' group add some copyright text with the following settings at the 790px vertical guide.
Step 17: Slicing Logo
We're going to slice the logo as an image. You could use the site name as your logo, but in the second part of this tutorial I will show you how to upload an image logo for Drupal instead.
Grab the slice tool and draw a rectangle around the logo. Right-click on the slice rectangle and select edit slice options.
Rename it to 'logo' and give it a width of 90px and height of 45px.
Now hide the 'header bg' layer and 'background' layer so our logo is transparent.
Go to file > save for web and devices and select PNG24 with transparency checked.
Make sure you click the slices option "Selected slices" when saving.
Step 17: Slicing Search Button
Next we will slice the search button.
Draw a slice rectangle around the search button. Right-click on the slice and select edit slice options.
Rename it to 'search-btn' and give it a width of 16px and height of 16px.
Now hide the 'search bg' layer and 'background' layer.
Go to file > save for web and devices and select PNG24 with transparency checked.
Step 18: Slider Images
Create a new document with a width of 940px and height of 320px. Next add in some large images for our image slider.
For each image go to file > save for web and devices and select JPEG with 100 quality and progressive load.
Step 19: Slider Bullets
Create a new document with dimensions of 10px by 24px.
Go back to our design psd and copy over the slider bullets we created earlier. Create new horizontal guides at 1px, 11px, 13px, 23px. Now set out the bullets like below:
Go to file > save for web devices and select PNG24 with the following settings.
Step 20: Slider Arrows
Create a new document with dimensions of 76px x 40px.
Go back to our design psd and copy over the slider arrows we created earlier. Set out the arrows like below:
Create a new vertical guide at 38px
Go to file > save for web devices and select PNG24 with the following settings.
Step 21: Icons
Now, with the general and social icons we placed in our design, they could be sliced up but I'm just going to upload them from the icons folder that was supplied.
Conclusion
Thats the end of the design section of this short series! Be sure to check out part two where we take this design and turn it into a Drupal theme!
I hope you enjoyed following along, thanks for reading!
