Avery

Sleeping Dinosaur
Restaff
Joined
Oct 13, 2012
Messages
3,740
Reaction score
25,335
First Language
German
Primarily Uses
N/A
Parallaxes are a great thing, and people like me spent too many hours just joyfully mapping mountain cliffs (with nice waterfalls) and a great view by utilizing them.
But what if the great view doesn’t loop?
What does a picture have to bring to be “loopable”?
And how do I make it loop?

First, the most important question: is our base actually loopable?

A good example for something we can get to loop horizontally is the wasteland Titlescreen (all shown examples come from RMMZ):
hkEfr5tUIueSIL-mw-SJp2WTYWa3f-8T0oOyw5InZZsgISoxiQDWXCJTUu_EMO4QNtKs5zV1ipqAWw9Y9AzPZkUBFTPzrqqnsa8GcTKqONhyHvTfCVMrRx6Z2MCrD8KDd2AkGBgPceZC_hyP-3Q0lQ

That is so for several reasons:
  • while there is some perspective involved, we don’t have one clear vanishing point, for a looping background that might look odd, when the background moves and you suddenly have your objects belonging to two different vanishing points visible
  • there is nothing giant and distracting, imagine walking over a huge mountain and experience the same building fly past multiple times in the distance
  • the left and right sides are not too far off from each other, they share the same components at nearly the same heights. This is crucial when you need to make them work!
  • a controllable light situation: soft ambient light works best. Imagine you have a repeating sun or you have to stitch a very dark side to a light one or have conflicting shadows…
  • since all of those factors are easier to control for an artist than for someone taking a picture, you are usually better off doing this to a drawn background

Here is an example for something that would be something I personally would not (want to) stitch:
J01VKOKLugg6-RNoe_y6zeMDsgzUzo-lpjZ-yYVm-KV2DrFrcRJHZ-SEQgE6-A4K4yz4mdXhMaMh-DeZsLiTQwEqRmYCQ6MzemjFXi0Z2_7oeuxKBumdDcJxJWArf_WpP0s06nFVlkfOy6Q9Dgidzg

  • The temple is too unique to have it repeat in the background, unless we have a giant temple area as Angkor Wat
  • We don’t have enough tree material to stitch the trees on the side, so heavy redrawing would be needed
  • The water line seems to go diagonally and it would be difficult to make it believable with its place and the temple

T676FDge4cgqyrWLwJj_0GvFiy1UFPjOrWER-spO6qz1uRoYu_Wnpjr0vkOUg4Kwhtrne-2vmg7L868CDdlDjLyyrfMU5k-il1KZGhRZ849LtT7tjhfD6Q4sHcxkxg53iSNykTu4bDGMj5oT4oj23A

  • Here the whole wall and door situation is very doable, but the floor is an issue: it has a clear vanishing point in the center and we cannot make it work unless we create a whole new floor situation. It might be possible, but since it also leads into the light we’d have to reconstruct the lighting situation as well.

Everything what follows was made with Gimp which is free and a mouse.

So, to begin, we simply open our little project in Gimp, and depending on your image format, if you start off with a title screen like we do here, you need to set the image mode to RGB first.
Then we duplicate the layer, as we want to keep the original on hand in case we need it to grab an element from it. On our duplicated layer, we cut the image in half and paste it onto a new layer, swapping the side for both pieces:
GdJMTOZJBeNN_MK_ZoGGSOg34b58K4_NmVFoiL104Xv6RnC7Bv-5ZHQX5cAvDc7jM8eptQcqNrw0vyPVqy31DQMBRO6sWXkzmxS-0v26XtSpQmdD-Pr1_qkhY4U4BPGpoUHAdl1emBJNct93mDD1Rw

That way, we transformed the problem. Instead of trying to stitch two sides somehow together, we have a looping image with that… well, let’s call it a crack in the middle.
Now we have to use a clever combination of copy and paste, clone stamp, healing, redrawing and everything else that helps to make it one image instead of two.
_OSj7jkt5659oR7qrdsIcn7F-AlzrU6NjZvTejP3-nZ9qxIAOKxm0h-xIK7FbVd5RhthqJ91OAoZ4WivCi8DdgKlVHN2tZKNYe8_LNe7kSTani6SgNsQcHKfElvFo1s-NlL0T_qSVPNU2dwL2qShLw

This area in the clouds for example already looks super good already, we just need to fuse those areas into one by closing the outline and erasing the clear crack.
For the outline, copy paste can be an option, as we have this neat bit on a different part of the clouds:
9wguExN87wOXztxp08qccgHQGADGEpbWW_orC2NLm8knjl9C7iPzNeMMseDLqJ-sZpnr1fXji3LVgFQU1Je_C3s5QsUyb6C4fbpYa7W9IXbbWNoDapndaZm1SgTfz2HwqVjgUydechpyNZcamrmFXQ

With some rotation and slight recoloring it fits snugly into that gap…
z42dWlhQYwH70YHS1Nyma6ubsNQjkx2yEO1OZtXO8bNJNTvfz-ila4xHs6YVJHIC48RpcBvLzNj1I8woopdK6WKnQ_VgFZYOZb3jE5pGj3rnI2OkqXA0Vch0BxzXxNN4LJu-YiLWlns1CmMxfKiOVQ

…and then we can just trim off the excess with a soft eraser:
s962ZNPIaw1hPoUYigQBR-Hu1NboiklH99is9kKh4pZENejKKT_ZFZE_CJZ5qkIBPCI9P3kEy-LjA-1q56rv_63ouccp0c3kBNT65-gfWC9O_rOukyGyMSoppuQSRUjJBC9dx0SJo6OAU2-T9e6xPw


For the rest of the issues in this cloud we can use the healing tool. Healing takes a part of the image as “source” and tried to fix the location you are working on with said source as reference.
For the clouds we place our source on an intact part of the cloud and carefully work over the problematic area:
19VMyS6M_VENKmxbDswTe4msZvrOWsx3yGQaMlkHfL1XDYrlzv9uH-rWsaAPFPM8sq9-z4NT-1fE_dTcqnOSvKcFo7jkzBGGH7VMgHkpDu0E7oM7Ms09QgUeJQOr5v5BgmL3bAy4_4JM8vsLG9qHIw

As you can never say if the algorithm does as you wish you will have to try around yourself when it is a valid option. Remember to place your source by holding control and clicking before you can use this tool!

And after we healed the cloud, the image starts coming together:
G5W5RinWZSwu0n4x7HNL1uhmzCK8OctPL8mj6nB5YnrbLw_cSN12I7zq2SVobrNSYmyhGOT0d2YrsSl3LMoWkmQBAlwfShAFRBn0DXJkF4mg9oaw0CQMi64R5wsGnkXGdtpcoTmRV6QsKMOt_ILJzw


So far we used healing and copy and paste, and those are my two go to tools as far as they carry me and you will be surprised how far they can take us, if used carefully.

Remember we saved the “starting” image on a separate layer?
The middle area has a giant section of nice ground:

E7fdsIl5r9-RHPttyalbdAOw7MLadz2Qw6E0yeRyBGRfiqVGDLF_IHGHRzhurjyn9o9YkhbcZrpaIxr92fxNfv7XNJUVlsaDc3uqhJbYip_NpA5eHX7u-F71Zcyzobmj4Ip76mTbCe93jDbUzD8prw

Let us copy it and paste it on top of our work in progress and see how well it fits in:
ipAN6Ndsn0LAT3x6mRxNKDYz-59zcs8OM-G_KVMdz4CJxzVMJg_tjq7Felso_61PC1a-_bqMlkEwreC_duKgzEXkqMMTKYNmJjAAbFfuV8SYP35-hmeOJGW4Nl05fZOKXrzHsqyUgWlAtbE4LvloCA

That again already works pretty well, and covers that small bush part that we had in that section before. In fact all we have to do is to either use a layer mask and a soft black brush or a soft eraser to create a smooth transition to that new area. The rule of thumb is: trim away as much as you can while keeping a good looking pattern, that way you have less repetition.
1iRgnqaue1s6PBSvmNsOJcwVkUeMp4iZXKMESkz00Mj0sdXRZhJdERfT8GzMcXleW1dd7a7Hauz3LhLgA6rz6kicnZ7eLiCscrTy4_Ag-8EhdknHcdbUp6DrWGDWXZ-_NpUUYBoa1Ju5iNszI2oReg

We leave the top area unfinished, as we don’t know yet how the mountains will turn out there, but with this simple edit we closed up another huge part of the image.

Now we enter the “okay, here we need to draw”-area, right?
No!
If you are stuck at a certain part, take a step back and analyze your issue. Can you get rid of the element that is causing trouble? What would you have to draw to solve your problem?
The second question is the one we need to ask in this case, we would need to draw the left side of the hill to somehow connect to that dark right side.
And we have hills. Just at a different angle, but… we can rotate!
That is what we do, we copy our mountainside…
bWDqe-BtsVWemUHLmFhZXSKQllwJ0kL5nAf4qenyKxCjeGh5bo77S7y49UD52jdSwTvMfrY2Baf8QNRYf92E4vPbtGcg84rqzCGOAjgW-1X33jHM6sU5oyHsV9c0Fyix1P3ImXypgV6_vJIF2FMEZA

…and paste it in rotated at the angle we need it to be:
rM9DF9VpfFtx-p5Rgu8td_kak6hhkiwObWtfRCQ8M58bEXxqDF8K3S2zeLQVleAsomt_JWgT4YzQKASF1x-5USY6d-6z9KX8Ae5bip5I3XZY2r2_ntc-IxYe0G-i4mMZhbWKrIJVJZ18RXNMLK_MYA

Then, since we now have to do a lot of careful working over that piece, we set the layer’s opacity so something around 50, so we can better see what we need to take away and what has to stay.
rGXCRphsvq9s3nCUoV1bVi_EML73HYbI1dfoMxCTDfQAJIRyxURRJGLcYGr8WJkBJBUKqeNDNu0c66zaSYFOHothf8qV4t0vp0-Pi9cjp9Zucz8gZQE5_RfWDnrT-pnI5rZosTrqUhIYByoZOB5FBw

With again a very soft eraser we carefully follow the structure of that mountain piece and “work it into” the surrounding parts:

daLoZoBddC6WtIUcu1cvsyubqFkifv-uE_aRwsWj6892kDXD_fLQQYSEqpdiIZbHPoQPuEjhr2IUNSQjEGmV046NeUwo9hHuAR1v25hoqFQgdZqgd4bNhXH7M8qQn-MPnklGI9GXGBhSOz80Wju8fA

Now we use a layer mask and a black brush to let the branches be on top of it again and since we now know how the mountain looks like, we use the eraser on the ground as well to make everything fit:
wjze7WldXx5dl2lTfUugS4lS6WfGAXa1lgw-ZnhTpHKclu09yiJ8s8fppjAhmrWunWUy9Ylt0QakVbt7nnnQyy1UpoUJlJfKXwufgoVab0RpcmYVP6gfmNHTuRyYnRzitfs26wrokSmFFV67XsMV9g

So far all we did was clever copy and paste, erasing and some healing!
And you can bet that we stick to that!
What worked for the ground can help us with the sky as well, so we copy a large piece of intact sky, this time we mirror it so we kinda create symmetrical clouds with it…

vyC5DcfOcJTsJL03qowh5HdqHi89NRWE5y9SxBB1usjAr9omWlJbvCZ0x1D-3dhLBoVRcEa-zlEJea79ya3Grab3u3V05ZHBrIQQ-l_WygPBO8gKFLFVSbRTQaQt3ourCZcG9DJpMrptRAVOBnvFvA

…and use a layer mask or the eraser to make everything in the center visible.The mountains should be there, as well as the tree.
-PlTM2u-rb8bKVoTwNQXIc7E3NohfU8zSx60Q96nOcDUKk5pFKpmA_wmCNzLV9V7c3ysIqu_ZD3E8IQZOXvlWE8zkdNjAZXu3xNPBtlQjRmGbXDqJ3_Mdf5-s-zB5GkwMNwEEZFiRMVV52k90NoQSQ

Now if it was a layer mask, we apply it and create a new one. And again, we try to erase as much of that new sky as we can to keep everything looping and looking good. For example we can erase the whole upper part, as we already had that looping before. We can also use some of the acrylic brushes when we want to blend clouds and sky into each other. And after that, well…
4ZdyNaa2QC73v6KY4OseVPTJTghptugqdhBr4GIbmr38_NunnrYWNqn0xS8_f_ApSwVOi4inBYrBJoPI8J0t_7E5CwTydQZLjIwOS2rp4Pv_ikfyqY4hH3zMu5ngs-PdoGMNIi4SETLSZ-VeRY2YNQ

As a final test and trick to identify problematic areas we use a solar curve, therefore we open the curves option in colors and move the line about as in the screenshot:
--l_DkoPAcFQWcuWpzKGrvXQndR07qwYxKaA_0FIYv7wu_DHiUOVDuEiWSGx3N9NdEF_OErPtw_3moULpSq6F0t58-AOkrUapgmDf_I4JX8CO5ynSoeOKfPz3aLTfnTTcbIlwSlhV97Sm1k6_FVmLQ

This image looks wild, but it creates high contrast for colors that are close to each other, so it makes it visible where we have not blended things into each other properly. In this example, we could fix the top middle, where we “healed” the clouds together, otherwise it looks fine.
Before:
oip2453XgCVbosfFZnm3lgxTXTzRMFMVpa9wn0nn1xF0-8s4iAEENR4nDMcdodBe77h8sDBBssGB3X9lXH0ixb8R81RuJhlfPJGF0Q2nzkeEWnNDYYWNEp2sEXwQcgIjYSv7JLEWmSVpcBx0eD2VqQ

After:

CYykrfKyojvee-cEugXQzf4EiQKGaMyOzxXzDjpaEQAEA6PtCecOmECNGoTUUI7eOXDfbCWZqJ-9KBifmJb3SQC51NdCDh190z9Aw1jDOGzoqMn6r_RtHdVdS00k_gEC_u0ojQwdfz3tR5uhQPHtng
 

ShadowDragon

Realist
Regular
Joined
Oct 8, 2018
Messages
7,805
Reaction score
3,193
First Language
Dutch
Primarily Uses
RMMV
nice complex ways, something I wont do anytime soon, but great tutorial
as well, but keep up the good work and keep parallaxing if you like it :)
 

Latest Threads

Latest Profile Posts

Man, the enemies in the new Sonic Frontiers update are totally roided up. I wanted a little more difficulty myself, but Sonic Team turned the dial a bit too far.

At least the new tracks for roaming Ouranos Island as Amy, Knuckles, and Tails slap hard.
mz_quest_victory_scene.gif


This battle victory screen has been pretty fun to work on. Not only can party members set new personal records for their contributions to the fight, but when they do, the party remarks on the accomplishment!
When you love all your children equally, but the world sees it differently.
popular.png
Found an old, unfinished project of mine, where you fight movie screenplays as an up-and-coming actress.
Turns out I used VX way back when. I may need to remake this in MZ, the premise was kinda hilarious.
1696205441250.png
1696205637522.png
Holy crow, logging in to 33 notifications! That was unexpected.

Forum statistics

Threads
134,981
Messages
1,252,574
Members
177,864
Latest member
Adubu
Top