Search code examples
htmltwitter-bootstrapresponsive-designthemespsd

PSD to bootstrap

I have a downloaded .psd see here : http://webtechdesk.com/boot/theme.png

I want to convert it in bootstrap based responsive html theme, can any body help me out about this. I know and familiar about the grid system and making the skeleton in bootstrap, but main problem is setting the background image in the same. how to do that?

also this psd has a slider shown in header (you can see the image of boys & girls standing side-by-side). In this slider is some rounded from bottom and flat from top how to make that kind of slider?.

I searched some sliders on google but all the result sliders are completely rectangular or square in shape?

Your Help is appreciated in advance.

Solution

  • You can take already designed webpage which is structured using bootstrap. And then start making/integrating your design requirements within that. It may help you to get started easily. Below I found some of web layouts which looks somewhere similar to your psd.

    http://startbootstrap.com/template-categories/all/
    http://startbootstrap.com/template-overviews/full-width-pics/
    http://startbootstrap.com/template-overviews/heroic-features/

    And to give curve to images (as shown in your psd), you can use below css to the div (which may contain the images). Adjust these values based on you need.

       border-top-left-radius: 2em;
   border-bottom-left-radius: 2em;