KDE Artwork Tutorials

This handbook contains various tutorials that could be helpful when creating artwork for KDE.

Changing the konqi logout image.

We received an email from someone wanting to change the default log out image of konqi snoozing on the moon. So I put this together for others interested in changing the log out image.
Step one - edit the image and save:

Open an image editor of your choice. Open the file you want to replace the log out image with. Crop it or scale it to the height and width you would like it to appear in the log out dialog. To keep it the same size as the existing image you will want it to be 188 px by 300 px.

Save it as shutdownkonq.png

(If editing is not needed simply rename the image of your choice shutdownkonq.png.You can do this in Konqueror by clicking the right mouse button on the image you would like to use and selecting rename from the dropdown menu.)

Step two - replace the existing image:

Open a *root Konqueror session browse to the directory where you saved the image and copy it. Now browse to the following in the location bar /usr/share/apps/ksmserver/pics/ paste your image in this folder. A pop up dialog will appear titled "File Already Exists" left click on the button that says "Overwrite". If a dialog pops up that saying "Access Denied" you are not running a root session of konqueror.

 Step three - give it a test:

Click on the log out selection from the menu or from a right mouse button click on the desktop. The new image should be in place.

*Running any program as root is a security risk and should be done so for the least amount of time as possible.

**Thanks goes out to grahl for the input on this tutorial.

Creating a SuperKaramba desklet.

Themes in SuperKaramba consist of two parts:  
1. A .theme file that defines the shape and size of the theme, and possibly many other things.  
 

Basic Instructions for creating the .theme file.

 
2. A .py file that adds interactivity to the theme. Basically, whenever
an event happens, such as the user clicking the mouse on your theme, a
function is called in your python script to let you react to the event.
 
Basic Instructions for writing the .py file.

Quick Links:

  • Callbacks that must be defined in your python script
  • API, a list of functions you can call from your python script
  • Using DCOP in your python script

Here is a very basic example script. It does not do anything. But it defines the required callbacks so you can use this as a starting pointfor editing. You will need to rename it mytheme.py where mytheme is the
name of your matching .theme file. For example, if you created
cool.theme, you would rename this to cool.py and then load cool.theme
in SuperKaramba.
Download template.py
 
 The best examples to learn from are other peoples themes! Download some to learn how

other people created their .py files.

Icon Bootcamp.

Want to learn to draw icons? Enlist in Icon Boot Camp!

FIRST ASSIGNMENT

Make an icon for an application to wash a car (or any other

application). Here is the specification: it has to be a 2D pixel image,

size 32x32 pixels, in black and white on a transparent background.

Black and white icons are hard to make, you can not use colors to set

objects apart. You will have to keep it 2D. Making a black and white

icon may be the most valueable learning expercience you ever get (in

the icon field...). For pixel images you can for instance use the GIMP.

Ready? Save the image as a png.

Next step. Scale the image to 16x16; scaling goes better after indexing

(Gimp: image - indexed - black/white palette) . It will need repair

now. Repair it and save it under a new name. Does it look the same as

the 32x32 icon? Of course the bigger icon can have more detail. But

overall the icons have to look the same. May be you have to simplify

the bigger icon a bit to make it possible to scale it down. Play with

it till you have Visual Consistency. You will have noticed that every

pixels counts, especially in the 16x16 icon. Making black and white

icons really learns you to Keep It Simple.

Optional: add color to your icon. You will now have a 2D color icon.

This is the way in the old days the MacOS icons were made. First black

and white, then color. It results in visual consistency between black

and white icons and color icons. Since that time icons grew bigger,

became full color. With full color the artist can add gradients,

suggest 3D. Never there will be visual consistency again between black

and white icons and color ones... Icons became more beautiful, but not

more effective.

 

SECOND ASSIGNMENT

Make a new icon, 32x32, 3D, full color. Keep a 1 pixel transparent

border around your drawing. Then make the 16x16 icon, also with

transparent border, and work on both till you have visual consistency.

There are tricks to use, like sharpen, but first try it pixel by pixel.

Can you beat the tricks?

Take a look at the 16 icon. How many major objects does it have? (fi

car, bucket, brush) How many sub-objects does the biggest major object

have? (fi car: body, 2 wheels, 2 windows) How many sub-objects does the

smallest major object have? How big are these sub-objects, how many

pixels do they use? Is the count the same for the 32 icon?

You now have an idea about how many objects and sub-objects an icon can have.

Still got the 1 pixel border? Now add a black outline to both icons.

How do you like them best - with or without outline? Should the outline

be aliased or anti-aliased? Do you allow semi-transparent pixels

outside the outline? What happens with an icon with outline if you

scale it?

 

THIRD ASSIGNMENT

Redesign the icon as a vector icon, for instance in Sodipodi. You can

use the 128x128 size many artists use. Do not use an outline. Do keep

in mind the icon will have to be exported to the 16x16 size too. You

already know how many objects and sub-objects an icon can have... Do

not start to paint landscapes full of details. Use the same simple

objects you drew before, KISS...

Export the icon as 16x16, 22x22, 32x32 and 128x128 png icons. Do you

have Visual Consistency? You can not leave scaling to very small sizes

to applications, since every pixel counts at small sizes. You can

hand-optimize the 16 and 22 icons with the GIMP, as you did before.

Now you will have 3 images that matter: a svg vector icon, and 16x16

and 22x22 png icons. With the svg icon the bigger sizes can be rendered.

It was a pleasure to have you in boot camp. Say after me: "I will always keep it Simple, I will KISS my way through live."

 

We declare you Icon-Master.

(This is an excerpt from the Icon Guide on wiki.kde.org.)

Kipi Plugins tutorial: libkipi

http://developer.kde.org/documentation/library/3.5-api/extragear-libs-apidocs/libkipi/html/index.html

This page will tell you both how to develop a new plugin for KIPI, and how to add KIPI support to a new application (referred to as host application).