I (and many others) have been pretty harsh on the new gradient and transparent logos that have been released in the last couple years by the major branding firms. While I’m still not a big fan, I thought it would be interesting to take a look at how these major brands (and the branding firms that represent them) are creating the end files. All of the logos I am looking at are in some way downloadable off the internet without a subscription. I pulled a few off of PDFs, but most of them are from an original logo file. While I am making some assumptions about how these files were created, please pipe up and let me know if you know better than I. I certainly have not created these types of logos on such a large scale. So… I’ll just jump right in. Warning: Some serious geekey, production details follow. If you don’t work on a computer or are not a designer, none of the following will make much sense.

So lets look at the at&t logo. One thing I found a little strange is that when I opened the at&t logo file, it opened in Illustator (it was saved as an .ai file) in RGB preview mode. This file does not have any native Illustrator or Freehand gradients. It appears that all of the gradients have been converted to stepped shapes. This would probably be the best way to create the file, so that the designer can control the banding (or lack of), instead of the output software. While there are different ways to convert a gradient to shapes within Illustrator, I couldn’t duplicate the way it was created by the “expand” option or by using the blend option. I have assumed from the beginning that this logo was originally created in a 3-D software program, and maybe this is further evidence of that. Please set me straight if you know.

The ups logo was taken from a downloaded PDF so this might not be the best representation of how the final logo file was produced, but it still sheds some light on how it was created. Like the at&t logo, the ups logo didn’t have any native Illustrator gradients, but they were created in a different way. All of the ups gradients were created as embedded graphics. All-in-all there were only four gradient graphics that were embedded. Other than the four main gradients, the rest of the 3-D look was created with various tinted shapes.

The DC Comics logo is the only one of all the reviewed logos that uses the native gradient in Illustrator. There are really only three major gradients in this logo, so maybe they won’t experience any banding problems when taken to press. I also assume that this file won’t be as widely distributed as the ups and at&t logos. On a nit-picky level, I am curious as to why there are hundreds of anchor points in part of the dark blue swoosh at the bottom and left side. The rest of the shapes are clean, but that portion has an unnecessary amount of points on the path. It is also interesting to see how the designer worked with some of the overlapping shapes.

The Dr Pepper logo gradients are embedded and masked in the file as well. They aren’t exactly traditional gradients, but bitmapped translations. This gradient effect (or dither in this case) reminds me of the “Dissolve” layer effect in Photoshop. By using this effect for the transition, there are no screened colors and banding to deal with. There was a total of 4 embedded graphics in the file. I assume when you are working with the high production and specified methods of the soft drink industry, there are a high level of requirements that need to be followed.

The Dr Pepper logo weighs in the heaviest of those here at 1.6 MB alone and 2.8 with the background. The Dr Pepper logo was saved as an .eps. One curious point of this logo is that there is still a little evidence of the original creator of the file. If you look at the embedded file information, it shows that “Ovalgradient.tif” was originally linked to Station 7, which is apparently Pamela’s computer (or maybe the file was accidentally linked from the designer’s Pamela Anderson pics folder on his desktop).

The Microsoft Dynamics logo file was actually saved as a PDF. I’m sure there are benefits to the PDF logo, but I rarely see large corporations offer their high-res logo files in anything other than .ai or .eps. I actually encountered a “unknown shading type” warning when I opened this file in Illustrator, but I can’t tell what the problem was. This had by far the most embedded files in it, topping out at over 50. Somehow the file size came in the lowest at 132 KB. Maybe the file size is the reason for saving the PDF. This logo was a complex mix of masked-off embedded graphics.

I tried to find a vector version of the full color Quark logo, but I was unable to locate one. I opened a Quark brand guidelines PDF in Illustrator, but the entire logo mark was an embedded graphic. My guess is that full-fledged Quark logo is always an embedded graphic and that there isn’t a vector version of the logo.

It was interesting to see the various ways that designers deal with transparencies and gradients in logos. Wether you think logos should always be made out of flat colors or not, it is still helpful to know how others produce their creations.

UPDATE! 9-9-06

Thanks to Armin, I now have an actual .ai file for the UPS logo. At least I was accurate in my statement that what I was looking at for the UPS logo “might not be the best representation of how the final logo file was produced.” Like Armin mentioned in the comments below, this UPS logo used a mix of Illustrator mesh gradients and traditional gradients to create the 3D effect. The actual “ups” letters were created with a radial gradient while the two large badge shapes were created with the mesh tool. Some of the bevels had a linear gradient in them and the others were created with solid color. It is hard to deny that it was created effectively for 4-color production.

On a side note: I thought the non-filled and converted-to-paths below 1” text was interesting. Does anyone know what this means? Is this logo file not supposed to be used below 1 inch or is it only supposed to be used when it is at 1 inch or below? Or does that mean something completely different?

Here are a few screen captures.

Comments (27)

Andrew said:

I’ve always hated quark for it’s branding problems. they don’t seem to have any consistancy to their identity and it bugs me. But even browsing through Brands of the World (not sure if you’ve been before?), all of the Quark logos were flat colored shapes. Can’t imagine why the actual logo isn’t present on the site. Geeze that logos’ annoying:

http://brandsoftheworld.com/search/?queryid=313461&page=1&mtype=&brandid=147739

Posted on September 6, 2006

Adrian said:

I was surprised to see the at&t logo was vector based. The shapes seem so unrefined to my eye that I didn’t think it could possibly be an accurate drawing of an actual 3d object. After seeing some animations of the logo however, it seems undeniable that it exists in a 3d program. Do you think the logo was actually created in 3d first? Do you think that could be a trend, to use 3d software as a logo design tool? That is a scary thought.

Ben said:

Looks like the at&t logo was created with Illustrator’s 3D features. When “expanded” it looks just like the image above.

Jeremy said:

I’m pretty sure the embedded graphic files in the UPS and Microsoft Dynamics logos are the result of the compression used when exporting the PDF, rather than being part of the creative process.

Try making several shapes (or outlining some type) and fill it with a gradient. Save as a PDF with “Preserve Illustrator Editing Capabilities” unchecked, then re-open it in Illustrator to see what I mean.

Bennett said:

Ben, Help me out here. I haven’t used the Illustrator 3D filter all that much. What settings are you using to create a sphere? I’ve tried several different ways, and nothing gives me a very convincing sphere. When I do get close to a sphere and then expand it, the translation looks nothing like what the at&t logo looks like.

BlueKDesign said:

Try opening the EPS or AI files in a text editor to see what application created the files.

Jeremy, Interesting, but I am unable to reproduce the same results as I see in the Dynamics and UPS logo. Maybe I just don’t have the correct settings. I tried saving and reopening, with the “Preserve Illustrator Editing Capabilities” unchecked, but when I reopen the file, none of the gradients that I created appear in the links palette. They are definitely different from what I created, but they don’t appear as embedded graphics. Another thought … Would Illustrator create a shaped gradient like this one in the ups logo. If only I had an original ups .ai or .eps file to dissect.

BlueKDesign, Thanks, I just tried it, and it appears that all of the eps and ai files were created in some version of Illustrator as far as I can tell. Here is some of the code from the at&t logo file.

%PDF-1.4 %‚„œ”1 0 obj> endobj 2 0 obj> endobj 5 0 obj>/ArtBox[282.288 130.597 510.277 481.821]/MediaBox[0.0 0.0 792.0 612.0]/Thumb 23 0 R/TrimBox[0.0 0.0 792.0 612.0]/Resources>/Properties>>>/ExtGState>>>/Type/Page/LastModified(D:20051204084922-04’00’)>> endobj 6 0 obj> endobj 7 0 obj> endobj 8 0 obj>stream %!PS-Adobe-3.0

%%Creator: Adobe Illustrator(R) 12.0

%%AI8_CreatorVersion: 12.0.1

%%For: (A. N.) (Insider)

%%Title: (Untitled-1)

%%CreationDate: 12/4/2005 8:49 AM

%%BoundingBox: 282 130 511 482 %%HiResBoundingBox: 282.2881 130.5967 510.2773 481.8208

%%DocumentProcessColors: Cyan Magenta Yellow Black %AI5_FileFormat 8.0

Joe Moran said:

I still use Freehand ( which can make a contour gradient fill that is really cool on maps and other “natural” shapes).

But I really don’t understand all these Illustrator terms. Does that make me some lesser form of “geek” than everyone else posting here? God help me.

Geekfully,

Draw a half circle (cut vertically through the middle) and use the 3D->Revolve function (mess with the “more options” and “preview” checked to create a sphere like at&t’s. Expand that and it will give a similar result.

The at&t logo simply maps the blue stripes (clicking on “map art” and loading a pre-created “symbol” of the stripes) on to the sphere before expanding the artwork.

Tom said:

I wonder if the expanded 3d method used on at&t was actually laziness, rather than banding control? - it would take some time to reproduce the lighting accurately with genuine gradients.

Take a look at the 3 logo for some nice use of the gradient mesh and blend tools: http://www.brandsoftheworld.com/search/?queryid=378353&page=1&mtype=15&brandid=65858

Posted on September 7, 2006

Nate Voss said:

Bravo! This is the kind of investagatory journalism I like to see!

I would counter Tom’s commennt about laziness with “efficiency.” It would indeed take forever to use basic gradients to recreate that effect on at&t’s trademark. If there is a simple and effective way to control it when you’re moving from design to production, it would be foolish to do otherwise. But of course, 90% of that logo is an exercise in foolishness to begin with…

Troy Kadavy said:

I was looking over the AT&T logo and if you had not have mentioned that is was saved as an .ai I would have said that it was a native Freehand file. I’ve experienced some of the same issues when opening an .eps created in freehand in the new version of Illustrator.

As for the DC comic logo. I can only guess that it’s again partly because of how it was saved to .pdf rather than the original file format. An earlier version (5.0 for compatibility) might not save out as clean as say 7.0.

That’s my two bits. :)

Joe, Don’t feel bad, I’m not sure I even understand what I am saying.

Ben, I hadn’t tried your method, but I am still unconvinced that this logo was created using Illustrators 3D filter. Although it is closer to the at&t logo, it still doesn’t match up when the expand happens. I also couldn’t find a quick and easy way to get the globe to be transparent in Illustrator. After I made a few quick shapes to map on the artwork, made the angle of the globe similar and exited the 3D dialog windows, I went ahead and used the expand option under the object menu. First off, the steps used to make the gradient seem to be more complex than those in the at&t logo. Second, the expand option doesn’t convert the blue mapped artwork to flat shapes. It seems to be multiplied over the converted globe. The points along the spheres also seem much more random when they are created in Illustrator. This is getting difficult to explain. Anyway, here is my quick example next to the at&t logo.

Tom, Your link didn’t send me to a specific logo. Was it supposed to?

Troy, The DC Comics logo was saved as an AI file not a PDF. I’ve also never seen a PDF create that many random points along a smooth path.

Sorry seems to be some sort of dynamic link, I should have checked it.

Here’s what I was getting at: http://www.brandsoftheworld.com/brands/0013/7505/ATandT.ai

As far as I know, you can’t make parts of a 3D object transparent in Illustrator, it would have to be done manually, which doesn’t look like the case here.

I’d say it was created using 3D software, then exported using something like Swift3D (http://www.erain.com/products/plug-ins/)

Posted on September 8, 2006

Armin said:

The ups logo was taken from a downloaded PDF so this might not be the best representation of how the final logo file was produced,

Correct. It is not the best representation. I have a copy of the UPS logo at home and I’ve been meaning to unarchive it but haven’t gotten around to it. The first time I opened the logo I was surprised at how well executed it was. It’s all done with the gradient and mesh tools of Illustrator using a number of PMS colors. While these logos are baffling to look at, they are very well put together – IF you are looking at the original and not at something pulled from a PDF.

err, URL didn’t work again, let’s try this one: at&t logo on The Best Brands Of The World

Armin, I would love to see that. Thanks for the insight. I has been very interesting to see how all of these were created.

So they used the gradient mesh tool. I haven’t really used the mesh tool since version 10, since it converts all of your spot colors to process. It appears that is still does. I’m guessing when a designer creates a 3D mark like the UPS logo, there isn’t much concern for making sure they are separatable spot colors. If the Adobe Illustrator team could just get the gradient mesh tool to not convert spot colors to CMYK and also have a mixed ink option like InDesign, life would be so much easier. Maybe too easy.

Nate said:

One possibility for why the DC Comics logo has so many anchor points is that the curve was created using Illustrator’s Trace feature.

With a little help from Armin, I have added an update at the bottom of the post about the UPS logo.

Posted on September 9, 2006

Kyle said:

Armin and Bennett, thanks for sharing the UPS logo. That’s very interesting to see. I had assumed, until now, that it was raster, just because I didn’t like it.

Posted on September 14, 2006

popak said:

The abundance of points in the DC logo is due to the pathfinding tool. I’ve encountered this on several occasions when cutting out new shapes. It’s truly annoying sometimes.

Posted on September 23, 2006

q13 said:

The file on first image was made in Corel Draw. I’ve had a similar problem.

Posted on December 1, 2006

Faran said:

Anybody can give me a brief tutorial on AT&T logo (how to make it) please?

Posted on December 15, 2006

netsirk007 said:

Here is a brief tutorial for the 3d revolve feature on the Adobe website. Go down to the revolved object section. Pretty cool.

http://www.adobe.com/designcenter/illustrator/articles/illcs2mr3d.html

Posted on December 18, 2006

Marian said:

Hi,

Is it possible to see the .ai file? It looks complicated to me but maybe if I see the actual file I can work out how they have created that effect.

Thanks, M

Posted on March 13, 2008

parallax said:

coreldraw does not export gradients into other vector formats but instead produces something similar to the at&t logo above.

the at&t logo can’t be vector rendered 3d, the inner (backside) bands would produce a different gradient pattern.

Posted on March 14, 2008

Will Danger said:

Any chance I could get a copy of that UPS gradient logo?

Posted on March 18, 2008

Be A Design Group

Be A Design Group

BE A DESIGN GROUP is an invitation to all people to participate in design. It is a place where designers can test new ideas, share observations, and comment on cultural trends. Our definition of design is intentionally broad so that the subject matter of our posts can be diverse and unlimited.

Dissecting Gradient & Transparent Logos

by Bennett Holzworth, (27 comments)

Sponsored by:

Comments (27)

Andrew said:

Adrian said:

Ben said:

Jeremy said:

Bennett said:

BlueKDesign said:

Bennett said:

Joe Moran said:

Ben said:

Tom said:

Nate Voss said:

Troy Kadavy said:

Bennett said:

Tom said:

Armin said:

Tom said:

Bennett said:

Nate said:

Bennett said:

Kyle said:

popak said:

q13 said:

Faran said:

netsirk007 said:

Marian said:

parallax said:

Will Danger said:

Post a comment