Learn and Discover Open Source with Daily Genuine Experience. From Coding, Design, Package Management Tweak to Desktop Customization.
 
   

Tutor Three: Flat Design, Minimalist PNG Button

Unified Graphic Material

This is the Inkscape Part.

Inkscape Document

SVG source available at:

Get the SVG

You may make from scratch or get my tutor-03-button.svg from my dotfiles repository at github.

Slices

Before you begin this the slices that we want to achieve.

xfwm4 Theme: Tutor 03 - Slices Preview

Border

I won’t give much explanation. We’re already have border tutorial in previous article.

We are using 10px border for this theme. Additionaly, the top has 14px height. 10px solid, with additional 4px empty space.

xfwm4 Theme: Tutor 03 - Border Preview

Just export each PNG boxes and test the theme border.

Button

There are some window buttons, in my themerc, my layout is:

button_layout=O|TSHMC

Let me explain with my own window understanding, or better, with target save button

  • S : shade

  • St : shade-toggled

  • H : hide

  • M : maximize

  • Mt : maximize-toggled (restore)

  • C : close

  • T : stick

  • Tt : stick-toggled

  • O : menu

Each button has states:

  • active

  • inactive

  • prelight (hover)

  • pressed

So we can have a complete button name, for example for close button such as

  • close-active.png

  • close-inactive.png

  • close-prelight.png

  • close-pressed.png

xfwm4 Theme: Tutor 03 - Button Preview

Note that border only have two states [active, inactive], and do not have the other two state [prelight, pressed].

Detail

Each box button has the size of [W*H = 20px * 14px]. You can clone my example, or you have your own creation.

I’m using goggle material color: red100, red300, red500, red700, red900. You can use other color as well such as: blue100, blue300, blue500, blue700, blue900. Or other color combination, as you desire.

xfwm4 Theme: Tutor 03 - Detail Guidance


Minimalist Theme

This is the XFWM Part.

Result

Now, we already have our preview.

xfwm4 Theme: Tutor 03 - Active Window

Usability

The issue with minimalist color is that, it is good in aestethic issue, but lack of functional aspect. In order to solve this usability issue, I put functional icon on keypressed, such as the x icon for close. So that user won’t click the wrong button.

xfwm4 Theme: Tutor 03 - Usability Issue


2bmat Minimalist Theme

For my own exercise , I make this 2bmat minimalist theme.

SVG Source

SVG source available at:

Slices

xfwm4 Theme: 2bmat Slices

Preview

xfwm4 Theme: 2bmat Preview


xfgaps Minimalist Theme

I also make this xfgaps minimalist theme, that is very suitable for tiling.

SVG Source

SVG source available at:

Slices

xfwm4 Theme: xfgaps Slices

Preview

xfwm4 Theme: xfgaps Preview


What’s Next

Tutor Four, PNG Gradient over XPM. Making a more serious theme. Consider finish reading [ Part Four ].


Epsi Nurwijayadi bio photo
By Epsi Nurwijayadi