August 20, 2020No Comments

How to design a case study page (tutorial)

As creative people, we know that presentation means everything. Yet when it comes to presenting our own work, we tend to sell ourselves short.

Case studies are our chance to put our work in its best light. But too often, we drop a half a dozen images on the page and call it done. So while we've talked a lot about writing portfolio case studies, now we're diving into how to present the work visually.

For this tutorial, we'll be using Semplice to lay out a visual project case study and show just how easy it is to present our work – rather than leaving our visitors to form their own conclusions.

Get inspired

First, it's helpful to view case studies of other designers you admire to see how they explain their projects. Observe how they visually walk you through their project story, what elements or devices they use, how their projects flow, what makes you want to keep reading, where you find yourself losing interest.

You'll ultimately do things your own way, of course, but seeing what works and what doesn't will guide that, and motivate you. Here are a few case studies we've enjoyed lately from our Semplice Showcase, for example (click image to view case study):

 

What we'll be making

Now let's start creating our case study page. I'll be making mine using my own work, for a fictional design studio.

I've made a demo using Semplice, our own portfolio tool. Semplice is centered around creating custom case studies for your unique projects, so you can design everything from your nav to your footer to complement each unique project.

VIEW THE LIVE DEMO

The case study example page we will be recreating

Getting started

To begin, let's head on over to the Projects area to create our first project. Projects in Semplice serve as your case studies. They automatically connect with the Portfolio Grid module, so you can display them on your homepage or Work page.

Creating the Cover

Now that we've set up our Project, let's add a Cover section. In Semplice, Cover sections are like hero sections, and are typically used with large headlines or full-width imagery for maximum visual impact.

For our purposes, we will use a nice, large image to introduce the page and set the stage. Go to the Cover tab from up top, and from the pop-up editor select "Cover (full-width)" from the dropdown.

Creating the introduction section

This section will serve to introduce the project and include necessary details like year of completion and credits.

First, let's add a text module with some larger text to serve as the project overview. Just add a simple sentence or two to briefly summarize the project. We will go in further detail below.

Next, let's add some of the smaller details such as credits. You can place Text modules stacked in rows to create both the subheadings and text lists for these areas. Once we have our text styled the way we want it, we can duplicate the column to quickly recreate our layout. If needed, we can also use spacer columns to offset the columns and create white space.

Now, below our overview, we'll go more in-depth about the project and explain our involvement. A simple text module and image module side-by-side will do the trick. If you need tips for writing the copy in your case study, read this article.

Adding detail images

Next, let's create a section where we can add images that support our case study. Think of your case study like a spread in a magazine, and put images alongside relevant copy, to make the reading experience highly visual and easy to scan.

For this section, I'll make some of the images "bleed" to the edge of the screen. This will add break up the visual flow of the page nicely. To do this, go to the section options and set the gutters to "off."

Setting our section to be full-width with no gutters.

I will also use spacer columns once again to offset the image columns and create some interesting variations in the layout.

Adding a spacer column to create white space

I've also placed text modules beneath each image for a caption, so we can give context to each image and allow those who want to scan (let's be honest, most readers) to understand our project story at a glance.

Adding a full-width image section

Now we'll add some full-width images to break up our page between paragraphs. For our full-width image section, simply place an image module on the page. In the image options, set the image size to "grid width" and in the section options, set the width to "full-width" with gutters removed.

Before/After comparison

Now for the fun part. To visually explain our process and help readers appreciate the work that went into our project, we'll use the Before/After module to display our final result. In this case, we will show a behind-the-scenes view of our prototype in the 3D rendering program, sliding to reveal the final outcome. You can do the same with a UX prototype next to your final screen design, for example.

Adding image galleries

If you have lots of images for your project, or a collection of similar images, you can also add image galleries to your page.

Let's place some offset galleries onto the page. We will also use this section to talk about the final results of our project and how it was successful.

Wrapping up

To wrap up the case study, we'll give a little shoutout to our team.

We'll also make sure the Next/Previous feature is enabled. This is a feature in Semplice that allows viewers to quickly jump between projects at the bottom of a case study to continue browsing.

Thank you

We created everything here with the Studio edition of Semplice, which gives you all the latest Semplice features. No matter what tool you use to create your case study, we hope this tutorial inspired you to create thoughtful, unique case studies to tell your project stories. We can't wait to see what you make!

August 10, 2020No Comments

How to make a great work page for your portfolio: A Semplice tutorial

Your Work page (often your homepage), is your first impression. It tells the story of your work when you're not there to do it. And with Semplice, there are many ways to tell that story.

From our Advanced Portfolio Grids to the traditional Portfolio Grid to manually building your page, Semplice allows you to create essentially anything you design, without templates.

Here are just a few recent examples we've enjoyed lately from the Semplice Showcase:

Yu Rong

Instead of using your standard thumbnail format, Yu opts to use mockups and devices overlaid on top of large, marquee typography. It makes for a fun scrolling experience as you scroll and immediately shows how Yu Rong thinks outside-the-box.

Ayaka Ito

Ayaka uses the Advanced Portfolio Grid feature (comes with Semplice Studio) to showcase her work. She makes every element her own, using beautiful type, custom hover effects and colors that complement each thumbnail.

Studio MPLS

Studio MPLS uses a more traditional approach to the portfolio grid, but makes heavy use of the thumbnail hover effect. This effect gives you a visual preview of each project on hover, adding to the visual excitement and encouraging a click.

Leandro Assis

Like Yu Rong's site, Leandro makes use of a fixed background image with overlaid portfolio grid items. The design highlights Leandro's personality and creates a joyful scrolling experience.

Tracy Doyle

For her portfolio, Tracy used a minimalist approach. Instead of relying on visuals, she uses a simple text grid that puts emphasis on the high-profile clients she's worked with.

 

What we'll be creating

For this tutorial, I'll show you how you can quickly and easily create a compelling work page using Semplice. We'll explore a variety of four different approaches to the work page design, giving you just a sample of different options and layouts you can use to show off your work.

I've created fake studio called PLY® Studio featuring some of my own personal work. This is what we will use to build out our Work page.

We will use a fake studio to create our portfolio site. Work samples by Jon Vio.

Getting started

First, we need to create some projects that will appear on our Work page. If you're just starting out with Semplice, here is a help guide for creating your first project.

With our projects created, let's open up a fresh page in Semplice. Name the page "Work" or something similar.

1. The standard grid

The standard grid of thumbnails, what we call the Portfolio Grid in Semplice, is a tried and true way to show off your work in a clean and simple way:

VIEW THE LIVE DEMO

The Portfolio Grid consists of a masonry-style, 12-column grid comprised of your project thumbnails. Each project thumbnail can be given a custom column width. There are a variety of options to customize your Portfolio Grid width, including adding a thumbnail hover effect, live project filtering, and more.

Let's go ahead and place the Portfolio Grid on our page:

You'll notice right away the Portfolio Grid is populated with our projects. If you don't see your projects right away, make sure they are PUBLISHED and not set to DRAFT.

Let's now adjust our project thumbnail widths to evenly space out our thumbnails and create a nicely aligned grid. I've set my first project to 12 columns, which will give us a full-width effect. To get the two-column format, we'll set the next two projects to have column widths of 6. For the smaller images, we can set these to display three rows across by setting each column width to 4.

PRO TIP: You can quickly adjust individual project settings by hovering over the thumbnail from the Portfolio Grid and clicking the edit settings icon.

Let's also display our project title and category underneath each project thumbnail. To do this, set "Title & Type Visibility" to show both the project title and category.

2. Text Grid

Another interesting way to display your work is in a Text Grid. The Text Grid is a layout preset included with the Advanced Portfolio Grid as part of Semplice Studio edition. To learn more about the Advanced Portfolio Grid, read this guide.

VIEW THE LIVE DEMO

To create our Text Grid, we'll drag & drop an Advanced Portfolio Grid (APG) module onto our page. You then have the option to choose which pages or projects you want included in your APG grid, so let's go ahead and add them.

After adding our projects, go to "Change Grid Preset" and set the preset to Text Grid. Once done, you'll notice the APG has automatically populated our projects in a vertical text list.

I'll keep the Title direction option to the default Vertical setting and style the grid accordingly. To get the cool mouse hover effect, set the Mouseover effect to "Original (Stick to Mouse)." I've also enabled the Title Mask effect. Note: this effect will only work if the Title direction is set to Vertical.

3. Overlay Grid

This is a popular style right now for Work pages: Overlaying your project thumbnails on a fixed background image or text:

VIEW THE LIVE DEMO →

For this portfolio effect, we will place a standard Portfolio Grid on our page. Next, we will need to create images of all of our thumbnails as PNG files with transparency. The transparency will allow the background to show through while the scrolling through the Portfolio Grid.

With our transparent PNG thumbnails set, let's now add a fixed background to sit behind our Portfolio Grid. Go to the Look & Feel tab from the editor and set a background image. Adjust the size and placement to your liking. Finally, under the Background Attachment option set the background image to be fixed.

Alternatively, you can also use our hack guide to create a fixed section that will sit behind your portfolio grid. Just be sure that the section where you placed your Portfolio Grid has a higher Z-index value (located under Section Styling) than your fixed section. Otherwise, the Portfolio Grid will not sit on top of your fixed section.

4. Split Grid

Another interesting way to showcase your work is to use the Advanced Portfolio Grid module and create a two-column fullscreen grid. This grid is really great for putting the focus on your work and simplifying your presentation.

VIEW THE LIVE DEMO →

Once again we will use the Advanced Portfolio Grid for this effect, and choose the Horizontal Fullscreen layout preset. Place a new APG grid on your page. The default layout preset will already be on the Horizontal Fullscreen option, so no need to select it.

Also, I recommend setting all of your images to the same dimensions for best results.

Next, let's set the" Images Per Row" to 2, and the image size to "Cover." I've also opted to hide the Project title and category.

Lastly, we can add a nice Mouseover effect for our thumbnails. I've opted for a nice zoom effect.

That's it!

It's really that easy to get a variety of different ways to display your projects with Semplice. Of course, these are just a sampling of different layouts and effects. It's really up to your imagination. We hope you enjoyed this tutorial!

July 21, 2020No Comments

Mastering the art of 3D lighting with Adobe Dimension

As we venture further into the world of 3D design, from abstract 3D art to 3D typography to creating geometric structures, we've arrived at a crucial point: lighting our 3D scene.

The difference between your standard 3D graphic and an image so cinematic and realistic, you wonder if it's a still from a movie, often comes down to lighting.

It's the glow from a streetlight. The reflection of light on water. The difference between direct overhead light and infused light from a window. The nuanced beauty of light that we experience every day, that takes effort and attention to perfect in 3D.

A cinematic 3D scene created using Adobe Dimension

Consider the fact that, when making an animated movie, it's usually someone's full-time job to focus only on lighting. Light is the essence of how we see and visually experience the world. The right lighting can set a mood, influence perception and evoke emotion. It's why it's impossible to leave lighting for last when setting up a 3D scene. Rather, your entire scene is centered around it.

Since our goal with 3D is to reflect the real world, some of the same principles we use for photography apply to 3D. Like photography, the right lighting as well as a keen awareness of your subject and composition are important. It all plays together to make a striking, believable image that resonates.

With this article, we'll share examples of various lighting techniques and give you general principles you can use in your own compositions. We will show you how you can get dramatically different results just from changing the placement of your light sources, and how you'll significantly improve the quality of your 3D work with purposeful, detailed lighting.

Setting the scene

First, let's take a look at a series of images that I created using Adobe Dimension. If you're not familiar already from our other articles, Dimension is Adobe's 3D scene design tool paving the way for designers and traditional graphic designers into the 3D world. (If you're just hearing about it or stepping into 3D for the first time, start with this beginner's tutorial.) Dimension offers default lighting set-ups for your 3D work, but today we'll be focused on manual methods to create your own lighting.

Being super inspired by the recent SpaceX launch, I wanted to create a simple scene with some sci-fi and space themes. Here is the result:

We'll use this image to examine the different types of lighting and how you apply them in 3D. Later, I'll show you how I achieved specific lighting effects for this image in Adobe Dimension.

The different types of lighting techniques

Just like the real world, there are many different types of lighting techniques that can create various effects. Placing a single light source in your scene, for example, results in dramatic shadows. Using only direct sunlight looks very different than soft, indoor light setup. Depending on the mood and feel you want from your image, you may have to experiment and find what lighting setup works best for your scene. So let's start with your main types.

Three-point lighting

A basic example of a three-point light system. From left to right: the key light, the rim light, and the fill light.

This is arguably the most important and commonly used lighting technique.

As the name implies, this technique uses three light sources to illuminate your scene: key, rim and fill. Each of these light sources play a unique role in lighting your scene.  Your key light is the primary light source that will illuminate your subject. The rim light illuminates the back of your subject, creating depth and allowing us to understand the shapes of the objects in your scene. Lastly, fill light is meant to eliminate harsh shadows in your scene and add some even lighting.

Placing a sphere is an easy way to view reflections in relation to our scene

Humans use light to understand objects and shapes with our natural eye, and three-point lighting gives us a full point of reference. This lighting technique is seen in every medium, including film, photography, product photography, event lighting and television.

 

Soft lighting

An example of a soft light setup. Note that the lights are placed far away from the subject, and are larger in size comparatively.

Soft lighting, as the name applies, means light is being distributed evenly throughout your scene. Harsh shadows are removed, creating a result that feels soft and balanced. This kind of lighting is commonly seen with product shots, or with traditional portrait photography. You can see in this scene it has changed our original image to feel much more calm.

To achieve soft lighting in your scene, simply place large light sources in your scene that are a good distance from your subject. The larger the lights, and the farther away from your subject they are, the softer your shadows will be. The default studio environment light when starting with Dimension is a form of soft lighting.

 

Single-light source

As the name implies, this technique uses just one light source. Single-light sources are typically used to create dramatic lighting, since having only one light means harsher shadows and areas where light is not illuminating your object. This creates a sense of drama and mystery.

This technique is used often in cinema as a tool to center your focus and set a mood. Use it to your advantage to create interesting moods, or where your subject does not clearly have to be defined. It's a simple method, but when used right can be the perfect lighting trick up your sleeve.

Direct sunlight

Sunlight is one of the easiest ways to light your scene. Note the harshness of the shadows due to the size and brightness of the light.

As the name implies, this lighting technique relies on a single light source: the sun. Direct sunlight is great when you want to replicate a natural outdoor scene. Using sunlight as your main light source will naturally result in harsher shadows, since sunlight is incredibly bright and the appearance of the sun is very small in relation to us on earth.

Using sunlight to light your scene is very popular for architectural lighting. Most 3D programs, including Adobe Dimension, include the ability to add a sun to your scene. These programs also typically aim to replicate the real effects of light from the sun based on it's positioning in the sky. For example, lowering the position of your sun will typically result in a "sunset" effect where light is much warmer and shadows are hugely elongated.

When using sunlight as a light source, I highly recommend using it alongside image-based (HDRI) lighting environment to get real-world reflections. This is because the sun exists within an “environment” or sky, and to get realistic results you will want to simulate both a sun and real-world environment.

More on environment lighting below.

Backlight

Backlight pertains to placing your primary light source behind your subject matter. As with the single-light source technique, this method will also produce dramatic results. It also adds a sense of mystery as it obscures the details and shapes of your primary subject.

This type of lighting is typically seen in film and in promotional sports photography. Though this lighting technique is one of the more rarer ones used, it's a great one to have in your back pocket if you're going for a cinematic vibe.

Environment or image-based lighting

Environmental lighting generates light based an existing image, typically in the form of an HDRI (high dynamic range) image.

HDRI is a 32-bit image (meaning it contains huge amounts more of data) that stores a range of exposures, which is impossible to do with an 8-bit image. An 8-bit has pixel color values ranging from 0-1, whereas 32-bit can go as high as 100 (in case of the sunlight). This will differentiate a white object in the HDRI, for example, from a white LIGHT source. HDRI images can provide an incredibly rich source of light to your scene that replicates what we see with our naked eye.

Environment lighting is great if you want to quickly generate a simulated real-world lighting environment. Adobe Dimension includes these in the format of lighting presets, though you can use your own HDRI maps as well. The largest drawback to using environment lighting is you lose the ability to control the placement of your light sources, since the lighting is based on an image with predetermined light positioning.

An example of an HDRI image:

And now with that image applied to our scene:

In Dimension, HDRI maps can be applied under the Environment lighting options.

Different types of light objects within 3D programs

There are various different light objects you can use to light your scene in any given 3D program. Some use different names for the same type of light tools or objects, but it's helpful to know the difference between each.

Directional lights

A directional light object is one that emits light in a single direction, much like the sun. Typically, the light direction can be adjusting in the program as well as the edge softness.

Point light

A point light will emit light in all directions from a single, small point. Light will be cast evenly, despite the direction the point light is rotated. These type of light objects are typically used for things such as light bulbs or candles.

Area light

An area light emits light that is confined within a single object, such as a rectangle or sphere. An area light object will simulate an effect very similar to real-world lighting objects, such as fluorescent lamps or lighting studio equipment. In Adobe Dimension, you can recreate the effect by applying a Glow material to an object. You can then even add texture to the light by placing an alpha mask into the Opacity slot.

Sun

We've talked above about using sunlight to light your scene. To achieve natural sunlight, you will need to use a sun object in your 3D program of choice. Typically, you can adjust the sun positioning, angle, brightness, and cloudiness.

Breaking down our 3D scene

Now that we've covered the basics of 3D lighting techniques and light objects, let's break down what I did to I achieve the results from our sci-fi inspired renders.

For this simple setup, the lighting is based on a three-point lighting technique. There is a large "key" light illuminating our subject. This is lighting the majority of our spaceman, along with creating the largest reflection in the helmet.

Next, I've added a large, soft fill light with a red tint set directly behind the camera to fill in the harsh shadows. I then also created a rim light to illuminate the back of our astronaut.


Additionally, I've also added some environment (HDRI) lighting to create some reflections in my scene for added realism. The environment lighting will create some additional reflections on our astronaut's visor and suit. Oftentimes, I will combine environment lighting with standard lights. This allows me to still have control over my main light sources, but get those real-world reflections from the environment map.

You can toggle on environment lighting in Dimension with a single click, and choose from a variety of presets.

Finally, I've added a highly reflective material to the visor of our astronaut, as well as applied some darker plastic materials for the suit. I've also applied some normal maps to all of my objects for added texture, more on normal maps below.

Here is an interactive embed of our scene, for further analysis:

Pro 3D lighting tips

Use clay first

I'm not talking about literal clay. Rather, remove all the materials from your models when setting up your lighting. This will allow you to view the lighting without the distraction of reflections or color. Later, when you are happy with your lighting setup, you can apply your materials to your objects.

Removing materials allows us to see our lighting clearly, without distraction.

Composition is key

The placement of your lights is very important. It's also important to place your objects in a way that will allow you to easily light and manage your scenes. For example, if you want a particular subject in your scene to stand out, you'll need to light them properly and place them in such a way that will naturally lead our eye. Try placing your subjects in areas that are most well-lit, ensuring not to make areas of secondary areas brighter than your subject area. For areas you want to be less distracting, try reducing the light.

Toggle lights one at a time

To get the best idea for where your lights need to be placed, try turning off all of your light sources and only keeping one on at a single time. This will help you understand where you need to make your adjustments to your light placements without the distraction of other light sources.

Be mindful of reflections

The materials you use in a scene can have a big impact on how your lighting reacts. Since some materials absorb light differently, such as metal as opposed to a fine cloth, you'll need to be intentional with your material choices. If you want a lot of reflections in your scene, consider using a lot of materials that are metal or contain a high amount of "roughness" or reflection. Sometimes, adding more reflective material to your scene can increase visual interest simply because of the light bouncing around and off of your reflective surfaces.

Sometimes it also helps to add objects to your scene that will bounce light and add additional reflections. An example of this is adding a floor object in your scene, or setting a "glow" value to objects you've strategically placed in your scene.

Use materials with normal (bump) maps

Another way to add realism and use lighting to its full potential is to create materials that have "normal maps." Normal maps, also referred to as bump maps, contain height information in the form of bitmaps that simulate textures or imperfections on the surface of your object, based on the way that light is hitting your objects. Since all real-world objects contain some sort of imperfections, they are incredibly useful for creating realistic scenes.

An example of a normal map.

Here is a before and after of the same exact shot, with and without the normal map above being applied:

Adobe Stock has some fantastic materials that come pre-made and optimized for Adobe Dimension, with normal map information already included. I highly recommend using materials with bump maps applied over simply using the defaults of whatever 3D program you are using. You can also generate normal maps from images or textures in Photoshop as well. Personally, I find normal maps work best when scaled down, thus increasing the amount of tiled patterns and heightening realism.

Angles matter

Don't place lights directly in front of your subject. Avoid placing your lights in symmetrical positions from one another.  Instead, always tilt them at off-angles or 45-degree angles in relation to your subject. By doing this, you'll avoid "washing out" your objects and allow for more shadows to play in your scene.

The larger the light, the softer the shadows

The larger your light source, the more light will diminish shadows and create a softbox for your subjects. In contrast, using smaller light sources means harsher and more direct shadows. If you are finding your shadows too harsh in your scene, simply enlarge them.

Add color

You don't have to use straight up white light for your scenes. Sometimes, you can bring interest just by adding a color tint to your lights to give it a different feel or that cinematic touch. In most programs, including Dimension, you can change the color of the light source.

Experiment!

Sometimes to get that "perfect" shot you may need to simply play with the lights in your scene. Each object and composition is different, so sometimes you may have to play with your light placements and colors to get the perfect look you want. Don't be afraid to move things around or break the rules.

Note: special thanks to Raoul Marks, Angelo Ferretti, and IUPUI University for the 3D models featured in this article.