UI/UX Design: Holo Effect. How you can leverage a little-known… | by Nick Lawrence | Dec, 2021


Nick Lawrence

How you can leverage a little-known, filthy hack to get a nearly perfect holo effect for your UI backgrounds in under two minutes (+ free resource).

The other day, I got this question from one of my readers:

I’ll admit, I was at a loss.

I tried liquification, distortion techniques, etc. and basically nothing worked. I was almost about to call it quits when I remembered a technique from way back in my graphic design days, and I decided to give it a shot.

Suffice it to say that it worked like a charm and today, I’m going to show you how you can leverage little-known, filthy hack to get a nearly perfect holo effect for your UI backgrounds in under two minutes.

Essentially there are three ways to produce this effect:

  1. Manually liquifying colors until you achieve an effect that’s “close enough.”
  2. Applying surface/sub-surface holo parameters to a 3D model, light it properly, and render it out.
  3. Slap a gradient map on a piece of cloth and call it a day.

The first two are onerous, the last one is genius. Let me show you how it works.

Search “wrinkled cloth” on Pexels

Choose a cloth

Slap that cloth into Photoshop

Your canvas should be at least 2000 x 2000 px width at 300dpi (trust me, you’ll want this later in case you need to resize it).

Apply gradient map

With the image layer selected, go to Image > Adjustments > Gradient Map

In this example, you will notice that I already have a holo gradient that I am using which I created. I will upload that gradient down below so that you can use it as well!

Hit ok and you’re done

Once you’ve adjusted your gradient stops the way that you like them, hit ok and it will finalize your gradient map.

This is our finished product here:

The nice part about this approach is that you can incorporate as many colors as you like into your map to really dial in the look and feel of your final output.

Now, remember what I mentioned about 300dpi? There’s a reason for that.

Let’s say that you want to apply this as a background for your UI. Let’s take a look at what that might look like in practice:

As you can see, this is a pretty loud application for a main screen, but we can easily soften this up and promote solid visual contrast by applying a layer blur to the artwork and by bumping up the opacity of our transparencies.

Much better, and we can test this against our content to make sure it works well before we settle on that art direction.

Is it absolutely perfect like a render? No.

Is anyone honestly gonna care? I would be willing to bet that not a single person is going to care that you didn’t spend hours setting up a model, lighting, and rendering it to create an effect that you can now reproduce in under two minutes.

As usual, I promised you a free resource at the beginning and I intend to deliver.

You can get all three custom gradients that I made for gradient mapping, for absolutely free, right here:

Today you learned how to leverage a little-known, filthy hack to get a nearly perfect holo effect for your UI backgrounds in under two minutes.

While this method is not 100% perfect, and may not give you the same crazy chromatic effects that you can find on dribble:

This method is about 100 times easier to pull off and, especially in a crunch, can help you and your team achieve this effect in record time if it’s something that you’re looking to do for your next project.

Source link

Leave a reply

Please enter your comment!
Please enter your name here