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:
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:
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):
Click on the Material icon – New – Diffuse:
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):
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:
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!
My header looked like this after 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 – 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.
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.
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 File – Save – 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:
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:
Upload the header image to www.canva.com and add some text if you wish. You know, how I did:
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:
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