Fond texture papier : des créations tactiles à l’écran

Un fond texture papier donne à une création écran un air imprimé, tactile et fait main. Cela fonctionne parce que le papier évoque le soin : une invitation, une lettre, un menu pour lequel quelqu’un a choisi un support. Pour réussir, il faut trois couches qui travaillent ensemble : une couleur de base chaude ou teintée, une fibre ou un grain fin, et une lumière un peu irrégulière sur la feuille. La plupart des faux papiers échouent en forçant la troisième.

Quel rendu papier convient à votre création

Le papier n’est pas une texture unique. Le chiffon de coton, le kraft, le papier journal et le washi n’ont rien à voir entre eux, et chacun convient à un type de marque différent. Commencez par nommer le papier que vous imitez.

Comment créer un fond texture papier

Vous pouvez construire un papier convaincant de zéro dans n’importe quel éditeur doté de bruit et de modes de fusion. Le papier scanné fonctionne aussi, mais une texture construite s’adapte proprement à toutes les tailles et ne montre jamais le bord d’une vitre de scanner.

1. 1

   Remplissez la base

   Remplissez le canevas avec votre couleur de papier tirée du tableau, par exemple #f3ead8 pour le crème non couché.

2. 2

   Ajoutez un grain fin

   Ajoutez un calque gris moyen, appliquez un bruit monochrome et réglez-le en Produit ou Lumière tamisée à environ 4 à 8 pour cent. C’est le grain de surface que possède tout papier.

3. 3

   Ajoutez la fibre

   Ajoutez un second calque de bruit plus gros et étirez-le ou floutez-le légèrement dans une direction. À très faible opacité, il se lit comme des fibres qui traversent la feuille.

4. 4

   Rendez la lumière irrégulière

   Ajoutez un fondu radial doux, un peu plus clair dans un coin et un peu plus profond dans le coin opposé. Le vrai papier n’est jamais éclairé de façon parfaitement uniforme.

5. 5

   Vérifiez l’encre

   Placez votre plus petit texte par-dessus et regardez-le sur un téléphone. Si un mot devient plus difficile à lire, réduisez la texture avant toute autre chose.

Le grain fin de l’étape deux est la même technique que celle expliquée dans la texture grain. Le papier en utilise simplement moins, sur une base plus chaude.

Un papier discret vaut mieux qu’un faux papier

Les résultats de recherche pour les fonds papier regorgent de feuilles froissées, de bords brûlés et de traces de tasse. On dirait une version parc d’attractions du papier, qui se bat avec chaque mot posé dessus. Une bonne texture papier est assez discrète pour qu’on la ressente avant de la voir.

Idées de texture papier pour de vraies créations

Le papier donne le meilleur de lui-même là où un objet imprimé existerait naturellement. Voici les endroits où il est vraiment utile.

• Menus de restaurant sur crème non couché, composés en serif. Voir la création de menu de restaurant.
• Newsletters et journaux, où le papier rend la lecture longue plus apaisée.
• Faire-part de mariage et invitations ; la création de faire-part de mariage propose des mises en page.
• Marques artisanales et fait main, sur kraft ou gris recyclé.
• Cartes citation, où une seule ligne sur papier ressemble à un mot écrit par quelqu’un.

Typographie et encre sur fond papier

Le papier change la lecture des caractères. Les serifs se sentent chez eux sur le crème et le coton, car ils ont été dessinés pour l’impression ; un sans serif net sur papier journal ou gris recyclé paraît moderne et un peu industriel. Serif ou sans serif explique le compromis. Quel que soit votre choix, utilisez pour l’encre un quasi-noir chaud comme #2b2420 plutôt qu’un noir pur, qui paraît numérique sur une feuille teintée.

Gardez le texte courant à une taille confortable et donnez-lui plus de graisse que sur du blanc : la texture mange un peu de contraste, surtout sur téléphone. Pour les lignes courtes sur papier, comme une seule phrase sur une carte citation, vous pouvez vous permettre une graisse plus légère et plus d’espace. Si vous hésitez entre le papier et d’autres surfaces, la texture de fond compare côte à côte les grandes familles.

La texture papier en CSS

Pour un site web, superposez un dégradé de lumière irrégulière à la couleur de base, puis ajoutez un calque de bruit très léger en SVG. Une baseFrequency plus basse que pour un grain argentique donne un rendu plus doux et plus fibreux.

.paper {
  position: relative;
  isolation: isolate;
  color: #2b2420;
  background:
    radial-gradient(ellipse at 20% 15%, #fbf7ef 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, #e8dcc4 0%, transparent 60%),
    #f3ead8;
}

.paper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.08;
}

Parmi les Marks de Gradiently figurent des matières papier et sable : fibres artisanales, lavis doux et grain fin qui dérive, rendus en direct à toutes les tailles, avec la partie la plus calme de la feuille qui se place derrière vos mots. Cherchez « papier » dans le Marché ou filtrez par fond clair pour en trouver un, puis créez avec gratuitement.