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

I went over to the local Borders bookstore and after walking around the store for ten minutes (it’s a new store and it’s huge), I finally found the magazine rack. My first impression of the magazine was that it’s designed well and definitely gets the readers attention with the bright cover art. The other thing that caught my attention was the sticker price. Each issue of the magazine runs £6.00, but with the markup and the exchange rate it was $15.50 USD. I immediately thought “this magazine is going back on the rack for the next sucker”, but I figured it wouldn’t hurt to give it a free browse in store.

I was definitely impressed by the contents of the magazine and the quality of the articles, but the tutorials are probably some of the best that I’ve ever seen. Each of the tutorials is extremely in-depth and very detailed, so much so that you can understand why the magazine is titled “Advanced Photoshop“. After giving it a once over I noticed that it comes with a CD loaded with all of the necessary files for each tutorial, along with a few bonus items. AHA! This $15 price tag isn’t looking too bad after all, so I figured I’d pick it up. 

I haven’t tried any of the tutorials out yet, because I bought it on my lunch break. I have thumbed through the mag about five times though and read a few of the articles. If time permits, I’ll see if I can work out one of the less intense tutorials and let you all know how it goes. If you’re a Photoshop nut like me, you should definitely pick up the magazine or just give it a look at your local bookstore.

One other quick thing before I close out, you can download the tutorial files from the Advanced Photoshop website without purchasing the magazine, but unfortunately there isn’t a PDF or text file with the instructions for the tutorial. They are great resources to have on hand though…check ‘em out.

~ GrandmasterB

I’m going to show you two ways to make your Feed Icons custom. What you will need for this tutorial:

• Feed Icons Dev Kit
• Adobe Photoshop (of course)

BASIC CUSTOMIZATION

Unzip the Dev Kit and take a look inside, there are multiple sizes of the default orange and white rss feed icon as well as a folder full of grayscale versions. For this part of the tutorial go ahead and open one of the grayscale versions; I have opened the 128 x 128 pixel version (feed-icon-128×128.psd) in Photoshop.

To add some color to this icon and make it your own will take you literally one step. It’s not flashy and is very simple, but it is customized to your liking and that’s what counts.

STEP ONE (and only one) – Add Some Color
Simply go to the layers palette and click on “Add Layer Style” and choose Color Overlay. Change your Blend Mode to “Color” and choose a color to your liking that is “web safe”. Once you’ve got it click OK and you’ve just customized your RSS Feed Icon. Of course when you’ve finished be sure to “Save for Web” in the format of your choice.

As I stated this is very basic customization of the feed icon and doesn’t use a much (if any) creativity. So, how do you make something completely unique similar to the GrandmasterB Feed Icon…lemme show ya.

ADVANCED CUSTOMIZATION – GLASSY ICON

The cool thing about these feed icons is that there are Illustrator versions included in the Dev Kit. I’m not going to dive into using the Illustrator files, but if you want to do some experimenting they are available. For this advanced version of the tutorial, I will use the supplied Photoshop file (link below) that has a few extras enclosed. For those of you that didn’t get the free vector starbursts from the Killer Metallic Text Tutorial; you get a second chance by downloading this Photoshop file.

What you will need for this tutorial:

• Download the GMBfeed-icon-128×128.psd
  
• Adobe Photoshop (of course)

STEP ONE – Getting Started
If you haven’t done so already, download the required Photoshop file and open it. You’ll see that the grayscale version of the Feed Icon is included as well as two other layers which are hidden. To start out go ahead and turn off the visibility on the “feed icon” layer. We won’t need it for this tutorial, but I included it in case you wanted it. Now that we have nothing visible and a blank canvas turn on your guides (cmd-; or ctrl-;). Next with the “feed icon” layer selected create a new layer and name it “base”. Reset your colors to black and white (d)

Now, lets get something on that blank canvas. Grab your “rounded rectangle tool” and set your corner radius to 10px. Starting at the center of the canvas start dragging out your shape; once you see that it’s drawing hold down the Alt+Shift keys to drag the shape out from center and keep it uniform. Stop just short of filling the entire canvas. We will need space outside the shape for the next step. When you’re done you’ll have a shape like above.

STEP TWO – Add Layer Style to Base
This step is going to give the ugly black box we created in STEP ONE some style. Once this step is done, we’ll have the beginnings of a decent looking icon. Everything is built off this layer and you can customize the colors how you like. I’m going with RED, but you can make whatever color you like. With the “base” layer selected choose “add layer style” at the bottom of the layers palette. Add the following settings for each style, remember the color is up to you.

• Outer Glow
• Inner Glow
• Gradient Overlay
• Stroke

STEP THREE – Add Starburst
The “starburst” is one of the included layers within the Photoshop file. Now that we are at this step go ahead and turn on the layer visibility. It’s not very impressive is it? Well, lets change that! Double-click the color selector and change it to a darker version of your chosen color. Since I chose to use red, I’m using a fill color of #390808. Once you have your color chosen, change the layer Blend Mode to Color Dodge and the Opacity to 50%. As you can see the starburst is still visible outside the “base” layer. To fix that small issue we will make a selection of the “base” layer (cmd-click or ctrl-click the layer) and with the starburst layer selected choose “Create Layer Mask”. Now the starburst is contained within the borders of the base layer.

STEP FOUR – RSS Feed Icon Detail
From here we will turn on the last of the included layers “rss.icon.detail”. I’ve included this layer as a “vector smart object”, so that you could resize it without losing any of the details. If this layer were made of pixels (same with the starburst layer) and you resized it multiple times it would distort and look like garbage. Once the “rss.icon.detail” layer is on we’ll add the following layer styles to give it some pop.

• Inner Glow
• Gradient Overlay

I chose to give this layer a metallic feel, but you can change it to appear however you like. It’s all a matter of preference.

STEP FIVE – Add Some Shading
This step and the next will both be built on layers above the “rss.icon.detail” layer, so we’ll start by creating a new layer above it and rename it to “shading”. Make sure your colors are reset to black/white, if not go ahead and reset them now (d). Make a selection of the “base” layer and grab the gradient tool. We’re going to create a linear gradient and set it to “foreground to transparent”. Draw a gradient starting at the top of the icon down to the middle and another starting at the bottom up to the middle. When you’re satisfied with your gradients change the Layer Opacity to 50%. NOTE: Don’t deselect your selection…you’ll need it in STEP SIX.

STEP SIX – Make It Glassy
Create a new layer above “shading” and rename it “glass”. Grab the elliptical marquee tool and starting at the top right corner (outside the canvas); hold down ALT+SHIFT (cross-hair will have an x below it) and drag out a selection. You should have a selection that resembles this image: step6_marquee.png

Grab the gradient tool and flip the colors to white/black (x). Starting at the bottom of the canvas drag the gradient up to the top of the canvas. If done correctly you’ll get a smooth transparent gradient that looks glassy. Deselect and you’re finished!

I hope that you have enjoyed this set of tutorials teaching you how to customize your own RSS Feed Icons. As you have seen there are quick, easy ways to make a custom icon and there are more advanced methods. These two options are just the tip of the iceberg though; I have seen a ton of custom Feed Icons all over the Internet and each one has it’s own unique shape, style and flare. One of my favorites has to be the Bomb Icon that Jason Boom uses for his feed. I’m sure there’s some repository of Feed Icons on display somewhere around the Internet…until you run into it though check out Google Images for ideas. Speaking of Feeds if you enjoyed this tutorial and want to see more in the future; subscribe to get GrandmasterB in your feed reader.

~ GrandmasterB

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