Reminiscence

Detail

A brushed steel button

The internet is saturated with tutorials on how to create web buttons in Photoshop, and if you’re anything like me, you’re probably ready to scream if you ever see another tired and dusty old tutorial showing how to make a “glossy” or “gel” button. If that’s the case, hopefully this tutorial is a bit different from those and will give you some helpful tips.

We’re going to be creating a stylish, detailed and realistic brushed steel button, reminiscent of steel dials on old fashioned stereo equipment. These are really fun and simple to make once you know the techniques and steps used to create them, and you’ll be able to modify or customize the steps to your liking to achieve the effects you prefer. As a bonus, I’ll also show you how to add a symbol or logo to your brushed steel button as an inlay, in this case I’ll be adding a “play” symbol as a brass inlay.

Step 1 – Set up your document space

This step is really up to you, and will depend on the project you’re working on. For the purpose of this this tutorial, I’ve created a document that is 630 pixels wide by 333 pixels high. I’ve filled it with a mid-gray background, with darkened corners (I used the gradient tool on radial gradient setting). Then I added a slight noise effect (filter > add noise) to create a subtly textured background for my brushed steel button.

Background for my brushed steel button

Step 2 – Creating the base of the brushed steel button

Create a circle in the middle of your document. Any color will do, because we’re going to use layer styles to colorize it to give it a brushed metal look. Name this layer “brushed steel button base” or something that will help you identify it as the base layer, as that is how I will be referring to this layer in this tutorial.

Create a circle

Double click on the circle layer preview to open the layer styles palette. Check the “gradient overlay” button. Next to “style” be sure the gradient is set to angle mode. The red arrows below show the settings you need to pay attention to and adjust.

The layer styles palette

Click on the gradient preview to change the colors to something like the settings shown below. The exact shades you use aren’t important, as long as you’re using dark grays and light grays / white in the order shown here. It’s important that your first color and last color are identical in order to avoid an awkward line where the two colors meet, so copy and paste the hexadecimal value for these two points on the gradient.

Set up your gradient like this

So now you should have something like the image below. The angled gradient created a very sleek silver circle that captures the highlights and reflections for our brushed steel button.

Adding highlights and reflections

Step 3 – Texturing the brushed steel button

So what we have now would be great if we were just making a steel button, but since we’re looking for a brushed steel button, we’re going to push it a bit further to create the brushed, scratchy texture we need.

Make a selection of the circle layer (command-click on Mac, control-click on PC) and then click on Select > Modify > Expand. Enter a value of 5 pixels, and click okay. Add a new layer above your brushed steel button base layer. Fill this layer with a mid gray, and then clear your selection by clicking on Select > Deselect (command-D on Mac, control-D on PC). Click on Filter > Noise > Add Noise. For distribution, select uniform and for amount, set it at around 50%. Click okay. These dots are going to eventually form the brushed scratches on the brushed steel button.

Adding the brushed texture

Click on Filter > Blur > Radial Blur. Set the Amount to 100, the Blur Method to Spin, and the Quality to Best. Repeat the Radial Blur filter two more times (command-F on Mac, control-F on PC). Set the layer blending mode to overlay. Now create a selection of the brushed steel button base layer as you did previously, and invert the selection by clicking Select > Inverse (command-shift-I on Mac, control-shift-I on PC). Hit delete. Clear the selection as you did before. This should clean up the edges so that your texture layer fits perfectly over your brushed steel button layer.

Texture added to the brushed steel button

Step 4 – Adding the beveled edge detail to the brushed steel button

As it stands right now, the texture of our brushed steel button is looking really good and pretty realistic, but it needs some depth to make it stand out more. It’s the details that are going to make this button really shine.

Create a selection of your brushed steel button base layer as you did previously, create a new layer above all the other layers, and fill the selection with a color (any color will do, as we’ll be using layer styles to colorize this layer again). Now click on Select > Modify > Contract. Enter a value of 3 pixels, and click Okay. Hit the delete key to clear the fill in the selection. You should now have a thin bevel around the edge of your brushed steel button. Deselect as you did before.

Open up the layer styles palette for the bevel by double clicking on the layer preview, and go into the gradient overlay settings. Adjust your settings to something like the image below. Note that the gradient used is identical to the one we used previously, except this one is set to linear instead of angle. I adjusted the Scale on mine until I was happy with the way the bevel looked on my brushed steel button.

Adding the gradient to the bevel

The beveled edge of the brushed steel button

Step 5 – Adding the shadow to the brushed steel button

There’s about 20 different ways you could make a shadow in Photoshop, and the most obvious would be to use the drop shadow layer style on the brushed steel button base layer, but I’m not particularly fond of the way that looks, as I prefer a bit more of a realistic shadow.

Create a selection of the brushed steel button base layer as you’ve done previously, and create a new layer behind the brushed steel button base layer, and fill the selection with black. Deselect as you did previously. Click on Filter > Blur > Motion Blur and adjust the settings similarly to the image below – the Angle should be 90 degrees, and the Distance should be a relatively low value.

Creating the shadow for the brushed steel button

Move the shadow layer down until only the bottom portion of it is showing, and the top half is hidden behind the brushed steel button. Drop the shadow layer’s opacity to around 60%. It should now look something like the image below.

The shadow beneath the brushed steel button

If you followed the steps above, you should have a pretty realistic looking, detailed, stylish brushed steel button, perfect to be used in your interface and web designs. Coming soon is the next part of the tutorial, where I’ll show you how to add an inlay symbol or logo to your brushed steel button.

New Coke cans on a shelf with Diet Coke cans

In a previous post I made earlier this month, I mentioned how the new Coke cans look like Diet Coke cans, and wrote up a comparison between the seasonal packaging for the two brands. Since a picture says more than a thousand words could, I snapped the picture above with my cell phone while shopping today, as I feel it very clearly illustrates the points I made. The new Coke cans are on the left, the new Diet Coke cans on the right. As you can tell, the two are almost indistinguishable from one another.

Abstract Organic Forms

I’ve always been a big fan of abstract organic forms. There’s something magical about smooth, fluid, amorphous shapes that I find captivating in art and nature, so I’ve tried out several different methods of creating this effect in digital art. Here’s a simple tutorial that walks through the process I use to create abstract organic forms in Photoshop.

Step 1 – Set up the artboard

Create a document at whatever size you need. For this tutorial, I’m working at 800 pixels by 800 pixels. When I’m starting a new artwork, I typically plan it around standard poster sizes, but to make this easy, I’m working small. Fill the background layer with black.

Create a new document and fill the background with black

Step 2 – Preparing the tools

Select the gradient tool, and switch it to radial gradients. Set the foreground and background colors to their defaults (black and white) by pressing D. Then reverse the foreground and background colors by pressing X. White should be your foreground color, and black should be your background color.

Radial gradients

Step 3 – Layering gradients

Create a new layer and set it’s blending mode to lighten. On this new layer, draw a radial gradient anywhere on the artboard. You should have a white glowing circle. Now create a new layer and again set the blending mode to lighten and again draw a gradient somewhere on the artboard, preferably somewhere that it will overlap the first gradient. Keep adding more layers and more gradients (being sure to set each layer’s blending modes to lighten each time), until you have a nice grouping of glowing orbs. You can really make it as complex or as simple as you feel like. I like to layer smaller orbs over bigger orbs to give it a more complex, organic form.

Radial gradients on separate layers with blending modes set to lighten

I like to layer smaller orbs over bigger orbs

Step 4 – Flattening the image to a new layer

Create a new layer, and from the main menu, click on Image and then on the submenu, select Apply Image. A dialog box will pop up with some settings. Make sure that the setting next to layer is Merged and click okay. This will basically create a flattened snapshot of your artwork on the new layer, merging all the visible effects into one layer, while leaving the actual layers intact.

Create a snapshot on a new layer using the Apply Image function

Step 5 – Making the shapes organic

This is where it starts to get really fun and where your abstract organic forms start to take shape. Make sure that your “snapshot” layer is selected, and click on Filter then Distort and then Wave. In the dialog box that pops up, drop the Number of Generators slider down to 1. Adjust the wavelength and amplitude sliders to your liking, until it gives the abstract organic form that you like. You could also click on Randomize until it gives you a result you like. Click Okay. You should now have something similar to this:

The wave filter gives our forms a more organic look

Step 6 – Repeat as desired

When I get to this point, I like to repeat Steps 2 through 5 to get a really nice layering of abstract organic forms, paying particular attention to covering the whole artboard. As you can see, I have several layers of “waved” abstract organic forms, all set to lighten blending mode, layered together to give the effect shown below.

Layering multiple pieces to cover the artboard

Step 7 – Adding color and detail

This is my favorite part of the process, because to me, this is where it starts to feel alive and disgustingly real. First, I colorize the image. There are many different ways to go about doing this, but I find the best way to be using gradient maps. In the layers palette, click on the create new fill or adjustment layer button (the one that looks like a circle that is half black and half white), and select Gradient Map from the list. I’ve used a dark rust color as my dark color, and a very light caramel brown / cream color as my light color. It’s very important that you use colors with a lot of contrast in light and dark, to avoid making your image look flat – it’s the depth of the shading that makes your abstract organic forms look so convincing.

Now our forms are starting to look good, but they appear maybe a little too dry, dull and “digital”. We can make them look wet by using the plastic wrap filter. Use “apply image” on a new layer as before, and then click on Filter, then Artistic and then Plastic Wrap. You can adjust the highlight strength, detail and smoothness levels to whatever looks best to you. Click okay when you’re happy with how it looks.

Using the plastic wrap filter makes the abstract organic forms look wet

 
This gives you something that looks like this:

The plastic wrap filter gives the abstract organic forms a wet look

Step 8 – (Optional) Adding secondary colors

This is a step that I like to do to add a bit of visual interest to the forms, but it’s certainly not necessary. Create a duplicate of your flattened layer (the layer that has your abstract organic forms after they’ve been wave filtered and plastic wrap filtered) by dragging the layer to the new layer button in the layers palette. Apply a wave filter to the new layer, enough to make it distinctly different from the layer beneath it, and set the new layer’s blending mode to lighten. Now on the main menu, click on Image then Adjustments and then Hue/Saturation. Adjust the hue and saturation sliders to your preference, but leave the lightness slider at 0. You’ll see that you have two different colored sets of abstract organic forms that are nicely blended together. If you want a bit more control over how the shapes interact with one another, you can use layer masks to adjust which parts of the new abstract organic forms you want to show or hide.

Use layer masks to control how the forms blend together

Step 9 – (Optional) Sharpening the image

Another optional step. This is a technique that I use a lot in photo manipulations and photo touchups to sharpen the overall image. Create a new layer above all the other layers, and make a new flattened snapshot of the entire artwork using apply image as you did in step 4. Now click on Filter then Other and then High Pass. Drop the slider down to a low number – for this I’ve used 4.7 pixels. Click okay. Now set the high pass layer’s blending mode to overlay. Notice how much it sharpens up the image? It’s usually a pretty dramatic improvement.

The high pass filter is used to sharpen the image

 
And there you go. If you followed the steps above, you should have something that looks somewhat similar to this:

My final abstract organic forms

 
Play around with the settings and try modifying your abstract organic forms your own way to come up with new and interesting results. Using this technique, I’ve created some pretty crazy imagery, including this really gorey artwork:

The Compounded - an artwork I created using this technique

909 Broad Street Brochure, front and back

Earlier this past week, I finished up a fold-over card design for the 909 Broad Street apartment community in Athens, GA, right next to the UGA campus. I was really happy with how they turned out! My favorite part is the photo of downtown Athens spanning across the front cover, masked within the numbers “909″.

909 Broad Street Brochure, inside

Retro Typography

I’m a big fan of typography, so I’m always looking for new fonts to add to my repertoire. I have a particular love for display fonts, and have always enjoyed fonts with a retro or vintage feel. Recently, I was working on a logo and identity design package for a location’s signage where the client was looking for a 50′s feel, so I decided to look around for some free retro fonts.

As it turns out, there’s all kinds of free retro fonts out there, but a lot of them didn’t feel right for the project, or weren’t what I was looking for. After testing out around 12 to 15 various retro fonts, I found these two that I particularly liked, and wanted to share them here. These two free retro fonts are available to download from the links below.

Betty Noir

Betty Noir is a really cool retro small caps display font, reminiscent of old fashioned drive-in movie theaters and plaza signage.

Download Betty Noir from Blambot Comic Fonts and Lettering

Betty Noir, free retro font

Andes

Andes is a really fun all caps retro display font where the upper case letters act as swashed versions of the lower case letters. I love it!

Download Andes from DA Font

Andes, free retro font

GA Tech's women's basketball team's holiday card

I recently made a holiday card for the Georgia Tech Women’s Basketball team, coaches and staff, using photo-manipulation techniques similarly to how the film industry uses matte painting to achieve beyond-realistic effects and scenery.

First, I started with a standard team photo, taken at the Georgia Tech basketball courts.

Not very holidayish!

Then I found a pretty snowy scene that had a nice serene, holiday feel to it to be used as the backdrop scenery behind the team. Using Photoshop, I masked out the photo of the basketball team and placed it over the snow scene.

The team photo overlaid on the snow scene

Note that the colors of the two photos work awkwardly together, making it very obvious that the composition is made up of separate photos that have been merged together. The color tones of the team photo appear too warmly lit to have been taken outdoors on a snowy winter day. It stands out like a sore thumb. To fix this, I added a subtle gradient map overlay made up of two shades of blue (one dark, one light) at 30% opacity, and a blue-toned cooling photo filter. I also added some blue-hued shadows beneath the people, to make the combination of the two photos a little more seamless and indistinguishable.

The warm tones have been cooled to create a more seamless juxtaposition of the two photos.

Now it’s starting to look chilly! The colors appear more natural and convincing now. Next I added some dramatic lighting effects, and gave the impression of falling snow. To create a lighthearted, fun feel, I added a candy cane North Pole street sign, with the words “GA Tech” on it.

The final touches

The final step was placing the Photoshop image into InDesign and adding some cheerful holiday text!

The final holiday card

The worst nightmare of any designer or (especially) artist is to find our work online, being used commercially, without any prior consent. Fortunately, there are a few ways to track down all the places online that our work appears, so that we can take action against them.

My favorite method to trace my work being used illegally is a service that Google added to Google Images earlier this year: Google’s reverse image search.

First, go to Google Images, where you’ll see this screen. Click the camera icon, which I’ve highlighted below in red.

The Google Images that we all know and love

A new box will popup that allows you to search by image, rather than search using text as you typically would do in Google Images.

Google's new reverse image search interface

Enter in the URL of the image you wish to search the web for. In this case, I’ve used the URL for a butterfly artwork from my art site. You can also upload an image directly, if you don’t have the image online or can’t search for a URL.

Enter the image URL or upload an image

Hit search, and you’ll get a list of websites where your image appears online. You might be surprised by the results. A lot of people don’t seem to understand copyright laws and don’t recognize the fact that using somebody else’s intellectual property without permission, especially in a commercial way, is completely illegal.

Bingo! That's what we were looking for.

The nice thing about Google’s reverse image search is that it doesn’t only search for exact duplicates of your image, but for images that are very similar. So you can often find variations of your work out there where people have added some bad Photoshop bevel effects and a catchy call to action.

A modified version of the image I searched for, as used by an actual copyright violator

Earlier this week, I placed a to-go order at a restaurant. When I went to retrieve my drink from the restaurant’s beverage cooler, I looked for the cans of Coke, and couldn’t find them. I returned to the cashier and asked if they were out of Cokes, and she gave me an odd look, pointed at the cooler, and said “middle shelf.” When I looked again, I realized that the shelf of cans that I had mistaken for Diet Cokes were actually regular Cokes.

I started to think about how this could happen. Coca-Cola, as one of the most recognizable brands in the world, takes immense pride in the fact that their brands are recognizable at only a quick glimpse. That is, after all, the whole basis of the design of Diet Coke’s Spring 2011 cans (pictured to the far right above), that shows an ultra-cropped version of the Diet Coke logo; the idea being that the logo and colors are so unmistakeable that people can pick it out by seeing only small parts of it. I think the concept there is flawless, but when you think about the fact that they now share shelves with Coke’s new white can design (pictured second from the left above), it seems poorly thought out.

There’s a few reasons that I say this:

The color hierarchies are reversed

The color associated with Coke’s brand is Coke Red (which interestingly does not have a Pantone equivalent). The color associated with Diet Coke is silver. When you squint your eyes and look at the can designs above, the two that become most red-dominated are the the standard Coke can and, surprisingly, the new Diet Coke can. The two that appear to have the most silver are the two in the middle (the new Coke can and the old Diet Coke can).

In the new Coke can, the silver/white appears to be the dominant color, and the red takes a secondary role; this is the color hierarchy that most people associate with Diet Coke.

The two new can designs were introduced almost simultaneously

My point above regarding the color hierarchies doesn’t seem to give the consumer much credit. The average person purchasing a can of Coke can obviously very easily figure out that there is a new can design, and with very little thought or effort, can identify the product they were looking for. The problem is that both new can designs were introduced almost simultaneously, so any familiarity with either of the brands is lost. Singularly, I like each of the updated cans, and I think both are really beautiful designs, but the timing of the roll out seems way off.

The logos on both cans are now obscured

Where both logos before ran vertically, bottom to top, along the side of the can, both now run side to side. The logo on the new Diet Coke can, deliberately obscured by creative cropping of the logo, is now identifiable exclusively by design elements and colors, most of which it now shares with the Coke can. The old cans for both brands allowed for unobscured reading of the logo, but with the new orientation, there is no way it can be placed on a shelf that allows for unobscured reading. Particularly in the case of the new Coke can, this means it must now be recognized primarily by the can’s colors – colors that look more like the original Diet Coke can than a Coke can.

Update: I took a photo of the cans side by side on an actual store shelf to further illustrate my point. This shows just how much the new Coke cans look like Diet Coke cans.