About This Article •
Lots of people write to me asking how they can change the header text of the Aerolite template. Well, as I’m sure you’ve learned, that text up there is actually an image. Hum… not true… it’s really a PDF file! This entry will walk you through the steps to create your own version of that [...]
November 9, 2006 11:28 PM
aerolite, screencast, tutorial
« Vertical Nav Bar Pros & Cons
Lots of people write to me asking how they can change the header text of the Aerolite template. Well, as I’m sure you’ve learned, that text up there is actually an image. Hum… not true… it’s really a PDF file! This entry will walk you through the steps to create your own version of that header using the Bitsumishi font I used in the template. Get the font via that link if you haven’t already :) The written instructions follow the video. Enjoy!
Here are the written instructions in case you want to go more slowly by yourself:
- Download and install the Bitsumishi font.
- Create the text in iWeb that you want to use for your header. Apply the font. 64pt is a good size.
- Select the text box so you see the eight little boxes (handles) around the edges.
- Copy it.
- Open the application Preview.
- Press two keys on your keyboard, Command + N. This will insert your text into a new document. Preview will display it for you.
- Save the document to your hard drive in a place where it makes sense. Do not change the save settings. It should remain as PDF.
- Now drag and drop the new PDF file onto your iWeb page. Use the inspector to set the image at original size. Apply a shadow to your text if you’d like. In the example on this page, I’ve used a black shadow at 90 degrees, 2pt offset, 5pt blur, 75% opacity.
- While it’s still selected, now click the mask button on the button bar at the bottom of the iWeb window. This will insert a masked area on your PDF image that you can adjust.
- Adjust the size of the mask so that it does NOT hide the shadow, but make sure it’s flush with the bottom of the letters.
- Now apply a reflection. If your mask was not flush with the bottom of the letters, your reflectoin won’t be perfect. You may need to remask your image if that’s the case.
There you have it! Ken’s cool Preview Passthru! For more information about this technique and tons of other extremely useful iWeb tricks and tips, please visit Ken’s site. http://www.makentosh.com.
Suzanne,
This gets cooler and cooler. This is fantastic…….I am learning so much…….watch out…..JABBERWOCKY CREATIONS coming to as template creation LTD soon!!!! :) Just kidding. This has really helped me customize ANY templates I have. Can’t wait for more. You are creating a monster….er…..Jabberwock is a monster already. Oh well!
j’wock (the sleepless)
Rock on girlfriend! :) I’m a good student no?
Another great vid! :) By the way, the reason why you pick .pdf instead of .png is because sometimes in some apps, .png can give a white background with no alpha channel. .pdf always gives a transparent background AND, on vector type stuff, the file sitting in your Domain.sites folder will be smaller than what iWeb generates for the web. Even with all the images and text on my pages, since most of it is vector and stored as .pdf’s, my Domain file is only 195 megs.
Oh, and another one is that if you decide to scale the images to be REALLY huge, the .pdf will keep the edges sharp and crisp giving iWeb the highest quality source file to create it’s .png’s from.
Hey! Look who dropped by :) Ken you should add your web site to your account profile so your name is linked to your site.
Good information and thank you for helping me out with that in the first place. That’s a great solution - actually one of the best tips I’ve ever gotten.
Just as a side note… iWeb has a fix for the PNG issue in place now, but that fix will only fix PNGs that are not specified through CSS. For example, if you drop a PNG image on your page, iWeb will specify that image with IMG tags in the HTML. However, if you use a PNG image for the background of the page or the browser or even an iWeb shape, iWeb will specify that image via CSS and that’s when you’ll see that opaque background show up.
Excellent! I’m bummed now tho’ b/c I just watched all 4 vidcasts, and there’s not any more…. :( Guess that means I’ll have to go play and apply what I’ve learned until you come out with a couple more for us. Thanks for all the help!
How do you delete the original text box after replacing with a graphic?
David, there are some text boxes which cannot be deleted. You can move it way off your page if you want, but you can’t actually delete it.