Sphere made with Blender 3D Software
Sphere made with Blender 3D Software – © GerlindeOnline.com

You know by now that I recently discovered the Blender 3D Software again after my first steps in 2015. Since then, I was wondering how I could use Blender for my website and I decided to put into practice the lessons I learned as an autodidact.

As I love experimenting with banners and headers and I already experimented with 3D text as you can read in my latest Blender blog post, I was wondering how to make a nice header for my website.

Until then, I had a header with a nice color and a nice font (see image above), but now it was time to create something new, from scratch and something as a result from an idea I had in mind but, obviously, always based on the knowledge and possibilities I have as a Blender newbie.

As I learned how to create different types of spheres I created a booklet about it.
See my examples of the different kinds of spheres I made with Blender Software with different materials, textures and background here:

 

Did you see the nice transparent sphere? I like it, so I decided to add one in my header representing a globe, just like this:

Header made with Blender 3D Software
Header made with Blender 3D Software – © GerlindeOnline.com

I decided to add the text with www.canva.com, but, of course, you can add it with Blender, too.


Let’s start with the first step:

Delete the cube with X, add a UV Sphere with SHIFT + A, go to Shading and click on Smooth in the left Tool bar:

Tool bar in Blender

 

 

 

 

 

 

 

 

 

 

Now add a material to the sphere (see the image below about my material settings in the Properties Editor on the right side of your screen):


Material Settings:

Material Settings in Blender 3D Software

 

 

 

 

Click on the Material iconNewDiffuse:
Choose a color you like for the sphere (note: as I make it transparent, the color is not really to see later, only a shade of it).

Put the Diffuse and Specular Intensity slider both to 1 to make the sphere a bit shiny (you can always play with the settings here).

 

 

 

 

 

 

 

 

 

 

Scroll down to Transparency, tick it, click on Raytrace and make the other settings as shown below (or, again: change the settings how you want them):

Material settings in Blender

 

 

 

On the Blender Interface, you only see the color of the material, you have to render it with F12 or click the Render button (the camera icon in the Property editor) in order to see changes.

Now, scroll down again to Mirror, tick it, click on Mirror and change the Reflectivity settings as shown in the image:

 

 

 

 

 

 

 

 


Now let’s add some background:

World Settings: 

World settings in Blender 3D Software

 

Click on the World icon and make the settings as shown in the image:

I ticked Paper Sky – Blend Sky – Real Sky

I added some Horizon and Zenith Color

If you now render the scene again, you see your sphere with its nice background!

 

 
Now it’s time to add a plane (you can do this step also before adding a material to the sphere):

SHIFT + A – add a plane. With the blue arrow drag it below the sphere with a small distance.

Scale it with S as big as possible.

Now, render again! You see now how the sphere reflects the plane and looks more transparent!



Set the Camera View:

Click Numpad 1

CTRL + ALT + Numpad 0 (now you have adjusted the camera in order to see also the horizon).

Render again to see how it turned out. I always save the nice images in between, you never know, when you might need the images! So, feel free to save it now!

Blender Sphere

 

My header looked like this after rendering:

Blender Rendering

 

Exit the render scene with ESC.


Now we add some material and some texture to our plane (make sure the plane is activated with RCB – Right Click Button):

Material settings:

Material settings for the plane

Material – New – add a color (you need a color first in order to add a texture later). See the Intensity settings in the image on the left side.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


Texture Settings:

Texture settings of the planeTexture icon – New – Click on Image or Movie to choose Marble and Both as shown in the image on the left side.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Texture Marble settings of the plane

 

Scroll down to Marble – change to Sharper – change to Hard

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


Render to check, if you like what you see! See my two examples:

 

 

 

 

 

Now you can play with the settings, change the color and the texture again and also the camera settings if you like.

Camera settings:

Press N, tick Lock Camera to View and change the settings by scrolling with your mouse wheel, or holding the MMB (Middle Mouse Button) and moving your mouse, or SHIFT + MMB and move your mouse until you are happy with your camera view. Render the scene and save the blender file (you can do this anytime, also earlier, of course) with

Render the scene and save the blender file (you can do this anytime, also earlier, of course) with FileSave – Name it and Click on Save Blender File.


Render the scene:

Now you only need to change the size of your header. The default settings of the Dimensions are 1920 x 1080 Pixels as you can see in the Render section:

Rendering in Blender

I chose for the size of my header 1400 x 400 Pixels, you can make it smaller and bigger, of course. Increase the resolution from 50 to 100 %.

Now, render again, save the file and save also the image as before as your new header image!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

It should look like this:

Rendered header in Blender

 

Upload the header image to www.canva.com and add some text if you wish. You know, how I did:

Header image with text

Download the image. Upload the header image to tinypng.com to compress it!

Now it’s ready to upload to your WordPress editor or wherever you want!


Update May 2017:

Website Header made with Blender 3D Software – © GerlindeOnline.com

I made this new Website Header with 3D Blender Software based on this video tutorial:

 

I only changed the colour of the planet and the liquid inside. I rendered the image with size 1400 x 400 pixels so it fits in my header area of WordPress. I uploaded it to canva.com and added my Gerlinde Online Logo which I created with Blender before. How I did that, I’ll show you in another tutorial… 🙂


All images: © GerlindeOnline.com

RELATED POSTS:

How to Make a Website Header with Blender 3D Software

2 thoughts on “How to Make a Website Header with Blender 3D Software

  • April 6, 2017 at 4:21 am
    Permalink

    Hi Gerlinde, just started with blender and trying to familiarize with the features.
    In your opinion what are the few important ones to start with?
    O btw,thanks for reminding to compress the image befi uploading to wp.
    Guess this blender needs some patience to master the basics.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *