The sepia toned warmth of an old photo is easy to accomplish. In this tutorial, I’ll walk you through how to antique a contemporary photograph in just a few easy steps. The photo I’ve started with is an image towards the bay from downtown San Francisco, but you can of course, start with any image.
We’re going to first give the photo a little bit of a professional presentation by giving it a fake mat, or border. Select the entire image by using Ctrl+A on Windows, or Command+A on the Mac. Select a dark foreground color, and then click Edit > Stroke. Set the stroke width to 1 pixel, and the location to center. This will give an outline to the image.
Next, to create the effect of a mat, make sure your background color is set to white. Select Image > Canvas Size, and add 10 pixels to the width and height of your image. This will give a 5 pixel border to your image. For a more dramatic mat, increase the size.
The next part is the easiest. Transform your color photo into a sepia image by selecting Image > Adjustments > Hue/Saturation. You can also use the keyboard shortcuts of Ctrl+U on Windows, or Command+U on the Mac. Click the colorize checkbox, and adjust the Hue slider until you find the effect you’re looking for.
As a last touch, add some noise using the grunge brush from a previous tutorial to give an aged look to your image.
This quick and easy tutorial will walk you through how to create a grunge brush for aging and antiquing your artwork. The end result will be a brush that you can use again and again.
Start with a new file, 1000 pixels by 1000 pixels. You can make it smaller, but this should give you a good size brush.
Select Filter > Render > Clouds. This will add cotton candy fluffiness to your image, which may seem like it’s a long way from gritty grunge, but it’s really only a few steps. The Clouds filter is one of the Photoshop filters that uses foreground and background colors to create the effect. If you get nothing, it’s probably because your foreground and background colors are set to the same color. The colors I’ve used in the example are a dark red brown and white.
Next, select Filter > Noise > Add Noise. I set the amount to 10%, and selected Gaussian as the type and selected the Monochromatic checkbox as well. This step adds the grit and grime to the equation.
Next, we’ll adjust the levels to give us just a little bit of grunge and texture. Select Image > Adjust > Levels, or use the keyboard shortcut of Ctrl+L on Windows, or Command+L on the Mac. The Levels adjustment window allows you to set the overall lightness and darkness of an image. In this example, I’ve lightened up the entire image by sliding the white Input Level triangle to the left to 114. I’ve also adjusted the black Output Level, which is located below the input level graph. IÂ moved the black triangle to the right to 194. You can see that this has lightened the overall effect a great deal.
 Manipulating the black output level is a quick way to lighten any image, and it’s a great way to make a background lighter, so that text on top of the background is more legible.
Experiment on your own image by dragging the various black and white input and output sliders to see how they effect your image. When you find the result you’re looking for, click OK.
The last step is to select Edit > Define Brush Preset.This will give you the opportunity to name the brush. The brush will appear in your brush list as the last brush on the list.
A little while back, I showed you how to create a simple gridded background. That’s nice, but let’s get a little bohemian, and make that gridded background more interesting.
We’ll throw a couple of standard Photoshop filters on, add a little brushwork, and you’ll end up with an interesting, textured background for your 3 by 5 cards or web page or any project.
If you’ll be creating this for a 3by5 card, select File > New, and enter a Width of 5 inches a Height of 3 inches, and set the Resolution to 200 pixels/inch.
Add a new layer. Select Filter > Render > Clouds. This is one of the built in Photoshop filters that uses the foreground and background colors to create the effect. In the example shown here, the foreground is hexcode #592001, and the background is white. (Click the preview to enlarge.)
After adding the clouds, we’ll add a little noise to create more texture. Select Filter > Noise > Add Noise. I set the amount to 12%, the Distribution to Gaussian, and clicked the Monochromatic checkbox.
The effect is overpowering and has hidden the gridded background. Set the cloud layer’s blending mode to Multiply, and change the opacity slider to something around 35%.
You now have a pretty cool effect, of slightly rumpled paper. We’ll take the aging process one step further with the Burn tool.
Toggle the cloud layer off and select the burn tool. You’ll find the tool by clicking on the dodge tool and holding down the mouse button until the burn tool appears. You’ll want to select the settings shown above: a soft brush, the Range set to Highlights, and an exposure under 30%. Now you can loosely scribble on the edges to darken them and create the effect of old, worn paper. Experiment by changing the exposure amount and the brush size.When you’re done scribbling, you should have something like the example shown here.
Toggle the cloud layer back on by clicking the eye icon next to the layer label. Add a text layer using a handwritten or antique looking font to complete your artwork. The font I’ve used in the example is called Blackadder and is available from ITC. You may want to snag a freebie font from the collection of handcrafted fonts featured a while back.
Experiment and enjoy your new antiquing abilities.
This may not be exactly how grandma got things done, but she didn’t have Photoshop to play around with, did she?
I’ve just finished watching a BBC production called, “Frank Lloyd Wright - Murder, Myth, and Modernism”. This film gives an overview of FLW’s personal and professional lives. The things that are staying with me how he centered his life, both personal and professional, around the home he built named Taliesin, even though it was the site of a shocking mass murder that took the life of the woman he loved.
The other point that’s resonating with me is that FLW reinvented himself at 59, when he was dead broke, and that the years that followed were some of his most prolific and innovative. As part of his reinvention of himself, he recruited backers, who would receive a percentage of his earnings. He wrote a book that began his self-mythology, and also started an apprenticeship program where young men and women stayed and worked at Taleisin.
The program included a look at many of the public and private buildings he designed, some of which I hadn’t seen before. Below is a snippet of this program:
If that snippet isn’t working, you can go to WowTV.
For fellow font collectors, P22 offers some wonderful FLW fonts, including the Exhibition and Eaglefeather sets.
This is a simple way to create your own graph paper, in any size or color that you want it. I’ve found, that for a background, it’s generally good to use pale colors so that they don’t obscure the type, printing, or doodles on top of them of them.
If you’ll be creating this for a 3by5 card, select File > New, and enter a Width of 5 inches a Height of 3 inches, and set the Resolution to 200 pixels/inch. (You can, of course, use this method for anything from a web page to a full sheet of paper to a billboard).
Next, create another new file, by selecting File > New, and enter a Width of .3 inches, a Height of .3 inches, and the Resolution to 200 pixels/inch. This is the file that will contain the grid pattern you will create.
Next, click the foreground color in the Toolbox, and select a pale color for your gridlines. I’ve selected a pale blue gray, hexcode #C5D1eA. Select the Pencil tool, and set the brush size to 1 pixel.
Draw a straight horizontal line by shift+clicking the pencil in the grid file. Draw a vertical line by shift+clicking with the pencil tool again. It doesn’t matter where the lines intersect, just make sure that the lines go completely from side to side and top to bottom.
You’ve just created the grid background! To apply this as a repeating background, select Edit > Define Pattern, and enter a name for the pattern.
To fill the image with this background, select the 3 by 5 image you created in the first step. Next, select Edit > Fill > Pattern, then browse to the grid background you’ve just added. Click OK and the background pattern will fill the 3by5 card.
The background of your index card will fill with the pattern you’ve selected.
This gridded background can be used in a number of ways, such as filling the background for writing paper, or creating a guideline in a piece of artwork. If you’re using the background as part of a collage, or as guidelines in your art, you would want to put the background on it’s own layer.
Altering the colors and size of the background can give a wonderful variety of effects.
You can also alter the size and colors of the background in many ways to achieve different effects. You can add the grid to a gradient or textured background, or place it over a photo.
I’m a huge fan of the little 3×5 index card. You may be familiar with using these to organize your life, popularized by the hipster pda and the philosophy behind Getting Things Done. There are many templates for cards that you can download for free, but they tend to be a bit bland for my taste.
I’m offering up some tutorials so that you can learn Photoshop techniques and create nifty 3by5 cards all in one. You’ll want to print these out in order to use them, so look below for printing instructions. The idea behind creating these cards is rather crafty. First, you’ll be practicing your Photoshop skills on a small, manageable project. Secondly, you’ll have tangible evidence of your Photoshop mastery. Thirdly, you’ll have gorgeous cards that will hopefully inspire you to become more organized.
There are so many ways to use these 3by5 cards. I use them to store bits of information that would otherwise get lost, including:
MP3s I want to download from iTunes
My son’s shoe size
Serial numbers for software
Quick ideas and small sketches
Addresses and phone numbers
URLs I want to visit
Books I want to read
Recipes
But the main reason I use them is to keep myself on track. Every day I write out a To Do list for the day, and pick the 3 most important things to get done for that day. If other tasks pop up, I write them down and keep them for another day so that I don’t get distracted.
You’ll want plain cardstock, in either white or a pale color that tickles your fancy. If your printer will print on 3 inch by 5 inch cards, you just need blank index cards. You won’t even need the rest of the instructions on this page
Printing Multiple Cards at Once
If your printer isn’t as flexible, you’ll want to buy a package of 8 1/2 x 11″ cardstock. Cardstock is just a fancy way of saying heavy paper. If you look at a regular index card, that’s cardstock weight paper. You’ll be able to print three cards per 8 1/2 x 11 page. If you’re very lazy, you can buy 8 1/2″ x 11″ cardstock by Avery or Oxford that has been perforated so that you can punch the cards out after you’ve sent the paper through your printer.
To print multiple cards, I’ve provided a template. Download the PDF template for printing 3by5 cards, and next open it in Photoshop. When you open the PDF, you’ll want to change the resolution to 200 pixels per inch. I’m using that as a guide because it’s low enough resolution that it won’t create huge file sizes, but high enough that your artwork should print out nicely. If you’ve included photos, or want better resolution for other artwork, you’ll want to work at 250 to 300 pixels per inch.
Once you’ve opened the PDF template, you’ll want to open the card or cards you’d like to print out. Copy the card by making sure that the image is flattened (Layer > Flatten Image). Next, select the card (use Ctrl + A on Windows, Command + A on the Mac), copy it (Ctrl + C on Windows, Command + C on the Mac).
Next, select the template file, and Paste (Ctrl+V on Windows, Command + V on the Mac). You’ll want to paste 3 copies, and align them using the template’s guidelines.
Now you’re ready to print. Select File > Print. Leave the settings as they are unless you’re using the perforated cardstock. If you’re using that, deselect Center and change the top setting to .5. This will make sure that your prinout matches the perforations on the page precisely.
This stuff is addictive, so make sure to print enough to share with others.
Trimming may sound tricky, but it’s not. Stack the pages you’ve printed out so that they line up. You may want to use a binder clip to keep them together, but you can skip that step if you like.
Line up the ruler with the printed border of the card. Make sure your fingers are out of the way! We don’t want any artistic accidents here. Then use the Xacto knife to draw along the edge of the ruler. You may have to draw the knife across the line several times in order to cut, but don’t push down too hard on the knife. It’s better to use the Xacto knife several times rather than try to cut through a stack at once. Do this for each edge. If the blade gets dull, change it.
I’m totally uncoordinated, and I can do this just fine. As long as you don’t rush, I’m sure you can master this technique quickly. As I was telling my son, back in the old days before computers, everything was pasted up by hand which meant a lot of measuring, trimming, and pasting, which now makes us very grateful for how easy it is to draw a straight line in Photoshop without needing to use rulers, inks, pens, white gouache paint and razor blades (for mistakes).
There’s also something very satisfying about being able to do something tangible by hand, stacking the cards and straightening a nice pile of your handiwork. It’s a feeling you just don’t get with a pile of pixels at the end of the day.
This page offers a flexible, visual method to teach beginners the basics of HTML. You’ll need:
basic HTML knowledge
the PDF template (see below) and color printer
magnetic sheets to print on (alternatives listed below)
a whiteboard, large window, or blackboard to write on
When deciding to teach my youngest son how to write a web page from scratch, I thought about what might be the best way to approach it.
I first helped him memorize the order of the very basic web page tags. These are barked out in a military type fashion in order to keep things moving along. Marching is optional
HTML!
HEAD!
TITLE!
CLOSE TITLE!
CLOSE HEAD!
BODY!
CLOSE BODY!
CLOSE HTML!
To reinforce the order of these basic tags, I created some HTML magnets to use on a large white board we have at home. That reinforces the memorization and grouping of these tags, and introduces the idea of opening and closing tags, and nesting elements (the title tag goes within the head portion of the document). The BODY tag is larger than the others, because, since I’m teaching him how to design web pages, I wanted to demonstrate that that’s where most of the layout tags will go.
The structure of a web page, for someone who hasn’t any type of coding experience, often doesn’t make a lot of sense. Placing the magnets on a white board makes it much easier to demonstrate the structure, move tags around, etc. I’ve made some tags in two parts (three, if they have a closing tag) to allow things like adding a URL to an A HREF tag, or adding a class name to a tag. I also color coded the tags so that I could color code and match the css attributes when we started discussing style sheets.
I gave each tag a distinct color and shape. The first five tags are orange ovals. Links are gray rectangles, etc. I’m a very visual person, so having cues like color and shape to group and distinguish tags helps me a great deal. I was actually inspired to do this by a description of synesthesia, and how, a writer who had synesthesia experienced every letter on a page as a different color.
Printing the Magnet Templates
I’ve created two different PDF files with some basic HTML tags. You can buy magnets that you print on from an office supply store. The sheets are thin and easy to cut with regular scissors.
If you can’t print out the magnet paper with your printer, you could print the PDF file out on paper. You could then glue magnets to the back of it. You can buy inexpensive business card sized magnets for this purpose. If you have existing magnets, you can recycle them and use them in this project.
If you want to go the least expensive route, you could use a repositionable glue stick on a paper printout. This would turn your paper into post-it notes that you could use on any large surface and wouldn’t require a magnetic background. You could use a large window, or the side of a refridgerator, or a blackboard. (I would test any questionable surface to make sure the glue doesn’t leaves a mark behind).
Downloading the Magnet Templates
There are two sheets of magnets. If you use these, please give a link back to http://www.mccannas.com. Do not redistribute these files, but please point people to this web site instead.
Download the first HTML magnets PDF Template. This template includes magnets for all the main HTML document tags, headings, and DIVs. In order to download the file, instead of letting your browser automatically open the PDF, Right-click and select Save Target As or Save Link As).
Should you stay on the Adobe train and upgrade to the next version? It’s a question most of us ask ourselves every 18 months or so. I look at it as part of the price of being a professional. I’ve actually heard this referred to as the “Adobe Tax”.
The points that make this upgrade worthwhile for me are:
Performance improvements on both platforms. Performance improvements for Windows users, and a codebase that’s native OS X for Mac users.
The Quick Select tool, which makes selecting objects or their backgrounds even easier
Smart filters, which allow you to apply a filter as a layer effect, so that you can toggle it on or off or delete it without affecting your original image
A revised print dialog, with everything in one place
Auto align layers, for creating panoramic images automagically
No more ImageReady! Wow, have I been wanting to avoid that “Jump to ImageReady” for a long time now. Photoshop now has the animation features that were part of ImageReady
For anyone who is affiliated with teaching or being a student, you should check out the requirements for academic software pricing. Adobe offers a substantial discount on their prices for students and teachers. There’s also special pricing available for nonprofits. I can’t vouch for any of the following stores, but it’s a useful reference point for pricing:
A couple of years ago, I was googling myself (yes, I’m that Laurie McCanna). This is also known as ego surfing.
What I found spins a new twist on the dangers of the web.
I found out I was dead. Had been, since 1999, according to MyFonts.com:
When I emailed them, they emailed back:
“I can only guess that the person that entered the
information put in 1999 instead of ‘9999′ which is our code for alive.”
Just think of that - you’re only one digit away from being dead at any time!
The site is now fixed, and I’m (still) alive. Now I have another thing in common with Mark Twain: “The reports of my death have been greatly exaggerated.”
Be careful when you google yourself, Skippy. You might find out some pretty surprising things.
People will just go and use it to design packages for the dardest things.
Here’s the backstory. Years ago, I designed a font named Scat. It was licensed via Nimx Foundry (and I only received one year’s worth of royalties as the foundry and founder of the foundry disappeared, but that’s a whole nother story).
If you’re interested in creating a typeface or learning more about it, hop on over to my designing type pages.
As I posted earlier, Adobe has decided to revamp their entire icon suite for their CS3 release. You, too, can create your own Adobe style icon in just a few steps:
Open a new file, in RGB mode, 64×64 pixels in size. Set the foreground color to #2A6EC1 , and the background color to #113871. Use the Radial Gradient tool and drag the tool as shown in the illustration below to create the same gradient background.
Using the Type tool, select Myriad Pro as the typeface, and select SemiBold as the weight. Use 36 points, and select Smooth for the antialiasing.
Select File > Save for Web and Devices. You’ve created your own CS3 style icon!
From a usability point of view, they’re terrible for colorblind users and not very legible at 16×16 pixels, the most common size for icon viewing, at least on Windows. And I wonder about localization: do these make any sense at all for non-english speaking users? Adobe has quite a challenge in rebranding their Macromedia aquisitions in a consistent way with the Adobe stable of products. What will happen to Freehand? Will GoLive GoAway?
And my opinion? Nobody asked, but I was sure they were placeholders for the Real Thing the first time I saw one of these icons.
And this is the Photoshop CS3 icon at 16×16 pixels.
Adobe’s CEO announced that within 6 months they’ll be putting an advertising-supported version of Photoshop online. Apparently Adobe wants to compete in the Google space with some of its applications.
No word on which version of Photoshop or what features it may have disabled. I’m betting that in order to keep paying users happy, the online version will have a limited, though usable, set of features. I’m wondering if perhaps Photoshop LE isn’t selling as well as Adobe would like, and this would be a way for Adobe to make money off that product.
Photoshop LE is aimed at home and small business users, and although it shares the same interface as Photoshop, it doesn’t offer the full set of Photoshop tools.
I’m going to reveal a little known secret. Adobe offers a magazine in PDF format, titled Proxy, that covers all of their products, and it’s free. How cool is that?
The sepia toned warmth of an old photo is easy to accomplish. In this tutorial, I’ll walk you through how to antique a contemporary photograph in just a few easy steps. The photo I’ve started with is an image towards the bay from downtown San Francisco, but you can of course, start with any image.
The next part is the easiest. Transform your color photo into a sepia image by selecting Image > Adjustments > Hue/Saturation. You can also use the keyboard shortcuts of Ctrl+U on Windows, or Command+U on the Mac. Click the colorize checkbox, and adjust the Hue slider until you find the effect you’re looking for.
The Levels adjustment window allows you to set the overall lightness and darkness of an image. In this example, I’ve lightened up the entire image by sliding the white Input Level triangle to the left to 114. I’ve also adjusted the black Output Level, which is located below the input level graph. IÂ moved the black triangle to the right to 194. You can see that this has lightened the overall effect a great deal.
You’ll want to select the settings shown above: a soft brush, the Range set to Highlights, and an exposure under 30%. Now you can loosely scribble on the edges to darken them and create the effect of old, worn paper. Experiment by changing the exposure amount and the brush size.When you’re done scribbling, you should have something like the example shown here.
The font I’ve used in the example is called Blackadder and is available from ITC. You may want to 
I’m a huge fan of the little 3×5 index card. You may be familiar with using these to organize your life, popularized by the 
Adobe has made an extreme minimalist (or just plain lazy) decision with their 
