Tuesday, April 29, 2008

GiMP University logo (2)

Just for you people who can't wait for the next tutorial, here's the final product:

And you can download my GiMP native file with all the layers still in tact here.

And here's how today's tutorial will work; I'll leave the comments open on this post, you downlaod the files, and axe me questions that you have about how I did or why I did whatever it is you see in the file itself.

I realize that's a lazy and lame way to run a tutorial, but I used only the techniques I have shown you so far to make this logo.

Fire it up.

Saturday, April 26, 2008

Template Updates

Some of you may have noticed that this blog uses Google Analytics. You'd have to be a real G33K to notice such a thing, but I know you're out there -- you use open source software.

Anyway, GA says that none of you are viewing this page on a screen which is smaller than 1024x768, so as I begin to update the template, I'm going to format it to give you more real estate in the content field -- the place where the posts show up. No sense squinting when there's 30% more of your screen to use.

Look for more over the next week.

Wednesday, April 23, 2008

Just a brief update

Hi all. I have been on the run for two weeks straight and haven't had time to update the "how to make a logo" series. Just wanted to let you know I haven't abandoned this project, and that your e-mails of encouragement have been, well, encouraging.

Will update with a real tutorial later this week.

Monday, April 7, 2008

Reciprocal Link Love

Just as a shaddout and reciprocal link love, GimpUsers.com has somehow featured this little hobby on its front page, and we love them for it -- they are the #1 feeder to this site right now.

Nice work. Thanks for noticin'.

BTW, while we're thinking about this, if you have a simple tutorial that you think will help other BEGINNER GiMP users put a good foot forward with our friend the GiMP, e-mail me your text or a link to your mocked-up text plus images, and I'll be glad to feature your contributions (with a link back to your home page) under the heading "Guest Tutorials".

Saturday, April 5, 2008

GiMP University Logo (1)

You saw some of my handiwork in a previous entry in which, I admit, I sorta violated the rules of tutorials by serving up examples of stuff that you can't really make with the tool you're allegedly demonstrating. Well, I'm about to upgrade this site with something a little more snappy than the generic "new blogger" template I'm forcing you to look at here in the beginnings of GiMP university, but to do that I need a "GiMP University" logo that doesn't make me cry when I look at it.

(BTW, one of the most frequently used search terms that get people here is "gimp make logo", so this will be one set of lessons which, apparently, people are actually looking for.)

Now, you would think that all we would have to do is go to the "Tools" dialog, drop down the "Xtns" menu, select "Logos", and choose a logo style to make our work simple and complete.

In fact, I recommend as independent study time you doing just that with the phrase "GiMP UNIVERSITY", and if you make something you're especially proud of, e-mail me a link and I'll link it here for the readers of GiMP-U to see and heckle or praise (as they are so lead).

I don't want to surprise you or anything, but making a logo is not a one-step process. And while I want you to really sort of contemplate that, I don't want to give you 6 transferable hours in Identity Marketing. What I want you to remember, however, is that a logo is like the face of whatever endeavor you're making it for. In that, it has to make a first impression, it has to win friends and influence enemies, and it has to be memorable and expressive, but not clownish.

And the first step in making a logo is thinking about type face. As we go there, keep in mind that your slithery little collection of system fonts that came with your computer is not even nearly enough interesting typography to really get rolling. Visit any of the font sites in the sidebar to get you some really cool fonts as soon as possible. (They don't pay me to say that, either)

Now, look at this image:

It is mostly not the font -- it's mostly a big red shield with a yellow wreath around it, but notice that the word "VERITAS" and the word "HARVARD" have at least two things in common:

[1] You can read them easily.

[2] The font is not more important than the actual institution.

Here's what I mean by [2]: When they designed this seal (this isn't the original seal, btw, even though it includes the original seal; it's very clever), they realized that what makes the logo important is the centuries-long tradition of Harvard. They didn't try to overpower more than 200 years of achievement with some 800-lb gorilla font. The seal needed to say "HARVARD". They could have done that like this:

Which would instead say, "scary gothic castle erected around HARVARD which is very important". And while in one sense they may mean that, (they don't take everyone, do they?) what they mean with the font the chose is something less ostentatious.

Now, my idea here is to build a GiMP University logo which, frankly, knocks off the HARVARD logo so that our logo implies to the observer, "we're the Ivy League tutorial for GiMP users". And to do that, I'm going to pick this font, which is called "Admisi Display":

See? You can read it right away, it keeps that nutty design element for the GiMP startup screen text where the "i" is lower case and the other letters are not (yes, you can fight with me about the "G"), and it doesn't complicate the rest of our work by employing a font around which the rest of the seal has to somehow conform itself.

This is completely entry-level stuff, I admit it. But GiMP university is not for snobs. It's for people trying to improve their graphics savvy, and sometimes you have to start with something as ridiculous as font selection to get anywhere at all.

More later.

Tuesday, April 1, 2008

cheesy bloggers choose .gifs

Yeah, OK: pheh upon the subject line -- and many of you have pronounced "gif" the way you would if it appeared in the word "gift", which is the way we go it in English rather than "JIF" so that the above pun actually makes sense, so enough about that.

I have Google Analytics installed on this blog just for my reference sake so that I can find out facts like this one: about 4% of the people coming here have come using search engines using the terms "transparent .gif" or some variation therein. So let's take 2 minutes and talk about .gifs, transparency, and using them on a web page.

It's a no-brainer to build a .gif file with transparency using the GiMP. (see: "GiMP", not "JIMP"; thus "GIF", not "JIF" -- "G" before "I" equals "G", not "J"). You saw an image in this geek-speak article which is GiMP-made, and also has the benefit of a transparent background.

Here's the original:

Here it is opened with the GiMP, blown up to 4 times its size so you can see pixel-level detail:

Notice something about the blow-up: there's a very faint border of white and nearly-white pixels around the edge of the image. And as long as the image is on a white or nearly-white background, it'll look fine. But watch this:

On a dark background, the border makes a very jaggy appearance. In fact, you see this problem all over the place on home-job web sites all over the internet. DON'T LET THIS HAPPEN TO YOU.

The key, it turns out, is making the border jaggies in the first place. That sounds crazy, but hear me out. What those border pixels are really doing is allowing the colors they surround to naturally fade into an edge line without distortions or jaggies, which the geeks call "anti-alias".

Yeah, well, they're geeks not poets, so cut them some slack. And before the geeks and statitsicians jump on me, I realize that's a pretty, um, imprecise paraphrase. We're talking about .gifs here, not the signal in the spatial optical domain.

So when I adapted this image from the Firefox web site, I made a decision that I was going to use it on a nearly-white background image. To maintain the illusion of layers without causing my real colors to go jaggy, I pasted the original image on a white background, flattened it out, and reselected the image. Then using my "Select" menu and a very patient approach, I selected the image in a way which allowed a simple border about one pixel wide to surround the basic image. I then cut the selection from the original sandbox image and pasted it into a new sandbox with a transparent background.

I know: "how about some sample images to guide us, cent?" I am in a little bit of a hurry here, so I'll try to add guide images later. Today you'll have to read to learn -- a lost art, I am sure, but you're smart and tough.

Lucky for you, however, that's it. Save the file as "name.gif", click "OK" a couple of times, and the file you will have saved will have a transparent outer field that will enable you to lay it on top of objects in the background of your web page.

We can talk about file size, color depth, and animation some other time.