Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts

    Not a site review. More of a...

    PNG study?
    Test layout?
    High bandwidth monster?
    Drunken Saturday afternoon in the rain?

    I'm sure it's one of those.

    Since this is the place to post this type of stuff here it is .

    ________________________

    WARNING! it's a 500k page. It may take while to load up on dial-up. It took Mozilla 20 seconds or so and IE 45 seconds to load on my DSL.
    ________________________

    This site WILL NOT WORK on Ie5/mac. Probally not on IE5/pc either. It uses the fixed layout that I like once again. It will fail graphically on anything higher than 1152x864 resolution. There are quite a few bugs to work out for higher resolutions.

    There are a few graphical bugs that I didn't put the time into fixing yet so...

    The thought process (yeah thats good) behind all this:

    It's pouring down rain out side today so I couldn't go help my dad in the yard.

    I started fiddling in PS and made some intresting background images.

    I loaded them into a page and started laying divs over them.

    Started messing around with the positioning and all that rut. Portisehead came on Winamp and I had the idea of placing the CSS behind the background image. Why? beats me. Beer #3 probally. I tried not to use the "fix" but it became grueling hard and beer #4 took hold and said,"YO! make it fixed and z-index that schtuff!". (thats a quote. my beer talks all homeboy to me.)

    So plop this here and this there and everything is scrolling and neat-o. (i'm the clear-white alter-ego of my beer )

    Then the paragraphs started looking dull. Big blue box. Need to spice them up some so onto the addition of even more pngs. A little line here, a little filter there, and an alphaimageloader and booyah! ( <--faking hip)

    If anything maybe this will be a clean example (clean being a loosly used term) to help others use pngs in IE and try out the fixed positioning hack for IE. I must note though that my hack is well...hacky. It hides all the page from IE5/mac (maybe pc as well) so if you use it be fore-warned (is that one word or two?) that you instantly alienated all uses of IE that don't use IE6.

    So in conclusion:

    I'm not sure why I'm posting this. It's not a site more of an offline experiment gone hawyire. After tooling for an hour or so I thought if I get some people to look at it maybe it's worth the hour I put into it.

    I talked to my brother for the first time in like 2 years and the first time I can remeber on the phone.

    It's still raining.

    I think I'm in the form > function category of web building.

    How come all the cute ones are 16 or married?

    I think thats all...enjoy

    Edit: tugbucket is mine...aight?!
    Last edited by harbingerOTV; 06-27-2005 at 03:21 AM.

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It loaded instantly for me. Looks awesome though.

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    The code stuff behind the ripped paper (?) is pretty cool. Scrolling the page is kinda slow though, probably cause of the images...

    edit that's europe, right, not ripped paper? lol.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    well I added the navigation and I fixed the stupid bug that makes the links not work on Mozilla. Tough to try and put some kind of navigation in there. So much stuff all positioned that in 800x600 it had to be narrow to make it look like something.

    it's now a measly 650K file load

    It works form 800x600 (maximised) all the way up to 1600x? It should work even higher as my fill images are 3000px tall.

    @qwertyuiop

    It does look like a map. It wasn't trying to be like that, just a bunch of random PS stuff mashed together.

    Mozilla/FF doesn't like the png over the content really, thus the slow scroll. I did fiddle with it to make it where tohe pngs don't lay right over the text so that it wouldn't cause a chopped up text line when it did scroll.

    I just found out that using the alphaimageloader causes the css not to validate. oh well.

  • #5
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fancy, but DRIKINGMAKESYOUDIE.

  • #6
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Only if you drink too much

    HBOTV - how did you do the background? I know it sounds like a well asked question - "how did you.."but I'm crap at PS and wanna learn more

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    weazel, lets see if I can make a play by play happen.

    first get these brushes if you don't have them:

    http://veredgf.fredfarm.com/vbrush/main.html


    1 make a large work space. I think mine was 2000x2000 to sart with. And fill it with the base color. For me that light brown. Leave a transparent layer under it.

    2 on a new layer paint randomly with a a grunge brush or two in black. Just random where you want the cut out to be.

    3 Erase all the starys and translucent mess left by the brush.

    4 use the wand to select a lot of the black splotches. click back on your base layer and delete. That leaves you a bunch of random holes.

    5 copy that layer and select all the un cut out part. Fill it with a darker shade of the base color. Unselct it and gausuian blur it a little. lay it under the base layer and you have the shadow.

    6 reselect the base layer again and then make a new layer. Keep it selected and then paint into it with more brushes. I painted into the same selection on like 10 different layers. Abjust the opacity and blending options until things start blending in and looking good to you. i ususally leave everything unmerged with the base layer so I will alwyas be able to get the selection area back.

    7 slap all the layers together except for the BG the base layer and the shadow layer. then you can use the bushes as erasers to "clean" up any parts that look bad. Smudging/Dodging/Burning/Blurs just make the messyness look more finished I guess. Just be careful with the smudging. The file was around 40 megs and when you smudge PS likes to eat the crap out of your RAM. I've frozen my computer many a time doing that. I mainly steer away from smudging things now unless the file is small.

    8 I had to erase and repaint all over the place the make things look right to me. When I started putting divs over it things got weird as some divs layed awkwardly on top of splotches on the BG. so I went back in and made alittle edit here and there to it.

    It's really a lot of trial an error. Play around and don't have a specific vision of what you want it to look like. The more I let things just happen the easier it seems to me.

  • #8
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harbingerOTV
    I think I'm in the form > function category of web building.
    Well it never harmed Phillipe Starcke - though he's more famous for designing beautiful, but malfunctioning fruit juicers

    Form>function. Form<function. Who cares! It functioned perfectly well in making me go 'oooh!' And I'm gessing that was the intended function?

    Nice work, interesting as always!

    Gary

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alpha transparency support in IE will do good things for the Web. I've made a few of these layouts while daydreaming about the day IE7 arrived.

    Were I to change something, it'd be making the blocks with text in them white instead of that #94A7AD-ish colour. The logo block would stay blueish, but I think having the attached ones the same colour is too much of it.

    Since you don't do any background repeating, I don't see why this can't work in IE5? Maybe a little bit of help from the DOM (which by the way can be used to solve your CSS validation problem) and it should be good to go.

    You could probably speed it up by removing any alpha pixels that don't actually change. I get the feeling there might be a lot of those.

  • #10
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Thanks Gary. The oohs are better than the ehhs

    Aaron:

    I could look into making the Ps white instead of the blue. It would take remaking several images but never hurts to try. I'm kind of fond of the toned down-ness color wise. I'll play with it and see if I like it the other way.

    I'm not to familiar with DOM. The reason I see it not working in IE5 is this:

    The background image is the one on the bottom right. It's fixed so no problem. The "fixing" thing doesn't work in IE5 anyways. I guess I could suck it up and make the whole page scroll in IE5 but that would loose a lot of the effect. Looking at it flat I have:

    background fixed (no problem)
    above that I have the HTML CSS showing through layer that scrolls. Still no problem.
    Above that I have the right images that are fixed to the bottom. Thats a problem. In IE5 they will scroll up and off the page. The navigation will do the same thing. So far I have shortened the "fixed" positioning code fairly well. IE5, doing it the old way (ie: feeding IE it's own style sheet) will not fix anything.

    Thebn there is the fact that the 2 bottom left images are pngs. as well as the 4 images for the navigation. Is there a way to make IE5 display them correctly?

    You could probably speed it up by removing any alpha pixels that don't actually change. I get the feeling there might be a lot of those.
    Not sure what you mean. You mean cutting out any of the "extra" parts of the iomage so that they are as small as possible? I have cropped the images down to the bone in that regard. I sliced the bottom left mimage into 2 parts to try and help load time. If I make the BG jpg smaller quality it looks grainy. The navigation could probally be done in 5 images. 4 for the links and 1 for the shadow but honestly the shadow is 50% of the whole file size so it wouldn't make too much difference.

    the "connectors" are trimmed down to just at the top and bottom of the links on them. the rest is the padding of the p's. I guess I could make them 2-3 images but right now they are only 5k each so not a bother.

    I can probally clean up the bottom left images a bit and try and get them down to 50-75k instead off 100k.

    If thats not what your getting at, what are you saying?

    thanks.


    ADDED:

    Navigation now works.

    the 2 other linked pages have been added .

    Is it just too much? Dropping the scrolling code in the BG would cut the file size down by 200-250k.

    brief file size synopsis:

    bg right image: 111k
    bag left image 1: 200k
    bg left image 2: 188k
    navigation: 100k
    paragraph link png: 12k (IE 11k)
    paragraph end png: 4k (IE 8k)
    scrolling code: 42k

    all in all 650k load.

    I could probally cut the two side images buy placing them Ps and giving the top half a color fill instead.

    I'll work on that next.


    And anyone want to go into the code? On the contact page in IE the very bottom P end png is shifted like 1px to the left. Not sure why.


    thanks all for the looks.

    Edit: 6-27-05:
    Played with the background a little and trimmed off 300k! Still looks alright. The navigation banner thing is a pain though. A gif put in the is going to look real grainy.


    Edit: I think I just fixed the glitchy slow scoll issue in FF as well <--okay maybe not. I swear I had it and I don't know I did and nows it's back


    Edit: Just trimmed off another 40k. Gifs instead of a few PNGs. JPGs instead of a few GIFs.
    Last edited by harbingerOTV; 06-28-2005 at 06:33 AM.

  • #11
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post

    sry

    sorry to bump this (sorta old thread, i guess)....
    but i just stumbled across, and had to say....

    WOW!
    yr so cool Har-otv
    and THANKS for the awesome brush link!
    first get these brushes if you don't have them:

    http://veredgf.fredfarm.com/vbrush/main.html
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #12
    Regular Coder
    Join Date
    Jan 2005
    Location
    Essex
    Posts
    146
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks really cool well done.
    Danny Hayes
    Under Construction www.hayes-design.co.uk

  • #13
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Glad to see some kudos all. 'preciate the response. If i ever get around to doing anything worthwhile maybe all this feed back over the last year will play a big part in it (can't promise anything but...).

    Z R O those brushes are great! I messed around with them and found several that I loved and a few that I could work with all the time. Real good stuff she has on there. Fun to play none the less.

    Danny- glad to see more positives than negatives.

    I got tons of views but not too many responses. i guess that goes with the territory. I would have loved to hear from opera/safari/etc users as to the usability of the page but alas...

    maybe in a week or so I'll get another brain fart and try something more "out there" to stir everyone up.

    So my take on this layout:

    pros for the viewer:

    different
    scaleable down to 800x600 and large enough to read at larger resolutions

    pros for me:

    learned a little more
    easy to edit

    cons for the viewer:

    large load time (although it's as slim as I think I can get it)
    the scrolling HTML confused 2 people I asked to look at it ( I thought it was neat and laughed at them)
    not IE/mac (maybe <5.5pc as well)

    cons for me:

    nothing to put in it to make it worth a crap

    Weird thing though. I edited this a while back. I thought I solved the scroll lag on FF/Moz but I thought I failed. I went to the page tonight and it's all fast and smooth again. Anyone mess with the fixed positioning + the div over a div thing like this before?
    What I'm doing is placing the navigation banner (yep it reall yis a banner) over the content section. To alieviate the chop I am making the nav div wider and taller than the content div. That way there is no "edge" for the text to "snag" on. (I write a lot in quotes ).
    Sometimes it hangs on scrolling and sometimes it doesn't. Any clue?

    p.s. need ideas for another layout.

  • #14
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    loaded fine for me, but an idea. compress your stylesheet and html, more than you have.

    look at googles html. very tight, very small.
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #15
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    what do you mean by "compress"? you mean take out spaces etc...? I'm sure i can condense the CSS as it's pretty much intact as is and can be trimed more.

    right now the CSS is <4k and the index is the same. the other 2 pages are <2k each.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •