UX in a nutshell

The best visual explanation of User Experience I’ve seen so far:


List of Colors

This is a 3D render of the Prismacolor’s set of 200 color double ended markers.

I wanted to put together a set of colors with specific names, just to show the diversification between the colors and their visual representation, followed by their common name. It really is amassing to see how a color without a context I would definitely call just “blue” but its name might be Pale Jade (row 7, marker 7).

 

Their swatch includes their names and RGB values in the following list of colors (left to right):

Row 01 – Cream (252,255,212), Deco Yellow (245,245,140), Canary Yellow (247,247,3), Tulip Yellow (252,240,89), Sunburst Yellow (250,240,51), Jasmine (255,212,115), Yellow Ochre(252,212,3), Spanish Orange (252, 212,3), Yellow Orange (252,168,3), Pale Vermilion(255,107,18)

Row 02 – Orange (255,140,3), Poppy Red (255,84,61), Deco Orange (255,186,140), Goldenrod(237,166,112), Burnt Ochre (245,166,64), Mineral Orange (255,168,48), Pumpkin Orange(222,83,43), Deco Peach (255,222,222), Salmon Pink (255,196,184), Peach (255,140,140)

Row 03 – Brick Beige (252,222,196), Sand (237,196,140), Walnut (219,148,133), Sienna Brown(212,106,114), Mahogany Red (105,22,91), Dark Umber (57,23,22), Terra Cotta (237,107,112), Cherry (222,63,114), Carmine Red (255,87,140), Scarlet Lake (255,38,112)

Row 04 – Crimson Red (225,2,7), Henna (185,24,97), Raspberry (174,7,101), Blush Pink(255,168,212), Flagstone Red (169,111,184), Tuscan Red (148,45,123), Process Red(252,140,255), Pink (255,112,255), Magenta (255,61,245), Rhodamine (245,3,252)

Row 05 – Mulberry (196,13,255), Deco Pink (255,222,255), Ballet Pink (245,189,222),
Grayed Lavender (196,184,255), Lilac (166,166,255), Clay Rose (209,138,255), Dark Purple(40,0,233), Violet Mist (184,212,255), Parma Violet (112,140,255), Violet (388,15,255)

Row 06 – Deco Blue (184,255,245), Light Cerulean Blue (199,242,255), Sky Blue Light(130,209,255), True Blue (105,212,255), Copenhagen Blue (77,181,255), Imperial Violet(87,122,247), Ultramarine (51,112,250), Violet Blue (38,81,237), Indigo Blue (31,62,187), Navvy Blue (6,29,143)

Row 07 – Cloud Blue (214,235,252), Cold Stone (204,227,250), Blue Slate (143,184,252), Periwinkle (107,161,237), Mediterranean Blue (128, 191,250), Cerulean Blue (128,186,255), Peacock Blue (44,118,186), Pale Jade (189,222,196), Celadon (178,222,194), Spruce Green(48,148,113)

Row 08 – Brittany Blue (133,186,196), Teal Blue (82,162,167), Muted Turquoise (176,230,242), Light Blue (153,232,235), Light Aqua (150,232,222), Aquamarine (66,199,181), True Green (189,250,176), Grass Green (83,255,96), Mint Cream (181,245,135), Apple Green (161,245,122)

Row 09 – Leaf Green (101,215,35), Lime Green (186,240,176), Forest Green (133,212,143), Emerald (47,205,45), Dark Green (64,180,55), Spearmint (37,160,2), Chartreuse (214,255,120), Lime Peel (212,250,94), Avocado (181,255,5), Spring Green (150,247,54)

Row 10 – Green Tea (112,200,0), Light Olive (154,197,93), Dark Olive (76,159,22), Jade Green(166,224,204), Pewter (209,224,227), Parrot Green (63,215,129), Ash Grey (214,222,209), Driftwood (219,222,214), Wheat (242,245,204), Pale Peach (245,240,196)

Row 11 – Egg Shell (250,245,214), Blondwood (250,245,194), Buff (235,240,235), Cinnamon Toast (224,207, 158), Cocoa Bean (55,67,12), Mocha Light (149,142,81), Taupe (147,165,140), Mocha Dark (62,62,10), Brick White (245,242,227), Oatmeal (212,219,140)

Row 12 – Parchment (209,219,,191), Putty (230,222,214), Light Walnut (217,204,181), Eggplant(40,13,26), Light Tan (187,172,126), Jet Black (19,24,23), Sepia (117,113,48), Light Umber(105,116,58), Dark Brown (111,117,59), Khaki (191,194,135)

Row 13 – Warm Grey 10% (252,252,252), Warm Grey 20% (237,240,240), Warm Grey 30%(232,232,237), Warm Grey 40% (222,224,227), Warm Grey 50% (178,186,191), Warm Grey 60%(166,173,181), Warm Grey 70% (117,127,134), Warm Grey 80% (74,78,87), Warm Grey 90%(35,36,43), Warm Black (6,8,8)

Row 14 – Cool Grey 10% (240,244,246), Cool Grey 20% (229,236,239), Cool Grey 30%(207,220,227), Cool Grey 40% (187,198,205), Cool Grey 50% (165,176,183), Cool Grey 60%(139,160,172), Cool Grey 70% (104,128,141), Cool Grey 80% (81,101,112), Cool Grey 90%(54,70,78), Black (6,8,8)

Row 15 – French Grey 10% (245,242,240), French Grey 20% (232,232,230), French Grey 30%(204,207,199), French Grey 40% (181,186,184), French Grey 50% (164,164,164), French Grey 60% (147,152,152), French Grey 70% (117,124,124), French Grey 80% (76,82,84), French Grey 90% (39,42,44), Colorless Blender (255,255,255)

Row 16 – Metallic Silver Board (149,169,167), Metallic Silver Fine (149,169,167), Metallic Gold Broad (162,177,87), Metallic Gold Fine (162,177,87), Bronze (154,169,0), Natural Grey 10%(221,220,221), Natural Grey 20% (196,195,198), Natural Grey 30% (174,172,176), Natural Grey 40% (153,151,157), Natural Grey 50% (134,132,139)

Row 17 – Natural Grey 60% (116,115,122), Natural Grey 70% (100,99,107), Natural Grey 80%(85,86,93), Almond Milk (251,241,234), Ballet Pink Light (245,223,225), Blush Pink Light(328,203,205), Canary Yellow Light (255,246,153), Carmine Red (225,157,148), Deco Orange Light (240,203,167), Deco Pink Light (247,230,239)

Row 18 – Dusty Rose (241,216,213), Greyed Lavender Light (226,218,236), Light Umber 20%(228,213,192), Light Umber 30% (222,203,178), Light Umber 40% (209,191,172), Light Umber 50% (203,182,161), Light Umber 60% (196,173,150), Light Umber 70% (189,163,138), Light Umber 80% (182,155,128), Light Umber 90% (138,116,85)

Row 19 – Lilac Light (157,150,197), Mulberry Light (213,173,205), Neon Blue (19,154,202), Neon Green (168,200,96), Neon Orange (239,194,83), Neon Pink (195,106,161), Neon Yellow(252,232,36), Neon Yellow Green (246,237,99), Parrot Green Light (129,189,181), Pink Light(224,163,196)

Row 20 – Process Red Light (231,187,212), Rhodamine Dark (148,36,127), Rhodamine Light(217,155,191), Turquoise Dark (26,131,197), Ultramarine Light (138,174,220), Violet Blue Light(212,176,225), Violet Dark (63,62,139), Yellow Orange Light (239,194,83), Pure White(255,255,255), Pure Black (0,0,0)

There’s plenty more information about the topic’s subject, other colors and their names here.


iPhoneography

My history with photography started in the Elementary School, when we had a class of Black & White Photography, including films and photo processing. Back then I got hocked with the whole process – starting with the shootings, then the lab processing, mixing and knowing the chemicals, the dark room, and so on.

The problem with the extensive sizes of my SLR 35mm cameras was always existential and many times reason for missing the moments.  Since today my job and free time shifted a lot towards mobile technology, and having descent camera on my phone in my pocket I got into iPhoneography.

iPhoneography is the art of creating photos with an Apple iPhone.[1][2][3] This is a style of mobile photography that differs from all other forms of digital photography in that images are both shot and processed on the iOS device. Whether a photo is edited using different graphics applications is an argument among iPhone photographers.

iPhoneography has grown quickly since 2007, when the original iPhone 2G‘s 2-megapixel camera was released. As the iPhone cameras improved in both resolution and image quality, more professional photographers ventured into this art form and started recognizing the value of an iPhone image.”

Currently, I’m working on the design and the production of an iOS app called Blockstr, where the user will be recording video and shooting photos with an iPhone to post them as a video trailer. I had to explore the iPhone camera and its hardware, and it turns out, it has advanced DSLR-like capabilities. These include:

  • Exposure compensation
  • Manual exposure
  • Manual focus
  • Manual white balance
  • Bracketed capture

More about this can be found here. My research on what iOS developers have accomplished in the field of photographing brought to my attention a very powerful Manual – Custom exposure camera app.


It is a great software to enhance your iPhone photos, by using more manual techniques and approaches to add to your artistic style. Another powerful and yet free iOS app is VSCO CAM.

As you can see, there’s most of the technology of a DSLR camera available to you on your iPhone.

There are plenty of great apps available, and the list begins with Camnera+HipstamaticFX Photo Studio, which have different strengths and weaknesses. Besides the software, an iphoneographer should consider getting the ultimate iphoneography accessories kit, which includes:

  • Tripod – Glif Plus for iPhone
  • Remote Shutter Release – use your earbuds volume buttons
  • External Battery/Charger
  • External Lenses – Yes! There are external lenses available for your iPhone Olloclip
  • External Light Source – to add light to your scene
  • Mobile Wireless Storage Drives
  • Camera Bag – I’m all against that though, because it ruins the idea of not having a bag.

My favorite feature in a digital camera is long exposure. This affinity towards long exposures might be coming form my childhood hobby – astronomy, when I was trying to capture difficult objects, such as planets, nebulas, galaxies, and others. Slow Shutter Cam is the ultimate application for this:

As you can see, nowadays everyone with an iPhone in their pocket has an access to a very advanced technology for shooting. And everyone is an app and willingness away from getting into photography.


Camera Lens

I found this image on the web, which shows very clearly what’s the difference between the camera lenses when capturing. You should be able to notice the exaggeration of the facial features you get with wide angled lenses (24mm, 19mm). The narrow lenses such as 200mm, 350mm are getting a little flat output.

From what I have read, and learned from the photography is that the best lenses for shooting faces is somewhere between 90mm and 110mm. By the best I mean most realistic results. Of course an exaggeration might help you support a certain character design.

Here is the reference:


Mentalray: Physical Sky

This post is a “reblog” from my mentalray guru Jeff Patton. You can find this very useful tutorial on Jeff Patton’s website.

Here’s what Jeff Patton said:

I want to share a few tips for rendering architectural interior scenes with mental ray, using the mr Physical Sky and portal lights. These are some fairly specific tips that will hopefully allow you to achieve a smooth indirect illumination solution as well as control the intensity of the sun and other contributing lights.

I’m not going to start from the absolute beginning here. To get the most from these tips you should already be familiar with the basic fundamentals like how to add a daylight system to your scene, enable the photon target option on the mrSun, enable global illumination, etc.. If you’re not, then you’ll need to spend some “quality time” with the 3ds Max documentation/tutorials. With that out of the way, I’ll dive right in.

I’m going to use the Evermotion bathroom scene that shipped with 3ds Max a version or two back. At the end of this article I’ll post a link to my completed .max file for further reference.

I started by stripping any lights from the scene, hiding the window glass, and applying a single material to everything. That’s primarily so I can focus on the lighting tips for this article.

I then created a daylight system and let it assign the mr Physical Sky to the scene environment and assign the mr Photographic Exposure control.

I then edited the daylight system to remove the mr skylight. It’s not needed since I’m going to place portal lights at the windows. You can click the screen capture to view a larger version if needed.

From that point I added four portal lights to the windows (set to use the environment, not skylight since I don’t have one in the scene) and enabled GI (Global Illumination) & FG (Final Gather) and fired off a test render:

Notice the large spots/circles? You may want to spend time tweaking the GI settings or the mr Sun settings to try and remove these but that’s not the actual problem here. I’ll disable the mrSun and render again to show that it’s not related to that light source:

As you can see, the spots are still there even though the mr Sun is disabled. The reason I’m not getting a smooth GI solution here is actually due to the mr Physical Sky of all things. Notice all the white spots where the direct sunlight should be? That’s from the visible sun disk in the mr Physical Sky and picked up by the portal lights & FG. I prefer to remove that because if you don’t you’ll need a lot of sample to clear that noise, plus it of course adds to the direct sun light which can often become too hot/over-exposed.

NOTE: I believe that it’s also mentioned in the 3ds Max documentation that the mrSun shouldn’t be behind the portal lights. I assume for this reason or something similar. So hopefully this adjustment will allow you to place the sun wherever you want/need and still prevent these lighting artifacts.

To “fix” this problem I’ll instance copy the mr Physical Sky shader from the scene environment to the material editor to make adjustments. Here’s what the default sky looks like:

I will adjust the Disk Intensity and Glow Intensity values to 0.0 and decrease the sun disk scale from 4.0 to 1.0, although that doesn’t really matter when the disk & glow values are set to 0.0. The adjusted sky looks like this:

Now the super bright sun disk is no longer there. It’s now just a nice soft gradient that will play much nicer with your photons (GI) and/or final gather options.

I’m now ready to render again after making this simple change to the mr Physical Sky, and nothing else:

Yaay! No more big white circles/spots/etc…just some more easily fixed blotches due to the low quality FG settings I used in this test. So with that resolved I will now enable the mrSun, increase the FG preset to medium, increase the anti-aliasing (min:1 / max:16) and render again:

Not bad. It’s missing a small detail though, and that’s photons from the mrSun. Notice how cool feeling the image is? During my tests I prevented the mrSun from generating GI photons therefore I’m not getting any warm colored photons from the sun in this scene. Some may actually prefer this look since the sun photons are typically a lot stronger and can overpower a scene unless you manually edit it’s values. Here it is with the sun photons enabled (and adjusted, more info on that below):

It’s a bit warmer and brighter with those photons from the mrSun. In case you’re not sure how to disable photon generation on a light, here’s some captures to help explain that:

With the mrSun/daylight system selected, scroll down to the mental ray Indirect Illumination rollout. By default it’s configured to emit photons when GI is enabled via the “Automatically Calculate Energy and Photons” option. Uncheck that option and also leave the Manual Settings disabled and no photons will be emitted from the light source, in this case the mrSun.

Also make note that I have decrease the multiplier on the mrSun from the default value of 1.0 to 0.2. I did this because at the default value it often seems like the mrSun is just too strong (IMHO). It is quite powerful on the indirect illumination side of things as well and that’s why I have also decreased the GI Global Multipliers on the mrSun (also located in the mental ray Indirect Illumination rollout of the mrSun). I decreased the energy to 0.5 and the photon multipliers to 0.25.

If you don’t do this edit to the mrSun photon energy then the mrSun will generate most of the photons in the scene, unless you specify a number of photons in the manual settings. I know this may be somewhat confusing, that’s why I’m providing the scene file at the end of this article. I discuss it further in some of the gnomon videos I made a while back. But basically if you’ll open the mental ray message window and follow the information it generates as it prepares the scene you’ll discover how brighter light sources generate more photons than less bright light sources (as to be expected). However, I would usually prefer to modify that behavior a bit to achieve more even light distribution in my scenes. At the cost of physical accuracy I suppose…but hey, it’s all about getting the desired look no?

While I’m discussing all this, let me address another frequently asked question. Why do I have so much blue in my scenes? Simple answer, it’s because the sky is blue. The portal lights are picking up their color from the sky and the sky is blue in this case. What if I wanted less blue? Easy. There are controls on the mr Physical Sky for this. Just uncheck the “Inherit from mr Sky” option on the mr Physical Sky so that you can edit it’s settings.

In the Non-Physical Tuning parameters, decrease the saturation level as desired to reduce the intensity of the blue in the sky. You can also try tuning the kelvin values on the mr Physical Exposure control, but that affects the entire image which may not be desired. This only affects the sky itself and thus the color of the light produced by the portal lights.

Less blue as you can see…a little to flat for my taste so I increased the saturation to something like .35 for the final image:

I know that’s a lot to cover in a blog post, so HERE’s the file that you can download and explore. Sorry, I can only save back to 3ds Max 2010 format.

UPDATE:  Here’s an OBJ version of the scene for those not using 3ds Max.


White Balance in Mentalray

In this tutorial I will be talking about white point and white balance and their use in 3D space such as 3ds MAX and Mentalray.

First of all lets get better understanding of white balance and white point:

In photography and image processing, color balance is the global adjustment of the intensities of the colors (typically red, green, and blue - primary colors). An important goal of this adjustment is to render specific colors – particularly neutral colors – correctly; hence, the general method is sometimes called gray balance, neutral balance, or white balance.

See the full article here.

white point (often referred to as reference white or target white in technical documents) is a set of tristimulus values or chromaticity coordinates that serve to define the color "white" in image capture, encoding, or reproduction. Depending on the application, different definitions of white are needed to give acceptable results. For example, photographs taken indoors may be lit by incandescent lights, which are relatively orange compared to daylight. Defining "white" as daylight will give unacceptable results when attempting to color correct a photograph taken with incandescent lighting.

See the full article here.

As the Sun crosses the sky, it may appear to be red, orange, yellow or white depending on its position. This happens because the Sun light changes its color temperature. Color temperature is a standard method of describing colours for use in a range of situations and with different equipment. Colour temperatures are normally expressed in units called kelvins (K). Note that the term degrees kelvin is often used but is not technically correct (see below).

Image taken from here.

For our 3D scenes we basically have to define what color temperature of our lights are going to render as white. In the picture below (taken from wikipedia) you can see how in a same shot some light sources render as yellow the others blue. This happens because the color temperature for the scene is set somewhere around 4000K. Thus the light sources above 4000 are going to render blue, and the light sources below 4000K are going to render yellow. The match between the white point of the shot and the temperature of the light source is going to cause a white (or neutral) lighting.

So having said that, what's important to us is to define the white or neutral colors in our scene, depending on the light sources we are going to use (and our goals and desires for a scene lighting.

The Tutorial

In this tutorial I will be using a simple scene containing couple objects floating on a ocean surface. In the following scene I used photometric Sun and Sky (a daylight system for mentalray) to achieve a photorealism. Here are the start files you are going to need.

When you download this file and open it in 3ds MAX 2009 or up, and hit render (f9) you should get a result like the one above. You should note the light setups, the environment setups, and the daylight position.

  

Now you should note that the whitepoint for my starting scene is set to 7500. If you check out the "Color Temperatures in the Kelvin Scale" (the first diagram) you should understand that the temperature of the sun at noon is about 5000K to 5500K. Which means that IF your daylight source is up in the sky and IF your whitepoint is set to something about 5500K that should result in the render as a white (neutral) colors. This is important to know as a rule, and then we have to learn how to use it, and how to break it as an artist so we could get the desired results.

Here are the tweaking part of it. Here is the start render and its whitepoint prefs:


Without changing anything I will start progressively to increase the whitepoint just to examine the results:



As you probably notice, when we render our scene with higher value of the whitepoint we get a slightly yellowish shades to our render. That makes the render more like earlier in the morning or later in the afternoon when the sun is lower on the horizon and the light becomes a little more warmer.




Now we have something very similar to the lighting of a clear sky on sunrise or sunset. Naturally, you may come up with way better render and way better overall light setups, whats important for me to show is the nature of the whitepoint and its use for any given scene where you use a daylight system.

Lets try decreasing the whitepoint, just to see what happens. I will start with something lower than 7500K.



Decreasing the white point caused the blue shades to overcome. There almost no neutral light and colors in the render - its because the mismatching of the color temperature of the sun and the render output. This means you don't have a correct lighting in your scene. Of course, that's not necessarily bad, its just the truth. You as an artist should use the technology to create the desired output in the easies possible way for you.

Having said that, you could use your daylight system, its exposure control and the whitepoint prefs, in a various artistic ways to establish different mood in your scene, or simply to have a specific daytime, such as early in the morning, noon or night time.


For those of you who have more interest in the subject topic and would like to learn more you could check out the following great tutorial by Jeff Patton here.

Enjoy playing around with it!