Getting back to basics! This is a blog discuss simple principals and new trends in web design.

Creating an image that will stand out on Pinterest

Pinterest is the latest social networking site to hit the web. It’s growing at an insane rate and for good reason. Pinterst basically combines a visual bookmarking system with the ability to scrapbook and collect all while having the ability to share with your friends/followers. Even though it’s primarily a female demographic I do have to say I have a lot of fun creating boards (categories) and filling it with pins (bookmarks).

If you’re new to Pinterest you may not know that you can pin anything to a board and not just the items you find on Pinterest. What does that mean? Well if there is a favorite pair of shoes or a new guitar you’d like to add to your board simply add pin and paste the URL (link) of the page you want to add. Pinterest will search your site for an image or images, which you can pick through to represent your pin (bookmark). The next question to ask as a web designer or web developer is … what image(s) does Pinterest deem usable?

Pinterest does not look at all images equally. It will ignore background images as well as images that are excessively wide verses tall. Images that are small (images must be at least 80 x 80 pixels) are not considered. Images from Flicker with permission restrictions are also not considered usable. Vertically an image can be up to 5000 pixels according to some articles I’ve read but I would keep it to a MAX of 1200 pixels.

With my own portfolio site I found that my bio pic and the large thumbnails of other projects were the only thing available. After a quick search on the web I ran across a code generator for a Pinterest button. The cool thing about it is that the action will launch pinterest and a pin. You can associate what image you want to represent your site/ page and it doesn’t need to physically be on your site. Just pin it to the picture and your good to go, you can even add a description.

So now the question is what do I choose for an image? You don’t. Instead you create one and supply it through a button. Like I said earlier the restriction on height is next to nothing. A board thumbnail is 192 pixels wide. So like a vertical comic strip from a newspaper were going to create a well-branded Pinterest safe image.

In this tutorial we’ll learn how to make a Pinterest safe graphic that is eye catching as well as how to create the code for your button. I will be using my friend’s company as the inspiration.
* all key commands are for Mac Computers

Step 1: Setting your template

Open Photoshop and create a 192px by 1000px image at 72 dpi. Don’t worry about the height. We’ll easily adjust that later.

Step 2: Adding and styling your logo

Add your logo to the top.

Next create a new layer underneath the logo and using the marquee tool draw a box as wide as the document and proportioned to the logo. Choose a foreground color and fill it in with a contrasting color (option +delete).

With your marque selection still made, create a new layer underneath the box you’ve just filled in. Hit the “X” key to restore a black foreground and white background in your color palate and use option+delete again to fill the box with black.

Now hit Command+D to deselect the box. Go to your filter tab, select Blur/Gaussian Blur, set it to 3.4 and hit enter. Hit the “V” key to select the Move Tool and hit the arrow down 4 times. Now you have your logo and a homemade drop shadow to create separation and depth.
Your Logo should resemble this.
Pinterest Tutorial Photoshop Logo Treatement

Style your Pin

Trueform Pinterest BoardNow add a few images to tell a story about your website. Be creative just try and do it visually. Stay away from a bulk of text. The success of Pinterest is catching someone’s eye. NOT overly informing them. Try and look at it like a billboard or web banner.

When you’re done hit the C key to select your crop tool. Crop out the excess on the bottom. My board photo ended up being 930px long. I think that’s a relatively good height. It will stand out but not be so long that you are scrolling down the page forever.
Click to See full size pin >>

*If you need more height just go up to the top navigation and go to Image -> Canvas Size. You can change your height and I would anchor it to the top so you’re adding extra pixels to the bottom.

Now what?

Save your image for web. I think a jpeg compression of 65% is fine for this low rez image but you can keep it higher if you’d like. Then place the image in the root directory of your site.

Finally it’s time to get your code

Pinterest has a great “goodies”page that generates all the code you’ll need. Go to the Pinterest goodies widget and add the link into the of your image along with your website and description.
Pinterest Goodies Code
Copy and paste the code onto your button and put the single line of JavaScript into the <head> (where I prefer to keep it organized) of your html page.

If you have any questions send me an email.

Speak Your Mind