I’ve been mulling over the current status and the direction of GrandmasterB.com for awhile now, and it’s been a bit of a battle for me. I’ve contemplated weeding out content, starting over from scratch and at one point scrapping the entire blog for something different.

After careful consideration, I’ve decided that I took the site in the wrong direction trying to make money off of the site in the wrong manner. I tried to pump up the stats and page views with irrelevant content and compromised the integrity of the great content that I already had.So What’s Next for GrandmasterB?

What I didn’t realize is how quickly I would make a name for myself in the blogging community as a Wordpress theme designer. In the past year and a half I’ve cranked out twelve different Wordpress sites (not including this one) and I’ve learned a ton about what you can do with Wordpress. With every new site, I’ve tried to push the envelope and make something better than before.

I now feel that I have a firm grasp on how I can use Wordpress, not only as a blogging platform but as a content management system for small business applications. My plan for this site is to use it as a platform for building up my client base further, and eventually developing my own premium themes to offer to the masses.

Spring Cleaning

I have gone through all of the content on the site and removed all of the content that wasn’t relative to where I want the site to be. For instance there will no longer be posts about Kim Kardashian or monthly recaps about the site traffic appearing here. From now on, it will be graphics related content only:

• Design Reviews (mostly my own work)
• Web Development Tools
• Tutorials (Photoshop, Illustrator, Wordpress, etc)
• Freebies (icons, graphics, etc.)
• Mac Tricks
• Q&A with GrandmasterB

I really enjoy writing this type of content and that seems to be what keeps the readers coming back. To give you an example, my killer metallic text tutorial has consistently been the top article since being published in June of 2008. It’s obvious that readers enjoy that type of content.

I hope you all continue to follow the adventures of GrandmasterB and the new direction the site is taking. I’ll be interested to see where it all goes from here.

~ GrandmasterB

The task at hand with this project was first and foremost a clean, professional new look for their corporate website. The second requirement that they had was the site had to be easy to update and add new content. We found that using Wordpress as the platform for the site would work perfectly for TSI’s requirements.

The Design Process

TSI wanted the new site design to have a similar color scheme to their existing site. The existing site was flat and the colors were a bit too muted, so I took the colors and tweaked them a bit to come up with something a little more bold and striking. I decided to also add silver/gray to the color scheme to add something more to the design.

I put together a new background and header that added a little bit more to the design to make it stand out more. The old design used a drop-down menu, which I wasn’t a big fan of. I opted to make a sub menu that would only appear when sub-pages existed. The main body of the site was rearranged to make the sidebar part of the content area.

The Layout

I’ve been using the 960 Grid System framework for awhile now, and I’ve found out it takes a ton of time off developing and laying out the structure of a site. The framework allows for you to layout the site within a 960 pixel wide container, and within that container you can have either 12 or 16 columns with which to create your layout. This particular layout uses the 12-column styles and is broken into a standard two-column layout.

If you’d like more information on using the 960 Grid System, check out these tutorials:

• Prototyping with the Grid 960 CSS Framework
• A Detailed Look at the 960 CSS Framework (video)
• 960 Grid System Toolbox & Resources

Featured Content

The existing TSI website had a clunky Flash animation in the header and the client wanted to keep that same type of element in the new site. I decided to use a jQuery slideshow animation that allowed for easy editing as well as optimizing the content titles for search engines. The end result was very well received by the client and should help their search engine rankings.

The Final Result

Below are links to screen captures from both the old and new design. I’m pretty happy with the way the the site turned out. I would have liked to have made the featured slideshow more dynamic and use custom fields to populate the images. The client chose to make the titles different from the page titles, so in the end we decided a static solution would be best. I hope you like the final result…I’d love to hear your feedback.

Holy Cow! It has been a long time since I’ve written any new posts on the site. I don’t know if any of you are still out there, but if you are I’m sorry it’s been so long. I know we all get busy and have a hard time finding the necessary time to write new posts, but I’ve been SUPER BUSY! The blog design/development business has really taken off and I have a lot of finished projects to add to the portfolio and a lot to show off. I have been working on a lot of projects simultaneously, and two of them are fairly close to 100% completion…but I’m not ready to close the book on them quite yet.

My latest project just finished up today, and I must say it is a huge improvement over the previous design. The sports blogging community has been kind to GrandmasterB and in turn, I have been turning out some of my best design work. Jesse from PistonsNationBlog.com contacted me around mid-June to work on a new theme design for his site. Before I go much further, I must mention that this theme is not a GrandmasterB original. Jesse purchased a template theme called “Bright” from ThemeForest.net and I added some of my flair to the design to incorporate his new logo and color scheme.

This is the first time that I have customized a Wordpress template from ThemeForest and I must say…they have some great stuff and the themes are well documented for customization. The new theme incorporated two widget placements in the sidebar and a section for ads to be placed by adding the code in the theme settings…very cool stuff! I decided to do a little modification and added a third widget placement below the ad section to split it up a bit.

Overall, the project was a lot of fun to work on and it was cool to see how other developers build themes. I especially liked that the theme had the Photoshop files included and they were also documented to make customization easier. I would also like to give a shout out to Jesse for trusting me to provide him with a new theme for his blog. If you haven’t already…check out his site at PistonsNationBlog.com.

~ GrandmasterB

BEFORE & AFTER

From time to time, I get questions about how I start designing websites, and how I build custom WordPress themes for my clients. I’ve spent the better part of the last year trying to streamline the process of designing and launching a blog theme. The problem that I have is I tend to get a little carried away with trying to be perfect. Like most designers I start out with the basic tools…pencil and paper. I draw out the layout and figure out the basic positioning of all of the necessary elements before I even think about putting anything down in Photoshop. That drawing stays with me until the very end of the project, and sometimes even after just for reference.

How Does GrandmasterB Layout a Site for WordPress?

Recently, Forest from The Random Forest and Frugal Zeitgeist hit me up on Google Chat to ask me how I build a Wordpress theme and how I go from Photoshop layout to coding everything for Wordpress. Well, I know that I’m not the only designer/developer that works this way, but I build a simple HTML/CSS file that will serve as a template for the coding of the WordPress theme. In my opinion, there’s no reason to mess with all of the WordPress options and variables unless you have already solidified the design in it’s simplest form. I break down the design into the most simplest elements first:

1. Header
2. Content Area
   1. Left Column
   2. Right Column
   3. Any other Columns
3. Footer

In my experience, 99.95% of the websites you visit will be comprised of those elements. I have built a basic HTML layout and copied it over to a Clip in Coda that I can use for every new site and add or subtract items as needed. If you don’t use Coda, you can still make a template file to copy and paste whenever you need. Below is the basic structure of the file that I use…minus the standard HTML code.

Basic HTML Layout

<div id="wrapper"> <!-- wraps everything into one div tag -->
<div id="header"></div>

<div id="content-area"> <!-- houses the columns -->
<div id="left-column"></div>
<div id="right-column"></div>
</div>
<div id="footer"></div>
</div>

I know it looks simple, but that’s the idea…and it is simple! If you were to populate your divs with some content they will all just be stacked on top of each other. All of the detail like column heights, widths and position are determined by CSS. I had contemplated writing my own HTML/CSS layout tutorial, but that has been done a hundred times and there’s no sense in reinventing the wheel. One of the better tutorials that I have found was written by Steve Dennis on Subcide.com. It’s a very good tutorial, easy to follow and has great graphic examples to follow along with.

If you have any questions that you would like GrandmasterB to field hit me up via email or on Twitter.

~ GrandmasterB

Over the weekend, I put the finishing touches on another custom WordPress theme by The BlogFixers. Jeff and I were commissioned by Matt from YepYep to do a complete overhaul of his existing site and create a new theme from the ground up. We worked with Matt throughout the entire process from the brainstorming phase (how many columns, column widths, etc), through the design phase with Photoshop comps and finally the finished product which went live yesterday. The cool thing about this project is this was my first attempt at developing a three column WordPress theme. While I worked on the design with Matt, Jeff worked on getting his server configurations tweaked and dealt with some issues that Matt was having with the WP Super-Cache plugin.

Upgrades and Improvements

As I already stated the new theme is three columns now, as opposed to the previous theme which had only two columns. When designing the new header section I wanted to give the logo a little more flare, so I decided to place it at a bit of an angle and added in some gradient effects. The background behind the logo got a bit of a treatment as well with the addition of a few carefully placed graphic elements. Moving down we created a navigation bar with buttons for the many featured categories of the site. Previously, Matt didn’t have any navigation…this was a big improvement.

I decided to carry of the new look of the logo into other elements like the date badge and the RSS icon. Matt had specifically requested a graphic solution to the date badges after seeing the ones that I created for Cuzoogle’s new theme. The major difference with this version is that we have included the year below the date. Matt had a great idea for displaying the categories as a ‘tag cloud’, so we used the Category Cloud Widget from Lee Kelleher.

Looking Back at the Project

Although, the project took a little longer than anticipate to complete (thank you Holiday Season); Matt was extremely patient and easy to work with through the entire process. We have already received numerous feedback emails regarding the design, and we really appreciate the comments. This was a fun project to work on and I can’t wait to get rolling on the next one.

I really hate to admit it, but I need to buy a cheap PC for testing. No matter how great everything looks in Firefox or Safari…it always needs tweaking in Internet Explorer. We had some CSS issues with the footer not staying put on the YepYep theme in Internet Explorer, but after an hour of messing around I got it fixed.

Thank you Matt for trusting Jeff and I with the redesign of YepYep…we had a blast!

~ GrandmasterB

If you’re getting tired of that free WordPress theme you’ve been sporting, or want to migrate from Blogger to Wordpress; check out the Design Services page to see my portfolio.

Question From: Jamie
In one of your tutorials it says to place a guide at 400x and 400y. How is this done??? Please help.

Answer:
In order to drag guides onto the canvas you need to make sure your rulers are visible. There are two ways to do it. You can either go under the menu bar to View > Rulers or the key command (Apple: cmd-r / Windows: ctrl-r). Once your rulers are visible move the cursor to the top ruler, click and drag down for horizonal guides and the left ruler will drag out vertical rulers. One thing to note is that the rulers can display multiple types of measurements:

• inches
• centimeters
• millimeters
• pixels
• picas
• points
• percentages

To change the measurement type right click on the ruler and it will give you a menu. For this particular tutorial (and all tutorials that I write) I use pixels. If you create the 800 pixel x 800 pixel canvas you will see a 400 mark on the ruler. Simply click and drag to get the guide to where it needs to go. For more precise placement you can use the ‘INFO’ window by going under Window > Info or pressing F8. I’ve attached an image to this email to show you exactly where to locate the X and Y coordinates of the guides and cursor. I hope my answer to your question helps you out.

If you have any questions for me that you would like featured on Q&A with GrandmasterB please send me an email via my Contact page. In your email if you’re following along with a tutorial, please let me know which one and on which step you’re having issues with. Also, If you’d like a linkback to your site include your site in the email. If I publish your question, I will send you 100 EntreCard credits for participating. Stay tuned for future Q&A posts via my RSS Feed…you won’t want to miss it.

~ GrandmasterB