Jump to content

[Guide] From PSD to HTML - CSS


Recommended Posts

Hello to all, well today we look at desktop publishing layout of the PSD (Photoshop file) to the valid code and cross-browser HTML / CSS. Just analyze a couple of fixes for Internet Explorer 6.

 

Concept Design

 

particle-concept-sm.jpg

 

Designed by Chris Spooner is a layout for a blog on WordPress. Gray background, combined with splashes of different colors in the header and the various buttons and links provide an excellent effect.

 

Cutting PSD

Layout always starts with the cutting layout. First of all let's get down to the background of those in the header. Since the image contains a variety of gradients and colors, then save it as JPEG.

 

export-header.jpg

 

In the same way cut out each element in the design. In some cases, you have to turn off the upper layers, for example, the background for the button with the date.

 

slice.jpg

 

Once you're done with pulling out pictures, you will have a folder with all images. Some of them will be repeated in the background when the others will serve as a common graphical components.

 

1.jpg

 

First, let's those zeroes styles that will not allow browsers to add arbitrary padding. Then set the font and background for a tag body. For the block-container we specify margin: 0 auto;, so it appears on the screen.

 

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote { 
    margin: 0; padding: 0; border: 0; 
} 

body { 
    font-family: Helvetica, Arial, Sans-Serif; line-height: 24px; 
    background: #eee url(images/body-bg.jpg) center top no-repeat; 
} 

#container { 
    width: 925px; margin: 0 auto; padding: 143px 0 0 0; 
}  

 

Now let's cap. The only thing I would like to mention here - the category should be transformed to uppercase letters in accordance with the design.

 

#header { 
    background: url(images/header-bg.png) rightright bottombottom no-repeat; overflow: hidden; 
    padding: 0 0 50px 0; 
} 

    #header h1 { 
        float: left; 
    } 

    #header ul#categories { 
        float: rightright; list-style: none; margin: 16px 0 0 0; 
    } 
        #header ul#categories li { 
            float: left; margin: 0 0 0 40px; 
        } 
            #header ul#categories li a { 
                display: block; 
                font-size: 14px; font-weight: bold; text-transform: uppercase; color: #a42988; 
                text-shadow: 0 2px 0px #fff; text-decoration: none; 
            } 
                #header ul#categories li a:hover { 
                    color: #006ab1; 
                }  

 

Our layout now beginning to take shape.

 

2.jpg

 

Further customize our content and sidebar. Since these two columns are arranged side by side, one would have to specify the float, and set overflow value to hidden. Will also need to set styles for references. We have to set the date of the map background and positioning around the unit relevant news.

 

#content { 
    background: url(images/content-bg.png) rightright top repeat-y; overflow: hidden; 
} 

    #content a { 
        font-weight: bold; text-transform: uppercase; color: #a42988; 
        text-shadow: 0 2px 0px #fff; text-decoration: none; 
    } 
        #content a:hover { 
            color: #006ab1; 
        } 

    #content #main { 
        width: 685px; float: left; padding: 55px 0 0 0; 
    } 
        #content #main h2 { 
            margin: 0 0 16px 0; 
        } 

        #content #main p { 
            margin: 0 0 25px 0; color: #474747; font-size: 15px; 
        } 
#content #main .post { 
    background: url(images/post-divider.png) rightright bottombottom no-repeat; 
    padding: 0 47px 55px 0; margin: 0 0 55px 0; 
    overflow: hidden; 
} 
    #content #main .post .date { 
        width: 62px; height: 57px; float: left; padding: 15px 0 0 0; margin: 0 20px 0 0; 
        background: #0085cc url(images/date-bg.jpg); 
        text-align: center; 
    } 
        #content #main .post .date p { 
            font-size: 40px; font-weight: bold; color: #fff; 
            text-shadow: 0 2px 3px #006ab1; 
        } 
            #content #main .post .date p span { 
                margin: 5px 0 0 0; 
                display: block; font-size: 17px; font-weight: normal; text-transform: uppercase; 
            } 
#content #main .post .post-content { 
    width: 556px; float: left; 
} 
    #content #main .post .post-content ul.post-meta { 
        width: 515px; height: 21px; list-style: none; padding: 14px 20px; 
        background: #d6d6d6 url(images/meta-bg.jpg); 
    } 
        #content #main .post .post-content ul.post-meta li { 
            float: left; margin: 0 40px 0 0; 
            font-size: 15px; font-weight: bold; text-transform: uppercase; color: #fff; text-shadow: 0px 2px 3px #b8b8b8; 
        } 
            #content #main .post .post-content ul.post-meta li.read-more { 
                float: rightright; margin: 0 0 0 0; 
            } 
                #content #main .post .post-content ul.post-meta li a { 
                    color: #fff; text-shadow: 0px 2px 3px #b8b8b8; 
                } 
                    #content #main .post .post-content ul.post-meta li a:hover { 
                        color: #eee; 
                    }

 

Quite a lot still needed for content, but this is the main part! So far we have obtained all just fine.

 

5.jpg

 

Since the content we're finished, proceed to the sidebar. It is necessary to ask oborazhenie link-buttons with the background and give them a beautiful display. Just do not forget about the subscription button (on setting this up, I wrote earlier).

 

#content #side { 
    width: 200px; float: left; padding: 5px 20px; 
} 

    #content #side p#subscribe a { 
        display: block; height: 30px; font-size: 20px; color: #fff; padding: 7px 0 0 45px; margin: 0 0 15px 0; 
        text-shadow: 0px 2px 3px #b8b8b8; 
        background: url(images/rss-icon.png) left no-repeat; 
    } 
        #content #side p#subscribe a:hover { 
            color: #eee; 
        } 

    #content #side ul#pages { 
        list-style: none; margin: 0 0 30px 0; 
    } 
        #content #side ul#pages li { 
            margin: 0 0 5px 0; 
        } 
            #content #side ul#pages li a { 
                display: block; width: 157px; height: 23px; padding: 12px 20px; text-align: center; 
                background: #eee url(images/sidebar-btn.png); 
            }

 

We almost came close to an end. Just a couple of steps ahead of him.

 

6.jpg

 

Now do the social bookmarks. In HTML code, we asked them the usual list, but by now we give the list of styles they are more or less human form. Also a search form. Here we choose to display the button inside the field.

 

#content #side h3 { 
    font-size: 20px; text-transform: uppercase; color: #fff; margin: 0 0 5px 0; 
    text-shadow: 0px 2px 3px #b8b8b8; 
} 
    #content #side ul#follow-me { 
        overflow: hidden; list-style: none; margin: 0 0 30px 0; 
    } 
        #content #side ul#follow-me li { 
            float: left; margin: 0 8px 8px 0; 
        } 
            #content #side ul#follow-me li a { 
                display: block; width: 32px; height: 32px; 
                text-indent: -9999px; 
            } 
                #content #side ul#follow-me li a.twitter { 
                    background: url(images/social-icons/twitter_32.png); 
                } 
                #content #side ul#follow-me li a.facebook { 
                    background: url(images/social-icons/facebook_32.png); 
                } 
                #content #side ul#follow-me li a.flickr { 
                    background: url(images/social-icons/flickr_32.png); 
                } 
                #content #side ul#follow-me li a.youtube { 
                    background: url(images/social-icons/youtube_32.png); 
                } 
                #content #side ul#follow-me li a.vimeo { 
                    background: url(images/social-icons/vimeo_32.png); 
                } 
#content #side form#search { 
    margin: 0 0 30px 0; 
} 
    #content #side form#search input.search-bar { 
        width: 135px; height: 43px; padding: 1px 45px 0 15px; float: left; 
        background: #eee url(images/search-bar.png); 
        font-size: 15px; color: #474747; 
    } 
    #content #side form#search input.search-btn { 
        width: 27px; height: 27px; float: rightright; margin: -36px 15px 0 0; cursor: pointer; 
        background: url(images/search-btn.png); text-indent: -9999px; padding: 0 0 0 27px; 
    }

 

That we have already happened?

 

9.jpg

 

Mend IE 6

 

All browsers are displayed very well except .... true - Internet Explorer 6.

 

ie6.jpg

 

For him, we need to create a separate file and write back some clarification. Proceed.

 

#content #side, #content #main .post .date, #content #main .post .post-content ul.post-meta { 
    overflow: hidden; 
} 

#content, #footer, #header  { 
    height: 100%; 
}

 

The HTML code between the head tags to add a connection to IE 6.

 

<!--[if IE 6]> 
<link href="css/ie6.css" rel="stylesheet" type="text/css" media="screen" /> 
<![endif]-->

 

Final result

On this work with the layout is finished. Uh ... Now we have finished svertanny layout.

 

particle-concept-sm.jpg

 

To bring to perfection

When everything is ready, it is worth to think about functionality. To page opens in the browser faster, use the compressor package

 

webjoe

 

PD: but someone tell you to do this in this section, is wrong, but why? because the web that provide PSD bone here many are only skin on the web, with this in may build the website from PSD, hope you find it helpful.

 

Credits by Gotessa for post and webjoe for guide

Link to comment
Share on other sites

Very nice CE!

I like your guides!

Thanks again.

He can find nice guides/shares in web,indeed

It should go @ Offtopic too

 

 

anyway,thanks

Link to comment
Share on other sites

He can find nice guides/shares in web,indeed

It should go @ Offtopic too

 

 

anyway,thanks

so what's the problem about this if only what I bring to help others,better worry about yourself before you throw shit to others, only allows people to leave forum.
Link to comment
Share on other sites

so what's the problem about this if only what I bring to help others,better worry about yourself before you throw shit to others, only allows people to leave forum.

Never said you are not helping ,or that sharing things is bad,even not yours

 

just mentioned this fact :P

Link to comment
Share on other sites

  • 3 months later...
  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...