As you may have noticed, the current WordPress theme that I have on this website (the 3D Vista Style one) was not created by myself (hence the footer). I am only using it temporarily until I can create and code my own template. Just today, I finished creating in Photoshop that new template, and all I have to do now is to code it. So I thought I would give everyone a sneak preview as to what it will look like.
Header
First thing’s first – the header. This is my favorite part of the template, and I think you’ll see why. I used a glow technique to make the “globe” in the logo, and the same effect on the navigation link “Home”. When the user hovers their mouse over one of the links in the navigation, the link will glow, and if they click on the link, it will stay glowing. Take a look for yourself:
Sidebar
In the sidebar, I used the Arial font so that I could make the text dynamic once it was coded. I used another glowing element in the RSS icon at the top of the sidebar, which ties in the glowing header. Almost all of the elements in this design have some type of stripe pattern for their background, which gives it a much more high-tech feel than if they had been solid color. Here is the sidebar:
Content Area
When designing the main content area of the layout, I didn’t want to have just a boring area of white, I wanted to make it more interesting. So I decided to overlay a subtle wide-stripe pattern on it, along with drop and inner shadows to make it feel more three-dimensional. I also made the horizontal rulers a blue color to tie in with the rest of the design. This is the content area:
Footer
After reading some articles on good footer design in websites, one of which is at Smashing Magazine, I wanted to do something more in my footer than a bland “Copyright by TutorialWow.com”. I thought that a good way to do this would be to place recent posts, recent comments, and About the Author sections into it, along with the copyright information. I played around for a while with the glowing headers, and bullet points (which are using the same glow style as the header and RSS icon), and finally came up with this:
Final Theme
I have told you about each of the individual elements of the theme, and now I will reveal the whole thing. As you can see, all of the elements tie in nicely with each other to create that cool glow effect that gives the theme its character. Here it is (click on the image to see the whole thing):
Since I’ve been really busy lately, and it doesn’t look like I’ll be getting any less busy in the near future, I probably won’t finish coding this theme for a while. This is why I wanted to give you guys a sneak preview – so that you wouldn’t get too bored.
Until next time, happy designing!




August 3, 2008 in 














@Nikola: I do see why you would think that, but there are a few reasons why I chose to do what I did:
1. The whole theme is based on the “Glow” style, and I thought I would just add to that fact
2. The glowing glossy glass text effect doesn’t look so great when it gets that small – it looks ok, but not really what I’m going for
3. The glowing glossy glass text effect would make the headers blend into the background, whereas the simple white glow makes them pop out and say “Look at me!”
So I think I will stay with the white glow – thanks for the suggestion, though!
in my opinion that glowing glossy glass text would be better choice than glossy white background you have around
recent posts, recent comments and home, on picture.
Man, I really like it. I think that you’ve done an excellent job with it thusfar. If I may however, I’d like to point out a couple of *minor* things I noticed about it…
1. Starting beneath “Home” and continuing to beneath “Make a suggestion” the bright glow effect kind of “dims” and turns to a grayish color. If something is extremely bright, gray wouldn’t be the optimal color. (white would be)
2. The diagonal stripes for the background would look better if they were some very light blue color rather than gray. (just my opinion)
3. The text in the sidebar (all except the tag cloud), looks a little bland compared to the rest of the layout. I mean, it looks like you spent a ton of time on the overall design and then just kinda “petered out” when it came to the sidebar texts.
Overall, great job though! Can’t wait to see it in action
@Josh Jones: Thanks for the comment! Here are answers to your points…
1. Yes, I should change the glow bar below the navigation if I plan on using this template for Tutorial Wow. However, after setting this project aside for a while, I don’t like it as much as I did when it was fresh off the press. When I get the time (I’m crazy busy this time of year), I will try to come up with some kind of more code-friendly template for the site. I’ll post a news article when that happens.
2. That is another good point that I didn’t even consider. Thanks!
3. This is actually intentional, because I wanted the sidebar to have a web-safe font that could be HTML and not an image.
Thanks for your observations, and if I ever use this template, I will definitely take them into account.
Thanks for article. Everytime like to read you.
SonyaSunny
Interesting, I’ve not even noticed this…