Flare

The flare unifies our visual language, adding vibrancy and depth to layout, imagery and typography.

Introducing flare

Flare is a subtle glow we use that visually lights up photography, illustration, headlines and graphic textures. The animation below shows examples of how flare is used to add vibrancy and depth.

Using flare in layout

Colour

There are defined colour pairings between the flare and the background. These pairings also inform how colour is applied to player imagery so that all page elements work in harmony. Below are examples of how the colour of the flare is used with correct colour schemes.

Construction

The flare is created with a gradient using a core/accent colour with set opacities. We have specific values for creating the flare on white, black, teal and orange backgrounds.

Positioning

The flare is always drawn at a 45° from the one of the four corners of the page.

Size

The size of the flare is determined by drawing the gradient at 45° till it reaches the edges of the page. Below are examples for portrait and landscape formats.

Using flare with images

Player imagery

Players inherit the colour and vibrancy of the flare when placed into layouts. They should always appear to blend into their surrounding and never feel visually disconnected.

For instances where player photography has not been shot using coloured lighting in studio environment, we achieve the required results using Photoshop. This involves a process of selecting shadows and highlights using a gradient map with our core and accent colours.

Hover over images for before and after

Below is a step by step guide, accompanied by a video tutorial to show how to edit images and achieve the correct results.

Step 1

Create a transparent background
Make sure the player in your image has been cut out and sits on a transparent background. This will help steps 2 to 4 and when the final image will be placed onto layouts.

Step 2

Pick colour
Decide on the colour you will be using for your layout. Now pick a side of the player you want the flare to be most prominent. This is usually the side that has the most light on the player.

Create gradient map
Create a new adjustment layer from ‘layer’ menu and select gradient map. Change the colour of the gradient map with a core colour to the purple shown below (This purple is used for retouching purposes only).

Adjust your gradient map accordingly so that the purple colour is on the left side of the gradient slider.

Step 3

Creating a mask
In the layers window, select the layer mask thumbnail on your new gradient map layer. With black selected as the foreground colour in your toolbar, use the gradient tool and drag from one side of the player to the other. You should now see a gradient from colour on one side of the player, to transparent. Make sure the colour side is where the light is.

Selecting highlights
Now in the top ‘select’ menu, click ‘colour range’.
In the window drop down menu select ‘highlights’. There are two range adjusters; fuzziness and range. We recommend a region of 100 for fuzziness and 70 for range. Click ‘OK’.

Blending mode and opacity
Set the blending mode for the layer to overlay and adjust the opacity to 50% opacity for RGB print or 60% for CMYK.

Step 4

Repeat process
Repeat the same process in step 2 and 3 but instead of selecting highlights in the colour range, we select shadows. In shadow options, we recommend approximately 100 for fuzziness and 50 for range.

Blending mode and opacity
Set the blending mode for the layer to soft light and adjust the opacity to 50% opacity for RGB print or 60% for CMYK.

Step 5

Repeat process
As we do in steps 2 and 3 create a gradient map and create a layer mask.

Creating a mask
With the layer mask thumbnail selected use the gradient tool to fade the gradient over the player, from the bottom to waist height. The top end of the gradient (by the waist) should be the transparent. This can be above waist depending on the crop of the player you will be using when placed into layouts.

Blending mode and opacity
Set the blending mode for the layer to ‘lighten’ and adjust the opacity adjust the opacity to 50% opacity for RGB print or 60% for CMYK.

The player image is now ready to be placed onto a colour background and other page elements.

Note: Reverse Gradient Map to have the core colour cast from the bottom of the player if needed

Step 6

Place on background
The image is now place on the background. Make sure the light is shining in the same direction as the light you have applied to the player. This will ensure the image will blend harmoniously with the background.

Champion imagery

Champion imagery follows a similar process to player photography. Rendered images of Champions taken from the League of Legends are cut out and the flare is applied. This brings them in line with our colour palette and visually blends into backgrounds.

Hover over images for before and after

Step 1

Create a transparent background
Cut out the champion from the original image so it sits on a transparent background. This is so when it comes to layout, the Champion can be placed on different backgrounds and textures.

Step 2

Pick colour
Determine where the placement of the flare will be in your layout and what core colour to use.

Create a gradient map
Create a new adjustment layer from ‘layer’ menu and select gradient map. The example in this step is teal accent to teal accent.

Creating a mask
In the layers window, select the layer mask thumbnail on your new gradient map layer.
With black selected as the foreground colour in your toolbar, use the gradient tool and drag from bottom left (where the flare will be placed in final layout) to mid torso. You should now see a gradient from colour from the corner of the champion, to transparent.

Add opacity
The gradient map should now be transparent where the mid torso of the Champion is. Add a 40–50% opacity to the gradient map to ensure the details of the image are not obscured.

Step 3

Repeat process
Now repeat the process in step two but now we apply the colour to the mirror side of the Champion (top right). This will be your core colour in the layout.

Create a gradient map
After creating a gradient map create a layer mask. Select the layer mask thumbnail and use the gradient tool to fade the gradient over the Champion from top right to mid torso. Make sure in your tool bar that the foreground colour is set to black.

Add opacity
Check the gradient map is now transparent where the mid torso of the Champion is and add a 30–40% opacity.

Step 4

Repeat process if required
The Champion image may have areas that are very dark, which can mean it struggles to blend into the colour of the background.

In this example, we have repeated the process explained in step three and applied another gradient map on the bottom right leg of the Champion. This will ensure that the image will now work harmoniously within your final layout.

Step 5

The Champion is now ready to be placed onto your background colour along with the light. Tweak the percentage of the opacity in your gradient maps to find a level of transparency that works best in your layout.

Consistent flare direction

Here are further examples of how we have treated player imagery and Champions with the placement of the flare. It is important that the direction of the flare matches where the light source is on the player or champion.