Sommaire de l’article :
- Des ressources vraiment gratuites pour vos sites web
- Une banque de plus d’1 million d’images pour votre site web
- Une banque d’extraits vidéos parfaite pour vos montages
- Un outil génial pour retoucher et optimiser vos images en ligne
- Des animations de qualité, super légères et qui se chargent vite
- Des illustrations vectorielles personnalisables pour vos sites
- Un super outil pour créer vos palettes de couleurs
- De magnifiques dégradés gratuits et inspirants
- Choisir les polices de caractère de son site Internet devient un jeu d’enfant !
Des ressources vraiment gratuites pour vos projets Internet
Il existe des tonnes de ressources pour le développement Web, mais lesquelles sont gratuites pour une utilisation personnelle et surtout commerciale ? Dans cette vidéo et cet article, je vous présente 8 sites GRATUITS et indispensables pour tous vos projets web (images, vidéos, sites Internet etc.). Ces sites vous seront très utiles pour démarrer votre prochain projet et vous verrez à quel point il est facile d’utiliser ces excellents outils !
Une banque de millions d’images gratuites pour vos sites web
Quand on fait un site web, on a la plupart du temps besoin de photos voire de vidéos pour rendre son site engageant. Cependant il n’est pas toujours facile d’en trouver de qualité sans qu’elles soient payantes. Mais en cherchant en peu, il existe des solutions.
Le premier site présenté dans cet article, s’appelle Pixabay. Vous connaissez peut-être cette plateforme. Le site a été créé en 2010, c’est une communauté dynamique de créatifs qui partagent des images et des vidéos libres de droits. Tous les contenus sont publiés sous la licence Creative Commons CC0, ce qui permet de les utiliser en toute sécurité sans demander l’autorisation de l’artiste, ni de le créditer, et surtout il est possible de les utiliser à des fins commerciales.
Vous avez donc accès à des millions de photos gratuites au format jpg et à des résolutions différentes.
Mais ce n’est pas tout, vous allez également pouvoir trouver aussi sur Pixabay de nombreuses illustrations au format jpg ou png.
Vous pourrez trouver également des images vectorisées au format SVG. Je vous rappelle qu’une image vectorisée peut être agrandi à l’infini et sans perte de qualité. Ce sera donc un format parfait pour des logos ou autres illustrations.
Pixabay propose aussi de nombreuses vidéos utilisables pour le montage au format mp4 et avec des résolutions différentes allant souvent jusqu’au 4k.
Pour ce qui est de l’audio Pixabay n’est pas en reste plus que vous aurez également accès à des musiques mais aussi des bruitages au format mp3 qui seront également parfait pour habiller vos vidéos.
Pixabay est donc vraiment une plateforme très intéressante pour tous vos projets web.
Une banque d’extraits vidéo, parfaite pour vos montages
Le deuxième site que je voulais vous présenter est un site dans la lignée de Pixabay, il s’agit de Coverr, qui est un site en anglais mais qui est spécialisé dans la vidéo et qui offre de nombreux extraits vidéo gratuits en 4 K ou HD pour tous vos projets de montage.
Vous avez un moteur de recherche en haut pour taper votre mot clé, sinon les vidéos sont classées par catégories : nature, personnes, amour et relation, business et travail, prises aériennes, animaux etc…
Pour ce qui est de la licence, toutes les vidéos publiées sur Coverr.co peuvent être utilisées gratuitement à des fins commerciales et non commerciales. Vous n’avez pas besoin de demander l’autorisation ou de fournir le crédit à l’auteur de la vidéo ou à Coverr.co.
Cover est donc un autre site très intéressant pour vos projet web, d’autant plus que les vidéos utilisables gratuitement ne sont pas toujours faciles à trouver.
A signaler et ce depuis peu Coverr propose également une partie music en version beta qui offre une multitude de musiques gratuites utilisables pour vos projets de montage.
Un outil génial pour retoucher et optimiser vos images en ligne
Le 3ème site que je voulais partager avec vous c’est Photopea. Un Photoshop en ligne et gratuit vous en avez rêvé ? Eh bien Photopea l’a fait !
Ce site est vraiment génial. Il met en ligne un éditeur d’images en ligne au look Photoshop et ce entièrement gratuit.
Cet outil est super puissant et assez incroyable.
Il prend en charge : les formats PSD de Photoshop qui vous permettra de gérer des calques, AI D’adobe Illustrator, AX (Adobe XD), .sketch (fichier vectoriel), .xcf (format d’image libre utilisé notamment par le logiciel GIMP), le format pdf, le format raw (Format volumineux et sans compressions généré par les appareils photo pro), ainsi que tous les formats de fichiers d’exportation que l’on va retrouver sur le net à savoir : le jpg, le png, le Webp mais aussi le svg pour les fichiers vectoriels.
Pour une utilisation directement applicable à un site web, il est possible grâce à Photopea d’optimiser des images pour que la page se charge rapidement. Vous pouvez par exemple importer des images téléchargées sur Pixabay. Puis vous pouvez ensuite facilement les redimensionner voire la recadrer et enfin les exporter au format WebP. Format performant qui allie bonne compression et qualité.
Si par exemple au final l’image optimisée a une résolution de 1920 x 700 pixels (ce qui correspondrait à une image de bannière), vous verrez ainsi passer sa taille d’origine de plusieurs de centaines de Ko à une cinquantaine de ko, ce qui est vraiment très bien !
Photopea est vraiment un outil en ligne indispensable, très utile et puissant qui gère les calques ainsi qu’une multitude de formats avec une version entièrement gratuite où toutes les fonctions sont disponibles.
Des animations de qualité, super légères et qui se chargent vite
Le 4eme site présenté c’est le site Lottifiles. Un Lottie est un format de fichier d’animation open-source qui est petit et de haute qualité.
Un Lottie est 600 % plus petit en poids comparé à la même animation générée au format gif animé. Ce format va permettre de créer des animations sympas, très légères qui se chargeront donc très rapidement dans un site WordPress par exemple.
J’avais d’ailleurs réalisé il y quelque temps un tutoriel où je vous montrais comment intégrer facilement une animation Lottie sur 1 site WordPress Divi. Vous pouvez accéder à l’article ici.
Vous avez sur le site Lottiefiles, la possibilité de télécharger gratuitement des centaines de Lotties réalisés par des designers professionnels.
Si vous cliquez en haut sur le menu sur « Discover », vous avez un sous partie intitulée « Free ready to use animation » c’est-à-dire animations gratuites prêtes à être utilisées.
Il est précisé que ces animations sont utilisables pour votre usage personnel ou commercial sur le web, les applications, les médias sociaux et plus encore. Elles sont donc parfaites pour vos projets Web.
Vous pouvez facilement télécharger gratuitement n’importe quelle animation de cette galerie.
Quand une animation est choisie, vous pouvez la personnaliser en jouant sur la vitesse de l’animation, le fond de l’animation, ou la couleur de palette. Ensuite en cliquant sur « download. »
Vous pouvez télécharger l’animation au format Json ou en dotLottie qui est un nouveau format de regroupement encore plus optimisé ou alors vous pouvez choisir l’ancien format gif animé.
Les lotties sont vraiment des petites animations très sympas à utiliser pour vos projets web que ce soit sur un site, pour un post dans les réseaux sociaux ou dans une vidéo. Sur un site web, bien sûr il faudra les utiliser avec modération mais avec des placements judicieux de ces animations l’engagement sur le site sera sans doute meilleur.
Des illustrations vectorielles personnalisables pour vos sites
5) https://undraw.co/illustrations
Le 5ème site que je vous présente s’intitule Undraw.
Ce site vous propose de télécharger des centaines d’illustrations gratuites pour vos projets web aux formats SVG ou PNG.
Ce qui sympa aussi c’est qu’on peut choisir la couleur dominante de l’illustration.
En effet en haut à droite, vous avez accès à un nuancier et à chaque fois que vous changez la couleur, celle de toutes les illustrations sont modifiées. Vous pouvez même entrer le code couleur hexadécimal de votre choix pour être parfaitement en accord avec les couleurs de votre site web par exemple.
Undraw est donc un site très intéressant qui vous permettra d’illustrer gratuitement vos projets personnels ou commerciaux.
Un super outil pour créer vos palettes de couleurs
Le 6eme site gratuit présenté dans cette vidéo s’intitule Coolors. C’est un outil puissant qui va vous permettre de générer des palettes de couleurs harmonieuse pour tout type de projet web et notamment pour la création d’un site Internet. Pour ceux qui me suivent, vous savez que je fais souvent référence à ce site qui est mon avis un vrai petit bijou !
Le fonctionnement du site est très simple soit vous créez votre palette dans le générateur de palette en cliquant directement sur « Start the generator ». Une palette apparait et vous pouvez en appuyant sur la barre espace en générer une autre puis la personnaliser ensuite. Sinon, si vous êtes en manque d’inspiration, vous pouvez cliquer sur « Explore trending palettes » c’est à dire découvrez des palettes tendances et là une multitude de palettes aux couleurs harmonieuses apparaissent. Vous pouvez en choisir une. Si vous voulez la voir de plus près et la personnaliser, vous cliquez sur les 3 petits points au bas à droite de la palette et vous choisissez « Open in the generator» ouvrir dans le générateur ».
A cet endroit, vous allez pouvoir déplacer chaque couleur si vous le souhaitez pour en mettre 2 côte à côte par exemple.
Vous pouvez aussi cliquer sur « View shades » voir le nuances et là vous pouvez modifier la nuance de votre couleur. Ou alors en cliquant sur le code hexadécimal, vous accédez à 1 nuancier pour modifier votre couleur.
Une fois votre couleur trouvée vous pouvez copier le code hexadécimal de la couleur en cliquant sur le double carré.
Ce code hexadécimal code cette couleur ce qui vous permettra de la retrouver exactement dans votre site web par exemple.
Coloors est donc un site super pratique, simple puissant et gratuit pour définir les couleurs de tous vos projets web.
De magnifiques dégradés gratuits et inspirants
Pour le 7ème site présenté, on reste toujours dans les couleurs avec Webgradients qui est un site qui propose 180 dégradés à télécharger pour les fonds des contenus de vos sites web par exemple. Comme pour les autres sites, il est précisé que ces dégradés sont gratuits pour une utilisation commerciale ou personnel. Pour accéder aux dégradés, il suffit de scroller et de descendre dans la page pour les découvrir. Certains sont fait de plusieurs couleurs, il est dans ce cas spécifié « Many colors » mais la plupart d’entre eux sont fait de 2 couleurs.
On voit les codes couleurs hexadécimaux avec le code de départ vers le code d’arrivée comme on le voit sous le dégradé à gauche. Si vous cliquez sur le dégradé, vous avez une vue peine écran de celui-ci. En cliquant en haut à droite sur la flèche vous pouvez télécharger l’image du dégradé au format png. Et si vous cliquez sur CSS vous récupérer le code qui est copié.
Voici un exemple de code CSS récupéré : background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
Ce code m’apprend que c’est un dégradé linéaire avec une orientation de 120 degrés partant de ce code couleur hexadécimal #f093fb allant vers cette autre couleur avec cet autre code hexadécimal #f5576c.
Si le code CSS ne vous est pas familié, les quelques informations que je viens de donner seront directement exploitable avec de constructeurs de page comme Divi pour WordPress par exemple sans que vous n’ayez besoin d’écrire ou de reporter la moindre ligne de code.
Webgradients est donc un autre site de couleurs très inspirant qui vous proposera de nombreuses idées de dégradés de fonds pour vos pages web.
Choisir les polices de caractère de son site Internet devient un jeu d’enfant !
Et enfin le 8 ème et dernier site proposé c’est le site Mixfont. Là encore c’est l’un de mes sites fétiches que j’ai pu présenter dans d’autres tutoriels.
Quand vous créez un site web, vous devez définir les 2 polices de caractère par défaut pour votre site : la police des titres et celle des textes. Parfois, en effet ce peut être la même.
En revanche, si vous choisissez 2 polices différentes, il faut donc qu’elles aillent bien ensemble et ce choix n’est pas toujours facile.
Heureusement, Mix Font est là et va vous faire gagner du temps en vous proposant une multitude de combinaisons de polices de caractère. Les polices de caractères de Mixfont sont de police Google gratuites et utilisées aujourd’hui sur la plupart des sites web.
Pour commencer il suffit de cliquer sur « Start the generator »
Une combinaison de police apparait à l’écran on voit en haut à gauche le nom des 2 polices présentées.
Si on clique sur Swapp en haut à droite, on peut inverser la police du titre avec celle du texte.
Si on veut passer à la combinaison suivante, on clique sur le bouton rouge en bas à droite et on peut ainsi faire défiler et choisir la combinaison voulue.
Si par exemple vous trouvez une super police de titre qui vous plaît mais en revanche celle du texte ne vous plait pas, vous pouvez alors cliquer en haut sur le nom de ma police de titre, ce qui a pour effet de la verrouiller (on voit le petit cadenas). Vous pouvez ensuite continuer à cliquer sur le bouton rouge et là ce sont seulement les polices de texte qui défilent. Vous pouvez comme cela choisir la police de texte qui vous plait et qui ira parfaitement avec celle de votre titre.
Mixfont est donc un site gratuit qui sera très utile dans le choix de vos polices de caractère pour tous vos projets sur le Web et notamment lors de la création d’un site Internet.
