topbg

Posts Tagged ‘Tutorials’

It’s Been a Long Time!

Saturday, January 30th, 2010

Where have I been the past six months?

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. (more…)

Q&A with GrandmasterB – HTML/CSS Layout

Wednesday, May 27th, 2009

Q&A with GrandmasterB

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…)

Illustrator Tutorial: Give Your Flat Text Some Depth

Monday, March 23rd, 2009

Illustrator Tutorial: Give Your Flat Text Some Depth

It’s been quite awhile since I have put together a tutorial using Adobe Illustrator. I’ve been working with Illustrator a lot more recently and decided to share an easy tutorial that will give your text some depth and make it pop off the page/screen a little more. I’ve used a few of these techniques before in my tutorial “Feature Post Logo” that I wrote last Spring. In that tutorial the finishing touches showed how to use the pen tool to add some shading to the text. This tutorial shows you another technique to achieve a shadow on your text.

STEP ONE – Open Illustrator, Create a New Document and Set your Text

step1-smI started out by creating a new document. Most of the time I use graphics for the web; however, there are times when my clients require the artwork for business cards, letterhead or other print collateral. So, you might want to create the new document profile for “print”, so that you don’t have to recreate the artwork if the client needs it for print.

After you have setup your new document, grab your text tool and set your type. For this tutorial, I used one of the great script fonts from House Industries…Sign Painter (House Script). This font isn’t free, but if you look around free font sites like DaFont.com; you should find something that works for you. One thing to note, is that you can use any style of font…I just chose a script font for fun.

I set the font size to 100 point, so that I could shrink it down later on for use on the web. If you use a script font you may need to bring in your tracking a little bit so that the letters flow together a little better. If your layers palette isn’t open go to: Window > Layers and get it opened. Once it’s open click the arrow on the left of the layer name “Layer 1″ and make sure you see the text. You’ll need to see these items as we go along. Once you’re happy with the type…it’s time to move onto step number two. (more…)

Photoshop Tutorial: Create a Grunge Street Sign

Thursday, November 27th, 2008


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…)

Q&A with GrandmasterB – August 5

Tuesday, August 5th, 2008


For awhile now, I have contemplated doing a Q&A feature post that would address questions from my readers. I’ve been compiling some of the questions and answers that I think will help people out of a tight spot. These questions can be on any topic; from Photoshop questions to Wordpress issues, tutorial requests to general banter. I will try to answer each question as best I can and give you resources where you can find more help on a given topic. So without further ado…I give you Q&A with GrandmasterB.

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

(more…)

topbg
Your Ad Here