Hi Inkscapers,

I've written a tutorial on how to create a nice looking button in Inkscape and would love to get some feedback from fellow Inkscapers before posting it live on my new website. I actually created this tutorial some time ago but got discouraged in posting it when I had a couple of people look it over & try it out & they said that it was too confusing and weren't able to follow my instructions so I never put it online. I asked for more feedback wanting to know how I could make it better for them, but they couldn't really explain it & so the feedback from them wasn't the best. However, I've revised it a bit adding screenshots and whatnot in the hopes that it would clear some things up and make it easier to follow.

So here I am asking fellow Inkscapers for feedback both good and bad. Is my tutorial easy to understand now or is it still too confusing to follow? If it is too confusing, what may I do to help rectify the confusion and make it easier to understand? Any advice I can gather from fellow Inkscapers would be completely welcomed. I thank you all in advance for taking the time to check out my tutorial and offer up any advices you may have to help me improve my tutorial writing skills (or lack thereof).

The tutorial comes in 3 flavors, PNG, PDF and of course the source SVG file. All made within Inkscape, of course!

Here is the final result of the tutorial:



BTW, I noticed that for some screens my PNG may be to large to view the right side of the graphic,
if that is the case for anyone, you can use [CTRL] + [-] to zoom out a bit if needed.

Ok, enough said. Here goes:



So that's that in PNG form.

Below, I will attach the PDF and the SVG for all to download.

Again, please offer up some feedback GOOD or BAD. Let me know if it's good as is or if I could make improvements to help more people to understand how to use Inkscape to make some nice graphics.

Ok, so I guess perhaps my files are too big too attach as I keep trying and it acts as if something is happening but they never show up.

SO, if you want to download the PDF and/or the source SVG, here's the links to download (Right Click... Save As...)

Here's the PDF file:
http://inkscapegraphicspro.com/Tutorials/ButtonTutorial.pdf

And here's the source SVG file:
http://inkscapegraphicspro.com/Tutorials/ButtonTutorial.svg

P.S. The above PNG files are scaled down to 75% of original size, so they will (hopefully) fit the screen. To get the original size simply download the PDF and/or SVG file for the full size.

Again ALL feedback is MORE than welcome.

Thanks for taking the time to look at my tutorial.

Hello BetaTestingPro,

Let me tell my thoughts about that tutorial.

Basic question, who is the audience?
Starters, advanced users, or professional ones?

To me it seems you would like it to be a guide
for those who make their first steps, yet the result is too complicated for that.
Also, it will show them how such things are tended to be done,
while there are several things a professional would never do alike.
And on top of it, they possibly will add these effects to anything they design, which is a common mistake in the field.

For the overall explanation, it is too long and the layout with the steps not aligned visually doesn't help the understatement.

Now for the details.
Where would you use such created icons/buttons?
Mainly on screens. It is one of the most advanced things to design right.
You have to bear with making the button available in pixel format,
from very small to large size, while being legible if really used as an icon.
That is, pixel fitted graphic, and less details for the smaller sizes in general.
Also appstore icons get the gloss effect, corners cut by the devices, so glossy effects drawn for real icons is usually not a good thing.
Same with the photograph background: in small sizes they hardly can be recognised.

The light and the shades are added through one gradient.
That is not a good way in my opinion.
If there is a light, it should make the background lighter, if there is a shade, it should make the background darker.
But making a grey tone where they appear at the same time?
That should be avoided as much as possible. There cannot be shade and light at the same time.
(I didn't play much around with inkscape layer modes but as I can remember gimp is so much better with it.
In gimp I would use a combination of them, like lightness, to brighten up the background, as on darker backgrounds the white gloss would look unnatural.
Same with the shades. For such reasons, in some cases I would add other tones as well to the white and black, but never a neutral grey.)

About the positioning: the fact that light doesn't come from the top creates a disharmonic effect.
Even if it would come from there, the effect on the letters is implying the lightsource is on the opposite side.
Also that effect makes the text less legible, the shades are too blurred, on that bottom "B" they seem totally off.
To be more confusing, there is a lightsource in the center of the background image -burnt in the photo-, which would make a totally different effect if it was a reflection, like a "chrome button".

On the technical way, that rotation of the top ellipse shape could be done in a pefectly aligned way, but it's really not for the starters.
It would add many-many seemingly unnecessary steps for the readers,
which is much harder to describe, much harder to follow than learning the ability of doing those things with less complicated tutorials.
Same with the alignment -it is rather confusing to draw the light circle separately from the background.

I wouldn't recommand using layers for button designs alike: you cannot group all the objects and move them together, scale down, and such.

To sum it up:
in my opinion that is too complicated for a starter,
but the result is not as good as an advanced would follow the steps.

If the audience is the beginners,
then concentrating with each tutorial on as less new tools and steps in the workflow as possible would be more helpful.

If the audience are those who know they way around with inkscape, then that deep description of the tools is unnecessary,
but the result should be much more polished, like clipping or masking the raster image is a much cleaner way.

If it was about more of a good looking icon/button design tutorial, then I would suggest to check this site first:
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
(Well I don't know why a web or app builder would be advanced in coding but a starter with graphics anyway, I see it totally opposite.)

If you would like to see some really good icon/button designs, I will link some designer's portfolio who are specialised on them, for inspiration.

I hope these thoughts won't break you down too much.

Hi Lazur,

First, let me just say THANK YOU for your Honest feedback. This is exactly the kind of feedback I was looking for.

Lazur URH wrote:Hello BetaTestingPro,

Let me tell my thoughts about that tutorial.

Basic question, who is the audience?
Starters, advanced users, or professional ones?

The tutorial would be aimed at beginners for sure as I'm not really good enough myself to teach the advanced & pro users yet. Though I do aim to get good enough to do so eventually, I'm still basically a beginner myself. I've always felt that one of the best ways to learn how to do things is to try to teach others what you learn as you learn it. That helps me to retain the information while teaching others what I've learned.

Lazur URH wrote:To me it seems you would like it to be a guide
for those who make their first steps, yet the result is too complicated for that.
Also, it will show them how such things are tended to be done,
while there are several things a professional would never do alike.
And on top of it, they possibly will add these effects to anything they design, which is a common mistake in the field.

For the overall explanation, it is too long and the layout with the steps not aligned visually doesn't help the understatement.

Yes, it is meant to be like a guide for new users who don't know what the tools do just yet. And good point about people making the mistake of adding the effects to anything/everything they design. Thanks for the point on the layout as well.

Lazur URH wrote:Now for the details.
Where would you use such created icons/buttons?
Mainly on screens. It is one of the most advanced things to design right.
You have to bear with making the button available in pixel format,
from very small to large size, while being legible if really used as an icon.
That is, pixel fitted graphic, and less details for the smaller sizes in general.
Also appstore icons get the gloss effect, corners cut by the devices, so glossy effects drawn for real icons is usually not a good thing.
Same with the photograph background: in small sizes they hardly can be recognised.

Again, you are correct that they would be used on screen and not likely in print so the photographic background is probably too much. Thanks for the tip on appstore icons getting a gloss effect and corners cut on devices anyway so there is no need for the gloss in the first place.

Lazur URH wrote:The light and the shades are added through one gradient.
That is not a good way in my opinion.
If there is a light, it should make the background lighter, if there is a shade, it should make the background darker.
But making a grey tone where they appear at the same time?
That should be avoided as much as possible. There cannot be shade and light at the same time.
(I didn't play much around with inkscape layer modes but as I can remember gimp is so much better with it.
In gimp I would use a combination of them, like lightness, to brighten up the background, as on darker backgrounds the white gloss would look unnatural.
Same with the shades. For such reasons, in some cases I would add other tones as well to the white and black, but never a neutral grey.)

Again, good tips Lazur. Your feedback is most helpful and this is the kind of stuff I like to hear, As for Gimp layers, I really don't know much about the GImp or it's layers. I've never really liked the Gimp as I've always found it to be a bit slow & clunky. It always crashed on me in the past and I always ended up frustrated and annoyed so I very rarely even open the Gimp up, much less use it for graphic design.

Usually, if I'm using the GImp it's only for very simple animations and to use it's transform capabilities. I'm sure it's actually a pretty nice program if I simply RTFM, but I haven't done that yet since I have never really liked the GImp in the first place.

Lazur URH wrote:About the positioning: the fact that light doesn't come from the top creates a disharmonic effect.
Even if it would come from there, the effect on the letters is implying the lightsource is on the opposite side.
Also that effect makes the text less legible, the shades are too blurred, on that bottom "B" they seem totally off.

Yes, I see exactly what you mean with the light source on the text being on the opposite side. I'm not sure how I overlooked that in the first place as it sticks out like a sore thumb!

About the shades being too blurred and the bottom "B" being totally off... well, I can only agree with you here. It's just the effect that the built in extension created. I usually don't even use the extension and create the shades for text using rectangle shapes, transparencies and blurs but that seemed a bit much for what this tutorial was trying to accomplish.

Lazur URH wrote:To be more confusing, there is a lightsource in the center of the background image -burnt in the photo-, which would make a totally different effect if it was a reflection, like a "chrome button".

I'm not exactly sure what you mean here by "there is a lightsource in the center of the background image -burnt in the photo-" since the light source is literally the sun. It is a picture of the sunset that I took from the back deck of my house. The ripples and the reflection of the sun was added to hide the houses that would be seen below the trees. But there is no added light source.

Lazur URH wrote:On the technical way, that rotation of the top ellipse shape could be done in a pefectly aligned way, but it's really not for the starters.
It would add many-many seemingly unnecessary steps for the readers,
which is much harder to describe, much harder to follow than learning the ability of doing those things with less complicated tutorials.
Same with the alignment -it is rather confusing to draw the light circle separately from the background.

Point taken, the ellipse has got to go. After reading your feedback, I see that I don't need the ellipse in the first place and if I were to use it, it's in the WRONG place anyway. lol

I get your point with the alignment as well, it would make more sense to draw the circles directly on top of the background to begin with rather than doing it the way shown. Seems like I was working backwards for some reason when I originally wrote this.

Lazur URH wrote:I wouldn't recommand using layers for button designs alike: you cannot group all the objects and move them together, scale down, and such.

The main reason I got into the habit of using layers like this is because my laptop cannot select objects underneath other objects using the ALT + Click method as I could with my desktop PC. However, when I need to group objects to move them, scale them, etc. that is very easy to do by simply selecting all objects and duplicating them, then group them and so on. Again, I only do this because my laptop cannot make use of the ALT + Click method.

Lazur URH wrote:To sum it up:
in my opinion that is too complicated for a starter,
but the result is not as good as an advanced would follow the steps.
f the audience is the beginners,
then concentrating with each tutorial on as less new tools and steps in the workflow as possible would be more helpful.

If the audience are those who know they way around with inkscape, then that deep description of the tools is unnecessary,
but the result should be much more polished, like clipping or masking the raster image is a much cleaner way.

Your feedback is most helpful, Lazur. This is exactly the kind of feedback I've been looking for. All your points really hit home and make a lot of sense. You are absolutely right that if it were aimed towards the advanced users, the result is way too weak and too many descriptions on the tools themselves, etc.

Since the audience is meant to be Beginners, I obviously need to take a much less complicated approach that is easier to understand and I have got to get rid of the zigzagging I used here. I'm not sure what made me do it that way but I think I had come across one done similarly that I kinda liked. lol

Lazur URH wrote:If it was about more of a good looking icon/button design tutorial, then I would suggest to check this site first:
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

Thanks for the reference it was a good read and very good tips over there.

Lazur URH wrote:(Well I don't know why a web or app builder would be advanced in coding but a starter with graphics anyway, I see it totally opposite.)

Actually, I don't find it odd at all that one may be an advanced coder but not good at graphics. I know a good many coders that don't have a clue how to make graphics at all. They have really good ideas for features in their software, but the software doesn't look good at all cuz they don't know anything about graphic design.

Lazur URH wrote:If you would like to see some really good icon/button designs, I will link some designer's portfolio who are specialised on them, for inspiration.

Yes, feel free to link the designer's portfolio for inspiration, that would be great! I love to learn and I love to help other people learn too.

[quote="Lazur URH"I hope these thoughts won't break you down too much.[/quote]

Hehehehe. I do feel a bit embarassed.

But you didn't break me down too much. Not at all. While I'll admit, it is a lot to take in, this is exactly the kind of feedback I wanted. You've helped me out tremendously. Much more than I was expecting to be honest. I've been trying to get feedback from people for quite some time (not around here) but I think they were afraid of hurting my feelings or whatever because I only got one sentence or so out of each of them. And then the input wasn't even close to helpful enough to help me see how I could improve it.

You've given me plenty of information to act on. I know now that this tutorial can pretty much be scrapped & totally re-written in a much easier to understand way. Which is fine by me. I wrote this thing well over a year ago (could be closer to 2 now actually) when I first started learning Inkscape myself. In fact, when I first started writing this it was more a reference for myself than anything else, but it was suggested to me (by my g/f) to turn it into a tutorial for others to learn from as well.

In the past I have written coding tutorials that worked out quite nicely, but this is literally the first graphics tutorial I've ever even attempted to write so I thank you for all the advice you've given.

Now, I just have to get over being embarrassed and get on with writing much easier to understand tutorials.

Thanks a Million for ALL your feedback Lazur. It's way more than expected, but exactly the kind of information I needed to see/hear for me to move forward.

BetaTestingPro wrote:...This is exactly the kind of feedback I was looking for...

I'm glad to hear that.

BetaTestingPro wrote:...
The tutorial would be aimed at beginners for sure as I'm not really good enough myself to teach the advanced & pro users yet. Though I do aim to get good enough to do so eventually, I'm still basically a beginner myself. I've always felt that one of the best ways to learn how to do things is to try to teach others what you learn as you learn it. That helps me to retain the information while teaching others what I've learned...

That is true. I made a tutorial some years ago now, and it didn't get any recognition at all.
I assume it happened because it was about how one effect could be achieved, if all the steps were copied and reproduced one by one.
Being that specific won't give beginners experience and better understatement of the tools, also are very borint to follow.

BetaTestingPro wrote:...As for Gimp layers, I really don't know much about the GImp or it's layers. I've never really liked the Gimp as I've always found it to be a bit slow & clunky. It always crashed on me in the past and I always ended up frustrated and annoyed so I very rarely even open the Gimp up, much less use it for graphic design. ...

Weird, I used gimp many times and in my experience gimp is much reliable then inkscape. I don't remember if I had a crash with it.

BetaTestingPro wrote:...I'm not exactly sure what you mean here by "there is a lightsource in the center of the background image -burnt in the photo-" since the light source is literally the sun. It is a picture of the sunset that I took from the back deck of my house. The ripples and the reflection of the sun was added to hide the houses that would be seen below the trees. But there is no added light source...

It is a commonly used effect to reproduce a chrome polish, to draw some kind of a landscape as the background.
Like that one described here.
A graffiti example for such fill:

like it was a side of a chrome tanker.

With the sun in the photograph, it would be the basic lightsource itself,
thus it couldn't make a white glare on the top, because it shines in a smaller angle.

BetaTestingPro wrote:...
The main reason I got into the habit of using layers like this is because my laptop cannot select objects underneath other objects using the ALT + Click method as I could with my desktop PC. However, when I need to group objects to move them, scale them, etc. that is very easy to do by simply selecting all objects and duplicating them, then group them and so on. Again, I only do this because my laptop cannot make use of the ALT + Click method...

I hardly use layers or Alt+Click, I use the Pgup/Pgdown buttons more, or in some cases I switch to outline mode.

BetaTestingPro wrote:...Thanks a Million for ALL your feedback Lazur. It's way more than expected, but exactly the kind of information I needed to see/hear for me to move forward.

I'm really glad that it hit home because I'm too critic and usually say things people don't want to hear even if they asked for it.

For some professional examples on icon designs, below are a few.
They are mostly for advanced users to check,
it would be a hard call for a beginner to start with something similar they designed.

dbotdesign
Kolopach
weirdeetz
faleksandar
MikeKirby
exort
Joekirei
ozonostudio
Saga
twister

BetaTestingPro wrote:...As for Gimp layers, I really don't know much about the GImp or it's layers. I've never really liked the Gimp as I've always found it to be a bit slow & clunky. It always crashed on me in the past and I always ended up frustrated and annoyed so I very rarely even open the Gimp up, much less use it for graphic design. ...

Lazur URH wrote:Weird, I used gimp many times and in my experience gimp is much reliable then inkscape. I don't remember if I had a crash with it.

Well, I've been trying Gimp on & off for many years now & I never did have much luck with it. I haven't really used it lately, so it could be much more stable now. Gimp used to crash on me constantly in WinXP and Ubuntu 10.04. It crashed so much, it seemed unusable. I always wondered how people dealt with it while creating such awesome graphics.

I just discovered Inkscape about 2 years or so (maybe 3) ago. I found Inkscape to be much easier to learn and the tools seemed more intuitive to me. While I do have Inkscape crash on me every now and then, it's usually caused by filters & blurs or especially large files & since I have it setup to save every 10 minutes, I don't usually lose much information. Plus, Inkscape itself usually saves a file upon crash (though not always).

BetaTestingPro wrote:...Thanks a Million for ALL your feedback Lazur. It's way more than expected, but exactly the kind of information I needed to see/hear for me to move forward.

Lazur URH wrote:I'm really glad that it hit home because I'm too critic and usually say things people don't want to hear even if they asked for it.

Haha, I know exactly what you mean. I'm the same way. Sometimes people will get mad when you give them your honest opinion, cuz what they were really looking for was someone to tell them what they wanted to hear (that their stuff was awesome, etc.). I would rather hear that it's not good and needs fixed than to put it out there "AS IS" only to look like a fool later. LOL

Lazur URH wrote:For some professional examples on icon designs, below are a few.
They are mostly for advanced users to check,
it would be a hard call for a beginner to start with something similar they designed.

dbotdesign
Kolopach
weirdeetz
faleksandar
MikeKirby
exort
Joekirei
ozonostudio
Saga
twister

Thanks again for the reference URLs. I've looked at a couple of them already, but will be looking more closely as time goes on. These alone will keep me pretty busy.