Apply Transparency Effects In Photoshop

 

Going in circles cultural solutions uk wanted to create an illusion of endless possibilities. The circular inspiration came from the identity, which used overlapping circles and overlays. They liked the use of parallax at the time, most notably at www.nikebetterworld.com.

Inspiration: www.culturalsolutions.co.uk

Transparent styles are rife in contemporary web design and, with new option upgrades in Internet Explorer and CSS, Photoshop artists are excelling in creating what are described as ‘faux-transparency assets’. Basically what this means is that Photoshop is being employed to create solutions without the need of data encoding, but rather to make solid images.

This is all thanks to the adoption of PNG-based files, which are now easy to apply with the Save for Web & Devices option. Here web designers can simply select PNG24 from the preset options, with Transparency ticked for sure-fire results. The effect looks just as seethrough to the end-user and sidesteps tricky issues with poor browser support and having to hack IE6.

David Lambert’s site (www.culturalsolutions.co.uk by Hoohaa Design) uses this style to great effect. He explains: “Web design is becoming a lot more fluid, aiming to engage the user this way. Websites are focusing more on experience rather than just providing well-organised content. Transparency effects have also become a lot more popular because PNGs are now well supported by most browsers.”

The site is targeted at the arts and culture sector so it had to make a statement. Lambert adds: “We aimed to make the site into a memorable experience for the user, with the aim to create a grown-up but creative feel.”

Parallax Effects:

“JavaScript-powered interactive elements help enrich and add depth to the visuals. The parallax motion of the circles at the top surprises the user, inviting them to explore. As the user moves down the page the parallax effect creates a fluid-almost-visceral feel. The various circle elements and jQuery-powered sliders are used to structure the content in a logical manner.”

#1 - Technique: Transparent Web 2.0 elements

Transparent icons and panels instantly make a website look modern and cool. One thing to always remember, however, is that you need a suitable backdrop to maximise this effect – so anything such as mosaic pixel patterns, strobe or bokeh lighting will really enhance your results. Here we show you how to create a transparent panel in just three steps using Photoshop, and how it’s affected by using one of the mentioned backdrops.

STEP 1: Cut Some Shapes

First select the Rounded Rectangle tool and draw out your shape. Set the Radius settings to between 10 and 40 pixels depending on your panel size. Next, select the Inner Glow layer style from the menu in the Layers palette.

STEP 1: Cut Some Shapes

STEP 2: Layer Style Options

Set Blend Mode to Normal, Opacity to 100% and the colour to #666666. In the same menu set a 1px black Outside Stroke. Cmd/Ctrl-click the shape mask thumbnail, select the Marquee tool and move your selection up half of the shape.

STEP 2: Layer Style Options

STEP 3: Gloss Effects

With a white foreground colour, apply a foreground-to-transparent gradient at around 30% Opacity. Cmd/Ctrl-click your shape mask thumbnail, applying a layer mask to this gradient layer. Lastly, drop both layers’ Opacity to 60%.

STEP 3: Gloss Effects

#2 - INSPIRATION: Why use PNG?

With updates in Internet Explorer, the PNG is finally matching the GIF, becoming extremely advantageous. The PNG firstly reduces file size without reducing image quality, making it better than its GIF and JPEG counterparts. PNG also supports 24-bit RGB or 32-bit RGBA colour palette-based images, meaning perfect translation of millions of colours. Most importantly, however, is that the PNG lets you work with alpha channels. This means whereas GIFs only allow a given pixel to be fully transparent or opaque, PNGs create images with degrees of transparency, better for blending images with their backgrounds.

#2 - INSPIRATION: Why use PNG?

#3 - TECHNIQUE: Blending Modes (for transparency)

STEP 1: Hard Light

This blending mode darkens shadows and brightens highlights, tinting everything beneath. Generally use Hard Light when you want to amplify the original hue and saturation to enrich tones.

STEP 1: Hard Light

STEP 2: Overlay

This affects the overlap similar to Hard Light. However, when your shape interacts with the background, its tone looks to match hues. In black or white backgrounds it tends to disappear.

STEP 2: Overlay

STEP 3: Difference

This mode throws up surprises and can quickly alternate tones creating visual interest. It works by inverting tones in the overlapped layer. Hues become their opposite on the colour wheel, eg here green becomes magenta.

STEP 3: Difference