Jump to content

Recommended Posts

Posted

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

Posted

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.
Posted

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Posts

    • Interface sources for P447 (7s update) for Classic/Essence   NWindow + InterfaceClassic + L2Editor + L2ClientDat Mobius + XDat Editor   Download
    • Hey there, welcome to the community – no worries about being new, we all started exactly where you are. Let me break this down based on what you’re trying to achieve with your Interlude‑Classic idea.   What you’re describing is actually a pretty popular concept: basically Interlude gameplay and balance, but with Classic‑style UI and a cleaner overall user experience. A “hybrid client”, not a full chronicle change.   Projects that have done something similar or are worth studying:   Lucera 2 – You’re right about this one. They use a custom client that blends Interlude gameplay with a more modern/Classic‑like interface. Their UI work (inventory, skill bar, lobby, etc.) is a good reference point.   L2J Mobius – Not exactly your target, but it’s very flexible and has a lot of examples of customizations and adaptations between chronicles.   Smaller custom projects – There are (or were) a few hybrid attempts using Interlude server files with heavily modified clients, but most are private or closed‑source, so you mainly get ideas, not ready‑to-use files.   Where the real challenge is (the client side):   What you want is possible, but the heavy lifting is on the client, not the server. The main pain points usually are:   Making sure interface files are compatible between chronicles (UI textures, layouts, systemmsg, etc.).   L2Font and localization edits: titles, chat, system messages – a small mistake here can break visuals or cause weird text issues.   Character selection / lobby screens: if you take them from another chronicle, you have to adapt them carefully so they don’t conflict with Interlude data.   Inventory, status bars and shortcuts: they must still work with Interlude’s item/skill structure and packet format, or you’ll get visual desyncs and client errors.   About multi‑protocol:   You’re correct that multi‑protocol is often used by projects that want to support different client versions or custom blends. In your case, it can help “talk” properly with a customized client while keeping an Interlude base server. It doesn’t magically fix everything, but it gives you more flexibility on how client and server exchange data.   Quick chronicle breakdown (relevant for your idea):   2.0–2.6: Early, simpler mechanics, good base for old‑school vibes.   2.7: More skills and better balance, often used as a base for custom projects.   2.9.5: A “bridge” between old and new, very common choice for hybrid or heavily modded setups.   3.0+: Adds Kamael and systems you said you don’t want, so you’d mainly use it as a reference, not as a direct base.   My honest recommendation:   Start from a solid Interlude base (files you understand and can actually maintain). Interlude still has the most support, tools and community knowledge.   Focus first on UI/interface modifications instead of trying to change core mechanics. Use Lucera‑style clients and similar projects as visual/technical reference.   Consider a multi‑protocol setup only after you’re comfortable with a normal Interlude client; otherwise you’ll just stack complexity.   Join active L2J / client‑mod Discords and forums. There are specific channels for interface, system edits and client reverse‑engineering where people share tips and tools.   What I would avoid at the beginning:   No intentar mezclar tres o cuatro chronicles a la vez; con uno bien entendido + UI custom ya tienes más que suficiente trabajo.   No subestimar la parte de cliente; muchas veces es más complicada y más frágil que el lado del servidor.   No saltarte el testeo en entorno local; los híbridos rompen cosas pequeñas (tooltips raros, skills que crashean el cliente, UI bugueada) si no pruebas bien.   Resources worth checking:   L2J forums and old MaxCheaters threads about faction/hybrid servers and client mods.   GitHub repos with client tools and interface mods (even si no son exactamente tu chronicle, te sirven como ejemplo).   Discord communities focused on L2 client development; ahí es donde se mueve hoy la parte “seria” del modding.   The good news: what you want is achievable, just not “plug & play”. It will require patience, testing and a bit of learning on both server and client sides. If you share exactly which files/pack you’re planning to use and what you want your UI to look like, people here (me included) can give you more concrete, step‑by‑step advice.
    • I’m done with Lineage 2. Not because I “grew up”, not because I “don’t have time for games” anymore, but because this game has slowly turned into everything it was supposed to be against.   Let’s be honest: most people are not playing Lineage 2 anymore. They are running 5–10 boxes, macros and scripts, setting up their characters and going to watch Netflix. The core loop isn’t PvP, clan wars or raids – it’s AFK grinding and praying your gear upgrades don’t fail.   The game used to be about outplaying your enemy with positioning, timing and coordination. Now it’s about:   Who has more boxes logged in.   Who is willing to swipe the credit card harder.   Who abuses the most broken script, cheat or exploit before it gets “patched”.   And let’s talk about pay‑to‑win. You can pretend it’s “supporting the server” all you want, but when someone can buy power that takes others months (or is literally impossible) to reach, that’s not support, that’s buying victories. When top players are just walking credit cards with epics, donations and event gear, you don’t have competition, you have a spending contest.   The community? It’s just as bad. Most “friends” are temporary party members until they find a better CP, clan or donation package. Drama, backstabbing, ninja looting, clan leaders selling clan resources, spies in Discord – it’s more like a cheap political simulator than an MMO. People talk about “honor” and “fair play”, then log their 10th box, run radar and target through walls.   And private servers… So many promises: “long‑term project”, “no corruption”, “no over‑enchant items”, “balanced gameplay”. Then after a few weeks you see:   Admin friends with full gear “testing”.   Hidden donations or “special offers” for “supporters”.   GMs closing their eyes to obvious abuse because it’s their buddies or biggest donors. Every wipe and every “fresh start” is just another cycle of the same lie, and we all pretend “this time will be different”.   The saddest part? Most of us know all this and still keep coming back because Lineage 2 has an insane core – the world, the classes, the adrenaline of real PvP, the politics, the sieges. But that core is buried under layers of greed, abuse, bots, scripts, egos and fake promises.   So here is the brutal truth: Lineage 2 is not a hardcore competitive MMORPG anymore. It’s a casino disguised as nostalgia, kept alive by whales, box armies and people too addicted or too hopeful to finally let go.   If you’re still playing, ask yourself honestly: Are you having fun, or are you just grinding, coping and praying that “next server” will finally be the one that isn’t corrupt, pay‑to‑win or dead in three months?   For me, I’m out. Flame me, defend the game, call me salty – I don’t care. But deep down, most of you know I’m not lying.
  • Topics

×
×
  • Create New...

Important Information

This community uses essential cookies to function properly. Non-essential cookies and third-party services are used only with your consent. Read our Privacy Policy and We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue..