Hi All,

 

Sorry to be spamming the forum today.

 

Can anyone tell me what the technique is called or point me to any tutorials on how to make up letters out of images?

 

To try and explain... basically for an example you have the word "ART" and rather than it being just text you have typed in Photoshop you have many small silhouette type images that form together to make the letter A and your eye just fills in the gaps.

 

It's hard to explain and hence why I'm not sure what to search for in Google but I have seen logos done in the past in this way.

 

Thanks for any help.

There are numerous ways to do it. My preference would be to use a font icon but you could use background images like this:

 

1. Create images for each letter/number as required, lets say images are all 40px x 40px

2. Create CSS rules for each letter/number:

.word { position: absolute; left: -999em; } /* hides real text off screen for accessibility */
.letter { display: inline-block; width: 40px; height: 40px; } /* sets default display size for each character */
.a { background: url(letter-a.png); }
.r { background: url(letter-r.png); }
.t { background: url(letter-t.png); }
 

3. Create your HTML

<h1>
  <span class="word">ART</span>
  <span class="letter a"></span>
  <span class="letter r"></span>
  <span class="letter t"></span>
</h1>
 

Just found what I'm after: http://wallchips.com/abstract-art-3d-pictures-hd.html

 

I guess they just do them up in Photoshop? using a letter as the template? Then use your code above.

Yep the character images can be whatever style you want