In the next installment of teh Blender for Motion Design series, we look at constraints and shape keys. Download the project file if you want to continue with the dissection yourself.

Took a while to bring you another part. Enjoy.

In this episode I’ll demo how to clip objects using another with Blender’s amazing modifiers. As a bonus you get to see the terrible working conditions I sometimes have to endure

You can grab the project file from the gnome design repository (you might need to clone the whole repo to get the textures).

Set up your screen for animation, learn how to export portions of static mockups, learn keyframing, dope sheet and graph editor. Grab the finished scene here.

Part 5 — Animation

Understand materials & textures, learn how to quickly load them up as mesh planes. An example project file available for download here.

Part 3 — Textures

Part 4 — Mapping

A while ago I was shocked to see Allan create a transition design using manual frame by frame animation and decided to shed some light at how I do the motion graphics you can see in the previous few posts in the hope of more people picking up the tool and investigating alternate paths.

Please do understand that this is not a general introduction to Blender and that there is great amount of books, documentation on the web and even youtube screencasts. This series only looks at the bare essentials to be able to create these 2D transitions and will hopefully spark interest in learning more of the amazing tool that is Blender. Here’s a few links I recommend if you need a more in depth look:

• Blender: Noob to Pro
• Johnny Blender Intro
• Blender Google Books

I have my doubts about completing the series so any cheering counts if you actually enjoy this one and would like to see it come to an end. If you don’t want to miss a part, feel free to subscribe to the channel.

As Allan already mentioned in one of his useful summaries, I’ve been pondering how how to improve the layout of the application picker in shell’s overview. While the mockup he showed does address the small click target problem, it still felt out of place with relation to the dash. I tried to apply different lipstick on it, but there was something inherently wrong with the layout and the overview lost its clean, “no boxes” feel.

The reason for the windows/applications toggle was easy extensibility. We thought of using shell to access people/contacts in the same way as we access applications. We thought to present documents in a better way without exposing the filesystem here as well. We thought the orthogonal arrangement ala Sony’s XMB would be fun on touch devices. Over time, I have come to the conclusion that extending the scope of shell might do more harm than good. I’ve never been a fan of all-in-one solutions ala iTunes.

Looking up people in a well designed contacts app might be an extra step to go through, but it won’t force us to kludge in some mode switching. We don’t yet have answers to finding & reminding, so I’m not stepping onto the thin ice just yet.

After some frobbing in Inkscape and Blender, I came out with a streamlined layout the overview, using a toggle button on the dash to expose ‘all apps’ for the less commonly used ones:

There are currently a couple of benefits to this approach — removing an item (favourite) from the dash is a matter of dropping it back to the ‘all apps’ pool without the need to show a temporary delete icon. We’re only removing it from the dash, not really uninstalling or deleting it. The ‘…’ button (“show me more…”) lives in the context of application launchers rather than arbitrarily floating in space.

You probably noticed the app picker here uses a pager instead of a scrolled view. Obviously this would require the apps to not be auto sorted and we would have to give the user the ability to sort the list. That way the pages would aid us better when finding a less frequently used app (“I know it’s down here among X and Y”).

How the transitions feel adds to the experience. I was aiming to have the launchers behave like a swarm when you toggle the button on and off. Sadly Blender trunk seems to misbehave with regard to the follow path constraint, so I have to punt that for now.

I regret we didn’t have time to go through this iteration before the 3.0 release, but I think the change is worth the pain.

Not so long after Florian cleaned up the overview-relayout branch to accommodate the visual tweaks initiated by Allan, here we are again to move the target a bit (engineers love me).

Initially shell exposed two views. A tiled view for an overview of your workspaces (something we can’t expect majority will want to manage). A linear view that presents application windows for easier switching (and dropping documents on). Exposing the mode switch to the user wasn’t good design and even if we presented the tiled view only when rearranging windows or selections of windows across workspaces, it felt like too much of an odd case.

Well luckily Jon came up with what I believe is an elegant solution that works around the limitations of the linear view. In addition it also helps to gradually introduce the workspace concept to curious users who would have otherwise not bothered.

Here’s a very crude motion mockup of how the sidebar behaves:

• The workspace sidebar is hidden by default, ignored by the majority of users. It would slide out on cursor proximity and or when a drag is initiated on a window or a launcher.
• This interface relies on animation – it would be hard to grasp if things just popped from one frame to another. Things need to scale and slide to aid the spatial relation between workspaces and windows.
• The IOS like rectangle navigation we had in the linear view only gave you an idea of the number of workspaces and the position. The thumbnails make it much easier to identify a workspace to switch to or drop a window/launcher to.
• The interface would work just as good horizontally, but it’s more common to scroll documents vertically and we already use the bottom of the screen for messages

Now while I think the workspace thumbnailing addresses the most useful part of the tiled view, we still rely on the user to do workspace “management”. So the next step is to make the Shell do the heavy lifting. Stay tuned.

Last week we launched our SUSE Studio service announcing its 1.0 status. It’s been an honor to be part of the team behind it. I mean what other project uses javascript, flash, java, ruby, perl, mysql and git and at the same time qemu, kvm, libext2fs or fontforge, inkscape and blender?

You’ve had the chance to hear about some of the technology behind the project. I’ll add some artwork related bits into the mix here.

Dister

Building software appliances isn’t exactly a hip topic general web folk would rave about, but judging from the response I think we managed to get quite a broad attention. Our robotic mascot, Dister, helped maintain the fresh startup-like identity.

Initially he was created as a vector illustration, but went 3D in the end. The 3D part was a bit masochistic. While the process has been very painful and I’ve struggled with every small thing while creating the character, at the same time it was great fun. The result isn’t quite where I wish it would be, so I hope I can build up on the skills I’ve learned here soon rather than forgetting everything as I usually do. People who do character rigging deserve my utter respect. Even simple things turn out to be quite complex in the end. I also wish Inkscape performed like Blender does. It’s absolutely mindblowing what you can build up using modifier stacks in Blender and move it interactively. Inkscape just lets you taste the power of linked offsets, clones and filters but really under-performs in real life scenarios.

See the whole set on flickr.

Website Aesthetic

As any good product, we went through numerous iterations of the site. Sadly I didn’t manage to migrate the db back well enough to give you a taste of how things evolved over time, so here’s just a few things I managed to resurrect.

Comic Strip

One thing I’m sad we had to bin was our comic strip, err documentation. The idea was to create a nice walkthrough of the interface and the tech behind Studio in the form of a short comic strip.

Unfortunately I couldn’t pull it off in a reasonable time and even if I did it would probably retain that “oh, they’re copying Google” aftertaste.

Origami CD Covers

Another feature that didn’t make it into 1.0 and will hopefully become available in future is a mean to print out an origami cover and a CD label to the custom appliance you’ve built using the custom artwork you’ve specified.

I’ve only created a proof of concept using my favorite duo — Inkscape & ruby, only this time throwing rmagick in the mix to get the automatic text color based on the background lightness.

I hope you have enjoyed a look behind the evolution of SUSE Studio visuals as much as I’ve had fun creating it. Don’t be shy and let me know at the comments below.