Reflected Phones

Table of Contents

• Rule #1 – Make sure you have the correct image reflected.
• Rule #2 – Angled sides get their own reflections.
• Rule #3 – Separate items get their own reflections.
• Rule #4 – Items pointing toward you have smaller reflections than you think.
• Rule #5 – Cars don’t float. And they have underneathy-bits.
• Rule #6 – Round and cylindrical objects need special handling.
• Bonus Guide: Make It Look More Like a Wet Table Than a Mirror
• More Reflection Catastrophes

Rule #1 – Make sure you have the correct image reflected.

Photoshop Reflection Bloopers
The following images were created without a strict eye for detail.

Upon reflection, it's only 4GB.

Mary J. Blige, Macy Gray: who's gonna notice?

You just spun it around, didn't you?

Reflection Reality
In this photo we can see how a reflection appears when we look at a flat object face-on:

Flat-surfaced item, face on.

Notice the yellow lines I drew on the right-hand copy. The R is both upside down and backward. There is an element of perspective here too.

Reflection Realism in Photoshop
Here’s how to get a much more realistic reflection for a simple, flat item that is not turned at an angle:

1. Start with a layer that has just your image, separate from the background.
2. Press Ctrl+J (Mac: Cmd+J) to duplicate the layer.

Duplicate the layer

3. Press Ctrl+T (Mac: Cmd+T) to enter the Transform command.

Transform command

4. Click and drag down on the top-center square (handle) of the Transform box. Drag it all the way past the bottom edge of your object, so that it is flipped and not quite as tall as the original object.

Drag the top handle down

5. Press Enter/Return to complete the transformation.
6. Click on the Add Layer Mask icon at the bottom of the Layers panel.

Add Layer Mask icon

7. Select the Gradient tool from the Tools panel.

Gradient tool

8. Up in the Control panel, click on the Click to open Gradient picker icon.
9. Select the Black,White gradient (3rd from the left on the top row).

Gradient Picker

10. Select the Linear Gradient in the Control panel.

Linear Gradient

11. Make sure that the layer mask is still selected in the Layers panel. It should have a broken rectangle framing it.

Layer mask selected

12. Click and drag a gradient from the center of the reflection up to where the two box images meet. Hold the Shift key down to keep the gradient straight. Don’t let go of the Shift key until you let go of the mouse button.

Drag a gradient up

Gradient on layer mask

White background

Extra Credit
To make this image more realistic, add perspective.

1. Select the top (reflection) layer and press Ctrl+E (Cmd+E) to merge it down to the original image layer.
2. Edit > Transform > Perspective.
3. Click and drag the bottom-left handle to the right a bit.

Drag the bottom-left handle to the right

4. Press Enter/Return to save the transformation.

Finally, I added a thin black shadow line with the Line tool. I also put a chic white-to-gray gradient on the background layer.

Reflection in perspective

Next: Rule #2 – Angled sides get their own reflections.

Orange Cream Text

Create the Basic Text

1. Create a new RGB document which is 1000 pixels by 500 pixels and 72 pixels/inch (white background).
2. Select the Horizontal Type Tool in the Tools panel

Horizontal Type Tool

3. Up in the Control panel, set these text styles:
   1. Select a font which is straight up and down, and has thick strokes and a pointy serifs (serifs are those little bits that jut out from the tops and bottoms of letter strokes.) I chose Lady Copra Narrow.
   2. Change the font size in the Control panel to something large like 200pt. Just delete the current size with and type in “200″.
   3. Click on the Center text icon.
   4. Click on the Set the Text Color color swatch to open the Color Picker.

Type Control panel

4. Select a bright orange color. I chose R: 255, G: 165, B: 0. Click OK to save the text color.

Bright orange text color

5. Click in the center of the upper half of the image window with the Type tool.
6. Type the words “Orange Cream”. Make sure to use capital letters at the beginning of each word, and lower case for the rest.

Orange Cream text

7. Click the Commit any current edits check mark icon in the Control panel.

Commit any current edits

8. Open the Character panel (Windows > Character).
9. Click on the Small Caps icon. This makes all your letters upper case but keeps the first letter of each word a little larger.

Small Caps

Add Some Dimension

1. Ctrl+J (Mac: Cmd+J) to duplicate the text layer.
2. With the Type tool still active, change the text color for this duplicated layer to white (use the color swatch in the Control panel again; R: 255, G: 255, B: 255).

Change duplicated text color to white

3. Press V to select the Move tool.
4. Use your arrow keys to move the white text down and to the right slightly. I pressed the down arrow twice and the right arrow twice.

Move white text down and to the right

5. View the Layers panel (Window > Layers if it is not visible).
6. Click on the top-most “Orange Cream” layer and drag it underneath the second “Orange Cream” layer. Your white text will seem to disappear in the image window.

Move top Orange Cream copy layer down

7. With the now-bottom “Orange Cream” layer still selected, press Ctrl+J (Mac: Cmd+J) again.
8. Select the Type tool and change the text color for this duplicated layer to a brownish-orange (from the Control panel again). I chose R: 180, G: 11, B: 20.

Change text to brownish-orange

9. Again press V to select the Move tool, and use the arrow keys to move this brownish text down and to the right. I pressed the down arrow twice and the right arrow twice.
10. In the Layers panel, drag this layer below the other two “Orange Cream” layers.

Move the brownish text over

Next: Add Some Yellow Zest

Color Mixture

The Mixing Technique

1. Create a new Photoshop document.
2. Use the Rectangular Marquee tool to select the left half of the image window.

Select the left half

3. Pick a foreground color. I chose pure red (R:255, G:0, B:0).
4. Pick a background color. I chose pure blue (R:0, G:0, B:255).

Red and blue

5. Press Alt+Backspace (Mac: Opt+Backspace) to fill the selection with your foreground color.

Left half filled with red

6. Select > Inverse to invert the selection.
7. Press Ctrl+Backspace (Mac: Cmd+Backspace) to fill the selection with your background color.

Right half filled with blue

8. Use the Rectangular Marquee tool to make a selection through the middle somewhere so that it includes both colors. Mine is covering approximately the center one-third.

Rectangular selection in the center

9. Filter > Gaussian Blur. Set the Radius all the way up to 250.0 pixels and click OK.

Gaussian Blur

9. Press Ctrl+D (Mac: Cmd+D) to deselect. What you will have in the middle is a nice blend mixing the two colors.

In my case, right in the middle is a rich purple (R: 129, G: 0, B: 126). This is close to the result we would get with paint.

Mixture of pure red and pure blue

Rich purple

Note: A similar blending effect can be made using a Foreground-to-Background gradient. However, the result of the gradient contains more of the source colors, and less of the mixed colors, than when we use the mixing method above.

Mixing method versus gradient method

Next: Color Mixing Experiments

Fancy div arranging

If you’re new to designing with CSS layout, it’s simple to get started with these six positioning properties:

1. z-index
2. position
3. float
4. clear
5. top
6. left

There are more positioning properties, but we’ll begin with these most practical ones.

To begin, here are two divs with very simple CSS rules. None of the special positioning properties have been applied yet (click on this image or any image below to view the live page.) We’ll call these the “simple” divs.

CSS divs with no special positioning

We’re using simple HTML too:

<body>
<div id=”box1″>
[text]
</div>
<div id=”box2″>
[text]
</div>
</body>

1. Z-Index

The z-index CSS property identifies how “close” or “far away” a CSS layer is from the viewer. In other words, width goes in one dimension horizontally, height adds a second dimension vertically, and z-index adds a third dimension on an axis perpendicular to the screen. This is useful when divs overlap. The lower the z-index (e.g. z-index: 1;), the further back a div is. The higher it is (e.g. z-index: 99;), the more forward it is. This technique requires that you set the position to relative (we’ll look at position in greater detail later.)

Below, I’ve adjusted the margins of the second div so that the two boxes overlap. The purple box has a z-index of 1, putting it behind the orange box which has a higher z-index of 2. Both have a position of relative.

Overlapping divs with different z-index values

Here’s what happens if we switch the z-index values of the two boxes: the purple box moves to the front.

Switch the z-index values

2. Position

The position CSS property can be either set to static, relative, absolute, fixed. The default position is static.

• Static divs get plunked down right where they are in the flow of the HTML.
• Relative divs are like static divs but can be moved relative to the previous content.
• Absolute divs get pulled out of the HTML flow and act independently of all other divs.
• Fixed divs work like absolute divs with a twist: they stay in the same place in the browser window even when you scroll down.

We’ve looked at an application of the relative position above. Let’s go back to our simple divs and add absolute positions instead. Both divs are now positioned relative to top-left of the browser window instead of relative to each other.

Absolute positioning

A div with a fixed position stays in one place as you scroll.

Fixed positioning

Next: 3. Float

Vintage Colortone Effect

Here’s an original vintage postcard:

Original Vintage Postcard - Colorado National Monument (click to enlarge)

Detail of Linen Texture and Color

Here’s our final image made to mimic the Colortone look:

Final Colortone-style image

A Little History

The vintage postcard above of Colorado National Monument was printed by Curt Teich & Co. (Chicago). They used a color printing technique they called “C.T. Art-Colortone”. Until it closed in 1978, The Teich Company was the world’s largest printer of view and advertising postcards.

Vintage linen postcards have become prized by some collectors, and there’s even a book about them (see the link at the end of the tutorial.) The linen postcards usually portrayed landmarks, landscapes, and roadside attractions from photographs, but some were more illustrative. They were printed on a lithography press using color separation.

Beginning in the late 1940s, linen postcards fell out of fashion when polychrome printing was invented. However, Curt Teich still used the C.T. Art-Colortone technique on these smooth-surface “French Fold” postcards from 1951, below.

'French Fold' Postcard Set for Southwestern Oklahoma - 1951

Source Image

You may use my photograph below for this tutorial. If you want to use one of your own, try to find an image with a variety of color. Click on the image below to download the full-size photograph (309KB).

Giraffes at the San Francisco Zoo, © Dawn Pedersen

Step One: Make it Vivid

The Art-Colortone postcards have very strong colors but minimal detail. We’re going to increase the contrast and color saturation with a simple technique.

1. Open the picture in Photoshop and press Ctrl+J (Mac: Cmd+J) to copy the image to a new layer.
2. Double-click on the words “Layer 1″ in the Layers panel, and rename the layer as “Vivid”. Click OK (Go to Window > Layers if the Layers panel is not visible).
3. Change the Blend Mode for the Vivid layer to Overlay.

Set Duplicate layer to Overlay

4. With the Vivid layer selected, click on the “Create new fill or adjustment layer” icon at the bottom of the Layers panel. Select Levels.

Add a Level adjustment layer

5. In the Adjustments panel, move the center gray slider (gamma input) to the left ever so slightly. I set mine to 1.20.

Move gamma slider to the left

Step Two: Simplify It

With cheap inks comes a lack of detail. We need to blur some of the colors while keeping some black edge details. This will result in a slightly watercolor effect.

1. Make a copy of all the layers merged together: select the Levels adjustment layer at the top of the stack in the Layers panel, then press Shift+Ctrl+Alt+E (Mac: Shift+Cmd+Opt+E).
2. Rename this new layer as Merged.

Copy of merged layers at top of stack

3. Right-click on the Merged layer and select Convert to Smart Object. We want to run a filter next without destroying pixels.
4. Filter > Blur > Gaussian Blur. Set the radius to 1.0 and click OK.

Gaussian Blur

5. With the Merged layer still selected, click on the “Create new fill or adjustment layer” icon again and select Threshold.
6. Set the blend mode for the new adjustment layer to Multiply.

Threshold adjustment layer set to Multiply

7. In the Adjustments panel, move the slider to the until there is only a small amount of black in the grassy areas. I set my slider to 71.

Adjust the Threshold slider

Next: Step Three: Edge Details

Menu Preview

For this tutorial, we’ll be making a horizontal navigation bar for a zoo. It will have dropdowns and a couple of items will have flyouts to the right. We’ll simplify it the navigation by pretending our zoo has only four animals. I guess we can’t expect too many paid admissions. Luckily, after you’ve completed this tutorial you should be able to adapt this technique for any site.

Preview our menu here.

Step One: Plan Your Nav

Kookaburra

It will help to create an outline of how we want our navigation organized. This can be done on the computer, but I often find myself sketching things up on Post-It notes or sheets of scratch paper. Here’s my sketch:

Sketch of Navigation Organization

An alternate outline would look like this:

• Home
• Visit Us
  • Hours & Pricing
  • Maps
  • Calendar
• Animals
  • Birds
    • Kookaburra
    • Hammerkop
  • Beasts
    • Wolverine
    • Wombat

Both of these outlines together will help us visualize how our navigation will be built. Let’s go!

Step Two: Build the HTML

Our navigation bar has two components: the HTML on the web page, and the CSS styling which will be in an external CSS style sheet that can control every page on our site. We’ll start with the basic content in HTML without any styling. Take a look at that second outline above. We need to recreate that in Dreamweaver. Remember to save your file frequently!

1. Create a new HTML page in Dreamweaver (File > New). Then select Blank Page and HTML. Choose (none) for the layout, and set XHTML 1.0 Transitional as the Doctype. Click Create.

Create a new HTML page

2. Save the file as menu.html (File > Save As). Click on the Design button in the Document Toolbar.

Save As and Design button

3. Navigation is really just a type of list, so we’ll make our menu a list. In the Property Inspector, click on the Unordered List icon. If you cannot see the Property Inspector, go to Window > Properties.

Unordered List icon

4. Type out your first level navigation: Home, Visit Us and Animals. Press Enter (Mac: Return) after each item. Don’t worry that we appear to be going down rather than across. We will finesse that in the CSS.

First Level Navigation

5. Click with your cursor just after the s in Visit Us. Press Enter/Return and then press Tab. The list should indent and the bullet type should change. This will be for our second-level navigation.

Second-level navigation

6. Type in Hours & Pricing and press Enter/Return. Type in Maps and press Enter/Return. Type in Calendar.

Subnavigation for Visit Us

7. Click after the empty bullet at the bottom of the list and press Tab. Type in Birds and press Enter/Return. Type in Beasts.

Subnavigation for Animals

8. Time for our third-level items. Click after the s in Birds. Press Enter/Return and type Kookaburra. Press Enter/Return and type Hammerkop.

Subnavigation for Birds

9. Repeat for beasts: type in Wolverine and Wombat.

Subnavigation for Beasts

10. Finally, we need to set up each item as a link. We don’t have pages to actually link to yet, so we’ll put in a pound sign (#) which is a sort of link placeholder. Select the word Home. In the Property Inspector, type # in the Link box and press Tab.

Add a link placeholder

11. Do the same for all the other navigational items.

Add link placeholders

All of our basic HTML scripting is done. Now we need to tell Dreamweaver what CSS classes and IDs to use in the HTML. And we need to set up all of our style rules in an external CSS file.

Next: Step Three: Start Building the CSS

Color Wheel

1. Create a new file that is the same height and width. I went with 450px by 450px.
2. We need to place some guidelines halfway across and down in order to find the center of our document. Make the rulers visible by pressing Ctrl+R.
3. Click+drag a guide from the horizontal ruler down to the half-way mark. It should snap into place (in my case, at the 225px mark.) Do the same from the vertical ruler to place a vertical guide.

Place guides halfway across and down

4. Select the Elliptical Marquee tool from the Tools panel. We’re going to make a circle for the color wheel to fill.
5. Draw a circle in the image window. Give it a bit of space around it so it is not right up to the edges of the image window. Hold down the Shift key to get a perfect circle.

Circle selection

6. Select a Spectrum angle gradient:
   1. Click on the Gradient tool in the Tools panel. It may be hiding under the Paint Bucket tool.
   2. Click on the Angle Gradient icon in the Control panel.
   3. Click on the large gradient swatch to open the Gradient Editor.

Open the Gradient Editor

7. In the Gradient Editor, click on the Spectrum gradient, as shown below (it is one of the default gradients installed with Photoshop). Click OK.

Spectrum gradient

8. Decide where you want the red part of the color wheel to be. Let’s say we want it on the right.
9. Position your Gradient tool at the center of the image window, where the two guides intersect.
10. Click+drag from the center to the edge of the circle. Here we want red on the right, so drag to the right.
11. Hold the Shift key down while you drag to keep your angle at 90 degrees.

Drag the gradient

Gradient filled circle

12. Press Ctrl+H (Mac: Cmd+H) to hide the guides
13. Press Ctrl+D (Mac: Cmd+D) to deselect

That’s it!

Finished color wheel

If you have any questions or feedback, I’d love to hear from you in the comments below.

Get an A+ in Photoshop

• imitate something from real life (e.g. how shadows and light really work, how glass and water bend light).
• guess with reasonable accuracy how a particular effect was created by someone else in Photoshop.
• troubleshoot your own errors as well as someone else’s.
• manipulate pixels non-destructively.
• work efficiently through the proper use of shortcuts, panels, actions, and tools.
• know how and when to use most of the features in Photoshop.

Here are the 10 things I recommend you do if you want to be a Photoshop expert.

#1: Own the latest version of Photoshop

It’s pretty hard to really experiment with Photoshop if you don’t have your own copy at home. Having the latest version is important too. Particularly with the last two versions, CS3 and CS4, new features are added all the time. These features usually either make your job easier (like the Adjustments panel), or give you tools that didn’t even exist in prior versions (like some of CS4′s 3D capabilities).

I do recommend you purchase your own copy. Please don’t used pirated stuff. If you are a teacher or student who is not using Photoshop for commercial purposes, you are allowed by Adobe to purchase the educational version at about half-price. It is as fully-featured as the non-educational version. You can usually buy this version at college book stores, or online at sites such as creationengine.com.

You are allowed to run your Photoshop software on two machines. I have one copy on my desktop PC and one on my laptop for travel.

#2: Play and Make Mistakes

Experimentation and play is the key to learning something beyond the basics. Try out all kinds of tools and filters, and see what they do with different settings. You can’t really ruin Photoshop. And if you do, you can reset all the defaults by closing Photoshop, then pressing and holding the Shift+Ctrl+Alt keys (Mac: Shift+Cmd+Opt) while Photoshop restarts.

Take a bunch of photos from your camera (or online) and throw them together. See how blend modes change an overall image as layers are moved around. Try all of the layer adjustments, and every filter combined with another filter. Don’t worry if it’s ugly. You’re learning. And there’s always the History panel to allow you to back up several steps and try something else.

#3: Take a Class

To be honest, I had an awful Photoshop teacher. He did little beyond schedule what we were supposed to complete in the textbook. I stopped going at one point. I had learned how not to teach, and four years later I was teaching Photoshop. What a good teacher can do is give you assignments you never dreamed you could do (and enjoy!) More importantly, a good instructor can give you personal guidance when you don’t even realize you made a mistake, or there’s a typo in the textbook, or you accidentally skipped something, and something goes wrong.

Finally, a good instructor will give you projects to do that give you real-world scenarios and specifications. This prepares you for making real money with Photoshop. Here are some projects I assigned my Photoshop and Illustrator students this year and last year.

#4: Go to Seminars

Kelby Training provides absolutely fantastic seminars all over the United States. I have had teachers such as the amazing Bert Monroy and Dave Cross. These seminars have increased my creativity and efficiency in Photoshop beyond belief. The day-long seminar is always fun and very inspiring. Go to one of these seminars if you can, or find something comparable in your area.

#5: Read Photoshop Magazines

Photoshop User Magazine from NAPP is the undisputed master when it comes to American Photoshop publications. You can find it for $10 at book stores, or you get an automatic subscription when you become a NAPP member. You will need that NAPP membership to access the tutorial files online. Each issue has a bunch of tutorials at all levels, plus reviews of products and news about the industry. The magazine caters to photographers, designers and hobbyists alike.

Layers Magazine is great too, but does not cater just to Photoshop users. It addresses almost all of the Adobe design products. It only has a couple of Photoshop tutorials per issue. If you work with Illustrator, InDesign, Flash, and Dreamweaver as well, this mag’s for you.

I also like to buy those really expensive ($15) imports from the U.K., such as Advanced Photoshop and Photoshop Creative. These can be found at book stores too. Unlike Photoshop User, they include a CD-Rom with every issue that provides all the resources for the tutorials, plus brushes, textures, and the like. These magazines sound like an awfully big expense at first, but they are so worth it. The tutorials are always very well done, and gorgeous to boot.

#6: Read Photoshop Books

Some Photoshop books out there are not so great, but most of them are really top-drawer. When considering a Photoshop book for purchase, look for three things:

• Are the images really beautiful or interesting? I have a book here I taught from before I really evaluated the images. They are bordering on ugly. Find a book that makes you feel like you can’t wait to create those images.
• Is the book written to your level? It can be really frustrating if the instructions are too easy or too hard for your experience level.
• Does the book match your learning style? Some books use blocks of text and others make each step into a bullet point. Some have more step-by-step images than others. Decide what works best for you and look for books written that way.

I do have three specific book recommendations. Each of the books below contains wonderful tutorials, and is written very well.

#7: Do Online Tutorials

I love doing online tutorials. Some good places to find Photoshop tutorials are PSD Tuts+, Good Tutorials, Pixel2Life, and Tutorialized. I also have some here. If you work with online tutorials enough, you find some favorite writers. Look for tutorials writers who provide enough images, proofread their work, and don’t leave steps out. You should be able to create a result that looks much like the one promised by following exactly what they have written. As with books, look for tutorials written to your skill level. But push yourself to do more challenging stuff than you’re used to.

#8: Be a Community Member

This can take many forms. Sometimes I like to check out online Photoshop forums and see if anybody needs a question answered. I often find cool ideas for myself as well. I also hang out on Twitter, and follow a large number of fellow graphic and Web designers. They are always feeding me new links to incredible online resources. I have RSS feeds I read from my favorite design blogs, and I comment on all of the articles that move me. I read everything by Smashing Magazine and Minervity.

There are design communities in the offline world too, of course. I am a member of the local group called ADAC. When I had more time a few years ago, I was even a board member. Real-world design clubs are a great opportunity to learn all about design in addition to some of the business aspects of freelancing (ADAC once had a great talk from an intellectual property attorney about copyright law for artists.) More importantly, you can come away inspired with fresh ideas by looking at the works of others.

#9: Learn Other Adobe Programs Too

Photoshop rarely works in a vacuum for most designers. There are many times when a Photoshop project is enhanced by the contributions of artwork done in Illustrator, for example.

Learn how to save your work for the press using Acrobat. Learn how to create vector artwork in Illustrator and import the paths into Photoshop. Learn how to place your Photoshop files into InDesign. Learn how various Photoshop plugins can expand your design horizons or make your work easier. These are but a few examples. A thorough understanding of Photoshop must include an understanding of how well it plays with others.

#10: Teach Photoshop

I wasn’t a Photoshop expert when I started teaching Photoshop. I am now, thanks in part to having taught it. Teaching Photoshop helped me develop my expertise in ways that no other experience can. When you have to communicate how to do something to someone else, you come to understand it in a way that sets it in concrete in your brain.

I often get my students to find something new to learn, and then have them turn around and teach it to another student. And when both students make mistakes during this teaching process, they both learn more. Writing tutorials – and finding out if someone can follow them – takes this concept step further.

Do you have any other ideas for building Photoshop expertise? I’d love to hear them in the comments below!

Invitation

Today we’ll look at an invitation for a child’s birthday party.

This invitation was originally designed by my friend in InDesign. Since her background is in photography rather than design, she asked for my feedback. I wanted to help her tighten up the design without losing its playful, colorful personality.

Before

Now, my first impulse when looking at a design that has multiple fonts, multiple colors, and center alignment is to view all three as problems.

However, this is a special design meant to appeal to a child’s heart. Having many colors and fonts gives the invitation a fun, festive feel that is desirable here.

And while center alignment is usually a big no-no when attempting to create connections between elements of a design (left and right alignment are much stronger), this is an invitation. We commonly find center alignment on invitations, particularly those of the wedding flavor.

So we’ll leave those design features alone. Let’s see where there might be some bits to improve.

Before

Refer to the numbered callouts in the image above.

1. Repetition is a good design principle. Here we see the sandals repeated top and bottom. However, they are dissimilar is size and placement.
2. Items such as the address, date and time, contact person, and phone number are all over the place. A child’s parent will be hunting all over this design, trying to find the information so they can get their child to the party on time.
3. This sentence fragment is important, but it’s too long and too passive to really get the point across.
4. The word “does” is incorrect grammar when supporting multiple nouns (“week”, “zoo” and “swimming”).
5. This one is a subtle and common mistake. When you put a dash between two times, it means “from __ to __” Adding the word “from” before it is redundant. This bit should either say “from 11am to 2pm” or simply “11am – 2pm”. There is also a big gap between the two 1s in the number 11.
6. This paragraph has been justified (aligned both left and right). It clashes with the center alignment in the rest of the design. Justification has also caused another problem. When the line width only allows a handful of words like we see here, we end up with giant spaces between words.

After

First, we made the sandals the same size and moved the top sandal image up to overlap the corner border as it did on the bottom. This strengthens the repetition and makes the design more unified.

After, Step 1

Next, we pulled all the time, location, and contact information together into one group. This is the design principal called proximity, which means that things which are similar are next to each other. When we look at an invitation, especially when we are driving to the event, we tend to expect all the pertinent details to be in one place.

After, Step 2

Here we streamlined the safety text so that it is active, unmistakable, and stands as a statement on its own.

After, Step 3

We changed “does” to “do”. Then we removed the word “from”, and tightened the kerning between the 1s in the number 11.

After, Step 4

One small but important detail. My friend told me told me that lunch would be provided, and asked if that would be automatically understood by parents because the party would be at lunchtime. I suggested it would not, so she added that useful information. I sure would want to know that!

After, Step 5

Finally, we center-aligned the middle paragraph. This alignment gave us more natural spacing between words. It also gave the design a bit more white space.

After, Step 6

And here is the final design:

After

Final chicklet

This intermediate tutorial assumes that you already have these skills:

• creating and saving documents
• selecting and using tools
• viewing and using panels (palettes)
• working with gradients
• setting the layer opacity
• creating text

Below is a typical set of old school chicklets.

Old School Chicklets

Now here are some new school chicklets, which can be found at Mashable.

New School Chicklets

I was inspired by Mashable’s chicklets to make my own colorful versions in my BluLob sidebar.

My Chicklets

They take up more room, but boy are they attractive. A few well-placed and well-designed chicklets will have more impact than a giant cluster.

It helps to grab a copy of the original logo for whatever you link to. Let’s make a giant “f” chicklet like Mashable uses for Facebook.

Source File

Here’s a large Facebook logo. Click the image below to get the full-size verison:

Facebook Logo - click for a larger version

Part One: the Logo

We’re going to work with a nice, big image size so it is easy to work with. Later we’ll reduce its size for the Web. Starting with a large file gives us a lot of options when we want to make it smaller. Enlarging a small image = bad. Ensmalling a large image = good.

1. Open the Facebook logo in Photoshop.
2. Use the Rectangular Marquee tool to draw a rectangle around just the letter “f”.

Copy the letter f

3. Press Ctrl+C (Mac: Cmd+C) to copy the pixels to your computer’s clipboard.
4. Start a new document that is 300px by 300px, 72 pixels/inch with a white background. Save the file.
5. Press Ctrl+V (Mac: Cmd+V) to paste the letter f on its own layer above the background. Name this layer “original f”

Paste the letter f

6. Use the Magic Wand tool to select the white pixels of the letter f.
7. Press Ctrl+J (Mac: Cmd+J) to copy the pixels to a new layer at the top. Name this layer “white f”.

Copy the white f to a new layer

8. Turn off visibility of the “original f” layer by clicking on the eye icon on its left edge.
9. Your white f probably has a blue fringe remaining around it. Make sure the “white f” layer is still active, and go to Layer > Matting > Defringe…
10. Enter a width of 1 pixel and click OK.

Defringe

11. Click on the fx symbol at the bottom of the layers panel and select Bevel and Emboss.
12. Use the following settings and click OK:
    • Style: Emboss
    • Technique: Smooth
    • Depth: 50%
    • Size: 2px
    • Direction: Down

Bevel and Emboss

13. We need to make the letter f bigger. Press Ctrl+T (Mac: Cmd: T) to enter the Transform mode.
14. Make the letter about 200 pixels tall (you can use the Info panel to see the H value). Hold the Shift key down while you drag from any corner of the transform box.
15. Leave space all around it, and room at the bottom for the text that will say “Facebook”. Press Enter (Mac: Return) to complete the transformation.

Transform mode

16. The edges look a tad blurry. Go to Filter > Sharpen > Smart Sharpen…
17. Set the Amount 100%, the Radius to 20px, and click OK.

Sharpen

Next: the Chicklet