Conception de boutons. Nouvelle tendance du web design : les boutons de contour. Décrire les éléments dans la conception de pages Web

Bonjour, chers lecteurs de mon blog. Dans l’article précédent, nous avons appris comment créer quelque chose de charmant. Passons maintenant à la deuxième partie. Nous allons créer une belle image unique pour l'avatar et réfléchir à une transition efficace.

Si c’est la première fois que vous visitez mon blog, vous n’êtes pas obligé de commencer par la première leçon. Vous pouvez d'abord lire cette publication et commencer à concevoir, à partir de cette étape. Maintenant, je vais vous dire comment faire beau groupe VKontakte, dois-je l'utiliser ? fonctionnalités supplémentaires, vous pourrez décider plus tard.

À la fin de cet article, vous aurez une image impressionnante et unifiée.

Méthode pour les paresseux

Afin de ne pas distraire des sujets importants ceux qui savent déjà tout faire, qui sont pressés ou qui ne veulent tout simplement pas s'embêter, je peux proposer un tutoriel vidéo. Il vous dira comment faire la même chose dont je vais parler, uniquement sans Photoshop via le service www.vkprofi.ru .

Je ne l'ai pas utilisé et je ne peux pas dire s'il est payant ou non. Je serais reconnaissant à ceux qui vérifieront ces informations et laisseront un commentaire sur cet article avec une réponse à cette question brûlante.

Pour ceux qui veulent apprendre

Si tu décides de rester et de partir le long chemin, alors un travail passionnant vous attend. Cela sera très utile si vous commencez tout juste votre parcours dans le commerce en ligne.

Vous apprendrez de nombreuses astuces que je vais vous apprendre recommandations utiles sur le travail avec la publicité, et vous acquerrez également des compétences et une expérience utiles.

Vous aurez besoin...

1. Photoshop.
2. Image de base.

La photo doit être grande et de haute qualité si vous recherchez moteurs de recherche, puis faites attention à votre fond d'écran. Si vous travaillez pour une communauté sympa, notamment liée aux affaires, alors je vous recommande d'utiliser le service https://ru.depositphotos.com . Vous y trouverez des images publicitaires.

Choisir une image qui fera la promotion d’un produit n’est pas si simple. S’il est utilisé pour le monde des affaires, il doit répondre à de nombreuses exigences. Tout le monde ne comprend pas cela. Si vous faites la promotion d’un hôtel, d’une auberge, d’un bar ou d’un club, il n’est pas recommandé de prendre des photos de chambres vides.

Tout d'abord, il ne faut pas vendre un endroit où une personne peut s'asseoir, mais montrer les émotions qu'elle ressentira en visitant l'établissement. La beauté des intérieurs ne surprendra personne de nos jours. Il faut créer une atmosphère unique dans laquelle l'acheteur aura envie de se plonger.

Personne n’aime les photos usées. S’ils sont utilisés tout le temps, les chances d’obtenir des clients diminuent. À propos de la qualité, du réglage correct de la lumière, etc. Je ne parlerai même pas. J'espère que vous comprenez déjà cela. Les options comme sur la photo ci-dessous n'existent plus depuis environ 5 ans.

Depuis expérience personnelle... sur l'un des projets, j'ai travaillé avec un directeur de publicité très cool. Nous avons démonté chaque photo pièce par pièce. L'objet doit être à une certaine distance du centre, selon un angle spécifique, de préférence dans la plage optimiste correcte.

Nous avons dû changer la couleur du cadre dans lequel le tableau était accroché dans le coin le plus éloigné ! Au début, je pensais que tout cela n'était qu'un problème inutile, mais ensuite ils m'ont montré la conversion après avoir travaillé avec des petites choses similaires à des fins de comparaison.

Créer un modèle pour un futur beau groupe

Ainsi, lorsque tout est prêt, vous devez décider des dimensions et préparer un modèle pour la future image. À propos, si vous apprenez à procéder ainsi, vous pourrez ensuite utiliser cette technique pour de nombreuses autres tâches et créer d'incroyables images VKontakte. Vous comprendrez bientôt de quoi je parle.

Alors, ouvrons le contact. Si vous recherchez tailles standards Publications VKontakte, vous verrez 200x500 et 700x500. Cependant, si vous utilisez une règle, vous pouvez vous assurer que les vignettes ne correspondent pas à ces indicateurs. Le service les compresse lors du chargement.

Tout est pareil avec la photo sur l'ava, elle fait vraiment 200x500.

Avec le jeûne, tout est différent.

Dans tous les cas, vous avez besoin ou téléchargez le modèle que j'ai préparé, ou prenez votre propre capture d'écran. Je vous conseille de choisir la deuxième option. Pourquoi? De cette façon, vous pouvez créer vos propres modèles pour différentes tâches. Par exemple, si vous avez une galerie de produits ou des « Dernières nouvelles » affichées sur votre page principale.

Mon option ne convient qu'aux publications épinglées. La méthode de conception la plus simple et la plus populaire.

Ouvrez votre groupe ou tout autre groupe dans lequel une publication avec une photo est épinglée en haut. Comme dans mon dessin. Vous pouvez également prendre cette photo en faisant un clic droit dessus et « Enregistrer sous… ». C’est vrai, je ne suis pas sûr que tout se passera bien pour vous à la fin. Avez-vous le temps pour une expérience ? Partagez vos résultats dans les commentaires.

Pour les autres instructions étape par étape sera différent. Tout d'abord, agrandissez l'image dans le navigateur à 100 % (cliquez sur Bouton Ctrl et déplacez la molette de la souris). Franchement, je ne comprends pas particulièrement pourquoi cela a été fait, mais lors de ma première tentative, précisément à cause de l'ampleur, cela n'a pas fonctionné.

Appuyez maintenant sur le bouton PrtSc. Il est situé dans la toute première rangée du clavier, après les innombrables « F ». Après avoir cliqué dessus, rien ne se passera. Tout va bien, vous n'avez pas besoin de cliquer 100 fois, ouvrez Photoshop.

Cliquez sur Ctrl+V, vous collerez ainsi votre écran dans le champ de travail du programme. Maintenant, prenez l'outil " Sélection rectangulaire"et travaillez avec le bloc de gauche.

Guidez directement le long du bord de l’image. Vous ne devriez pas avoir l'image ci-dessous. C'est faux.

Déplacez-vous strictement le long du bord.

Saisissez le curseur vers la gauche coin supérieur rectangle et mène vers le coin inférieur droit. Afin de ne pas vous tromper avec une loupe, utilisez le grossissement à l'aide du bouton Alt et de la molette de la souris.

Appuyez maintenant sur Ctrl+J. Cela transférera le fragment sélectionné vers nouveau calque, il apparaîtra au-dessus de l'arrière-plan.

Il faut faire la même chose avec l'avatar. Sélectionnez et déplacez vers un nouveau calque (Ctrl+J)

Lorsque vous transférez vers un nouveau calque, l'arrière-plan doit être actif, et non celui que vous venez de créer. Assurez-vous qu'il est mis en surbrillance.

Ensuite, vous pouvez vous débarrasser de l’arrière-plan. Cliquez sur le cadenas à côté de ce calque, cela vous permettra de le manipuler.

Faites glisser le calque vers la corbeille comme fichier régulier depuis le bureau.

Nous en avons fini avec ça. Le modèle a été créé.

Image unique pour le groupe

J'ai récemment écrit un article sur . Ouverture incorrecte et travaux supplémentaires avec la taille peut considérablement détériorer la qualité du des images sympas, si vous êtes intéressé, vous pouvez lire un article à ce sujet sur mon blog.

Faites glisser la photo que nous utiliserons comme photo principale.

Cela ne reflète pas correctement.

Si vous avez les mêmes bêtises, faites-en simplement la première. Puis, tout en appuyant sur Bouton Alt Cliquez sur le calque 1 et le calque 2 pour les mettre en surbrillance.

Ils doivent être combinés en utilisant touche droite souris et l’option correspondante. Dans ce cas, il nous sera plus pratique de continuer à travailler. Vous n’aurez pas besoin de superposer et de découper la photo d’abord pour votre avatar, puis pour la publication.

Si vous appuyez sur Ctrl puis sur la vignette du calque que vous venez de créer. Les fourmis courent le long des bords des objets du nouveau calque, ce qui vous indiquera comment afficher l'image du bas. Vous pouvez les supprimer en appuyant sur Ctrl+D. Ce qui se trouve maintenant dans la partie interne sera ensuite inséré dans VK.

Si vous commencez à déplacer la photo, les fourmis qui courent « l'accompagneront ». Je peux vous conseiller de mettre en place des guides. Vous ne savez pas comment travailler avec eux ? Regardez cette vidéo ici.

Une fois que tout est configuré comme il se doit, vous pouvez passer à l’étape suivante. Je vais vous montrer deux options pour obtenir le même effet. Le premier est simple. Sur la couche supérieure, cliquez bouton droit souris et sélectionnez « Créer un masque d’écrêtage ».

Mais j'adore le deuxième. Il est plus rapide. Appuyez sur Alt et déplacez le curseur entre les deux calques, cela changera visuellement. Puis clic gauche.

Le résultat est cette photo.

Chaque partie peut être découpée à l'aide de l'outil Cadre puis enregistrée au format JPEG. Nous ajoutons la bonne photo comme avatar. À gauche, vous pouvez simplement ajouter un like entrée régulière puis sécurisez-le.

Ce n'est pas difficile, mais si vous avez des problèmes, je peux vous recommander de lire la troisième publication de cette série, dans laquelle j'explique en détail comment faire en sorte que lorsqu'un lecteur clique sur votre photo, il soit envoyé vers un site Web.

Dans cet article, nous verrons étape par étape comment créer, configurer et concevoir correctement la communauté VKontakte.

Création de communauté

Vous pouvez créer une communauté VKontakte en allant dans l'onglet « groupes », « gestion », « créer une communauté ».

Type de communauté et sujet

Tout d’abord, vous devrez décider du type de communauté, en fonction de vos objectifs, et choisir le sujet de la communauté.

Inscription de groupe

Après avoir choisi le type de communauté, vous pouvez passer au plus important, c’est le design. Concevoir votre communauté est une sorte de carte de visite entreprise, en fonction de la qualité de la conception, vos abonnés potentiels tireront des conclusions sur votre travail.
Vous pouvez télécharger la couverture en allant dans « paramètres », puis en cliquant sur « télécharger ».

Sur la couverture vous pouvez placer :

• Nom
• logo
• devise
• coordonnées
• promotions ou appel à l'action
  Point important : la couverture est la première chose qu'un client verra lorsqu'il se rendra dans votre groupe, elle doit donc être lumineuse et attirer l'attention.

Couverture dans la communauté MTS

Couverture dans la communauté Tinkoff Bank

Couverture dans la communauté HeadShot
Tailles d'image pour la conception de la communauté VKontakte.
Taille de la couverture pour le groupe VKontakte 1590x400px
La taille de la vignette de l'avatar est un cercle d'un diamètre de 200 px.

De plus, VKontakte a récemment introduit des couvertures dynamiques pour les communautés.
Couvertures dynamiques ont des fonctionnalités très riches, avec lesquelles vous pouvez afficher le dernier abonné, le meilleur commentateur sur la couverture, personnaliser le changement d'arrière-plan à votre demande, ajouter un widget météo, l'heure et bien plus encore.

Description de la communauté

Dans la description, l'essentiel est de décrire le plus brièvement possible les principaux avantages de l'entreprise.
Point important : il n’est pas nécessaire de décrire tout ce que votre entreprise a fait, fait ou fera. Personne ne lira une longue description. Vous disposez de quelques secondes pour attirer l’attention avant que le client ne commence à consulter les publications sur le mur de la communauté. Par conséquent, la description ne doit contenir que points clés, reflétant l’essence de la communauté/entreprise.

Astuce de vie : Afin de faire une description plus détaillée de la communauté (avec des photos, des liens et une belle mise en page), vous devez mettre message épinglé une publication wiki avec une image lumineuse et un appel à l'action.

Exemples de publications wiki :

Avatar du groupe

L'avatar de la communauté est détail important V construction générale design de qualité, dans cet article nous avons mis en évidence plusieurs très points importants, qui doivent être pris en compte lors de la création d’un avatar communautaire.
Compte tenu du fait qu'ils utilisent désormais principalement des couvertures communautaires, l'avatar lui-même dans le groupe est affiché sous forme de miniature. Par conséquent, nous parlerons ici de l’importance de concevoir la miniature de l’avatar. Comme mentionné ci-dessus, la taille de la vignette de l'avatar est un cercle d'un diamètre de 200 pixels.

1. 1. Texte
      Si vous placez du texte sur la vignette d'un avatar, il est important qu'il soit grand et qu'il ne dépasse pas l'avatar.
   2. Compréhension
      Il est nécessaire de placer une image sur l'avatar qui indiquera clairement ce qui est représenté.
   3. Minimalisme
      Pour rendre votre avatar pertinent, vous pouvez le créer dans un style minimaliste : moins de mots et d'éléments inutiles qui n'ont pratiquement aucune signification sémantique. La vignette de l'avatar doit être la plus simple et lisible possible.
   4. Attirer l'attention
      Pour que la miniature de l'avatar attire l'attention. Vous devez le concevoir de manière à ce qu'il ne soit pas trop blanc et ennuyeux, sinon il se perdra dans le contexte des avatars plus colorés des concurrents.

Que dois-je mettre sur la miniature de mon avatar ?

Examinons les options permettant d'utiliser une vignette d'avatar pour attirer des abonnés dans la communauté.

Paramètres de la communauté

En allant dans l'onglet « gestion de la communauté », vous pouvez proposer une adresse de page courte et indiquer Informations Complémentaires.

Ensuite, dans l’onglet « liens », fournissez des liens vers votre page sur d’autres réseaux sociaux et un lien vers votre site internet.

Dans l’onglet « sections », activez celles nécessaires. Il est plus pratique de créer un mur communautaire limité, afin de ne pas le ratisser à l'avenir à cause des messages des robots spammeurs.

Incluez des produits si votre communauté vise à vendre des produits ou des services.

Vous pouvez également ajouter des applications à la communauté et les personnaliser selon vos besoins. Par exemple, l'application Applications est la plus pratique pour travailler avec des prospects. Il s'agit de l'inscription et de l'acceptation des commandes en ligne. Ou, par exemple, l'application Maps, avec les adresses de vos magasins, bureaux, événements. Grâce à l'application Acheter des billets, vous pouvez vendre des billets pour des événements directement sur la page de la communauté, c'est-à-dire les abonnés/clients pourront acheter un billet sans se rendre sur votre site Internet.

Menu Wiki - beau et informatif

C'est une autre façon de montrer le caractère unique de votre communauté, d'attirer l'attention des clients, mais aussi de structurer les services, les produits et toutes les informations sur la page. De plus, en utilisant le menu wiki, vous pouvez configurer des liens directs pour accéder directement au site Web de l’entreprise.

Exemples de menus wiki :

Vous pouvez voir un guide détaillé pour créer un menu wiki ici -