Category Archives: Graphisme

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

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.

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.

Image texture

Ressources web : les textures

By | Graphisme | No Comments

Ressources web : mise en relief avec Photoshop

Ressource web texture
Aujourd’hui, je vous propose de découvrir les meilleures ressources web vous permettant d’obtenir des textures originales et gratuites. En effet, la clé de la réussite de la retouche photo ou des photomontages est le rendu réaliste et donc la mise en relief.
Pour nous aider dans cette démarche, il nous suffit d’appliquer et d’incorporer des textures sur nos images avec différents effets. Cette semaine, un tutoriel vous expliquera comment réaliser un fond texturé sur une image à l’aide de textures.
Il existe donc différents types de textures telles que des craquelures, des fissures, du sable ou des peintures grunge (irrégulières) que vous pouvez vous-même prendre en photo (lambris, asphalte, mur, métal…etc) ou bien trouver sur le web.
Selon les textures appliquées sur vos images, l’ambiance changera radicalement. Vous pourrez obtenir des effets vieillis, ou des fonds présentant des aspérités ; en bref, vous apporterez du caractère à vos photographies.

Les 5 meilleures ressources web de textures pour Photoshop

Ressources web
Voici les meilleures ressources web de textures gratuites pour réaliser vos effets avec Photoshop :
Wildtextures.com : ce site comprend 16 rubriques. Globalement, il n’y a pas une très grande quantité de textures mais elles sont toutes de très bonne qualité.
Freestocktextures.com : sur ce site, il n’y a pas de filtre mais vous pouvez choisir d’utiliser son moteur de recherche en anglais ou de faire défiler toutes les textures, ce qui vous permettra aussi de trouver l’inspiration.
Textures.com : ce site propose de très nombreuses textures très bien classées dans des rubriques, ce qui facilite la recherche ; en revanche, il faut s’inscrire gratuitement pour pouvoir télécharger les images. 15 crédits gratuits sont accordés aux nouveaux inscrits, ensuite, le service est payant.
Lost and Taken : ce site présente des images de qualité, classées par rubriques également mais il y a moins de choix que sur le site précédent.
Texture Mate : ce site propose de très nombreuses textures à utiliser pour photoshop. Elles sont classées en rubriques et sous-rubriques mais aussi par couleur pour faciliter votre recherche. Les photos sont également de bonne taille et qualité.

Il est intéressant de noter que vous pourrez également trouver des textures dans les banques d’images citées dans un de mes articles.

Ressource de textures pour le web

Ressources web Subtle pattern
Quand vous réalisez un site internet, vous pouvez également avoir besoin d’une texture de fond pour lui donner du relief. Parmi les différentes ressources du web, j’utilise beaucoup Subtle Pattern.
En effet, ce site propose des textures modernes et subtiles et vous permet de les tester sur la totalité de l’écran avant leur téléchargement. Autre point positif, ces textures sont gratuites malgré leur grande qualité. Ce site est un de mes chouchous pour le webdesign.

Logo et identité visuelle

Créer un logo efficace en 6 points

By | Graphisme | No Comments

Le logotype ou logo est le nom de l’entreprise « dessiné » de telle sorte qu’il soit identifiable et différenciant par rapport aux concurrents ; c’est en quelque sorte la carte d’identité de l’entreprise. Le logo fait donc partie intégrante de l’identité visuelle de l’entreprise. Dans cet article, vous saurez comment créer un logo efficace en 6 points.
Créer un logo n’est donc pas forcément un travail simple car des règles, des codes doivent être respectés pour optimiser son efficacité.

La simplicité synonyme d’efficacité

Afin qu’il soit facilement compréhensible et mémorisable, un logo doit être simple tout en étant cohérent avec l’activité de l’entreprise. Ainsi, il est préférable de ne pas ajouter trop de détails à votre logo de manière à ce qu’il soit lisible quelle que soit sa taille. De plus, il est nécessaire de penser aux couleurs alternatives du logo dans le cas où celui-ci serait imprimé sur un matériau foncé ; il doit rester lisible quel que soit son support. Vous pouvez également prévoir des variantes telles qu’une version sans pictogramme, une version sans typographie, une version carrée pour les réseaux sociaux…Votre logo doit être adaptable aux différents canaux de communication.
Voici quelques exemples de logos efficaces par leur simplicité : Nike, Mac Donald’s, Chanel…etc.

Logos célèbres

Le choix des couleurs

Il est conseillé de ne pas utiliser plus de trois couleurs sauf si vous réalisez un camaïeu de couleurs mais encore faut-il savoir les associer pour obtenir une harmonie de couleurs. Elles peuvent être contrastées, complémentaire ou former un camaïeu. Vous pouvez vous aider du cercle chromatique pour bien les choisir. Il existe un outil en ligne Adobe Kuler, très utile car après avoir choisi vos couleurs, vous pouvez utiliser les codes hexagonaux de ces-dernières.
Il ne faut évidemment pas perdre de vue que chaque couleur a une symbolique ; il est donc impératif que celle-ci soit en accord avec les valeurs de l’entreprise que vous souhaitez représenter car elle influencera forcément le message véhiculé par le logo.

Roue chromatique

Le choix des formes

Les formes que vous choisirez devront permettre d’identifier l’activité de votre entreprise et, comme les couleurs, elles véhiculent un message qui doit être cohérent avec celui que vous souhaitez diffuser. Il est important de faire attention aux doubles sens que peuvent avoir les illustrations sous peine de risquer la polémique, comme cela a été le cas pour certaines marques.

La typographie

Comme pour la couleur ou les formes, la typographie doit être adaptée au secteur d’activité ; ainsi, nous n’utiliserons pas de typographie technique dans le secetur de l’enfance ou de la beauté, par exemple.
Dans un souci de cohérence et d’harmonie visuelle, il est conseillé de ne pas utiliser plus de 2 typographies différentes pour votre logo. Il vous faudra faire en sorte que votre logo soit lisible aussi bien sur des écrans que sur des supports de communication imprimés. Le choix de la police de caractère est donc primordial.
Vous pouvez distinguer deux types principaux de typographies :

  • Les polices sans empattement, du type « Arial », « Helvetica » ou « Verdana », sont privilégiées pour les écrans et pour exprimer la modernité
  • Les polices à empattement, du type « Times New Roman », « Garamond » ou « Georgia », servent plutôt à donner une connotation traditionnelle voire sérieuse et sont privilégiées pour le print.

Format privilégié : le format vectoriel

Il est recommandé de veiller à ce que votre logo soit réalisé en format vectoriel (.ai ou .eps) ce qui vous permettra de l’agrandir à l’infini sans perte de qualité car il n’est pas pixelisé. Ceci ne vous empêchera pas de le convertir par la suite en jpeg (format plus communément utilisé, notamment dans le web).

Les sources d’inspiration

Comme pour toute création graphique, il est utile de réaliser un benchmark des logos des concurrents ou de secteurs d’activité proche de celui de votre entreprise. Ceci vous permettra de savoir comment vous différencier et de connaître les codes de votre secteur d’activité. Il est aussi bon de connaître les tendances du moment afin de pouvoir créer un logo à la fois tendance et intemporel, ce qui vous évitera de le changer trop souvent.
Il existe plusieurs sources d’inspiration telles que : Logofaves, Pinterest, Logoed ou Logo Vectors.

Logo Pinterest

Il est également possible de s’inspirer des sites d’icônes ou pictogrammes comme ceux que nous avons vus dans l’article sur les ressources web vu précédemment.

Réseaux sociaux

Réseaux sociaux : utilisation de Canva pour illustrer vos posts

By | Graphisme | No Comments

Lorsque vous publiez des posts sur vos réseaux sociaux, pour augmenter vos chances d’être lu, il est conseillé de les illustrer avec des visuels attractifs. Pour cela, pas besoin de faire l’acquisition de Photoshop ou d’autres logiciels de retouche photo si vous n’en possédez pas. Je vous conseille Canva, un outil en ligne gratuit qui vous permettra de créer des visuels uniques et dans l’air du temps en seulement quelques clics.

Présentation de l’interface de Canva

L’interface de Canva est extrêmement simple et assez intuitive. Vous y accédez après votre inscription. Le menu est composé d’actions proposées sur le côté gauche. Pour commencer il suffit de cliquer sur le gros bouton vert « Create a design »et Canva vous propose différents formats de documents.

Les réseaux sociaux ayant chacun un format spécifique de visuel sur ses posts, je vous suggère de choisir le format « Twitter post » pour notre tutoriel puisque nous souhaitons publier sur Twitter.
Réseaux Sociaux - Illustration

Commençons notre tutoriel. Il suffit ensuite de suivre les étapes dans l’ordre proposé par le menu pour vous permettre de connaître les fonctionnalités de l’outil en ligne.

Si vous avez une idée précise en tête concernant le thème de votre visuel, il vous suffit d’utiliser l’outil de recherche et de taper le mot en anglais. Vous seront alors proposées les illustrations qui correspondent à votre requête. Une grande partie des images proposées sont gratuites, et certaines sont payantes. Pour les utiliser sur votre composition, il vous suffit de faire un « glisser – déposer » de l’image vers le cadre de votre création.

Etape 2 - Canva

Mais Canva ne met pas seulement à disposition des illustrations, il propose également des photos que vous pouvez rechercher dans la rubrique « Elements » du menu.

Etape 3 Canva

Réseaux sociaux : création d’un visuel pour un post Twitter

Après avoir choisi l’illustration, nous pouvons ajouter du texte, pour cela, je vous conseille de sélectionner la rubrique « text » du menu. Plusieurs exemples vous sont alors proposés. Il vous suffit de glisser – déposer le modèle qui vous convient et de l’adapter à votre message. Vous pouvez changer le texte, la taille, la couleur et même la police. Seule la structure du texte reste la même !

Etape 4 réalisation graphique canva

L’étape suivante est la modification du fond du visuel. Deux options s’offrent à vous. Vous pouvez changer la couleur de fond avec la palette ou alors utiliser une des textures de Canva par « Drag & Drop ».

Etape 5 réalisation visuel

Enfin, sachez que vous avez la possibilité de télécharger vos propres photos ou illustrations dans la dernière rubrique du menu. Il suffit de cliquer sur le gros bouton vert « Upload your own image » et de parcourir vos photos pour sélectionner celle que vous souhaitez utiliser. Pour ce tutoriel, je n’en utilise pas et finit son visuel sur l’image ci-dessous.

Etape 6 canva réseaux sociaux

Enfin, la dernière étape consiste à télécharger le visuel que vous venez de créer pour l’utiliser sur votre post. Pour cela, je vous conseille de cliquer sur le bouton « Download » situé en haut à gauche de votre écran. Vous n’êtes pas encore convaincu par l’intérêt de cette opération ? Il vous suffit de jeter un coup d’oeil sur le compte Twitter illustré ci-dessous. Vous pouvez voir sur le premier tweet une illustration utilisée par défaut par Twitter (il reprend l’image à la Une de WordPress ou une image de l’article) ; d’autre part, vous voyez que le tweet utilisant une illustration réalisée avec Canva est beaucoup plus visible !

Visuel réseaux sociaux

Alors, convaincus ? A vous de jouer maintenant !

Vous avez aimé ce nouvel article ? Vous aimerez aussi :

photoshop

Top 5 des meilleurs tutoriels vidéos pour dompter Photoshop

By | Graphisme, Webdesign | No Comments

Pour mon premier article, je souhaite partager avec vous les meilleures sources de tutoriels gratuits pour se former sur l’outil Photoshop. Ce logiciel est incontournable pour réaliser de fabuleux webdesign ou simplement retoucher les images qui mettront en valeur votre site web.
Il existe de nombreux magazines ou blogs qui partagent quelques tutoriels mais je préfère les vidéos qui sont parfois plus explicites que des mots même si elles ne sont pas en français.
Il en existe là encore une grande variété mais voici le TOP 5 des tutoriels vidéo gratuits pour se former sur PHOTOSHOP.

1. Tuto.com 

Sur ce site, vous devez créer un compte pour pouvoir visionner les vidéos même gratuites mais ceci vous permet d’enregistrer des favoris et de télécharger les vidéos sur votre ordinateur ou votre tablette. Ce site ne propose pas que des tutoriels Photoshop ; il traite de nombreux thèmes tels que le graphisme, le webdesign, le code pour les développeurs, la photographie…Etc.
En exemple, j’ai choisi pour vous cette vidéo qui concernera surtout les débutants mais qui est très bien réalisée.

2. Blue lightning TV sur YouTube

Ces tutoriels sont simples, succincts et très bien faits. Même s’ils sont en anglais ils sont très compréhensibles car leur créateur parle lentement et est bon pédagogue ; de plus, les vidéos sont très bien réalisées et de bonne qualité. En voici un exemple concret avec le changement de matière d’un objet.

3. Tutoriels video.com

Ce site propose quelques tuto sur Photoshop intéressants. Les vidéos sont de bonne qualité et en français. Avec par exemple la reproduction de l’effet Vintage sur une photographie contemporaine. Ce site concernera plutôt les débutants.

4. Arunz creation

Ce sont des tutoriels en anglais mais on y apprend des effets sympa pour des design créatifs à l’image de celui présenté ci-dessous.

5. Team8 tuto

On y trouve de bon tutoriels en français dont celui-ci sur la création d’un webdesign moderne.

A ce top 5 des tutoriels PS, il faut absolument rajouter Tuts+ même s’il ne s’agit pas de vidéo.
En effet, ce site comprend d’excellents tutoriels décrits étape par étape, à l’image de celui que j’ai sélectionné pour vous pour la création d’un webdesign élégant.
Ce site propose des tutoriels aussi bien sur la création de webdesign que sur la création graphique.

En maîtrisant ce logiciel de retouches photos, vous serez capables de réaliser de magnifiques webdesign et/ou des images de qualité professionnelle, donnant ainsi une image positive à votre site web qu’il s’agisse d’un blog ou du site de votre entreprise.