Bien souvent, un mockup offre une nouvelle perspective sur son travail. Par exemple, l’intégration d’un site web au sein d’un Macbook Pro 15’’ n’offre pas le même rendu qu’une simple capture d’écran au sein d’une slide de présentation ou d’un portfolio.

Néanmoins, les ressources Web dédiées à la création de mockups sont le plus souvent disponibles qu’au format PSD. Je ne suis pas un grand fan de Photoshop. Ma paresse me pousse donc vers des outils de création de mockup online. Plus rapide et plus pratique, j’ai testé pour vous MockupEditor. Une Web app dont la promesse est d’offrir l’outil parfait pour la création de mockup online, que ce soit pour une affiche, un site Web ou une application mobile.

Les quelques lignes suivantes détaillent les étapes de création d’un mockup sans Photoshop via l’outil MockupEditor. Dans 5 min, votre mockup sera prêt à être afficher sur votre support de présentation favoris.

Comment créer le mockup idéal avec MockupEditor ?

Etape 1. Rendez-vous sur l’éditeur en ligne MockupEditor ;

Accueil de l’éditeur de mockup online.

Etape 2. Pour plus de rapidité, sélectionnez un modèle de mise en scène dans le menu burger (icône tri-bande) situé en haut à droite de votre écran – encadré pour poster ou devices pour application et site web ;

Sélection d’un template de mockup prédéfini.

Etape 3. Uploadez vos designs au sein des zones vertes en cliquant sur l’icône appareil photo au sein de chaque cadre et écran. MockupEditor offre la possibilité de recadrer le fichier image que vous souhaitez uploader sur la composition. Seul bémol, il n’existe pour l’instant pas d’option pour modifier le niveau de zoom. L’image que vous uplaodez doit être parfaitement adaptée aux dimensions du cadre ou de l’écran. Le support des UI animations en GIF ou vidéo n’est pas mis en place pour l’instant au sein de l’éditeur ;

Choisissez votre image via l’explorateur de fichiers de votre ordinateur.

Etape 4. Composez l’environnement de travail en y insérant des objets tels que des bibelots, des statuettes et des plantes vertes ;

Choisissez vos accessoires de décoration.

Etape 5. Option : ajoutez un objet en premier plan de votre mockup ;

Choix d’un premier plan.

Etape 6. Faites vivre une matière, une texture ou une couleur au sein de l’arrière plan. Choisissez ce qui correspondra le mieux à l’univers graphique de votre présentation ou de votre portfolio ;

Choisissez un arrière plan pour votre mockup.

Etape 7. Si nécessaire, MockupEditor, vous permet d’intégrer un texte directement au sein de votre mockup ;

Etape 8. Téléchargez votre oeuvre en cliquant Save as via le panel de navigation à droite de l’écran.

Enregistrez et téléchargez votre mockup.

Si vous n’êtes pas un expert Photoshop, MockupEditor peut vous faire gagner en productivité grâce à son éditeur online très facile à prendre en main. Il permet de créer des designs uniques de mockup grâce à la multitude d’accessoires et la grande liberté de positionnement des objets. Les principaux mockups de devices mobiles et desktop sont disponibles via l’interface. Je vous invite à faire un test avec la version gratuite.

Si vous êtes conquis(e), n’oublie pas d’utiliser le voucher dédié à la communauté du Magazine du Webdesign pour bénéficier de 50% de réduction sur l’abonnement annuel à MockupEditor.

On en parle ?!

Avez-vous des commentaires, des questions, de l’amour ou de la haine ? Envoyez tout ça à [email protected]. Si vous n’aimez pas les e-mails, envoyez un tweet à @MagDuWebdesign.

Si vous avez apprécié cet article, vous pourriez être intéressé(e) par :

Prenez soin de vous. A bientôt — @guillaumpalayer.

Accédez au meilleur des interfaces directement depuis votre boîte mail

Si vous n’aimez pas les emails, accédez au meilleur des interfaces sur Twitter.