Implementing a web page from a .psd file [closed]

Question

I want to develop a login page for my application. I searched on Internet and found a .psd file. I will write my own JavaScript code for it but how can I use that .psd file to get css files and images suitable to use for programmatic purposes?

Link for .psd file: http://www.premiumpixels.com/freebies/elegant-login-form-design-psd/

Answer 1

EDIT
You can find some PSD-to-CSS converters like: http://psd2htmlconverter.com/en/ But you'll get a bunch of non-sense html markups and CSS code
With a bit of knowlecge of HTML-CSS you can create anything you want by just seeing an image and with a basic image-editor.
Tutorials like: http://www.1stwebdesigner.com/freebies/psd-htmlcss-conversion-tutorials/

or...

---

Why you just don't use pure CSS / CSS3 ?

And a bit of jQuery magic?
(With NO images used!)

LOGIN FORM DEMO

HTML:

<div id="loginContainer">
    <div id="loginForm">        
        <b>Username:</b><br>
        <input type="text" name="uname" /><br>
        <b>Password:</b> <span><a href="#">Forgot your password?</a></span><br>
       <input type="text" name="psswd" />       
    </div>  
    <div id="loginFormFooter">       
        <input type="checkbox"/> Keep me logged in <input class="login" type="button" value="Login"/>      
    </div>
</div>

CSS:

#loginContainer{
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:17px;
    position:relative;
    width:400px;
    height:290px;
    background:#fff;
    border:1px solid #D1DCDE;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#loginForm{
    position:relative;
    width:350px;
    height:150px;
    padding:25px;
    line-height:34px;
}
#loginForm input{
    border:1px solid #D1DCDE;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width:322px;
    padding:0px 12px;
    height:30px;
    line-height:30px;
}
.active{
     border:1px solid #B8D4EA;
    -webkit-box-shadow: 0px 0px 1px 7px #F3F8FC;
       -moz-box-shadow: 0px 0px 1px 7px #F3F8FC;
            box-shadow: 0px 0px 1px 6px #F3F8FC;       
}
#loginForm span{
    position:absolute;
    width:300px;
    right:25px;
    text-align:right;
}
#loginForm span a{
    color:#666;
    font-size:15px;
    text-decoration:none;
}
#loginFormFooter{
    position:relative;
    width:350px;
    height:39px;
    padding:25px;
    background:#F0F5F8;
    border-top:1px solid #D1DCDE;
    line-height:34px;
}
#loginFormFooter .login{
    position:absolute;
    height:38px;
    right:25px;
    width:80px;
    text-align:center;
    border:1px solid #7EAFCD;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    font-weight:bold;
    color:#fff;
    text-shadow: 1px 0px 1px #999;
    filter: dropshadow(color=#999, offx=1, offy=1);
    background: #b3e1ef; /* Old browsers */
    background: -moz-linear-gradient(top, #b3e1ef 0%, #7eafcd 100%, #a8d1dd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3e1ef), color-stop(100%,#7eafcd), color-stop(100%,#a8d1dd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b3e1ef 0%,#7eafcd 100%,#a8d1dd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b3e1ef 0%,#7eafcd 100%,#a8d1dd 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #b3e1ef 0%,#7eafcd 100%,#a8d1dd 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3e1ef', endColorstr='#a8d1dd',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #b3e1ef 0%,#7eafcd 100%,#a8d1dd 100%); /* W3C */
}

jQuery:

$('#loginForm input[type="text"]').bind('focus',function(){
   $(this).addClass('active').siblings().removeClass('active');
});

$('#loginForm input[type="text"]:eq(0)').focus();

Answer 2

You'll need to write HTML and CSS code that creates a layout matching the PSD file. Many of the visual elements can be created with CSS, some may need to be images.

You'll need to open the file in photoshop, isolate graphic elements and use Photoshop's save for web command in order to save a jpg/png image that you can include in your HTML.

If you have no experience with HTML and CSS, there is some good learning material here: http://htmldog.com/

Or you can hire a front-end developer who specializes in this kind of thing!

You shouldn't need to write any Javascript code to make this work - unless you are doing something extra fancy.