News

How to create cut-out text effects

Inspired by smp-architects.com, we show how to quickly emulate the site’s typographic cut-out header in Photoshop and add fade-in effects with CSS

cutouttext

cutouttext

DOWNLOAD TUTORIAL FILES

Prepare the layers

For this simple technique we’ll be using Photoshop CS5.5 to perform image edits, although the same principles should apply across versions. Start with a suitable image set as the background layer, preferably a photographic shot with enough colour and detail to maximise impact, showing through the regions we’ll cut out.

Add a colour layer

Add a new layer via Layer>New or the Layers palette. Use the Paint Bucket tool to fill the entire layer with a flat colour, in this instance we’ve opted for grey (#222323). Should you wish, set the Opacity level to around 80% in the Layer Styles box (Layer>Layer Style) to make the layer semi-transparent.

The text selection

Use the Text tool to type in the text you want to cut out from our colour layer. We’ve set ours pretty big at 880pt and positioned it to cover the whole shot. Right-click the layer preview image for the new text layer in the Layers palette and click ‘Select Pixels’ from the menu. The text should then show an active selection around each character.

Delete and done

You can now hide the text layer and select the colour layer below. You should still see the pixel selection active, denoting the pixel regions from our hidden text. Simply hit the Delete key now and our text selection should cut through the layer to reveal the underlying background image. Click anywhere with the Selection tool to deselect, and your cut-out header graphic is now ready to go!

TECHNIQUE

The Drexler team shows how to fade content in as it scrolls into frame, using CSS, Modernizr and the Waypoints jQuery plug-in

The first element

As you scroll the pages at smp-architects.com, you will notice that the elements fade into view. While this effect can be applied to any DOM element, for illustration in this example we see it added to an HTML5 <figure> element, containing an image and caption. We would also add modernizr.js to our pages to make sure there is a fallback for older browsers (modernizr.com).

001    <section class=”post”>
002        <figure>
003            <img src=”imagepath.jpg”>
004            <figcaption>Image Caption</figcaption>
005        </figure>
006    </section>

Add the styling

Set the default CSS styling for the <figure> element and give it a transition declaration of 400 milliseconds. We’ll dynamically add a class of ‘show’ to our elements, defining our styling for this state too. Using modernizr.js, we add the class of ‘csstransforms3d’, so the effect is only applied in browsers that support it. Keep transition times short so the site moves quickly.

001    figure {
002        opacity: 1;
003        transition:.4s ease;
004    }
005    .csstransforms3d figure {
006        transform: translate3d(0px, 90px, 0px);
007        opacity: 0;
008    }
009    .csstransforms3d figure.show {
010        transform: translate3d(0px, 0px, 0px);
011        opacity: 1;    
012    }

Work with Waypoints

After attaching the Waypoints jQuery plug-in (bit.ly/1mXf4eK) as used on the SM+P Architects site, we can add a simple class to our figure elements when they scroll into frame. Using an offset of 50 per cent means it will trigger when our element is halfway from the top of the window. Your offset can
be a percentage or a pixel value.

Improve your web design skills with Web Designer. Download issues direct from GreatDigitalMags.com or buy print issues from ImagineShop

×