Comment embellir le thème de votre WordPress avec CSS ?

Tout est dans le titre. Ce petit tuto sera très, mais alors là très technique, voir indigeste. Mais le jeu en vaut peut être la chandelle si vous souhaitez une présentation aux petits oignons.

Lorsque l’on se lance dans la conception d ‘un site auteur, d’un blog de chroniques, il faut passer par 4 étapes (oui peut être plus, mais restons simples).

  • Le choix du support,
  • L’apparence du site,
  • Le contenu du site,
  • Le référencement du site.

Et on n’est pas sorti de l’auberge avec ces quatre-là !

Le choix du support

J’entends par là, où l’on va héberger son site mais également de quoi il sera fait (parfois, c’est du 2 en 1).

WordPress ? Blogger ? Joomla ? Wix ? Weebly ? Ils ont tous leurs qualités et leurs défauts. Et hélas, ce n’est pas le but de cet article d’en faire la comparaison (oh la vilaine !). De plus, si ce qui va suivre fonctionne avec toutes les plateformes (à condition qu’elles permettent ce genre de modifications), nous nous axerons sur WordPress.

L’apparence du site

C’est le but de l’article. J’y reviendrai donc plus loin. Le thème, le template, le design. Les polices, couleurs, images, l’agencement. Nous vivons dans un monde ou le visuel est important, soigner l’apparence de son site fait tout de suite pro, passionné, sérieux. Couplé avec une bonne organisation, il fait plaisir à l’un des cinq sens : la vue.

A l’époque où je jouais sur des forums roleplay, le design était devenu quasi primordial dans le choix d’un forum pour pas mal de nouveaux joueurs. Oui, c’est bête, ce devait être l’ambiance entre membres, les animations et, bien entendu, l’univers dans lequel se déroule le jeu. Mais l’aspect avait grande importance aussi. Parfois trop sophistiqué, l’on pouvait s’y perdre ou se retrouver avec des bugs selon le navigateur utilisé. Voilà pourquoi je conseille toujours la simplicité à défaut de connaissances techniques.

Sinon, les plus téméraires touchaient au code source du forum pour créer de véritables petits bijoux, et ce code source, c’est le CSS (et l’HTML).

Le contenu du site

Que je passerai outre également. Il dépend de ce que l’on souhaite y voir apparaitre. Le tout est de construire un menu bien organisé et hiérarchisé.

Le référencement

Bon, je crois que j’ai assez saoulé la terre entière avec ça. Visitez mon blog 😀

Qu’est-ce que le CSS ?

Acronyme de Cascading Style Sheets, le CSS est une suite de paramètres destinés à définir l’aspect de certains éléments de votre site.

Par exemple, vous voulez que vos titres soient en police Garamond, taille 14, gras, italique, souligné en pointillés d’une épaisseur de 1 pixel. Votre texte justifié en Arial 12 et dont chaque première ligne de paragraphe soit en retrait. Ceci est un exemple succinct de ce que vous pouvez faire en CSS.

Vous pouvez y ajouter de la couleur, des ombres, des effets (quoique ‘tention avec les effets, d’un navigateur à l’autre, cela peut être différent), des marges, des tailles… enfin bref, tout ce que vous avez déjà vu sur un site quoi.

Et cela ne marche pas que sur le texte, sur les images aussi. Sur tout le site.

C’est clair qu’un site complet requiert un code CSS assez conséquent et compliqué à force. Il faut alors tout définir, les marges, la taille et l’emplacement de chaque partie du site, et que ce soit Responsive (= pas tout pété sur téléphone et sur tablette) par-dessus le marché.

Mais pour WordPress, vous n’aurez besoin que de l’essentiel : les paramètres (et la syntaxe… oui elle est partout celle-là ! Dans les romans puis même dans le code source de mon blog !).

Le HTML, qu’est-ce que c’est ?

C’est, en gros, le squelette du site. Autrefois (aux temps paléolithiques du net), les sites web n’étaient codés qu’en HTML. Ce langage est une série de balises destinées à afficher ceci ici, cela là-bas, etc.  Facile à reconnaitre, elles s’écrivent entre crochets <>. Certaines seules, la plupart accompagnées de paramètres.

Il a évolué au fil du temps, il s’est fait accompagner d’autres langages (comme le PHP, Javascript) qui le rend dynamique et interactif : c’est le Web 2.0.

Nous n’irons pas plus loin sur cette explication. Juste que vous avez le HTML qui est la charpente, les murs, les portes et les fenêtres de votre site et le CSS la décoration (et même un peu plus). Grosso modo.

Si je voulais en venir là, c’est que de l’HTML, vous allez en croiser. Autant savoir que ça existe.

Que modifier en CSS sur mon blog ?

Cela dépend de ce que vous voulez. Si tout vous convient, ne changez rien. Si un élément vous arrache les yeux et que le thème ne permet aucune modification via le panneau d’administration à ce niveau-là, ce guide est fait pour vous.

Par exemple, mon thème permet l’affichage automatisé de mes articles, titres, dates, résumés à la suite, mais l’aspect de ces éléments ne me plait pas. Le titre est énorme, la date est illisible car trop petite au contraire, et je voudrais que le résumé soit en italique. Et pas moyen de changer ça simplement dans le panel administration (ça arrive).

C’est ça que vous allez pouvoir changer.

Modifier concrètement le CSS de mon WordPress

Avant tout, il faut savoir comment se rédige le CSS. Vous allez voir, c’est comme une potion magique. Il faut respecter les ingrédients, les dosages, faire quelques tests (et risquer l’explosion) et tout ira bien. Rien n’est irréversible avec cette méthode. Cela ne vous plait toujours pas, vous modifiez. Vous en avez marre, vous enlevez vos modifications et, au pire, votre site redeviendra comme avant.

Voilà la bête (appréciez) :

.titre_article
{
font-size: 24px;
color: white;
font-family: 'Bree Serif', serif;
text-shadow: 2px 2px 3px #000;
}

Cela vous parle un peu ?

Cela concerne un bidule (en fait on appelle ça un sélecteur) nommé Titre_article. Il aurait pu se nommer Tartempion, le principal est de toujours l’écrire de la même façon dans le CCS et l’HTML (et qu’il évoque ce qu’il représente pour ne pas se perdre).

Ensuite, toujours placer les paramètres que l’on souhaite attribuer à notre Titre_article entre accolades. On appelle ça, un bloc. Là, pas de mystère, ces paramètres sont les mêmes pour tout le monde (vous en aurez une liste plus loin).

Ici, nous avons :

      • Font-size : la taille de la police, 24 pixels.
      • Color : la couleur du texte. Définie à White (blanc).
      • Font-family : vous avez deviné, la police de caractères.
      • Et enfin, un effet (tout simple), Text-shadow, une petite ombre portée pour faire joli.

Et on ferme bien l’accolade sinon ça va foirer.

Autre chose d’importance. Vous voyez, il y a un point devant Titre_article. C’est parce qu’il existe des sélecteurs ayant le même nom qu’une balise HTML. Modifier un sélecteur de balise HTML, c’est avoir un impact sur toutes ces balises et non élément par élément. 

C’est pratique si vous souhaitez uniformiser votre site (chaque image ayant une bordure bleue de 5 pixels, par exemple). Mais toutes les images seront touchées ! Y compris celle que vous souhaitiez peut-être sans bordure. Donc mieux vaut opter pour un sélecteur placé sur les images que vous souhaitez modifier uniquement. Et comme votre site est dynamique, une seule modification suffira pour que toutes les images concernées par ce sélecteur soient touchées.

Bref, un sélecteur de balises HTML s’écrit sans le point, un sélecteur personnalisé, avec le point. Mais ce point n’apparaît que dans le CSS pas l’HTML.

Mais avant, il faut savoir quel sélecteur modifier ! Comment se nomme-t-il ce petit coquin ?

Comment trouver le sélecteur CSS qui m’intéresse ?

Retroussez vos manches, on va mettre nos mains dans le bloc moteur de la bête.

Ouvrez votre blog/site via votre navigateur et dénichez ce que vous souhaitez modifier. Vous l’avez, votre titre trop gros ? Bien.

Selon votre navigateur, entrez en mode Inspection.

      • Sous Chrome : appuyez sur la touche F12 (et ne fuyez pas !).
      • Sous Firefox : appuyez sur les touches Ctrl+Maj+C (en même temps). Et ne fuyez pas non plus !

Faites la même combinaison de touches pour revenir en arrière.

C’est ici que cela se complique car vous allez devoir chercher dans le code source un peu sans trop savoir à quoi ressemble le sélecteur. Et justement, c’est le but, savoir quel nom lui a été attribué.

Ainsi, grâce à lui, vous ajouterez ou modifierez des paramètres.

Passez lentement votre curseur de souris sur les différentes lignes de codes de la fenêtre principale qui vient de s’afficher. Bougez un peu. Vous voyez ? Les éléments de votre site sont colorés. Cela signifie que vous passez sur le bout de code qui correspond à cet élément.

Je vous montre :

Pour affiner votre recherche et arriver au vilain titre mal fichu, déployez le code en cliquant sur la petite flèche de chaque balise div entre crochets (c’est souvent des balises div), poursuivez jusqu’à tomber sur la portion la plus exacte, le titre et rien que le titre.

Ici, je suis tombée sur un sélecteur du nom de bdp-post-title.

Ce que vous devez viser pour connaitre le sélecteur, c’est ce qui se trouve entre les parenthèses de class = «  » . Class définit toujours le sélecteur de l’élément, de la balise.

Bon, nous avons notre sélecteur, allons le modifier.

La syntaxe CSS (petit topo rapide)

Il y a des règles à respecter pour écrire du code CSS sinon ça plante et c’est tout moche (ou alors rien ne change). Certaines ne vous servirons pas, mais vous serez au courant.

Majuscules ou minuscules ?

Premièrement, houra, majuscule ou minuscule, le CSS s‘en fiche. On se sert souvent des Majuscules pour délimiter clairement deux mots comme TitresArticles plutôt que d’employer un underscore.

Syntaxe du sélecteur

Les sélecteurs s’écrivent uniquement avec des signes alphanumériques (lettres et chiffres) ainsi que le tiret et le tiret de soulignement (underscore). Et bien entendu, le point avant le sélecteur personnalisé, mais seulement avant, pas dedans ni derrière. Et pas d’espace dedans non plus, jamais !

Il existe des paramètres qui s’inscrivent avec deux points, mais ne compliquons pas les choses.

Vous pouvez tout écrire sur une même ligne pour gagner de la place.

Les accolades { }

Elles enferment vos paramètres tel un bloc destiné à votre sélecteur. Bon nombre d’erreurs viennent d’une accolade oubliée.

Le point-virgule ;

Le point-virgule à la fin de chaque paramètre. C’est comme le point de votre phrase, mais les informaticiens lui ont préféré le point-virgule. Il ferme le paramètre afin de passer au suivant sans encombre. Une erreur classique à traquer quand rien ne va.

Le paramètre !IMPORTANT

Oui il est important mais surtout il s‘écrit tel quel, avec le point d’exclamation collé devant. Si en modifiant votre sélecteur, rien ne se passe, que vous n’avez pas omis le point-virgule, ni l’accolade et écrit correctement vos paramètres, il se peut que le thème prenne la main sur votre modification. Ajouter !IMPORTANT en fin de paramètre, juste avant le point-virgule permet d’imposer vôtre modification.

Exemple : 

.bdp-post-content {text-align:justify !IMPORTANT;}

Ou modifier le CSS ?

Rendez-vous dans votre panneau administrateur de WordPress (connectez-vous, tout ça, au besoin).

Puis Apparence > Personnaliser > CSS additionnel

Selon le thème utilisé, cela peut varier, cherchez la case de CSS à personnaliser dans tous les cas.

Vous entrerez votre CSS dans cette grande case.

Comment modifier le CSS ?

Un exemple concret  :

Je voudrais que mon titre d’article de blog soit d’une taille de 16 pixels, de couleur jaune (beurk ! Mais c’est pour l’exemple) et centré (il sera centré par rapport au bloc qui le contient).

.bdp-post-title 
{
font-size : 16px;
color : yellow;
text-align : center;
}

Je vous ai décomposé tout ça, mais en une ligne ça marche aussi.

.bdp-post-title{font-size:16px;color:yellow;text-align:center;}

Voilà ! Vous avez modifié ce satané titre ! Alors ? Heureux ? 😀

Et c’est comme ça pour le texte, la date, l’image aussi. Enfin tout quoi.

Annexe 1 : Les paramètres et leurs effets

Ces paramètres sont trouvables sur le net. Et il en existe bien plus que ceux-ci. Tous ne seront pas utiles pour votre blog cependant.

Les termes en italique sont ceux à employer (au choix) et écrire sans faute. Les paramètres none ou normal sont par ceux pas défaut. Inutile de définir none ou normal donc, sauf si vous voulez forcer l’aspect par défaut.

Propriétés sur le texte :

      • font-family : insérer la police ici, comme expliqué juste en dessus.
      • font-size : taille de la police. S’exprime en px (pixels) mais également en % ou en em.
      • font-weight : la « graisse » de la police. On la définit en bold (gras) ou normal.
      • font-style : le style de police, défini en italic, oblique ou normal.
      • text-decoration : autres formes de style. On l’emploie avec underline (souligné), overline (souligné dessus), line-through (barré), blink (clignotant, ne fonctionne pas avec tous les navigateurs) ou none (rien).
      • font-variant : défini si la police est en petites capitales (small-caps) ou non (normal).
      • text-transform : la façon d’écrire le texte. Choisissez entre capitalize (les premières lettres de chaque mot en majuscule), lowercase (tout en minuscule) ou uppercase (tout en majuscules).
      • text-align : alignement sur la gauche (left), centré (center), à droite (right) ou justifié (justify).
      • line-height : hauteur de ligne (interligne) : se définit en pixel, % ou normal.
      • text-indent : indentation du texte sur la première ligne du paragraphe, comme dans un roman. Se définit en pixels.
      • white-space : gestion des « blancs » dans le texte. Vous avez pre (tout est conservé tel quel, pratique pour écrire du code source sans retour à la ligne ni chichi), nowrap (élimine les espaces superflus et le retour à la ligne) ou normal.
      • word-wrap : césure forcée avec break-word sinon normal.

Les couleurs :

Voir les façons de coder une couleur en Annexe 3.

      • color : couleur des caractères du texte. 
      • background-color : couleur de fond des caractères (comme un surlignage).
      • text-shadow : ombre portée. Se défini au moyen de valeurs en pixels plus la couleur entre parenthèses. Ce qui donne texte-shadow (horizontal,vertical, fondu, couleur) ; Exemple : text-shadow (5px 5px 2px blue);

Les bordures (peut être utilisées comme soulignement) :

Les bordures peuvent être définies pour les quatre cotés (et former une boite fermée autour de votre texte ou image), mais vous pouvez également définir chaque côté individuellement. Pour cela les valeurs sont énumérées dans cet ordre : bordure haute, droite, bas puis gauche.

      • border : définir une bordure en une ligne. S’écrit entre parenthèses, la taille, le style, la couleur.
      • border-up, border-right, border-down, border-left : la même mais pour l’un des côtés.
      • border-color : couleur de la bordure.
      • border-width : épaisseur de la bordure, s’exprime en pixels.
      • border-style : style de la bordure, se défini en solid (solide), dotted (série de points), dashed (pointillés), double (double ligne), groove (rainure), ridge (en relief), inset (relief intérieur), outset (relief extérieur).

Pour faire un soulignement, par exemple :

border-down(1px, solid,black);

En cadeau-bonus, insérer une lettrine :

C’est d’un niveau un peu au-dessus (quand je vous parlais des deux points, voici un exemple), mais copiez ceci en changeant juste les valeurs au besoin). Ici, le sélecteur c’est texte (donc modifiez selon votre sélecteur à vous).

.texte:first-of-type:first-letter 
{
   float:left;
   font-size: 20px;
   padding: 2px 2px 0 0;
}

Annexe 2 : Les polices de caractères extérieures

Vous pouvez utiliser des polices classiques disponibles dans WordPress ou employer des polices extérieures. A utilisez avec parcimonie car plus vous chargerez de polices extérieures, plus vous allongez le temps de chargement de votre page (et ce temps est important pour être bien référencé).

Je dirais que trois polices bien choisies pour un blog, c’est un bon compromis. Une pour les titres, une pour les textes, une troisième éventuelle pour les citations, un titre spécial ou mettre une portion de texte en évidence.

J’utilise surtout Google fonts (je suis très Google, la petite faiblesse qui me perdra) car je sais qu’elles sont libres de droit et le site permet de les intégrer facilement. Mais vous pourrez voir le principe sur vos faites votre marché sur d’autres sites.

Rendez-vous sur https://fonts.google.com/

Faites votre choix en cliquant sur le plus en rouge pour les glisser dans votre liste de sélection.

Quand vous avez terminé, ouvrez cette liste qui s’affiche en bas de votre écran.

J’en ai choisi deux. Cliquez sur l’onglet @IMPORT pour afficher les mêmes infos que moi.

Copiez la ligne :

@import url('https://fonts.googleapis.com/css?family=Alegreya|Alegreya+Sans');

Laissez tomber les balises style et copiez dans la case de CSS personnalisé (tout en haut, avant les autres paramètres).

Ensuite, définissez le nom de votre police employée comme indiqué dans la fenêtre dessous.

font-family: 'Alegreya', serif;

La règle : une font-family par sélecteur, sinon c’est la dernière mentionnée (et disponible) qui sera utilisée.

Annexe 3 : les codes couleur

Vous pouvez définir votre couleur de trois façons.

Via son nom (unique par couleur), son code hexadécimal (un truc du genre #FFFFFF, hashtag suivit de 6 symboles correspondant au Rouge, Vert puis Bleu) ou via son code RGB (Red, Green, Blue) qui est le mélange des trois couleurs primaires (aussi).

Ce qui donnera des propriétés telles que :

color : #FF0000;
background-color : yellow ;
border-color : rgb(255, 192, 203) ;

Pas de panique, il existe des listes de couleurs sur le net, des nuanciers, bref, tout ce qu’il faut. En voici un parmi d ‘autres :

https://htmlcolorcodes.com/fr/noms-de-couleur/

Annexe 4 : Des générateurs pour faire joli

A utiliser avec parcimonie également, tout en sachant que ce ne sera pas forcément reproduit de la même manière sur tous les navigateurs. C’est sans doute un (gros) niveau au-dessus, donc tatillonnez doucement si vous débutez. Faites des tests.

Piochez :

https://www.megaptery.com/2012/05/21-outils-generateurs-css-developpeurs-web.html

Voilà, nous sommes au bout de ce « petit » tuto sur comment bidouiller le design de son WordPress via le CSS. J’espère que je ne vous ai pas donné trop mal à la tête.

Comment générer et utiliser un QR code ?

Avez-vous déjà songé à insérer un QR code à la fin de votre livre ? Pourtant, il pourrait s’agir la d’un petit plus qui aiderait à faire connaître votre blog ou votre site auteur auprès de vos lecteurs.

Qu’est-ce qu'un QR Code ?

Le QR code ou Quick Response code, vous en avez certainement déjà croisé un. C’est ce drôle de carré empli de points qui, à l’œil nu, ne veut pas dire grand-chose. Mais décodé avec un logiciel scanneur de QR code, il vous permet d’être redirigé vers une adresse sur le web en particulier.

Ce qui est pratique pour éviter de taper l’adresse en question à la main.

Il s’agit d’une sorte de code-barre en deux dimensions créé par l’entreprise japonaise Denso-Wave en 1994. Il peut contenir une adresse web, un numéro de téléphone, même un mot de passe wi-fi et bien d’autres choses.

Comment générer un QR code ?

Ne cherchez pas à le faire vous-même, éteignez Photoshop, Gimp ou tout autre logiciel du genre. Un QR code, c’est complexe, il faut un générateur pour cela.

Il en existe plusieurs gratuits sur le net. C’est rapide. Il suffit d’entrer l’adresse, d’éventuellement choisir le type de code et de le télécharger ensuite. Je vous conseille un format image (jpg, png) qui passe partout.

Voici quelques liens qui font tout ça :

Le QR code, pour quoi faire lorsque l’on est auteur ?

Imaginez, vous avez publié votre roman au format papier. À la fin de votre livre, vous avez inséré votre adresse web, votre page Facebook ou tout autre lien vers votre réseau social le plus mis en valeur. Et heu… c’est imprimé, on ne peut pas cliquer dessus. Il va falloir que votre lecteur tape tout à la main. Si le faire sur un PC de bureau ou portable est sympa, sur téléphone cela se complique. Et si l’adresse est un peu complexe, patatra, il tombe sur une page invalide, risque de se décourager et de reporter sa visite à plus tard. Voire même à jamais.

Donc, on va simplifier ça avec ce code qui, lui, permettra d’afficher votre site/page/blog sans erreur. Pratique non ? Le logiciel de scan peut être trouvé facilement via le « store » de son appareil téléphonique. Il peut également être décodé par un logiciel PC via la webcam pour ceux qui en possèdent une.

Bref, c’est un petit quelque chose qui prend cinq minutes à mettre en place et offre une possibilité de plus à être visité. Pourquoi s’en priver !

Comment réaliser un booktrailer ?

En juin 2018, j’avais déjà publié un article concernant la création d’un trailer, axé plus spécifiquement sur les ressources. Cette fois, sans entrer dans des explications complexes, vous allez voir concrètement comment je conçois mes booktrailers.

Certes, il vous faudra mettre la main à la pâte, utiliser des logiciels qui vous sont peut être inconnus et vous sembleront complexes (voire même effrayants), mais sachez que tous possèdent des tutoriels complets pour être pris en main.

Un exemple ?

Rassembler les éléments composant un booktrailer

Pour créer votre booktrailer, vous aurez besoin d‘images, de vidéos courtes, d’une musique d’ambiance, et éventuellement de sons. Vous aurez également besoin de préparer le texte à afficher (rien que pour le relire à tête reposée et éviter la coquille pernicieuse qui pourrait s’y glisser). Notez ce qui vous semble convenir à votre projet et partez à leur recherche.

Musique d‘introduction d’Indiana Jones !

Où dénicher les éléments indispensables à votre booktrailer ?

Images ou extraits vidéos

La partie délicate, surtout si vous abordez un thème spécifique, les romans historiques, fantasy ou de science-fiction auront le plus de mal à dénicher les éléments visuels qui colleront à l’histoire.

Dans ce cas, soyez stratège et misez sur des décors plutôt que des personnages en costumes d’époque (quasi) introuvables ou d’autres vidéos plus abstraites.

http://mazwai.com/
https://videos.pexels.com/
https://pixabay.com/
https://www.videvo.net/
https://www.videezy.com/
https://pixabay.com/

La musique et éventuellement, des sons

La musique, c’est ce qui crée l’émotion. Elle aussi, doit être libre de droits et à usage commercial (si vous comptez faire un booktrailer pour un livre en vente).

Les sons sont facultatifs, mais cela peut égayer votre booktrailer. Pour La fiancée de Gravesend, j’ai ajouté des bruitages de type chants d’oiseaux ainsi que des coups de canon. C’est un petit plus qui apporte une dimension réaliste supplémentaire.

http://www.auboutdufil.com/
http://www.sound-fishing.net/
http://lasonotheque.org/
http://www.universal-soundbank.com/
http://soundbible.com/
http://audionautix.com/
http://www.bensound.com/
http://www.musicscreen.be/musique-libre-de-droit-action1.html

Il y en à certainement d’autres.

Le texte

Très important, à défaut de voix off ou de dialogues comme pour la bande annonce d’un film, vous avez le texte. Vous pouvez utiliser votre résumé de quatrième de couverture, ou un texte inédit. Il doit avoir le même but, susciter l’envie de découvrir votre livre sans gâcher la chute. Mais également glisser les informations nécessaires pour l’acheter ou le lire.

Idéalement, ce texte doit être synchro avec les images et la musique. Vous avez déjà tous vu une bande-annonce pour un film ou bien même d’autres booktrailers. Vous avez sans doute remarqué que tout était synchronisé. Un son spécifique lorsqu’un texte percutant s’affiche. Un changement d’instrument dans la bande-son pour donner un effet plus dramatique, etc.

Avec les éléments trouvés et ceux que vous avez éventuellement entendus, visualisez mentalement le résultat. Il se peut que vous deviez vous plier plus aux exigences techniques (effets spéciaux) disponibles par vos logiciels ou selon les médias obtenus. Créer un booktrailer n’est jamais simple. Le résultat entre ce que vous aviez en tête et le résultat final peut être très différents. C’est pour cela que je vous conseille de visionner et écouter d’abord vos trouvailles afin d’y piocher. Sinon vous risquez d’imaginer de grandes scènes épiques et d’être terriblement déçu en ne les trouvant nulle part.

Le logiciel de montage vidéo

Hélas, les choses changent et les logiciels, comme toute chose, naissent et meurent. C’est le cas pour le logiciel de montage gratuit Windows Movie Maker. C’est définitif, il est désormais introuvable par voie légale puisqu’il n’est plus développé.

Il existe d’autres logiciels, mais bien souvent pros, donc chers et même complexes.

À force de recherche, je suis finalement tombée sur une solution gratuite et en français. Davinci Resolve.

https://www.blackmagicdesign.com/products/davinciresolve/

Vous le téléchargez à cette adresse, dans le fond de la page, la version Free. Installez-le en prenant garde de refuser l’installation des logiciels tiers éventuels, laissez par défaut sinon.

Comment assembler les éléments de votre booktrailer ?

Créer un nouveau projet.

On considère que vous avez sous la main vos images, vidéos, sons, musiques (voir ci-dessus). On appelle ces éléments, des plans. Vous glissez-déposez vos plans depuis votre navigateur dans votre bibliothèque.

Si vous ne trouvez pas la bibliothèque, cliquez sur Bibliothèque de médias sous le menu en haut.

Pour faire le montage, glissez votre vidéo ou votre image sur la ligne de temps, en regard avec la piste Video 1. Ensuite, le son ou la musique correspondante en regard de la piste Audio 1. Et ainsi de suite jusqu’à avoir positionné vos éléments (plans) dans l’ordre de lecture.

Ces pistes apparaissent automatiquement quand vous glissez quelque chose.

Si vous souhaitez ajouter un son ou un bruitage (par exemple, j’ai ajouté des chants d’oiseaux au début de la vidéo), glissez jusqu’à créer une seconde piste Audio 2. En glissant juste en dessous de Audio 1, la nouvelle piste se crée toute seule.

Les effets spéciaux 

Vous souhaitez faire une transition en fondu entre deux plans ? Que la musique démarre en montant le volume doucement ? Ouvrez le panneau des effets, si celui-ci n’est pas visible, cliquez sur Bibliothèque d’effets en haut sous le menu.

Glissez l’effet voulu sur l’élément (plans) sur lequel vous souhaitez appliquer cet effet dans la ligne de temps.

Les textes

Toujours dans votre panneau d’effets, choisissez Texte ou L/M/R tiers inférieur selon la position souhaitée.

Glissez sur une nouvelle piste Vidéo. Double cliquez sur ce Texte dans la ligne du temps.

Vous ouvrez alors le panneau de paramétrage de ce texte (police, couleur, etc.).

Le timing

Très important sinon vos images et vos textes ne feront que défiler gentiment, mais sans réelle conviction. N’hésitez pas à étirer ou raccourcir vos plans sur la ligne du temps afin que ceux-ci concordent avec certains passages musicaux. Cela vaut pour le texte également.

Gare à la musique et aux sons qui peuvent être tronqués. Préférez alors soit remanier votre bande-son si possible, soit la faire disparaitre en fondu à la fin, par exemple.

Pour ma part, afin d‘être précise, je change la durée manuellement. Pour cela, sélectionner d’un clique le plan et Ctrl-D (ou clique droit et Changer la durée du plan). En général, pour une phrase à une phrase et demie, je compte 10 secondes. Sinon cela dépend de sa longueur (laissez le temps de la lire) ou de la synchronisation avec la musique.

Si les plans sur votre ligne de temps sont affichés en trop petit ou au contraire, prennent trop de place à l’écran, usez de la réglette + et – située au-dessus de votre ligne de temps.

Et enfin, sauver tout ça !

Vous avez deux façons de sauvegarder.

  1. Le projet ou fichier source reprenant les informations.
  2. Ou créer votre vidéo finale.

Dans le premier cas, un simple Fichier  > Enregistrer le projet dans le menu du haut suffit.

Pour créer votre vidéo définitive, rendez-vous dans le menu du haut sur Espace de travail puis sur Espace de travail principal et Exportation. Pour info, vous étiez dans l’espace Edition juste avant.

Le processus de création d’une vidéo se nomme ici (comme en 3D), un rendu.

Les choses étant bien faites, des paramètres sont préenregistrés. Par exemple, pour l’envoi sur Youtube. Choisissez Youtube 1080p au format MP4 (en fait, faite comme vous le souhaitez, je m’adresse ici aux débutants qui en sont à leur toute première fois et ne savent pas spécialement comment faire), et le logiciel paramètrera tout comme il faut.

Entrez le nom de votre vidéo, éventuellement le lieu où vous souhaitez l’enregistrer.

Lorsque tout est paramétré, cliquez sur Ajouter à la liste d’export. Vous pouvez choisir plusieurs paramétrages pour tester tout ça.

Cette liste d’export qui se trouve à droite. Cliquez sur Exporter.

C’était succinct, ceci n’était qu’une première approche. Je vous invite à consulter les vidéos de tutoriel de Davinci Resolve sur le site officiel ou sur Youtube afin de devenir un vrai pro, car vous imaginez bien que ce logiciel dispose de beaucoup plus de fonctionnalités que ça.

Le logiciel de composition musicale

Vous pouvez piocher parmi les banques de données libres de droits, mais je vous souhaiterai alors bonne chance pour trouver à la fois un morceau qui vous convient ET qui soit utilisable à des fins commerciales.

Bonne nouvelle, l’un d’eux (celui que j’utilise) est aujourd’hui en version gratuite. C’est Magix music maker.

https://www.magix.com/fr-be/musique/music-maker/

Installez-le comme pour Davinci Resolve (par défaut et en faisant gaffe aux logiciels tiers éventuels).

Comment composer la musique de votre booktrailer ?

Cela fonctionne sur le même principe de glisser-déposer que pour votre montage vidéo. Sauf que le logiciel possède déjà une bibliothèque (banque) de musique (boucles, loops ou soundpools pour les intimes). Vous pouvez en ajouter vous-même soit en achetant soit en en dénichant sur le web.

Il n’y a pas 36 façons de faire lorsque l’on débute et que l’on n’est pas compositeur. Écoutez les morceaux proposés et choisissez. Ceci est la méthode basique de chez basique, mais si vous possédez une bonne oreille, vous pourriez composer quelque chose de très chouette au final (sinon mettez votre fiston ou votre mari devant, ils vont adorer).

Voici l’interface, vous voyez qu’il y a des ressemblances. Une bibliothèque de sons, une ligne du temps.

En haut, les types d’instruments ou d’effets. En bas, les sons disponibles selon le type sélectionné. 

C’est vrai que dans la version gratuite, on a vite fait le tour par contre. Vous pouvez néanmoins parcourir le web à la recherche de sons, que l’on appelle soundpools ou loops, gratuits.

Par exemple, consultez ce lien : https://www.musicradar.com/news/tech/free-music-samples-download-loops-hits-and-multis-627820

  • Vous cherchez.
  • Vous écoutez.
  • Cela vous plait, vous téléchargez.
  • Vous décompressez (si besoin)
  • Cliquez sur l’engrenage tout à droite de Boucles puis Ajouter de nouveaux Soundpools.
  • Indiquez le dossier contenant les nouveaux sons téléchargés.

Glissez les sons que vous avez choisis sur la ligne de temps. Écoutez ce que cela donne, changez, recommencez, ré-écoutez. Ajoutez plusieurs sons à la suite pour rallonger celui-ci, ou étirez à l’aide de la souris.

Vous n’avez pas de piste Video ou Audio ou Bass ou Violon ici, placez un son ou type d’instrument par ligne pour que cela reste propre.

Et pour sauver tout ça ?

Comme ci-dessus, vous pouvez sauver votre projet dans le menu Fichier > Enregistrer le projet.

Ou exporter votre morceau dans un format musical sous Fichier > Exportation > Audio au format Wave.

Voilà, j’espère que cela n’a pas été trop complexe. L’idéal est de lancer la bête et de tatillonner un peu. Ces logiciels font bien plus que ce qui est mentionné, mais ç’aurait été vous embrouiller que de trop en dire. Une fois habitué aux bases, vous pourrez découvrir les autres fonctionnalités.

Allez, bon courage !

Faire une couverture pour votre livre, la composition grâce à la règle des tiers

Voici le troisième article concernant les couvertures de roman. Nous avions déjà passé en revue les mentions légales, ainsi que le symbolisme des couleurs. Cette fois j’aborderai Comment agencer les éléments de votre couverture selon la règle des tiers.

À présent, imaginons que vous avez tout en main, votre titre, votre résumé bien en tête, les informations nécessaires et… de quoi réaliser le montage ou l’agencement de votre première (page) de couverture.

Il existe des règles en graphisme que les pros connaissent bien (et c’est donc pour cela que l’on fait appel à eux), l’une d’elles est la règle des tiers.

Qu’est-ce que la règle des tiers en graphisme ?

Prenons un exemple. Vous avez certainement déjà regardé une affiche de film, une photo (d’un photographe professionnel s’entend, pas une photo amateur faite durant vos vacances ou votre repas de famille, non celle d’un pro sachant comment capter l’essence de ce qu’il perçoit et vous la transmettre). Ces affiches et photos auront sans doute un point commun, elles respectent la règle des tiers.

À savoir que certains éléments seront disposés là où ils attireront le plus le regard afin que ce soit harmonieux.

Cette règle consiste à imaginer votre visuel découpé en neuf cases égales. Donc vous aurez un découpage en trois zones (tiers) horizontalement et de même verticalement.

Ces tracés déterminent les lignes de force naturelles de l’image sur lesquelles l’on s’appuiera pour composer la couverture. On disposera donc les éléments sur lesquels on souhaite attirer le plus l’attention sur ces lignes ou les intersections de ces lignes. Attention, l’on n’est pas obligé de placer quelque chose sur toutes les lignes non plus ni d’être exact au millimètres près. S’en approcher n’est déjà pas mal dans certains cas.

Par exemple, si vous avez un personnage central sur votre couverture (ou un arbre, un monument et que celui-ci n’occupe pas toute la surface, placez-le sur l’une des lignes verticales.

La ligne d’horizon d’un paysage se place idéalement sur l’une de ces lignes horizontales. Celle du haut pour mettre en valeur la terre, celle du bas pour mettre le ciel en valeur.

Les points d’intersection sont très importants également, ils déterminent des points forts. Comme un objet ou un personnage.

Par exemple (plus ou moins), l’une de mes couvertures :

Dans le cas d’un portrait, il sera difficile de respecter cette règle puisqu’il prendra la majorité de la surface, autant le centrer.

Avec cette règle, lorsque vous prenez une photo, vous devrez alors trouver le point de vue qui correspondra au mieux au respect de cette règle (certains appareils permettent d’afficher la grille pour vous y aider), pour ce qui est de composer une couverture, vous serez un peu plus libre selon les ressources que vous avez choisies, car vous pouvez les glisser ou vous le souhaitez, découper comme vous voulez (ou presque).

Pour vous y aider, sous Photoshop (ou votre logiciel favori), paramétrez votre grille sur un pas de 33,3 % comptant 3 subdivisions. Je me sers ensuite d’un calque pour retracer ces lignes de façon plus visible.

À noter que, comme pour bien des choses lorsqu’il s‘agit du domaine artistique, connaître les règles et les appliquer, c’est bien, mais l’on peut également les contourner, les enfreindre. Tout dépend de l’objectif.

Règle des tiers et nombre d’or

Le nombre d’or est connu pour être la proportion naturelle parfaite. La disposition des pétales d’une fleur, la spirale d’une coquille d’escargot, l’architecture d’une toile d’araignée sont des éléments naturels respectant ce nombre d’or.

Les proportions du visage humain respectent également ce nombre, après une multitude d’études, l’on a remarqué que les visages répondant à ce nombre étaient considérés comme naturellement beaux, tout simplement. Bref, notre œil trouve cela harmonieux.

Ce nombre d’or ou proportion a donc été étudié et repris par de nombreux bâtisseurs, et artistes. Il est également utilisé dans le graphisme, la photo, etc.

L’on utilise donc la règle des tiers, car elle est très proche du nombre d’or. Elle vise à définir le placement d’un objet ou personnage à 66 % (aux 2 tiers) du bord de l’image. Alors que le nombre d’or est situé à 62 %. Ces 4 % d’écart n’étant pas assez important pour briser l’harmonie d’une composition.

Souces :

Articles précédents traitant des couvertures :

Les outils (logiciels) d’un auteur

Comme pour toute chose, que ce soit du bricolage ou faire la cuisine, pour réaliser de bonnes choses, il faut d’abord de bons outils. Un minimum en tout cas.

Un auteur aura pour tout premier outil, sa tête (imagination, expérience d’écriture). Mais il devra s’aider d’autre chose s’il veut finaliser son roman. Surtout s’il souhaite faire les choses au mieux, voire le faire éditer. Je préfère amplement proposer des choses gratuite ou pour le moins abordable en avant dans ce genre de guide, car il y a déjà suffisamment de frais à assumer. Mais lorsqu’il s‘agit de logiciels, c’est un peu plus compliqué, mais on va y arriver.

Quels sont les logiciels utiles pour un auteur ?

Les logiciels d’écriture

Outre un bloc de feuille ou un cahier, il faudra bien que votre texte finisse tôt ou tard en numérique.

Le plus employé : Word.

Payant et faisant partie de la suite Microsoft Office qui allonge de ce fait le prix. On peut se consoler et se disant que Excell proposé dans le pack servira pour ses notes, les tableau de scènes, etc. À ce propos, voyez le petit tuto sur Comment créer un tableau de scènes avec Google Sheet pour vous donner une idée, c’est tout de même un petit investissement. Il reste le leader malgré tout.

L’alternative : Word gratuit. Si si et sans pénétrer dans le Dark Web ou l’illégalité. Il existe une version de Word en ligne via OneDrive. OneDrive est un Cloud, un espace permettant de sauvegarder vos fichiers sur le web. Mais pas que. Il permet en plus de créer des documents Word, Excel et PowerPoint en ligne. Les fonctionnalités sont réduites (mise en page, révision, table des matières y sont, rassurez-vous) et c’est du Word gratuit et sans manipulation cheloue !

Pour cela, il vous faut un compte Onedrive, vous connecter et vous rendre dans le menu Nouveau > Document Word.

Bémol, puisque c’est en ligne, il vous faut une connexion internet.

Alter ego en gratuit : OpenOffice. Très cousin du premier, mais en version gratuit. Par contre, si vous souhaitez travailler avec des fichiers Word sur ce logiciel, la compatibilité entre doc/docx (format natif de Word) et fichier odt (format natif de OpenOfffice) peut causer problème. On me souffle dans l’oreillette qu’il faudra toujours travailler en odt, utiliser les styles du logiciel et non ceux de Word et puis seulement procéder à l’exportation en doc/docx.

Une autre alternative en ligne et gratuite : Google Docs sur Google Drive. Il suffit d’avoir un compte Google/Gmail (toute cette famille-là quoi). Moins de fonctionnalités, celles nécessaires pour rédiger un roman étant présentes ainsi qu’un mode édition pour les corrections. Il permet même les corrections participatives, ce qui est très intéressant pour le partage avec vos bêtas ou vos correcteurs éventuellement. De plus, il permet d’exporter au format doc/docx (celui de Word). Même bémol que plus haut, il est préférable d’avoir une connexion internet bien qu’il existe un mode hors ligne à configurer.

Les correcteurs de texte

L’un des points essentiels d’un roman est le respect de la langue choisie (bonne orthographe, grammaire, conjugaison). L’auteur peut avoir une parfaite connaissance de tout cela (et je l’envie à mort) ou compter sur un logiciel qui l’aidera à se corriger et à se perfectionner. Il peut également faire appel à un correcteur de métier.

Mais si vous souhaitez passer vous-même au peigne fin avant toute autre action, il existe des outils plutôt pas mal. Attention, on ne le répétera jamais assez, rien ne remplace l’œil humain, le logiciel lui ne captera jamais la tournure de phrase, l’effet de style. Il vous aide, mais il faut parfois lui donner tort.

Mon numéro un : Antidote.

Un investissement conséquent, je l’admets, mais il dispose de dictionnaires, dresse des statistiques, vous aide à traquer les répétitions (joie !), les adverbes et tout verbe faible (et bien plus encore), corrige la typographie (un vrai bonheur de le voir traquer les espaces insécables manquants).

Sa version 10 est actuellement disponible au prix de 99,00€ sur Amazon.

Correcteur gratuit en ligne : Bon patron.

Bon patron est une bonne alternative, rapide et efficace. Cependant, comme tous les correcteurs en ligne, il faut effectuer des copier/coller. Sinon il existe en version extension pour votre navigateur.

En ligne, nous avons également pléthore d’autres à tester.

LanguageTool. https://languagetool.org/fr/

Reverso http://www.reverso.net/orthographe/correcteur-francais/

Scribens https://www.scribens.fr/

Ou encore Cordial qui existe en ligne (gratuit) ou en version logicielle (payant).

La couverture

Vous avez votre texte rédigé et corrigé. Il ne vous manque rien ? Non ? Et la couverture ?

Il est vrai que si vous utilisez un service de publication en ligne, ils auront très certainement leur propre laboratoire. Mais si celui-ci ne vous satisfait pas, rien ne vaut de mettre la main à la pâte. Bigre ! Pour cela il faudra consacrer quelques heures à l’apprentissage. Et investir ! Pas forcément des heures. Pas forcément cher non plus.

Mon favoris reste Photoshop. Favoris, car j’ai appris à m’en servir lors d’une formation en Web Development. Un logiciel de chez Adobe et pas très bon marché à l’origine. Sauf que… on peut le « louer ». Dit comme ça, c‘est assez amusant. En fait, vous pouvez payer un abonnement mensuel de 12,03€. Si vous en avez une utilité très régulière (comme moi qui l’utilise au moins une fois par jour que ce soit pour recadrer une image pour mon blog et mes réseaux sociaux ou concevoir une couverture), c’est assez intéressant. À cogiter.

Le site officiel vous propose une prise en main en français pour les intéressés.

Ensuite, son cousin du domaine gratuit : Gimp. J’ai un blocage avec Gimp. Avec son interface à vrai dire donc, je l’ai tenté des tas de fois et désinstallé aussitôt. Mais il demeure accessible et puissant. Il propose également une prise en main en français.

Ensuite, un mix des deux :  Gimpshop. Il a l’interface de Photoshop (enfin quelques fonctionnalités en moins), et la gratuité de Gimp. Bémol, il est en anglais uniquement.

Troisième solution, la plus simple et gratuite : Canva. Il s‘agit d’un service en ligne disposant de modèles à modifier dont les couvertures de roman, les bannières de réseaux sociaux. l’un des plus employés, je pense.

Les convertisseurs

La plupart des plate-formes de publication convertissent elle-même votre texte depuis son format Word ou PDF mais il peut arriver que vous souhaitez convertir vous-même votre roman. Pour le personnaliser, l’offrir lors d’un concours ou bien même pour vos Services presse.

Le chouchou : Calibre. Logiciel gratuit et simple d’utilisation. je vous avais concocté un guide rapide pour la création d’un ePub via ce logiciel ici. Calibre transforme vos textes en ePub, Mobi et bien d‘autres.

Bien entendu, il existe bien d’autres logiciels dédiés à chacune de ces tâches, je préfère mentionner ceux que j’ai plus ou moins côtoyés. Si vous en connaissez d’autres et de fiables, les commentaires sont ouverts.

 

 

Se lancer sur YouTube

Nous avions évoqué les cas de Facebook, Twitter et d’Instagram précédemment, mais il existe d’autres réseaux sociaux. Comme YouTube qui est certes moins utilisé par les auteurs sans être totalement à négliger.

(plus…)