Posts Tagged ‘Typography’

How to Create Pinterest Images
that People Love to Pin:
7 Pinteresting Tips

Wednesday, February 6th, 2013

How to Create Pinterest Images that People Love to Pin: 7 Pinteresting Tips

As a lot of people do, I love having my blog posts pinned or repinned on Pinterest. Not only does it make me feel great that someone is loving my work, but it also helps to promote our brand and business across a whole new platform. As a blog writer and a Pinterest lover, I’ve learned that the key to getting my work pinned is making sure my images are optimized for Pinterest. An optimized image can draw a user in, entice them to pin my content and, if I’m super lucky, even read my post. Now, what’s the trick to creating the most pin-worthy, optimized images?

Below are 7 tips I’ve learned to create images that Pinterest users will definitely love to pin:

1. Choose Visually Appealing Imagery

The number one thing you can do is use images, videos or infographics that are visually interesting, beautiful, or aesthetically appealing. Pinterest is a place to come to get inspired, so a great looking image will be valuable to a user and will encourage pinning. The most pin-worthy pins use professional-looking photography and smart design. When creating imagery, make sure to use your own original content and/or purchase stock imagery to avoid any copyright issues. Beautiful and original content will always draw users in, enticing them to pin or repin your work.

2. Build Images at an Optimal Size for Pinterest

It is important to build your images based around Pinterest’s image size restrictions. Pinterest scales images to two different sizes:

  1. The thumbnail pins in the Pinterest feed are displayed at 192px wide with a variable height proportionate to the original image. If the pin is smaller than 192px wide, it will remain its original size and will display on Pinterest with gray bars on either side to fill the additional space. Pins can be no smaller than 81 x 81px.
  2. A larger, zoomed-in version of the image is also used on the pin detail page and has a width of 600px, again with variable height. If the image is smaller than 600px, the photo will be stretched to fill the space, which could cause for some unfortunate looking images.

How to Create Pinterest Images that People Love to Pin | How Images are Displayed on Pinterest

To get optimum looking pins, it is best to use a width of 600px and avoid having tiny, stretched or pixelated images. You can create images at any length you would like. Some people choose to use long images to give their pin more presence on the page. However, if your image is too long, people might not want to take the time to scroll all the way back up to repin your content.

3. Use Text on Your Images to Describe Your Content

Using text on images to describe your content makes your images extremely pin-friendly. Your text serves as a reminder to Pinners—when someone sees your pin, they will immediately know what your pin is about. They won’t have to rely on the description. This way, users will always understand what you pin is, even if your text description is changed or deleted.

How to Create Pinterest Images that People will love to Pin  |  Use Text on Your Images to Describe what You are Pinning

Use text on your images to describe what your content is about

4. Make Text Easy to Read

When creating text based images or adding text over a photo, you should make sure the text will be large enough to be legible in Pinterest’s thumbnail format. The text can get quite tiny, so testing the appearance of your images is key.

How to Create Pinterest Images that People Love to Pin  |  Previewing Your Pin before you Post

If your type is legible on the “Create Pin” window, it will look good across the Pinterest image feed.

There are two things you can try depending on your skill level. First, before you save your graphic, temporarily scale it so the width is 192px. If you can still read it, you’re all set to save your image. Second, If you have already created your image, try pinning the image from your preview area before you publish it to your blog or site. If it looks good in the description box, it will look good on the site. If things are hard to read, try enlarging the font or increasing the font weight.

Brand Your Pins

West Elm uses branding to show they are holding the “Pin it to win it” contest

5. Brand Your Images

When something is your own work, it is a good idea to brand your content by adding a logo or url to your Image. This lets users know where the work came from and serves as a way to get more exposure of your brand. People also might be fans of a specific brand, so seeing a logo can engage a user even further. Users will know instantly who created the image and where they can find it online. A great example of this is West Elm’s Sweepstakes Pin. They use their logo at the top of the pin, so users know exactly who is running the contest.

6. Link Your Pin to Something Great

Whether it’s informative, instructive, fun, entertaining or helpful, your pin should always link to something great. Many Pinterest users pin images to learn more, see related items, or just to reference linked content. When someone clicks on an image they generally want to see more great material or learn more about what has been pinned. People get discouraged by a pin that doesn’t have a back-link or takes them to somewhere unrelated to the image. If the URL is missing, you can add it under the edit menu for the pin. Also consider adding the URL in the description area. By providing a link to the pin’s original source, your pin is automatically more valued and more pin-worthy.

7. Create Thoughtful File Names for Your Content

Create Thoughtful File Names for Your Content

Create a thoughtful file name for your image. This will appear as your description when someone pins your content.

Label the images you publish on your site with information about what is contained in your pin. When someone goes to pin your image, this information will appear in the description of your pin. It is a good habit to spend the time to include your business, blog name, web URL and/or blog title within the image name. Descriptions shouldn’t be too long, aim for 200-300 character length to entice users to pin. This description will appear as keywords below your image and make your pins easily searchable.

Put the Tips in Action

It’s time to start making the most out of your imagery. If you follow these tricks of the trade, Pinterest users won’t be able to stop themselves from pinning your content! Have more tips for optimizing your images for Pinterest? I’d love to hear them.

And as always, don’t forget to follow me on Pinterest, and of course, Zoom Creates.

Follow Me on Pinterest

For more pinteresting tips on Pinterest, check out my related post:
How to Increase Your Pinterest Followers: 20 Pinteresting Tips


Beautiful, Dynamic Words with Aierbazzi, jQuery, and @font-face kit

Thursday, May 10th, 2012

Roberto Cecchi created and posted his Aierbazzi (which means “weeds”) font to his web site back in 2008. He has been experimenting with fonts creating illustrations in a simple format, and he has posted creative use of this font for non-commercial applications. The letters in the font are placed one above the other, layering and building a new shape. It’s an interesting concept, and I wanted to re-share it here.

Demo:
Enter a word or phrase in to the box below to see how the illustration begins to emerge. On load, the illustration shows what “ZoomCreates” looks like. Numbers and symbols won’t work, so you must only use upper and lowercase A-Z characters. Also, no spaces allowed.

:ZoomCreates

(more…)


Whether you need it or not

Thursday, February 9th, 2012

The Zoom Creates team has created six sets of  temporary tattoos, and to share some of our ink-spiration, we’ll be posting a “Tat-A-Day”. The “Tat-A-Day” posts will last throughout the duration of the Rethink Ink contest. So tune in and get ink-spired to create your own!

We’re starting off our “Tat-A-Day” posts with a few from the Zoomer-ific set. It’s full of tattoos referencing the little things that make us laugh, but there are a few of those Zoomer inside jokes that may need a bit of an explanation.

Today being Thursday, otherwise known as Shower Day, we decided to kick this off with “Whether You Need It Or Not”. This tattoo is inspired by Greg, one of our talented designers. Since starting at Zoom he has claimed that he showers only once a week, and always on Thursday. Some think he’s messing with our minds and testing whether we’ll fall for his lies. Robin is known to believe anything and everything she hears, so she’s an easy target! But others are convinced that Greg is just comfortable enough with his coworkers to let us in on his “dirty” secrets. The debate continues…

I asked Greg this morning why Thursday was shower day. He said, after years of shower schedule experimentation, with everything from once a month to twice a week, he found once a week to be the perfect schedule. Thursday, it turns out, is perfect, because its sort of mid week, and yet closer to the weekend. We all know that it’s more important to be looking (and smelling?) your best on Friday than it is on Monday.

So there you have it. Happy Shower Day to all!

Don’t forget to stop by the Zoom Ink web site, check out all the tattoos and score some free downloads!

Think you can do better? Bring it! Stop by our Facebook page and submit your own tattoo idea. Our design team will be designing the concept that inspires us the most!


Calligraphy with Illustrator

Monday, September 12th, 2011

Sometimes calligraphy brushes in Illustrator just don’t cut it. As much as you may try, a brush style in Illustrator just can’t mimic the flowing hand drawn style we crave. In the past, Illustrator was very limiting in creating flourish elements. To get shapes the way you want, you had to rely on your skill with the pen tool and the Bézier curve. With Illustrator CS5 in our hands, we now have the ability to manipulate line weight at different points on a line, making a job that would have been very time consuming, a breeze.

1. To mimic the hand drawn calligraphic style, I’d suggest starting on paper. Erasers are definitely your friends. Grab references of calligraphy styles you enjoy. Play with flourishes at the ends of words and with how words interact with eachother. Draw out your words. Don’t worry about the line weight at this stage, we’ll be adding this in the next steps.

2. Scan in your sketch. Bring it into Photoshop and clean up your drawing. This step makes it easier to trace in Illustrator.

3. Open your clean sketch in illustrator and starting tracing. Using the pen tool, trace over all of your lines. I’d suggest trying to keep the number of points to a minimum, but if your having trouble getting smooth lines, I’d try using the smooth tool.

4. Now we can get crazy with those curves. Press Shift (W) to begin using the width tool. Once you have this selected you can click on any point in your illustration to adjust the width of the line. Just click and drag away from the line to create a thicker stroke or toward the line for a thinner stroke. This will adjust the width of the entire line from that single point. To have more control over the whole stroke, use the direct select tool (white arrow) to select a point on your line. Then press Shift (W) and adjust the point. This will only effect the width of the line from that point until it reaches the next point on the line. This method is great for getting high-contrasting line weights on a single line. A great way to start is by scaling down the width of the line on each end-point of your type. This creates clean beginning and endpoints and helps the lines feel more brush-like.

5. With your reference images in hand, mimic the line weights you see. I’d suggest trying to keep all of your thick strokes a similar weight and thin strokes a similar weight. This way your type has a very consistent and cohesive feeling. Once you have all of the type in the style to your liking, try playing around with embellishments. Add extra flourishes or lines to enhance the design. To finish up my own design, I added a soft gradient halo around my text and a subtle feathered drop shadow to make the text stand out from the background.

Now get out there and start experimenting, you’ll be surprised at what you can make and how easy it can be to get fabulous looking designs!


Web Design Trends 2011: Typography

Monday, August 29th, 2011

Web safe fonts. If you are a web designer or developer, names like Arial, Verdana, Georgia, or Tahoma instantly come to mind when you hear those words. Up until recent years, designers (sometimes begrudgingly) relied on these and a small handful of other web safe fonts to allow visitors to view fonts correctly on screen. Internet browsers could only display fonts that were installed on a person’s individual computer, so this standard set of fonts became the typographical foundation for most websites.

With only a few web safe fonts available, web designs of the past have been extremely limited in the use of exciting and engaging typography. Specialty fonts online were generally reserved for main headlines and could only be placed in as static images, limiting the functionality of the type and hurting search engine optimization (SEO).

In recent years, there has been an emergence of font-embedding services, like Typekit, letting designers break out of the “safe” zone. Designers have more font options and can not only play with font style, but also the important details of leading and line height. These new options for fonts allow text to be easily updated and copied and selected from the browser, meanwhile maintaining a positive effect on SEO.

The font-embedding tools have created a boom in typographical exploration. Strong typography on a site can help tell a story as well as evoke an emotion from the audience. It can also set a tone for the site or emphasize a chosen theme. This year are seeing designs that are using large and exciting font choices, both through the use of static image and services like Typekit.

The big trend right now is to go huge with your headlines. These over-sized headlines capture the attention of the audience immediately and can make a site stand apart from their web-safe counterparts. Not only that, they can also create a visual hierarchy with the rest of the elements on the page as well as improve legibility for the viewer. The trend of typography on the web is definitely long-awaited and something I think it will keep growing and continue to be explored through a variety of methods. Typography lends a richness to websites that we haven’t seen in past years and gives web designers a whole new way to present information.

Check out the designs below for great uses of large typography.

CarsonifiedTapp3 MediaNeiman GroupMarie CatribsJeroen HomanChirp TwitterBlack Estate Vineyard


Great Gift Ideas for Designers

Wednesday, December 15th, 2010

Now’s the time for that last minute online gift shopping. December 17th, known as free shipping day, is only two days away. Every year on this day, more than 1,000 participating merchants will offer free shipping with delivery by Christmas Eve in the continental United States. If you have waited untill now to get those gifts, the 17th is your day! To help you on your way, I’ve uncovered a handful of holiday gift ideas for the designer or artist in your life.


Gift Idea #1: Monogrammed Mugs
At $6.00 a piece, these mugs make great stocking stuffer. They are great for the typography buff and are a wonderful way to personalize your gift.

Gift Idea #2: Winter Calligraphy Dessert Plates
With swirling wintry themes, this set of 4 plates are sketched by an artist’s hand
and will deck out any designers table.

Gift Idea #3: Vintage Marquee Letters
With a plethora of options avalable on Etsy or Ebay, you’re sure to find that perfect word or letter to make a statement on their wall.

Gift Idea #4: Photoshop Magnet Kit
These Photoshop-themed magnets are the best way to stick your photos to the fridge or to any other metal surface.

Gift Idea #5: Brass Vintage Letterpress Necklace
These were originally used on hand-cranked printing presses and are recycled into beautifully crafted jewelry.

Gift Idea #6: Number Jumble Artwork
If your special someone is a fan of type, this number jumble artwork will get their juices flowing!

Gift Idea #7: Color Etched Letters
A, B, C your way over to these ornate etched and painted metal letters, perfect for proudly displaying or any shelf or tabletop.

Gift Idea #8: Paint Brush Note Pad
Keep your favorite artist on track with this fun and creative notepad.

Gift Idea #9: Camera Pencil Sharpener
This camera-shaped hand-crank pencil sharpener has a hidden drawer for shavings. Great for any photography buff.


Awesome Fontstacks

Friday, November 12th, 2010

Continuing the discussion of new web typography options from our earlier posts Web Fonts and Cufon vs CSS3 vs Google Font API, I ran across this the other day: Awesome Fontstacks. And it is pretty awesome. Kurtis will back me on this.

This site allows you to “automatically match fonts based on typographical metrics, optimize the font bundles for their intended purpose, and deliver rock solid CSS for those fonts and their fallbacks to copy & paste”. Basically, you can go to this site and choose from 45 fonts (that are free and licensed for online use) to use for your headlines, body copy, decorative and monospaced needs. As you choose your font for each category, sample text in a window to the right updates to show you how it will look as copy. It only displays fonts that would be appropriate to use together so you don’t end up with, say, two similar sans serifs like Droid Sans as your headline font and Fontin Sans as your body copy font. This makes it really nice for me as a designer.

What makes it nice for web developers is that after you have chosen all your fonts, or your “fontstack”, you can conveniently download the font files and put them into a directory in your website then copy the CSS code to your stylesheets folder and link it from your website. Awesome, eh?

AND, each font stack has a back-up stack for those using browsers that don’t support @font-face.

P.S. Iron Maiden rules


Papercuts – The Good Kind

Wednesday, September 1st, 2010

While perusing Design*Sponge, one of my favorite blog sites, I came across another blog called PAPERCUTS by “MrYen” that posts about design finds and his own papercut artwork that he sells on Etsy (I am loving the whale papercuts shown). Paper cutting is as simple as it sounds, the art of cutting designs out of paper, but the process, however, is extremely meticulous, time consuming and involves an exacto and a steady hand.

I’ve done some simple papercuts of my own, and it’s always more difficult than it seems, especially when your goal is to get a perfect edge, while avoiding a ripped mess. Did I forget to mention that it is time consuming? I think the precision and detail of papercut art is so beautiful. Designs are delicately filled simple silhouettes, amazing textures and depth that you wouldn’t be able to achieve from plain printing. Below is just a sampling of what papercutting has to offer.

To learn how to create your own papercuts check out The Heart of Papercuts, who offer an introduction on how to start paper cutting. And for more inspiration and variations on the style you should also check out these amazing artists, Yulia Brodskaya, and Julene Harrison.






Quick Tips: Importing text from Word into InDesign

Thursday, June 3rd, 2010

I don’t know about you, but I hate it when I bring copy into InDesign from Word and it brings with it a bunch of formatting or paragraph and character styles that I don’t want or need. Luckily there is a super simple remedy.

1. When placing text into InDesign choose File > Place.

2. Navigate to and click (but don’t double click) the Word document you’d like to place.

3. With the document selected click the “Show Import Options” check box and click Open.

4. This will bring up an import options dialogue box. Choose “Remove Styles and Formatting from Text and Tables” and click OK.

Viola! No more pesky styles and unwanted formatting. Note that you can also use this same process when bringing text in from Excel. The Import Options dialogue box also includes some other options that you can turn off and on to control how your text is imported. Oh so simple, but yet so helpful!


Web Fonts

Monday, May 24th, 2010

Last week I came across the new Google Font API and Google Font Directory. They are both in beta but that is nothing unusual for something from Google. The Google Font Directory provides high-quality web fonts that you can include in your pages using the Google Font API. Web fonts, enabled by the CSS3 @font-face standard, are hosted in the cloud and sent to browsers as needed. A total of 18 royalty free fonts were released. Woo Hoo! More web fonts!