Design represents the graphical displaying of the website page. It should be noted that there is no separation into blocks and other functional components here. For that reason, if you want a responsive theme out of your standardized graphics, you’ll have to select its structure first.
When the issue is about conversion into a Drupal design theme, it is usually represented as a Photoshop or Sketch file, and beginners are horror-stricken. This is because alongside standard graphical element transfer the developers should strictly meet UX standards. In other words they should keep the convenience and intuitivity of all navigational components. In this article we’ll discuss how to make the conversion. Also we’ll discover whether it is rational to appeal to a third-party organization for PSD to Drupal conversion service.
Design to Drupal theme conversion: the major challenge
The major challenge of PSD to Drupal theme conversion is the fact that a Drupal theme consists of numerous small parts, blocks and components. So it is a complicated task for the beginner to reconstruct everything that was displayed on the picture. To make Drupal theme development crystal clear for you, you should focus on the following three principles:
- Every web page in Drupal is a set of functional elements, with each of them having its own default partition;
- To perform conversion you should pick the sharp texture out of the functional elements of your page and extrapolate it to the developed design;
- Your theme should contain only the details that make the default partition different from the targeted one.
Three fundamental steps in Design to Drupal theme conversion
The overall conversion process can be divided into three global stages. Let's discuss these in detail.
1. Photoshop theme development
Before you start working with any drawing program you should list the ideas of your site design on paper. The purpose of this is that not every greenhorn designer can wade through innumerable page elements to see how they fit together. In most cases the comprehension of how to “replenish” them into adaptive design comes too late, when a lot of time has already been spent on drawing. Moreover, when you’ve got a paper plan, it is much easier to draw again. So be organized.
It's true that you can have a turnkey design created in Photoshop or any other drawing program, but it is still a good idea to put it down on paper. Then it is easier to see whether the page functionality is logically constructed. Also, if you see the necessity to make changes in a finished PSD sketch, you can make changes that were foreseen; that will save you time and money.
Talking about pattern-making tools for future themes creating, Photoshop fits perfectly. To process a PSD-file you already have in the right manner, you’ll have to divide your sketch into layers using the slicing tool. Each layer should be saved as a separate file. (Analyzing your design on paper can bring you to the conclusion that there is no need to do this with some layers, or vice versa). Then all files should be placed into one directory. Thus you can create a couple of already-finished drawing interpretations in Photoshop, making some “banks” (directories) with different sets of layers. This approach will help you to select the best compilation.
2. PSD to HTML conversion
To convert the sketch to the Drupal theme, you need to analyze the functions of the future site and detect components that are used to build specific functions. Afterwards, you can find out which components must be changed.
To simplify this stage, draw up a table (you can even do it on paper). Mention all the mandatory site objects in the left column. The user’s member ledger, recycler, videoplayer, price catalogue, blog, feedback field, address bar, etc. are some examples of such objects. The next column is used to address modules for each component implementation. The last column is to describe the features of each component mentioned earlier (e.g., which financial operations can the user perform within your site).
This is how you detect if there are any components or characteristics in your list, and some of those are represented in the Drupal plugins by default. And this is the starting point to develop wireframes.
Usually when developing wireframes, the majority of the web designers tend to use paper tracing. While doing that, they start with the inner pages of the site (despite the prototyping seeming easy, you should set the connections between all the navigating components at the start). In such a manner, you’ll move consequently to the start page of your site and the fns root directory.
It must be separately noted that even when you have a completely turn-key design to work with, do not neglect prototyping. The mentioned outlines can make you think of created graphical site representation as such, avoiding distractions on picture aesthetics.
After a detailed prototypes workup, you can link them with site functionalities by default, and also with Drupal plugins, detected in a table drawn up earlier. In particular, Drupal plugins are responsible for database content pull and storage. In fact, they represent the database content in HTML-wrapper. At this time, the theme determines how the context will be represented on the page. It is performed by means of HTML-tags, which are processed with CSS. As a result, your work on the theme will be reduced to the correction of the HTML-wrapper code of the database contents. To start the theme conversion, you need to create the new file 'style.css' and make changes to it.
3. HTML code integration into major Drupal theme
At this stage of conversion of the sketch to a Drupal theme, you’ll have to transfer the newly-created HTML-code to the Drupal engine.
To accomplish this, you just need to select one multiple of the frameworks proposed by a specific engine. Next, build all the components that can be installed without any conversion into the framework and then start the styling by means of CSS.
To translate the idea into action, you should create a new directory and place your theme files there. While doing so, all the changes will be placed into the style.css file. Then, you’ll have to rename the prior theme for your site to stop “uploading” it automatically.
Summary
Now, let’s summarize! Despite the design, the Drupal conversion procedure is simple, and it requires specific Drupal skills from the web and layout designers. So, if you want to get a maximally seamless and logical solution, the best idea is to refer to good professionals (aka our company Anyforsoft). Our squad masters the expert level of PSD to Drupal conversion services provision. Therefore, we offer the conversion of any sophisticated and fantastical design to its “pixel perfect” HTML-version. And you will be able to represent your business within the boundlessness of the Internet.