Tutorial tip
Moderator: Forum Moderators
Forum rules
Before posting critique in this forum, you must read the following thread:
Before posting critique in this forum, you must read the following thread:
- West
- Retired Lord of Music
- Posts: 1173
- Joined: October 30th, 2006, 7:24 am
- Location: In the philotic connections between ansibles.
- Contact:
Tutorial tip
I found a cool tutorial that I would like to share with you. Basically it deals with giving photographs a cel-shaded look, but I found that it can also be used for a more painting-like quality. While not 100% convincing, the result is far better than just applying some "oil paint" filter to a photo.
What use do we have of this then, you wonder? Well, when I tested this I immediately thought of campaign authors who need artwork for their campaign intros. Instead of having just a black screen or some blurry map image, you can use a photo of some fitting scenery and use the method described in the tutorial. If you don't have any photos handy, stock.xchng is a great place for free stock photos (just be sure to check if there are any restrictions on the use of the photos). No artistic skill is required really; it's just a bunch of filters and the whole procedure takes less than five minutes. You'll need Photoshop though, but it might be possible to do this in GIMP as well, I don't know.
Here's a couple of my "processed" photos:
Example 1
Example 2
Note that I opted not to use Multiply for the top layer in these images, as I felt the result was more appealing without it.
Hope this will be useful. Have fun!
What use do we have of this then, you wonder? Well, when I tested this I immediately thought of campaign authors who need artwork for their campaign intros. Instead of having just a black screen or some blurry map image, you can use a photo of some fitting scenery and use the method described in the tutorial. If you don't have any photos handy, stock.xchng is a great place for free stock photos (just be sure to check if there are any restrictions on the use of the photos). No artistic skill is required really; it's just a bunch of filters and the whole procedure takes less than five minutes. You'll need Photoshop though, but it might be possible to do this in GIMP as well, I don't know.
Here's a couple of my "processed" photos:
Example 1
Example 2
Note that I opted not to use Multiply for the top layer in these images, as I felt the result was more appealing without it.
Hope this will be useful. Have fun!
I took a peek at the tutorial and cracked open some photos I'd taken a few months back. It was kind of fun so I ended up doing it a bunch of times.
My results seem to differ from yours, West, and also from the example in the tutorial, but they look cool enough for me so I like'm:
http://flak.dotq.org/screens_theducky/filter1.jpg
http://flak.dotq.org/screens_theducky/filter4.jpg
http://flak.dotq.org/screens_theducky/filter3.jpg
http://flak.dotq.org/screens_theducky/filter9.jpg
http://flak.dotq.org/screens_theducky/filter7.jpg
http://flak.dotq.org/screens_theducky/filter8.jpg
My results seem to differ from yours, West, and also from the example in the tutorial, but they look cool enough for me so I like'm:
http://flak.dotq.org/screens_theducky/filter1.jpg
http://flak.dotq.org/screens_theducky/filter4.jpg
http://flak.dotq.org/screens_theducky/filter3.jpg
http://flak.dotq.org/screens_theducky/filter9.jpg
http://flak.dotq.org/screens_theducky/filter7.jpg
http://flak.dotq.org/screens_theducky/filter8.jpg
There's nothing to tell...
In my eyes you're still a bot.
In my eyes you're still a bot.
- Sgt. Groovy
- Art Contributor
- Posts: 1471
- Joined: May 22nd, 2006, 9:15 pm
- Location: Helsinki
In GIMP the closest thing could be found under filters -> edge detection -> difference of Gaussians. The colour layer can be smoothed with filters -> blur -> selective Gaussian, which blurs without smudging the edges, thus avoiding colours bleeding outside the outlines.
I too tried the technique, getting quite carried away. What I found interesting was applying further effects on the colour layer, after smoothing it. The problem with painterly effects, like Gimpressionist, is that you can't apply them on pictures without smudging all the fine detail. It's ok for pictures you've draw yourself, if you have line art and flat colours on different layers, just apply the filter only to the flats. With this technique, you can do the same thing to photographs. Here's couple of attempts:
Usually edge detection doesn't work too well on human faces, but here I got lucky.
Here's an original photo and three diiferent versions of it, one with smooth colours and two with a Gimpressionist applied to the colour layer.
Now I probably should dig up some of my old nature shots, to see what I can do with landscapes.
I too tried the technique, getting quite carried away. What I found interesting was applying further effects on the colour layer, after smoothing it. The problem with painterly effects, like Gimpressionist, is that you can't apply them on pictures without smudging all the fine detail. It's ok for pictures you've draw yourself, if you have line art and flat colours on different layers, just apply the filter only to the flats. With this technique, you can do the same thing to photographs. Here's couple of attempts:
Usually edge detection doesn't work too well on human faces, but here I got lucky.
Here's an original photo and three diiferent versions of it, one with smooth colours and two with a Gimpressionist applied to the colour layer.
Now I probably should dig up some of my old nature shots, to see what I can do with landscapes.
Tiedäthän kuinka pelataan.
Tiedäthän, vihtahousua vastaan.
Tiedäthän, solmu kravatin, se kantaa niin synnit
kuin syntien tekijätkin.
Tiedäthän, vihtahousua vastaan.
Tiedäthän, solmu kravatin, se kantaa niin synnit
kuin syntien tekijätkin.
- Sgt. Groovy
- Art Contributor
- Posts: 1471
- Joined: May 22nd, 2006, 9:15 pm
- Location: Helsinki
For the heck of it, I made a whole bunch of castles. They pretty quick hacks, but should be good for placeholder story art (all the source photos are free, so you can use these for your campaign if you want).
Castle 1
Castle 2
Castle 3
Castle 4
Castle 5
Castle 6
Castle 7
Castle 8
Castle 9
Castle 10
Castle 1
Castle 2
Castle 3
Castle 4
Castle 5
Castle 6
Castle 7
Castle 8
Castle 9
Castle 10
Last edited by Sgt. Groovy on November 30th, 2006, 10:57 am, edited 1 time in total.
Tiedäthän kuinka pelataan.
Tiedäthän, vihtahousua vastaan.
Tiedäthän, solmu kravatin, se kantaa niin synnit
kuin syntien tekijätkin.
Tiedäthän, vihtahousua vastaan.
Tiedäthän, solmu kravatin, se kantaa niin synnit
kuin syntien tekijätkin.
- Temuchin Khan
- Posts: 1790
- Joined: September 3rd, 2004, 6:35 pm
- Location: Player 6 on the original Agaia map
Really? To me it doesn't look like a Union Jack at all.Jetryl wrote:Snip the flag off the first image - it looks too much like a Union Jack.Sgt. Groovy wrote:For the heck of it, I made a whole bunch of castles. They pretty quick hacks, but should be good for placeholder story art (all the source photos are free, so you can use these for your campaign if you want).
Check out my new book!
https://www.amazon.com/dp/1956715029/re ... oks&sr=1-1
https://www.amazon.com/dp/1956715029/re ... oks&sr=1-1
- Sgt. Groovy
- Art Contributor
- Posts: 1471
- Joined: May 22nd, 2006, 9:15 pm
- Location: Helsinki
Some more castles (I love castles, maybe you can tell):
Castle 11
Castle 12
Castle 13
Bridges:
Bridge 1
Bridge 2
Bridge 3
Bridge 4
Trails:
Trail 1
Trail 2
Trail 3
Roads:
Road 1
Road 2
Road 3
Road 4
Doors and gates:
Door 1
Door 2
Gate
Forests:
Forest 1
Forest 2
Ruins:
Ruin 1
Ruin 2
Ruin 3
Ruin 4
Streets:
Street 1
Street 2
Misc:
Decoration
Mountains
Now nobody has any excuse for black story screens
(If you want to use these as such, you can use these jpg version. If you want to work on the images further, you can ask me for the png version)
Castle 11
Castle 12
Castle 13
Bridges:
Bridge 1
Bridge 2
Bridge 3
Bridge 4
Trails:
Trail 1
Trail 2
Trail 3
Roads:
Road 1
Road 2
Road 3
Road 4
Doors and gates:
Door 1
Door 2
Gate
Forests:
Forest 1
Forest 2
Ruins:
Ruin 1
Ruin 2
Ruin 3
Ruin 4
Streets:
Street 1
Street 2
Misc:
Decoration
Mountains
Now nobody has any excuse for black story screens
(If you want to use these as such, you can use these jpg version. If you want to work on the images further, you can ask me for the png version)
Last edited by Sgt. Groovy on November 30th, 2006, 10:56 am, edited 1 time in total.
Tiedäthän kuinka pelataan.
Tiedäthän, vihtahousua vastaan.
Tiedäthän, solmu kravatin, se kantaa niin synnit
kuin syntien tekijätkin.
Tiedäthän, vihtahousua vastaan.
Tiedäthän, solmu kravatin, se kantaa niin synnit
kuin syntien tekijätkin.
- Simons Mith
- Posts: 821
- Joined: January 27th, 2005, 10:46 pm
- Location: Twickenham
- Contact:
Would anyone care to try out the technique on this image - http://www.simon-smith.org/images/fantasy_pool.jpeg - and post, email or PM me the results? (Pref. in jpeg format, as these pngs typically seem to be 1Mb+ in size.) It's just a stock image I happen to have handy, not even remotely 'Wesnothy', but if raytraced images - particularly simple ones like this - convert well, I could actually start contributing some art to the game.
In the meantime I'm trying to find out how to reproduce the Photoshop trick on my own platform, preferably using freeware, as I'm unemployed at present.
In the meantime I'm trying to find out how to reproduce the Photoshop trick on my own platform, preferably using freeware, as I'm unemployed at present.
Hmm... this result doesn't differ as much from the original as others in this thread have differed from their respective originals, but here you go:
http://flak.dotq.org/screens_theducky/fantasy_pool.jpeg
Apologies if this doesn't help.
http://flak.dotq.org/screens_theducky/fantasy_pool.jpeg
Apologies if this doesn't help.
There's nothing to tell...
In my eyes you're still a bot.
In my eyes you're still a bot.
- Sgt. Groovy
- Art Contributor
- Posts: 1471
- Joined: May 22nd, 2006, 9:15 pm
- Location: Helsinki
The technique is meant for photographs, so it can only be expected to work well on raytrace images of very real world-like scenes.It's just a stock image I happen to have handy, not even remotely 'Wesnothy', but if raytraced images - particularly simple ones like this - convert well, I could actually start contributing some art to the game.
For raytraced images a completely different cartoon-shading approach can be used, because they have (or at least have the potential of having) the depth and normal data of pixels, and more sophisticated results can be achieved.
I'm using GIMP, and with that, the procedure goes as follows:In the meantime I'm trying to find out how to reproduce the Photoshop trick on my own platform, preferably using freeware, as I'm unemployed at present.
1. First optimise the contrast of the image, so that edge detection has more to grasp on. Usually opening layer -> colors -> levels and clicking the autiomatic button is good enough.
2. Make two copies of the original layer
3. On the top layer, select filters -> edge detection -> difference of Gaussians. The right parametres depend on the image, but I've found 10-15 pixel radius for the first and 0 for the other to be good. Then open layer -> level -> color -> levels and adjust the levels to darken the line art. After that desturate the layer and turn white into transparency.
4. On the middle layer, to be your colour layer, apply filters -> blur -> selective gaussian. Blur radii of 10-15 and max delta 50-100 have worked well for me.
5. Sometimes the colour layer ends up too fuzzy, so you can lower it's opacity to 70-80% to make the original image show through a bit, to make some details to the colour areas. You can also try some painting-like effects on this layer.
6. Usually by increasing the contrast and saturation of the colour layer helps to change the colour space of the image into something less photographic. Altering the hue slightly can help too. It depends on the image a lot what kind of changes look good.
7. Last, set the filter of the top, the line art, layer to soft light, or dark light with decreased opacity, whichever looks better.
Tiedäthän kuinka pelataan.
Tiedäthän, vihtahousua vastaan.
Tiedäthän, solmu kravatin, se kantaa niin synnit
kuin syntien tekijätkin.
Tiedäthän, vihtahousua vastaan.
Tiedäthän, solmu kravatin, se kantaa niin synnit
kuin syntien tekijätkin.
- West
- Retired Lord of Music
- Posts: 1173
- Joined: October 30th, 2006, 7:24 am
- Location: In the philotic connections between ansibles.
- Contact:
I'm glad to see people are finding this useful. In fact I've been playing with this method myself and it's definitely possible to get some nice results. It is, however, a bit harder than I first thought. You can't just apply the same settings to every image, you have to adjust some things (mainly the Smart Blur/Cutout settings) according to the images. There's a bit of guessing involved, but it might become easier the more you do it.
I have some decent photos (taken in various places around the town where I live) that I'm going to give the paint-treatment -- I might post them somewhere later on if anyone's interested.
I have some decent photos (taken in various places around the town where I live) that I'm going to give the paint-treatment -- I might post them somewhere later on if anyone's interested.
- West
- Retired Lord of Music
- Posts: 1173
- Joined: October 30th, 2006, 7:24 am
- Location: In the philotic connections between ansibles.
- Contact:
For those using Photoshop:
I discovered that using Lighten instead of Darken when applying Fade Gaussian Blur will create a hazy, dreamy atmosphere with a lot of highlights:
Example 1
...and an example of what you can do with these processed images if you feel that they are still too "photo-like":
Example 2
I discovered that using Lighten instead of Darken when applying Fade Gaussian Blur will create a hazy, dreamy atmosphere with a lot of highlights:
Example 1
...and an example of what you can do with these processed images if you feel that they are still too "photo-like":
Example 2
Re: Tutorial tip
This is fantastic, I have been looking for something like this so long.
Cool.
Cool.
That's ridiculous, dragons have no windows...