Help for combining shapes and colors

Post questions on how to use or achieve an effect in Inkscape.
Dadouvic
Posts: 10
Joined: Tue Oct 28, 2014 3:14 am

Help for combining shapes and colors

Postby Dadouvic » Tue Oct 28, 2014 5:45 am

Hello :)

I am creating a simple Android game and I wanted to do all the simple 2D graphics with Inkscape, however, I don't have talent for 2D graphics...
This is how I see my game in my mind :
http://i.imgur.com/aPlslsF.jpg
(Sorry for the quality)

Shapes are easy to create but colors... all looks so "disgusting" I know this is my fault x) but I don't know how to improve myself. I read some books, watched some inkscape tutorials about building and characters...
I am still in lack of inspiration. If you have some techniques for me, it could be very helpful :)

Thank you for your reading, see you :D

tylerdurden
Posts: 2344
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Help for combining shapes and colors

Postby tylerdurden » Tue Oct 28, 2014 11:27 am

There are some fine tutorials right inside Inkscape, that will help any new user.

Image

After you have become familiar with those, there are fine tutorials linked in my signature file below.
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Help for combining shapes and colors

Postby Lazur » Tue Oct 28, 2014 11:46 am


Dadouvic
Posts: 10
Joined: Tue Oct 28, 2014 3:14 am

Re: Help for combining shapes and colors

Postby Dadouvic » Wed Oct 29, 2014 8:12 am

Thank you for the answers :)
I already checked this links... XD I think 2D is more like a talent. I am trying to obtain something like that :
Image

But I think, here, the drawer has good skills ! this image reflects exactly what I am looking for (with more curved shapes), this is like the perfection

I tried some tutorials, even simple tutorials.. always stuck with bad colors :(

See you and thank you :)

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Help for combining shapes and colors

Postby brynn » Wed Oct 29, 2014 9:40 pm

Oh, isn't that a cute drawing! Yes that artist has some good skills.

"bad colors"..... Hhmmm.... It takes a good deal of practice and study (and/or some natural talent), to learn how to use colors effectively.

Did you find the palette that runs across the bottom of the canvas? The default palette is a very basic one. But if you click the TINY left-pointing arrow on the far right side of the palette, it will open a menu with several more, different kinds of palettes. You could even make your own palette, although it sounds like you might not be up for that yet. If you have access to GIMP palettes (I don't know where, but internet search will find some), those can be installed too.

Somewhere in this forum, someone posted a palette of Crayola colors. You can probably find it by searching "crayola". I wouldn't call it exactly a huge palette. But it has a lot of fun, bright colors!

Edit
PS -- One tip: If you import that image into Inkscape, you can use the dropper tool and copy those colors onto the objects that you draw. Or if it's a gradient, you can use the same technique, to color gradient stops.

Dadouvic
Posts: 10
Joined: Tue Oct 28, 2014 3:14 am

Re: Help for combining shapes and colors

Postby Dadouvic » Thu Oct 30, 2014 4:31 am

Thank you for Crayola palette ! :) it can help me a lot.
I know all this things about colorwheel, dropper tool, ... but I think I am looking for some good tutorials in order to details objects (as the wood on my reference image for example).
I tried to create shapes, and the result isn't so bad, but when I try to apply color... ahha XD so bad, but I agree, I don't have this natural talent.

Anyway, thank you for the Crayola it will help me a lot :) see you

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Help for combining shapes and colors

Postby brynn » Thu Oct 30, 2014 9:19 am

I don't mean to be too personal, but if colorblindness is a factor.....well, and this was a really long time ago, someone posted a link to a color tool for people who are colorblind. I'd have to do some searching. Of course you could always post a screenshot, and ask for suggestions. Although it sounds a little like you kind of enjoy to learning on your own. I can relate to that!

On the subject of learning on your own, you might be able to learn something by browsing Dillerkind's thread. He has a slightly different style than your example, but still there's so much I've learned from his work. Look in Finished Work board for "Dillerkind's Image Pool", or something like that.

The best way to learn from someone else's work, is to look at their SVG file. Dillerkind doesn't share many....if any, that I can recall. But you could try searching Open Clipart (openclipart.org) for images in the style you want, and download the SVG file to study how the artists make various effects work. Not everyone posts the SVG file, but many do! I would be glad to share any image of mine, but I don't work in that style (wish I could!) Anyway, when you search, you may want to use "inkscape" as a search term, because SVG files made in Illustrator or other vector editors may contain things that Inkscape doesn't recognize, or can't handle well, which might inject extra confusion, at this point.

And one more tip -- The colorwheel is only one way that Inkscape provides for coloring. Personally I find the colorwheel difficult to use. Instead, I find the HSL tab much more helpful, for example. So if you haven't already tried the other tabs on the Fill Paint tab of the Fill and Stroke dialog, you might find another way that's easier for you.

Sorry to be rambling on and on. I'll browse through my collection of tutorials, and probably there will be at least 1 or 2 for the style you want. I'll post links shortly :D

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Help for combining shapes and colors

Postby brynn » Thu Oct 30, 2014 9:59 am

Ok, here we go.

Chris Hilden'sbrand series of excellent tutorials are in a style that's kind of close to what you want. Leans more towards guns, helicopters, army-type characters.....sort of like boy toys, I guess. But definitely he covers drawing wooden objects. Note that later tutorials build on what was learned in earlier ones, so he emphasizes to start with the first one, and move on sequentially. Here's the first: http://2dgameartforprogrammers.blogspot ... rcles.html.

David Shaw also has a tutorial for drawing in a cartoon style. It's pretty much outdated now. But I keep it around, because it covers as much about creating characters and style, as it is about using Inkscape. http://www.trazoi.net/tutorials/inkscap ... index.html

ha1flosse made a very short and sweet tutorial for cartoon characters. At first glance, it's easy to dismiss it as just too simple. But since you're stuggling with color, notice how the darker green shadow object affects the flat light green character. From what I've seen, a lot of comics use this style of shading and sometimes highlighting.

Oh gosh, I almost forgot Xav and the Greys! (Shame on me!!) The Greys is a comic that Xav and a buddy of his publish monthly. And the best part, they provide the SVG files for you! Look in Finished Work board for "The Greys" (I think that's the title). And the even better part, is that Xav has published a whole, huge, very impressive series of Inkscape tutorials. See Tricks and Tutorials board for a thread with "Full Circle Magazine" in the title. Oh, or here's a link to the first one. They kind build on each other too. http://fullcirclemagazine.org/issue-60/

OK!! That's all I've got. Happy Inkscaping! :D

Dadouvic
Posts: 10
Joined: Tue Oct 28, 2014 3:14 am

Re: Help for combining shapes and colors

Postby Dadouvic » Sat Nov 01, 2014 5:01 am

Thank you a lot!
seriously, you are so involved! you helped me a lot :) I knew GameArtForProgrammers, but I found some new tutorials I did not know thanks to you :)
So, I am trying to create some beautiful things (difficult haha), and I keep going to try hard!

Thank you a lot :) maybe I can post some work I do, in order to have some feedbacks from you :)

See you! Thank you to be so involved :D

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Help for combining shapes and colors

Postby brynn » Sat Nov 01, 2014 1:26 pm

You're welcome. Glad to help. I probably can't give much technical artistic advice - just general comments. But others here can.

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Help for combining shapes and colors

Postby Lazur » Sat Nov 01, 2014 10:13 pm

You don't make it easy to not to give you the easy answer, do you?

So this is what you have for a start:
hlp155II.png
hlp155II.png (495.86 KiB) Viewed 4839 times


What is the proportion of the game screen?

How the panning will be made?

Usual side scroller games have only some layers for a 2,5 D view, thus if the background would be made of several 1 point perspective images, it could look way off.


Where is the viewpoint at?

In your image, you have your viewpoint at the second floor. Not so conveying for the street level.
Nonetheless as I pointed out before, perspective and vanishing points may better be left out anyway.


What is the size of the characters, what is their size compared to the background?
What are the proportions of the elements you are using?
The previous example image have it's proportions off.
Pear the size of a car's wheel? First floor height half of the entrance door?
Car width the size of half an elevation's?
The spirals and bright colours may make it pop but that's not a good background in my humble opinion.
At least it does show no sides whatsoever of the objects.

Yet another one, to start the colouring once you have these things right.
You will need to decide wether you see an active element, a sprite of the characters, or the background.
One of the worst mistakes in when they are not separated right visually.

So try out your characters immediately if the backdrop suit them well.
The example image above may be too incoherent with a character and would make distinguishing harder.

Usual scenario: the character is in the front, covered in darker shades. Thus, the background needs to be lighter, and contrasting enough in colour.
Like again, in the previous example image the windows reflecting the sky doesn't help it.

There are a ton of examples out there, did you take a large research?
And sort them out in a focused way, which one of the imagery do you like, and what makes them look better?

Dadouvic
Posts: 10
Joined: Tue Oct 28, 2014 3:14 am

Re: Help for combining shapes and colors

Postby Dadouvic » Sun Nov 02, 2014 12:04 am

Ok :) Thank you, I well understood what you said.
My proportions are clearly bad I know, and for the type of game I am creating I deleted this "perspective" :)
For the viewport resolution, etc... I already chose one. For the gap at the bottom of the image, it is just a simple road in order for the player to move the 2D character seeing it. I mean, he has to use his fingers and to drag it, I dont want him to drag it by order touching the character (Indeed, in this case we canno't see the character x)).

So, I have to create a background lighter than my player ? I would have think reversly.

Yes, I did some research, and I am looking at a huge number of game, as Angry Birds, analyzing it.

Thank you for the help :)

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Help for combining shapes and colors

Postby Lazur » Sun Nov 02, 2014 1:43 am

Felt playing with it a bit more:
hlp155b.png
hlp155b.png (317.24 KiB) Viewed 4813 times

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Help for combining shapes and colors

Postby brynn » Sun Nov 02, 2014 3:56 am

So, I have to create a background lighter than my player ? I would have think reversly.


I'm not 100% sure I understand what Lazur means, as far a desiging a game. But in general, objects or people who are closer to us are darker, and objects further away are lighter. That's one way to imply distance or depth in a 2D image. Although if there is a definitive light source that plays some part in the image....for example, if the image was of actors on a stage, with spotlights, etc., perhaps the objects/people in front would be lighter than those in the back of the stage.

But maybe it depends on how much realism you want. Maybe depth or distance is not very important - I'm not sure how the game will operate.

Dadouvic
Posts: 10
Joined: Tue Oct 28, 2014 3:14 am

Re: Help for combining shapes and colors

Postby Dadouvic » Sun Nov 02, 2014 4:19 am

I think he was saying the reverse thing... I don't know haha, I thought we had to represent far object darken than close objects, but, you said the opposite :) I trust you haha
Thanks for the trick

Dadouvic
Posts: 10
Joined: Tue Oct 28, 2014 3:14 am

Re: Help for combining shapes and colors

Postby Dadouvic » Sun Nov 02, 2014 11:28 pm

Hello :)
I tried to follow some tutorials and I made this :
Image

I tried to add some details by myself, but it does not appear as I imagine it haha.
For example, the door seems to be unicolor (it is!), I tried to put some things on it but it is very hard to obtain something that does not appear "wrong" in the scene.
I will make the background lighter, to create a depth through layer :)

If you have some ideas to help me to improve my building :)
Thank you :D see you

hulf2012
Posts: 716
Joined: Sat Nov 24, 2012 12:37 pm

Re: Help for combining shapes and colors

Postby hulf2012 » Mon Nov 03, 2014 12:44 am

Hello

I've found some inspiration for you here:
http://365thingsaustin.com/wp-content/u ... aphic3.jpg

About your first artwork,it's a good try It's good, I mean, it looks good, it's not a Canletto, but who am I to criticize it?. The first thing I see is that the lateral black borders are too wide. Even more, some time ago I read that it's better not to use black at all in graphics for a game. For example your building is "red". So, for the borders use a darker red.

There are many thing that matters in a drawing.

I see that you are playing safe in the perspective thing here. I don't support it but it's OK.
Because, even with all its problems, sometimes is good to see things like this
http://3.bp.blogspot.com/-ixdB1qN2TPQ/U ... -+1079.png

I also would like to talk about sunlight or time of the day and its importance at the time to choose colors, shadows and ambient. But is a subject where sometimes I also get confused

Greetings
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Help for combining shapes and colors

Postby brynn » Mon Nov 03, 2014 2:54 am

Hey, that's not bad at all, for a first try!

One thing I'm not clear on. I thought you said this was a game for a phone? Or is it for tablets too? For a phone, the screen being generally so small, there's just not room for a lot of detail. Tablet would be another story. What you've drawn seems about the right amount of detail for a small phone screen, to me.

The one thing that sticks out to me, is the windows. They are all the exact same size, and aligned very strictly, and much brighter than the rest of the building. They need something, although I'm not sure exactly what. For a real house, in a realistic style, of course you'd want the windows to be in line. But if this is to have sort of a cartoon style, some windows could be slightly larger, or slightly out of line, or at least a couple could be colored slightly differently. I'd probably start by varying the coloring slightly. Maybe change the window outline color, or maybe even use a gradient for the "glass". Or maybe like your hand sketched example, where the lines forming the windows aren't even exactly straight. Just a little variation like that. Maybe some windows could have curtains in them -- like if it was an apartment building.

User avatar
Xav
Posts: 1209
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Help for combining shapes and colors

Postby Xav » Mon Nov 03, 2014 9:26 pm

One thing I would recommend is using the HSL colour selector in the Fill & Stroke dialog, if you don't already. HSL makes it easier to create related sets of colours by keeping two of the sliders the same and varying the other one - either related tones of a single colour, or different colours with similar vibrancy.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter

Dadouvic
Posts: 10
Joined: Tue Oct 28, 2014 3:14 am

Re: Help for combining shapes and colors

Postby Dadouvic » Mon Nov 03, 2014 9:44 pm

Thank your for your answers :)

I am modifying the shape as you said it :) I will post a new image soon.
Yes, I am using HSL colour selector after choosing the color I want in the Crayola Palette :)

See you and thank you :D


Return to “Help with using Inkscape”