Tag: Photoshop

Heather’s picture

Heather's picture

My friend-coworker-boss Heather recently had close family member pass away. I drew a picture for her. I sketched it out in my Field Notes memo book, scanned it, then traced and colored it in Illustrator. Then I imported it into Photoshop to add the texture.

Advertisements

Photographing a picture frame

We’re taking a brief break from my mommy-blogging to take a look at some Photoshop finagling that I did this morning.

I just completed a Custom Shadow Box project and wanted to get a photo of the box that was relatively presentable to email to the client (and perhaps use it in a future update to my gallery).

The big challenge for me was getting a good photo of the shadow box without catching my reflection of me taking the photo. First, I tried leaning the shadow box back against a fabric background, angled against the ceiling. My initial thought was that since the ceiling was white and lacked objects on it, that there wouldn’t be weird object reflections. Unfortunately, what I really ended up with was a white sheen over the glass which wouldn’t go away despite many attempts in Photoshop.

While Photoshop can do wonders, it unfortunately can’t compensate for some “bad photography.” Back to the drawing board… er… camera.

So what I really needed was a black background that wouldn’t reflect light back onto the glass. Unfortunately, large swathes of black fabric are a scarce item at our place. Next best – a black sweatshirt, which I forced Steve to hold at awkward angles to try to get the right coverage. The sweatshirt wasn’t quite big enough, so I took two pictures with him holding the sweatshirt at different heights while I tried to keep the camera still (too lazy to set up a tripod):

You can see Steve’s fingers, over the edge of the sweatshirt, in the right top corner reflection of this photo below:

I did some Photoshop magic to overlap the two pictures. Laying one photo directly over the other in two separate layers, I set the top layer to “Difference” mode, then moved the layers until the whole thing was almost black. For each pixel in a photo, difference mode takes the RGB value of one layer and subtracts it from the second layer – so if the pixels are the same, you end with R:0 G:0 B:0,” aka black.

After lining up the layers, I added a layer mask to the top layer and painted out the reflections.

The next step was using Photoshop’s Lens Distortion filter to straighten out the photo. Given the angle of the original photos, above, I was pretty impressed that Photoshop could twist my shadow box so that it looked like I’d taken the photo almost head-on. It’s not perfect, of course, but you’d probably never know at first-glance!

A few Levels and Hue/Saturation adjustment layers added to lighten things up and make the flowers more true to their actual colors (my camera tends to oversaturate reds), a few passes at sharpening the photo using the unsharp mask filter, and I ended up with a fairly presentable photo of the shadow box:

Parody Poster: Grey’s Anatomy

This was one of the easier posters to recreate. Here’s what the original poster looks like:

Grey’s Anatomy - original poster

I started out looking for a similar font, settling on Haettenschweiler. Some of the letters were slightly different and the apostrophe was very different, but it was close enough for me! I created two separate text layers for each word and then added a red rectangle for the accent.

Finding a similar font

Next, working on the original poster jpeg in Photoshop, I used the pen tool to map out similar rectangular shapes. Each rectangular shape in the original poster isn’t necessarily a distinct photo, however; some shapes combine to hold a larger image, as demonstrated here:

Combined shapes

So, here’s what I did:

1. Used Pen Tool and clicked four points to create a rectangular Vector Shape layer.

Creating first rectangle

2. Clicked on the vector mask to select it in the Layers palette, then clicked the “Add to Shape Area” icon in the options bar. (I thought “Auto add/delete” had to be checked when I made my diagram, but as it turns out, that has more to do with using the pen tool to remove or add points to an existing path, so you can ignore that part!)

Changing option to add to shape

3. Used the Pen Tool to draw the second rectangle shape. The new shape, instead of appearing on its own shape layer, is added on to the existing shape layer.

Second shape added to same layer

4. Clicked on “Create new shape layer” icon in the options bar, then created other rectangles.

Choosing create new shape layer icon

Eventually, I ended up with a bunch of shapes that were close to the original. These shapes were all over the original poster, though, which was a low resolution jpeg and about 1/8 of the size of my finished document. So, selecting all the layers, I dragged them from the Layers palette and dropped them on top of the new document to copy them over.

Selecting all layers

Then I used the Transform command (Ctrl-T) to resize all the layers at once to make them big enough for the new document.

Shapes in new poster document

Now it was a simple matter to paste in different photos. I used the shape layers as clipping masks for the photos:

1. Paste in a photo and move the layer in the Layers Palette so it is immediately above the shape that you want to use as a clipping mask:

Paste photo

2. Place the cursor in between the two layers. Hold down the Alt (PC)/Option (Mac) key and you’ll see the cursor change. Click in between the two layers, and you’ll see the top layer indent with a small arrow added. The top layer has just been “clipped” by the bottom layer. You can move the top layer around, but only the areas that overlap with the bottom layer will show up.
Creating clipping mask

Repeating this with the other photos, I also added some adjustment layers (Curves, Levels, etc.) to adjust the photo contrast and clipped them to the appropriate shape layers as well.

And here’s what the final poster looks like:

Final parody poster

See other articles in the Parody Posters series.

Parody Poster: Heroes

Here’s the first of a new series of posts describing how I created various TV show parody posters using Photoshop.

First, here’s the original reference desktop graphic that I used as inspiration:

Heroes poster

The first step was to come up with a font that was similar. In Photoshop, I typed “HEROES” and changed the font several times to find a close sans-serif font. I wanted to be close, but I didn’t care about being exact because of the short deadline I was working with. I finally settled on Futura; the “S” is slightly different but the shape of the “R” was the closest of the fonts I had on my system:

Trying to match Heroes font

Next, I worked on the eclipse graphic. First, I created a black vector circle shape and applied a slight outer glow effect to it. (My examples are on a blue background so you can better see the effects.)

Eclipse - vector circle.

I added a new layer and, using the brush tool with a soft edge, painted a white fuzzy blob behind the vector shape. The strongest part of the lighting effect is at 1-2 o’clock, with another stronger edge at 7-8 o’clock. In the diagram below, I’ve lowered the opacity of the black circle layer so you can see the relative shape of the white blob layer.

Brush layer

I used the smudge tool with a soft brush shape to drag out “rays” in the white blob layer:

Smudging the white layer

With the smudging, the effect was a little too big for me, so I transformed the layer and shrunk it slightly.

Slightly smaller effect

Next, I created a new layer over the black vector shape and made a small fuzzy white blob. Using the smudge tool again with a slightly smaller brush size, I dragged out from the center of the shape to make the sharper highlight points.
Highlight layer

A little more tweaking to the various smudge layers, and here’s what I ended up with:

Final text effect

Now for the blur to the words. I duplicated the text layer, right-clicked on the layer in the Layers palette and chose “Rasterize Type.” I applied a motion blur filter (set to vertical). Then I lowered the opacity slightly (60%) of the blurred layer:

Text effect with blur

Now for the photo collage. I had two istockphoto images and a photo of youth staff and volunteers taken by someone else:

istockphoto - corporate office

istockphoto - dramatic clouds

Original photo

I started by creating a document that had a very faint background gradient – pure black at the top, #08090b at the bottom, and moved in my recreated Heroes logo:

Starter document

I pasted in the people photo and used the dodge tool to slightly darken the bottom edge of the photo:

Adding people

I applied a Levels adjustment layer to get the background to be blacker and to increase the contrast slightly.

Levels adjustment layer

I added a Channel Mixer adjustment layer to give the picture a sepia tone:

Channel mixer layer

The original had a bit more tonality in it as opposed to being a flat sepia image. So under the Channel Mixer layer, I added a Curves adjustment layer and played with the different channels until I got something that worked better for me.

Curves adjustment layer

After curves adjustment

I pasted in the two stock photos under all the adjustment layers, flipping the office building and lowering the opacity of both layers to 38%. Then I added layer masks and used a soft brush to mask out the edges of the photos and blend them over the people photo.

With stock photos

The last step was to add in the little “FBC Studios” logo in the corner, and my poster was complete:

Final Heroes parody poster

See other articles in the Parody Posters series.

New Year’s Eve and Parody Posters

After my unplanned blogging break over the holidays, I have somewhat-dated post ideas coming out of my ears. So I’ll start with something a little more recent — What I Did For New Year’s Eve.

My church has a New Year’s Eve party for junior-high and high-schoolers involving fun activities all over the church campus (dodgeball tournament, video games, inflatable sumo wrestling suits, arts/crafts, etc.) and culminating in a lip-sync contest performed by different groups of students and staff/volunteers. Steve and I have volunteered the past four years, including this past weekend, along with 40-50 other adult volunteers, by helping to supervise the different activities, serve food, and clean up. The past couple years, we’ve also helped before the event with the decor.

This year, the theme for the main room was “The Price is Right.” Local businesses donate lots of different door prizes which are raffled off, but this year we made use of the game show format to allow kids to win prizes as well. In the three days leading up to the New Year, a few of us got together and put together a low-budget but fantastic-looking set for the main room, including a functional big Plinko board.

Photo of set - front stage

We pretended that the main room would be like a live taping of The Price is Right, so set up the foyer to be the entrance to “NBC FBC Studios.” I designed a mashup logo of our church logo and the NBC logo and helped to make a sign that hung outside the door.

FBC Studios sign

The foyer featured parody posters of TV shows created by yours truly. I did some poster and font research on Saturday and put together some high-res “base” posters, sans photos. Another volunteer took photos of the pastors, staff, and some youth worker volunteers on Sunday afternoon. I then had a few hours to stitch together the photos and posters and make it all look relatively decent so that we could get them printed for the next day.

Foyer with parody posters

I think I’ll do a series of posts describing some of the specific Photoshop steps I took to make the posters, so for now, I’ll just show you the end result compared to the original TV show poster:

Ugly Betty poster Ugly Shelly poster

Grey’s Anatomy poster Joe's Anatomy poster

Lost poster Lost? poster

Scrubs poster Scrubs poster

Heroes poster Heroes poster

The Office poster The Office parody poster

You can view more photos of the setup and first part of the event (before my camera battery died) on flickr.

Before the parody poster series commences, expect to see posts ranging from a food reference sheet to homemade Christmas presents in the next few days!

Photoshop article at SitePoint

I’ve been MIA through the holidays so expect a ridiculously long book post when I get back into things next week. In the meantime, an article I submitted to SitePoint has just been published (part 1 of 2)! Creating Web 2.0 Effects with Photoshop, Part 1, covers basic gradients, striped backgrounds, transparent layers, and glassy buttons, targeted for beginners with step-by-step diagrams and instructions. Don’t waste your time if you already know about all that stuff, but please visit if you want to learn more!

Exercise in Photo Editing

I thought some people might be interested in seeing some examples of photo editing. As I mainly work in web design, I have an easier time with photo editing because web images are relatively low resolution and don’t require as much painstaking attention to detail.

Below are two photos of a condo development and some comments about the process.

Here is the original photo. I was asked to remove the tree on the right side, and, of course, straighten the photo.

Original photo

I used the Crop tool in Photoshop to crop the photo, rotating the cropped area to straighten the building. I also used the Levels command to lighten the picture slightly.

Straightened and cropped

I created a new layer and then worked on cloning the sky to cover up the tree (the cloned areas are tinted green). The clone tool has an option where you can “select all layers” — this allows you to clone from below layers onto a new layer. By cloning onto a new layer, you don’t “mess up” the original photo and can make edits more easily later. This is one example of nondestructive editing!

I then used the marquee tool to select a part of the building (the next “section” over) that didn’t have a tree over it and pasted it into a new layer (tinted purple). I created a layer mask for that layer and carefully blended out the edges.

Edited photo

Here is a closeup of the photo with tree:

Closeup

And a closeup of the edited sky is below. The landscape is a bit blurred together, but when shrunk down to web resolution, it doesn’t really matter.

Closeup edited

And a closeup of the edited building as well:

Closeup edited

Now, the final picture at approximately the final dimensions:

Final photo

The next photo was a bit more challenging. Here’s the original:

Original photo

Unfortunately, the marina buildings (with the red frame and yellow stairs) were blocking the specific units that needed to be shown in the image. I was asked to do some “Photoshop magic” to show those units as well as get rid of the light posts — the one on the left of the building, and the one sticking up right in the middle.

I worked a little differently on this photo. Instead of working first with a high resolution photo, I worked directly with the smaller web-resolution photo size. I wouldn’t recommend this, but I was basically short on time and needed to work faster! (So, no close-ups for this picture.)

Cropped photo

First, I copied the middle two floors on the left side and pasted them onto a new layer (purple). Moving these down “one floor,” I was able to get the bottom unit to show up. I used a layer mask to fade out the edges, then used the Warp Transform command to add the tiny bit of perspective needed for the bottom floor to look “right.”

Creating a new blank layer, I used the clone tool to remove the light posts. You can see the edited results in the pink-tinted layer.

Unfortunately I had no idea what the bottom part of the building looked like just below the windows and balconies. I copied the middle bottom section (where the formerly edited light post used to be) with the bottom wall and balcony shadow and pasted it twice to continue the wall to the left (yellow). Finally, I removed the marina buildings by grabbing a piece of the retaining wall into its own layer, then stretching it and masking it (green).

Photo editing

And here’s the final edited photo. It’s a pretty rough job, but again, at web resolution, it doesn’t matter too much and gives the viewer a decent idea of what the building looks like!

Final photo

Shameless plug: I have a few tidbits about photo editing in my book, The Photoshop Anthology, which is written specifically for web developers/designers who want to learn more about Photoshop. Through the different solutions presented in the book, I talk about the clone tool, layer masks, and the other tools and techniques mentioned here. If you found this article interesting and would like to buy the book, please consider purchasing it through my affiliate link above!

Announcing Custom Shadow Box

I am very very very excited to announce that my new “side business” is finally opening its virtual doors. VERY.

Introducing Custom Shadow Box at www.customshadowbox.com!

Custom Shadow Box web site

Business plan? What business plan?

The [rather uncreatively named] business is meant to be a side project for me. I enjoy working with my hands, and this is an opportunity to try to get some additional income while doing something else I love. I’m not expecting a high volume of orders because of the price point, so I expect to show a loss at the end of this year (for the shadow box side business part, anyway). The startup costs weren’t high, but I did invest a nice chunk of change into professional photography in addition to fictitious name filing fees.

Nevertheless, this has been a great (albeit sometimes frustrating) way to learn about selling tangible product in California, which involves getting a reseller license, dealing with sales tax, and all that fun stuff. Making the web site was also a great learning opportunity. More about that in a bit.

Beginnings

First shadow box
It started with a wedding present given to my sister back when she got married. A friend had arranged the invitation artistically in a small shadow box with silk floral accents that matched the colors of the invitation. I always thought it was a cool idea, but it wasn’t until my coworker got married that I finally tried it out. Their invitations were wrapped in orange vellum with a gorgeous patterned ribbon. My coworker had gerbera daisies in her wedding, so I picked some silk flowers that matched the invitation and put it together.

Fast forward to sometime last year. I was brainstorming ways that I could develop alternative streams of income. By this time, I’d created some shadow boxes to display my own wedding photos and invitations and created a couple more for other friends, as several of my friends were conveniently getting married. I played with the idea of making custom shadow boxes for money and sketched out some pricing ideas. Come 2007, I decided that one of my main goals for the year would be to get this new business idea up and running.

Process

First, the logo. Below, you can see the logo evolution. I started with a simple 3D box shape created in Illustrator and eventually made the frame “thicker” to give it some depth. While I liked the inner shadow effect (large upper right), I eventually moved the shadow in front of the box so that I could do cool things with Jason Gaylor-inspired flowers. I liked my original wild tangle of flowers (third row left), but when reduced to logo size it was too hard to tell what they were (my sister Angela’s feedback), so I simplified the shapes for the actual logo itself. I didn’t want the time I spent on the crazy flowers to go to waste, however, so you’ll see that they show up in other parts of the site.

Custom Shadow Box logo evolution

My original logo and web site design color was teal, but my graphic designer sister said that I should pick more neutral colors so that the site wouldn’t clash with my product pictures. Above you can see my attempts at choosing other colors. Eventually I figured out that it would work best to have the shadow box mark in one color and the text and the rest of the site to be in another color. I also made the page titles green to add some additional oomph (that’s a technical term, by the way).

Web site colors

The web site design went very smoothly. I used my wild flower mass as a page background and already had in mind the kind of feel and style I wanted for the web site, which I’d describe as clean and web 2.0-ish.

The web site development, on the other hand, was a fun learning experience and challenge:

  • I tried to use as-clean-as-possible HTML for the markup. I generally suffer from divitis so this was my attempt to use as few divs as possible. (Note – I don’t think the site validates 100% quite yet. Still working out some of the kinks.)
  • I bought DOM Scripting by Jeremy Keith and then completely redid the gallery page to use better markup, with a fancy Javascript file controlling the application of classes.
  • I also used DOM scripting to get the order page more interactive, with prices highlighting as you select options and the bottom invoice amount automatically updating as you “build” your shadow box.
  • I got to experiment with a totally new illustration style. More below.

There are still some challenges with the order page that I haven’t figured out how to deal with. There’s something about my script that won’t allow me to automatically put the focus on a text field after selecting a radio button (such as Calligraphy Options). Also, if you leave the page and then go back to the order form, the radio buttons are selected but the Javascript stuff has all been reset so the prices aren’t highlighted and the order total is “$0.” Not sure what to do about that either. If you’re a Javascript expert and would like to provide some tips or want to monkey around with my code, please do!

Shadow box photo
The next step was to get some product photography. I had put in some temporary pictures into my gallery of older shadow boxes I had created and photographed. Some of the photographs were okay (such as the one used on the home page which had removable glass) but the photos of black frames were generally not usable because of reflections on the glass. I chose Bonnie Anglin from Anglin Art and Design because of her experience with product photography, although I think I offered her a new challenge with photographing glass-faced picture frames! You can see her great results on the gallery page; she took all the photos except the first one and the third one.

At about this point, I also decided that I wanted to put some illustrations on the how it works page, which was text-heavy and boring. I didn’t think my typical comic style would work, so I contacted Paige Pooler to see if she was available. Unfortunately, she wasn’t, but I was inspired to try out a different style of illustration and see how far I could take it. You may remember my first attempts; that specific portrait ended up on my about page. The other illustrations took a while to complete because of a bout of procrastination, but I’m very very pleased with how they turned out. Notice that I managed to incorporate the wild-flowers in the illustrations as well. See the other illustrations on the how it works page.

Custom shadow box illustration

Using code culled from other projects, I finished up the web site by getting the order form to work, then actually shipped shadow boxes (long-belated wedding presents) to test the shipping price. US Priority Mail ended up being the most cost-efficient way to ship. I ordered boxes from Uline although I still need to find a source for bubble wrap (Office Max will do for now).

And this morning, I went live!

Next steps, and how you can help!

Things I still need to do:

  • research bubble wrap costs and find a source
  • create business card and brochure
  • create invoice template
  • finish baby shadow boxes for friends (need to add baby photo) and take photographs for gallery

How you can help:

  • Kindly spread the word! Word of mouth, blogs, anything will help.
  • Provide feedback about the general business idea, site, and price point.
  • See a typo? Let me know!

A Client Story: Teaching Photoshop

On Sunday, I visited a local toy store for some initial consultation. The husband-wife pair, who had taken over the store about a year ago, were going to add a bunch of inventory to their online store and wanted my help. I went in-person to observe their process so that I could see if I was the right person to help them or not.

The previous owner had put together an ASP web site linked to a database. As it turned out, the actual process of entering product information was pretty easy, just time-consuming. The big hangup in the process was that they didn’t know how to use or leverage Photoshop properly to create the web versions of product images.

I told them that they should find a cheap student to help them enter in product information but offered a half-hour of paid training to show them how to streamline their Photoshop setup. Rather than have me come back another time, they opted to have me do the training right then and there.

I created an action that would crop an image and save three versions for the web site. I showed them how to reorganize their product image folders so that they had two folders to use for “processing.” Then I stepped aside, had the husband sit down, and walked him through the magic of automation and batch processing. I also gave some other gentle tips for being more efficient with the computer in general — changing the Explorer view to “thumbnail” so that he didn’t have to try to remember the filename but could look at the picture visually, using the keyboard to flip through Photoshop commands instead of tedious point-and-clicking, how to Shift- and Ctrl-click multiple files at once, and uploading multiple files at once instead of three at a time. At the end of 30 minutes, his eyes were alight. “This is sooooo cool!!!! I can’t believe how much time this is going to save!” The energy and enthusiasm in the room were palpable.

This experience affirmed a relatively recent Thing I’ve been learning about myself: I like to design, but I love to teach. I like helping others to get better at things, get more efficient. I like sharing knowledge — and getting paid for it was nice, too. I’m not dropping all my current work to dive into teaching, but I can see myself moving more towards situations which would involve some teaching or training.