Blog! Team! Forum! About Apricot! Press! Gallery! Development! Yo Frankie! Apricot Open Game Project mee!
Apr 24

Brand New and Shiny Apri-Layout!!

icon1 venomgfx | icon2 Uncategorized | icon4 04 24th, 2008


(note the 2 (!) exclamation marks in the title, i’m excited)

yay! I hated that green background 😀
The other day, talking with Chris about ApriStuffs, we agreed that the old theme wasn’t the better, at this moment we all know that its gonna be a Frankie’s game, so.. why we have 3 rodents in the banner? lets give Frankie what he deserves! a big and *rendered* header 🙂

Was all made in The GIMP, Inkscape and Blender, was just playing around with the old logo in Inkscape, then imported the .svg in Blender as curves, added a material, rendered, and composited.

I’ll be making a splash for our brand new and shiny ApriBranch! we have our own branch! like the one that the Orange project had years ago, we will be adding and testing lots of features we need in this project, before going to trunk.

That’s all for now, hope you like the new theme, is not a big change but i just don’t like white-eye-killing backgrounds.
If you find a bug or something weird just drop a comment please.

60 Responses

  1. nate on

    this looks really gr8 nice and colorful I cant wait to play this
    game.



  2. Tanda on

    Very nice.
    beautiful colors.

    Hasta ahí llego mi ingles 😛



  3. Trevin on

    Great job on the new layout. It is very visually pleasing.



  4. mike on

    Is the new theme venomgfx’s work? He always brings that ‘look’ into his work.



  5. Anonymous on

    One problem. It no longer displays the blog poster’s name. Other then that, it looks great.



  6. horace on

    i think one bug is that headerborder.gif is centered and not left like the rest of the page.



  7. jorrit on

    To Anonymous: it does display the blog poster’s name. Look more closely.



  8. Kirado on

    –nice new banner but now the white eye killing white space has been replaced by eye straining illegible white type on orange..making it impossbile to read comments and posts quickly.. quickest way to get people to not read the blog updates. Okay it’s really getting annoying now.. the green wasn’t great.. also there is a bug something –is offset at the top of the page..

    you can always turn down the .. contrast of your LCD and lower the colour temp.. then there’s the indistinguishable grey text on orange bkrnd.. yes I’m a graphic designer sigh.. these thing bug me. and the rollovers for the banner links? None existent.. kinda wierd and confusing. But yes I do love the new banner..

    to bad the rest need s work.. don’t get me started on how illegible the blender website is 😉 you know the old saying don’t fix what ain’t broke? Sorry for the crit 😉



  9. Lars on

    the colors and the header are kewl, but the code still needs some work (at least in safari).

    It rocks, anyways! =)

    What backend do you use, wordpress?



  10. Calli on

    I like it, however the contrast between text and background is a bit low.

    BTW: Where did the money-meter, counting the DVD pre-sales did go? What was the last count? Reached 1000 DVDs?

    Best Regards,
    Carsten



  11. jonny on

    Hi,

    1. The first line of a post is to near to the apricot/peach/fruit.

    2. The Connectors from the header to the main body is shifted about 5 pixels to the right for a resolution of 1280×1024.

    3. The line spacing in comments is to big!

    Looks nice, though frankie glows to much for my sense of taste ;p

    mfg,
    Jonny



  12. Pierre on

    This new theme is gorgeous!!!

    Kudos to all!



  13. venomgfx on

    hey! thanks a lot for you nice comments, your feedback is always appreciated, based on that, i made some changes already.

    Added the name of the author at each post, changed the line-height of comments, and added a little line between them. While i’m still checking the other things you say.

    thanks!



  14. pelle on

    I think it looks very good, and I don’t mind the white on orange colors, but I hate having to scroll sideways (yes I try to keep to screens with at least 1600×1200 size, but sometimes like now I’m on 1024×768, and I know that is a very common screen size (not to mention what happens if you try to view this on a mobile browser, or a tv) it would be better if the image was much smaller. A bit sad as the details are so good, but it really is bad for the layout on small screens. You could also consider some CSS magic to pick different images depending on screen size.



  15. Fabrix on

    With free time in my hands, i’ve made a test to fix the header..

    http://kirgroup.com/apricot/test.html

    the image header is placed backround of a div, via css, and links are “li”, positioned over the image via css

    the gradiend between header and page are now two image, the dark one, as bg od “body” and the light one as bg of “#wrapper”.

    in this way the header doesn’t cause orizzontal scroll, the gradient is alligned with page, and if you watch the page without css is readable. oh, and the head links are a list of text link…

    Tested on FFX 2 on Win and IE 6 (on Win 🙂 )



  16. Oskar on

    Would love a screen of the old design for comparison.



  17. Alexander Ewering on

    The layout, although nice-looking, is broken here (Firefox 2, Windows):

    http://pub.instinctive.de/apricot-ss.jpg

    The “offness” gets worse the narrower I make the browser window. Seems like all people here only have 16:9 5000 dollar screens 😉 (I’m still at stone-age 1280×960 😉



  18. Alexander Ewering on

    Oops, someone already noticed this…

    Bottom line:

    – Always test your layouts in at least Firefox, IE6 and IE7 (and maybe Safari),
    – Always resize the browser window in each of those browsers to check if the design flows OK

    Also, the header is now about half as tall as my entire screen — maybe making it slightly smaller would be an option which solves both of these problems at once… 🙂



  19. Dusty on

    Hmmmm Orange! 😉



  20. venomgfx on

    thanks a bunch Fabrix!!, the only thing in note is that is not aligned to center anymore, but is just a matter of setting up, will check it out, thanks again!

    Oskar, here:
    http://img205.imageshack.us/my.php?image=screenshotqy7.png

    Hey Alex!, thanks for the screenshot, i’m fixing this with Fabrix’s help.



  21. BlendRoid on

    Now all you need is an Apr-Phone that glows orange whenever Ton calls.



  22. rexprime on

    not bad i would have gone with a smaller banner or one covers the width of the screan but it is nice



  23. Anthoni_c on

    OMG! Soooooo Awesome. I love it!
    Although the top frame is slightly offset from the bottom frame.



  24. Alexander Ewering on

    venomgfx: No problem. There’s another strange issue – the “nn Comments” links (to open the comments section) are only clickable on their left half or third…



  25. Deak on

    Great job Venomgfx – looks so nice I could eat it! 🙂

    There are a few issues on the non-blog pages with IE7, though.

    – Two of the thumbnails in ‘Gallery’ are missing (they are there in Firefox).

    – Hyperlinked images have the default blue border around them (again, this is fine in Firefox – it displays white bordering).

    – On the ‘Team’ page, the heading ‘Core Team’ is much smaller than in Firefox.

    – The main heading for each of the pages is slightly higher up than in Firefox, pushing the heading slightly out of the little peach graphic.

    – Finally(!), in the ‘Leave Comment’ section, the ‘Mail’ text box is a very light yellow so you can’t really see what email address you’re typing in since the text is white.

    Hope this helps!



  26. venomgfx on

    Alexander, been trying some changes but i have no clue about that problem at the moment, is weird..

    Deak, thanks for the detailed info, is useful, didn’t know that there was still people using IE though! :), will try to search, but is a big problem since i dont have IE here, this desktop and my laptop have linux both.

    and the colors.. maybe i should go back to the old template? is just a matter of one click.



  27. Deak on

    venomgfx: Yeah, I should have inserted the line ‘Please commence slagging of IE now’! 🙂

    There are a few websites that can take screenshots of web pages in different browsers so that might solve your problem. Some make you pay but there are free ones too – it just might take a while to wait for your screenshot. Can’t remember the site I used before but do a google and you should find something.



  28. pelle on

    The test.html page looked better in Opera 9.27 as well. No scrollbar and the top of the orange frame thing is correctly aligned. 🙂



  29. Fabrix on

    The “comments half-clickable” problem is caused by the div “#sidebar-wrapper”, which is larger than the real sidebar, is setted “float: right;” and has a higher z-order than “#content-wrapper” (settet “float: left”). So, “#sidebar-wrapper” overlaps “#content-wrapper” right to half “comment” text, and blocks click.

    Here a picture of che crime scene. I’ve added a red 3px border to “#sidebar-wrapper”

    http://kirgroup.com/apricot/layers.jpg



  30. NathanKP on

    Great layout. Its very well designed.

    NathanKP – Inkweaver Review



  31. Francisco Ortiz on

    I agree with others… the background color is annoying.
    The overall fell is like a pink “chiclete” gum. Is that the idea? If yes, i hope the blog “sticks” with the audience.



  32. Jason Wyatt on

    Great design butlike many people have said already there are a few bugs (images offset by a significantly far out amount). Also the width is just too wide. Ideally it should be no wider than 1024, but better still 800 (yes there are still people who use this). If you’re concerned that it will look to thin on a small screen then you could try scalable layouts (i think there’s a way to get images, like the heading to swap to different sizes), but i suppose really we ought to be letting you get on with what you’re actually there for.
    If you want to test the site have a look at browsershots.org, you can get free testing there on a large number of platforms.
    No website is perfect though. The BBC, for instance seems to break down at the bottom of there pages, and to be honest this website is still perfectly legible.



  33. jonny on

    Hi,

    much better right now. But found more, sitting in front of my 1680×1050 screen at home:

    1. The shadow of the header ends hard at the left and the right. That looks right only if the width of the screen is less or equal than the width of the header.

    2. The text fields/areas are to dark.

    3. You could think of big header that fits it width to the screen width (css is capable of this). As an example try the german site http://www.vrr.de and change your font size (firefox: STRG++ 😉 ). The images grow with the font size. The same way it must be possible to resize the banner when changing the window-width!!!

    mfg,
    Jonny.



  34. madman on

    Pues en IE7 no se ve bien.
    http://www.mad-3d.com/imgs/IE7_1.JPG

    http://www.mad-3d.com/imgs/IE7_2.JPG

    En el FFox 2 y FFox 3 pasa lo mismo que en la Imagen 1. Respecto a la imagen 2 no pasa.

    Bueno solo en la oficina uso IE7 XD



  35. Alexander Ewering on

    OK, now stop bashing venomgfx, after all, he’s a graphics artist and no web designer 🙂



  36. manitwo on

    wow! really good work venomgfx.
    small info: the favicon is missing 🙂



  37. jonny on

    @Alexander Ewering: That is only constructive critics.

    @venomgfx: The new look is very nice!



  38. Alexander Ewering on

    jonny: I know. It’s especially funny that *I* tell *others* not to bash people, as I’m probably known as “Master Bash-For-No-Reason” himself 🙂

    I still think that the easiest way to solve most of the mentioned issues is to just scale down the header graphic, period.



  39. Anthoni_c on

    Simple, have a simple javascript that changes the layout depending on the browser. Then everyone gets a crisp clean view.
    🙂



  40. Pablo Lizardo on

    ufff i just see the new style in the site! really good work tocayo!!! the orange remember me the ubuntu look!… cambiando de tema… jejej que pesada que se pone la gente con las correcciones de html & css, no? 😉 jejeje… saludos!!



  41. madman on

    See this:

    http://www.mad-3d.com/imgs/IE7_1.JPG

    http://www.mad-3d.com/imgs/IE7_2.JPG

    p.d.
    Wtf! You delete my last comment.



  42. Lamoot on

    Just a thought, will the link to this blog on blender’s main page also be changed visually?



  43. MrE on

    BOOM!!
    If the game is as good as this layout looks, it is going to rule the gamescene.
    niice layout, good colourscheme.

    And the best part of it all, if there is time for this, the Apricot Shooting Bazooka is surely going to make into the game (still having faith in you all).



  44. Todo on

    Very, very nice new look 😉



  45. MrE on

    Another thought, is there going to be a presskit?
    I put the BBB posters up around my office to generate some extra interest in the project (i’m even forcing Blender up on unsusspecting trainee’s at my work).

    If i could keep the pressure up by putting up posters of Apricot it would be a)a great addition to my officespace and b)a great interest booster.



  46. William on

    Better than before, but there’s a lot of rendering errors, both in FireFox 2.0 and Safari 3.

    And the white text is very unpleasant.



  47. venomgfx on

    wow! got the most commented blogpost here? 😀 will mess up things more often 🙂

    weekend is almost here!, i will fix this stuff this weekend, making the header smaller, not for 800×600, but for 1024 and higher.

    ohh now i remember the reason why i hate making websites.. dang browsers!.

    oki, will make the banner smaller this weekend, now we have a game to make :), cheers!



  48. paul on

    uh.. ok and now try colors that make the text freaking readable. What the?



  49. Raoul on

    The new banner is very nice, but way too big!

    It takes half my browser screen space.

    I think its height should be at least 30% to 50% smaller.

    (What screen resolution do you use at Blender Institute?)



  50. venomgfx on

    okey will darker the background, i think we need to adjust all the monitors in the institute, and in my laptop, i can read easily all the text in all of them, but will change it anyway.

    raoul: yes will have to make the banner smaller in high too..
    oh and we use 1920×1200 resolution here.



  51. Alexander Ewering on

    venomgfx: For future ventures in web design, consider that the most used resolutions are probably still 800×600 and 1024×768, so your site must look good at *those* resolutions. In addition, you should consider that most people will have a huge lot of weird side- and toolbars installed, which further decrease the canvas size (and they won’t know how to turn them off). Well, personally, I don’t love fixed-width layouts anyway, because they will always only look right for just a handful of visitors, and mostly horrible for the rest. That’s why I almost exclusively do fluid-width layouts. And nowadays with the ubiquotuotiotity (?) of the Flash plugin, it’s really not that hard to make even graphics and backgrounds scale. Well, and even with javascript and css hacks.



  52. bop on

    Nice design. I think the various titles look too soft (too much antialiasing or blur) though.



  53. Daniel on

    Hi there,

    when I saw the new design on my desktop first I were really impressed. As an Ubuntu user I am used to brown respectively orange, so I that does not bother me.
    But on my Asus EeePC it is really terrible. I’ve been so glad that the Peach and Apricot page fits perfectly in the resolution that the Eee has (800×480).
    I know that all this has been mentioned before but I think you should know that there still are people out here using low resolutions, especially in a time were PDAs with WLAN and similar devices become more and more popular and affordable.

    But all in all great work!

    Daniel



  54. malefico on

    Pa mi esta barbaro cheeeeeeee.

    So, this is what happens when web design is made by CG artists… web designers GET JELOUS ! 😛



  55. blengine on

    It’s amazing that no one ever commented on how bad the old page was, because it was really bad. I’m glad to see there’s more critics in the audience now, fanboys are useless.



  56. venomgfx on

    okey,

    biggest problem solved, made the banner *smaller*, from 1280px to 958px width, now should look OK for people with 1024px resolution out there.
    added favicon and minor changes here and there.

    interesting how many people comment in this kind of “useless/not-worth-it” blogposts and not in real interesting ones like HDR or real time shadows one 😛

    okey, enough, now back to work on this game!



  57. Alexander Ewering on

    I comment on anything as long as it can be a complaint!



  58. rexprime on

    great update everything now flows perfectly… now go make me a game



  59. xxx666 on

    Hi do you ad Anti-aliasing to your project and if yes will that be included in the blender game engine ?



  60. dune on

    if it’s a frankies game i want to fly

    Batmanlike, and cut in butterflycrushing plus those nice spiki throw things, but explosive please…