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.
You can find several examples of automatically generated Bootstrap templates below:
miami_home online demo
notify_psd_theme online demo
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.
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
We added possibility to create tables from layers of PSD template. Continue reading Create tables with PSD to HTML converter
Automated PSD to HTML service is now able to extract images from Photoshop template in GIF format. Continue reading Extracting Photoshop layer as GIF image
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
Service of automated psd to html conversion is complemented with new (free!) tool to slice Photoshop template to images. Because of this, we are going to tell what should be taken into account when PSD slicing is performed and why it is not so trivial as may look like at first glance.
Continue reading Slicing Photoshop template to images
New Photoshop versions allow to set several effects of the same type simultaneously for a single layer. It is allowed for following effects: Continue reading Using multiple effects of the same type on Photoshop layers and layer groups
These days designers more and more often use such a technique as setting up effects on a group of layers in Photoshop. It may be really convenient for such effects as Color Overlay or DropShadow, because Continue reading Setting effects on Photoshop layer groups
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
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