Hiiiiiii… this is not a recipe. 😛 I am sorry to disappoint, but we are going to take a hot minute to answer one of the questions y’all have had related to the back end of wyldflour – how to create a long pin using photoshop. If you were here for deliciousness, come back tomorrow morning for some coma-inducing POUTINE.
As for you blogger enthusiasts out there… You’ve got your delicious recipe, your stunning photos, and your blog post ready to go. Now… about how to create a long pin for promotion on Pinterest…
There are three steps for implementing long vertical pins in your post:
- Creating a long vertical pin.
- Optimizing the long pinterest image.
- Hiding the long pin in your post.
1. How to Create A Long Pin
First, you’ll need to decide on a format for your long pin. Here are some common examples:
Personally, I prefer the look of the figure on the far left. I like to include a finished photo of my recipe and one that features ingredients, prep, or the “bite” photo. But if you have any kind of step-by-step content, (e.g., recipes, DIY, organizational, how-to), then the figure on the far right may better feature your content. Next, you need to create a new, blank file:
But you’ll need to know what size file to create. (This is where those math skills you never though you would use actually come in handy.) The width is easy—your long pin will be the same width as the photos you are using.
Long Pin Width = Width of Your Edited Photo
[Tip: If you don’t know what size your photo is, you can either hover your mouse over the image in its file folder—a small bubble should pop up with the properties information, including the dimensions. You can also select the photo in photoshop, select Image > Resize, and the resize box will pop up and be pre-populated with the dimensions of the photo selected.]
- Example: The wyldflour content column is 680 pixels wide, so all of my edited photos are saved in 1360 pixels wide to make them HD-ready. This means my new file will need a width of 1360 pixels.
To figure out the height of your long pin, add the height of all your images and the space you want for your title box.
Long Pin Height = Photo #1 Height + Photo #2 Height + .333*(Photo #1 Height)
I like to create a title box that is about 1/3 the height of one of my images. (This may change based on the length of the title.)
- Example: The wyldflour edited photos are saved with a height of 2040 pixels. So:
Long Pin Height = 2040 + 2040 + 1/3*2040
So I create a blank page with dimensions 1360 x 4680. (I rounded down after calculating 1/3*2040):
Next, use Photoshop to open the one or more photos that you will be inserting into your long pin. Click over to Photo #1, type ctrl + A to select all of the photo. Select ctrl + C to copy the entirety of the photo. Then click over to your blank file. Select ctrl + V to paste the photo into your blank file as a new layer. Using Photoshop’s select tool (the arrow), you can drag your photo to where you want it in your long pin. Repeat this step with all of your photos and drag them to where you want them in the blank file.
Next, choose the color you want to appear in your title box. Click the background layer. Select the paint bucket tool and choose what color you want your title box to be. To do so, click on the color selection square (above, in black) in the left-hand menu. You can either choose a pre-set color, or you can click on the eyedropper tool to match a color that appears in your photos. I often use the eyedropper if I want it to look like my photo is just fading into the title box.
[Trouble-shooting: Did one of your pictures just disappear? Then you just painted in the wrong layer. Make sure you are painting the background layer—the layer without either of your photos.]
Finally, you need to create your title box. Use Photoshop’s Text Box tool and drag your cursor to create a text box in the same size you want your title box. Enter the text of your title and make sure you customize it! You can choose the font, the color, the format, and the size. Click the check mark when you have it the way you want it. If you need to, use the Select tool to drag the text box into the right spot.
[Tip: If my title is multiple lines, I’ll often use three different text boxes, so that I have more control over the spacing between the lines. For example, you can drag the boxes until they overlap slightly, so you can get the lines closer to each other than you can in one text box.]
[Trouble-shooting: Is one of your photos blocking the words in your title box, because you needed more space than you thought? Grab the layer with your text and drag it to the top of the layer stack—this will bring the text in front of your photo.]
Ta Da! You have a beautiful long vertical pin. Now what?
2. How to Optimize A Long Pin
Congratulations! You know how to create a long pin and now have a humongous image for pinterest. Time to resize and optimize!
It is up to you exactly what size you would like your pin. Remember that your long pin will appear the same width as any other pin when someone is searching Pinterest. But when someone clicks on your pin, the size of your original file will matter—it will determine how big the pin appears in the viewer’s screen.
Large File: e.g., 1360p x 2040p
- Advantage: More detail in the photo; up close and personal.
- Disadvantage: User has to scroll to see entire pin.
Small File: e.g., 680p x 1020p
- Advantage: User can see the entire pin when they open it.
- Disadvantage: Less detail.
I recommend trying a small and large version, pinning them to Pinterest, and opening each one to see what you prefer. To resize your photo, select “Image,” then “Resize,” then “Image Size”:
If you have down-sized your photo (remember, NEVER up-size your photo), then you have lost some of the detail in your photos. I usually recommend compensating for this or “optimizing” your photo. Click each layer that holds one of your photos. Increase the sharpness just slightly to add a little of that detail back into the photo.
You’re done! Use “save for web” and stash your long pin away for your upcoming post!
3. How to Hide the Long Pin in Your Blog Post
This… is the super easy part.
To each his own, but I have never liked how the long pin looks on my blog page. Either it fills the content column and is horrendously long or it’s a manageable size but surrounded by a lot of empty space.
So I hide the long pins. This means that when you look at blog posts on wyldflour, you don’t see the long pin. But when someone selects the “pin it” button at the top and bottom of the post, the long pin will appear as an optional photo to pin. This also makes it easier when I am doing Pinterest promotion for a blog post, because I can just grab the long pin from my post when I am scheduling out my promotional pins.
Upload your long pin to your media bank and insert the photo into your blog post in the same way you always insert a photo. Now click over to the text view of your blog post, so that you can see the coding. I always insert my long pin directly following my first photo in the post. So for example, when I look at my text viewer, I see the following:
<a href=”https://www.wyldflour.com/wp-content/uploads/2017/01/Healthy-Coconut-Granola-4.jpg”><img class=”aligncenter size-full wp-image-631″ src=”https://www.wyldflour.com/wp-content/uploads/2017/01/Healthy-Coconut-Granola-4.jpg” alt=”Healthy Coconut Granola | Low Carb Granola | Healthy Granola | Maple Pecan Granola | Crunchy Granola” width=”1360″ height=”2040″ /></a>
<a href=”https://www.wyldflour.com/wp-content/uploads/2017/01/Healthy-Coconut-Granola_lo.jpg”><img class=”aligncenter size-full wp-image-635″ src=”https://www.wyldflour.com/wp-content/uploads/2017/01/Healthy-Coconut-Granola_lo.jpg” alt=”Healthy Coconut Granola | Low Carb Granola | Healthy Granola | Maple Pecan Granola | Crunchy Granola” width=”680″ height=”2115″ /></a>
You can see two variations of the same type of code, which inserts a photo into your post. In order to hide the second photo, I insert the following code just before the photo’s code:
<div style= “display: none;”>
(My silly text editor won’t make the quotes go the right way unless I add a space. So make sure you remove the space between = and “. ) And I insert the following code just after the photo’s code:
</div>
So the coding for the two photos in my post now looks like this:
<a href=”https://www.wyldflour.com/wp-content/uploads/2017/01/Healthy-Coconut-Granola-4.jpg”><img class=”aligncenter size-full wp-image-631″ src=”https://www.wyldflour.com/wp-content/uploads/2017/01/Healthy-Coconut-Granola-4.jpg” alt=”Healthy Coconut Granola | Low Carb Granola | Healthy Granola | Maple Pecan Granola | Crunchy Granola” width=”1360″ height=”2040″ /></a>
<div style=”display: none;”><a href=”https://www.wyldflour.com/wp-content/uploads/2017/01/Healthy-Coconut-Granola_lo.jpg”><img class=”aligncenter size-full wp-image-635″ src=”https://www.wyldflour.com/wp-content/uploads/2017/01/Healthy-Coconut-Granola_lo.jpg” alt=”Healthy Coconut Granola | Low Carb Granola | Healthy Granola | Maple Pecan Granola | Crunchy Granola” width=”680″ height=”2115″ /></a></div>
Now click on over to your visual tab to see what your post looks like! The photo that you added code to is now hidden!
Test out your hidden pin by going to your published post and using the “pin it” button. (Remember—you’ll need this button in order for the user to be able to pull up all available pictures. A hover “pin it” button won’t work since that only pulls the image it is hovering on.) Your long pin should appear in the images available for pinning.
That’s it! Now you know how to create a long pin, optimize it, and hide it in a blog post! What is your favorite long pin you have created??? I would love to see it!
Comments