Advertisement

You're blocking ads, which pay for BlenderNation. Read about other ways to support us.

Behind the Scenes: Mytherland - The Valley

0

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

Original

Afternoon

Afternoon

Night

Night

A newer version with higher trees and more dense woods in the background

A newer version with higher trees and more dense woods in the background

As an extra, here is the full valley view

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.             

About the Author

Avatar image for Alina Khan
Alina Khan

A self taught 3d artist, who seeks to excel in the computer graphics field. Currently a student, freelancer and the editor for the 'Behind the Scenes' at Blender Nation.

Leave A Reply

To add a profile picture to your message, register your email address with Gravatar.com. To protect your email address, create an account on BlenderNation and log in when posting a message.

Advertisement