All posts by Virginie

UX design et webdesign 2018

UX design – Webdesign : 10 tendances 2018

By | UX Design, Webdesign | No Comments

Même si 2018 est déjà bien entamé, on peut encore dire qu’en UX Design comme en webdesign, les tendances pour cette année suivront celles de 2017 qui a fait la part belle aux visuels de qualité (images et vidéo) et à une expérience utilisateur toujours plus fluide et intuitive.
Dans cette article, nous avons choisi de vous parler plus particulièrement de 10 tendances qui vont marquer 2018.

1. Le cinémagraph, un atout pour le webdesign

cinemagraph ChopardApparu déjà en 2017, l’utilisation du cinemagraph va s’intensifier en 2018. Il s’agit d’un mélange entre image et vidéo tournant en boucle et qui sera incorporé sous forme de gif animé dans les sites web et landing pages. L’originalité d’un tel procédé est que seule une infime partie de l’image est animée. Nous avons déjà pu en voir notamment dans les newsletters de nos grandes marques préférées. Il a d’ailleurs été noté que cette technique permet d’augmenter le taux de clic de 25% sur un emailing par rapport à un emailing sans animation.
En effet, par son attractivité et son effet de nouveauté, le cinemagraph augmente l’intérêt de l’internaute et permet de focaliser son attention sur un point précis.
Attention toutefois à son poids : il est important, en terme d’UX design et de SEO, de veiller à ce que le poids du cinemagraph n’augmente pas de manière significative le temps de chargement de la page web.

2. L’image : contenu prioritaire

Comme nous le savons, le cerveau a tendance à retenir plus facilement les images que le texte. Les visuels sont aussi beaucoup plus parlant qu’un long discours. Pour cela, il est évident que l’utilisation d’images (photographie, vidéo, illustration) reste pertinente dans la conception de site web en 2018.

Ainsi, pour attirer l’attention de l’internaute et vous démarquer de la concurrence, il est important de lui offrir des visuels uniques et qui vous ressemblent plutôt de de faire appel à des banques d’images plus impersonnelles, qu’il s’agisse de photographie ou d’illustration. Il est donc préférable de faire appel à des professionnels tels que photographes ou illustrateurs qui ont un style propre qui pourra vous séduire et donc séduire votre clientèle.

De même, la vidéo et l’animation 3D sont encore largement utilisées et permettent de rendre plus attrayante la présentation d’une entreprise ou d’un produit qu’un long bloc de texte.

3. Les couleurs vives

Webdesign 2018 - Pantone Violet2018 voit le grand retour des couleurs vives et dynamisantes. Ce n’est pas pour rien que l’Ultra-violet est la couleur Pantone 2018 ! Ce qui n’est pas pour nous déplaire 😉

Les webdesigners osent les couleurs « flashy » pour les marques qui veulent être originales et marquer les esprits.

4. Retour du dégradé

Dégradé Apple webdesignAprès quelques années de Flat Design, parfois jugé un peu trop froid et manquant de profondeur, les dégradés, plus élégants, sont de retour. En effet, depuis 2016, certaines marques comme Apple ou Instagram ont modifié leur identité visuelle pour y intégrer de larges dégradés de couleurs. Que ces dégradés soient utilisés pour la création de logos ou en superposition sur de larges visuels, cette tendance se confirme encore cette année.

Du point de vue de l’UX Design, il est nécessaire de faire attention à la lisibilité des textes qui sont apposés sur ces dégradés et, par mesure de précaution, de ne pas y associer de contenu informatif important.

5. Typo massives

Police massive UX DesignToujours dans le but d’aller au plus simple et au plus rapide, les items de menus sont de plus en plus courts, les phrases d’accroche le sont tout autant. Ainsi, afin de faciliter la lecture de l’internaute, les typo sont de plus en plus épaisses pour ce type de textes. Elles attirent le regard, se lisent en un clin d’oeil et permettent une action plus rapide.

Ces typo massives sont utilisées pour attirer l’attention de l’internaute qui a pris l’habitude de lire les pages web en diagonale pour gagner du temps. Il est à la recherche des mots importants qui lui aideront à comprendre rapidement le contenu de ces pages.

Les typo massives sont donc à privilégier pour des titres, des textes courts, des slogans et les items de menus (quand il y en a peu).

6. Nouveau format d’image : SVG

Le développement du rôle de l’UX Design dans la création des sites web ainsi que de la qualité des écrans disponibles sur le marché (avec l’arrivée des écrans Retina) a augmenté notre exigence en terme de qualité d’images. Les images JPG, PNG et GIF correspondant à des formats compressés, elles subissent des pertes de qualité non négligeables. Nous avons donc de plus en plus tendance à utiliser des formats nous permettant de conserver les propriétés et la qualité des images sans impacter le temps de chargement des pages web. Dans cette optique, le format SVG (Scalable Vector Graphic) sera probablement le format le plus utilisé lors de la conception de sites web en 2018, notamment pour les icônes.

En effet, quelle que soit la taille ou la résolution d’écran, les logos, icônes et autres graphiques conservent une qualité irréprochable. De plus, ce format gère parfaitement les effets de transparence, de filtre et d’animation.

De plus, trois types d’objets graphiques sont permis avec ce format : images, textes et formes vectorielles.

7. UX design : les interactions

UX Design Interactions Avec l’avancée des technologie et de l’importance de l’UX Design, les sites internet proposent de réelles expériences utilisateur qui permettent un engagement de l’internaute dans sa navigation. L’animation par l’interaction est le meilleur moyen de faire participer les visiteurs.

Ainsi, plus l’expérience utilisateur est originale et agréable, plus le temps passé sur chaque page du site est long et meilleur sera l’engagement des internautes.

Par exemple, les animations déclenchées par le scroll de la page invitent les visiteurs à faire défiler les pages du site et ont pour but d’augmenter le taux de conversion, à l’image du LookBook Winter de Wed’ze.

Il existe également des micro-interactions qui correspondent à de subtils mouvements déclenchés par l’action de l’internaute, comme, par exemple, le « saut » du caddie déclenché par l’ajout d’un produit dans le panier virtuel de l’utilisateur.

Très appréciées en UX design, ces micro-interactions permettent également d’améliorer l’expérience utilisateur de l’internaute en lui donnant un feedback immédiat sur l’action qu’il vient de réaliser et ainsi le rassurer. Ces micro interactions doivent être subtiles car elles doivent être à la fois visibles, discrètes et explicites.

8. Design asymétrique

UX desgin asymétriqueSur une page web, le design asymétrique consiste à mettre en place de manière non symétrique mais équilibrée différents blocs d’éléments (images, texte…), donnant ainsi plus de liberté à la créativité.

Le contenu est segmenté permettant ainsi à l’internaute de se concentrer plus longtemps sur le contenu de la page et améliorant l’expérience utilisateur…si et seulement si un équilibre est respecté dans la page afin d’éviter toute confusion.

En effet, les blocs de texte et les espaces doivent s’équilibrer avec les images afin d’obtenir une page fluide et esthétique.

9. Ecran partagé ou split screen

UX design et Ecran partagéL’écran partagé est comme son nom l’indique un écran « coupé » en deux afin de créer deux espaces différents permettant de véhiculer deux messages simultanément.

Très apprécié en UX Design, l’écran partagé offre une bonne expérience utilisateur d’un point de vue visuel quelque soit le support utilisé car l’interaction y est fluide et intuitive. Il est ainsi possible d’utiliser un bloc pour le titre et le visuel tandis que le contenu textuel  sera dans le bloc adjacent.

10. UX design : Chatbot

Autrefois limité aux messageries, les chatbots se démocratisent pour apparaître sur toujours plus de site internet, voire même devenir des sites internet à part entière. Ces robots conversationnels interactifs offrent à l’internaute une expérience utilisateur simple et intuitive d’autant que l’interface est généralement réduite au strict minimum, se concentrant au maximum sur la qualité des réponses à apporter aux utilisateurs.

Ce système ressemble donc à une messagerie instantanée et permet à l’internaute d’obtenir des réponses à ses interrogations dans les plus brefs délais ; en revanche, il faut savoir qu’il est très difficilement indexable et cela est donc à prendre en compte dans sa stratégie SEO.

Tutoriel mockup

Mockup : l’art de mettre en valeur vos créations graphiques

By | Graphisme, Tutoriels Photoshop | No Comments

Mockup : qu’est ce que c’est ?

Cette semaine, voici un mini-tutoriel pour apprendre à mettre en valeur vos créations graphiques pour vos présentations et vos rapports à l’aide d’un mockup. En effet, que vous ayez réalisé des supports de communication print comme des affiches, des flyers ou des catalogues ou bien des supports digitaux tels que sites web ou applications mobiles, il est préférable, pour vos présentations, de les mettre en situation plutôt que montrer les maquettes brutes.

A cet effet, nombreux sont les graphistes et webdesigners qui utilisent des mock-ups pour se simplifier la vie. Il existe plusieurs sources de Mockups gratuits sur Internet telles que Graphic Burger ou MockupWorld pour ne citer que les deux premiers résultats de recherche de Google.

Pour ce tutoriel, j’ai choisi un mockup et nous allons apprendre à l’utiliser.

Mini-tutoriel pour savoir utiliser un mockup

Dans un premier temps, il vous suffit d’ouvrir votre mockup dans Photoshop comme ci-dessous.

Mockup étape 1

Vous pouvez observer les différents calques de ce mockup et localiser celui ou ceux que vous allez modifier, personnaliser. Double-cliquez sur celui que vous souhaitez utiliser et un nouveau document s’ouvre.

Mockup étape 2

Ce document comprend le détail de la scène que vous avez sélectionner. Sur l’image ci-dessus, l’écran mac présente un fond vert avec de la typologie mais vous souhaitez remplacer cela par la page d’accueil de votre site web. Il vous suffit donc de double-cliquer sur le calque nommé « replace » ou « Your design hère ». Un nouveau plan de travail apparait, représentant le contenu de l’écran du mac.

Mockup étape 3

Il vous reste donc à importer le screenshot de votre site web et à l’ajuster à la taille du document. Vous devez penser à enregistrer vos modifications pour qu’elles apparaissent dans le document initial ; par exemple utilisez le raccourci clavier CTRL+S (pour PC) ou CMD+S (pour Mac).

Pour la tranche des livres, repérez les calques dédiés et double cliquez sur chaque livre. Ensuite, changez directement le texte des tranches. Vous pouvez également y rajouter votre logo ou tout autre type d’image.

Mockup étape 4

La dernière étape est la personnalisation du fond du mock-up. Là encore, rien de plus simple. Repérez le calque « Background », double cliquez dessus et modifiez la couleur puis enregistrez votre travail.

Mockup étape5
Sur le fond, vous pouvez également importer des textures de murs ou autres pour donner plus de relief à votre image final ; mais il s’agit surtout d’une affaire de goûts.
Un petit coup d’oeil sur le résultat final ? J’espère que ce mini-tutoriel vous aura plus. A vous de jouer maintenant !

Mockup étape 6

Retouche photo

Tutoriel pour ajouter des reflets sur des lunettes de soleil

By | Tutoriels Photoshop | No Comments

Aujourd’hui, ce tutoriel vous montre comment ajouter ou changer les reflets sur des lunettes de soleil pour leur donner un aspect plus glamour.

Création de nouveaux reflets sur des lunettes de soleil.

Pour bien commencer ce tutoriel Photoshop, je vous invite à choisir le portrait d’une personne portant des lunettes de soleil ainsi qu’une photographie de paysage qui sera le reflet des lunettes.

Pour ce tutoriel, j’ai choisi une photographie de New York pour le portrait d’une jeune femme urbaine. Notons qu’il est nécessaire de garder une cohérence entre les différents éléments photographiques. En effet, il sera difficile d’être réaliste si vous choisissez un paysage de grattes-ciel alors que votre personnage est au bord de la mer !

La première étape consiste donc à ouvrir les deux photos dans Photoshop et à importer l’image de paysage sur le portrait. Afin de bien positionner cette-dernière sur un carreau de lunette et de la redimensionner, je vous conseille d’en diminuer l’opacité pour vous faciliter la tâche.

Superposition d'images

Dans un second temps, l’image doit être réduite pour correspondre au mieux aux dimensions d’un verre de lunettes. Pour cela, utilisez l’outil sélection rectangle puis il faut intervertir la sélection pour pouvoir supprimer l’excédant.

Sélection

Ensuite, il est nécessaire de dupliquer le calque du paysage afin de le positionner sur le deuxième verre de lunettes. Pour cela, il y a deux solutions : soit vous cliquez sur votre calque puis clic droit et sélectionnez « Dupliquer le calque », soit dans le menu « Calque », vous sélectionnez la même fonction.

Duplication de calque
Une fois le calque dupliqué bien positionné sur le deuxième verre de lunettes, vous pouvez remettre une opacité à 100% pour les deux calques paysage et fusionner les calques pour faciliter les manipulations à venir. Pour cela, les deux mêmes options que précédemment se présentent. J’ai choisi de passer par le menu « Calque » pour sélectionner « Fusionner les calques ».

Images des reflets

Intégration des reflets sur les lunettes.

Afin de bien ajuster le reflet aux lunettes, vous avez la possibilité d’améliorer le contour des sélections effectuées. Pour cela, sélectionnez les verres de lunettes ; lorsque vous utilisez l’outil « sélection », une barre de menu spécifique apparaît en haut de l’image. Sélectionnez « Améliorer les contours » et jouez avec les curseurs « Décalage » puis « Lissage » afin d’optimiser les contours de l’image pour rendre réaliste l’incorporation du reflet du paysage sur les verres de lunettes.

Amélioration des contours

Une fois ce travail préparatoire réalisé, il nous reste à intégrer le paysage sur les verres de lunettes. Pour cela, je vous conseille dans un premier temps de créer un « nouveau groupe d’après les calques » dans lequel sera inséré le calque des reflets. Cela nous permettra de superposer plusieurs effets sur ce calque. Dans un second temps, créez un masque de fusion sur le dossier nouvellement créé. Cela a pour effet d’intégrer le paysage dans la sélection des lunettes.

Contours

Améliorations des reflets créés sur les lunettes.

L’intégration ainsi réalisée n’est pas encore assez réaliste. Il est donc nécessaire de traiter l’image du paysage pour en faire un reflet plausible !

Dans un premier temps, il vous faut créer un masque de réglage « Niveaux » et de jouer avec le curseur jusqu’à l’obtention du résultat désiré.

Niveaux

Dans un second temps, vous pouvez créer un masque de réglage de type « Teinte/saturation » et coloriser le reflet avec la couleur la plus proche de celle des verres de lunettes.

Teinte - saturation des reflets

Pour finir, il ne reste plus qu’à incurver le reflet pour qu’il prenne la forme des verres de lunettes grâce à l’outil « Sphérisation », dans le menu Filtre > Déformation.

Dernière étape
Je vous remercie d’avoir suivi ce tutoriel et vous souhaite bonne création !

Création d'un ciel étoilé

Tutoriel pour ajouter des étoiles à votre paysage de nuit

By | Tutoriels Photoshop | No Comments

Le tutoriel du jour va vous montrer comment ajouter des étoiles à un paysage de nuit pour lui donner un bel effet. Pour cela, nous allons reprendre le principe de création de brush, comme nous l’avons vu précédemment pour créer de la neige sur une photographie.

Pour ce tutoriel, je vous conseille de vous munir d’une photo de paysage ou de scène de nuit et de préférence sans nuage pour que ce soit crédible.

Première étape : création d’une forme ou brush

La première étape consiste donc à créer une forme. Je vous conseille donc de créer un nouveau document sous Photoshop de format 500×500 px en 72 dpi avec un fond blanc. Puis sélectionnez l’outil « pinceau » noir doux (avec une dureté de 70%) pour dessiner un point d’environ 6px dans un angle et un autre de 4px dans l’angle opposé. Cette technique permettra d’optimiser le caractère aléatoire du motif.

Création de brush

Il faut enregistrer cette nouvelle forme pour pouvoir la réutiliser dans vos futurs projets. Ainsi, dans le menu Edition, sélectionnez « Définir une forme prédéfinie ».

Création de brush étape2

La forme n’est pas immédiatement utilisable. Il faut donc réaliser quelques réglages afin d’obtenir un rendu réaliste. Afin de voir ce que l’on obtient avec cette nouvelle forme, sélectionnez l’outil « Pinceau » avec une couleur blanche et choisissez votre forme précédemment enregistrée. Vous verrez se dessiner 2 lignes parallèles de points. Nous sommes assez loin des étoiles désirées.

Outil forme

Réglages de forme Photoshop

Dans un premier temps, vous devez ouvrir la fenêtre « Forme » soit en cliquant sur l’icône en forme de pinceaux à droite du plan de travail ou dans le menu « Fenêtre », en sélectionnant « Forme ».

Dynamique de forme

Il vous faut ensuite cocher « Dynamique de forme » et optimiser les réglages de la taille et de l’angle en les passant à 100%, comme ci-dessus.

Diffusion

Puis, il est conseillé de cocher la case « Diffusion » et dans cette catégorie, de cocher « les deux axes » afin que la diffusion ne soit pas qu’horizontale. Vous pouvez ensuite jouer avec le curseur pour modifier l’espacement entre les points. Ensuite, vous devez cocher « Transfert » et jouer avec le curseur de l’opacité afin que toutes les étoiles n’aiement pas la même opacité, ce qui augmentera le réalisme de notre illustration.

Transfert

Pour finir les réglages, il vous faut retourner sur l’onglet « Forme de la pointe » pour régler le pas de la forme, c’est-à dire l’espace entre chaque point.

Enregistrement de la forme

Enfin, vous pouvez enregistrer ces réglages en cliquant sur l’icône située en haut à droite de cette fenêtre puis « Nouvelle forme prédéfinie ».

Réalisation du ciel étoilé avec Photoshop

Maintenant que les réglages de la forme sont enregistrés, il vous suffit de choisir une taille adaptée et de parsemer le ciel d’étoiles de manière aléatoire et naturelle. Si toutefois, vos étoiles « débordent » dans le décor, il vous suffit de créer un masque de fusion et de gommer les étoiles mal placées à l’aide du pinceau noir.

Utilisation des brush

Afin d’augmenter le réalisme de ces étoiles, il faut ensuite travailler sur la diffusion de la lumière et l’effet de mouvement.
Pour commencer, cliquez sur « Fx » et choisissez « Options de fusion ».

Options de fusion

Cette étape vous permettra de régler la lueur des étoiles. Donc cochez « Lueur externe » et jouez avec le curseur de l’opacité.

Opacité de la forme

Je vous conseille de choisir une couleur proche de celle du ciel pour ne pas créer une dissonance entre l’ambiance générale de la photo et les étoiles (adapter la luminosité chaude ou froide en fonction de l’ambiance existante). Vous pourrez ensuite jouer avec le curseur de la taille pour équilibrer la diffusion de la lueur des étoiles.

Pour finir, afin d’éviter d’avoir des points trop fixes sur le photo, la dernière petite astuce est de leur donner un effet de mouvement avec la flou directionnel mais avec modération en prenant, par exemple, une distance maximum de 5 px.

Effet de flou gaussien

Pour vous donner une idée du résultat obtenu, voici un avant-après retouche photo.

Résultat avant-après

Sélection photoshop ultra-précise

Tutoriel Photoshop : créer des sélections très précises avec les couches Photoshop

By | Tutoriels Photoshop | No Comments

Cette semaine, ce tutoriel vous explique comment réaliser une sélection très précise sur une illustration afin de personnaliser une image pour votre projet.

En effet, parfois, nous avons besoin de changer la couleur d’une illustration mais lorsque celle-ci comporte beaucoup de détails, la tâche s’avère compliquée mais il existe une technique très facilement réalisable avec Photoshop.

Etape 1 : sélection de l’illustration

Dans un premier temps, il vous faut choisir une illustration. Pour les besoins du tutoriel, j’ai choisi une gravure qui comporte beaucoup de détails assez fins afin de vous montrer l’efficacité de cette méthode.

Ouvrez donc votre illustration avec Photoshop et rendez-vous dans le menu « couches » (par opposition au menu « calques »).

Ouverture nouveau document

Notre illustration étant en noir, nous pouvons choisir n’importe quelle couche de couleur et la dupliquer. Puis, afin de sélectionner la totalité de notre illustration, il suffit de cliquer sur cette couche dupliquée en maintenant la touche CTRL ou CMD enfoncée. Je vous rappelle que dans cette manipulation, c’est la partie blanche de l’illustration qui est sélectionnée.

Une fois cette étape réalisée, nous pouvons revenir sur les calques mais il faut aussi intervertir la sélection pour que ce soit les traits de l’illustration qui soit modifiables.

Sélection

Pour cela, allez dans le menu de Photoshop, dans « Sélection », choisissez « Intervertir ». Puis, afin de changer la couleur de l’illustration, créez un calque de réglage « couleur unie ».

Calque

Puis choisissez la couleur désirée. Cette manipulation nous permettra de changer rapidement la couleur de l’illustration à volonté.

Changement de couleur

Nous pouvons masquer le calque d’origine car il a été remplacé par le calque de réglage. L’illustration a pris intégralement la couleur choisie grâce au calque de réglage.

Répétez cette manipulation une deuxième fois avec une autre couleur. Puis réalisez cette opération sur la couleur du fond.

Couleur de fond

Il vous suffit de vous positionner sur le calque de fond et cliquez sur « calque de réglage » et choisissez « Couleur unie ». Là encore, répétez cette opération une deuxième fois et changez de couleur.

Duplication de calque

L’alternative à cette répétition est la duplication de calque et il vous reste simplement à changer de couleur sur le deuxième calque.

Superposition de calques

Observons les calques ainsi réalisés : nous avons donc 2 calques « couleur unie » pour la couleur de fond (ici, orange et turquoise) et 2 calques « couleur unie » pour l’illustration (ici, bleu et violet).

Mais pourquoi avoir superposé plusieurs couleurs de calques ?

Etape 2 : effets de dégradés de couleurs

Nous souhaitons réaliser un dégradé de couleurs pour le fond ; il nous faut donc créer et cliquer sur un masque de fusion sur le calque le plus haut des 2 calques de fond. Avec un dégradé « Noir vers Incolore », effacez le haut de ce calque ; ce qui laisse apparaître le calque couleur du dessous.
Effet de dégradé de couleurs

Nous allons également réaliser un dégradé sur l’illustration mais afin de créer un masque de fusion, il nous faut créer un groupe d’après le calque de l’image le plus haut. Le masque de fusion sera donc réalisé sur ce groupe. La méthode est ensuite la même que pour le dégradé de fond, en utilisant le dégradé « Noir – Incolore » sur le masque de fusion.

Dégradé de couleurs de la forme

Puis, pour donner du relief au fond, il faut dupliquer encore le calque de l’image et de la colorer en blanc. Étirez ce nouveau calque afin que l’image occupe tout l’espace.

Motifs de fond blanc

Une fois bien positionné, le motif du fond peut subir quelques modifications telles que des rotations ou des symétries. Ensuite, pour atténuer l’effet visuel, vous pouvez jouer avec l’opacité de cette image de fond (ici, 23%).

Atténuation de forme

Voici le résultat obtenu dans ce tutoriel. Ici, le dégradé de l’image est subtil puisque l’on passe du violet au bleu mais vous pouvez utiliser des dégradés plus prononcés et même des dégradés de 3 couleurs. Alors, à vous de jouer et bonne création !

Résultat du tutoriel

Effet de pixellisation

Explosion de pixels sur Photoshop

By | Tutoriels Photoshop | No Comments

Le tutoriel d’aujourd’hui vous montre comment réaliser une désintégration de pixels sur une photographie. Ce tutoriel fait appel aux différentes méthodes précédemment publiées par sur ce blog concernant les masques de fusion, les brush et bien entendu, l’utilisation des calques.

Mise en place des différents calques

Dans un premier temps, il vous faut choisir une photographie comportant un sujet central suffisamment contrasté par rapport au second plan de l’image. La première chose à faire est de dupliquer le calque et masquer la photo initiale. Dans un deuxième temps, sélectionnez le sujet central à l’aide de l’outil « Sélection rapide » puis dupliquez le calque. Sur le premier calque, supprimez le sujet central pour ne conserver que le fond. Sur le calque dupliqué, faites l’inverse. Pour cela, je vous conseille d’aller dans le menu « Sélection » et de cliquer sur « Intervertir » puis supprimez le fond ainsi sélectionné.

Sélection d'image

L’étape suivante consiste à reproduire et étaler la matière du sujet central en arrière plan. Pour cela, allez sur le calque du personnage détouré et dupliquez-le. Puis utilisez l’outil « Fluidité » dans le menu « Filtre ».

Outil fluidité

Il est conseillé de donner à l’image la forme que va prendre le mouvement de pixels qui s’envolent. Pour cela, sélectionnez l’outil « Doigt » dans « Fluidité » avec une pression  de 100 et un diamètre suffisant. Ensuite étalez l’image dans le sens du mouvement que vous souhaitez donner à votre photo.

Déformation

Cette opération devra ensuite être répétée sur le calque du fond de l’image mais dans le sens inverse.

Désintégration grâce aux masques de fusion

Le travail préalable à cette étape est la création de masques de fusion. Il doit être blanc pour faire disparaître des éléments sur le calque dont il dépend (ici le calque du personnage) et noir pour faire apparaître des éléments sur son calque (ici le personnage déformé par l’outil fluidité).

Masques de fusion

Pour commencer la désintégration de l’objet central de votre photographie, je vous suggère de choisir un pinceau ayant une forme intéressante, cela peut être un effet de poussière, de peinture, de gouttes. Pour ma part, j’ai choisi un pinceau carré.

Outil forme

Comme dans le tutoriel précédent, il est important de régler l’espacement entre les formes, leur orientation et leur quantité en fonction de l’effet que vous souhaitez donner à votre photo. Vous pouvez faire quelques essais pour tester la taille de vos carrés et les annuler avec un CTRL+Z si ça ne convient pas.

Puis pour commencer la désintégration à proprement parler, placez vous sur le premier calque et plus précisément sur son masque de fusion blanc et utilisez l’outil pinceau noir. Ceci revient à effacer des morceaux de votre image avec la forme du pinceau que vous aurez choisi (un carré dans notre cas). Ensuite passez votre pinceau « brush » sur un côté de votre personnage pour en effacer le contour avec cette forme particulière.

Dynamique de forme

Puis pour faire apparaître les pixels autours de votre sujet principal, placez-vous sur le masque de fusion du calque du personnage placé sous celui que nous venons de traiter. Comme il est noir, nous devons utiliser un pinceau blanc avec la forme utilisée précédemment et conserver la même taille. Là encore, je vous invite à passer votre pinceau sur le contour de personnage mais sur l’extérieur cette fois-ci. N’hésitez pas à donner du mouvement à votre « dessin ».

Choix de taille de forme

Afin de donner un aspect futuriste à sa photographie, j’ai décidé d’accentuer la couleur de ses yeux. Pour cela, plaçons-nous sur le premier calque (celui se situant au-dessus de tous les autres) et sélectionnons l’outil « Teinte / Saturation ». Il vous suffit ensuite de jouer avec les curseurs de la teinte, de la saturation ainsi que de la luminosité.

Teinte - Saturation

Une fois que la couleur des yeux est comme vous la souhaitez, inversez le masque de réglage, c’est-à-dire que vous devez le passer du blanc au noir, et la photo reprend ses couleurs initiales.

Inversion du masque de fusion

Il est préférable d’utiliser le pinceau rond blanc pour faire apparaître l’effet « Teinte – Saturation » sur les iris de votre personnage. Pour cela, positionnez-vous sur le masque de réglage noir et choisissez la taille idéale de votre pinceau blanc.

Changement de la couleur des yeux

Pour améliorer le réalisme de la couleur de yeux, je vous invite ensuite à utiliser un pinceau doux noir pour effacer l’effet sur la pupille.

Voici donc le résultat final obtenu, alors à vous de jouer et bonne création !

Résultat

Modification de couleur

Comment changer la couleur de certains éléments d’une photo avec précision ?

By | Tutoriels Photoshop | No Comments

Changer la couleur des éléments clés d’une photo

Ce nouveau tutoriel vous montre comment changer la couleur de certains éléments d’une photo avec Photoshop. En effet, pour certains de vos projets, vous pouvez avoir besoin d’illustrer vos propos ou vos supports de communication avec des photographies bien précises. En revanche, les photos que vous possédez ne sont pas toujours aux couleurs de la charte graphique de l’entreprise pour laquelle vous réalisez ce projet.

Dans ce cas précis, pas de panique ! Il suffit simplement de changer la couleur d’un ou deux éléments principaux de la photographie pour les adapter aux couleurs de la charte graphique de l’entreprise. C’est ce que nous allons voir avec ce nouveau tutoriel.

Réalisation

Tout d’abord, munissez-vous d’une photographie dont vous souhaitez changer une ou deux couleurs. Vous en trouverez aisément dans les banques d’images gratuites pour commencer (voir dans mes ressources web). Ouvrez-la dans Photoshop et créez un nouveau calque par-dessus.

Puis, dans le menu, choisissez « Sélection » puis « Plage de couleurs » comme sur l’image ci-dessous.

Nouveau document

Là, une fenêtre apparaît et représente votre photographie en négatif. Cela vous permettra de sélectionner précisément les plages de couleurs que vous souhaitez changer, notamment en jouant sur le curseur de la « Tolérance ».

Sélection couleur

Dans cette fenêtre, vous avez la possibilité de sélectionner par couleur ou de choisir la pipette qui vous permettra une sélection manuelle des champs de couleurs. Pour le choix de la prévisualisation, je vous invite à sélectionner « Niveaux de gris » pour être plus précis dans votre sélection.

De plus, pour pouvoir changer une couleur et ses nuances (afin de sélectionner les zones en lumière et les zones légèrement ombrées), il vous faut choisir la pipette+ qui vous permettra d’additionner plusieurs couleurs.

Dans un premier temps, nous allons changer la couleur de fond.

Couleur fond

Il faut savoir qu’avec cette méthode, la couleur sélectionnée, donc celle que vous allez changer, apparaît en blanc dans votre sélection de plage de couleur, comme sur l’image ci-dessus. Notons donc que ce qui est en noir n’est pas sélectionné. Cliquez sur OK pour valider la sélection.

Puis, pour modifier la couleur, sélectionnez dans le menu « Calque » –> « Nouveau calque de réglage » –> « Teinte – Saturation ».

Teinte - Saturation

Il vous suffit ensuite de jouer avec les curseurs de teinte, de saturation et de luminosité pour obtenir la couleur souhaitée.

Changement couleur de sélection

La même opération doit ensuite être répétée sur les autres objets pour lesquels vous souhaitez changer de couleur. Ici, j’ai choisi de modifier les couleurs du T-shirt et de la raquette.

Attention, parfois il faut ajuster la sélection grâce aux masques de fusion. Pour cela, sélectionnez votre masque de fusion et cliquez dessus en maintenant la touche Alt ou Option appuyée.

Détail

Résultats obtenus

Ci-dessous, vous pourrez voir les avant-après retouches avec Photoshop. Cette méthode nous permet de changer la couleur des objet en tenant compte des jeux d’ombre et de lumière.
Changement de couleurs

Pour démontrer l’utilité de cette méthode, j’ai réalisé une retouche de couleur sur une photographie plus compliquée à traiter du fait de la présence d’éléments devant l’objet (ici la bouche).

Sélection difficile
Sur cette photographie, il est difficile de sélectionner seulement la bouche parce qu’elle est légèrement masquée par les cheveux. Avec cette méthode, la sélection est précise et le résultat est impeccable !

Résultat sur sélection difficile

Tutoriel création neige

Comment créer de la neige sur une photographie

By | Tutoriels Photoshop | No Comments

Un précédent tutoriel vous montrait comment réaliser vos propres brush avec Photoshop. Dans celui-ci, nous allons voir comment utiliser le brush réalisé précédemment pour ajouter de la neige sur une photographie.

Choix de la photo et des outils

Pour commencer, il vous faut choisir une photo se situant en hiver et comportant de la neige au sol de préférence. Si vous n’en avez pas dans votre stock de photos, vous pouvez utiliser des photos gratuites et libres de droits que l’on trouve dans des banques d’images comme celles recensées sur ce blog dans un précédent article.

Création de brush

Dans un second temps, il faut sélectionner l’outil pinceau de Photoshop et choisir le brush que nous avons réalisé précédemment ainsi qu’une taille appropriée en fonction de l’image. De là, à l’aide de l’outil forme, nous reprenons les réglages vus dans le tutoriel précédent.

Outil forme

A partir de là, les étapes suivantes vont consister en la superpositions de divers calques correspondant chacun à une certaine distance de l’objectif et donc à une taille de flocons.

Calques Photoshop
Sur le premier calque, choisir une taille de pinceau très petite et parsemer le fond de l’image avec ces flocons jusqu’à la moitié de la photo, celui-ci correspondra à l’arrière-plan. Sur le second calque, réaliser la même opération mais avec un pinceau un peu plus gros et descendre un peu plus bas sur la photo. Ce plan semblera plus proche de l’objectif.

Cette opération pourra être renouvelée autant de fois que nécessaire sans oublier d’augmenter la taille des flocons sur chaque plan.

Comment obtenir un rendu réaliste.

Nous avons joué sur la taille des flocons sur les différents plans mais ils ne font pas réalistes en l’état. Il va donc falloir jouer sur les flous, voire même le mouvement en fonction des différents plans.

Nous commençons par le premier plan du fond. Dans le menu, aller dans « Filtre >> Flou >> Flou gaussien ».

Flou gaussien

Sur ce plan, les flocons étant très petits, le flou ne doit pas être trop important sinon, ils disparaîtront. Puis l’opération sera renouvelée sur les autres plans et dosée en fonction du plan.

Enfin, sur les 2 derniers calques, nous commencerons par un flou directionnel suivi d’un flou gaussien.

Flou directionnel

Ainsi, le flou directionnel simulera le mouvement des flocons devant l’objectif.

Flou gaussien

Pour savoir combien de calques réaliser, tout dépendra de l’ambiance que vous souhaitez donner à votre photo : soit une petite neige clairsemée ou une tempête de neige.

En ce qui concerne ce tutoriel, voici le rendu final.

Résultat

Création de brush

Créer ses propres brush Photoshop

By | Graphisme | No Comments

Comme je l’expliquais dans l’article «Ressources web », il est parfois nécessaire de personnaliser des photographies pour enrichir le graphisme d’un site web ou d’un document print. Dans cet article, nous allons voir comment créer ses propres brush, outils incontournable de Photoshop.

Création de brush – étape 1 : choix du motif

Dans un premier temps, nous devons créer un nouveau document sous Photoshop, de taille carrée en 1000 x 1000 px et 72 dpi comme nous l’avons déjà fait dans notre premier tutoriel.

Nouveau document

Nous allons créer un motif constitué d’ellipses que l’on pourra ensuite utiliser pour réaliser des bokehs ou de la neige.
En utilisant l’outil « Ellipse », nous réalisons deux ronds noir sur fond transparent et de tailles différentes.

Création ellipse

Une fois le motif réalisé, il est nécessaire de l’enregistrer dans les brush ; pour cela, dans le menu, cliquez sur « Edition » puis « définir une forme prédéfinie ».

Taille image

Dans ce cas précis, la brush doit être améliorée ; nous allons donc passer par l’outil « Forme ». Pour pouvoir l’utiliser, il faut avoir sélectionné l’outil « Pinceau » et avoir sélectionné le motif précédemment enregistré dans les brush.

Choix des brush

Dynamique

Création de brush – étape 2 – Configuration de la forme

Grâce à l’outil forme de Photoshop, il est possible de jouer avec les formes, les couleurs, l’opacité, l’orientation et l’espacement entre les formes.

Dans un premier temps, nous allons jouer avec les curseurs de la « Dynamique de la forme » ce qui permet d’espacer les forme et de modifier l’angle qui les sépare les unes des autres. Nous obtenons donc l’image de droite.

Espacement

Puis dans un second temps, nous allons utiliser la « Diffusion » de l’outil « Forme » pour disperser les formes sur les deux axes. Ceci permet d’étaler le motif. On obtient ainsi l’image de droite, en rose.

Mode aléatoire

Puis, nous pouvons jouer avec l’opacité des motifs en cochant la case « Transfert » de l’outil « Forme » de Photoshop.Et pour finir, nous pouvons encore espacer les formes en modifiant le pas dans l’onglet « Forme du pinceau ».

Brush

Votre brush est maintenant prête à être utiliser. Nous verrons dans le prochain tutoriel comment l’utiliser pour créer de la neige sur une photographie.

Photomontage

Photomontage de paysage

By | Tutoriels Photoshop | No Comments

Comme je l’indiquais dans l’article sur la création de brush, il est souvent nécessaire de changer l’ambiance d’une photographie. On peut le faire en changeant seulement quelques détails, comme expliqué dans le tutoriel qui vous montrait comment réaliser de la neige avec Photoshop.

Photomontage ultra facile

Ce tutoriel vous montre comment réaliser un photomontage de paysage pour donner une ambiance particulière à votre photo. Nous allons partir des deux photos suivantes.

Choix des images

De votre côté, je vous invite à choisir votre photo de départ. Choisissez-la pour un détail en particulier comme l’ambiance générale, le décor ou les couleurs…Puis choisissez une autre photo qui lui sera complémentaire. Ouvrez les deux dans Photoshop.

Photomontage - étape1

Après avoir superposé les deux images, la première étape consiste à effacer la partie supérieure, le ciel, de celle qui se trouve au dessus de la première photo. Pour cela, je vous conseille d’utiliser un masque de fusion avec un pinceau noir.

Photomontage -étape2

A la fin de cette étape, le résultat est déjà sympa mais la délimitation entre le premier et le second plans est un peu brute.

Etape 3

Mes petits trucs pour un rendu réaliste

Pour plus de réalisme, j’ajoute quelques éléments qui permettront d’intégrer et de fusionner parfaitement les deux photographies ensemble. En effet, dans le deuxième plan précédemment intégré, nous pouvons constater la présence de brume qui donne une atmosphère particulière à notre photographie.

Le petit plus : ajouter un effet de brume sur la photo du premier plan grâce à des brush trouvées sur le web gratuitement.

Choix de brush
Après avoir téléchargé les brush, il vous faut sélectionner l’outil pinceau et cliquer sur l’icône « paramètres » de la fenêtre qui apparaît. Sélectionnez « Charger les formes » et parcourez vos fichier pour choisir vos brush.

Brush photoshop

Une fois la forme désirée sélectionnée, il suffit d’appliquer de la brume par petites touches principalement sur le premier plan et également sur le second plan.

Pour modifier encore l’ambiance, nous pouvons réaliser un dégradé « rose –> incolore » dans le ciel.

Fond image

Enfin, j’ai choisi d’ajouter un détail pour parfaire l’ambiance générale. Après avoir sélectionné les éléments à intégrer dans notre photomontage sur une troisième photographie (à l’aide de l’outil baguette magique ici car les oiseaux sont monochromes), il suffit de les copier-coller sur le photomontage.

Sélection d'objets

Les oiseaux sont ainsi placés en arrière plan et il suffit d’ajuster la taille pour augmenter le réalisme de la photo finale.

Photomontage paysage

Voici le résultat obtenu : à partir d’une photo lugubre, on obtient une image de conte fantastique.

A votre tour et bonne création !