Cover for VKontakte group psd template. Cover for a group in VK: goals, use, technical aspects
Do you want to decorate your group on VK (Vkontakte) and create a unique header (cover) for it? In this article I will talk about what size and format it should be, how to add a header to VK, I will also post the PSD source ( photoshop format) template of the required size.
How to make a header (cover) for a group in VK?
What is a hat in a group on VK? This is just a picture, size 1590x400 and format - JPG, GIF or PNG. It is located at the top in the VK group and looks like this:
Step 1. Create an image of the required size.
First, we need to create the picture itself, for this I used Photoshop (Download the finished template in PSD format Can ). Open Photoshop, select “File” -> “Create” from the menu.
A window will appear where you need to change the dimensions of the image, the width will be 1590 px, height 400. Color Modes can be left as default. Click "OK"
I would like to note that the image may be larger size, when adding an image, VK itself offers to cut it to the size it needs. I don’t recommend adding anything above a width of 400 px; VK will cut off part of the picture.
As a result we will get blank slate, the size we need. Next, we draw what we want to see in the header and save our creation. My template looks like this:
Step 2. Change the header in the VK group.
Next, we need to upload our image to the VK group. To do this, go to our group, in the right top corner(under the group avatar) click “three dots” (...), from the drop-down menu select “Community Management”.
A window will appear asking you to upload an image, click “Select file”
We select our image and a window appears with the option to crop the image, since everything corresponds to the required dimensions, click “Save and continue”
As a result, we will see a message stating that the cover was successfully loaded, then we simply go to our group and admire the resulting effect.
You can change the header (cover) as many times as you like.
So we created our own hat for the group on VK.
You can also take one of the suggested templates in this article:
Promoting your own project (website) on a social network is now a popular and often profitable activity. A social network is that very “fishy” place where the flow of visitors will constantly flow like a river. Thus, you can increase the recognition of your own project completely free of charge. The most promising method of promotion on social networks, in my opinion, is adding VKontakte groups with their further promotion.
Why do you need to connect the menu?
Even at the stage of creating a VKontakte group, you need to take into account in advance what its “outfit” will look like and what exactly will be posted in it. In the end, the main goal is to gather a certain audience into your group...
As you may have guessed, the VKontakte menu is a kind of “enticement” to the group, so it should be colorful and as interesting as possible. In the future, successful graphics can play into your hands, multiplying your popularity and success many times over. Who knows, maybe in a year you will remember with tenderness how you just started your journey with decoration. Do you think it's difficult? Not at all, set aside just a couple of hours to create a unique menu!
To design the menu of an already created group, you will need the invaluable Photoshop program and you... This editor creates unique pictures. Take a suitable image with a width of approximately 380-385 pixels (the height is the number of items in the graphic menu of your group). Next, you need to open the image through Photoshop and use the tool to apply the planned menu items to the image. A little imagination when choosing a font, its color size will not hurt, but without going to extremes... It’s up to you to decide whether or not to crop the picture if there is empty space at the bottom. If the picture is meaningful, then you don’t have to shorten it.
The next step is to divide the whole picture into several small ones. In other words, you need to divide the picture into supposed menu items, in which each of them, when clicked on itself, will redirect the group member to another page, etc. It is possible to divide a picture for a future menu using the unchanged “Cutting” function in the editor Photoshop images. Of course, you can use ready-made templates, fortunately, now there is nothing difficult in downloading the one you like and applying it.
After “dividing” all the pictures, you should have several images that need to be uploaded to the album of a pre-created group. Don't forget to restrict access to the album so that the menu doesn't accidentally break. Anything can happen... Finally, go to the menu editing page (on the same page!) and follow this recommendation immediately.
So, go to the group and opposite the inscription “Latest news” click the “Edit” menu. In the window that appears, you will need to insert the wiki markup code. For a graphical menu, this code would be as follows:
[], Where
nopadding – inserted so that our menu does not contain spaces;
When one such line is inserted into the wiki markup editing window, the first item of our graphical menu will immediately appear, but it will only be the first! To carry out full procedure To add all the graphic menu items of our VKontakte group, you will need to insert the above code as many times as the number of images we initially prepared. Accordingly, each time, the link to the photo (our image) will be different and the path will also differ from the previous one.
After completing the entire process of inserting and editing the corresponding wiki markup codes, we confirm our changes with the “Save” button and, of course, view the newly created masterpiece - graphic menu VKontakte groups.
Examples of design of popular VKontakte groups
Examples of how to design VKontakte groups can be given for hours. For example, for animal lovers it looks like this:
and for fans of popular online games CS it will be like this:
Also popular are groups of all sorts of funny jokes or funny killer comics. In a word, to each his own!
Brief information about wiki markup
As you already know, wiki markup VKontakte, which I wrote about a little earlier () is a kind of system for editing pages in groups and which is supported by news descriptions. Markup allows group members to collectively create countless cross-referenced pages. In groups you can create mini-encyclopedias and even entire libraries, as well as exchange various links to photos and videos.
If you really want to master the science of creating multifunctional and colorful contact groups, then join the group: http://wiki.vkontakte.ru/, where "tons" are contained useful information... In addition, he will be an excellent adviser installed application http://vkontakte.ru/app1755280 , where excellent video tutorials on wiki markup are presented.
Create “live” graphic menus with original design.
The better designed your group is, the more attention it can attract. If we are talking about working with the commercial community, then the design should be worked out thoroughly. The fact is that the beautiful design of the VKontakte group increases trust in the community from subscribers, and also increases the conversion rate of new members joining. In the article you can find out what it is. New members equal new orders and sales. More people- that's more money.
One example of how changing the design of a group has made it possible to increase the growth of subscribers is a public page dedicated to healthy eating - vk.com/goodiet. Various recipes are published here for people who play sports and watch their diet.
On at the moment the community has more than 360,000 subscribers. On initial stages its development, the group’s administration did not pay much attention to the design of its site.
The community developed through the publication of juicy photographs and correct articles, as well as through advertising in other public pages. Here is an example of deliciously designed content from their group.
vk.com/goodiet – These are delicious chicken cutlets made from cabbage. Healthy nutrition for sports.
The average cost per subscriber was probably 3-4 rubles. Upon reaching the first 50,000 participants, the administrators decided to change their design and ordered a cover and avatar from the designers.
Thanks to this, the percentage of conversion to subscribers has increased, and the price per participant has also decreased to 1.5 rubles.
Group registration
Before you start designing your community, you need to know what is included in the group design.
Cover
One of the main design elements. The cover creates the first impression of the band. Therefore, it is important to pay great attention to its creation.
Avatar design when creating a group
The second most important design element. In the new cover design, the avatar is almost invisible. But this does not mean that you should not bother creating it.
When you click on the ava, it opens in a new window in full size.
If you use the classic design style without a cover, then the avatar is displayed like this:
Menu design
Very useful tool to navigate through the public. Very often used in commercial groups or communities that need to separate content into categories. For example, the menu is very useful in book publics.
Product cards
Used in public pages selling goods or services.
Today, 90% of groups use the new format with cover art. If you also prefer this style, then pay great attention to creating a beautiful cover.
How to change the design of a VK group?
First of all, decide which elements you will change.
If you want to install new cover, then go to the community management menu.
In the “Basic Information” window, click on the “Download” button next to the “Community Cover” section.
After the cover is installed, let's move on to adding a new avatar. To do this, hover your mouse over the avatar area and click on the download button.
Select the desired photo from your PC.
To set an image for a product card, you first need to enable them in the community settings.
To do this, go to the management section and open the “Partitions” menu.
In the menu that opens, enable the products section.
Set the image.
Optimal sizes
Cover – 1590x400 pixels.
Avatar – 200x200 pixels.
Menu banner – 510x510 pixels.
The image for the product card is 834x 834 pixels.
Ready-made cover and avatar templates for designing VKontakte groups
If you don’t want to spend time creating a design and money on a designer, then you can download templates for the new design of VKontakte groups in psd format.
Let's look at the 5 most popular sites where you can find templates:
- FreePSD. Public VK, the author of which posts group design templates for free download. Here you can download psd sources for most popular topics and change them to suit your style.
- You –PS.ru. Website where they are posted free templates covers, avatars and menus for VKontakte. Also, here you can find detailed lessons on working with sources in Photoshop.
- Erohovec.ru. A large selection of templates for the new VKontakte design for most popular topics.
- All –For –Vkontakte. The site provides a huge selection of images for menus, avatars and banners.
- Freepsd templates. Another public page on VKontakte, where templates for covers, banners, avatars and posts are published on a regular basis.
Editing templates
After the design templates have been downloaded, you need to understand how to edit them. For this we need Photoshop program, because it is she who works with the psd format.
Launch Photoshop, open the "File" menu and select "Open".
Open the desired source from your computer.
Since we are using a template, all we need to change are the text elements.
To do this, select the tool with the “T” icon and click on any of the text elements.
Enter your text.
An example of creating a banner.
After you have completely completed editing, save the result in png or jpg format.
To do this, open the “File” menu and click on “Save As...”.
In the window that opens, change the file type from psd to the one you need.
Possible problems
You may have difficulties while creating the design, so you need to consider possible problems when working with group design.
Poor image quality
A very common problem is when, when creating an avatar or cover, users use low-resolution images and stretch them to optimal sizes. Try to use photos with a resolution of 1280x720 pixels or higher as your main background photo.
Lack of ideas
If you don’t know exactly how best to design a community, then look at a few examples of competitors. Try to get inspired and find interesting design solutions. The main thing is not to copy all their elements, because any design should be unique.
Bottom line
As a result, it is worth noting that the design of a VK group is the most important part of promotion. Beautiful design can increase conversion on entry, as well as increase the trust of subscribers.
To create a high-quality cover, avatar or menu, it is not necessary to seek help from professional designer, you can always use free templates.
Beautiful design of the VKontakte community is not a whim, but an important element that builds user trust in you and your company. If a public page or group is designed unprofessionally, your potential clients may quite logically conclude that you are equally negligent in your work. To prevent this from happening, make sure that your VKontakte page is beautiful, neat and easy to use. How to do this? Read below.
Current sizes of VKontakte images
Some time ago, the developers of the social network VKontakte launched new design. This led to changes in the size and principles of image display. The memo, which will be given below, corresponds to all innovations and contains the sizes that are relevant at the moment.
Now let's go into more detail on each point.
VK avatar size
The minimum avatar size is 200 by 200 pixels. If you try to upload an image that is less than 200 pixels wide or long, you will see an error like this:
The maximum avatar size is 200 by 500 pixels. But, in principle, you can upload larger images – up to 7000 pixels on each side. The main thing is that the aspect ratio does not exceed 2 to 5.
I'll show you with an example.
I have an image. Its size: 200 by 800 pixels (ratio 2 to 8). There are no errors when loading. However, I still cannot use this image, because “Contact” does not allow me to select it completely.
Cover
The cover size for the full version of the site is 1590 by 400 pixels.
Please note: in mobile version and applications, not the full version of the cover is displayed, but only a part of it measuring 1196 by 400 pixels. See how it is cropped in the mobile app:
To prevent this from happening, position the main elements of your cover within 1196 by 400 pixels.
Attached images
In the updated design of Contact, the width of the news feed has become fixed. This means that the images attached to the post are no longer stretched, but remain as they are. Therefore, if you want your image to fill its entire space in the news feed, its width must be at least 510 pixels. It is best if it is a square or rectangle in landscape orientation.
It sounds a little confusing :) So I’ll show you with an example.
Let's say we have a square-shaped image with sides of 510 pixels. If we attach it to our post, it will look very good in the news feed on all devices:
And this is what a horizontal image looks like in landscape orientation (width 510 pixels):
As you can see, the narrower the image (in height), the smaller it looks in the smartphone feed. To see this, look at the picture below:
It is clear that the difference here is not particularly critical, and smartphone users will still look at your image, it’s just that in the second case they will be a little more comfortable.
Images for posts with links
All this data comes from the Open Graph markup code:
If Open Graph is not specified, the title is taken from the Title meta tag, and the image from the article. At the same time, you can easily change it - or select another image from the article using special arrows:
Or upload yours:
The minimum size of an image that you can use as an announcement for your article is 537 by 240 pixels. However, you can upload larger images as long as the proportions are maintained.
Image for an article created in the editor
The image size for the cover of an article created in the editor is 510 by 286 pixels. It is better if it is dark in color and more or less monochromatic, since the name of the article and community is lost on a light background.
Good example:
Not a very good example:
Photo and video size for stories
The size for photos is 1080 by 1920 pixels. The size for the video is 720 by 1280 pixels.
Technical specifications for video recordings:
- up to 15 seconds;
- no more than 5 MB;
- h.264 codec;
- AAC sound.
Stories must use vertical format photos and videos.
Please note: stories on behalf of communities can currently only be added by large communities for which the VKontakte developers have opened this function. And this is done with the help official application. This cannot be done from a computer.
Photo album cover size
Video image size
1280 by 720 pixels.
Wiki page
The content area width of a wiki page is 607 pixels. If you upload a larger image, it will automatically upload at 400 pixels wide. Example: I have an image measuring 1366 by 768. If I add it to the wiki page, this is what it will look like:
To change the size of a picture, you need to click on it and set the desired values:
I will talk in detail about how to work with wiki pages below. Therefore, we will not dwell on this point here.
How to make sure that VKontakte images do not shrink? The influence of background and size on picture quality.
If you've ever tried to upload VKontakte images (it doesn't matter whether it was an avatar picture or just a photo from your trip), then you probably already know that they tend to shrink. This is especially noticeable on a dark (and especially red) background and when the picture is not very large size. Example:
How to make sure that the quality of the pictures does not deteriorate?
To prevent the image from shrinking (or rather, shrinking, but to a much lesser extent), it is necessary to make it 2-3 times larger than the desired size. For example, if we need to make an avatar with a size of 200 by 500 pixels, we take a picture with a size of 400 by 1000 pixels. If you need to make a menu with a size of 510 by 400 pixels, take 1020 by 800.
The image on a dark blue background, which I showed just above, has a size of 510 by 350. I made it twice as large (1020 by 700) and saved it. Here's what came out of it:
How to fix this? The answer is very simple - you need to choose a different background. The point is that on dark background pixels are visible better than in light mode. Therefore, if you want to achieve perfect quality(although the picture above already looks quite normal), then you need to slightly change the color scheme. For example, make the background white and the text blue:
How to design a page header
Your hat public page or groups - this is the first thing that users who come to visit you see. In most cases, a navigation menu based on public materials is placed in this place, some interesting posts or important announcements. Let's look at examples of how different companies are using this space.
Cover
Not long ago, VKontakte introduced an update - now you can upload large and beautiful covers (1590 by 400 pixels) to pages. To do this, go to settings and click the "Download" button.
On the cover you can place anything you want: from the name and motto of your company, to all kinds of promotions, offers and even competitions.
I recommend paying special attention to the possibilities of a dynamic cover. Read our article about how it works, for what purposes it can be used and with what services it can be installed.
Examples of dynamic covers:
Cover + community description + website link
Some companies specifically do not pin any posts in the header so that users have the opportunity to read basic information about the page and immediately go to the site.
Description with hashtags
Some companies add standard description page hashtags that characterize it. This is done so that the page has clearer relevance, and due to this, it is higher in the search for relevant queries. Honestly, I don't know if this method works or not. I haven’t seen any cases on this topic, so if anyone knows, I’d be grateful if you could share the link.
Pinned post telling what the page is about
If you want to tell about your page in more detail (with photos, links and beautiful layout), then you can attach a wiki post or an article made in the editor to the header, with a bright picture on the announcement that will encourage users to click on it. An example of such a post:
And this is what the user sees after he clicks on the link:
Group menu is open
I call an open menu a menu that immediately shows what items it consists of. That is, the wiki post announcement picture completely duplicates its content. Thus, users immediately see what awaits them inside. I'll show you with an example.
This is what a pinned post looks like in the Flatro page header:
Group menu is closed
A closed menu is the same wiki post as in the previous paragraph, only the announcement contains a picture with no menu items. Usually they write on it: “Menu”, “Navigation menu” or “Navigation through public materials”.
And this is what we see when we click on it:
By the way, it is worth noting that these are far from the only options. Basically, you can write whatever you want on this picture. The main thing is that the user wants to click on it, and he understands what awaits him after that. Example:
Merged menu for a group
A merged menu is when the picture on the announcement of your menu forms one image with the avatar. Below I will tell you in detail how to make such a menu, but for now just look how beautiful it looks.
GIF and avatar in one image
But this design option for the hat really delighted me. The automatically played GIF merges with the avatar into a single composition and attracts the attention of users, even though there is no information on it at all.
By the way, I spotted this example in the group of SMM marketer Sergei Shmakov. So, I express my gratitude to him for the find :)
Hidden menu
The hidden menu is only available for groups (pages do not have this functionality). To see it, you need to click on the appropriate link. The advantage of this design method is that users can see the main information of the community, and if they want to use the menu, they only need to make one click. However, there is a small disadvantage here - not all users know about the existence of this function, so your menu may receive less attention than if it were pinned at the top of the page.
Auto-playing video
At the end of November 2015, an interesting innovation appeared on the VKontakte social network - as soon as a user visits your page, the video attached to the header begins to play automatically. With this technique, you can attract even more attention from users (especially those who visited your page for the first time), and at the same time, do not irritate those who do not like having their content imposed on them, because the video plays without sound and practically does not interfere .
How to add such a video to the header of your page?
To do this, three conditions must be met:
- Attach the video to the post and pin this post to the top of the community.
- Apart from the video, nothing else should be attached to the recording. Only video and text optional.
- The video must be uploaded to VKontakte - third-party players are not supported.
A post that gets a lot of shares
Another way to productively use space in the header of your page is to pin one of your most successful posts to it - one that has already gained and continues to gain large number likes and shares. Why do this, I think everyone understands - the more reposts, the greater the reach, the more subscriptions the page receives.
Announcements of new videos, albums, events
Presentation of new products/services
Discounts and promotions
Cases, customer reviews
Application advertising
Draws
Community Rules
Links to other social networks
I have not listed all the header design options. Basically, you can put any kind of information on your cover page and pinned post: job openings, announcements, links to top-selling products, etc. So don't limit yourself to the examples above. Use your imagination and use the design of your community to achieve your goals.
What should an avatar be like?
An avatar is not only a beautiful image with your company’s logo, but a marketer’s working tool with which he achieves his goals. Let's look in detail at what it should be like in order to attract the attention of users and encourage them to perform the target action. Let's start with the miniature.
Avatar thumbnail
- The text on your avatar thumbnail should be large enough to be read.
- The text should not extend beyond the thumbnail.
- Users should understand what is shown on the avatar.
- If possible, it is better not to use stock images, as they often reduce the credibility of the company.
- It is undesirable for the avatar thumbnail to be too faded and boring, otherwise it will be lost against the background of brighter avatars of competitors.
- If you want your avatar to look modern, make it in a minimalist style: less text, shadows, gradients and elements that do not carry any semantic load. Your avatar should be as simple and neat as possible. This style is currently trending.
- If your goal is to attract the attention of users and stand out from other avatars in the feed, you will have to use your imagination. Think about what you yourself pay attention to when you are looking for interesting communities? For example, I have repeatedly been attracted to avatars with a burning light, which usually indicates that a new message has arrived. This is a very old technique, but for some reason it still affects me - when I see such a light, I will definitely keep my gaze on it.
I'm not saying that this technique will work on your page. The point I want to get across is that there are many, many ways to stand out, you just have to ask yourself and be a little creative. For example, here's another one interesting idea, which I would hardly have thought of myself:
The avatar is a black circle: large and small. It would seem, why do this at all? But when you scroll through the list of communities, such avatars attract attention because they are very different from all the others.
What information can be placed on an avatar thumbnail?
Even though the avatar thumbnail is very small, it can (and should) be used to attract followers to your community. How to do this? Let's look at a few options:
Announcement of a new product/service/event
Advantages of the company/service/page
Company phone number
Favorable prices
Free shipping
By the way, very often information about what a company provides free shipping, are added to the group name itself so that users definitely pay attention to it.
Stock
Competitions
Vacancies
What should the avatar itself be like?
I looked at what the avatar thumbnail should be and what text could be placed on it. Now let's move on to the avatar itself. Full version The avatar will only be displayed in the community in which the cover is not installed. It is for such cases that I wrote this section. So, what should your community’s avatar be like so that users immediately understand that your company approached the creation of the page responsibly and professionally.
- The avatar must be of high quality. I wrote about how to achieve this a little higher. For those who missed this part, I'll tell you briefly - the size of the avatar should be 2-3 times larger than what you planned.
- It is desirable that the avatar be combined with the menu: it is the same color range, had the same fonts, elements, etc. This will make your page header look cleaner and more professional. Example:
- The avatar itself and the avatar thumbnail may be different. For example, you can draw a circle on your avatar, design it the way you like, select that area as a thumbnail, and design the rest of the avatar in a different style.
- In order to encourage users to subscribe to your page or write a message to a company representative, you can place a corresponding call to action at the very bottom of the avatar and accompany it with an arrow pointing to the button.
- Try not to put too much information on your avatar, otherwise it will look overloaded and untidy. Add only the most important points to it and be sure to make sure that there is “air” between them.
Another option is to divide the avatar into two parts. One is for the miniature, and the second is for the rest of the avatar.
What information can be placed on an avatar?
Basically, you can put anything you want on your avatar. Unlike the miniature, there really is room to roam around here. The main thing is don't abuse it :)
Site domain
Phone/address/opening hours
Competitions/promotions
Most purchased products/new items
Delivery information
Mobile app advertising
The main advantages of the company/page/product, etc.
Assortment update/new creativity, etc.
Information that your community is official
Information about upcoming events
Addresses of accounts in other social networks
Extended page description
Brags
In general, you can place absolutely any information on your avatar. I've just included a few ideas so you can see what others are doing and get inspired. Well, keep the basic recommendations in mind: the avatar should be of high quality, the font should be large, and there should be more “air” between the elements.
How to create a seamless avatar and menu
In order to make a merged avatar and menu, you will need Adobe program Photoshop or its equivalent. I will explain the whole process using Photoshop as an example. So, let's go.
- Download the Photoshop template that I specially prepared for this article. In normal size (menu – 510 pixels wide, avatar – 200) or enlarged (menu – 1020 pixels wide, avatar – 400).
- Open the image you want to use as a base.
- Copy it, paste it into the template and position it the way you would like to cut it.
- Add effects, text, graphics, etc.
- If you don't want to lose part of the image (in that 50px gap), move it to the right as shown in the following GIF:
- Select the “Cutting” tool and click on the “Fragments along Guides” button.
- Remove unnecessary fragments (right mouse click – “Delete fragment”) and edit existing ones (right mouse click – click in empty space– take the desired area and stretch it to the desired size).
- Go to the "File" section and select the "Save for Web" command.
- Go to the location where you saved the pictures (desktop or some specific directory) and find a folder called “Images”. This is where your images will go. Now all that remains is to fill them in on the page.
P.S. The height of the avatar can be changed at your discretion. I took maximum size– 500 pixels, but your value may be less. For example, as on the “Wiki Markup” page:
How to use widgets
Widgets are also part of the design of the VK community. Using them, the user can: place an order, subscribe to your newsletter, take part in a competition, read and leave reviews, open a search in the community, receive a gift, a discount coupon, etc.
Here are some examples of what widgets look like on the VKontakte page:
How to design images for posts
If you are involved in web design or have artistic taste and a sense of beauty, then it will not be difficult for you to come up with corporate identity for your images. However, it seems to me that such people will be in the minority in this article (I, by the way, am not one of them either). Therefore, let's take a closer look at how this is done, based on examples of successful companies.
By the way, please note that almost all well-known VKontakte companies brand their images, that is, they add a small logo, the address of their page or a watermark. This increases brand awareness and protects your images from being copied. Whether it is worth doing this is up to everyone to decide for themselves. The only thing I would like to advise is: if you decide to do this, try to make sure that your logo is not too bright and does not take up too much space, otherwise all the emphasis will go on it, and the image will lose its attractiveness.
Where can I get good images?
We have a good article on this topic on our blog - “”. They are all free, but some require registration. If you don't find anything suitable for yourself, try searching by keyword+ wallpaper (or, if in English, wallpaper). Typically, this type of request results in high-quality images. But here you need to be careful and check the type of license, otherwise, if you have a serious business, you can run into trouble.
What should those who do not know how to work in Photoshop do?
If you have never worked in Photoshop (or any other graphic editors) and are not yet ready to devote time to mastering it, you can use services that already have ready-made templates pictures for different social networks:
1. Fotor.com
After that, on the left side of the screen, select the template that interests us. Please note that only those templates that do not have a diamond icon are provided for free.
We insert it into the template, select it with the left mouse button, select the Layer command (sandwich icon) and click Move to bottom. This way our picture will go in the background, and all the inscriptions will be superimposed on top of it.
After that, we change the text, font, font size, position of the inscription, etc.
Then click on the floppy disk icon, select the name, image format, quality and click on the Sign in to download button.
2. Canva.com
Another service that will help you beautifully design your image. It works on the same principle as the previous one. Register in the service (you can use your Google account+ or email).
Choose your field of activity. We skip the step where you are asked to invite friends. We get to the main menu, where we select a Facebook post if we need a rectangular photo, or an Instagram post if it’s a square one.
Select a template (if the template is marked “FREE,” it means it’s free), change the text.
If necessary, upload your image, adjust the dimensions, change the text, font and location of the inscription. After that, click the “Download” button, select the image format and save it to your computer or any other device.
How to format articles in the editor
Recently, VKontakte has made it possible to type up articles in a special editor. To create an article, you need to click on the letter “T”:
How to use wiki markup
Well, here we come to the most interesting and at the same time difficult section. Perhaps there are people among the readers who do not know what wiki markup is and are hearing this term for the first time. Therefore, especially for you, I will give the definition that “Contact” itself gives.
Wiki markup is a markup language that is used to format text on websites (usually classified as wiki projects) and makes it easier to access features HTML language. On our website wiki pages - good alternative regular posts and text navigation. If you need to create big article with different text formatting ( bold type, underlining, headings, etc.) or add graphics to it, or simply create a colorful navigation menu for your community - a wiki is irreplaceable.
Just like Wordpress (or any other CMS) has an HTML editor with which you create articles, Contact has its own editor for creating and editing wiki pages. It looks like this:
Using this editor you can create navigation menus, as well as articles with pictures, videos and audio recordings. Below I will discuss in detail how to work in this editor, but first I ask you to bookmark two links. They will help you a lot in learning wiki markup.
Cover for the VKontakte group – new element group design after redesign. It seems like it should be easy to take one image, but at the same time find ideal option quite difficult.
The VKontakte cover is one of the first things people will see when visiting your group. That is why it is so important to make a good impression on the visitor, convey a clear understanding of the group’s theme and interest.
In April 2017, it became available to communities. This is absolutely new feature and a great opportunity to revive (in the truest sense of the word) the design of your group in order to increase the efficiency and impact of promotion.
You will get three things from this article:
- Cover size for VKontakte group;
- Instructions on how to create a VKontakte cover and how to choose the perfect picture;
- Examples of groups with high-quality covers.
What size is the cover for a VKontakte group?
The optimal image size for a VKontakte cover may vary. On computers, the cover image is displayed at 795 pixels wide and 200 pixels high. On mobile phones it adjusts proportionally to the width of the screen. However, VKontakte recommends uploading a picture with a size of at least 1590x400 pixels.
Advice: If you find an image you really like, but its proportions are not the recommended ones, you can still use it! By uploading this picture, you can select the visible area and trim off all unnecessary parts using VKontakte’s internal tools.
When developing your cover design, keep in mind that mobile devices with a screen width of less than 400px, it is cropped at 196px at the edges of the image, also approximately 83px is occupied system icons phone. Consider convenience for mobile users. On VKontakte these are the majority.
Make sure that the text on the cover is legible on the screen mobile phone when the cover adapts to its width. Also check that important elements menu icons and personal messages are not hidden on the cover.
Below is a visual example of what the cover looks like on a computer, and the dimensions from the edge to the active elements of the group are indicated.
![](https://i2.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-02-razmery-oblozhki-dlya-gruppy-vkontakte.jpg)
How to make a cover for a VKontakte group
If you have any design skills, create your own cover from scratch using software, such as Adobe Photoshop. Choice this path will allow you to create a design for your business the way you imagine it.
If you don’t want to buy and learn Photoshop, then use online services. Here . At the moment this is the most popular service.
Cover templates for VKontakte group
In order to help you with design development, we have created a template for the cover of a group in VK (1590x400px).
Let's talk about a few additional details about working with our template:
- When you open the template you will see appearance your design. You don't have to upload the cover to the group to evaluate how it looks.
- To create your own cover, double-click on the “cover” layer. This will take you inside the smart object.
- Then you can start creating, all sizes are indicated inside.
![](https://i2.wp.com/homework-cool.ru/wp-content/uploads/2017/05/kak-oformit-gruppu-v-VK-po-prodazhe-odezhdy.jpg)
You can download this and other templates in the article:.
Your photos
We understand that everyone cannot be a designer. But this does not mean that not everyone can have a beautiful VK community cover. Here are some places you can look to create your header, as well as some tips to show that this approach can make sense for you and your business.
For example, if your group is about books, then you can take a photo of your bookshelves and use that photo as the cover photo. This will hint that you're into books, and you can expect other book fans to respond well to the photo.
![](https://i2.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-03-oblozhka-vk-knigi.jpg)
Stock photos
If you don't have any personal photos you'd like to use, look for them on stock photo sites. free images), there you can find the perfect image for the cover of the VK community. My favorite sites to search beautiful photos are Unsplash and Pixabay.
I would like to encourage you to modify/enhance all selected photos to make them more personal. You can use the tools of online editors Fotor, Pablo or Canva. If you want, you can even improve your photography with these tools. For example, choose one of your favorite quotes and add it over the photo.
How to choose a cover
Now that we know how to make a cover for a VKontakte group, the question is what content to choose for it? Are there photos that work better than others?
Let's look at some important points:
- Maintain the required cover dimensions (1590px width and 400px height);
- Choose high quality images;
- Don't overload the image with visual elements;
- Choose a cover image based on general design VKontakte groups;
- Use images that are original and relevant to your brand.
What type of images attract people
Here are some components that make images captivating:
- Emotions: feelings make people act;
- Relevance: including what suits the interests of your audience;
- Colors: choice the right colors leads to increased conversion;
- Typography: Choosing the right font makes your message clear;
- Hashtags and text: find the right words that will provoke your audience to take a targeted action.
These components can be used when creating a VKontakte community cover to make people feel a certain way or take specific actions.
For example, Coca-Cola uses the common red logo on the cover with the caption “taste... feel”, and as a background a happy couple holding a drink. This is, of course, in the hope of getting people to make some kind of connection in the mind that drinking cola means happiness. And it's effective!
![](https://i1.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-04-oblozhka-vk-coca-cola.jpg)
Where are people looking?
When coming up with the perfect cover, it can be interesting to look at some research. I managed to find something interesting on this issue. It is in English, but I will briefly convey the essence.
It has been found that if you want to draw attention to a specific element in an image, then, using the principle of visual queue, the gaze of the person in the photo looking at the element will direct the viewer to that place. It could be in an interesting way using a person's perspective in the cover for a VKontakte group.
![](https://i2.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-05-visual.jpg)
Kissmetrics also found that adding an element that “pops” in the cover can be effective. The important thing is that there should be one such element and one that calls for action.
In the example below, Electronic Arts knows this and makes it clear to people that they can buy the new FIFA17 game.
![](https://i2.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-06-oblozhka-vk-fifa17.jpg)
Thinking outside the box
Covers for the VKontakte group have become in a great way express yourself, a way to stand out. Here are some original ways.
![](https://i0.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-07-oblozhka-vk-startap-vcru.jpg)
![](https://i1.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-08-oblozhka-vk-igromania.jpg)
![](https://i1.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-09-oblozhka-vk-makeupdays.jpg)
![](https://i2.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-11-oblozhka-vk-bz-molodost.jpg)
![](https://i1.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-14-oblozhka-vk-flat-design.jpg)
Examples of groups with high-quality covers
Now that we know how to do good cover for the VKontakte group, you can take a look at some pages that use high-quality and simple images. We hope you find some inspiration in them.
![](https://i0.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-12-oblozhka-vk-business.jpg)
![](https://i1.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-13-oblozhka-vk-warner-bros.jpg)
![](https://i2.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-15-oblozhka-vk-sci-one.jpg)
![](https://i0.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-16-oblozhka-vk-businessgazeta.jpg)
![](https://i2.wp.com/homework-cool.ru/wp-content/uploads/2017/03/wp_img-17-oblozhka-vk-cds.jpg)
Because we now do custom work, we will be able to answer your questions about the design of social networks if you have them. Feel free to send them to our email or write them right here in the comments. Together we can make the perfect cover for your VKontakte group and increase the impact of your efforts to promote it.