PowerPublishing: eBay logo

First look at the ebay logo. Notice that the letters are transparent where they overlap. Some appear to be layered and sitting on top of others. We'll have to learn how to duplicate these using basic tools in Inkscape. Here's a link to the final file used in this tutorial if you'd like to look at it.

First download a copy of the logo from the ebay home page or simply right click and save the one we have on this page. Create a folder for your work and images.
Next open Inkscape and change document properties from the "file" menu. Create a custom paper size of 3in x 5in. If you want a handy reference, use the "import" menu to import the ebay logo you downloaded and you'll have a copy of it right in your window while you're working.

Your screen should now look something like this:
Now we'll work on the letter "b" as it is the lowest letter. Can you tell from looking at it that it is behind the others? In Inkscape we call this "layers." You can see the layers control on the bottom of the Inkscape window. We'll use 4 layers in this drawing, one for each letter.
To create a letter "b" select the "A" on the left menu. This tool creates and edits text objects. To change the font selection and size, use the "T" on the top menu. This is the text properties tool. I changed my font to "Arial Black" and sized the letter to 100 pts. I used the eye dropper tool to sample the shade of blue in the ebay logo and that shade of blue was transfered to the letter. You can resize the letter with the arrows on the sides. It won't be exactly the same as the official logo but close enough is good enough.
This would be a good time to save your work. Notice that Inkscape saves the file in the SVG format. SVG stands for scalable vector graphics.
Repeat the steps above and create the rest of the letters. To do this you should add a layer from the layer menu. Create one layer for each letter. You can even "rename" each layer to match the letters. Your drawing should now look like the one at the right.

There is one more step and that has to do with transparency.
To change the transparency of an object, edit it with the "fill and stroke" tools under the "Object" menu. Our goal is to create a transparent effect where the letters overlap. The problem with simply making the whole letter transparent is that it changes whole letter and not just the part overlapped.

We can solve this problem by using the "path" tools. Select both the "e" and the "b" with the arrow tool. Now use the "intersection" option under the "Paths" menu. Everything will go away except for the intersection of the two letters. Don't panic. You can still get the rest of your letters back by hitting the "undo" command under the "edit" menu. For now, let's use the eye dropper tool and match the color in our intersection area with that of the original ebay logo. Then use "ctl-c" or "copy" from the edit menu to copy this shape to the clipboard. Now use "undo" to go back to the original letters and then paste the intersection area on top from the clipboard.

For now, don't worry about the small copyright symbol. You should have a nice looking ebay logo.

Last modified: Thursday, February 21, 2008, 1:15 PM