Old 08-20-2007, 02:34 AM   #1
White Tie
Pixel Pusher
 
White Tie's Avatar
 
Join Date: Mar 2007
Location: Blighty
Posts: 4,950
Default Inkscape for Reaper - Tutorial

Here's a quick guide on making a button in Inkscape. I'm not going to be explaining many skills here because there are some first class tutorials out there to cover how to make things actually look nice, particularly on YouTube, but I'm going to try to cover some Reaper specifics

Those of you who are struggling using a bitmap editor like Gimp will find that many of your frustrations disappear when you switch to working in vector. It does take a little more planning but the workflow is so much quicker when it comes to generating full buttons sets etc.. There are also changes in the wind for the next version of Inkscape, such as blending modes, that will make it really first class, so its worth getting acquainted now.

First read http://www.reaper.fm/sdk/advtheme/

Setting your preferences

A Reaper button is a 20x60 pixel image showing the button in its three states so the first thing to do is set up Inkscape's vector preview to show these resolutions, which you'll probably find here:

C:\Documents and Settings\YourName\Application Data\Inkscape\preferences.xml

Edit this (I used wordpad) and right at the bottom you'll find id="iconpreview"
change all the show values beneath to 0, and add these two entries:

<group
id="size20"
show="1"
value="20" />
<group
id="size60"
show="1"
value="60" />

Save, exit, fire up Inkscape. I recommend you go to File > Inkscape Preferences and in 'windows' check 'Dialogs stay on top (experimental!)' then close Inkscape Preferences.

Formatting your Document

Now choose File > Document Properties.

In the 'Page' tab you want:
Default units : px
Custom Size: Width 60.00, Height 20.00

In the 'Grid' Tab you want:
Check Show Grid
Grid Units: px
both Origins at 0
Both spacings at 0.50
Major grid line every 2 lines.

Go to the 'Snap' tab and leave it open.

Now get the 'select and transform objects' tool (black arrow) and click&drag out from the left side ruler, which inserts a vertical guideline. Drop it anywhere, then double click on it and choose move to 20.00. Insert another vertical guideline and move it to 40.00.



Drawing a quick and easy button

Right – let's draw something! Check 'snap nodes to grid' in the snap tab. Get the circle tool and draw in the left hand square, make your circle fill the whole square.

With the object selected, choose Object > Fill and Stroke. In the Fill Tab pick the third box, Linear Gradient. Click 'edit' and check you've got 2 stops, one black and one white, both with an Alpha (A) value of 255. Next pick the gradient tool from the main tool bar and shift your gradient around so its running diagonally. Now, select your circle and do Edit > duplicate. Shrink your new circle by 1 pixel (that's 2 grid lines) on each edge, duplicate its gradient and click edit. Click 'add stop' and make it red.

Back in 'Fill and Stroke' go to the 'stroke style' tab and give it a width of 1px. Then, in 'stroke paint' choose linear gradient and tell it to use your black-to-white gradient. When you now use the gradient tool, you'll find you have two control lines – one for the fill and one for the stroke. Shift round the stroke gradient so its heading in the opposite direction.

Seeing how it looks

All this vector work is pointless if its not going to look right in Reaper. Go to view > icon preview and you should see this:



Watching carefully how it looks in the icon preview, add a nice big 'M' over your button (the text tool is on the main tool bar.) Pay special attention to the grid; this will let you know how the line elements in your text are going to render. If things are looking to blurry, shift around and rescale so elements are ending nicely on the pixel border of the heavy grid lines.

Select your M; In the 'Fill and Stroke' give it a 'flat colour' fill, coloured white. Choose the 'Stroke Paint' tab, here we want flat colour again, but black. In the third tab (Stroke Style) make the width 1.000px and adjust the joins and caps to whatever looks best (I used the defaults). Now, with your M still selected, choose Edit > Copy, then Edit > Paste in place. An identical M will have appeared in front of the first; select it and change its 'stroke paint' to none.

As a quick taste point: That 'amusing' font you may have chosen is probably crap. No, really. Go and buy a few weights of a nice expensive quality font like Univers and suddenly you'll find everything looks better, because the design is great, the kerning and hinting are all set by a total genius. That free font you downloaded may not be able to compete for the simple fact its technically not very accomplished, even though it looks nice in the preview website. (I'm not saying that to be rude; I've tried font creation and I'm crap at it too....)

Okay, select all of your button and pick Object > Group. This will save you from misaligning things as you're moving them around. Pick your group and choose Edit > Duplicate. Shift your new button over into the centre position (the mouse-over image). Repeat once more for the third button. Then select each one and ungroup them. (object > ungroup).

You should now have enough knowledge to alter your button for its mouse-over / mouse-down states. Just be aware that, when you edit a gradient, you will affect all objects with that gradient. So you may want to click 'duplicate' (next to the 'edit' button in the gradient tab) so that you're working on a unique gradient for each object.



Great! Not the world's most exciting button, but its sharp and does its job. Lets stick it in Reaper. Choose File > Export Bitmap. Pick 'page' and check that all is correct with width being 60.000 and height being 20.000. Call it 'track_mute_off.png' , click Export and you're done:


Last edited by White Tie; 02-06-2018 at 07:36 AM. Reason: url fix
White Tie is offline   Reply With Quote
Old 08-20-2007, 02:34 AM   #2
White Tie
Pixel Pusher
 
White Tie's Avatar
 
Join Date: Mar 2007
Location: Blighty
Posts: 4,950
Default

{If I need to put more images they'll go here}
White Tie is offline   Reply With Quote
Old 08-20-2007, 06:39 AM   #3
Cojomo
Human being with feelings
 
Join Date: Feb 2007
Posts: 74
Default

Thanks a lot! I've never used that program before but I'll give it a shot. I was wondering what my buttons were missing...
Cojomo is offline   Reply With Quote
Old 08-20-2007, 07:16 AM   #4
teej813
Human being with feelings
 
teej813's Avatar
 
Join Date: Sep 2006
Location: Indiana
Posts: 1,716
Default

Brilliant! Thanks, WT. Looking forward to having some time tonight to play with this. Instructions seem clear and to the point. Great tip about the font...


tj
__________________
It may be the devil, or it may be the Lord, but you're gonna hafta serve somebody.
__________________
teej813 is offline   Reply With Quote
Old 08-20-2007, 12:37 PM   #5
stelzbock
Human being with feelings
 
stelzbock's Avatar
 
Join Date: Jun 2006
Location: Germany, Berlin
Posts: 319
Default

Hey, wow... nice one, white tie!

Would be interesting if its possible to manage a whole theme in inkscape without opening different files. I think about the nice clone command...if you change something on the original it will be changed on all clones.

If you could manage to link all buttons, you only have to change one and all similar ones ore being changed too...


Ahh, and anotherwon that I would like to know is, how it's best to desin a whole lets say TCP. Whit a underlaying graphic that surrunds the buttons and overlays etc...

jUST in case you have too much time... :P
__________________
_______________________________________

Stelzbock @ myspace:
http://www.myspace.com/stealthmusic
gear/sw:
Reaper, FLStudio, ProjectMix I/O, KRK RP5, Sp B1 Mic, some Intruments
PC: Athlon XP 2,4+, 1,5GB RAM, Matrox Dual Head
stelzbock is offline   Reply With Quote
Old 08-21-2007, 02:06 AM   #6
LOSER
Human being with feelings
 
Join Date: May 2006
Posts: 2,373
Default

Wow, Inkscape is nice. Has it alwyas been that nice, I'm sure I checked it out once, anyways thanks for this White Tie.

Last edited by LOSER; 08-21-2007 at 07:36 AM.
LOSER is offline   Reply With Quote
Old 08-21-2007, 06:52 AM   #7
teej813
Human being with feelings
 
teej813's Avatar
 
Join Date: Sep 2006
Location: Indiana
Posts: 1,716
Default

This was slick, WT. I was able to duplicate your button using your instructions no sweat... with the exception of the stroke on the letter M. Couldn't figure out how to do that.

Other than that, this has really opened my eyes to how simply you can build (simple) 3D objects if you know how to go about it.

Thanks again, dude!


tj
__________________
It may be the devil, or it may be the Lord, but you're gonna hafta serve somebody.
__________________
teej813 is offline   Reply With Quote
Old 08-21-2007, 06:59 AM   #8
White Tie
Pixel Pusher
 
White Tie's Avatar
 
Join Date: Mar 2007
Location: Blighty
Posts: 4,950
Default

Quote:
Originally Posted by teej813 View Post
with the exception of the stroke on the letter M. Couldn't figure out how to do that.
Oh balls - you're quite right, I seemed to have skipped that. Fixing now
White Tie is offline   Reply With Quote
Old 08-21-2007, 07:13 AM   #9
todd24
Human being with feelings
 
Join Date: Nov 2006
Posts: 914
Default

Very cool. I will have to give it a go.

Would you like to show how you tackle overlays too?
todd24 is offline   Reply With Quote
Old 08-22-2007, 07:35 AM   #10
teej813
Human being with feelings
 
teej813's Avatar
 
Join Date: Sep 2006
Location: Indiana
Posts: 1,716
Default

Wooooooooo HOooooooo... this is fun once ya know the tricks!

Got the text w/ stroke done. Great instructions, WT!



tj
__________________
It may be the devil, or it may be the Lord, but you're gonna hafta serve somebody.
__________________
teej813 is offline   Reply With Quote
Old 09-02-2007, 03:54 AM   #11
Shan
Human being with feelings
 
Shan's Avatar
 
Join Date: Mar 2007
Location: Vancouver
Posts: 2,279
Default

My first buttons. Took me about 2 hours(newbie). Tried to give it a "PT look".



Great tutorial WT!

Shane
__________________
"Music should be performed by the musician not by the engineer."

Michael Wagener 25th July 2005, 02:59 PM

Last edited by Shan; 09-02-2007 at 03:58 AM.
Shan is offline   Reply With Quote
Old 09-13-2007, 04:12 PM   #12
jimst57
Human being with feelings
 
Join Date: Aug 2006
Location: Rhode Island, USA
Posts: 235
Default

Quote:
Originally Posted by White Tie View Post
A Reaper button is a 20x60 pixel image showing the button in its three states
I'm curious....how come when I open one of the new Toolbar button images in Inkscape it says it's 108 x 36 ?

Have things changed in V2Beta?
jimst57 is offline   Reply With Quote
Old 10-16-2007, 02:57 AM   #13
teej813
Human being with feelings
 
teej813's Avatar
 
Join Date: Sep 2006
Location: Indiana
Posts: 1,716
Default

bump... cause this is good stuff!


tj
__________________
It may be the devil, or it may be the Lord, but you're gonna hafta serve somebody.
__________________
teej813 is offline   Reply With Quote
Old 06-14-2008, 08:54 AM   #14
Klemperer
Human being with feelings
 
Klemperer's Avatar
 
Join Date: Jul 2007
Location: Hamburg and Heidelberg
Posts: 670
Default

another bump, for myself too, as Tedwood just pointed me towards Inkscape, and this tutorial is great!
Klemperer is offline   Reply With Quote
Old 03-03-2009, 12:03 AM   #15
Shan
Human being with feelings
 
Shan's Avatar
 
Join Date: Mar 2007
Location: Vancouver
Posts: 2,279
Default

Some killer browser based image editors for creating custom REAPER themes:

http://pixlr.com/editor/

http://pixlr.com/

http://aviary.com/tools/raven

http://aviary.com/tools/phoenix

http://aviary.com/tools/toucan


I'm a big fan of Pixlr(with the Firefox plugin) and Raven myself.

Shane
__________________
"Music should be performed by the musician not by the engineer."

Michael Wagener 25th July 2005, 02:59 PM

Last edited by Shan; 03-03-2009 at 12:06 AM.
Shan is offline   Reply With Quote
Old 03-10-2009, 12:44 PM   #16
StepOne
Human being with feelings
 
StepOne's Avatar
 
Join Date: Jan 2008
Location: CA
Posts: 991
Default

Downloaded Inkscape, and it won't let me switch fonts from Sans. How could such a large bug ever get released as part of a "stable" package? The Inkscape programmers need to have better quality control, this is just sad.

Other than that, its a top notch program.
__________________
Damn it feels good to be a gangsta.
StepOne is offline   Reply With Quote
Old 03-11-2009, 04:08 AM   #17
White Tie
Pixel Pusher
 
White Tie's Avatar
 
Join Date: Mar 2007
Location: Blighty
Posts: 4,950
Default

I have no problem at all changing fonts in Inkscape, V0.46 for Windows. However, maybe you're one of the unlucky few experiencing this bug which is new and being dealt with I believe. There are a number of suggestions in that thread which will hopefully solve the problem for you right away.
White Tie is offline   Reply With Quote
Old 03-11-2009, 05:19 AM   #18
carbon
Human being with feelings
 
carbon's Avatar
 
Join Date: Feb 2008
Location: Eesti
Posts: 2,716
Default

Quote:
Originally Posted by StepOne View Post
Downloaded Inkscape, and it won't let me switch fonts from Sans. How could such a large bug ever get released as part of a "stable" package? The Inkscape programmers need to have better quality control, this is just sad.
I don't have this problem, but there are several others that make it crash.
I've posted a few bug reports, some of them have been corrected.
__________________
projektorn
carbon is offline   Reply With Quote
Old 04-27-2009, 10:22 AM   #19
StepOne
Human being with feelings
 
StepOne's Avatar
 
Join Date: Jan 2008
Location: CA
Posts: 991
Default

I'm having another problem in Inkscape, I'm trying to create overlay images, but whenever I export them to png, they are all stretched out in Reaper. I've tried changing the dpi to 72 but that doesn't help either. Any ideas?
__________________
Damn it feels good to be a gangsta.
StepOne is offline   Reply With Quote
Old 04-27-2009, 02:32 PM   #20
White Tie
Pixel Pusher
 
White Tie's Avatar
 
Join Date: Mar 2007
Location: Blighty
Posts: 4,950
Default

If you'd like to post or PM your Inkscape and/or png file, I'd be glad to take a look.
White Tie is offline   Reply With Quote
Old 06-08-2009, 08:51 PM   #21
StepOne
Human being with feelings
 
StepOne's Avatar
 
Join Date: Jan 2008
Location: CA
Posts: 991
Default

yup, it sure is
__________________
Damn it feels good to be a gangsta.
StepOne is offline   Reply With Quote
Old 11-29-2012, 05:50 PM   #22
run, megalodon
Human being with feelings
 
Join Date: Apr 2010
Posts: 2,860
Default

Thanks for this tut, WT.

It should be stated that there are two id="iconpreview" listings in the prefs file as of now. The last one is the one to add the new entries under.
run, megalodon is offline   Reply With Quote
Old 10-03-2014, 01:59 AM   #23
Superfly76
Human being with feelings
 
Superfly76's Avatar
 
Join Date: May 2007
Posts: 499
Default

Quote:
Originally Posted by run, megalodon View Post
Thanks for this tut, WT.

It should be stated that there are two id="iconpreview" listings in the prefs file as of now. The last one is the one to add the new entries under.
This is a great tutorial. Could anyone walk me through the preferences.xml editing? I've found the last id="iconpreview" entry, but have no idea what I should and shouldn't be changing, or where to add the new entries. Sorry, I'm a total noob when it comes to anything xml related. I'm afraid of messing my preferences up.
__________________
These links are really old! I really should update these!My band eluvia ABC World News (That's me with the dreads)
Superfly76 is offline   Reply With Quote
Old 01-24-2018, 02:44 AM   #24
Vagalume
Human being with feelings
 
Join Date: Nov 2015
Posts: 604
Default Awesome program

I have just downloaded Inkscape ... the first thing I have to say is much simpler than other soft to work with and the videos in Youtube help a lot to get decent images easily for noobs like me, I really appreciate so much this recommendation WT !!!!!!! I can't believe what I have done in half an hour ...

For some reason I can't see your example images, anyway I will try follow your tutorial.

Thanksssssssss a lot, this is f#@~#€@#¬ awesome !!!


PS: By the way, I have found the preferences.xml in a different folder:
C:\Users\myname\AppData\Roaming\inkscape

Last edited by Vagalume; 01-24-2018 at 02:50 AM.
Vagalume is offline   Reply With Quote
Old 01-24-2018, 10:17 AM   #25
Mordi
Human being with feelings
 
Mordi's Avatar
 
Join Date: May 2014
Location: Norway
Posts: 982
Default

@Vagalume: Take WT's guide with a grain of salt. Last edit was 9 years ago. I'm sure Inkscape has developed considerably since then, and so has Reaper.

Also, I'd like to mention a good alternative to Inkscape; Gravit designer. Affinity Designer is also very good, but costs about the same as Reaper.
Mordi is offline   Reply With Quote
Old 01-25-2018, 02:30 AM   #26
Vagalume
Human being with feelings
 
Join Date: Nov 2015
Posts: 604
Default

Thanks so much Mordi, I will take a look to both
Vagalume is offline   Reply With Quote
Old 02-06-2018, 07:45 AM   #27
White Tie
Pixel Pusher
 
White Tie's Avatar
 
Join Date: Mar 2007
Location: Blighty
Posts: 4,950
Default

Greetings from 2018! I have corrected the missing images, thanks hopi.

Quote:
Originally Posted by Mordi View Post
@Vagalume: Take WT's guide with a grain of salt. Last edit was 9 years ago. I'm sure Inkscape has developed considerably since then, and so has Reaper.

Also, I'd like to mention a good alternative to Inkscape; Gravit designer. Affinity Designer is also very good, but costs about the same as Reaper.
Quite so. I've no idea if any of this is relevant to modern Inkscape, I've not tried Inkscape in years.

I echo the suggestion of Affinity Designer, that's the program I suggest to almost anyone who asks about doing vector work, from dabblers to hardcore professionals. I'm hopelessly addicted to Illustrator (its too late for me, save yourself!) but often output Illustrator's work through Designer because its anti-aliasing is so much better than Illustrator's. Note : I paid once for Designer roughly what I pay Adobe every month. Bleeeuurgh.
__________________
The House of White Tie
White Tie is offline   Reply With Quote
Old 02-06-2018, 08:46 AM   #28
hopi
Human being with feelings
 
hopi's Avatar
 
Join Date: Oct 2008
Location: Right Hear
Posts: 15,618
Default

thanks WT, and thanks for the tip about Affinity soft wares
they both seem like a no brainer purchase...

sorta like the reaper of graphic apps, eh?

EDIT: Ok so I got both the Paint and the Designer [vector] Affinity programs
I do like them, but one thing to know... they both require that you have the Aero desktop
turned on... makes no sense why cuz clearly they could have them run fine without it...
I tried their help to set a cmd line to avoid Aero and run anyway, but it don't work..
so I had to go to Aero, and made it look 'ok' ...but I really prefer the Classic old skool look and feel
oh well....
__________________
...should be fixed for the next build... http://tinyurl.com/cr7o7yl
https://soundcloud.com/hopikiva

Last edited by hopi; 02-07-2018 at 01:39 PM.
hopi is offline   Reply With Quote
Old 02-07-2018, 06:59 AM   #29
Vagalume
Human being with feelings
 
Join Date: Nov 2015
Posts: 604
Default

Ty Hopi and WT.
Vagalume is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -7. The time now is 04:28 PM.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.