About design

Something else to read

Since I’m not swimming in time to write stuff, here’s something else somone wrote and you should read.

In this instance, that someone is Bruce Mau, one of the most successful, prolific and indeed insightful designers of our time and the text you must not miss is his “incomplete manifesto for growth”.

Take a deep breath and read it. It should, at the very least, make you think a bit. Here’s the link.

About design

Invaluable reading

Ben Terrett of Noisy Decent Graphics has written a brilliant presentation early last October which I just stumbled upon and read to the very last syllable. You should go over there and read it yourself.

I for once like the conclusion: I’m a designer, use me better.


Pissed-off frog

I understand a brand needs to be nice and ours certainly is. Emoticons, however, need to convey… well… emotion. So I have the pleasure of being allowed to make a completely pissed-off version of the frog mascot of SAPO.

Really, it’s criminal how much fun I have sometimes.

Pissed off


Football frogs

As I continue to explore higher detailed icons, I’ve been having some fun redoing old emoticons. These are the representatives of the three main Portuguese football clubs: S.L. Benfica, Sporting C.P. and F.C. Porto. They are essentially the same frog, wearing the club colors in the shape of a scarf.

Football frogs

As with the Batman emoticon, I started out with a FreeHand drawing, imported into Photoshop as a smart object. Not much of the original vectorial is left as I redraw everything in Photoshop.

I believe in the flexibility of vectorial drawings, however, FreeHand is rather limited in what comes to gradients and so I’ve been exploring my options in Photoshop.

I know Illustrator is vastly better at gradients, with its mesh gradient tool. Sadly, my company has not bought me CS3 yet. I use the word ‘yet’ with some hope, you will notice.

About this website

WordPress 2.3 “Dexter”

Design for life has been upgraded to WordPress 2.3 “Dexter”. WP finally has a tag system!



Exploring resolution independence in Mac OS Leopard applied to emoticons. Here is the bat… frog!


Cower in a corner! Basic shape drawn using FreeHand and imported into Photoshop as a smart object for some hardcore tweaking.


Photo camera

This is when my job is really fun:

Photo camera

Photo camera, based on an old Pentax SP1000 my father had (and I’m now keeper of…). Freehand base drawing and Photoshop fiddling.

Toys and Software

Free icon editor for Windows

I have making icons for Windows, it’s always awkward and full of restrictions, but that being said, I just found a freeware application that creates Windows icons (including Vista icons), and is very nice to use.

It’s called IcoFX. I used to use Microangelo and, honestly, I find IcoFX easier to use and more powerful as it does a superb job of creating 16 color icons from 24-bit originals.

In Microangelo I always spent a bit dabbing around the 16 color versions to make them slightly more readable, but in IcoFX I hardly had to touch anything up.

Well worth a try, if you have to make an icon for Windows.

About design

A bit about typography

I stumbled upon this great kinetic typography video about… well… typography. It’s a beautiful thing:


Glossy “web 2.0” button Photoshop tutorial

Glossy buttons are still all the rage. Actually, anything that has a gloss on it will look cool, especially if you add a little reflexion to it.

I’ve seen a fair share of tutorials on this and I still think I may have a bit to add, from my own experience. So, to add a little extra something, here’s a glossy button Photoshop tutorial that’s really easy to do, uses only one layer with effects and even nicer: it allows you to quickly change the color of the button.

Here we go. Start by creating an empyt RGB 72 dpi file, I chose a 400×400 px working area, filled with white:

Open a new 400×400 document

Then, hit your rounded rectangle tool (U, or shift+U to cycle through the various shape tools), and give it a 20 px radius.

Choose the rounded rectangle tool with 20px radius

Time to draw your button shape. Pick a foreground colour and draw the button.

I used blue, #4F6F9E for the colour and 250×96 px for the button size. It’s quite a big button, but you can make smaller ones with the same effect.

Create your button shape

OK, now the fun part. Double-click on the right-hand side of the name of your shape 1 layer to access your layer effects. (Sorry, the screenshot says “right-click”, its a mistake, I’ll fix it asap).

Access the layer FX

Go to “drop shadow” and configure it like the image below. We’ll use a 90 degree shadow. I hate seeing those glossy buttons with a top glow and an oblique shadow: makes no sense. Remember to try to make sense. Where’s your light source? Above? Good, then shadow goes in the bottom.

Set your drop shadow

So far, it’ll look unimpressive:

Not quite glossy yet…

So go to gradient overlay to really lay down some gloss on this baby.

You’re going to want to click on whatever gradient is there by default, to edit that and replace it with this:

Your brand new gradient overlay.

Now, that’s a bit hard to make out, so here it goes: You need five markers on top (the alpha settings), and five on the bottom (the colour settings). By default, Photoshop will have a black to white gradient on there, so add three markers on top and three on the bottom.

Then, click on each marker and modify its values, thusly:

Alpha markers:

  1. opacity: 90%; location: 0%
  2. opacity: 40%; location: 46%
  3. opacity: 0%; location: 47%
  4. opacity: 95%; location: 86%
  5. opacity: 95%; location: 100%

Colour markers:

  1. colour: white; location: 0%
  2. colour: white; location: 46%
  3. colour: black; location: 47%
  4. colour: black; location: 86%
  5. colour: black; location: 100%

That’s it, you can hit ok and get ready to mess with the overlay settings, like so:

Adjust overlay settings

Notice the important bit: blend mode is set to overlay; this will allow you to change the colour of your button with lots of flexibility. Only a few colours won’t work at all. You can also design the whole gradient in reverse and not have to hit “reverse”, but I like it the hard way 🙂

Right! All that work payed off, because now you should have this:


That could be it, but a stroke adds a bit of solidity to it, so go into the layer fx, activate the stroke option and change it around like this:

Stroke it

Notice the red circle? That’s where you should pick the colour for your stroke from. More or less 1/4 of the way up the button you just created.

And that’s it. You can add some text to it. I’ve added the word “gloss”, using “Calibri”, changed the fill alpha to around 80%, added a 2px stroke the same colour as the button’s and a 1px distance 2px size inner shadow.


And what’s better… if you double click the colour swatch on your button shape, you can now happily change the button’s colour and alll you have to do is adjust the stroke’s colour in the end (that’s easy: just pick from 1/4 of the way up the button).

Double click the swatch to change the colour.

Here are a few examples. Have fun!

Lots of colour!