Mockup : améliorer vos visuels dans vos articles (tutoriel complet)

Je vous parle aujourd’hui d’une “technique” que j’utilise régulièrement dans mon travail. Il s’agit des “mockups” qui m’aident à améliorer mes visuels sur mon site web professionnel ou tout simplement lors de présentations. Envie d’en savoir plus? Je vous explique tout 🙂

 

Les “mockups”?

Tout d’abord, qu’est-ce qu’un mockup? Il s’agit d’un fichier Photoshop avec l’image d’un iMac, d’un iPhone,… est qui formaté de manière à pouvoir mettre sa propre image dans l’écran de ce device. Comme une image est plus parlante, voici un exemple concret :

tutorial_mockup_blog_1

Grâce à ce mockup, j’ai affiché la page d’accueil de mon blog sur l’écran de ce MacBook.

 

A quoi ça sert ?

Tout simplement à présenter une page web, une photo, un article, dans un visuel plus intéressant qu’une simple capture d’écran. Par exemple, quand je présente une maquette pour un site internet à un client, je la présente toujours de cette manière. En plus de l’aspect esthétique, cela permet de mettre la maquette “en action”.

Si vous avez un blog, cette technique peut donc être très intéressante. Pas pour montrer des photos de looks ou de décoration d’intérieur 😉 Mais je vois très souvent des blogs présentant des sélections d’articles sur des e-shops, illustrés avec des simples captures d’écran. Que pensez-vous de présenter ces screenshots dans un plus beau visuel ?

Par exemple, imaginons que je travaille sur un article présentant mes derniers achats chez Zara. Je pourrais illustrer l’article avec une photo du site. Et grâce à un mockup, c’est encore plus joli :

tutorial_mockup_blog_2

 

Comment ça fonctionne ?

Je vous rassure, c’est très facile. Vous devez bien sur disposer d’Adobe Photoshop. Ensuite, vous devez trouver le mockup idéal en fonction du sujet. Il existe de nombreux sites mais le site Mockup World vous propose une large sélection de fichiers gratuits.

Dans ce tutorial, j’ai sélectionné celui-ci.

Etape 1 : Sélectionner et télécharger le mockup. Ensuite, ouvrir le fichier dans Photoshop.

tutorial_mockup_blog_3

 

Etape 2 : Dans la fenêtre des calques, vous trouverez le calque “image” de l’écran. Facile à retrouver, il est souvent renommé par “Your screenshot here” ou “Remplace me”. Sélectionnez ce calque et faites un double-clic dessus.

tutorial_mockup_blog_4

 

Etape 3 : Une nouvelle fenêtre s’ouvre. C’est dans cette fenêtre que vous allez mettre la photo, capture d’écran, que vous souhaitez voir dans l’écran de l’ordinateur. Une fois que c’est fait, fermez cette fenêtre et cliquez sur enregistrer.

tutorial_mockup_blog_5tutorial_mockup_blog_6

 

Etape 4 : Et voila! L’image est automatiquement mise en place. Il ne vous reste plus qu’à enregistrer cette image en jpeg.

tutorial_mockup_blog_7

 

Il s’agit donc d’une astuce facile à appliquer et qui pourra faire la différence.

 

Utiliser ses propres photos?

C’est tout à fait possible, mais cela demande un peu plus de technique car vous devez créer vous-même la perspective de l’image. Mais je prépare actuellement un article à ce sujet 😉

 

Si quelque chose n’est pas clair, n’hésitez pas à me le dire en commentaire.

J’espère que cela vous sera utile,

Bonne soirée !

 

 

6 Comments

  1. Pretty Tiny Things 11 avril 2016

    Très intéressant cet article !

    N’hésites pas si tu souhaites découvrir mon blog 🙂

    Bises

    Emily de PTT

    Répondre
    • Valentine 11 avril 2016

      Merci Emily 🙂
      Et très contente d’avoir pu découvrir ton blog 😉

      Répondre
  2. Justine 12 avril 2016

    Super cool et ton blog est magnifique ! Bravo !
    N’hésites pas à faire un tour sur le mien !! 🙂
    Bises,
    Justine

    Répondre
    • Valentine 13 avril 2016

      Merci Justine!
      Je vais découvrir ton blog tout de suite 😉

      Répondre
  3. Marina 30 juillet 2016

    J’ai découvert le mockup le mois dernier, mais je regrette de ne pas pouvoir plus m’en servir pour mon blog… parce que j’ai adoré ! Par contre, je vais utiliser la technique pour faire mes photos de produits (ebook gratuits et formations en ligne)

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *