Studio Project, 3rd year, pt. 8

We’re in May now and the final presentation of our bachelor project is due the 18th of May. That is the final push for the oral presentation, but we still have to deliver the case files as one big soup. There are so many things to do and so little time.. But, we have been consistent and working hard though (with small breaks here and there regarding other courses and such). I actually feel good about the results, so it’s pretty good.

I’m also ruminating the fact that even if the school is over and my bachelor is done, I will continue working with Sue on the interactive painting. There are, as a matter of fact, many things we could implement both visually and mechanically, to further enhance the painting. For now I’m happy submitting the prototype.


These weeks have been focused on wrapping up the last bits of assets we need to get done before the deadline. In particular, the spritesheets, vegetation (trees, plants and grass) and other crucial elements, like rock textures, houses/cabins, wildlife etc., for the visual impact of the painting.

I’ve worked with the spritesheets of flying bats and made a more compelling flying pattern of it. I then continued to assemble together a modular valley piece for the painting so that Sue could arrange it according to the composition and then work out different interesting layouts. We have bounced back and forth on texturing the scene and also re-arranged some of the assets, purely for the purpose of getting a more attractive visual impact.

Spritesheets of the bats:

Bats


Next part of the development was focused on creating tree designs for our tree assets. These had to be playful, but not too stylistic, because of the overall visual tone we already had from before. We’d rather have a semi-realistic environment with a hint of some stylized elements inside of it.

Tree designs:

Tree designs colorTree designs

Additional pine tree designs as well:

Granbar color

Granbar sketches

From the initial pine tree concepts, I started to work out the 3D model and then set up a simplified, but recognizable shape so that it could be read easily in the environment. From there I tried to follow the original idea.

Normal trees: 

3D trees

Pine trees:

Granbar fixd


In the end, we are planning to tweak around these assets, so that they are more visually attractive to the overall environment.

I will end with some screenshots of what we have in the painting right now:

unknown (1)unknown

upload_5_4_2017_at_2_43_31_PMupload_5_4_2017_at_2_44_03_PM

See you around!

All the best
Eirik Henden

Studio Project, 3rd year, pt. 7

This time around, I took more time fixing and experimenting with textures for the mountains. I also finished up some of the spritesheets we had left over. In addition to that, I made different grass variations, general grass textures and cottongrass textures. These grass textures were painted inside Photoshop and then put together as image planes  inside Maya for the foliage painting.

I have began revisiting Substance Painter slowly, to get back on track for the texturing, but I definitely need to spend more time getting to know the different features again. It has been too long since the last time I’ve used it. In general I like to have my workflow and set of tools, like Modo or Maya, then Zbrush and Keyshot, to produce my products. With the final touches inside Photoshop of course. For me, Substance Painter would be the extra part, where that medium is used to get the extra details of the textures looking more realistic and also to export the different assets more easily between SP and UE.


Grass variations, both general grass and cottongrass: 

Cottongrass

GrassCluster


Bats spritesheet:

Bats


Mountain texture design:

Mountain texture 2Mountain texture


Without texture:

Mountain withoutText

Design for Interactivity, pt. 3

These months have been interesting. We have had a course called ‘Design for Interactivity’ and it has been focused on how usability and interaction with different interfaces affect us daily and then how to create our own interactive element. For me personally, I think this technology is relevant because it gives us an opportunity to help and educate groups both young and old around the world and also to entertain in a vast demographic.


The course consisted of two segments:

  • First part: Heuristic Analysis
  • Second part: Interactive Element

The first part was about doing an ‘Heuristic analysis‘. Meaning that we tested a interface first and then made a write-up of issues found both while and after testing it.  In the end of that evaluation we had to make a recommendation section where we would suggest improvements on the interface. This was due to the fact that we had to understand how to conduct an analysis for testing an interface and how to be able to improve systems such as these in the future.

The second part of the course segment, was to tell a story by creating an interactive element. This took more time to do, because we had to make visual elements and do the actual scripting behind the interactive element.

Since I am from a visual (concept art and illustration) background, my main focus on this assignment was to produce visual elements that could be interacted with. This was images from the different scenes in the narrative.

Synopsis:

Project AI Design is a narrative story where you follow an AI robot from start to finish. The story starts out with the Turing test where you have to decide if the AI is self-conscious. After the test the player have to choose between giving the AI a software update or not, and the decision will get big consequences later on. Later the AI escapes and you go into the role as a patrolling guard. you have to decide what to do with the escaping AI, and the choice you make will be crucial to humanity.

Narrative diagram:

Narrative

In the ‘Narrative diagram’, the curve of the story goes from high peak, down to low and then steadily rises up again. Me and Kristian (Check him out here) talked about putting every scene in the synopsis together, but after we talked with our supervisor, it was clear that it would be best if we only focused on our first outcome of the story.

Narrative and storyboard:

storyboard

Narrative TextNarrative VisualsWhile Kristian focused on the scripting and mechanics inside of Unreal Engine, I did the visual parts. I have a background in conceptual art and design from before, so it was better for me to put my effort into that.


As we worked on the project, Kristian and I discovered a lot of different features we could implement into the animation. In the beginning we thought about just having a simple setup for the narrative. Something that would be enough in itself, but as we continued, a few extra ideas came up. We added direct interaction with some of the elements in the scenes and together with that, we implemented sound.

What I think, about the  course in its whole, is that it gave me a perspective on how to think critically about how we interact and use different technologies, through visual devices or physical based objects, daily. These different interfaces can lead to improvements or stagnation, it depends on how it was made and how we use it.

It also gave me a creative bang when putting together the interactive animation. I have worked on animated elements before, but it was really interesting to see when everything came together through the still images I made. It was fun!

Final animation:

Link

Design for Interactivity, pt. 2

The first assignment of this course was to create an ‘Heuristic analysis‘, where we should inspect an interface by using something called a “two-pass method” and the heuristic principles from  Jakob Nielsen.

The two-pass method is testing an interface through it’s usability and interaction and then make a list of problems in a conclusive report. “A more descriptive term applied to heuristic evaluation is Usability Inspection : an inspection is carried out and a list of problems affecting usability is drawn up.”


The first thing I had to do, in order for me to understand this more clearly, was to do the daily exercise of the analysis. This exercise was an example of the actual assignment.

(You can read the exercise here)

I sat down and began to plan my exercise, while having the actual analysis in the back of my head. I wanted to analyse the ‘Layer Panel’ inside of Photoshop and thought about some questions for the inspection:

  • What should I focus on?
  • Could I use all of the principles of Nielsen?
  • Are there any crucial issues I need to inspect?
  • How relevant will some of the issues be?
  • Detailed branching or concise?
  • Will the conclusion be enough?

From these questions I had a better overview of where I should start.


When I had done the exercise I began to put in the same elements of the inspection for our actual analysis. I had a better understanding of the process now after I had tested the inspection method and read about the heuristic principles. I ended up using the principles I found most relevant for my case when doing the heuristic analysis.

These are the 5 principles I used:

  • Aesthetic and minimalist design
  • Recognition rather than recall
  • User control and freedom
  • Help and documentation
  • Consistency and standards

Below is an excerpt of the analysis from the ‘issues’ segments.


Aesthetics and User Control

The design of the layer panel is very minimalistic, with a visual simplicity and a default interface color. The buttons around the panel is located at the top and bottom with some of them grayed out.

Example – Default UI color:

example-3

Example – Top row:

example-4

Example – Bottom row:

example-5

  • A top row with layer options
  • A bottom row with panel buttons
  • Small buttons (with some of the buttons ‘grayed’ out)

The layer panel could probably have an easy-to-go set-up by organizing all the buttons in one place, not all in different places. The default interface color is boring, this should be possible to change through the layer panel menu.


This segment, ‘User control’, will go hand in hand with the ‘Aesthetic’ part above, but since there are some features I want to highlight from testing the interface, I will talk about them here.
When working with the layer panel itself, I found that it had unlimited possibilities of creating new layers and groups. This is of course very liberating, but can also be very messy and chaotic. I found after a little while, that I could color code the different layers and groups. For a beginner, that would be hard to figure out if not experienced with a similar interface.

Example – Color coding:

example-7

 Example – Unlimited layer creation:

example-6


Recognition and Consistency

In this segment I will explain the visual display and structure of the button layout inside the layer panel, since I think it’s an important issue to bring up, regarding how to navigate and use the interface, without having to struggle.
When opening the layer panel, the panel itself is located on the side of the screen inside Photoshop. Often it is minimized as the user will have to expand the menu to get it fully visible. It can be a bit confusing, since it has a top row and bottom row of many different buttons. Some of the buttons are grayed out, but will be ‘activated’ as soon as the user start working. This is, like I mention briefly in the previous section, hard to understand if not already experienced with a similar interface.

Help and documentation

Further into testing the interface, I discovered that information about the layer panel or any other help, had to be located through the top menu inside Photoshop. There were no shortkey for that through the layer panel interface itself.
Since I’m already experienced with this program from before, I know that pressing ‘F1’ on the keyboard will automatically open your web browser and take you directly to the ‘Help’ page on Adobe.


So this is the first part of the two-pass method in the analysis. I wanted to open the interface up and test it. Then evaluate how it worked through usability and interaction. I found a few issues through the heuristic principles from Nielsen.

What I had in the next part of the analysis was the recommendations. I thought about the issues I found and wanted to ‘hypothetically’ improve the interface by recommending a few solutions for it. Since this part was crucial for the assignment, I tried to find useful and relevant solutions for the problems. (I will  not be posting this segment in the blogpost).


In general I think this assignment was good because it forced us to think critically about different interfaces we use and how they work in daily life. What is the purpose of the interface and how does it affect us through usability and interaction with it?

A good thing to know.

Studio Project, 3rd year, pt. 6

Hi everyone! I have been really busy balancing schoolwork with outside projects, but there’s still work going on in the Interactive Painting and I do have a great deal of new things to show you since last time.

There has been a lot of improvements on the painting itself, all from new and refined assets to new level implementations. As always I’m working closely with Susann throughout this process and we’re both excited to see what the final product will be like.

This is what we have now:

d0e3b08610175f3c8e42187647a3d4051cebfe288e5f5761cepimgpsh_fullsize_distr

79d851bac8d05c82fcf2c3c48ee2fd787c4f44ec3f634696edpimgpsh_fullsize_distr


From before Christmas we worked on troll assets, firefly spritesheet, grass, rocks and mountains. We also played around with different textures to see how it would look and made a bunch of landscape designs and sketches to visualize our ideas better. In general we are planning to use Substance Painter for textures, but eventually we’re also gonna mix between polypainting inside Zbrush and Photoshop. It’s good to have a mix of all the different tools inside this area.

The first thing I began working on after the holidays was the troll asset. Before we had something that could be good for a placeholder, but after closer inspection, it didn’t really work too well. So, I went back inside Zbrush, fixed and refined it.

Before and after:

1016473475_10158475089130643_7809299116130497693_n


When I started the refinements, I imported the OBJ file of the mesh inside Zbrush and started cutting and adding elements to the troll. I sculpted a while before I got something that I kind of thought were interesting. I then added several pieces where I adjusted the scale and form of it, and then duplicated and merged together.

When I was happy with the overall form and look, I copied the mesh and remeshed it for baking possibilities later. I did this inside Maya, where I also unwrapped the low poly mesh.

Examples: 

troll-fix-low-poly

troll-fix-uvs


When I was done fixing the troll, I made a few landscape designs for the level inside UE itself. We needed to adjust some of the perspectives inside the level, so that the painting would be interesting to look at. I took some time concentrating on the designs.

Landscape designs:

landscape-thumbnails-3landscape-thumbnails-4landscape-thumbnails-6landscape-thumbnails-7

We went for the last one. The reason why we chose that design, was because we liked the framing and balance in the composition. And it also had a good foreground space, where we could put the trolls, rocks and vegetation.


The struggles we have had this time would be the different other outside circumstances that have taken up a lot of time for us, like Design for Interactivity. This course have given us minor flexibility to work with studio, but still made us conscious about how Sue and I plan our time together. Because when we first get around to work, we work really well! So that’s good.

Other than that, I want to show some of the spritesheets we have worked on, and then wrap this post up I think.


I began making some sparrows after the troll fix and the landscape design. I used the same template from the fireflies to get the right measurements. I used references of sparrows to help me out and got around drawing the poses. I made a 2×2 version of the sparrow spritesheet, since we didn’t need to much animation on them. This, like everything else, can eventually be fixed later on if we want to.

I made the silhouettes inside Photoshop and adjusted the form until I got something I was happy with. This process went pretty quickly, since I had references. The only downside of this process, is the lack of performance power from my laptop, it really lags and struggles with some of the comps and files. I then continued the same process making Aurora Borealis.

This is the final result of the sparrow spritesheet: 

2x2-sparrows

Final result of the aurora borealis:

nordlys-copynordlys-2


That’s all for this time people! See you next time, take care!

 

All the best

Eirik Henden

Design for Interactivity, pt. 1

In today’s lecture we were assigned to research three interfaces; 2 digital and 1 physical. What this means, is that we have to find 2 digital interfaces, (website, game, interactive animation, mobile phone application or any other kind of digital interface) that we will research and write about.

The assignment follows the ‘Heuristic’ principles that guides us to find and learn something new about our subjects we choose to research.

  • What works?
  • What doesn’t?
  • Color, shape and sound?

This is to prepare us for our first assignment later down the road.


I chose two different digital interfaces to research; Photoshop and Artstation. From Photoshop I took the ‘layer panel’ interface and ‘trending’ interface on Artstation. I will be analyzing the interactivity and usability between both.

Photoshop – Layer Panel

Layer panel inside Photoshop is a powerful interface, it’s basically the whole building block for the whole project when working.

layers-pallet

  • What’s working?

Inside of the layer panel, the user is able to create new layers, arrange the layers, group them, hide or color tag them, something that is really useful for organizing and having a good structure while working. The layer panel is also easily detachable from the window so that the user can remove or reattach the layer panel everywhere else on the screen. This is a really powerful feature for getting a better workflow.

The design of the layer panel is easy to follow, it’s clean and understandable. It’s also possible to change the UI color of the layer panel. This can be done through opening up the ‘preferences’ menu and change the Photoshop UI colors manually. I would actually suggest a right-click function inside the layer panel menu, where the user would have the option to change it’s UI color independently without going through the ‘Preferences’ menu. It’s also possible to change layer thumbnail size, a rather handy option if the user wants a better overview.

  • What’s not working?

The layer panel is vast with endless possibilities and can somewhat be confusing and overwhelming for a newly started user. This can probably be organized by creating expandable menus and good indications of what each and every button does.

I also think there should be made improvements for isolating layers in the layer panel. When pressing  Alt while clicking on the “Eye” icon, the specific layer gets isolated. There should be a feature where the user is able to select multiple layers to be isolated without having a major trouble unhiding every layer in the panel afterwards.

  • Color, shape and sound?

Much of the design through color and shape of the layer panel is already explained above, but regardless, there are some important features to highlight. When working, some of the options in the panel gets grayed out. This is because a layer is locked. When the layer is unlocked the gray color disappears.

Of course, Photoshop hasn’t inbuilt sounds, but it would be interesting if there was personalized sounds for each button. Or… maybe not.


Artstation – Trending

Artstation is a art community website created for artist around the whole world, both professionally working in the film and game industry and for nonprofessionals, to share and appreciate art together.

Inside of Artstation there are several different menus from which topic the user can decide to view art or read about articles and new job offers. In this reflective journal, I will go over the ‘Trending’ section.

 

last-ned

  • What’s working?

When entering the Artstation frontpage, there is a very clean and neat view of the whole page. A lot of images from every media and subject matter, articles and job offers. The page is black, something that relaxes the eyes a bit. There is also several menus at the top and further down the page.

From this list of menus, is ‘Trending’. this menu is good to have if the user wants to filter out images and see what’s popular at the moment. It’s also possible to sort out the different media and subject matters through the trending page to find the specific topic preferred.

The design is simple and futuristic. It has a color theme of black/Gray and Blue throughout the page, something that I like very much. There is also a direct response when hovering over each image giving information about the title, username and icons.

  • What’s not working? 

I think the overload of images can sometimes be overwhelming, but as you go further down the page it can be something you get used to eventually. I think it would be interesting to add a “pop-up” feature of the images when hovering over them. Since there are a small feature of it already with the title, username and icon, it would be cool to see a pop-up thumbnail of the image.

  • Color, shape and sound?

Like I said before, I think the color theme is already working by having a futuristic setting of black and blue. The design of the trending page is clean and readable and I think it’s well-structured and organized.


Mechanical Pencil

The mechanical pencil is a very powerful tool and helps the user communicate fast and effective ideas inside of his/her mind.

fullsize

  • What’s working?

The pencil is solid and have a big grip-area, something that is good when drawing or writing. It’s also equipped with an eraser on top. This eraser have to be turned around until it appears, because it’s hidden inside. I think that’s really clever, because then you don’t have to carry extra equipment with you.

The good thing about a mechanical pencil is that the user can refill leads when empty. This way the pencil last longer and there will be no clutter. It also have a metal tip, so if you drop the pencil the lead wont break. There is also a fastener on the mechanical pencil, so that you don’t have to drop it.

  • What’s not working?

The weight of the mechanical pencil is a bit heavy. This can cause sore fingers and tired wrists. Ergonomically this can be a problem. Requiring new erasers for the pencil can be difficult, so I would suggest a supplement of eraser together with the pencil when buying it.

  • Color, shape and sound? 

There are various colors for the mechanical pencil, but no changeable cover for it, so that has to be decided when buying. The shape is perfect. It makes the grip of the pencil much better when writing or drawing, no discomfort.


Conclusion

These three different interfaces, both digital and physical, have their own unique usability and function. From having different digital interfaces to help out with creating visual products for communicating and connecting with others to physical interfaces, such as a mechanical pencil, can be crucial. But there are always room for improvements.

All the best
Eirik Henden

Studio Project, 3rd year, pt. 5

The ongoing process of the Interactive Painting for our Studio 3 project continues!


These two last weeks have been very interesting. There have been moments where some of the work have gone as it should and other times, not. The reason is because there have been a few personal things happening in my life right now and that have made me having to regroup myself a little. But, in between it all, I have worked as much as I could on the assets for our painting.


So, after I got the mountains and the rock assets done, I began designing some trolls. I had to consider the shape of the trolls and the form. It was important that they would be morphing out from the landscape when the night came and that it looked sincere. I started by taking the earlier rock designs as a reference and adjust it. I stretched and skewed around with the basic form and then erased out and painted in some new lines. This technique is efficient and easy to use because you don’t have to reinvent the wheel.

Troll designs: 

trolldesign_1v2trolldesign_2


I continued the next process by creating 3d models inside Zbrush. This was a fairly easy job to do because of the troll designs I already had.

Inside Zbrush there is a lot of possibilities by getting started on your model. You can chose to work directly on to a dynamesh (a mesh already made ready to sculpt on), or you can chose to build up the basemesh by creating zSpheres from scratch. I often work with both of them! The more options, the better.

I looked at the reference of the troll and started sculpting the important features. I compared the mesh with the references and found out after a while, it would look much better if it had arms. So I used the zSpheres option and added a few of them inside the same scene. I adjusted the position of the spheres closer to the mesh and made them look like arms. After I had the right position of the “arms”, I made the zSpheres adaptive. That means I needed to convert the zSpheres to a editable mesh so that I then could sculpt on it. Even dynamesh it if I wanted.

So the arms were made and placed onto the mesh. Now I could easily start sculpting on top of the troll and make refinements.

Tip: I would really recommend using a brush called ‘Trim Dynamic’ to get awesome flat surfaces.

I used this brush to get some great flat surface variations. I absolutely love that brush!

Final troll model:

910


I’m not done with the trolls yet, since I honestly think it needs A LOT more refinements, but as it is for now, I think it works fine.

Further into the project, I worked on some spritesheets for our particle systems. These particle systems are going to generate fireflies, birds and bats. We wanted to use this setup instead of animating each image into the scene, that would have taken a lot more time, than using a particle system generating these features.

To make these spritesheets, I had to divide the portions of a 1:1 canvas into 2×2 or higher. I used a canvas of 2048 x 2048 (1:1), and 3×3 square tiles (9 squares) to paint the animation into.

2×2 Fireflies:

2x2-firefly

This is the 2×2 square tiles version of the firefly animation. Since there are less images, the animation would go much faster. I wanted something a little bit slower.

3×3 Fireflies:

3x3-firefly

This is the 3×3 square tiles version and this gave me exactly what I wanted regarding the speed of the animation. Happy with this one.


We also had our WIP presentation this Friday. Presenting everything that we’ve done so far and it went absolutely great! I’m really looking forward to continuing making more assets next year and also starting to texture them. It’s going to be great I think.

Now it’s Christmas, so I’m off for the holidays.

Have a great Christmas and a Happy New Year people! Much love.

All the best
Eirik Henden