Comments on: Beautiful Examples of Inset Typography in Web Design

By: Andy

Andy — Tue, 05 Jan 2010 15:52:18 +0000

All the sites look pretty amazing, especially metalab.

By: e-sushi

e-sushi — Sat, 17 Oct 2009 20:31:39 +0000

A good overview of inset typo.

LOL! Somehow I get the retro, deja-vu feeling for my first Photoshop Tips & Tricks book, showing me how to do stuff like inset type. Geez… that was at times where PS hugged version 2.0!

Seems history always repeats itself… just like in every design area (see clothing trends, shoe trends and especially color-related trends).

Oh well, I guess I better dig out my old designs and start re-selling them to new clients! ;)

By: Cheap Web Design UK

Cheap Web Design UK — Fri, 16 Oct 2009 18:30:16 +0000

yeah
it really looking beautiful,
like the remix most,.

By: Chris Spada

Chris Spada — Tue, 22 Sep 2009 12:34:36 +0000

Some really nice examples. Starting to see this treatment everywhere but love the texture it adds.

By: Steven

Steven — Mon, 21 Sep 2009 00:43:37 +0000

Anyone know of a good GIMP tutorial for Inset Text?

By: Marc Mendell

Marc Mendell — Sat, 19 Sep 2009 07:18:55 +0000

Hey there – thanks for including my site. I think the point that it is overused has some truth – but there is a time and place for everything. I am drawn to it as a method to achieve subtle depth – however, I like to think that doing so is to achieve this look and not simply to include a bevel. That said… This is how I did it…

PSD source file: http://dl.getdropbox.com/u/293170/Wood.psd

1. Background layer – in my case wood
2. Text layer 1 – some outer emboss to form the outer edge
3. Some pillow emboss to create the edge that the light is hitting
4. Clip the any background pattern within the inset layer that has an inner shadow opposite the
edge that the light is hitting.
5. Duplicate the pattern layer / set to multiply and lower the opacity – This darkens the inside in such a way that makes it look like it is at lower depth level then the wood above.

For #5 – notice I offset the pattern of the wood about 5px over and down… this just adds to the idea of depth since the seams would not perfectly line up given that the notched part is lower then the top surface.

The colors I use in the strokes and outer blurs are relative to the colors found in the background – but the opacity and brightness of actual color based on what looks good in the specific situation.

I hope this helps – I started as a traditional illustrator, and try to think of how things look based on how & what direction the light source is – as well as what the patterns are etc.

By: Mohsen Moridi

Mohsen Moridi — Fri, 18 Sep 2009 20:37:19 +0000

amazing designs
tanx

By: Jacob Gube

Jacob Gube — Thu, 17 Sep 2009 17:44:41 +0000

@Milly Vanilly: Someone had to say it, I appreciate your candidness. @Angela: That means a lot coming from the site owner of BestDesigns.com! @Website Design UK: Thanks for the submission to CSSGlobe.

By: Website Design UK

Website Design UK — Thu, 17 Sep 2009 15:04:27 +0000

Submitted to CSSGlobe for you, Jacob. Thought it was worthy.

By: Webdesigner

Webdesigner — Thu, 17 Sep 2009 09:56:50 +0000

Nice set of websites. But I think, the effect is in danger to be overused, allthough the examples are very nice…