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

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

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

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.

STEP ONE: Setup Your Document

Start with an 800×800 canvas. Position guides at 400×400 and reset the center point at the cross. From there drag out guides to +/- 350px on the x-axis and +/- 150px on the y-axis. Reset your fill colors to Black and White (hit D on your keyboard). I realize that setting up all of these guides may seem like overkill, but I feel that it allows me to visualize the size of the final product and make sure everything fits properly.

STEP TWO: Draw Your Base Shape

With the rounded-rectangle tool selected set the option to ’shape layers’ and the corner radius to 15px. Draw out your shape to fit within the outer guides. Right now, the color of the shape isn’t a big deal, we are going to be working on that soon. We will use this base layer as a building block for the remainder of the tutorial. Once you’re done rename the layer “Base Shape”…and now might be a good time to save your progress. You should have something similar to the screenshot provided after this step is completed.

STEP THREE: Layout the Inside White Stripe

Change your fill color to white…if you have left your colors reset from step one, just hit X on the keyboard. Otherwise, hit D to reset the colors and X to swap to white. Drag new guides to +/- 340px x-axis and +/-140px y-axis. Then grab your rounded-rectangle tool again and set your corner radius to 10px and draw out your shape to the new guides. ReName this layer “Stripe”.

Now setup another set of guides at +/-335px x-axis and +/-135px y-axis. I know this seems like a lot of guides, but trust me they help out when you’re trying to position the line precisely. Grab your rounded-rectangle shape tool again and this time set the corner radius to 7px and set it to ’subtract from shape layer’ (see screenshot). Drag out your shape inside the new guides. When you’re done you will have a thick rounded corner stripe instead of a white box. This is our entire base shape. From here we will change everything to make it whatever color we want. I’m going with blue to match the sample image

SIDE NOTE!

I don’t like to work on my shape layers, so I generally just use them as guides for the other layers and creating masks for textures. I find that by using them as a base (or template) I can do more on new layers and group them together than trying to build onto the shape layer. If you follow this method you can resize your base layers, and apply a new layer mask to the other layers…and you don’t have to edit the entire document. So you can hide the base images and keep them separate put them into a group and rename them “Base Layers”. Select both layers (hold shift and click) then drag them to the bottom of the layers palette to the folder icon (screenshot).

STEP FOUR: Time for Some Color

From here create a new layer above the folder labeled “Base Layers”. I’m going to choose a light blue color and a darker blue and make a radial gradient for the base color. I will just choose the colors from the sample image.

• Light Blue: #0066ff
• Dark Blue: #0e2d8a

Grab your gradient tool (G), set it to foreground to background and set the mode to radial gradient. From just inside the upper left set of guides drag out the gradient tool up and to the right (just outside the top guides).

STEP FIVE: Start Adding in Some Texture

This is a favorite technique of mine, because it’s simple and does an excellent job of creating a really cool weathered look. We don’t want our final artwork to be an exact duplicate of the sample, so I’m going to use some other textures to create an original piece. I’m going to start by adding in a texture from some leaking rust. Open the file in Photoshop and get rid of the color by using Desaturate (CMD/CTRL-Shift-U or Image > Adjustments > Desaturate). Then fix the levels and contrast by doing Auto Levels (CMD/CTRL-Shift-L) and Auto Contrast (CMD/CTRL-Alt-Shift-L). After you’ve made your adjustments drag the texture over to your canvas. Resize (CMD/CTRL-T) as needed, I made mine 70% of the original image and moved it just to the top of the guides. After you’re happy with the placement change the blend mode to Overlay and leave the Opacity at 50%.

Next I’m going to take a grungy paper texture (vintage-grunge-textures: #2) and do the same thing as the rusty leak, but this time when you resize it rotate it 90 degrees. After you have it in position modify the brightness/contrast (Image>Adjustments>Brightness/Contrast) to Brightness: -71 / Contrast: +31. Change the blend mode to Overlay and leave the Opacity at 35%.

Duplicate the paper texture layer and change the blend mode to Multiply and the Opacity to 35%. By the time you’re finished you should have something relatively similar to this image.

STEP SIX: Add in Some Shading

From here we have put together a pretty good looking texture for the sign. There are paint blots, the paint dripping from weather and numerous scratches from flying debris. Now we need to work on adding in some shading and making the outside portion of the sign a little darker to add some contrast. Pick out some of the grunge brushes supplied in the resources.zip file and start dropping in some black around the edges. I find it’s best to just stamp in color (one-click).

I don’t ever drag them out (or paint in strokes), because it doesn’t look right to me. This is the part of the tutorial where you can experiment as much as you want. Change brushes around as you go, so you don’t end up with the same shape all over, and try to overlap them. After you’ve got a decent border built up change the blend mode to Multiply and the Opacity to 65%.

It’s still a little too bright for my taste in the center area. From here make a new layer directly above the gradient layer. With your brushes set on a grunge brush and the foreground still set to black make a few clicks over the light portion of the canvas. Then set your blend mode on that layer to Color Burn and the Opacity to 45%.

STEP SEVEN: Adding in Highlights

Highlights are tricky and you have to follow the old “Less is More” rule. If you put too many highlights into the image it will look like garbage, not enough and it doesn’t look right. You need to use your judgement, but try not to over do it. Create a new layer and using the eyedropper tool (I) select a lighter blue (or light version of the color you chose) from your canvas.

Then using some of the Angry Blue brushes (included) position some spatters around the palette within the guides. After you have something you are happy with set the blend mode to Color Dodge and the Opacity to 28%.

STEP EIGHT: Adding in Text

If you look at the reference image the texture from the wear and tear is on top of the text, so we’re going to set our text up the same way. Highlight the gradient layer and then grab your text tool. The font we are using is the standard for all street signs called Interstate by FontBureau. I’m going to use Interstate Bold for the main text and the Regular weight for the other text.

Reset your colors (D) and Change your fill color to white (X) and type out your first word (for the larger text I set my type at 80pts). Once you setup your first piece of text you’re going to want to adjust the tracking and bring the characters closer together. To do this open your Character Palette and adjust the tracking to around -25 to -50. See this screenshot for reference.

Add in text as you see fit. I’m just making something similar to the sample image and changing up the information. After I’ve setup the heading text and the sub-text I’ve readjusted everything to be centered in the frame.

STEP NINE: Where’s the White Stripe?

You thought I forgot didn’t you? Well, to be honest…I almost did. Let’s start by creating a new layer just above the gradient layer. Remember when we saved the stripe layer in the folder? Good! Expand the folder and we’re going to make a selection of that stripe layer. Hold down Command (Mac) or Control (PC) and click the vector mask on the stripe layer.

You’ll now see the selection on your canvas. We want to fill this with white. If your fill color is not set to white, reset the colors (D) and swap to white (X). Now fill it! You can either do the quick key command (alt-delete/backspace) or Edit > Fill. It’s up to you…both methods work exactly the same. Now it looks like we have something decent on screen, but it’s a tad bit messy…let’s clean it up.

STEP TEN: Create a Layer Mask and Finish Up

Now that we have the sign almost complete all we need to do is cutout the color and texture on the outside of the guides. To do this it is very simple. Select all of your layers and drag them to the folder icon to create a new group. Then just as we made the layer selection of the stripe we will make a selection of the “Base” layer.

After you’ve made your selection click the “add layer mask icon” in the layers palette (two left from the group icon). After you’re done with the layer mask, you can crop down the image and save it for the web or any other application you need. Obviously, this image is fairly large for most uses, but if you want to shrink it down you can. Remember the shape layers we created? By using the direct selection tool (hit A on the keyboard or select the white-arrow tool just below the text tool on your toolbar. It’s best to select one side of the shape and either shrink or enlarge it. then you can do the other sides.

That’s it for this tutorial! I have included a zipped file for the resources and a copy of the final Photoshop file for your reference. Remember, the key to creating great artwork is experimenting…you don’t always have to follow the rules. Thanks for reading, and I hope you enjoyed this tutorial.

~ GrandmasterB

RESOURCE FILES
Photoshop File: grunge_sign.psd (3.7 MB)
Resource File – Includes Textures and Grunge Brushes: grunge_sign_resources.zip (8.3 MB)

Check out my other Tutorials as well!

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

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

STEP THREE: ADD TEXTURE TO THE BACKGROUND

For this step it isn’t necessary, but I’m using three different textures to give the background more depth. For your reference they are: paper2, paper3 and paper4. Take your first texture and drag it above the gradient layer. You’re going to want to resize it, so the quickest way is free transform. In the options window change the x and y points to 0, the scale to 20 x 20 and angle to 90°. After you’ve scaled the texture you’ll want to desaturate it (cmd/ctrl+shift+u). Then change the Layer Blend Mode to Overlay and the Opacity to about 60%. Rename the layer ‘Texture1‘. You should have something like what I do…I hope. If you would like to experiment with other types of textures; I suggest checking out CGTextures.

STEP FOUR: MORE TEXTURE

This step is an exact repeat of the end of step three. I’m going to take two more textures and repeat the free transform, desaturate and change the blend mode. The only difference is you’re going to reduce the opacity on each layer by a little bit. I’m doing 50% and 20%…but feel free to experiment. If you really want to change it up try changing the Blend Mode to something like Color Dodge or Color Burn. Rename these layers to ‘Texture2‘ and ‘Texture3‘. If you find any other textures that you think will work with the image, go ahead and add them in…you never know what you’ll get when you start experimenting with Photoshop.

STEP FIVE: ADD SOME GRAPHIC ELEMENTS

For this step I’m going to dive into the Go Media Arsenal to pick out some cool elements that will give us some depth. I’m going to really pile on the use of the Arsenal today; to show you just what you can do if you use them wisely. Remember the old adage “less is more”, you don’t want to go overboard. Here are the packs that are used in this tutorial.

I am going to use the following elements from these packs to design this banner. I will cover each of them in detail as I add them to the document.

Step 5.1 – Add the abstract halftone

The first thing I’m going to do is add the abstract halftone element to the background to give it more texture by pasting it into photoshop as pixels (Photoshop will ask you what to do…I choose pixels, but you can do whatever is easiest for you). I enlarge it by going into Free Transform (cmd/ctrl-t) and then rotate it 45 degrees to the left. After that we want to duplicate that layer (Layer > Duplicate Layer or hold down alt and drag…either way will work). After you’ve duplicated the layer you will flip it both horizontally and vertically (Edit > Transform > Flip Horizontal/Vertical). Then move it into position and center both layers. When you’re done merge those two layers by selecting both in the layers pallete, right-click and choose ‘merge layers’. After you’ve done that, change the blend mode to Multiply and opacity to 50%. Rename this layer to ‘Abstract1′.

Step 5.2 – Duplicate the halftone and twist

Duplicate the halftone layer, rotate it another 45 degrees to the left and stretch it out a bit. After you’re happy with the shape and size change the opacity to 35%. Rename this layer to ‘Abstract2′ and you should have something similar to what I have. Please note, you don’t have to be exact you can mess around with the positioning to achieve the desired effect. If you want you could even duplicate the first layer a second time and change some of the blend mode effects to grunge it up just a little bit more.

Step 5.3 – Add the radial element

Again, same as step 5.1 paste in the element as pixels and resize as needed, rename to ‘Radial’. After resizing it change the fill on the layer to 0% and add the following layer styles (Layer > Add Layer Styles):

Gradient Overlay
Stroke

Step 5.4 – Add a little spatter

This time I will use two separate elements to get achieve a more random looking effect. I’m going to paste in the spatter elements into Photoshop as ‘Vector Smart Objects’ this time, because I will want to position them and transform them a few times on different layers. You can move them and transform them to the desired pattern you’re looking for. Make a new layer (above the radial), then make a selection of both layers by cmd/ctrl-clicking the first layer and then hold shift and select the second layer, and fill with black. Change the blend mode to Overlay and opacity to 60%, and rename the layer to ‘black.spatter’. You can then create another layer above this one, and resize the spatters again and rename to ‘white.spatter’. This time fill it with white, change the blend mode to soft light and the opacity to 80%.

Step 5.5 – Some flourishes and a little more color

Since the background is looking a bit monotone, it’s time to add some other elements and some color. With the last layer selected (the white spatter), create a new layer and name it ‘flourish1′. I’m going to drag in one of the flourishes from Arsenal Set 8 and place it in photoshop as ‘pixels’. I’ve rotated to the right and enlarged it, then once I was happy with it, pushed it up against the center guide and nudged it left 10px (shift-right arrow). The next step is to duplicate the layer and flip it horizontally (Edit > Transform > Flip Horizontal), once you’ve done that move it so the right side touches the center guide and nudge it to the left 10px (shift-left arrow). Merge the two layers together and change the fill to 0%. Go into your layer styles and add the following styles (Layers > Layer Styles):

Color Overlay (#345c34)
Gradient Overlay (#345c34 to White)
Stroke

Step 5.6 – Another set of flourishes

Paste in a different flourish and rename the layer to ‘flourish2′. Go ahead and resize it to fit your image. I’m fitting mine inside the bounding box, with the right side touching the guide and the left going over the center.  The idea is to make the flourishes appear as though they are coming out of the center of the radial pattern. Duplicate it, flip it horizontally and move it to the left, then merge the two layers. Change the fill to 0% and add the following layer styles:

Color Overlay
Outer Glow

STEP SIX: BUILD OUT THE LOGO (Where’s the Leaf?)

I snagged the ‘pot leaf’ logo from Brands of the World and pasted it into Photoshop as a ‘Vector Smart Object’, resized it to fit and rotated it a bit off center. The original color of the logo is a very bright green and I’m not a big fan of the bright green so I’m going to change it to something darker. By adding the following layer styles I will be able to lift the logo off the background and give it some dimension:

Drop Shadow
Inner Glow
Color Overlay
Stroke

STEP SEVEN: ADD THE TEXT

With the pot leaf layer selected grab your text tool and click in the center of the document and change the alignment to centered. After that type out your title, in this case “Rolling a Blog Joint”, leave the type black and change the Blend Mode to “Soft Light”. For this I’m using a grungy script font called Hawaii Killer; which carriest over the grunge feel, but there was a problem. I found that the “B” in Blog was unreadable, so I changed the font to another free font called Porcelain. I don’t normally recommend swapping out fonts, but in this case it worked out for the better.

Create a new layer beneath the type, and make a selection of the type layer (cmd/ctrl-click the layer). Expand the selection by 1px and fill with a light green (almost white), then add the following layer styles:
Drop Shadow
Gradient Overlay
Stroke

Step 7.1 – Add a little more depth to the type

Move the text to center it in the box and that’s it for the text. Once you have the text centered, duplicate the type layer, change the fill color to #345c34, change the Blend Mode to “Color Burn, the opacity to 50%. This will make the type pop off the screen a little bit more, to make it really pop though we’ll add the following layer style to give it some extra kick.

Gradient Overlay (black to 6a6a6a to black)

STEP EIGHT: FINAL TOUCHES

This step is purely optional, but I think it makes a cool effect. Remember that transparent layer we left way back in step one? Here’s where it comes into play…we’re going to fill it with a light shade of green (#94c294) to get a mix of colors. Then with the base layer selected add a layer mask and grab the gradient tool set to: radial and black to transparent. Then start making gradients around the bottom to reveal the green layer underneath. Once you have something you like…that’s it. You can add different colors or gradients to your liking…it’s all up to you.

Once you have something similar to the final image go ahead and crop it down and save it for the web. I hope you’ve enjoyed this original tutorial by GrandmasterB. If you’d like to check out tutorials in the future subscribe to the feed…you won’t be disappointed. Also, I’m going to start a new Question and Answers feature to address all of your burning graphic design questions in the near future…you won’t want to miss it.

~ GrandmasterB

This copyrighted tutorial was originally published at GrandmasterB.com on 07/22/2008

GrandmasterB is back and ready for Round Two of this Killer Metallic Text tutorial. Since this tutorial is a two-parter I recommend going through part one before moving onto this tutorial. However, if you only want to learn how to create the metallic text effect and not the background that is fine too. I leave it up to your discretion. With all of that out of the way, let’s get on with the show…

If you haven’t done so already please open your file from the first tutorial (you did save it right?). If you don’t have it, fear not you can download the Photoshop file that I created for the tutorial here:

Photoshop File (2.8MB): Killer Metallic Text_PT1.psd

Alright…let’s roll!

STEP ONE – Let’s Make Some Text
I’m sure all of you know how to do this, but just in case here it is. Grab the text tool (t) and type out your text. I chose a nice heavy italic font (Incised Italic Bold) for this tutorial, because anything metallic should look tough. Now this font I used wasn’t quit slanted enough, so I gave it a little more of what it needed. Simply go under your menu to Edit > Transform > Skew (-10.6°). You can play with the settings as much as you like, but remember the golden rule “Less is More!”. Once you have the text how you like change it to a light shade of gray (#C5C5C5). Then add some Layer Styles to the text with the following settings:

• Drop Shadow
  • Multiply: Black
  • Opacity: 12%
  • Angle: 120°
  • Distance: 5
  • Spread & Size: 0
• Stroke: Change only the size to 1 pixel and the color to #666666

STEP TWO – Add Some Detail
Create a new layer above the text layer you just made. Change your fill color to #A5A5A5 and make a selection of the text by cmd-clicking/ctrl-clicking the text layer on the layer palette. From here we will contract the selection by going to the menu: Select > Modify > Contract > 2 pixels. Once your selection is contract fill with foreground color (alt-backspace). Deselect (cmd-d, ctrl-d) and change to the oval marquee tool (m or shift-m to change between square and oval). Draw an oblong selection over the top half of the darker gray layer and then delete. You should now have something like in the sample image.

STEP THREE – Add Some Texture
This step is a little more involved than previous steps, but should still be relatively easy to follow along with. First things first, create a new layer above the previous darker gray layer. Reset your colors to black and white (d) and grab the gradient tool; making sure that foreground to background is selected as well as linear gradient. Next draw out a gradient from the bottom left to top right corner. After that it’s time for some filter action. Start out with making some clouds: Filter > Render > Clouds. You can do this step a few times to get the right spread by hitting cmd-f, ctrl-f if you like. After you have that it’s time to MAKE SOME NOISE! Sorry, I got a little carried away go back up to Filter > Noise > Add Noise and use these settings:

• Amount: 12.5%
• Uniform
• Mono

Then we’ll add a little bit of motion blur to finish off the look and give us a cool brushed aluminum look. Back to Filter > Blur > Motion Blur with the following settings:

• Angle: 32°
• Distance: 40 pixels

Move the layer around over the top of the text to get the right balance of gray. You don’t want too much white or black. Once you got it all set, make a text selection (like in step two) and create a layer mask (next to Layer Effects on the Layers Palette). Change your layer blend mode to Multiply and the Opacity to 68%…done, onto step four.

STEP FOUR – Adding Some Depth (Shadow Line)
We’re going to start by creating a new layer (of course) on top of the previous layer. Make a selection of the text layer and change your fill color to #616161. From there make a stroke/outline of the selection: Edit > Stroke > 1px > Outside. Deselect (cmd-d, ctrl-d) and change to the move tool (v). Nudge your stroke layer up and left 1 time (arrow keys). Make another selection of the text layer and invert it (cmd-shift-i, ctrl-shift-i) and hit delete/backspace. Change your opacity to 75%.

STEP FIVE – Get Like Some Highlights Dude!
Start out with a new layer, reset your colors (d) and flip your fill color to white (x). Make a selection of the text layer and add a stroke (just like step four): Edit > Stroke > 1px > Outside. Deselect (cmd-d, ctrl-d) and change to the move tool (v). This time we’re going to nudge down and to the right one time. Make another selection of the text layer and invert it (cmd-shift-i, ctrl-shift-i) and hit delete/backspace. Change your opacity to 85%.

STEP SIX – Time For Some Shading
Here is where we take this flat looking hunk of text into the next dimension. Once again, we’ll make a new layer on top of the previous layer and make a selection of the text. Reset your colors (d) and change to the gradient tool: foreground to transparent, linear gradient. You’re going to make two separate gradients one will start just above the top of the text and stop about the midpoint of the text. The second will start just below the text and end at the midpoint. This may take some time to get the look you want. We’re going for a dark gray to transparent, not really black. It has to be smooth. Once you’ve got something you’re comfortable with deselect (cmd-d, ctrl-d) and change the layer opacity to 80%.

NOTE: As we progress through the tutorial you may notice that the sample images are a bit fuzzy. I wanted to save load time and filesize, so the images are saved as JPEGs. Normally, I would use PNG but the filesize was almost triple of the JPEG at 60%.

STEP SEVEN – Another Highlight
This step is purely optional, but I feel that it gives the text just a little something extra. To start out make a new layer above the previous and make a selection of the dark gray layer just above the text. Change your fill color to white (x) and make a stroke: Edit > Stroke> 1px > Outside; then deselect. Make a selection of the text layer and contract it: Select > Modify > Contract > 3 pixels. Invert the selection (cmd-shift-i, ctrl-shift-i) and delete. Change the blend mode to Soft Light and opacity to 50%.

STEP EIGHT – Give It Some Shine
Make a new layer above the previous and if your fill color isn’t white (it should be), reset the colors (d) and swap (x). Grab your gradient tool, switch to foreground to transparent and radial gradient. If you followed along with part one this will seem familiar. At the points of the letters draw small gradient orbs, they will look goofy for a bit, but you’ll see. After you have the orbs created (remember not too many) change your layer mode to Soft Light and opacity to 80%. Make a selection of the text and create a layer mask.

STEP NINE – Shadow Of The Text
This layer is going to set the text apart from the background and make it appear to be standing on a glossy surface. This is bonus number two of the tutorial; the first bonus was the background, so if you skipped part one, you better get back there and check it out. Just as before we’re going to create a new layer but this time it will be below the text layer. The quick way to do this is (cmd-shift-click, ctrl-shift-click) the layer you want to be under. Once you’re all set make a selection of the text layer and fill with black (reset colors if need be) and deselect. Nudge the layer down ten times or hold shift and hit the down arrow once. Now to add a little perspective: Edit > Transform > Perspective (change the H value in the options window to 45°). Then Free Transform (cmd-t, ctrl-t) and change width to 120% and height to 31%. Blur the layer to make it look like a true shadow: Filter > Gaussian Blur > 5px. After all of that is done change your blend mode to Multiply and opacity to 60%.

STEP TEN – Time to Reflect
This part of the tutorial is fairly straight forward for those that are familiar with Photoshop, but for those who aren’t you shouldn’t have any issues. Start out by clicking your highest layer (should be the last highlight layer) and create a new group (folder icon on bottom of layer palette). Once you have that click the highlight layer again and while holding shift click the text layer. You should now have eight layers selected, drag them all up into the folder and click the arrow to close the folder.

Now that you have everything in a nice neat container we’ll duplicate it: Layer > Duplicate Group. Drag that duplicate layer below the shadow layer we created in step nine. With the duplicated group still selected we’ll flip it on it’s head: Edit > Transform > Flip Vertical and drag it so the bottom of the text is almost touching the other text group bottom. Change your blend mode to Soft Light and opacity to 50%. Create a layer mask for the group and grab the gradient tool: set to foreground to transparent and linear gradient. Start at the middle of the text (bottom) and drag up to the middle of the top text. If you’ve gotten all of that, you’re GOLDEN and should have an image similar to the one at the top of the tutorial.  If you didn’t make it and it’s not looking similar, double-check that your layers are positioned correctly. You can download the Photoshop file with the final version of the tutorial here:

Photoshop File (8.9MB) - Killer_Metallic_Text_Final.psd
Safari Download: Right-Click, Download  Linked File

I hope that you enjoyed this tutorial; I know that I enjoyed writing it. Some critics might say that it’s a bit long or there are too many steps for a tutorial. I believe that you can’t have too much information when it comes to learning a program like Photoshop. I’ve spent the past thirteen years using Photoshop and I tell you, I learn something new daily. If you have any questions regarding this tutorial or would like to see me do something else let me know. I’m always up to new challenges! Thanks again for reading this tutorial and checking out the site. If you like what you see and want to keep up to date, subscribe to the GrandmasterB RSS Feed.

~ GrandmasterB

This copyrighted tutorial was originally published at GrandmasterB.com on 06/06/2008

I know that many of you have seen tutorials all over the place that describe how to create metallic text with Photoshop. Well, I’m here to show you how to make Killer Metallic Text and I’m going to toss in a cool background and a reflection effect. So over this two part tutorial you actually get three tutorials for the price of one. How’s that sound? Along with this tutorial I will make the final Photoshop (.psd) file available for download. I know that sometimes it is easier to figure out how something works by taking it apart first. Note: Throughout the tutorial I will give you keyboard shortcuts for picking tools or performing commands. They will be listed in parenthesis next to the task.

Let’s get started!

I would start this off as step one, but you all know that we’re going to need to open up Photoshop and create a new document. When you do create your new document set it up at about 800 x 800 pixels and make the background black. Place a guide at 400y and another at 400x to get the center of the canvas and reset your center point (very important). There we go…one step saved in the tutorial!

CREATING THE BACKGROUND

STEP ONE – Creating a gradient background
To start out create a new layer, flip your fill colors (x on the keyboard) and choose a decent shade of blue. For this tutorial I picked #2D4C91 and make sure your other color is black. Grab your gradient tool (g) and select the radial gradient. Make sure that the gradient is set to foreground to background color (blue to black in this case). Once you’ve got your gradient tool set, start at the center point and make your gradient (about halfway to the other side.

STEP TWO – Transform the Gradient
This step is relatively straight forward. All you are going to do is squish the gradient vertically by using Free Transform (cmd-t, ctrl-t). What you’re going to do is grab the center square. While holding down the alt key drag downwards to the 200 pixel mark. Once you’ve got it all set hit the confirm button and change the layer’s opacity to 50%. You want the blue to be visible, but not nearly as bright as before. If you’ve got something similar to the image, let’s move to step three.

STEP THREE – Adding Some Graphic Elements
For step three we are going to dive into the Go Media Vector Arsenal. In particular we are going to check out the radial vectors that are in Vector Pack 6. For instructions on using the vector packs check out the FAQ Page at Go Media. Back to the tutorial, open the vector pack and select a radial pattern to your liking. Create a new layer above the last one. Copy and paste the graphic into the Photoshop document and resize it to what you find suitable (NOTE: Try to limit the resizing to one attempt, any more and it will distort your piece). After you have the radial pattern all set you’ll want to adjust it as follows:
On the Layers Palette

• Change the Fill to 0%
• Choose Layer Effects (bottom of Layers Palette…looks like an fx)
  • Color Overlay: #823A7F
  • Blend Mode: Color Dodge
  • Click OK
• Change Layer Opacity to 35%

STEP FOUR – Graphic Element Number Two
This step is almost identical to step number three with just a little tweak on the settings, a different vector graphic and another interesting effect to set it off from the previous layer. Create a new layer and paste your graphic into this new layer. After you have your graphic all set add the following settings to that layer:

• Change the Fill to 0%
• Choose Layer Effects (bottom of Layers Palette…looks like an fx)
  • Color Overlay: #00AEEF
  • Blend Mode: Color Dodge
  • Click OK
• Change Layer Opacity to 25%

After you have the layer settings all done, click on the “Add Layer Mask” button on the layers palette (the Add Layer Mask is one to the right of Layer Effects. With the Layer Mask selected fill the entire thing with black (alt-delete), then change your fill color to white (x). Grab your gradient tool and select radial gradient with the color set to foreground to transparent. Now draw small radial gradients and they will begin to reveal the layer little by little. We don’t want the entire radial pattern to show, just bits of it.

STEP FIVE – Now For The Crazy Stuff!
In this step we are going to use a little free spirit and create some bright blue gradient orbs. Change your foreground fill color to #823A7F and make sure the gradient tool is selected with foreground to transparent and radial selected. Create a new layer above the last layer from step four and start making some blue orbs of all sizes (small, medium and large). Once you have a few blue orbs (remember not too many) change the layer blend mode to Color Burn. Create a new layer above, reset your colors (d) and swap to white (x). Start making some white orbs now, and it’s okay to overlap the blue ones, it will give more depth. After you have a few (10 or so) change the layer blend mode to Soft Light and the Opacity to 42%. You should now have something like the sample image.

STEP SIX – A Final Touch
This is the final step for the background and an important one. This step will give us a platform of sort to set our text on. Create a new layer above the last one and grab the rectangle marquee tool (m). Once you have the tool in hand draw out a selection about 500 pixels wide by 150 pixels high. Place the top of the selection below your horizontal guide and centered left to right. It’s easiest to start on the left side at 250 pixels drag to the right side 250 pixels and down 150. If I just confused the crap out of you I apologize. Once you have your selection in place reset your colors (d) and switch to the gradient tool (g). Make sure you’re set to foreground to transparent and linear gradient (not radial). Drag from the top of the selection down to the bottom. Once you have that change your layer opacity to 50% and you’re done with part one of the tutorial.

That’s all for part one of this tutorial. I hope you’re following along well and making progress. If you have any questions regarding the tutorial please shoot me an email and as always feedback is welcomed. If you would like to check out the Photoshop file with all of the elements for part one of the tutorial you can download it here:

Photoshop File (2.8MB): Killer Metallic Text_PT1.psd
Safari Download: Right-Click > Download Linked File

Stay tuned for part two and the conclusion of this tutorial, you won’t want to miss it. Also, be sure to subscribe to the GrandmasterB RSS Feed to keep informed on upcoming tutorials and events.

~ GrandmasterB

This copyrighted tutorial was originally published at GrandmasterB.com on 06/06/2008

• Hand Drawn Skulls
• Birds (vol.2)
• Type Explosions (very cool!)
• Suits (Silhouetted Men in Suits)
• Doodles
• Trees
• International Skylines

The key to creating cool and interesting artwork with these vectors is learning how to use items from each pack to make something completely new. In the header of my site I used three of the vectors from different packs and manipulated them to get the results I wanted.

If you want to see how the real masters do it you should check out the tutorial that Go Media published on Wednesday. The tutorial is a bit difficult to follow, but the pictures explain a lot about what’s going on. In the tutorial the artist creates a very cool T-Shirt design for a band (I’m not sure if it’s fictional or not) using only Go Media Vectors…very cool stuff.

One of these days GrandmasterB is going to have to come up with a limited edition t-shirt design to giveaway in a contest or something. This tutorial has definitely inspired me to create something insane.

~ GrandmasterB

Tool Number Four: Firefox 2

I LOVE FIREFOX! There, now that that’s out of the way I can concentrate on giving you details as to why I use Firefox to develop sites. I use Firefox for two main reasons. I code every site and test as I go with Firefox. The main reason is that the fine folks at Microsoft have discontinued Internet Explorer for Mac; which quite honestly is fine with me. I do have a standby Windows machine dedicated to testing once I am sure everything looks fine in Firefox. The other reason I prefer to do all of my work with Firefox is the great add-ons that you can download from the mozilla site. That’s the beauty of using an open source browser; the community of developers come up with some of the coolest add-ons to make your internet experience more enjoyable.My favorite add-on for Firefox is the Web Developer Toolbar by Chris Pederick.
This toolbar is un-freakin-believable! I found the toolbar perfect for creating my WordPress theme…or modifying the theme. I started using the Web Developer Toolbar when I designed my first Joomla! template. The ‘information’ menu allows you to display class and id details for an entire page. An invaluable tool for locating the classes that control the layout and look of the template. Another cool feature allows you to display the CSS used on the site…even if it’s a linked stylesheet.The other tools that I use are fairly straightforward and are installed more for convenience than ‘need’. ColorZilla is a great add-on that gives you a color picker when activated to get the RGB or HEX value of a color within the browser window. FireFTP is an add-on FTP client to upload and download files on your web server. I don’t use FireFTP as much as I used to, now that I use CODA. If you’re looking for a good FTP client, and don’t want to fork over money for it…FireFTP is a good option.

Tool Number Five: MAMP

MAMP (Macintosh, Apache, MySQL, PHP) is a program that creates a local server environment on your Mac. There is a windows equivelant called WAMP; which does basically the same thing as MAMP, but in a Windows environment. The reason I use MAMP is it allows me to setup a local version of a site (ie. my WordPress Theme) and do all of the testing locally. This saves a great deal of time, because I don’t have to make a change, upload the file, refresh the browser…and repeat if necessary. Since it installs PHP and MySQL within the application directory it’s a perfect fit for developers that desing Joomla! templates, WordPress themes and other CMS customization. Both MAMP and WAMP are free to download and we all know that free = good!

Well, there you have it. That’s my list of web development tools that I use and recommend to anyone that is either starting out in web design or is an established designer. If you have any comments or questions involving this list or anything else related to web design; please let me know. Also, if you have software that you would recommend please add a comment and let me know about it.

~ GrandmasterB