Creating a Drupal Theme from a PSD

PSD to Drupal is one of the most popular theme conversions. It guarantees good result and a lot of features. Drupal is one of the most preferred content management system. It makes it a lot easier to edit, update and manage the content of your website. It is absolutely easy to use and does not require any technical knowledge. Using Drupal any one can easily handle all the content and make changes as per the requirement. It also saves you a lot of time and money. Discussed below are the points on how to convert PSD to CSS/Drupal theme. Go through them and you will find how easy it is to download and install Drupal.

Only eight easy steps and you can create and use your Drupal template.

Step 1: Opening the PSD in Adobe Photoshop

Firstly, get started by opening the PSD file in any image editing software such as Adobe Photoshop. Adobe Photoshop is the most popular and widely used image editing software which is used for PSD slicing.

Step 2: Slicing PSD

Next step is the slicing of PSD file into multiple layers. Go to the main ‘toolbar’ of image editing software where you will find ‘Slice tool’ tab and just by a click you can start the slicing process.

Step 3: Saving sliced images

Right after the process of slicing of PSD, create a folder name as image folder where you can save all the sliced images and place this images folder inside the same folder where theme files are saved.

Step 4: Coding HTML

In the fourth step, coding of sliced images into any markup language such as HTML/XHTML takes place. Once completed with the coding task, now save this page as ‘home.html’.

Step 5: Adding stylesheet

You need to open a new page and save it as ’style.css’ in order to add CSS style sheet to the page. Add div tag type in the body tags. Now code these Div tags with identified class names such as .maincontent, .rightcontent, .topnav, .topcontent and .footerlogin inside the ’style.css’.

Step 6: Downloading and installing Drupal theme

You need to download and install the selected Drupal theme to initiate the process of converting HTML page into a fully functional Drupal theme. These theme files should be stored by creating a new folder.

Step 7: Configuring page.tpl.php

Now open this theme folder along with opening of file called page.tpl.php, place it right before the tag and save changes as a new file called page.tpl.php and copy changes to style.css within new theme directory. The body content of page.tpl.php will remain same as the HTML file but you should replace the sections of page.tpl.php with quality content.

Step 8: Configuring template.php

Finally you should create a new page and name it as template.php. Rename the function Yourtheme_regions to theme name. Now you are done with the last step of converting HTML page into Drupal theme.

Now you are done with the conversion! All you need to keep in mind is to follow the above mentioned PSD to Drupal steps in a proper manner and sequence. This will ensure that you get a well functioning Drupal theme based website ready.

Leave a Reply