Apr 21

Create an Attractive Product Preview for Your GraphicRiver Items

Tue, 04/21/2015 - 13:31 — julie

You’ve designed a good product to sell on GraphicRiver, but it just isn’t selling. It’s like you’re swimming upstream. That’s because having a quality product for sale on GraphicRiver is only half the battle. How you display your product to potential customers is almost as important as the actual item.

Presentation is what convinces clients to take the leap and buy. Don’t just upload your hard work and hope for the best. Instead, create a beautiful preview using the techniques you’re about to learn in this tutorial.

Firstly, this tutorial will teach you how to create a simple, stylish mockup in Photoshop and then show you how to use multiple mockups to build an eye-catching product preview. You can use this technique for any of your products.

Let’s dive in!

I. Create a Mockup to Display the Graphic

Step 1

Let’s take a look at the file we want to sell on GraphicRiver. It’s a set of elaborate, hand-drawn swirl frames in different shapes and sizes. They are full of detail, but that’s difficult to see if we leave the graphic as it is.

Let’s enlarge one of the frames to make the details more vivid and add some text to show how our frames can be used in a design project.

Be careful when picking a font. Choose one that can be used for commercial purposes and make sure it matches your product. For example, a hand-written serif matches the aesthetic of our vintage frames much better than a monospaced, futuristic font would. Try not to use more than two fonts as anything more will just distract from the frames.

Step 2

The details of the frame are easier to appreciate, but the overall presentation is still bland. This is where a mockup comes in. A mockup is a model of how a design can be used. We should display the frames so that shoppers can imagine themselves using the graphic in a design. Showing the customers an example makes them much more likely to purchase.

Let’s make our frames look as though they’ve been drawn right in an everyday sketchbook. In order to do this, we’ll need a photo template. You can use materials at hand to set up a simple scene.

Place a sketchbook on a solid background, for example, a table or wooden plank. This helps draw the viewer’s attention to the main elements of our composition. Use small things to fill the blank space around the sketchbook and make the scene more intricate. I’ve used a handful of pebbles, some pens, and a string of lights to add some nice warm spots. Be sure not to cover the sketchbook page or else we won’t have anywhere to put our product.

Photograph your scene. You don’t need a fancy camera. A smartphone will do. Take a few shots from different angles. Don’t worry about getting all the details of your scene in the photo.

The most important thing is the sketchbook page, as we’ll be using it to present our product. Try to find an interesting angle to add interesting dynamics to the scene.

Step 3 – Shooting Your Graphic

Choose your best shot. Open it in Photoshop and edit, if needed. I’ve created a new Levels Adjustment Layer and increased the brightness.

Step 4

Use the Rectangle Tool (U) to add a new shape above the photo. With the shape selected, go to Layer > Smart Objects > Convert to Smart Object.

This enables us to place the rectangle on our sketchbook page so it matches the page’s perspective and looks like it is a part of the page. Select the Smart Object shape. Pressing Control-T enables the Free Transform function.

Using the mouse, right-click and select Distort from the menu. Drag the corners of the shape, making the sides of the rectangle parallel to the edges of the sketchbook.

When you’re satisfied with the result, press Enter to apply the transformation.

Step 5

Head to your Layers panel and right click the Rectangle layer. Select Edit Contents from the menu. A pop-up window should appear with detailed instructions on how to edit the contents of the Smart Object.

Step 6

Click OK to continue. A new blank document will open.

Now we can drag our modified frames image into the new document. Resize the photo so it fits properly in the document. Position it correctly, and Save (Control-S) the file. You will automatically be taken back to the mockup to see the result. It already looks nice!

Step 7

We can now make a few tweaks and adjustments to the mockup.

Right click the Smart Object layer and choose Rasterize. Take the Eraser Tool (E) and delete any part of the frames that should be hidden behind other objects like pens or pebbles. Finally, switch the Blending Mode (Layer > Layer Style > Blending Options) of the layer to Multiply and reduce the Opacity until the colors look more realistic and soft.

Now you’ve got a mockup that looks fantastic and showcases your product for your customers.

II. Render the Final Screenshot to Represent Your Product

Step 1

When you’ve got a few mockups you’re happy with, gather all your created images into a single image that is 590 pixels wide (any height is fine).

Step 2

Add a simple header with a title that accurately describes your product. Choose a font that contrasts with the font used in the mockup, but make sure it is readable, clean, and minimal. No distracting effects. Choose a unique title. Include the distinct design style of your product, whether it is vintage, modern, flat, etc. Also make sure you include any special qualities that set your product apart. Use popular keywords, if possible.

Save your preview, naming it the same name you just gave your product. (This will help your image be discovered more easily on Google Images.)

Step 3 (Optional)

Add bonuses! Include some extra design elements for free, emphasizing them with a bright sticker on the preview. People will remember your generosity, and it’s a great way to land some returning customers.

Step 4

To finalize your preview, add any necessary information in a footer at the bottom of the image. Include any file formats (AI, EPS, PSD, etc) and other information buyers will need to use your product. No one will be happy if a customer can’t open or use your file.


Now your product preview is finished! I hope this tutorial helped you to discover how easy it is to make your product preview more attractive and noticeable.

Just remember the essentials:

  • Make your mockups simple, yet realistic.
  • Show examples of your product in various designs.
  • Make your preview as clean as possible with a minimalist design and plenty of space for the product to shine.
  • Maintain a single design style that is consistent with your product.
  • Use appropriate fonts with a few distinctive, contrasting colors. Readability is key.

If you can keep these tips in mind, you’ll be selling your items on GraphicRiver in no time!

Creating the perfect preview for your items is only half the battle. Item description is the other half. If you would like to have your item description written by a professional writer, you should try some of these guys on Studio.

The post Create an Attractive Product Preview for Your GraphicRiver Items appeared first on Market Blog.

Copyright 2009. E-mail Me
Auto Spare Parts