INTRODUCTION
Hi, I'm Jairo de Ara, a freelance artist from Spain who started to create digital art back in 2014. I learned both 2D and 3D art as well website designing and game development through my journey. My goal is to create quality content and offer new experiences to people.
INSPIRATION
This work was designed to be the main interactive scenery for a website and bring a generic view which invites viewers to explore a fantasy world. Some of the scenic landscapes in the United States, such as Yosemite National Park and the state of Montana, were a great inspiration for me to create the terrain basics.
PROCESS
This scene design started with two main needs:
- Being used for an interactive website background so it should be detailed but also capable of being apart from the interface.
- Day/night cycle that varies the color palette and some animated elements to make the scene feel alive and interesting.
I've used Blender software for modeling and rendering, and composed the layers using HTML/CSS and Photoshop for some final image adjustments outside the website.
Scene Designing
Starting on Blender, I created and added most of the elements by placing them through forced perspective for easier management. I didn't use any sketch or specific image reference at all.
Toon-shading
I decided to choose a toon shader and played around with shapes and shadows rather than textures, so I made a basic shader graph easy to reuse for different color sets.
No global lighting was needed since I used emission values for the shader. The lighting areas were controlled by multiple light sources around the scene:
Scene Layering
The scene had a total of six layers separated into different collections, each of them using different colors to compose the depth:
The first five layers were designed to not have many details but to make their skyline and lighting interesting.
I included some of my own models that I did for other projects:
Combining Layers in HTML/CSS
Continuing in HTML/CSS, the layers were joined into a single one. The CSS style part was a bit complex until I got everything working fine. The elements are independent from the screen size/scale, and the layers have motion parallax when scrolling:
The day and night cycle runs on website server time and fully uses CSS styles to make the needed color changes so no different renders are needed. Here, you can see the color palettes for morning, afternoon, and night states:
The animated elements were added by rendering them separately and composing them on CSS:
As the last step, I took three screenshots of each cycle time and did some filtering and minor adjustments on Photoshop to get the final featured scene.
RENDER: Mytherland - The Valley
Original
Afternoon
Night
A newer version with higher trees and more dense woods in the background
As an extra, here is the full valley view
Thank you for reading this article. If you have any questions, please feel free to reach out to me through any of my social media accounts. Have a great day!
About the Artist
Jairo de Ara is a varied artist from Spain. He works as a freelance designer and interactive content developer. His previous article on Blendernation was, Beyond Galactic Pastures.
