PSD to Drupal Theming and its Steps

Friday 2 December 2011

Do you wish to convert your flat looking design into a gorgeous Drupal theme? If yes, then you are not the only one willing to do so. Several people prefer Drupal themes over simple PSD files but do not have any idea of how to do so. Here are some quick steps that can help you to convert PSD to Drupal theme.

PSD to Drupal theming is an elaborate step by step procedure. The first step is to open the PSD file which we have to convert from PSD to HTML/Drupal theme. The Photoshop document has to be broken into smaller sections by doing slicing. The text, the images, headers, footers and other small boxes like the login box have to be sliced into small separate sections.

The next step is to save these in a folder for images, numbering the sections from one to whatever number necessary. Now we need a text editor. A new page should be opened. This should be saved as the HTML page. Then we need a new page for CSS from PSD to CSS conversion. This can be saved as CSS-styles. Now we follow the similar steps with all the sections we have cut up and saved. It is to be remembered here that these maneuvers will also require an expertise in HTML commands which are exact and lengthy.

The next step in the conversion of PSD to Drupal Theme requires us to download Drupal. Web browsers and a text editor will be used as before for this PSD to Drupal theme step. We can now open the Drupal theme files once it is downloaded. This will also be saved and we can give a name like PSD to Drupal theme.

In the following step of PSD to Drupal conversion, open the theme files called Garland. In these theme files we will discover page.tpl.php file. Now we have to go back to the page where we saved all our HTML commands and here we change some of the content and headers to make it Drupal friendly.

The tag has now to be placed before the body tag. Again the necessary commands in HTML have to be given and a friend can be called to help in this section. This is painstaking work and steadily a lot of sections have to be changed to blocks.

As we continue converting PSD files to Drupal Themes, now we have to create a template page with intricate HTML coding. Your new theme name has to be renamed and all the regions added. We have nearly completed our PSD to Drupal theme. The Blocks can be configured and the commands for printing are ADMIN>>SITE BUILDING>>MENUS. Similarly blocks can be added by writing ADMIN>> SITE BUILDING>>BLOCKS.

Our theme is complete now and it’s time that we pay attention to the tiny details in customizing our web pages. We can place the Block we have made on various pages as we deem fit. The coloring can be matched for effect and in case it has to be changed it can be wearisome. So the initial theme that is thought of should be written down together with the colors to be used and the blocks of images and text to be used.

The main part which can be a little tiresome is the coding part in the PSD to Drupal conversion. It takes a long time before one gets the feel of the conversion. So convert PSD to HTML/drupal process is well worth learning technique because Drupal is an open source site that offers highly usable features and is changing to take over the world of open source development.

0 comments:

Post a Comment