logo

CodeStore Logo in Punched-Out Letters Using Fireworks

Xander posed the following challenge:

I've seen websites where the site name is written in big letters across the site in the same colour as the page background but shadows have been added to the inside of each letter to give the illusion of the site name having been stamped into the page background.

I think it looks pretty difficult and something that you would really need a package like photoshop to do.

Can Fireworks do this?

Easy enough. Let's see how I'd do that for codestore.

First thing I'd do is draw a rectangle in "codestore blue" and write codestore on top of it in the "codestore font" (AKA World of Water).

image

In order to manipulate the text we need to select it and then right click and choose "Convert To Paths". Then right click it again and choose Ungroup. You'll end up with a vector-based shape for each letter, as below:

image

Now, de-select all the letters and then select just the C along with the rectangle. Then, from the Modify menu choose Combine Paths -> Punch.

image

That just knocked out a C-shaped hole in the blue rectangle. Now select the O and the rectangle and repeat the last step.

image

Keep going until all the letters are punched through.

image

Now from the menus choose Modify->Canvas->Canvas Color. Change it to the same as the rectangle.

image

All you need to do now is add a Drop Shadow filter to the rectangle and you're done.

image

It could probably do with a bit of tweaking to make it look just right. To me it only looks like a punch out if you get close enough to the screen. From here it look a bit like raised "bubble" letters.

Is that what you meant Xander?

This was time-consuming more than it was difficult. As with the other examples I've posted, it's just a case of knowing what all the tools do and knowing how to apply them and in what order.

UPDATE: It's been pointed out in the comments that this is a ridiculously over-complicated approach.

The best way to do this is write your text in the same colour as the background and then simply add an Inner Shadow filter to the text itself! So simple, it hurts. You can even change font!!

Comments

    • avatar
    • Richard Shergold
    • Fri 17 Sep 2010 05:49 AM

    I hope your "usual" graphic designer is keeping an eye on all this!

      • avatar
      • Jake Howlett
      • Fri 17 Sep 2010 06:23 AM

      I don't think he's got much to worry about.

      Being able to produce a copy of something is easy enough. Where I fall down is in turning a blank page in to something amazing. That's where he comes in.

    • avatar
    • S.
    • Fri 17 Sep 2010 07:16 AM

    Actually, you could write the text in the same colour as the background and just add an innershadow effect to it :)

    P.S. I use Fireworks almost daily, as it's much better than anything else I've tried (including Photoshop) at designing/prototyping websites.

      • avatar
      • Jake Howlett
      • Fri 17 Sep 2010 07:23 AM

      DOH!

      Not only is that so, so much easier it has the added benefit of leaving the text as text, so you can change font face, styles etc.

    • avatar
    • Xander
    • Fri 17 Sep 2010 07:17 AM

    Spot on Jake, you make it look really easy. The only thing I would have done differently is add some sort of thin border line around the letters to make the non shadowed side stand out from the background colour while still giving the effect of being sunken.

    Top notch...

    • avatar
    • Aaron Hardin
    • Fri 17 Sep 2010 08:21 AM

    Even with the easier way to do this, your example showed me something that I was trying to figure out some time back that I finally gave up on.

    Thanks brother!

      • avatar
      • Jake Howlett
      • Fri 17 Sep 2010 08:34 AM

      Cool. That's why I left it in there, despite it being mis-information. As you've found it does show a couple of techniques that might come in handy.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Fri 17 Sep 2010

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content