Les ressources du web

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 !

Tuto Photoshop n1

Tutoriel Photoshop : Ecrire un titre en image

By | Tutoriels Photoshop | No Comments

Avec ce tutoriel Photoshop, nous allons voir comment écrire un texte avec une image grâce à Photoshop.
Après avoir ouvert Photoshop et sélectionné la photo que vous souhaitez utiliser, il vous reste à suivre les étapes suivante. Si vous n’avez pas de photo utilisable pour ce tutoriel, vous pourrez en trouver dans les banques d’images gratuites et libres de droit recensées dans ce blog. Pour ce tutoriel Photoshop, vous pouvez également utiliser des textures selon l’effet que vous souhaitez donner à votre photomontage.

Etape 1 – tutoriel Photoshop : Créer un nouveau document

Pour la première étape de ce tutoriel Photoshop, il faut créer un nouveau document et pour cela, dans le menu, il vous suffit d’aller dans : Fichier > Nouveau.

Une fenêtre apparaît et vous devez renseigner :

  • Nom du document
  • Taille du document
  • Résolution : 72 ppi pour le web et 300 ppi pour un document destiné à l’impression,
  • Mode : RVB pour le web et CMJN pour du print (impression).

Tuto Photoshop - étape 1

Etape 2 – tutoriel Photoshop : Ecrire le texte

Pour cela, il vous suffit d’utiliser le raccourci clavier « T » ou de cliquer sur l’icône représentant un « T » dans la barre d’outils de gauche de l’espace de travail de Photoshop.

Ecrivez votre texte et mettez-le en forme grâce à la fenêtre « Caractère » qui apparaîtra si vous cliquez sur l’icône « A » situé à droite de votre espace de travail.

Photoshop Etape 2

Grâce à cette fenêtre, vous pourrez changer la taille de la police, la police elle-même, l’interlignage, l’espace entre les lettres, etc.

Astuce :

Afin de mettre en valeur l’image avec laquelle vous souhaitez écrire votre mot ou message, je vous conseille de rapprocher les lettres au maximum. Cependant, l’outil « Caractère » connaît des limites. Il vous faudra alors très probablement travailler indépendamment chaque espace inter-caractère.Pour cela, maintenez la touche « Alt » (pour les PC) ou « Option » (pour les Mac) et bougez vos lettres avec les flèches « droite » et « gauche ». Le résultat final sera plus fin et agréable visuellement.

Etape 3 – tutoriel Photoshop : Insertion de l’image

Dans cette étape, importez l’image que vous souhaitez utiliser dans Photoshop puis faites-la glisser sur le document en cours. Elle apparaît alors sur votre texte. Pour modifier sa taille afin qu’elle corresponde à celle de votre texte, faites :

  • « Ctrl+T » (pour les PC) ou « Cmd+T » (pour les mac),
  • Tirez un coin de votre photo tout en maintenant la touche « Shift » afin de garder les proportions,
  • Et validez dans Photoshop

Fenêtre Photoshop

Quand ces détails sont réglés, il vous suffit de faire un masque d’écrêtage pour que l’image prenne la forme du texte qui se trouve en dessous.

Détail calquesPour cela, il suffit de placer la souris sur le calque de la photo et, en maintenant la touche « Alt » ou « Option » appuyée, de la faire glisser doucement vers la calque du texte. Un signe apparaît (un carré blanc et une flèche noire) ; c’est à ce moment précis qu’il faut cliquer.

Résultat : La photo est incorporée dans le texte mais vous pouvez encore la déplacer pour trouver la meilleure vue possible.

Fusion

Etape 4 – tutoriel Photoshop : Mise en forme

Cette étape permet de mettre en forme le texte malgré la présence du masque d’écrêtage.
Par exemple, j’ai choisi de lui faire une ombre portée puis de modifier la couleur de fond. Pour cela, rien de plus simple. Il suffit de cliquer sur le calque du texte dans la fenêtre des calques, puis sur les styles « fx » et de sélectionner « Ombre portée ». Une fenêtre s’ouvre et vous n’avez plus qu’à choisir les réglages en fonction de vos attentes.

Etape 8

Détail masque de fusionPour la couleur de fond, la manipulation est encore plus simple puisque, dans la fenêtre des calques, vous devez sélectionner le calque de fond puis cliquer sur l’icône des calques de réglage et sélectionner « Couleur unie ».

Astuce

Une fenêtre vous propose de choisir une couleur. Je vous conseille de la choisir en utilisant la pipette sur le photo qui compose votre texte. Cette méthode vous permet d’avoir une couleur parfaitement adaptée à votre motif. Vous pouvez ainsi tester plusieurs couleur et les conserver en créant pour chacune un calque spécifique.

Résultat

Avec plusieurs tests de couleurs de fond, le résultat obtenu est le suivant. De plus, avec cette méthode, le texte reste modifiable tout en gardant la mise en forme.

Résultat du tuto Masdugbord Option2 du tuto masdigbord
A vous de jouer maintenant 😉

Icônes et pictogrammes gratuits

Ressources web : les icônes et pictogrammes

By | Graphisme | No Comments

Ressources web : les kits d’icônes gratuits libres de droit

Pour la réalisation de webdesign – surtout dans le flat design – ou même de certains éléments de communication visuelle, il est parfois nécessaire de recourir à des icônes ou des pictogrammes pour illustrer le contenu éditorial. En effet, dans les tendances du webdesign en 2016, il est indiqué que les icônes ont un rôle encore primordial. Bien sûr, on peut les créer soi-même si on est à l’aise avec Illustrator mais si ce n’est pas le cas, ou tout simplement si on manque de temps, on peut utiliser les ressources du web et les customiser…ou pas.

5 ressources sympas d’icônes gratuits et libres de droit

Ressources d'icônes

Il existe effectivement de nombreux sites proposant des kits d’icônes open-sources à l’image de : Icônes open-sources et Icônes pro.
Quelques soit les sources que vous utilisez, il est important de vérifier que les éléments que vous incorporez dans vos design sont bien libres de droit pour vous éviter d’éventuels rappels à l’ordre.

Icônes Noun-project
Icomoon

Flaticon

A noter que les plus connues et donc les plus utilisées par les graphistes restent :  The noun project , Icomoon et Flaticon.
Dans la plupart des cas, il vous suffit de vous inscrire sur ces sites pour pouvoir télécharger des kits complets d’icônes et de pictogrammes.
Dans le cas où vous ne trouveriez pas votre bonheur parmi ces ressources, vous avez encore la possibilité d’en trouver dans les banques d’images payantes citées dans l’article traitant des ressources photographiques.
Alors, à vous souris…et bonne création !

Ressources Photoshop

Ressources graphiques pour le web

By | Graphisme | No Comments

Parmi les nombreuses ressources que l’on peut trouver sur le web, il existe de nombreuses banques d’images et des brush gratuits qui sont de merveilleux outils utilisés pour personnaliser des photographies ou des illustrations.
Dans la réalisation d’un projet graphique ou web, les ressources visuelles nécessaires à l’illustration d’un article ou d’une création graphique peuvent nous faire défaut. Pour pallier à ce manque, plusieurs solutions s’offrent à vous selon votre budget :
– Nos propres photographies
– Les banques d’images proposant des illustrations ou des photos gratuites et libres de droit
– Les banques d’images payantes telles que Fotolia.

Création graphique et web avec des outils de retouches photos

Gimp pour le web
Sur le marché, il existe plusieurs outils de retouches photo comme les plus couramment utilisés : Gimp (logiciel open-source), d’une part, bien pratique pour les « petits budget » et le logiciel bien connu de la suite Adobe, Photoshop, évidemment, qui est payant (sous forme d’abonnement mensuel pour la Creative Suite).

Adobe Photoshop

Les tutoriels présentés sur ce blog utilisent Photoshop dans sa version CC 2015, simplement pour une question d’habitude. Mais si vous comprenez le fonctionnement de ce logiciel, les autres vous sembleront intuitifs.

D’une manière générale, si vous devez réaliser une création graphique ou un webdesign mais que vous ne possédez pas d’image pour exprimer exactement ce que vous avez en tête, ce n’est pas grave, vous pouvez détourner une photo existante en la modifiant grâce aux différents outils de Photoshop. Afin de vous aider dans cette démarche, mon tutoriel « Créer ses propres brush Photoshop » puis celui intitulé « Créer de la neige sur une photographie » vous permettront de modifier l’ambiance d’une scène grâce aux brush. Il faut savoir qu’il est possible de télécharger des brush « clé-en-main » sur des sites de ressources gratuites comme : Brush-Photoshop, Brusheezy ou FBrushes.

Ressources web : les Banques d’images gratuites et libres de droit

Il existe quelques banques d’images gratuites et libres de droit. Parmi les plus connues, on peut citer Pixabay, Life of Pix, PicJumbo ou encore Stockvault et Photl qui ont chacune leur spécialité.
Ainsi, Photl propose un grand choix de photographies de personnes mais elles ne sont pas forcément au goût du jour tandis que Pixabay propose des photographies de paysage récentes et de qualité.
Ressource web d'images gratuites
Mais quand on ne connaît pas toutes les spécificités de chaque base ou que le temps ne nous permet pas de faire des recherches dans toutes ces banques d’images, une solution existe désormais : Librestock qui est un moteur de recherche qui centralise les ressources de 40 sites d’images libres de droit, ce qui représente environ 42 500 photos.

Autre solution : les banques d’images payantes

Pour faire rapide, il existe plusieurs banques d’images payantes bien connues comme Fotolia ou Shutterstock et qui ont un stock impressionnant de photographie, vidéos et illustrations de qualité et qui peuvent nous sauver la mise sur certains projet. Ce sont des ressources libres de droits mais il faut savoir qu’il existe des licences différentes et quelques restrictions. Les différences entre ces licences sont bien expliquées sur leur site web.

Résultat

Comment corriger les imperfections de la peau

By | Tutoriels Photoshop | No Comments

Sélection de l’outil

Dans la publicité, les photographies sont ultra-photoshopées mais il est tout à fait possible de réaliser des retouches photo naturelles. Dans ce tutoriel, je vous montre comment supprimer des imperfections sur un visage, de manière complètement naturelle. Cette technique est très facile à mettre en oeuvre même si vous débutez dans l’utilisation de ce logiciel.
Pour cela, munissez-vous d’un portrait et ouvrez-le dans Photoshop. Puis sélectionnez l’outil « correcteur localisé » qui est un correcteur semi-automatique.
Pansement Photoshop

Je n’avais pas sous la main un portrait comprenant de grosses imperfections comme des boutons ou cicatrices, alors, dans ce tutoriel, je vais seulement supprimer quelques tâches de rousseurs ou grains de beauté.

TutorielPhotoshop : mise en oeuvre

Une fois l’outil « correcteur localisé » (raccourci clavier : J) sélectionné, il vous faut lui choisir la bonne taille afin que les retouches photo soient les plus discrètes possibles.

Pinceau Photoshop

J’ai choisi un diamètre légèrement supérieur à celui des tâches à effacer et je supprime les plus grosses une à une afin d’avoir un résultat propre.

Ensuite, sur les grandes surfaces, comme le front, j’élargis le diamètre de l’outil pour gagner du temps et traiter plus de petites imperfections à la fois.

A l’inverse, sur la bouche, je réduis le diamètre afin de traiter finement chaque détail. En effet, si l’outil « correcteur localisé » se trouve « à cheval » sur deux textures, l’effet est très largement visible dans la mesure où l’outil ne sait pas gérer le passage d’une texture ou couleur à une autre.

Voici donc le résultat final, à peine visible tant je le voulais le plus naturel possible. Alors, imaginez une photo de classe gâchée par un gros bouton rouge sur le nez. Et hop, on échappe au désastre grâce à cet outil de retouche photo fabuleux !

Résultat

La retouche photo n’a rien de spectaculaire ici mais permet d’enlever certains détails.

Tuto photoshop

Savoir changer la couleur des yeux et des cheveux

By | Tutoriels Photoshop | No Comments

Dans ce nouveau tutoriel Photoshop, nous allons voir comment changer la couleur des yeux et des cheveux. Pour cela, nous allons partir d’un portrait de jeune femme aux cheveux châtain et aux yeux verts. Nous allons éclaircir ses cheveux, puis les passer en roux et en noir. Enfin, nous allons changer ses yeux en bleu.

Changement de la couleur des yeux

Pour commencer, ouvrons ce portrait sous Photoshop. Si vous ne trouvez pas de portrait approprié dans vos propres ressources photographiques, vous pourrez en trouver dans les banques d’images citées dans un article plus ancien.

Graphisme-couleur

Pour modifier la couleur des yeux, il vous suffit d’aller dans les calques de réglage et de sélectionner « Teinte/Saturation ». Vous pouvez jouer avec les curseurs jusqu’à l’obtention de la teinte idéale. Cependant, vous constaterez que toute l’image a changé de couleur. Il faut donc exclure de ce réglage tout ce qui n’est pas : les yeux !

Graphisme

Pour cela, double cliquez sur le masque de fusion qui doit être blanc et lorsque la fenêtre apparaît, cliquez sur le bouton « Inverser ». Le masque de fusion devient noir et la photo retrouve ses couleurs. C’est à ce moment précis que vous allez sélectionner les yeux.

Modification couleur
Je vous conseille de sélectionner votre pinceau avec une couleur blanche et de l’ajuster à la taille de l’iris du personnage. Avec une opacité à 100%, cliquez sur l’iris. Celui-ci prendra automatiquement la couleur que vous aviez sélectionnée grâce à l’outil « Teinte/Saturation ». Répétez cette opération pour le deuxième oeil. Avec cette méthode, il vous sera encore possible de changer de couleur grâce aux variations de teinte et de saturation.

Changement de la couleur des cheveux

Si vous avez compris le principe pour les yeux, changer la couleur des cheveux sera un jeu d’enfant !

En effet, nous appliquerons les successions de masques de réglages et de dé-sélection grâce aux masques de fusion.

Passer de châtain à blond cendré grâce à Photoshop

Sur l’image, sélectionnez le calque de réglage « Correction sélective » puis jouez avec les curseurs pour atteindre la couleur désirée.

Désaturation couleurs

Dans un premier temps, diminuez les noirs pour éclaircir l’image ; comme nous souhaitons que le personnage soit blond, alors augmentez les jaunes puis jouer sur les bleus et rouge pour obtenir le blond que vous souhaitez.

Correction sélective

Là encore, c’est toute l’image qui est éclairci ; il vous faudra encore passer par le masque de fusion pour désélectionner le visage du personnage.

Masque de fusion

Le premier changement de couleur de cheveux est terminé !

Passer de châtain à roux avec Photoshop

Pour passer du châtain au roux, c’est aussi simple ! Il vous suffit de sélectionner le masque de réglage « Teinte/Saturation » et de jouer avec le curseur pour trouver la couleur souhaitée.

Changement de couleur

Là encore, comme dans la précédente étape, vous devez désélectionner le visage grâce au masque de fusion de Photoshop.

Comment passer de châtain à brun foncé

Il est facile de passer du châtain au brun foncé ou noir. Le principe est le même que pour les précédentes couleurs.

Couleur neutre

Dans les masques de réglages, sélectionner « Teinte/Saturation ». Dans la fenêtre qui apparaît, dans le menu déroulant sélectionnez la couleur qui correspond à la teinte dominante des cheveux de votre personnage et à l’aide de la pipette, sélectionnez dans les cheveux de votre image la couleur dominante. Enfin, dé-saturez à l’aide du curseur. Les cheveux sont maintenant gris !

Désaturation
Pour les assombrir, il vous suffit de sélectionner l’outil « courbe » et de diminuer la luminosité. Pour éviter d’avoir à dé-sélectionner les zones non concernées par ce réglage, vous pouvez faire glisser le masque de fusion du calque de réglage précédent (Teinte/Saturation) en maintenant la touche Alt (pour les PC) ou Option (pour les Mac) pour remplacer le masque de fusion de votre réglage « Courbe ». La sélection sera alors identique !

Métamorphose Photoshop

Les résultats obtenus ici sont assez naturels ; libre à vous ensuite de forcer les couleurs.

Alors, bonne création et à bientôt pour de nouveaux tutoriels.

Reflet sur l'eau

Tutoriel Photoshop : créer un reflet sur l’eau

By | Tutoriels Photoshop | No Comments

Les bases du projet graphique

Aujourd’hui, ce tutoriel vous montre comment créer un reflet sur l’eau avec Photoshop.

Dans un premier temps, il vous faut sélectionner une photo comprenant un point d’eau comme un lac, un étang, une flaque ou un océan. Pour cela, vous pouvez vous aider des banques d’images que j’ai pu vous proposer dans les ressources web ou tester Unsplash.com, découvert plus récemment.

Dans un deuxième temps, ouvrez cette image dans photoshop et à l’aide de l’outil texte, écrivez votre texte, comme ici « Masdigbord » ou bien, placez y votre logo.

Ouverture document

Si vous avez choisi d’écrire directement votre texte, vous aurez très certainement besoin de le modifier en cours de projet. Je vous conseille donc d’en faire un objet dynamique. Pour cela, faites un clic droit sur le calque de votre texte et choisissez « Dupliquer le calque ».

Etape2

Une fenêtre va alors apparaître. Il vous faut donner un nom à ce nouveau calque mais aussi choisir si vous l’enregistrez sur l’image existante ou sur un nouveau document. Je vous invite donc à choisir l’option « Nouveau » comme indiqué sur la photo ci-dessous.

Duplication

L’objet dynamique.

Enregistrez cette nouvelle image en .PSD dans le même dossier que le fichier PSD de votre projet. Ensuite, retournez sur le projet dans Photoshop pour supprimer le texte écrit directement sur l’image et y importer celui créé précédemment en objet dynamique.

Objet dynamique

Pour cela, rendez vous dans : Fichier > Importer et lier > sélectionnez votre fichier « Objet.psd » puis tapez « Entrée ». Répétez cette opération une deuxième fois pour ce qui correspondra au reflet dans l’eau.

Objet dynamique Photoshop

Les transformations de calques.

Sur le deuxième import, accédez aux fonctions de transformation manuelle en utilisant le raccourci clavier CTRL+T (pour les PC) ou CMD+T (pour les Mac) puis sélectionnez « Symétrie axe vertical ». Comme dans ce projet, votre logo prendra alors sa place de reflet, c’est à dire qu’il sera inversé par rapport à un axe horizontal (c’est la symétrie qui est verticale !) comme nous pouvons le voir sur la photo ci-dessous.

Image inverse

Notez que si vous modifiez l’objet dynamique, importé pour représenter ici le logo et son reflet, cela modifiera les deux images à la fois dans votre projet. Nous pouvons constater sur cette photo que le reflet est trop lisse et trop opaque pour ressembler à un réel reflet sur l’eau. Il faut donc ajouter des filtres sur le logo inversé afin de rendre réaliste notre photomontage. Au préalable, il faut vous rendre dans l’objet dynamique (objet.psd) et appliquer un fond noir à votre logo ou texte/forme, comme ici sur mon « Masdigbord », puis enregistrez.

Flou Gaussien

Vous verrez sur votre projet qu’un fond noir est apparu derrière votre forme/logo. Afin de le faire disparaître, je vous invite à modifier votre mode de fusion des calques : il faut le passer de « normal » à « superposition »; comme sur l’image ci-dessus. Ensuite, pour appliquer un effet de « vagues » sur le logo, allez dans : Filtre > Galerie de filtres > Déformation > Océan.

Effet vague

Il vous suffira ensuite de jouer avec les 2 curseurs « Intensité » et « Amplitude » pour avoir le niveau de déformation souhaité, c’est à dire celui qui correspond au mouvement sur l’eau visible sur la photographie. L’effet donne un peu de réalisme mais ce n’est pas suffisant, il faut aussi appliquer un flou gaussien pour « fondre » le reflet dans le décor !

Flou gaussien

Il faut savoir doser le flou gaussien pour ne pas l’exagérer et simplement apporter du réalisme à la photo ; par exemple, pour cette photo, l’effet de flou est monté jusqu’à 1,6. De plus, toujours dans le but de fondre le reflet dans l’eau, il faut en modifier sa couleur afin qu’il prenne la même que celle des reflets de la montagne.

Pour cela, j’utilise le raccourci clavier CTRL+U ou CMD+U pour modifier les teinte/saturation. Cet effet ne s’appliquera ainsi que sur le reflet et non la totalité du projet graphique.

Teinte - Saturation

Afin d’apporter une couleur à du texte qui était blanc au départ, je vous suggère de cocher la case « Coloriser » et de jouer avec les curseurs jusqu’à l’obtention de l’effet et la couleur désirés. Sur l’image ci-dessus, on peut voir que cette étape permet d’incorporer le reflet dans notre photographie de manière réaliste.

Calques
Pour finir, il ne reste plus qu’à atténuer la hauteur du reflet. Pour cela, vous pouvez utiliser les masques de fusion.

Ajoutez-en un sur le calque du reflet et réalisez un dégradé noir vers blanc de bas en haut, ce qui aura pour but d’effacer une partie du reflet de manière uniforme.

Le but de toutes ces manipulations était de réaliser le reflet le plus réaliste possible d’une part et, d’autre part, de pouvoir modifier le document à la demande puisqu’on le sait bien, lors d’un projet graphique, on est très souvent amenés à faire des modifications en « cours de route » !

J’espère que ce nouveau tutoriel Photoshop vous aura apporté entière satisfaction et vous donne envie de l’essayer. Il me reste à vous souhaiter une bonne semaine et bonne création !

Un petit coup d’oeil sur le résultat final ?

Résultat

Tendances webdesign

Tendances du webdesign 2016 en 5 points

By | Webdesign | No Comments

Infos sur le Webdesign aujourd’hui

Quand on doit créer un webdesign, il faut bien sûr tenir compte des règles techniques à respecter mais aussi des contraintes liées au cahier des charges du client ou encore des tendances en terme de graphisme et de l’expérience utilisateur.
En effet, le webdesign ce n’est pas que l’art d’associer des couleurs et des images sur un site Internet ; il doit tenir compte du style, de l’ergonomie et de l’UX Design pour faire de la visite des sites Internet, des expériences uniques.
Webdesign GAFAM
Voici donc une sélection des dernières tendances du web pour 2016 et les évolutions.
Il est vrai que le monde technologique est en pleine mutation avec le passage au tout mobile qui a accéléré et les interfaces qui ont dû s’adapter, le développement des objets connectés et l’arrivée des assistants vocaux.
Ce sont les GAFAM – pour Google, Apple, Facebook, Amazon et Microsoft – qui ont fait le webdesign d’aujourd’hui en optant pour le flat design , un style épuré, de grands visuels, des sites onepage et en plein écran, un grand retour de la typographie et surtout, le storytelling ! De plus, comme nous l’avons vu dans un autre article, les icônes ou pictogrammes sont encore largement utilisés.

Actus : les 5 tendances du webdesign en 2016

Les nouvelles tendances qui voient le jour ou se développent cette année sont :

  • Le material design : l’ergonomie et l’esthétique ont été optimisés pour la mobilité. Le style est semi-flat, les couleurs chatoyantes, il joue sur les profondeurs et les animations. Il est basé sur le réalisme et la physique, unissant ainsi réel et virtuel. Lancé par Google, le material design aurait un impact positif sur le SEO. A bon entendeur !
  • Le web immersif : c’est une autre façon de vivre le web. Nous parlons ici d’expérience utilisateur et non plus de navigation web. L’internaute participe à un « voyage immersif », sous forme de jeu le plus souvent, et qui marque son esprit à l’image de la campagne Petit ecolier de Lu en 2014 ou encore de Magnum plus récemment.
  • La vidéo : c’est un levier d’acquisition de trafic très efficace, alors pourquoi s’en priver ? L’internaute préfère regarder une vidéo à la lecture d’un article. Aujourd’hui, elles sont intégrées dans les sites web.
  • App first : après le responsive design et le mobile first, c’est au tour des applications mobiles d’être référentes. Ceci est lié au développement des appareils wearable.
  • Smart data : les sites sont et seront ultra-personnalisés grâce à l’utilisation des data récoltées dans nos différents appareils (géolocalisation, habitudes de navigations…).

Ainsi, en prenant en compte ces informations sur les tendances du webdesign de 2016, il vous restera à réaliser un benchmark dans ce sens et à trouver l’inspiration grâce aux sites de référence en webdesign listés sur ce site web.

Tendances webdesign

Webdesign : sources d’inspiration

By | Webdesign | No Comments

Pour réaliser un webdesign, plusieurs étapes sont nécessaires en amont pour s’assurer que celui-ci sera en accord avec les codes et les tendances web du moment. Cela passe bien entendu par un benchmark concurrenciel, d’une part, et par un benchmark sectoriel, d’autre part, qui permettront de connaître et respecter les codes du secteur d’activité des sites réalisés.

Dans un second temps, après avoir réalisé une études webmarketing et stratégique, le webdesigner doit également trouver l’inspiration même s’il réalise son site web à l’aide d’un CMS comme WordPress. Notez, au passage, que Voici un tutoriel pour vous aider à réaliser un site web avec WordPress.

Dans cet article, je partage mes sources d’inspiration aussi bien pour les sites web que les sites mobile first ou les applications mobiles.

Inspiration pour le webdesign

Souvent, les benchmarks concurrentiel et sectoriel réalisés en amont orientent déjà notre inspiration. Avec des visites de sites comme Pinterest et Behance, il est possible de booster son imagination et de se tenir informé des dernières tendances en matière de webdesign.

Pour autant, il existe quelques autres sources indispensables comme :

Blog du Webdesign

Mais surtout, il ne faut pas négliger les thèmes des différents CMS présents sur le marché (en ce qui me concerne, ce sera plutôt WordPress et Prestashop) qui offrent un panorama de tout ce qui se fait sur le web. Il ne faut donc pas hésiter à s’en inspirer !

Inspiration pour le design mobile

En ce qui concerne l’inspiration mobile, on retrouve des points communs à ceux cités plus haut comme Pinterest ou Behance mais j’utilise préférentiellement Mobile Awesomeness qui met en avant des designs mobile dans l’air du temps.

Awesomeness - webdesign mobiles

Si, vous aussi, vous souhaitez partager vos meilleurs sites d’inspiration, alors n’ hésitez pas à les laisser en commentaire.

Tutoriel Photoshop

Photoshop : utiliser des textures de fond pour vos images

By | Tutoriels Photoshop | No Comments

Aujourd’hui, voici un tutoriel pour apprendre à utiliser des textures trouvées sur le web, notamment grâce aux à mes ressources web pour Photoshop , afin de réaliser le fond d’une image et lui donner du relief.

Choix des textures pour Photoshop

Dans un premier temps, je vous invite à choisir la photographie que vous souhaitez mettre en valeur ainsi que les différentes textures à utiliser avec Photoshop. Pour ce tutoriel, j’ai choisi une image romantique avec un fond sombre. Je souhaite lui donner du relief et pourquoi pas un petit côté gothique grâce à différentes textures.

En ce qui concerne les textures, j’ai choisi d’en utiliser 6 ; et c’est le mélange de ces 6 textures qui donnera du caractère à ma photographie initiale. En effet, si je n’avais choisi qu’une seule texture, le relief aurait été trop léger.

Pour le choix des texture, on peut aussi bien utiliser du bois que de la pierre ou même du sable. Tout dépend du grain et de l’ambiance que vous souhaitez donner à votre photo.

Voici donc les 6 textures utilisées pour ce tutoriel Photoshop.

Textures opensource

Photoshop : intégration des textures dans l’image.

Une fois la photographie principale ouverte dans Photoshop, vous pouvez importer vos texture et les superposer sur le plan de travail. Ensuite, pour plus de clarté dans vos calques, rassemblez toutes vos textures dans un seul dossier en cliquant sur l’icône sélectionné en rouge ci-dessous.
Etape 1 tutoriel photoshop

Puis, choisissez « Nouveau groupe d’après les calques ».Cette manipulation aura pour but de grouper les actions que nous ferons sur les différentes textures.

Tutoriel Photoshop 2

Le dossier contenant les différentes textures doit être placé au-dessus de l’image principale. Placez-vous sur ce dossier et appliquez-y un masque de fusion (icône tout en bas représentant un rectangle avec un cercle à l’intérieur).

Ajout de la texture

Puis cliquez sur le masque de fusion pour le sélectionner comme indiqué sur le screenshot ci-dessus ; une fenêtre apparaît ; cliquez alors sur « Inverser » pour passer le masque de fusion en noir. On constate alors que les textures qui étaient sur l’image principale disparaissent pour laisser place à la photographie. La prochaine étape consiste donc à faire apparaître les textures sur le fond de la photo principale.

Photoshop 3

Pour cela, restez sur le masque de fusion, sélectionnez l’outil pinceau avec la couleur blanche et choisissez le diamètre approprié pour « gommer » le fond de la photo initiale pour faire apparaître les textures. Mais à ce niveau, les textures ne sont pas mélangées.

Outil Photoshop

Afin d’incorporer au mieux les texture à l’image il faut changer leur mode. Ouvrez alors le fichier des calques de textures, puis sélectionnez toutes les textures ensemble. Puis, parmi les différents modes, passez-les de « Normal » à « Lumière tamisée ». Les calques de textures deviennent donc tous transparents et semblent faire partie du fond de notre photo initiale.

Il reste encore quelques réglages de couleur à réaliser.

Etape 6 tutoriel Photoshop

Pour cette dernière étape, tout d’abord, vous devez rendre invisibles tous les calques de texture. Puis, procédez indépendamment sur un calque de texture à la fois ; sélectionnez les calques et utilisez le raccourci Ctrl+L ou Cmd+L pour faire apparaître la fenêtre des « Niveaux ». Jouez alors avec les curseurs sélectionnés jusqu’à l’obtention du résultat attendu. Cela aura pour effet de modifier la luminosité et les différents contrastes.

Vous pourrez juger du résultat sur la photo ci-dessous qui vous permettra de comparer la photo avant et après retouche photo.

Résultat tutoriel Photoshop

Le résultat vous plaît ? Alors, à votre tour et bonne création !

Envie de travailler avec moi ?


Voir mon CV   Me contacter