This is my new template I'm going to be using for my new site. It took me 3 days to do. I spend day 1 drawing it up sorry I cannot upload my draft sketch as my scanner is not working. The next 2 days I spent drawing it up in photoshop. The colours are kinda generic I know but thats my style. I cant seem to create anything other then grey toned things. I think adding some decay onto the panels will give it some depth something my style of drawing lacks.

The panels - I like as many panels as I can so I went with the 3 column layout and extra 2 side header panels for shouts and login information maybe. Directly below the header panel will be navigation which should just be text and CSS.

Content center panel is for content what else. Side left and right panels for extra controls maybe login section.

Now the tough part now is figuring out a way to cut and build it in xhtml and css.

Tiling background - I dont know if its been coverd in tutorials here but I couldnt find any in our forums when I was looking to make some of my own. The key for tiles without much work in PS using filters is to have dimensions to the power of 2. For example 16,32,64,128,256 etc. I only just learned this myself from reading online tutorials on it. Some of them I couldnt get to work but the key is having them to the power of 2. Most filters will render tiling images by default if your documents match that dimensions. I used 512 x 512 since smaller sizes would be noticable repeats once tiled.

well let me know what you think? any tips for improvements? Also I'm looking for any good links for creating textures in PS. The good ones are hard to find if you know any please tell me.

 

 

 

Reply

wow i am i must say i am highly impressed.
the design looks cool

Reply

Thanks I like it too but I think its too plain on the panels I will try and paint some wear and tear on it when I get a chance. Right now I'm trying to figure out a good way to slice it up and put it into xhtml and css.

Heres what I've done so far http://sonesay.trap17.com/

The upper panels seem to be ok because it does not need to stretch unlike my left, center and right panels they need to be expandable vertically depending on how much content is there so I need to come up with a method for doing that. I was thinking have top section and footer of it as an image and the middle part as a scalable image. Still not 100% what will work but atleast I have an idea lol.

I changed the orange color panel to red. It looks more evil in red. Oh yeah the glossy black panel for my headings are from a link someone put on itrap. Thanks for sharing it saved me alot of time since creating them is time consuming.

I realised one major flaw though the whole witdh is like 1022 it dosent allow any room for scrolling bars on 1024x768 so theres an ugly horizontal scrolling bar for you 1024x768 users. I know its bad practice to do that but going back to change things now would be work I dont want to do at this time. I just wanna carry on seee if I can get a working and complete template.

heres a screen shot just incase I update the site later

 

 

 

Reply

http://sonesay.trap17.com/

I've done somee more updates today. The template is getting closer to finished and to my liking. I am how ever still undecided how I plan to have all the pages set up. For example home.php members.php etc... or just one single file index.php and have ajax calls update each div section since all layout is in div.

The CSS navigation I'm using is utilizing anchor tags <a> so when one is clicked the whole page is reloaded and having ajax with that kind of full page reload dosent make sense but its how its setup now. Is there a way to still use the same navigation without the full reload so just having ajax calls run onclick events instead of the anchor tags firing off a rull page reload?

I think one solution to thise if you cant disable the anchor tags doing full reload would be to use buttons. This would require rebuilding the navigation to use buttons then it would enable no full page reloads while making ajax calls. I'm not a big fan of full page reload as you can see see as how my site has kinda alot of imagea also I would pefer not to have to do that.

I just want to understand all my options before I go in the deep end and start building. I want to get it right first time round because changing stuff later down the line is too time consuming so planning is the key here. Any insight into this is much appreciated

thanks.

edit: Also Whats the proper way to handle changing classes of li elements. Because its being set as 'active' for the li element for 'home' as you can see. If I was doing a full page reload to a new page it would matter as I could just set it as active depending what page it was. With no page reloads to change it I would think its gotta be javascript ? Just need comfirmation. I dont doubt myself or my ability with all these questions, I'm asking because these are design and programming problems that I'm sure would be common but most arnt documented. I'm sure you will come across these similar questions one day if you have not already.

Reply