I recently finished a big photography and design project: An online gift guide for independent businesses in Over-the-Rhine. The area’s merchant groups wanted something to showcase the variety and depth of gift-appropriate items available on Main and Vine streets to encourage people to shop local this holiday season.

Environment and product photography

Page design and layout

So, after running from store to store taking pictures for two days and spending several more days (and very late nights!) working on the design and layout, it was ready!

You can click through the entire guide here, and if you happen to live in the area, I hope you’ll take advantage of all our city has to offer and do some shopping in OTR!

You'll also like:

You know those online collages that let you click on different pictures to go to different sites, like in a blog post, email newsletter, or on a Facebook landing page? There’s a good chance it was an image map.

Image maps allow you to hyperlink areas of a single image to various URLs (websites) without “slicing” the image into separate files. They come in handy when you want an easy way to create a composite image without having to create complicated tables and style sheets.* Here, I’ll show you how to create your own click-able collages!

Making Image Maps the Easy Way

There are several ways to make image maps, but if you don’t have Photoshop or Fireworks and are too lazy busy to determine a bunch of map coordinates, you can create one using a (free!) site called image-maps.com. Here’s how:

Step 1. Create your image.

I use Photoshop, but you could use The Gimp, Pixlr, SplashUp, or any number of free photo editors.

Step 2. Upload your image to the web.

You can upload it to your site (I use WordPress, so I uploaded mine to my Media Library) or a free image-sharing site like Photobucket.

Step 3. Open your image in the mapping tool.

Copy the image URL (http://yourimage.jpg), go to www.image-maps.com, and upload your picture using the “from a URL” option. Once the upload is successful change the “Base URL” to the site where your image is hosted. Since mine is hosted on my site, my base URL is “http://TheStyleSample.com”.

Step 4. Start mapping!

The “rectangle” option is easiest, so just click the “Add rectangle” button, place and resize the rectangle around the area to be hyperlinked, then enter the URL that part of the image should be linked to. The Title/Alt text will be used as the text link, so make sure it’s descriptive.

Step 5. Get  your code.

Once all the areas are hyperlinked, click Get Your Image Map Code and go to the HTML tab to copy the code.

Step 6.  Add the code to your site.

Go to your site (or your Facebook page or email template) and paste the code into the HTML editor. Just a warning: on WordPress sites, it’s best to disable the visual editor (Users> Your Profile> Disable visual editor when writing)before pasting the code into your post, otherwise WordPress magically (and annoyingly) erases it.

That’s it! Here’s the map I created with this exercise:

Boy by Band of Outsiders sweater | YSL Gold-plated chain necklace | Topshop Trilby hat | Kate Spade Robin bag | Preen Razor Skinny trousers | Belle by Sigerson Morrison flats

*Note that in most cases, image maps are not considered a best practice. If you have the time and ability to slice, code, and link multiple smaller images, you should. If you need help with that, get in touch!

You'll also like:

My friend Alaina is putting together a series of fundraisers called Mural on Main to raise money for Artworks to paint a mural on the side of the building at the west corner of Main and Liberty. The mural will face high-traffic thoroughfare Liberty Street and serve as a colorful, quirky welcome to Main Street!

I volunteered to help by creating the poster for the event, and after gathering the needed information from Alaina, I played around with my chosen font (yay!) to create a custom text logo.

After adding bright splashes of color and creating the flyer, Southpaw printed ‘em up and they were distributed post haste!

Be sure to stop by Neon’s from 5-11 tonight (or MOTR on the 26th) to enter the raffle and participate in the silent auction for dope prizes and art!

You'll also like:

I’ve been working with a group of friends to put together a monthly pop-up shop filled with crafty objets d’art , fashion, accessories, home decor, and vintage clothing by a hand-picked selection of local sellers. Set to open at 1301 Main Street on March 25th, we’ll be right in the heart of all the Final Friday action!

We wanted a fun, vibrant name, and settled on PopShop as a take on the pop-up concept, and for its teasingly familiar resemblance to the name of a popular high street store. Of course (OF COURSE), I volunteered to develop the logo.

Various concepts + the final logo

The most obvious idea was to do a riff on the Topshop logo, and I came up with a few other type-focused options before we had a brainstorming session and decided we wanted something that included boxes, emphasizing the pack-and-go nature of the pop-up shop.

What can we do with various found materials? You’ll see…

We started getting extra creative with the “boxes” theme, and now we’ve planned a whole decor concept around cardboard and packing tape and other recycled materials! We’re inspired by the window displays at Anthropologie–creative design using uncommon elements.

If you’re in the Cincinnati area, head over to Facebook to Like the Final Friday PopShop page and find out more. Hope to see you there!

You'll also like:

Sometimes you have to design a document around a minimal amount of text–this is often the case with announcements, lists, and those extra boring (and seemingly unnecessary) reports most employers require.

Most of the time, the first instinct is to try to make the content fit the page by enlarging the text, quadruple-spacing the lines, or (god forbid) adding little pieces of clip art.

Please don’t do this! I will hunt you down...

However, the best way to design around short text is to make the text area smaller. White space is your friend!

Start by dividing the page

I divided the page in half length-wise, and into thirds horizontally. The text area is limited to the lower two-thirds of the right half.

Have fun with text and design elements

After adding the text, you can have fun with the rest of the page! I like large type, so I changed the title to the fail-proof combination of Georgia italic and Helvetica Neue Condensed.  The page is defined with a 6-point horizontal rule at the top and bottom of the page, and the space between the title and the text is defined by a similar, thinner horizontal line.

It’s still simple, yet looks like it would much more interesting to read–which is the point of these documents anyway, right? Try it the next time you have to hand in an EBR!

You'll also like:

I keep meaning to share some of the design projects I’ve worked on over the past few months, so here’s the first installment. One of my clients is Breck from Fashion Without Guilt, who I “met” (what do you call it when you meet people through the googlenet?) when she contributed to Style Sample magazine. Fashion Without Guilt is a fun site (with a very attractive and familiar layout!) that focuses on affordable fashion, beauty, and style for women who love quality fashion at a affordable price.

Breck got in touch because she wanted a new logo–something professional and fun but not too busy, perhaps using the acronym for Fashion Without Guilt. In the creative brief, she noted that she wanted “a uniform, clean feel.”

Based on her input, I created two very different concepts, and after only one revision, was ready with this:

I created print and web-ready versions of the full logo–which can be used on anything from business cards to branded merchandise– as well as the site header and standalone acronym for the Fashion Without Guilt Facebook page. Breck was thrilled with the results and the fast turnaround, and sent a lovely testimonial, saying

The two concepts that I received were exactly what I was looking for. Her level of professionalism and timely responses will make me a CUSTOMER FOR LIFE. She is my Internet Mary Poppins.

My pleasure! Thanks for letting me share this project!

You'll also like:

I returned from the IFB Conference with a stack of business cards, which I thought was fantastic. If you have a blog, a website, or especially a business (no matter how small), you should have business cards.

While they seem like a holdover from simpler times, there are a few reasons why handing a small square piece of paper to a potential client, contact, or friend is still an effective way to network.

1. It’s a tangible representation of a person and their brand.
2. It serves as a reminder for forgetful people. *coughmecough*
3. It’s like a little piece of art in your purse or pocket.
4. It makes you look professional.

The easy way

Even if you don’t have top-notch design skills, you can still try your hand at creating a business card. There are two easy ways to do this:

1. Logo + text

It’s as simple as putting your logo on one side and your contact info on the other. Creating a grid is an easy way to ensure everything lines up in an aesthetically pleasing way. Don’t be afraid to right-align your text or use portrait (vertical) orientation. Easy-peasy.

2. Photo + text

There’s a good example of this at the end of the DIY lightbox post. If you create a product–crafts, jewelry, clothing, food, widgets–take a good photo of it and use the image on your card. Just crop it a bit and add your contact info. You can sample colors from the image to find complementary shades for the text.

Printing

With all of the online printing services it’s easy to have cards printed inexpensively. I’ve had good experiences with and heard positive feedback about:

• Overnight Prints
• Moo.com
• Vistaprint
• Uprinting

Don’t forget to see what your local print shop can do! If you’re in  Cincinnati, Seemless has extremely fast turnaround.

Most of the sites mentioned prompt you to upload an image file (JPG or TIFF) or PDF–several even offer die-cutting and more advanced features. For example, at Overnight Prints, you can add rounded corners for an additional $2 per 100 cards.

Enforce your identity

Make sure your cards reinforce the visual branding on your website, labels, packaging, etc. Your goal is to create an identity for your business or product, so all of your materials should have the same look and feel. If you’re feeling really creative, you can also use stickers, stamps, or even handwritten cards for a personal, crafty touch!

You'll also like: