Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Member
    Join Date
    Nov 2008
    Location
    NJ
    Posts
    41
    Member #
    17695
    Hello all! I hope everyone had a great new year and holiday.

    I am doing a total revamp on my website and I made this layout which is very unusual in the sense that I dont usually make layouts like this lol However, I find it very cool looking and shows off some of my design skills.

    So what Im asking is how would I go about doing this layout? Normally Ide have no problem but Im kind of lost here. There are just many things in the layout Im not too sure how I would implement online like the navigation being slanted and the banner being over the content and etc...

    I tried slicing it up first and getting all the images that I need, but I can not even do that Maybe Im having a design block or something, but I can figure out how I would go about slicing up this layout and how to code it. If someone could help me that would be great! Ill send the PSD file if you want it. Here is a screenshot of the layout.

    http://img149.imageshack.us/img149/6...gd3homepo9.jpg

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    So I assume you already have the WordPress part done?
    You're just making a new WordPress Theme of your own?

    The top slanted menu would be the tricky part.
    You could use HTML mapping, but then you will have trouble
    if you're planning on doing any mouseovers for the link colors.

    I would start by just getting the middle part first ... get it working
    with WordPress and leave the top part alone until you get the
    content working.

    Right above the "t" in "Categories" draw a line straight across your
    screen. Everything above that will be your banner. For now,
    make it one image and plop it at the top. Everything below
    that line is the content section ... that's the part you should work
    on first.

    With WordPress, it will be way to hard for us to do any coding for you.
    There are a lot of things you'll need to alter.


  4. #3
    Member
    Join Date
    Nov 2008
    Location
    NJ
    Posts
    41
    Member #
    17695
    Well, I try to CSS everything first and turn it into XHTML and than I just convert into the PHP files. I follow the instructions on how to make a theme at web designer wall. Also not sure if anyone had these problems but why when you save your images for web the color is always messed up? My reds are a lot brighter than they are suppose to be. In the PSD it looks fine but on the Internet its pretty bad looking. Could it just be my computer? I know that all computers look different or have different displays.

    Anyway I changed the layout so the navigation is horizontal but the thing Im having trouble with is doing the repeated background. Because If you notice I have the red there and all those brushes and etc at the top and than just all gray background. How do I start the content from right after the navigation and all the way down without covering anything? You know what I mean? Ill take a screenshot If I have to. Not sure how to explain it.

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    First thing you need is a repeating background texture. Get it to repeat x and y. That will be your body BG, with a repeat-both.

    Then put a <div id="wrapper"> inside that. This will contain the same texture, but with the gradient on it. You can align that to the bottom and repeat-x.

    Then, cut the top 400-or-so pixels of the BG out and put that unique content in another div (wrapper-header).

    All of these divs are width: 100%.

    Inside these, create <div id="wrapper-body">. Inside that, you'll put the contents of your site.

    Inside that, create <div id="header">. That div will contain the menu.

    Sibling of the header, create <div id="body"> This will contain a background image with all the texture inside the page, up to the top of the search box.

    The rest seems pretty straightforward.

  6. #5
    Member
    Join Date
    Nov 2008
    Location
    NJ
    Posts
    41
    Member #
    17695
    So how should I go about slicing the images? I mean I currently have this: (http://www3.webng.com/mikemal87/navigation.html, just testing it out on here first.) How could I work that into what your saying? Ive just never really done a layout like this before, sorry.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    If you view the background separate from your web page, you'll see a difference
    in the red color. This is an issue with the opacity of your PNG image and the
    black background shining through. You could use a .jpg image too and see the
    difference, or play with opacity on the PNG.

    You won't know the height of your page, so as Steven says, you need to
    make the whole center part a repeating background that can grow with the height.

    I think you're on the right track though.


  8. #7
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Yeah, that's definitely not the way to go about it. You should think about HTML and divs like layers in your PSD. In your case, you have a background texture, a gradated version of that at the bottom, on top of that a background design at the header, on top of that you page (content) bg, on top of that, another background / header design, on top of that a menu bg, on top of that your menu items, etc. etc..

    Like you said, it's a really complex design to chop up properly. You're gonna have a really tough time getting it right. Also, you shouldn't be using PNGs unless you know how to make them compatible with <= IE 6.0 browsers. Really, you shouldn't use them at all for your header bg, because that image is going to kill you on bandwidth.

    A good lesson to learn here is that there's a big gap between being a graphic designer and a web designer. You're obviously very skilled at making a pretty design. Translating cool designs like yours to a website, though, often require significant tweaking of the original design. With time, you'll learn to have some forethought in your layouts that will allow you to design something in Photoshop in your first run that will be really easy to chop up.

  9. #8
    Junior Member
    Join Date
    Dec 2008
    Posts
    8
    Member #
    17887
    Hi,
    Dude i don't understand What are you really want to say.
    So please clear with your thoughts.So, We understand you easily
    And may provide some better help to you.
    You can also find me at my signature.
    I will gonna happy to help you.
    Thanks
    ___________________
    bannerblindness

  10. #9
    Member
    Join Date
    Nov 2008
    Location
    NJ
    Posts
    41
    Member #
    17695


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:44 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com