Affinity Designer learning curve

#1

Lately I seem to be finding more demand for custom created graphics, whether logos for clients or maybe specific icons. For example, I am building a website at the moment for a client that does fire & electrical safety testing and I cannot seem to find a complete set of existing icons with a coherent style. These would almost certainly have to be custom made.

Having never worked extensively with vector graphics, other than adding them to a web page I just wondered what the learning curve is like with Affinity Designer? If you give me a piece of paper and a pen I would struggle to draw a stick man, so perhaps this is a lost cause but I imagine others have made this transition.

#2

There certainly is a decent learning curve to master vector logo creation.

I can highly recommend the IOS App called Assembly which is a logo/icon creation tool that uses pre made vector shapes and you can then combine the shapes/resize/recolour etc and finally export as an SVG to iCloud.

The shapes are available in packs and even to buy all of them is not much money. Also you can learn it and doodle away when hanging about waiting with nothing else to do but mess about with your phone.

I use Assembly for shapes and then add text if I need it any other vector graphic app.

1 Like
#3

Thanks, I’ll try to find it. It didn’t show up on the the app store here when I checked on my desktop.

I purchased Affinity Photo recently and while I am not convinced it is quite up there in all respects with Photoshop it is a capable app at a fantastic price. There are times when I just want to create these these things without spending hours searching on stock libraries or waiting weeks for a graphic designer.

#4

I also really like Autodesk Graphic (used to be called Draw) and very rarely need to fire up Affinity Designer or even Above Illustrator.

#5

I’m no artist, I’m a coder, not a drawer that’s for sure.

I have Affinity Designer as well as Picta Graphic (formerly Autodesk Graphic, formerly iDraw) for Mac and iPad. I can get by with stock shapes with Graphic, but the pen and node tool is so much easier to use in Affinity. With Graphic you have to change curves with the little handles, with affinity you can grab and drag the curves or use the handles.

I know I watch videos of someone who knows what they’re doing and it’s amazing. I think most graphics software takes a good bit of time to master. Since Affinity seems to be going strong and now has Windows versions I’ve decided to spend the time learning Designer.

As for icons have you checked out IcoMoon? The Web app button has a search function and you can also edit/create Icons sets.

1 Like
#6

I’ve downloaded the demo of affinity designer and I’ll have a play over the next few days. Chances are they’ll have a sale on soon with Black Friday coming up as well.

One thing I don’t quite understand is why there is such massive disparity in the size of SVG files. I’ve had some in the past on websites where the quality was perfect at any size and they were about 5kb. When I tried exporting a very simple shape with a single colour from affinity designer it came in at a whopping 330kb saved as svg for web.

#7

SVG is a text based file format, so you can open the files in a text editor to see what makes the difference.

1 Like
#8

Something is wrong there. A simple shape with a fill should be tiny. Stuff that can bloat SVGs is having a font included in the SVG. Are you sure it isn’t 300 bytes?

1 Like
#9

It’s here.

#10

That dosen’t make sense.
I can do pretty complicated drawings with multiple effects, tons of objects and layers and still be less than half that size.

Check to make sure you selected SVG.

2019-11-23_09-58-12
2019-11-23_09-58-12.jpeg921×844 78.2 KB

#11

That isn’t a simple SVG and is made up of many layers and complex paths. I looks like a freehand drawing a bit and I suspect that that is the issue.

#12

How did you make this shape? The SVG file is a few massive <path Statements.

#13

I am starting from scratch here. Every time a stroke was added with the brush tool it created a layer. My daughter has been experimenting. She is a doing a fire svg now using the shape tools that we just checked and that is less than 2kb.

#14

There is an enormous amount of nodes

#15

If you drew a circle by hand, it would end up being much bigger than a true circle, because SVG’s are good at plotting shapes with constant curves. So if you re-create that shape using accurate curved shapes, then it would be small.

#16

Now you know why I asked about the learning curve!

#17

Don’t use the brush tool. Instead use other shapes to subtract from the main cup shape. You should not be trying to paint a picture with brushes but should be cutting out shapes with a knife instead.

#18

OK thanks, I’ll try to watch some of the Affinity tutorials and get up to speed.

#19

This is actually something I have seen in the past with SVG files I have received. Some were extremely small, while others were far heavier than a well optimised PNG. The small ones also seemed to scale perfectly without loss of quality.

#20

SVG’s are XML files that give the browser (or other apps) instructions on how to draw the picture. They can be small or large. Brushes like the vector brushes in Affinity create complicated paths statements to get the effect you see. SVG’s also have Basic shape statements(like rectangles, circles, Poly’s, etc) as well as Clipping and masking.

So drawing done with brushes can become extremely large(even larger than a png) as it creates giant path statements to make each stroke. However, the SVG will scall to any size without distortion, unlike the png.

Once you go through some of the basic tutorials on the Serif site, you can find a bunch of stuff on youtube.

This one is two parts (I’m just starting part two) and teaches a bunch about the tool, it’s pretty cool:

1 Like