Many of us have come across such a concept as “preview”. Almost all people who are at least a little familiar with the English language or computer technology imagine what it is. Let's consider a more detailed interpretation of this word. In addition, we will give some tips on creating your own elements of this type.

Preview: what is it in the broadest sense

The term itself comes from the English word preview, which literally means “preview”.

But if previously it was applied mainly to graphics, today its scope of use is much wider. But first, let’s look at the initial interpretation of the word “preview”. What it is? Yes, just a reduced image of the original. Previews (as we call thumbnail images) used to be indispensable when publishing pictures or photographs on the Internet, the actual size of which in geometric terms was too large to accommodate several images on one page.

For convenience, the original image was reduced in size, and when you click on the preview, the full image opened. Much more smaller copies could fit on one web page than the same photographs or pictures at the original size.

Application of the term in various fields

Over time, the term migrated to a variety of areas. For example, it began to be used in the field of software.

As an example, let's take the Windows 10 operating system preview version. In the name, this term means that this is an evaluation version only. In other words, based on this modification, the user can draw a conclusion about the full version of the OS, having previously familiarized himself with its technical characteristics and parameters. Sometimes this term also refers to software products with truncated capabilities.

Likewise, the term is very widely used for informational purposes in music or film. For example, many musical groups, before releasing official full-length albums, make cuts from the tracks included in it, so that listeners can form a preliminary opinion about the quality of all future material.

Such things are also used in films. As a rule, these are the most striking and impressive shots that reveal the essence of the new film, its content, special effects used, etc. Only such videos are called not previews, but teasers or trailers, which, in general, is the same thing. From this perspective, the preview is even a kind of advertising announcement.

In many office programs, preview is used to preview a document, so this term can also be interpreted as “layout”.

How to make a preview yourself?

But let's return to the original understanding of the term. Creating a thumbnail yourself is not that difficult. First you need to decide where exactly this element will be published. For the YouTube service, you can create a static image from some frame (as a rule, the minimum recommended size is 640x360 pixels, but more is possible). The main condition is that the aspect ratio must correspond to the proportion 16:9. For other sites, if the minimum image size is not specified, you can use the ratio 200x200 pixels.

Typically, you should select an image or frame from a video so that the user who looks at it will immediately click on it to view the full-size image or video. The main image can be easily reduced in size in any graphics editor. Yes, even in the same Paint, which is included in the standard set of Windows systems. But if you need to add additional effects, it is better to turn to professional programs like Adobe Photoshop.

When creating audio or video, appropriate editors are used. True, many experts recommend making an accompanying image consisting of several GIF layers). This attracts a potentially interested audience much more strongly. In this case, you will need several images, for which in special applications you can set the sequence of frame changes from pictures and the delay time between transitions.

Conclusion

Here is a brief summary of everything that concerns the term “preview”. What this is, I think, is already clear. Although in the classical sense this is a reduced image, the current interpretation in different areas of use looks much broader. It is quite difficult to advise which tools to use to create thumbnails, because everything depends on what semantic load will be assigned to them, how effective and attractive they should be, etc.

We've released a new book, Social Media Content Marketing: How to Get Inside Your Followers' Heads and Make Them Fall in Love with Your Brand.

A preview is a preview thumbnail that reflects the essence of the text or video on the site.

More videos on our channel - learn internet marketing with SEMANTICA

When you click on the preview, the document opens in real format. Previews are actively used on the YouTube website.

You choose a book in a store. To understand whether you want to read it, look at the abstract. She briefly explains what the piece is about. And you are already deciding whether to buy the book.

It's the same story with the preview. It succinctly shows what the full content will be about.

What is a preview for a video on YouTube?

Previews play an important role in the promotion of video channels. Most Youtube users look at the video preview first and then decide whether to watch the entire video. Psychology plays an important role in this: the human brain reacts more actively to texts supplemented with high-quality images. Therefore, to promote your channel, you need to make attractive preview pictures.

How to make a preview

Simple colorful image previews are created in a graphics editor (Photoshop, Paint and others are suitable). Previews are placed for video clips so that the visitor can understand the themes of their stories.

The resolution of preview images is 1280x720 pix, aspect ratio is 16x9.

For comparison, video clips with previews are highlighted in red rectangles. Other videos do not have a preview image, and one of the still frames is automatically set as the main image.

Now tell me, which videos look more attractive?

Correct preview characteristics

• The picture must correspond to the theme of the video. Do not deceive your viewers, as this is prohibited by the Youtube rules, and the disappointment of visitors may bring you or a complaint from the administration.
• Create a picture that will make your video stand out from the gray mass of others. Use attractive graphic effects (flashes, sparkles, etc.).
• If you are a blogger and want to gain popularity, place your photo in the preview. If the story is about something (for example, a review), post a photo of the subject of the review.
• Parts of the main images should not extend beyond the preview.
• Separate foreground and background. What is ahead should be bright and contrasting.
• Add catchy text describing the plot. It makes sense to add episode numbers to stories. Use large font.
• Don't use cliche phrases like "Brilliant actors" or "Best jokes." The text must be original and highlight the video clip.

How to install a preview

We talked above about which program you can use to make a preview picture. Some video hosting users think that an affiliate program is needed to install it on a plot. It's not obligatory! You just need to confirm your channel.

• Select “YouTube Settings” - “Advanced Features”.
• Click "Confirm" and enter the activation code in the field provided.

Channel confirmed. Now you need to install a preview image.

• Go to the channel and select "Video Manager".
• Next to the video, click “Edit” and “Custom Icon.”

Now you can download the finished image. Remember: the right preview image is the key to the success of the entire channel. It will help increase the number of views of each video story.

I think many of you have already faced the question of how to present your projects efficiently and beautifully. This could be required not only during the work process, but also to create your portfolio, the role of which has already been described in the article

A definite plus realistic preview layout is the clarity of the final result. Often, when a customer sees a layout saved in *.jpg format, he does not quite understand how it will look in the end, and may reject even very good ideas.

Think for yourself, what looks much more attractive: a flat image of a layout or a photorealistic picture of a finished product? I think the answer is obvious.

Therefore, my advice to you is to spend extra time to demonstrate the success of the solution to the task assigned to you. This is another “point” in your favor.

Don’t think that the preview will do all the work for you to convince the customer, it is very powerful auxiliary to defend and argue your position.

In this lesson I will show, using the example of a booklet with two folds, one of the ways to create template for making previews. Why a template? Because in the future it will be possible to use it to quickly create images of similar booklets.

So where do we start?

Step 1. Correct perspective.

It is very important for creating photorealism that when viewing a picture the thought does not arise that “something is wrong.” Therefore, you should be very meticulous in constructing the perspective of your product; it should look as natural as possible.

If you are a happy owner of an art education or are simply familiar with the laws of constructing perspective, then you can safely start drawing it. If you lack this knowledge, I suggest turning to image search engines or using a camera.

I chose the photo option: I laid out the booklets the way I thought they would look good, and took a photo.

Now open Photoshop and create a new document with the following settings:

We place the photographs taken on the workspace. In accordance with my idea, this is what I came up with:

Now we begin to outline our booklet. To do this, select a tool and check its settings: we must draw Shape layers given size (Fixed size)– 100x214 mm.

With a single mouse click we place our rectangle on the work area and transform it to the size of one side of the booklet. To do this, select the layer with the rectangle and press the key combination Ctrl+T and select from the context menu (right-click in the shape area) the item Distortion.

Next, combine the vertices of the rectangle with the corners of one of the booklet spreads and accept the transformation by clicking Enter. Now let's make the sides smooth. From the tools group Pen Tool choose Convert Point Tool, click on the outline of the shape to select it, select the node that we will edit and, without releasing the mouse button, drag it to pull out the control handles. Take a separate marker and holding down the Alt key, we adjust our outline to the outline of the booklet.

By analogy, we add two more sides to make a spread. To avoid confusion in the future, I created a “Spread” group and placed all the created layers there. Now we have the base of the booklet.

Step 2: Light and Shadow

As you know, without light and shadow there is no volume. So let's add a few effects to make future catalog pages look more realistic.

In the layers palette, right-click on one of the sides of the booklet and select from the context menu Blending Options, a window will open Layer Style. In it we select Drop Shadow And Gradient Overlay with the following parameters:

Copy the layer style to the two remaining sides using the context menu (right-click on the desired layer in the layers palette), while changing the angle of the gradient so that the shadow looks natural. For the central fragment it turned out to be 15°, and for the right one 19°. Also, for the right side, you need to edit the gradient a little so that the slider with an opacity value of 0% is shifted to the left. As a result, we get this image:

Now let's add a shadow directly under the booklet itself using the tool Pen Tool. In the settings, switch drawing from Paths, which is the default, to Shape layers and display something like this:

Move the created shadow under the booklet and rasterize it (right click on the layer and select the command Rasterize Layer). Choosing a tool Eraser Tool with clear edges, size approximately 40-50 px and opacity (Opacity) 30%, and make our shadow less saturated. Then we smooth its edges with the tool Blur.

Step 3: Smart Objects

Now let's create layers with editable content that can be changed in the future independently of the rest of the layout - the so-called smart objects (Smart Object).

Let's look at the tool again Rectangle Tool, you have saved its settings ( Shape layers given size (Fixed size)– 100x214 mm). With a single mouse click we place our rectangle on the work area and transform it into a smart object (right-click on the layer in the layers palette and select the command Convert to Smart Object).

Without removing the selection from this layer, click Ctrl+T and from the context menu (right-click in the shape area) select the item Distort. We combine the vertices of the rectangle with the corners of one of the booklet spreads. Without pressing Enter, call up the context menu again and select the item Warp. Using the control handles that appear, we make our layer close in shape to the selected side of the booklet. Accept the transformation by clicking Enter.

Having previously placed the smart object above the layer of the corresponding side of the booklet, change the blending mode of the smart layer to Multiplication and by calling the context menu, select the command Create clipping mask.

If the booklet does not seem to have enough contrast, you can add a little more shadow to the folds. To do this, copy the side of the booklet drawn at the very beginning, placing it above the corresponding smart layer, change the value in the layer properties fill (Fill) at 0%, turn off the shadow and edit the gradient as follows (the color of the gradient does not change):

Step 4. Let's make a mess

Now the only thing left to do is add the contents of the booklet. Double-click on the layer icon to open the smart object file and place the existing layout into it. By using Ctrl+S save the changes and close our file.

To prevent our booklet from hanging in the air, we make a backing for it. It is very IMPORTANT that the background matches the overall perspective. Therefore, it is best to choose something more or less neutral.

We save everything and enjoy the work done:

I hope this lesson will be useful for you. If anyone wants to get the source, I will add a download link. You can leave a request for this in the comments.

This concludes the article.