Table of Content
Tutor Four: PNG Fancy Icon
This work, inspired by
ArchEdgeUI. As my admiration, and respect, to his excellent taste in design.
My work is not as good as the original one. I avoid copyleft/copyright fraud. That’s why, I changed the icon looks.
Unified Graphic Material
This is the Inkscape Part.
SVG source available at:
Get the SVG
You may make from scratch or get my
tutor-05-button.svg from my dotfiles repository at github.
Before you begin this the slices that we want to achieve.
I utilize some more layers, we are going to build this step by step.
We are using, only 5px border for this theme. Except, the top has 24px height.
This is also the Inkscape Part.
Border related, and button background, placed in
Size and Color
We are using, only 5px border for this theme. Except, the top has 24px height. All the buttons also have 24px height. And the title only have 16px height.
top, button: 24px
title: 16px solid, plus 8px empty space above.
menu: no export
5px: left, right
32px: most box button has this size [hide, maximize, maximize-toggle, stick, stick-toggle].
56px: tab separator has this size [shade, shade-toggle, close]
active: grey200 (#eeeeeeff)
inactive: grey400 (#e0e0e0ff)
You can easily turn this layer to XPM, if you want to.
This is still also the Inkscape Part.
Size: W*H = 32px * 24px. most box button has this size [hide, maximize, maximize-toggle, stick, stick-toggle].
Size: W*H = 56px * 24px. tab separator has this size [shade, shade-toggle, close]
Colors: Using Google Material: Green. Except close button that use Red.
You may have different specification, to suit your needs.
We are going to make a uniform shape for each button.
Hence, any button layout is fine.
themerc, you can use
There are four details, this is just one example, other button might have different size and color.
- layer icon: icon of 16 px width, with grey400 color
- layer icon: icon of 16 px width, with grey700 color
layer icon: icon of 16 px width, with white and grey300 color
layer button: triangle icon of 32 px width with red300 color
Pressed, give a little animation.
layer icon: icon of 20 px width, with white and grey300 color
layer button: triangle icon of 32 px width with red700 color
Hint: Use Inkscape’s Batch Export, to export all shapes at once.
This is a tricky part.
Consider set these layers before export:
Locked: icon, icon-border, button, border
Now the tricky part, for each border box parts.
We must select the box first in
so we can have the export target filename such as
Then we have to hide the
frame layer, because we want empty space as transparent.
The next thing to do is to click the export button to export PNG.
frame layer, to select other box.
This is the XFWM Part.
This is the required
themerc for this theme.
Optionally, You may set font size
0 to hide title.
Now, we already have our preview.
ArchEdgeUGM, based on ArchEdgeUI.
I also make this
xftab clone theme, that is very similar with original
SVG source available at:
After all, this all up to your imagination and creativity to create a goodlooking theme.
I think it is finished by now.
Thank you for reading.