I just read this morning that the next Event Apart will be in Atlanta. That’s pretty darn close to where I live here in South Carolina. How close? Well I’ve employed the Google Maps API to show you:

I know this won’t be quite the same as making it to SXSW, but it will definitely be a lot more affordable. Hopefully the details will be announced soon.

Photoshop Basics - Issue 2

I’d already started writing my next topic when Justin commented that he wanted a “masking tutorial for dummies”. I’m not sure I know exactly how to approach that, but I do use Photoshop’s layer masking quite often, so I think I’ll take a shot at it.

To start with, a lot of people don’t really even understand the concept of masking. A mask is basically a hole that allows you to see part of an image and hide the rest. The diagram above shows the basic concept - I have an image of Amy and I at a football game and I only want to show an oval shaped portion of that image.

Now for a similarly simple real-life example:

The above is a section of the comp for a website we just finished at work. On each main page of the website, we wanted to swap a different image into the area where the purple heartbeat is. From the comp, I cropped out an area just large enough to show the entire oval.

Next, I used the Ellipse Tool to create a shape that was the same size as the purple one in the comp. Anytime you use one of the vector shape tools (like the ellipse), you’re actually just creating a color layer and a mask. To apply that mask to another image layer, I went to the ellipse in my layers window and clicked the chain icon between the color and the mask for the vector shape. Once that chain is gone, you can drag that vector mask onto another image layer. The benefit of applying a mask versus cropping an image to your desired shape is that even after you’ve applied the mask, you can still move the image around to show different areas.

Play around with this sample psd if you don’t get what I’m saying.

That’s about as simple as I can make masking, but once you understand the basic concept behind them, they have a world of possibilities. I would go into these details, but there are already a ton of advanced masking tutorials out there. I haven’t seen anybody explain yet that Photoshop’s vector tools create their own masks, so I think this tutorial has some merit as an introduction to the topic. For more info though, try out some of these:

• Vered’s Photoshop Masking Page
• Simple exploration of alternative masking techniques.
• Nice, advanced tutorial creating masks from channels.
• A similarly advanced masking tutorial from Adobe.

Ames leaves for a couple of days and all of a sudden our cat thinks she runs the place.

I took this picture of her drinking out of my cup, which she knows she’s not supposed to do, and when she realizes I’m taking pictures she gives me THIS face:

She’s such a brat! To back the story up a bit, we met this little fluffball a few days after we moved in. At first she kept her distance, but eventually she’d let us pet her. In talking to our neighbors across the street, we found out her name was Abby and that they had been taking care of her since the neighbors next door to them had abandoned her. Unfortunately, they already had a cat named Abigail and preferred to call her Sally-Jane (poor cat).

One day a few months ago, the neighbors were going out of town and asked us to put food out for her while they were gone. We decided to let her in the house for the night since it was a little cold. When she decided to wake us up at 5am we decided that would never happen again. Somehow though, we eventually started letting her back in again, and now she pretty much stays at our house full time. She has a litterbox, food, and water and really only goes out for a few hours during the day.

The neighbors were fine with us adopting her (or her adopting us) and just asked that we take her to the vet and make sure she’s up to date on her shots. That’s a small price to pay for a cat with as much personality as Abby. For more Abby, check out Amy’s post from when we first learned her name, or the little collection of Abby photos on Amesnjas.

Well it’s been almost 6 months since I’ve participated in any silly blog memes so I guess I’m due for one. I’ve been “tagged” by Dustin Diaz and since I’m not quite done with my next Photoshop Basics tutorial, I’ll be a good sport about it:

Four jobs I’ve had in my life …that aren’t on my resume.

• Grocery bagger at Publix
• UCF financial aid advisor
• Accountant and loader for a trucking company
• Assistant wrestling coach (well, I volunteer for that)

Four movies I can watch over and over

• Braveheart
• Pirates of the Caribbean
• Good Will Hunting
• Space Balls

Four places I have lived …or, “The ONLY four places I have ever lived.”

• Vero Beach, FL
• Orlando, FL
• Gainesville, FL
• Columbia, SC

Four TV shows I love to watch

• The O.C.
• Rezoned
• In a Fix
• I Want That!

Four places I have been on vacation

• Destin, FL
  (By far the best, but not because of the location.)
• Italy
• Key West
• Washington, DC

Four websites I visit daily

• Bloglines
• Gmail
• Google (Personalized Home)
• dotProject
  (It’s what we use at work to log our hours.)

Four of my favorite foods

• “Joey Bag of Donuts” from Moe’s
• Cinnamon Crunch Bagel from Panera
• Iced Caramel Macchiato from Starbucks
• 7-11 Slurpee

Four places I would rather be right now

• With my wife. She just left this morning for a 2-day conference entitled “Engineering the Automotive Future” at The University of Alabama.
• Backpacking in Italy
• Out Geocaching
• At the beach somewhere warm

Four bloggers I am tagging

• Ames
• Marko Dugonjić
• Ray Williams
• Brian Reese

Photoshop Basics - Issue 1

One of the Photoshop sub tasks that I find myself doing on a regular basis is creating and using custom pattern fills. Often times when I’m designing something in Photoshop (for print or web), I have graphic elements that need to be repeated over and over…with per pixel accuracy. I used to do it the hard way. I’d create one item, copy it, paste it. move it where I wanted it, merge it with it’s parent layer, copy that group of 2, paste it, move it, merge that…etc. That method works ok when you’re working with larger repeated element, or if you don’t need to repeat them that many times. But what about teeny things like dots or 1px lines or plaid (I dislike plaid, by the way)? That’s where pattern fills come in handy.

I don’t want to go too in-depth here into making complicated patterns, so for the sake of brevity, we’ll make some horizontal scanlines:

Ignore the drop-shadowed white text and gradient blue background for a moment and notice the teeny black lines in the background. Yea, that’s the scanline pattern we’re making. Scanlines are the simplest pattern imaginable. This particular pattern is 2px tall by 1px wide. The top pixel is black and the one below is white. When repeated vertically and horizontally, it creates the lines you see above.

1. In Photoshop, click “File » New”, fill in 1 pixel for the width and 2 pixels for the height and make sure your resolution is 72. (Note: For webdesign you always want to be working at 72 pixels/inch as this is screen resolution…for further confusion on THAT matter, refer to Art, Lebdev’s Image Resolution section.) Also be sure your color mode is set to RGB Color, 8 bit, and the background contents should be Transparent. Click OK.
2. Zoom () in 1600%, which is as far as you can.
3. Use the Rectangular Marquee () to select the top half of your 2 pixel image and paint it black.
4. Click “Select » All” to select the entire image and then “Edit » Define Pattern…”
5. Give your pattern a name, perhaps “2px horizontal scanlines”.
6. Find a picture or something you want scanlines over, open it in photoshop, create a new layer (Layer » New » Layer) above the image.
7. Click on the Fill () Tool. In the top bar, there should be a dropdown menu that says foreground, select “Pattern”
8. Click on the dropdown to the right of “Pattern” and select your pattern image, which should be on the bottom right.
9. Click on your image and watch the magic scanlines appear. In the example above, I have my text on the top, my scanlines in the middle at 50% opacity and my gradient on the bottom.

Hooray scanlines, indeed. But don’t stop there. You can use patterns for any image asset you wish to repeat a bunch of times. So, there you have it, Photoshop Pattern Fills.

Here’s a zip of my sample PSD file.

Be patient as the video takes a few seconds to load. This whole thing is my entry into Dustin Diaz’s final book give away in his 12 days of Christmas contests. I have to give credit for this performance to O-Zone who originally recorded the song (Dragostea Din Tea) and Gary Brolsma who made it famous. Confused? Try Googling Numa Numa.

Enjoy…

One of my favorite blog posts of all time is Jason Santa Maria’s Grey Box Methodology. Even though he posted this back in May of 2004, the principles he lays out for breaking the process into intermediate steps are timeless. My own personal design process is often similar, except that I usually skip Illustrator. The step of “plotting out” the layout is important, but I find that Photoshop has just enough vector capabilities to do that job for me these days.

With that in mind, you can tell I spend a lot of time in Photoshop. There is rarely a moment during my work day that the Photoshop application icon doesn’t have a little black arrow under it in my dock. Even when I’m coding, or working in Flash, I still keep it open for various reasons. So just what am I doing in this application all day, and why don’t I ever write about it? I suppose it’s because a goal of mine as a designer is to always do things a little differently. As a result, I avoid writing about the technical aspect of design. It’s not that I’m hiding behind some secret curtain like the Wizard of Oz, but rather wondering whether those specific techniques or tips are worth posting. Nevertheless, there are a few tried and tested Photoshop techniques that I’d like to post over the next few months as I find time. Some of them I’ve developed on my own, and some I’ve picked up from books, classes, and tutorials. I’m not sure exactly what techniques I’m going to post yet, but it should be interesting.