Design

Design Project: OTR Gift Guide

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!

How To: Create Image Maps for Your Blog

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:

*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!

Mural on Main

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.

Mural on Main Street OTR Cincinnati

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!

PopShop poppin’ up!

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!

Design tip:Make the page smaller

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!

« Older Entries

The Style Sample | Cincinnati Fashion Stylist & Shopping Expert

Back to top