GrandmasterB dot com

Pistons Nation is Flying New Colors

GrandmasterB — Fri, 03 Jul 2009 04:03:43 +0000

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

Q&A with GrandmasterB – HTML/CSS Layout

GrandmasterB — Wed, 27 May 2009 13:00:04 +0000

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:

Header
Content Area
1. Left Column
2. Right Column
3. Any other Columns
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

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

Heads Up Seven Up Blogroll – May 25, 2009

GrandmasterB — Tue, 26 May 2009 05:18:46 +0000

PSDTUTS - Design a Ready to Print Brochure in Photoshop
VECTORTUTS - 60 Gorgeous Vector Business Cards
NETTUTS - How to Set Up a Killer WordPress Testing Environment Locally
Spoon Graphics – How to Create an Abstract Vector Design in Illustrator
10Steps.SG – Sexy Model (Jessica Alba) with Glowing Bubble Effect
Web Designer Wall – 30 Untypical Wordpress Sites
Abduzeedo - Awesome Milk Typography Effect in Photoshop

Heads Up Seven Up Blogroll – April 7, 2009

GrandmasterB — Tue, 07 Apr 2009 17:47:57 +0000

PSDTUTS – Construct C4D Renders and Integrate them into a Photoshop Composition
NETTUTS – Learn How to Style Articles for Print and Email
VECTORTUTS – How to Create a Retro Vector Illustration with Stylized Lines
CSS-Tricks – Navigation Markup After Content
Lee Munroe – Web Design Trends: Designing Out Of The Box
PSD Rockstar – Tutorial: Drawing an Abstract Lightbulb
Spoon Graphics – How To Create an Awesome Vector Skate Deck Design

Mac Tricks: Adding Separators to the Dock

GrandmasterB — Tue, 24 Mar 2009 13:00:30 +0000

This is my first tutorial in what I’m hoping will become a series of easy Mac Tricks. I’m all about customization, and especially when it comes to my Mac and my workspace. When I got my new Mac Pro for work, I spent a good portion of the morning customizing the look from the icons, to the wallpapers and even the Dock. If you’re a fellow design or even a casual Mac user; I’m sure you have a fair amount of launch icons in your Dock. I wanted to find a way to add separators to the Dock, so that I could easily sort applications and make it easier to locate them without hunting.

Well, if you have tried to do the same thing you probably noticed that there’s no way to add dock separators built into OS X. So, how do you solve the problem? Well, with a little research I have found the solution. First let’s take a look at my existing dock:

As you can see, it’s quite a mess of icons and there’s really no rhyme or reason to how they’re laid out. With the addition of a separator between the icons, it would be easier to find the right application rather than scrolling through them all. So, how do you add a separator? As I mentioned there’s no clear cut way to add them from the OS, so you have to do a little tweaking in the Terminal. So if you don’t have the Terminal App in your dock, you can find it under: Applications > Utilities > Terminal.

With the Terminal App open, enter the following code to add a single separator to the Dock (copy and paste the first line to make it easier):

defaults write com.apple.dock persistent-apps -array-add '{ "tile-type" = "spacer-tile"; }'


hit return and type:
killall Dock

hit return

Your Dock will disappear and when it returns (a few seconds) there will be a separator towards the end of the Dock…it’s invisible, but it’s there. Now to position it, just click and drag it to where you want. If you want more than one separator, you just need to enter the first line of code again for as many separators as you want. That’s it…pretty easy! Here’s what my Dock looks like after the addition of separators.

Now all of my icons in the Dock are organized by application type. I have created six groups of icons (some you can’t see).

Browsers, Twitter and IM
Graphics Programs
Development Programs
Administrative Programs
System Apps
Games

If you like this tutorial let me know, or if you have tips you’d like to share I’d love to hear them. Until next time…

~ GrandmasterB

Illustrator Tutorial: Give Your Flat Text Some Depth

GrandmasterB — Mon, 23 Mar 2009 13:00:43 +0000

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

I 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.

STEP TWO – Create Outlines

This step is very easy, and there are two ways to go about accomplishing the task. The first way and probably the easiest is to right-click on the text and choose “Create Outlines”. Simple right?

Well, if you wanto to know exactly where in the menu this command lives…I’ll show you that too. You go to the menu bar and select Type > Create Outlines. You can also choose to use the key command which is listed in the menu: CMD/CTRL+Shift+O.

STEP THREE – Give the Text a Bit of Tilt (Optional)

This step is completely optional. I like to make script fonts look a little bit italic, because it gives it a feeling of motion. Since there isn’t an italic style for this font; I have to do it myself. To give the text a bit of a tilt in Illustrator it’s very different from Photoshop. You have to go to the menu bar under Object > Transform > Shear…

Once you select ‘Shear’, it will bring up the options window and here you can choose the options you want.

I use the following settings for this tutorial:

Shear Angle: 15° Degrees
Axis: Horizontal

By default ‘Preview’ is unselected. If you want to see what the text will look like before committing, you’ll need to select ‘Preview’ first. Once you’re happy with the transformation of the text…you’re all set to move onto step number four.

STEP FOUR – Change the Fill Color and Add a Stroke

If you don’t have the ‘Control’ bar open, now is the time to get that bad boy opened up. Go under the menu bar: Window > Control and click it to get it opened. Grab the Selection Tool (black arrow) or hit (v) on your keyboard and select the type. You’ll see at the top left of the ‘Control’ bar there are two boxes and one should be black, the other will be white with a red slash. The black box is your text fill color, the other box is the stroke color.

For this tutorial I changed the fill color and stroke color to 30% gray and change the stroke weight to 4pt. That option can be changed to the right of the stroke color.

STEP FIVE – Copy Text and Nudge it Over

This step of the tutorial is going to give the text a makeshift drop shadow. It’s very straightforward and easy to do. With the text selected we’re going to make a copy of it and paste it on the canvase, but it’s not going to be a normal paste of the object.

To copy the text you can use the key command or do it from the menu. The key command to copy is CMD/CTRL+C or to copy from the menu the command is under Edit > Copy.

After you have copied the text we need to paste it onto the canvas. As I mentioned though you don’t want to just paste it, because Illustrator has a habit of putting objects wherever it pleases. What we want to do is ‘paste in front’ of the copied object. To do that the key command is CMD/CTRL+F or via the menu bar it’s under Edit > Paste in Front.

After you have pasted the text nudge it with the arrow keys up and to the left twice (hit left twice, then up twice). You’ll see that your text now has a bit of a three dimensional look to it…this is what we want.

STEP SIX – Time to Add a Little Bit of Color

With the top text layer still selected we’re going to copy and paste in front of the last layer.

After you have pasted the text in place, go ahead and change the color and the stroke. Change the stroke weight to 2pt…and you’re done with this step.

As we move along, these steps are going to seem repetitive but be sure you follow along so you don’t miss something.

STEP SEVEN – Add a Gradient Layer

Once again we’re going to copy the active layer and paste it in front of the last one. After you have pasted your text, open the gradient tool window under the menu bar: Window > Gradient.

By default the gradient colors are set to make a gradient from black to white, and this is what we’re looking for. Unfortunately, Illustrator CS3 (which is what I’m using) doesn’t allow for transparent gradients, but Illustrator CS4 does. It’s not necessary for this tutorial, but if you’re looking for it you’ll need to upgrade.

Once you’ve selected the gradient you’ll want to leave it set at ‘Linear’ and change the angle to -90° degrees. This will give us a gradient that is black on the bottom and white on the top. Once your gradient is set open the transparency window: Window > Transparency. We’re going to change the Blend Mode to ‘Multiply’ and the opacity to 50%. If you used a script font, chances are that your gradient may not blend between letters properly…don’t worry, we’ll fix that next.

STEP EIGHT – The Magic of the Pathfinder

The pathfinder tools are extremely cool and will allow you to do all sorts of interesting effects. Some of the options are a little touchy, but with some practice you should be able to figure out how to use them properly in no time at all. So, the first step here is to get the pathfinder window opened: Window > Pathfinder (CMD/CTRL+Shift+F9).

Once the pathfinder window is open you’re going to want your gradient layer selected, then you want to choose the top left icon. If you hover over it with your mouse it will say ‘add to shape area’. Click on this option and it will make all of the letters one element and the gradient will appear as it should.

Once you’ve done that, go up to the transparency window. Change your Blend Mode to ‘Multiply’ and the Opacity to 60%. Once you’re done, you should have a smooth transitional effect on the text like the image to the left. Leave that pathfinder window open…you’re going to need it again.

STEP NINE – Let’s Find Some Shade (Part One)

Sorry for the cheesy title, but I couldn’t think of anything else to say. With the gradient layer selected, copy and paste in front once again. Now you need to lock all of the other layers below (leaving the most recent layer), so you don’t edit them by accident. Then copy that top layer and paste in front again.

After you have pasted the layer, nudge it up once and left once. With your selection tool, drag and select both layers and change the fill color to Black.

After you’ve changed the fill color right click your mouse and choose ‘Ungroup’.

STEP TEN – Let’s Find Some Shade (Part Two)

This step of the tutorial is tricky at times, so it’s best to take it one letter at a time. For instance, if you click the image to the left you’ll see that I have selected only the ‘G’. Since the ‘G’ is separate from the other letters if I were to select both layers and use the pathfinder’s ‘Subtract from Shape Area’ function all of the other letters would be deleted and we’d be left with just the difference on the ‘G’…this is not good.

In this tutorial, since I used a script font and all of the letters are one element except for the ‘G’; I can do this in two steps. If you’ve used a font where there’s separation between the letters then you’ll need to do one at a time as mentioned above. So, I start by dragging a selection over the first letter and make sure it has selected both layers. Then go to the Pathfinder and click on ‘Subtract from Shape Area’, after you’ve done this you should see just a small sliver of the letter where they didn’t overlap. If your letter looks like this, then you’ve done a good job grasshopper. Repeat through all of the letters in your text, and then once you’ve completed that go back up to the Transparency window. Select all of the slivers and group them (CMD/CTRL-g) and change the blend mode to ‘Multiply’ and the opacity to 50%.

ALL FINISHED

You’re all finished! If you’ve followed along through the process; your image should look fairly similar to the image to the left. The techniques in this tutorial range from beginner to intermediate, so if you don’t get it right away don’t beat yourself up. Give it another go, and try to figure out what went wrong.

When all else fails, you can still send me an email and I can try to figure out where the issue is. As always, I appreciate your feedback and comments on the tutorial. Thank you for taking the time to go through the tutorial and visiting GrandmasterB.com. If you’re looking for any other tutorials, be sure to check out the Tutorials page.

~ GrandmasterB

Heads Up Seven Up Blogroll – March 16

GrandmasterB — Mon, 16 Mar 2009 22:31:08 +0000

PSDTUTS – Creating a Touching Story Scene in Photoshop
VECTORTUTS – Create an Milk Bottle with a Funny Cow Label
NETTUTS – 10 Apps for Developers on a Shoestring Budget
AETUTS – Create a Mysterious Smokey Logo Reveal
BlogPerfume – WordPress Plugin: Manage 301 Redirections and 404 Errors
Lee Munroe – 5 Quick and Easy Ways to Optimise Your Website
Spoon Graphics – Create a Simple Vibrant Light Effect in Photoshop

Bullies Beware…Bully Beatdown is Coming for You!

GrandmasterB — Wed, 11 Mar 2009 19:00:20 +0000

I usally don’t watch too much MTV anymore (except for Rob Dyrdek’s Fantasy Factory), but today my co-worker tipped me off about a new show that I’m going to have to put high on my “watch” list. The show is called “Bully Beatdown” and is hosted by Jason ‘Mayhem’ Miller a mixed martial arts fighter. The idea of the show is simple:

Ever been picked on by a bully?
Let ‘Mayhem’ Miller know.
He confronts the bully and gives the bully a chance to prove himself in the ring.
One catch…he’s gotta go up against a professional fighter.
If he can beat the professional fighter…the bully wins $10,000.

Check out this trailer of the show…I can’t wait to see these tools get smacked around the cage. The show airs on Sunday March 22nd @ 9:30pm ET/PT.

Bully Beatdown

Heads Up Seven Up Blogroll – March 2

GrandmasterB — Mon, 02 Mar 2009 17:12:15 +0000

PSDTUTS – 18+ Sources of Inspiration from Coffee, Ink, Blood and other Stains
VecTips – Quick Tutorial: Gradient Strokes
BlogPerfume – Theme: Irresistible For Visually-Rich Personal Blog
CSS-Tricks – Remote Linking
Smashing Magazine – Desktop Wallpaper Calendar: March 2009
Veerle’s Blog – Drawing a coil in Illustrator
Webdesigner Depot – The Workstations of Popular Websites

Out of the Box Business Ideas: IWearYourShirt.com

GrandmasterB — Wed, 25 Feb 2009 21:40:15 +0000

With the way the current economy has been going more and more people are looking for creative “out of the box” business ideas to make more money. Whether you are looking to subsidize your monthly income or are trying to get back on your feet after being laid off from your 9 to 5 job, many of us are learning that there are creative ways to make money on the Internet and becoming an Internet Entrepreneur.

Throughout the next few weeks, I will be contacting a number of internet entrepreneurs that are making a move in this economy and setting themselves up with successful internet businesses. I will conduct a brief interview and ask them what tools their using to promote their businesses, what their business is about, how they came up with the idea and what was the motivating factor to start up their own business.

My first interview/case study is with Jason from IWearYourShirt.com. Jason is making a living off of promoting businesses by, you guessed it…wearing their shirts.

Jason, thanks for taking the time to answer a few questions. First off, can you tell me a little bit about your background?

I’m a 26 year old business-creative currently living in Jacksonvile, FL. I’ve used the internet and design for business pursuits for the last 10 years, both professionally and personally. After working a few design focused jobs, it became clear that the marketing and business end of things were much more interesting and rewarding.

In 2006 I co-founded Thought & Theory, a company that specializes in creating, designing, talking about and developing simple and beautiful web applications. I’ve worked with large advertising companies, social networks, professional sports leagues, along with other various new media and internet related work. Outside of the web and computers, I’m a sports fanatic, both watching and participating in, a movie buff and an automotive enthusiast.

What was the driving force behind the creation of IWearYourShirt.com?

I’ve always tried to come up with interesting business ideas that are not only money makers, but simple and effective. What’s easier than putting on a shirt everyday? I feel like banner advertising is a dying breed, if you don’t have a huge budget, it simply isn’t effective. A lot of businesses struggle to have their voice heard and I’m trying to help out.

The concept is genius! Where did you get the idea of “outsourcing your wardrobe”?

It was a light-bulb moment at 3am one morning in September of ‘08. Like many nights, I stay up late without the ability to turn my brain off. That night/morning was one that finally paid off!

I have noticed that you’ve built up quite a following on Twitter. How has using Twitter helped you build up business?

Twitter has been huge for me. I barely used Twitter before this project started and didn’t quite understand its value. Once I realized the potential reach you had to network with anyone in the world, it clicked. You can chat with anyone, talk about anything and join any conversation. I’m still waiting for “THE_REAL_SHAQ” to @reply me.

What other forms of Social Media do you use to promote IWearYourShirt?

The iwearyourshirt.com Blog, Facebook, Flickr, Ustream.tv, YouTube and multiple other video sharing websites. I had dabbled in a bit of everything before this project started but now I really see how you can use these free services effectively to market yourself, your company or your product/service.

When someone purchases a day, what can they expect?

I wear the shirt from sun-up to sun-down. No exceptions. I take photos in the morning when I wake up, post them to Facebook, Flickr and my blog. I create a unique daily video clip, trying to do something fun or engaging in your company’s shirt but I am NOT pitching anything for you. At 3pm EST everyday, I live stream on Ustream.tv and typically have around 1,000 people watching and chatting with me. I post 3-4 blog posts a day about your company on iwearyourshirt.com and tweet about the company on twitter 5-10 times a day. If I am sick, I still wear a shirt. If I have a wedding, I own multiple sport coats. Your shirt will be worn, no exceptions.

How far in advance are individuals/companies sending you their shirts? How do you keep track of all of them?

Some people send them early and some wait. I try to get the shirts at least 2 weeks in advance of wearing them, but sometimes that doesn’t work out. I currently have a couple shirts for November/December buyers, but don’t have shirts for companies next week. My closet has 365 hangers waiting for everyone’s shirts, so there is always a spot available.

After you have worn every shirt and the year is up, what are your plans for the shirts? Will you keep them or donate them to charity?

At the end of each month I plan on donating the shirts to charity. I may keep 1 or 2 that I like, but the majority will be donated and hopefully used for something good. If anyone wants the shirts for a charitable cause, please feel free to contact me.

Do you have any advice for aspiring entrepreneurs?

Here are a couple things I’ve learned in my short stint: Don’t drink the hatorade or get caught up defending yourself to naysayers. There are a lot of people using the internet and unfortunately some of them aren’t very nice. If you can take some constructive criticism from their comments, do it, otherwise just turn the other cheek and move on. The next thing is to be patient. Nothing is an overnight success. I didn’t sell my first day until a month and half after my project launched (outside of my network of friends). I didn’t get a solid following on Twitter by sitting back and waiting. I spent 10-12 hours a day on the project for the first 3 months and continue to grind away on a daily basis. And last but not least, think outside the box!

Thanks again for taking the time to answer my questions Jason.

~ GrandmasterB

If you would like more information about IWearYourShirt.com or have any questions for me, please shoot me an email via the contact page. If you are interested in promoting your online business on IWearYourShirt.com check out the calendar for available dates. As of right now, dates are sold out through September…the 27th is still available.

If you would like to share the story of your online business or how you got started with your blogging career drop me a line. Until next time…