Shop Mobile More Submit  Join Login

F2ktuto by slowboyfast

Read other parts:

Composition & Graphics

   In this part, you'll learn the basics of foobar graphic coding. You may think "graphic coding" sounds like something serious and hard, but once you've learned it, it'll be as easy as writing a DA Journal.
This part will focus mainly on using CUI (ColumnsUI), PSS (Panel Stack Splitter) and ELP (ELPlaylist).


  • Maths - most drawing functions use coordinates, lengths, widths and other scary stuff. It's mandatory to have at least basic knowledge of maths (adding, substracting, dividing).
  • Full set of components - your theme is what you want it to be. Make sure you have all addons you want to use.
  • Graphic editing software - it's completely optional but handy when there's no other possibility to draw an element.
  • Large amount of free time - draw it, test it, correct it, repeat!

Ready, set, theme!

1. Compose

   Your project should start like any other big thing. You may want to hop right in into skinning but what if all of your work will go into something that won't work. It's always good to start drawing your idea on paper. Try to make a mockup in Photoshop or Gimp. Experiment with colors and layouts. Make something that is good looking and easy to use.

I'm always starting with a messy sketch:Brainstorm by slowboyfast

And it helps me with achieving results like this:
Wip by slowboyfast

2. Draw

   Ok, so you've got your plan clear in your head, sketched and prepared. I'm also assuming that you're familiar with Markkoenig's tutorial part 1. Now it's time to draw stuff. There are some basic functions you need to know:

  1. $drawrect - draws rectangles and lines
  2. $drawroundrect - draws rounded rectangles (my favorite for making buttons)
  3. $gradientrect - draws gradients
  4. $drawblurrect - draws blurry rectangles (useful for making shadows/glows)
  5. $drawellipse - draws ellipses
  6. $drawtriangle - draws triangles
It's worth noting that each function consists of coordinates, height & width values, color values and special arguments. They work in both ELPlaylist and PSS.

1. $drawrect
As I stated earlier, it's used for drawing rectangles and lines. It's pretty much the most essential function.
String for $drawrect looks like this:
In example, if we want to draw horizontal line, we should write:


And it will draw a red line on coords 50(X), 50(Y), which will be 300px long and 1px wide.Redline by slowboyfast

If we want to draw a rectangle, we can just modify the width of our first line and move it a little to the bottom.

It will draw a rectangle on coords 50(X), 70(Y). It'll be 300px long and 10px wide.

Redrect by slowboyfast

Ok, let's draw vertical line this time. We should change the X coord to, let's say, 360(X). This way our new line will stay visible. We should also change the color for good measure.

And look, our blue line is here!
Blueline by slowboyfast

2. $drawroundrect
Well, it should be obvious, it's used for drawing rectangles with rounded corners :)
String for this function looks like this:
Now, we need some math. Degree of roundness is defined by R1 and R2. To achieve nice looking rounded corners you should remember that WIDTH should always be greater than 4*R1 and HEIGHT should always be greater than 4*R2.

Okay, enough with maths, let's draw ourselves a nice roundrect.

And here it is, a small rounded rectangle. Notice that our width (100) is greater than R1 (3*4=12). Same thing goes for height (20) which is greater than R2 (3*4=12).
Roundrect by slowboyfast

. $gradientrect
Next thing is gradientrect. And it draws, guess what, gradients!

Now lets draw two of them, just to show people how amazing gradients are.
First gradient will be a horizontal one. To achieve this, we gonna write our string like this (with "horizontal" argument):
Second one should be vetical. Small modification of X and Y coords, maybe a slight change in the color. We should also add "vertical" as an argument.

Amazing gradients!
Gradients by slowboyfast

4. $drawblurrect
Nothing much to say about this one. Draws blurred rectangles. Ideal for glowing stuff or shadows.
We can control amount of blur by modifying BLUR STRENGTH argument (1 - weak blur, 7 - strong blur)

Let's draw some blurry things, shall we? First one will be level 1 blurred rectangle, second will get level 7 blur.

Few small changes in coords and color and here they are. Blurrects!
Blur by slowboyfast

5. $drawellpise
Another self explanatory function which draws ellipses :) String looks like this:

Let's play with this one. By modifying WIDTH and HEIGHT we can make perfect circles or stretched ellipses.
First one will be a perfect circle. Move it a little to the bottom and make sure WIDTH and HEIGHT are equal.
Second one will be stretched vertically. Move it to the left and increase its height.
Last one will be stretched horizontally. Move it again and increase its width.

And we made it. Three little dots!
Ellipses by slowboyfast

6. $drawtriangle

It's a tricky one. Draws triangles. String looks like this:

It has 3 coords for X and 3 for Y. Each one represents a corner of a triangle. Let's draw one.

Here it is, a triangle.
Triangle by slowboyfast

3. Write

    Yeah, that's right. Making text strings is another essential thing for f2k themer. They're found nearly everywhere. On playlists, panels and buttons.

There are four functions that are capable of drawing text:
  1. $drawtext - which is capable of alpha blending, glowing and other shiny stuff
  2. $drawtextex - which can't do transparency but is faster than $drawtext (it's better for spamming and creating crispy, strong shadows)
  3. $textbutton - which draws buttons made entirely of letters
  4. $drawstring - can do magics! (gonna describe it later)
1. $drawtext
String looks like this:
Arguments for $drawtext:
  • left - aligns text to the left
  • right - aligns text to the right
  • hcenter - centers text horizontally
  • vcenter - centers text vertically
  • top - aligns text to the top
  • bottom - aligns text to the bottom
2. $drawtextex
String looks like this:
Arguments for $drawtextex:
  • left - aligns text to the left
  • right - aligns text to the right
  • hcenter - centers text horizontally
  • vcenter - centers text vertically
  • top - aligns text to the top
  • bottom - aligns text to the bottom
  • end_ellipsis - if your text is too long, this arg. resolves clipping issues by ending text with (...)
Right, now we should test our functions. Let's make two strings, one made in $drawtext and second made in $drawtextex
$drawtext(THIS TEXT WAS WRITTEN BY '$DRAWTEXT' FUNCTION,50,50,300,20,0-0-0,)
$drawtextex(THIS TEXT WAS WRITTEN BY '$DRAWTEXTEX' FUNCTION,50,70,300,20,0-0-0,)

Textstrings by slowboyfast

As you may noticed, both strings look similar, so here's my advice. If you can, go for $drawtextex. It's faster, can solve clipping errors and is good for making nice little effects on buttons and playlists.

3. $textbutton
One of the most versatile functions out there. It can show/hide panels, minimize, maximize, change layouts. It can do nearly everything we want it to do.
It's string consists of:

In example, if we want to make a button that opens up preferences, we can write a string like this:

When we move our mouse over this button, it will change color to red. And of course clicking on it, will open up prefs.

We can control font size, type and face with one simple string.
FACE - is a name of our font e.g. Calibri Bold Caps
SIZE - controls size :)
TYPE - controls if our font is normal, bold or italic.

And again, it's visible here:
Textstrings by slowboyfast

4. Combine

    To make some decent looking themes, we need to combine those drawing functions. It's similar to using layers in graphic apps, only instead of "WYSIWYG" interface we're on our own with lines of code. 
Combining, or as I like to call it - layering, occurs when we put a shape over other shape. In foobar, it may be a little awkward since topmost layer is always closer to the bottom. Everything we write last will be put on top of other things. Look at this two rectangles below.
L1 by slowboyfast

In this case, cyan rectangle (layer 2) is our top layer. Look what happens when we switch layer 2 (cyan) with layer 1 (magenta).

L2 by slowboyfast

Since magenta rectangle is now closer to the bottom, foobar will treat it as topmost layer. This technique can be used to achieve pretty nice effects. Let's say we want to make a simple looking art viewer for our skin. We should start with drawing a rectangle:


Albart1 by slowboyfast

Then, we wan't to put a smaller and a bit darker rectangle over it. It will create a thick border.:


Albart2 by slowboyfast

Next, we should use artreader function to display our artwork:

$imageabs(44,9,162,162,%path%,artreader nokeepaspect,)

Albart3 by slowboyfast

Looks ok, but it's a little bland. Let's make our cover a bit lighter on top:


Albart4 by slowboyfast

Looks even better. We should add a little shiny effect in top left corner for good measure:


Albart5 by slowboyfast

There's still something missing here. We should add a shadow to make it complete. To do this, we have to move all our code a notch to the bottom and write a $drawblurrect function:


Albart6 by slowboyfast

And that's it. That's how we draw stuff in foobar (or at least in PSS). 

This part is still incomplete (mostly because of my work, I don't have much time lately) but I'll add more. I just want to share this little starter guide. Hope it helps all those people who are new to f2k. Cheers! ;)

To do:
  • describe $drawstring
  • control height and width with %_width% & %_height%
  • insert images with %imageabs
  • make some efficient global settings with $puts
  • $add, $sub and $div or simply add, substract and divide
  • floating panels (POP-UPS!)
  • retractable panels
Hey guys, here comes part 2 of "How to skin foobar"!

Collab between:
:iconmarkkoenig: - Part 1
:iconslowboyfast: - Part 2
:iconflipout69: - Part 3
(link coming soon)

I wanted to keep my part clear and newbie firendly. It contains descriptions of all basic drawing & text functions and step-by-step guide for PSS on "How do I combine functions in f2k".
This part is still a WIP coz I'm a little busy at the moment, but I'll complete it soon :)

:bulletred:To do:
:bulletblack: control height and width with %_width% & %_height%
:bulletblack: insert images with %imageabs
:bulletblack: make some efficient global settings with $puts
:bulletblack: $add, $sub and $div or simply add, substract and divide
:bulletblack: floating panels
:bulletblack: retractable panels
:bulletblack: and many, many more

Want to help with writing? PM me, Markkoenig or FlipOut69.

Add a Comment:
JackYau Featured By Owner Apr 26, 2016
Could you help us to fix the Part 1 - Basics , click the url, could`t open the content... please help us. like yu tut so much.
2tec Featured By Owner Nov 21, 2015
thanks, great stuff
thecheff4 Featured By Owner May 21, 2015  Hobbyist General Artist
Bravo , well explained , clear and precise.
Thank you brother.
slowboyfast Featured By Owner Jun 11, 2015  Professional Interface Designer
Glad you found it helpful :)
Audionysos Featured By Owner Jan 26, 2015
Is it possible to allow splitter setting window to lose focus so that i will be able to test script without closing the window?
slowboyfast Featured By Owner Jan 27, 2015  Professional Interface Designer
You need to move/hide it manually. PSS cannot lose focus by itself.

Easiest way to do it is:
1. Open PSS settings that contain your window you want to move,
2. Locate it on the list,
3. Look for "Left", add enormous number (1000,2000),
4. Hit ok.

If you want to revert, just substract the number you've added earlier
burnsplayguitar Featured By Owner Oct 28, 2014  Hobbyist Interface Designer
hey, i'm waiting for more :impatient:  

amazing work man. thank you for sharing it.
it's very easy to understand.  
slowboyfast Featured By Owner Oct 29, 2014  Professional Interface Designer
Haha, glad you like it.

I'll include more stuff soon (like tabs, pop-ups and such) :)
It will also be released as a PDF, for easy reading ;)
burnsplayguitar Featured By Owner Oct 29, 2014  Hobbyist Interface Designer
humm, really good to know. 
i'll following it and expand work fields =)

keep up the good work man ;)
NatashaChick Featured By Owner Oct 24, 2013
You're doing a great job here. Thanx :D (Big Grin) 
slowboyfast Featured By Owner Oct 25, 2013  Professional Interface Designer
Nittiyh Featured By Owner Oct 23, 2013  Student Interface Designer
This is awesome. Keep it up :D
slowboyfast Featured By Owner Oct 23, 2013  Professional Interface Designer
Thanks bro, more updates to follow ;)
Add a Comment:


Submitted on
October 23, 2013
Submitted with Writer


61 (who?)