[tutorial] Everything's a heightmap (if you're brave enough)


Philosophy, Politics, Humor, what ever should have its own place far, far away from galleries and feedback... here we can go for it almost shamelessly! :)

Forum rules
More than anywhere on this forum I'd ask you all to be courteous and respectful to each other, but don't hesitate to speak your mind! :geek:
Please, do not advertise commercial software here!

Please rate this tutorial and tell me if you want more of these (you got 2 votes to do so)

1/5: I don't get it / doesn't work / confusing
0
No votes
2/5: It's okay-ish / not really sure
0
No votes
3/5: Alright I went through it and it worked but I don't get the point of this
0
No votes
4/5: Yeah that's cool, thanks!
0
No votes
5/5: Oh my god I've been looking for this for so long!
0
No votes
I don't want more of those cross-software tutorials, keep it on Verve only!
0
No votes
Yeah gimme more, art is all about using all the tools we can!
0
No votes
I just want to use my vote because I'm a free spirit.
0
No votes
I'm a cat so I'm sliding my vote off the table, deal with it.
0
No votes
 
Total votes : 0
User avatar

Posts: 63

Joined: Sat Apr 05, 2014 2:11 am

Post Tue Feb 16, 2021 6:31 am

[tutorial] Everything's a heightmap (if you're brave enough)

title.jpg
title.jpg (233.66 KiB) Viewed 722 times



Welcome everyone into my new show "It might be Monday but I don't wanna work so let's make something else, like a tutorial", I'm your host.

One of the most unique feature of Verve is its 2.5D workflow (the bump) and I always got frustrated by the cold hard reality that an image doesn't carry z-axis data, meaning than when you open it in Verve,
no matter how beautifully complex its textures are, it'll be a flat layer and your brush strokes will build over it as they would over a flat color. Well, I'm about to change that c:!

Verve in all its might doesn't have the power to do that (yet) so we will need an extra tool to prepare the image. I will use Photoshop CS6 because this is my bread and butter, but I'm fairly confident that Krita,
which emulates Photoshop would do it without problems. Also, Krita is entirely free. You can get it there: https://krita.org/en/

Disclaimer: this technique is what would call a professional one, it is not hard per say, but you can't mess up either. This is why I've tediously screenshot, highlighted and noted every single clicks, windows etc.
This might feel redundant for those who are used to it but trust me I went through a whole lot of experimentation before reaching the desired result so please stick to it. Because of the post length it might
seem like a crazy long task that will take you hours but it is not (at all), once you'll master it you will pull it off in less than a minute from start to finish. Ready? Go!


PART ONE : Preparation

We gonna need a file with a texture we want to paint over, since my intent is to turn the texture as the canvas - this, though, will be the very last step and you'll be free to simply keep it as a layer.
For this I go to Unsplash, a website where photographers upload images under a type of license that allows you to use it however you want, and it's always proper HD - perfect.

I'm gonna use this one, click once on it to load the HD, then download it : https://unsplash.com/photos/P1uZQsVUSmY



In Photoshop

You turn the image into grayscale (image > mode > grayscale), flatten it if asked, click disregard when prompted.

002.jpg
002.jpg (30.07 KiB) Viewed 722 times

(from now on my captures will be in grayscale, your UI won't change, it was a mess of screenshots & file formats.)

And also turn it into 16bits mode (image > mode > 16bits)

003.jpg
003.jpg (29.6 KiB) Viewed 722 times


Select everything by hitting ctrl a then ctrl c to copy.
Now you need to open the channels window... (window > channels)

004.jpg
004.jpg (23.78 KiB) Viewed 722 times


... And create a new channel (your image will turn black, it's normal)

005.jpg
005.jpg (13.64 KiB) Viewed 722 times

006.jpg
the new channel is created, the image is black - everything goes as planned.
006.jpg (34.34 KiB) Viewed 722 times


Now hit ctrl v to paste your image on that new channel then click on "load channel as selection"

007.jpg
you will see your image "blinking" once loaded as selection, it's because Photoshop is doing a whole lot of selection work.
007.jpg (13.93 KiB) Viewed 722 times


Now open the layers window, from now on we will not go back to the channels window. Before doing so make sure the Alpha channel is the one highlighted like as on the previous screenshot. Good? Good.

008.jpg
008.jpg (37.63 KiB) Viewed 722 times


In the layers window

Create a new layer by hitting the icon shown here:

009.jpg
009.jpg (10.67 KiB) Viewed 722 times

010.jpg
be sure the new layer is highlighted as shown here before proceeding to the next step.
010.jpg (12.71 KiB) Viewed 722 times


Now following those steps you gonna:
[1] select the bucket tool
[2] make sure the white is on top (if not click the miniature double square and/or the double arrow to invert)
[3] make sure to have the settings as showed here
[4] click anywhere on the image once to fill your selection

017.jpg
Once filled with white the image will appear brighter
017.jpg (242.77 KiB) Viewed 722 times


Now you can delete the background layer by clicking on it then clicking on the trash icon.

012.jpg
if for some reason Photoshop doesn't let you delete it simply grab it by holding the click and drag it above the trash, it will do.
012.jpg (12.27 KiB) Viewed 722 times



Congratulation you just isolated the highlights of the image! :beer:
(Quick note: this is how you take a line drawing out of the background for coloring, simply use black instead of white then create a new white layer under it at the end - tadaaa!)



PART TWO: The trick

Now hit ctrl d to deselect (the blinking effect will disappear)
Right click on the layer then click on "blending options"

013.jpg
013.jpg (18.73 KiB) Viewed 722 times


A "layer style" window just opened:

014.jpg
014.jpg (49.97 KiB) Viewed 722 times


At the bottom of the left column there's a "drop shadow" tab, go there.

015.jpg
You'll notice the aspect of your image has changed, this is the magic :)
015.jpg (46.91 KiB) Viewed 722 times


We gonna apply some basic settings, once you'll got this feel free to experiment in this section. Only change those settings below for now, let the rest as it appears:

set opacity at 100%
angle at 90º
distance & spread at 1
size at 40

016.jpg
pro tip for later: This emulates a dynamic light and shadow over your layer. This means if you use an image with the light coming, say, from the lower right, you should then orientate the angle with that in mind so the effect will be in line with your image.
016.jpg (63.62 KiB) Viewed 722 times


Once you've clicked OK, the work is done. We can proceed to...


PART THREE: Saving


You gotta turn your image back into rgb mode (image > mode > rgb)
This is crucial, if you flew through the tutorial because you're like me and think you know well enough what you're doing, then the image appeared like s*** in Verve, well, this is why. Verve uses rgb,
so you must feed it rgb images.

018.jpg
018.jpg (32.66 KiB) Viewed 722 times


A note about performance and image sizes

If you used the image linked at the beginning you have to know it is about 5300 pixels wide, which makes for a whole lot of pixels. Verve at the moment uses a lot of resources and I would advice to reduce
the size of the image now. As a point of reference I have a Nvidia 980 (4go of VRAM) and 16go of RAM, I've eyeballed that the maximum size I can play with in Verve is 3000*3000px (or any multiples of that) while
keeping everything stable. If you don't really know about numbers simply look up the model of your GPU, if it's lower than mine, go for lower resolution, if it's higher, well you probably know what I'm talking about then.

To resize the image go to image > image size and introduce the width you feel appropriate in the dedicated field.

0181.jpg
0181.jpg (47.97 KiB) Viewed 722 times

0182.jpg
0182.jpg (46 KiB) Viewed 722 times


Once done, hit ctrl shift s to "save as". Under the file name expand the format field and select .png

019.jpg
019.jpg (32.28 KiB) Viewed 722 times

020.jpg
disregard the warnings
020.jpg (39.15 KiB) Viewed 722 times


choose where you want to save and click save.
Photoshop will pop a last options window, select compression none, click OK.

021.jpg
As for the previous warning regarding the grayscale / rgb thing, I suspect this step is also crucial - I didn't investigated it, but if something goes wrong this might be because you choose compression smallest / slow, which is the default option.
021.jpg (19.29 KiB) Viewed 722 times


you must close Photoshop now, it uses your GPU like verve and those 2 don't go along. Also, you don't want Verve to know you're spending time with Photoshop behind his back :P
(Photoshop will ask you if you want to save the changes, I'd say yes if I were you. It will pop the saving window once again, as format select .psd, which is the Photoshop format, and save. This way you'll be
able to open the file later with all that work already done and all you will have to do is opening the layer style window to quickly adjust the drop shadow for further experimentation.)


PART FOUR: In Verve, the pay day!


Time to open our beloved software, Verve. Usually it crashes on me when I open it after having used Photoshop. My best guess is that the GPU's memory needs to dump before being reallocated.
If that's the case for you too, no big deal, let it crash then reopen again.

note: no more screenshots needed here, it's really straightforward, and short mind you! :hihi:

Hit o to open your image, when asked "change the resolution?" click yes

You image is now opened and you might notice something cool - it's not a flat image as usual when you open something! It has bump! Yesss boiii! You did it c:!

Turn it into the canvas' texture (optional, but this is the point of my tutorial)

Adjust the bump at your taste with the "layer" options panel, then hit ctrl p once to change the canvas texture from woven to current layer's paint.

The canvas is now set, just hit "clear" to remove the paint from the layer

022.jpg
just in case you don't know about that button. Warning! No undo on this!
022.jpg (7.57 KiB) Viewed 722 times


And voila! You now know how to turn any image you want into a custom canvas!

I hope you found this tutorial useful and well made, for ease of feedback I've made a poll please vote on it and explain in the comments if needed.
Thank you for reading and also a big thanks to Taron for its software and also for allowing me to create such a long post full of images etc.

Bonus for those who read everything: here's the texture I've used for the title of the tutorial. It is a different one that what we used here, it's a wood plank basically. Careful though, it's 4000*2600px.
(the download button is in the upper right corner)
https://drive.google.com/file/d/1ExqaTU ... sp=sharing

Now, go paint! :bounce:
Cheers :)
Freelance illustrator, painter aka Pierre Demet, Hell_Cat, Ka-Z
980 / 16go ram / w10 / Huion Kamvas Pro
User avatar

Site Admin

Posts: 6407

Joined: Sun Nov 10, 2013 1:38 pm

Post Fri Feb 19, 2021 11:02 am

Re: [tutorial] Everything's a heightmap (if you're brave eno

With voting and everything! :o :hyper:
Well, you certainly should add some more cool (colorful) results, too, probably right at the top so that people see what cool things can be done that way, you know. Other than that, it looks perfectly in-depth! :ugeek: :ob

Hahaha, jeeez, took me to read the last line to realize that your title showcases the texture, hahaha... :oops: :hihi:

Thank you for making and showing all this, really great! :beer:

BUT...
Apparently you do not realize that Verve will use color brightness as height, if you import a 16bit png! :geek:
...so...yes, it does!
What I haven't done is given it options. Currently it literally just uses the brightness as height and only for 16bit images. 8bit images remain flat, because 8bit just isn't enough for decent height.
You can, for example, save a 16bit depth image from Scultpris or any other 3d app, make sure it's a 16bit PNG, which you can get out of Photoshop, too, if you needed to convert from Tif or whatever format and then import that into Verve 0.99w.08
Give it a try! 8-)

Also, I've absolutely never had a crash after closing or even still using Photoshop, but I'm still on CS5. Not sure if Adobe's journey into openGL made THEM forget to clear and free the framebuffers/texture memory. I've had that happen in Javascript, where I simply didn't even think of delete my buffers, causing plenty of troubles with the poor browsers, who didn't know what hit them, hahaha. But once I caught that (Thanks, Lemi), I had no more troubles like that. Verve itself has ALWAYS deleted all textures and buffers, which is why you encounter the whole "let it crash and then start again" issue, because it is Verve that saves the day, amazingly! :hihi: 8-)
Here to help! :D
http://www.taron.de
System Info: NVidia Gforce GTX 970, 2x 8core Xeon (2.67 Ghz), Windows 7

Return to Off Topic

Who is online

Users browsing this forum: No registered users and 3 guests

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by ST Software