Automatic responsive PSD to Bootstrap conversion

We launched a beta version of responsive PSD to Bootstrap conversion. Bootstrap 3.3.7 is used for the automated conversion.

We support desktop first approach, i.e. we take as input a template developed for the desktop. Then graceful degradation is performed for smaller screens.

Responsive PSD to Bootstrap conversion is more sensitive to the preliminary template preparation then other types of conversions performed by the service. Namely, following things should be taken into account:

  • Content width should be one of the following: 720, 750, 940, 970, 1140, 1170 pixels (correspondingly, container width will be 750, 780, 970, 1000, 1170, 1200 pixels). As content we treat all the layers except those which have width of the template (i.e. except full length backgrounds). Template itself  may have any  width.
  • Layers should be positioned according with the grid. The more precise positioning is the better.
  • It is highly desired for the layers to be grouped logically into rows and columns.

We continue improving PSD to Bootstrap conversion. If you have any ideas, proposals or comments regarding the way how Bootstrap template is generated – please, share them with us. That will help us to implement the most requested functionality quicker.

Examples

You can find several examples of automatically generated Bootstrap templates below:

  1. miami_home.psd
    miami_home code.zip
    miami_home online demo
  2. notify_psd_theme.psd
    notify_psd_theme code.zip
    notify_psd_theme online demo

Resources

It is quite handy to use Photoshop Guide Layouts when developing PSD design for Bootstrap. If you did not use it before, you may download Bootstrap Guide Layouts for different screen sizes below. You can either download them all or only specific ones:

In order to use them you should select menu item View -> ‘New Guide Layout…’. In Preset field choose ‘Load Preset…’:

Once Guide Layout is enabled, Photoshop will help you with precise positioning of layers according to the Bootstrap grid.

Share

Create CSS for hover, active, visited, selected states of layers

Such HTML elements of web page as links, buttons, input forms, etc. often have different visual states for events like “element is hovered by  mouse pointer”, “element is clicked”, “link was visited”, “element is active”.  For every state layer may have different CSS styles. Continue reading Create CSS for hover, active, visited, selected states of layers

Share

Embedding of linked smart objects is not required anymore

New Photoshop versions introduced support for linked smart objects: http://blogs.adobe.com/richardcurtis/2014/01/16/photoshop-cc-14-2-update-linked-smart-objects/. Using linked objects is a good thing. First, it allows to share image assets between psd files. Second, it makes size of PSD file much smaller. Continue reading Embedding of linked smart objects is not required anymore

Share

How you can create an ideal design: from an idea to coding

Today we would like to talk about creation of a design, about how a designer should organize his or her work, what mistakes you should avoid, what aspects you should pay special attention to for creation of a really beautiful design and for its realization to take minimum time. Continue reading How you can create an ideal design: from an idea to coding

Share

The history and tendencies of flat design development

Flat design, thanks to the big companies that started to use this approach several years ago, has forced its way into our life quite abruptly and unexpectedly for many. However, actually, this trend had existed before and developed together with realism and skeuomorphism. It came in web technologies from printing products of the 20th century, precisely there they actively used distinctive flat elements and simplified graphics coming up to symbolism. Let us find out how it all started. Continue reading The history and tendencies of flat design development

Share