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.

(more…)

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:

(more…)

The other day while watching ESPN, I noticed one of the advertisements for their NBA broadcasts titled “Destination NBA”. At the tail end of the spot they show an image of street signs with the upcoming games and times, with a cool worn/grunge effect to them (here’s a screenshot). Since it seems that I’ve developed a flair for creating graphics with the same grungy look, I decided to try my hand at recreating the signs and at the same time write a tutorial on how I did it. My overall purpose of this tutorial is to show you how you can create the effect on a street sign, not to duplicate the fine work by the ESPN graphics team.

I have included a resources file at the end of the tutorial for you to download if you like. Included in the resources file are a few of the textures that I use along with a few brush sets used in the tutorial. The font used for the tutorial was purchased by me and I cannot share it with anyone, as it would be against the usage policy. With all of the fine details out of the way…let’s get started.

(more…)

The crew from Go Media are at it again as they just released their 13th collection of “stock” vector artwork. I use the word “stock” lightly, because their work is anything but! This latest release is chock full of great stuff and includes a total of 137 high quality, detailed vector pieces in seven individual themes. As always you can purchase the entire collection for set 13 or choose to purchase them in their individual packs, but you’ll pay almost $34 more if you were to purchase all seven packs separately. This set includes some very interesting stuff; I’m very interested to see the “Flow” pack in action as it’s got some really cool geometric shapes in flowing patterns…very cool stuff.

I’m not 100% sold on the 3D Skull collection, but I’m guessing with some tweaking and some experimentation they could be used very cleverly to create some cool artwork. The entire set has some really cool stuff in it which includes:

• 3D Skulls (mentioned)
• Robots
• Bound (Vines, Ropes, etc)
• Flow (mentioned)
• Too Sexy (sexy silhouettes – also seen on “Speed Network”)
• XTreme Sports
• Apparel

(more…)

Recently, Cuzzy from Cuzoogle.com contacted me about creating a new banner image for his blogroll post dubbed “Rolling a Blog Joint”. Since the overall premise is a play on the word joint, I thought something with a textured paper background and perhaps a pot leaf image would do the trick. Amazingly, enough there is a company named ‘Pot Leaf’ and their logo was available on BrandsoftheWorld.com, so that will save me a step of recreating the leaf in illustrator. The paper texture for the background will be a combination of a number of paper artwork that I found on Bittbox; which is a great resource for this type of stuff. So, that should be enough background on this project…let’s get ‘rolling‘.

STEP ONE: SETTING UP THE DOCUMENT

The finished size of this image will be 450p wide x 150p high, but I’m going to start with a bigger canvas size. The reason being is that I want to be able to adjust the textured background to fit, and later I will crop it out. So, let’s start out by creating a new document that’s 600×600. From there drag guides to the center at 300x and 300y and then recenter the rulers to make that point 0. After that drag out horizontal guides to +/- 75px and vertical guides to +/-225px. These outer guides will be our bounding box…all of the content will go inside this area. Anything outside the bounding box will be cutoff in the final step, so make double sure everything is inside that box.

STEP TWO: CREATING THE BACKGROUND

I want to make the background a different color from the text and leaf image, so I thought a light shade of brown would be a good contrast and it will make the paper more realistic. I’ll use a light shade (b79573) and a darker shade (7a5f43) and create a radial gradient; which will be the base of the background. Create a new layer and drag out a radial gradient starting a bit above the top guide and down towards the right corner (light to dark). We create a new layer, because I want to have a base layer that’s transparent…this layer will come into play later on in the tutorial. After you’ve made your gradient, rename the layer to ‘Base‘.

(more…)