Nick La has gathered some very nice Single-Page Portfolio Sites at his Web Designer Wall. Some interesting concepts and a lot of high end use of web dev techniques. I personally love We Bleed Design for its fancy PNG effects and Fröjd for its simplicity.

Then, there is the Reverse Graffiti Project. If you don’t know what reverse graffiti is, go and have a look at the video. Incredible!

For those of you who haven’t heard this already: NASA has their photos online on a new website called NASA Images (you would have guessed) powered by Internet Archive. If you’re not into astronomy, you will still like the trippy images anyway…

And finally, especially for my students, there’s the Opera Web Standards Curriculum, “a complete course to teach you standards-based web development, including HTML, CSS, design principles and background theory, and JavaScript basics.”

Well, isn’t there something here for everyone of you?

Required knowledge: Photoshop basic level

The images we will need for this tutorial are a photo of a Powerbook keyboard (see below) and a PSD file containing the phonetic characters.

Original Powerbook Keyboard

Step 1 – Deleting the characters on the original keyboard

For this, we will use the Healing Brush Tool or the Patch Tool. It is just a matter of personal taste. I’m in favour of these tools because the Clone Stamp Tool will eventually do the same trick, but it’s harder to get the brightness right. The disadvantage of the Healing Brush is that it work destructively, meaning that the original pixels will be lost. So, here are the details for Step 1:

Deleting the original characters

1. Copy the original layer (its the background layer) containing the Powerbook keyboard photo – we do this because the tool is destructive and we will need the original layer for reference later on.
2. Zoom in to, let’s say, the F and select the Healing Brush.
3. Select the area you want to clone by pressing the ALT key and clicking in the area.
4. Clone the area over the F by using the tool like a normal brush. Make sure you use enough space around the characters to avoid extreme results. Note that the Healing Brush automatically adjusts the brightness of the original area to the brightness values of the surrounding pixels in the target area.
5. Repeat this with all characters on the keyboard. I have deleted everything but the numbers. Just do whatever you like.

Step 2 – Affixing the phonetic symbols

I have provided a .psd file containing the phonetic symbols, each on a seperate layer, all in one layer set, roughly arranged into the position on the keyboard. You can choose other characters as well, but please be aware that later on you need to rasterize the type layers to apply the Gaussian Blur – but this is two steps ahead… What we will do is to get the symbols into the right perspective, so that it seems as if they are actually printed on the keys.

The details for Step 2:

Placing the characters

Adjusting the characters

• Drag the layer set of the symbol file into our keyboard file. Drag the set in the keyboard file to a position which lets you see all symbols.
• We need a reference for the perspective, so we will toggle the layer visibility of the Background Copy layer to off, so that the original layer with its characters is visible. These characters will lead the way to perspective.
• We can now use the Free Transformation Tool to distort the symbols into perspective. To do so, activate the tool, then press CTRL and drag the corners of the transformation frame. Take the corners of the original characters as reference for perspective.
• Repeat this for the rest of the symbols.

Step 3 – Fine Tuning

We will adjust the blending mode for the symbol layers to make the symbols look like they are really printed on the keys. A different blending mode will result in the structure of a key to shine through the symbol. Finally, the Gaussian Blur filter will help us to adjust the symbols to the surrounding unsharp areas.

In detail:

Fine Tuning

• For a symbol layer, select Overlay as blending mode. You will see that it adjusts the symbol nicely to the surrounding area.
• Choose the filter Blur > Gaussian Blur to adjust the blur of each character. The values are subject to trying it out and judging from the surrounding area once more. I’ve started with 0.5 for the areas with the highest sharpness and went on to 2.0 for the symbols in the back. You might want to choose a different value for each symbol to be as precise as possible and enhance the depth effect.

You can have a look at the final result below to see my version of the linguistic keyboard.

Final Version of the Phonetic Keyboard

This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Germany License.