Bienvenue sur le wiki de Nuit debout, nous sommes le 2985 mars.




Ressources/Répertoire participatif de ressources graphiques : Différence entre versions

De NuitDebout
Aller à : navigation, rechercher
m (catégorisation)
Ligne 1 : Ligne 1 :
 
[[Catégorie:Ressources]]
 
[[Catégorie:Ressources]]
 
[[Catégorie:Graphisme]]
 
[[Catégorie:Graphisme]]
Voici un document collaboratif en ligne pour recenser toutes sortes de liens outils sur le web destinés au graphisme (banques d'images libres de droits ou sous Créative Commons, tutoriaux, guides, etc). Merci de participer en respectant le travail qui a déjà été fait.
+
Voici un document collaboratif en ligne pour recenser toutes sortes de liens outils sur le web destinés au graphisme (banques d'images libres de droits ou sous Créative Commons, tutoriaux, guides, ). Merci de participer en respectant le travail qui a déjà été fait.
 
   
 
   
==Recherche iconographique==
+
== Recherche iconographique ==
  
===Ressources gratuites===
+
=== Ressources gratuites ===
 
   
 
   
 
*[https://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources Liste de ressources dans le domaine public]
 
*[https://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources Liste de ressources dans le domaine public]
Ligne 31 : Ligne 31 :
 
*[http://d3sdoylwcs36el.cloudfront.net/creative-commons-license-types-pros-cons.gif Droits permis par chaque licence (en anglais)]
 
*[http://d3sdoylwcs36el.cloudfront.net/creative-commons-license-types-pros-cons.gif Droits permis par chaque licence (en anglais)]
 
   
 
   
===Illustrations libres de droits===
+
=== Illustrations libres de droits ===
 
   
 
   
 
http://www.oldbookillustrations.com
 
http://www.oldbookillustrations.com
Ligne 39 : Ligne 39 :
 
http://publicdomainreview.org/
 
http://publicdomainreview.org/
 
   
 
   
===Textures===
+
=== Textures ===
 
   
 
   
 
http://www.demilked.com/free-paper-textures-backgrounds/
 
http://www.demilked.com/free-paper-textures-backgrounds/
Ligne 47 : Ligne 47 :
 
*[http://www.doityvette.fr/tendances-marbre-30-textures-papier-marbre/ Textures de marbre]
 
*[http://www.doityvette.fr/tendances-marbre-30-textures-papier-marbre/ Textures de marbre]
  
==Ressources informatiques en code source ouvert==  
+
== Ressources informatiques en code source ouvert ==  
  
===Logiciels pour le graphisme en code source ouvert===
+
=== Logiciels pour le graphisme en code source ouvert ===
  
 
'''Note''' : ces logiciels sont gratuits et librement téléchargeables sur des différents systèmes d'exploitation.
 
'''Note''' : ces logiciels sont gratuits et librement téléchargeables sur des différents systèmes d'exploitation.
Ligne 69 : Ligne 69 :
 
*[http://www.audacityteam.org/ '''Audacity''' - logiciel pour l'enregistrement et l'édition de fichiers sonores, permet d'enregistrer et de mixer des sons, et de les exporter en format .mp3 (parmi d'autres)]
 
*[http://www.audacityteam.org/ '''Audacity''' - logiciel pour l'enregistrement et l'édition de fichiers sonores, permet d'enregistrer et de mixer des sons, et de les exporter en format .mp3 (parmi d'autres)]
 
   
 
   
===Outils en ligne en code source ouvert===
+
=== Outils en ligne en code source ouvert ===
  
 
*[https://framasoft.org L'association '''Framasoft''' répertorie des alternatives libres en ligne pour tous les outils de Google et d'autres grandes boîtes du web (voir liste sur la colonne à droite de leur site)]
 
*[https://framasoft.org L'association '''Framasoft''' répertorie des alternatives libres en ligne pour tous les outils de Google et d'autres grandes boîtes du web (voir liste sur la colonne à droite de leur site)]
  
===D'autres logiciels graphiques en code source ouvert (plus spécialisés)===
+
=== D'autres logiciels graphiques en code source ouvert (plus spécialisés) ===
  
 
*[https://processing.org/ '''Processing''' - outil de création d'images génératives (à partir d'un code)]
 
*[https://processing.org/ '''Processing''' - outil de création d'images génératives (à partir d'un code)]
Ligne 83 : Ligne 83 :
 
*[https://puredata.info/ '''Pure Data''' - logiciel pour réaliser des installation interactives (audio, vidéo, etc)]
 
*[https://puredata.info/ '''Pure Data''' - logiciel pour réaliser des installation interactives (audio, vidéo, etc)]
  
==Design web==
+
== Design web ==
  
===Outils et guides en ligne pour le design web===
+
=== Outils et guides en ligne pour le design web ===
 
   
 
   
 
*[http://iletaitunepub.fr/blog/2016/01/12/un-guide-de-la-taille-des-images-sur-les-reseaux-sociaux-pour-mieux-publier/ Formats de publication d'images pour les principaux réseaux sociaux]
 
*[http://iletaitunepub.fr/blog/2016/01/12/un-guide-de-la-taille-des-images-sur-les-reseaux-sociaux-pour-mieux-publier/ Formats de publication d'images pour les principaux réseaux sociaux]
Ligne 95 : Ligne 95 :
 
*[http://www.downforeveryoneorjustme.com/ Down for everyone or just me - outil pour vérifier si un site est hors ligne ou juste bloqué localement.]
 
*[http://www.downforeveryoneorjustme.com/ Down for everyone or just me - outil pour vérifier si un site est hors ligne ou juste bloqué localement.]
  
===Apprendre le design web===
+
=== Apprendre le design web ===
  
 
*[https://www.codecademy.com/ '''Codecademy''' - Apprendre le design web - cours HTML]
 
*[https://www.codecademy.com/ '''Codecademy''' - Apprendre le design web - cours HTML]
Ligne 101 : Ligne 101 :
 
*[https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3 '''OpenClassrooms''' (anciennement le Site du Zéro) - Apprendre le design web]
 
*[https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3 '''OpenClassrooms''' (anciennement le Site du Zéro) - Apprendre le design web]
 
   
 
   
===La typographie sur le web===
+
=== La typographie sur le web ===
 
   
 
   
 
*[http://www.w3schools.com/cssref/css_websafe_fonts.asp Les combinaisons de fontes les plus utilisées sur le web (fontes présentes sur la plupart des ordinateurs)]
 
*[http://www.w3schools.com/cssref/css_websafe_fonts.asp Les combinaisons de fontes les plus utilisées sur le web (fontes présentes sur la plupart des ordinateurs)]
Ligne 107 : Ligne 107 :
 
*[http://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html Une  sélection de fontes gratuites de Google Fonts qui peuvent être utilisées pour le web (et comment les intégrer sur un site web)]
 
*[http://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html Une  sélection de fontes gratuites de Google Fonts qui peuvent être utilisées pour le web (et comment les intégrer sur un site web)]
 
   
 
   
===Blogs de design web===
+
=== Blogs de design web ===
 
   
 
   
 
*[http://www.awwwards.com/ Awwwards - prix pour des sites web de qualité]
 
*[http://www.awwwards.com/ Awwwards - prix pour des sites web de qualité]
Ligne 121 : Ligne 121 :
 
http://www.w3schools.com/html/html_colornames.asp
 
http://www.w3schools.com/html/html_colornames.asp
 
   
 
   
==Ressources typographiques==
+
== Ressources typographiques ==
  
===Fontes gratuites de qualité (pas toutes, mais certaines)===
+
=== Fontes gratuites de qualité (pas toutes, mais certaines) ===
 
   
 
   
 
*[http://www.fontsquirrel.com/ Font Squirrel]
 
*[http://www.fontsquirrel.com/ Font Squirrel]
Ligne 141 : Ligne 141 :
 
*[http://www.citype.net/ Citype - fontes inspirées par différentes villes du monde]
 
*[http://www.citype.net/ Citype - fontes inspirées par différentes villes du monde]
  
===Apprendre la typographie===
+
=== Apprendre la typographie ===
 
   
 
   
 
*[http://type.method.ac/ Jeu pour apprendre à composer des mots (interlettrage)]
 
*[http://type.method.ac/ Jeu pour apprendre à composer des mots (interlettrage)]
Ligne 161 : Ligne 161 :
 
*[https://www.youtube.com/watch?v=73JBcnbOM8I Petite vidéo sur le lexique courant de la mise en page]
 
*[https://www.youtube.com/watch?v=73JBcnbOM8I Petite vidéo sur le lexique courant de la mise en page]
  
===Blogs et archives sur la typographie===
+
=== Blogs et archives sur la typographie ===
 
   
 
   
 
*[http://luc.devroye.org/fonts.html On Snot and Fonts - répertoire de ressources sur la typographie (par Luc Devroye)]
 
*[http://luc.devroye.org/fonts.html On Snot and Fonts - répertoire de ressources sur la typographie (par Luc Devroye)]
Ligne 173 : Ligne 173 :
 
*[https://www.typewolf.com/resources Plus de ressources typographiques en ligne]
 
*[https://www.typewolf.com/resources Plus de ressources typographiques en ligne]
 
   
 
   
===Outils typographiques en ligne===
+
=== Outils typographiques en ligne ===
 
   
 
   
 
*[http://wordmark.it/ '''Wordmark''' - choisir des caractères depuis son navigateur]
 
*[http://wordmark.it/ '''Wordmark''' - choisir des caractères depuis son navigateur]
Ligne 181 : Ligne 181 :
 
*[http://fr.lipsum.com/ Générateur de Lorem Ipsum]  
 
*[http://fr.lipsum.com/ Générateur de Lorem Ipsum]  
 
   
 
   
==Apprendre le dessin vectoriel==
+
== Apprendre le dessin vectoriel ==
 
   
 
   
 
*[http://bezier.method.ac/ Jeu pour apprendre à utiliser l'outil "plume"]
 
*[http://bezier.method.ac/ Jeu pour apprendre à utiliser l'outil "plume"]
Ligne 187 : Ligne 187 :
 
*[http://theagsc.com/community/tutorials/so-whats-the-big-deal-with-horizontal-vertical-bezier-handles-anyway/ Comment faire des nodes avec des angles droits uniquement (outil "plume" niveau avancé)]
 
*[http://theagsc.com/community/tutorials/so-whats-the-big-deal-with-horizontal-vertical-bezier-handles-anyway/ Comment faire des nodes avec des angles droits uniquement (outil "plume" niveau avancé)]
 
   
 
   
==Notions d'Identité visuelle==
+
== Notions d'Identité visuelle ==
  
 
*[http://logo-archive.org/ Logo Archive - Logotypes classiques en noir et blanc]
 
*[http://logo-archive.org/ Logo Archive - Logotypes classiques en noir et blanc]
Ligne 203 : Ligne 203 :
 
Guide pour la création de chartes graphiques pour le web : https://www.smashingmagazine.com/2010/07/designing-style-guidelines-for-brands-and-websites/
 
Guide pour la création de chartes graphiques pour le web : https://www.smashingmagazine.com/2010/07/designing-style-guidelines-for-brands-and-websites/
 
   
 
   
Graphisme intéractif - http://graphism.fr/
+
Graphisme interactif - http://graphism.fr/
 
   
 
   
==La couleur==
+
== La couleur ==
 
   
 
   
 
Jeu pour apprendre à identifier des couleurs : http://color.method.ac/
 
Jeu pour apprendre à identifier des couleurs : http://color.method.ac/
Ligne 211 : Ligne 211 :
 
Kuler (sélecteur de gammes de couleur en ligne) : https://color.adobe.com/fr/create/color-wheel/
 
Kuler (sélecteur de gammes de couleur en ligne) : https://color.adobe.com/fr/create/color-wheel/
 
   
 
   
Pictaculous - générateur de palettes adobe à partir d'images - http://www.pictaculous.com/
+
Pictaculous - générateur de palettes adobe à partir d'images - : http://www.pictaculous.com/
 
   
 
   
 
Un autre outil pour générer des palettes de couleur : http://www.cssdrive.com/imagepalette/index.php
 
Un autre outil pour générer des palettes de couleur : http://www.cssdrive.com/imagepalette/index.php
 
   
 
   
==Infographies==
+
== Infographies ==
 
   
 
   
 
Le travail de l'infographiste David McCandless : http://www.informationisbeautiful.net/
 
Le travail de l'infographiste David McCandless : http://www.informationisbeautiful.net/
Ligne 229 : Ligne 229 :
 
Un autre projet sur des différentes présentations des graphiques d'information : https://www.behance.net/gallery/6882639/INFOGRAPHICS
 
Un autre projet sur des différentes présentations des graphiques d'information : https://www.behance.net/gallery/6882639/INFOGRAPHICS
 
   
 
   
Infographies intéractives sur Bloomberg Businessweek : http://www.bloomberg.com/visual-data/
+
Infographies interactives sur Bloomberg Businessweek : http://www.bloomberg.com/visual-data/
 
   
 
   
 
Infographies sur le magazine Wired : http://www.wired.com/tag/infographics/
 
Infographies sur le magazine Wired : http://www.wired.com/tag/infographics/
Ligne 237 : Ligne 237 :
 
*[http://histography.io Historigraphy : graphique intéractif sur l'histoire de l'univers]
 
*[http://histography.io Historigraphy : graphique intéractif sur l'histoire de l'univers]
 
   
 
   
===Blogs sur le Data Journalism===
+
=== Blogs sur le Data Journalism ===
 
   
 
   
 
*[http://flowingdata.com Flowing Data]
 
*[http://flowingdata.com Flowing Data]
 
   
 
   
===Blogs sur le design dans la presse===
+
=== Blogs sur le design dans la presse ===
  
 
*[http://www.quintatinta.com/ '''Quintatinta''' (en espagnol)]
 
*[http://www.quintatinta.com/ '''Quintatinta''' (en espagnol)]
  
==Art pixelisé==
+
== Art pixelisé ==
 
   
 
   
 
http://flipflopflyin.com/
 
http://flipflopflyin.com/
Ligne 251 : Ligne 251 :
 
Petit outil en ligne pour transformer des images bitmap en graphiques .svg : http://www.drububu.com/tutorial/bitmaptovector.html
 
Petit outil en ligne pour transformer des images bitmap en graphiques .svg : http://www.drububu.com/tutorial/bitmaptovector.html
  
==Inspiration graphique (affiches et visuels activistes)==
+
== Inspiration graphique (affiches et visuels activistes) ==
  
 
*[http://unmundofeliz2.blogspot.com/ '''Un mundo feliz''', affiches activistes]
 
*[http://unmundofeliz2.blogspot.com/ '''Un mundo feliz''', affiches activistes]
Ligne 261 : Ligne 261 :
 
*[http://vocesconfutura.org/ '''Voces con Futura''', affiches des "indignés" en Espagne]
 
*[http://vocesconfutura.org/ '''Voces con Futura''', affiches des "indignés" en Espagne]
  
==Voir aussi==
+
== Voir aussi ==
  
 
*[[Ressources/Ressources graphiques de la Nuit Debout|Ressources graphiques de la Nuit Debout]]
 
*[[Ressources/Ressources graphiques de la Nuit Debout|Ressources graphiques de la Nuit Debout]]

Version du 15 avril 2016 à 19:22

Voici un document collaboratif en ligne pour recenser toutes sortes de liens outils sur le web destinés au graphisme (banques d'images libres de droits ou sous Créative Commons, tutoriaux, guides, …). Merci de participer en respectant le travail qui a déjà été fait.

Recherche iconographique

Ressources gratuites

Licences Creative Commons

Illustrations libres de droits

http://www.oldbookillustrations.com

http://www.fromoldbooks.org/

http://publicdomainreview.org/

Textures

http://www.demilked.com/free-paper-textures-backgrounds/

http://wefunction.com/roundup-of-essential-grunge-design-resources/

Ressources informatiques en code source ouvert

Logiciels pour le graphisme en code source ouvert

Note : ces logiciels sont gratuits et librement téléchargeables sur des différents systèmes d'exploitation.

Logiciels audio en code source ouvert

Outils en ligne en code source ouvert

D'autres logiciels graphiques en code source ouvert (plus spécialisés)

Design web

Outils et guides en ligne pour le design web

Apprendre le design web

La typographie sur le web

Blogs de design web

http://webdesignledger.com/

http://www.webdesignerdepot.com/

http://webdesign.tutsplus.com/

http://designrfix.com/

http://www.w3schools.com/html/html_colornames.asp

Ressources typographiques

Fontes gratuites de qualité (pas toutes, mais certaines)

Apprendre la typographie

Blogs et archives sur la typographie

Outils typographiques en ligne

Apprendre le dessin vectoriel

Notions d'Identité visuelle

Qu'est-ce qui fait un bon logo ? Vidéo (en anglais) : https://www.youtube.com/watch?v=RBTiTcHm_ac

Chartes graphiques de grandes marques (certaines ne marchent pas) : http://blog.logoenvue.fr/conseil-communcation/charte-graphique-marque-1301

Guide pour la création de chartes graphiques pour le web : https://www.smashingmagazine.com/2010/07/designing-style-guidelines-for-brands-and-websites/

Graphisme interactif - http://graphism.fr/

La couleur

Jeu pour apprendre à identifier des couleurs : http://color.method.ac/

Kuler (sélecteur de gammes de couleur en ligne) : https://color.adobe.com/fr/create/color-wheel/

Pictaculous - générateur de palettes adobe à partir d'images - : http://www.pictaculous.com/

Un autre outil pour générer des palettes de couleur : http://www.cssdrive.com/imagepalette/index.php

Infographies

Le travail de l'infographiste David McCandless : http://www.informationisbeautiful.net/

Le travail de l'infographiste Ole Häntzschel : http://www.olehaentzschel.com/

Le travail de l'infographiste Jer Thorp (big data) : http://blog.blprnt.com

Tutoriel pour créer une infographie : http://www.digitalartsonline.co.uk/tutorials/adobe-illustrator/design-magazine-infographic/

Histoire de l'infographie et types d'infographie (sur la Wikipédia en anglais) : https://en.wikipedia.org/wiki/Infographic

Un autre projet sur des différentes présentations des graphiques d'information : https://www.behance.net/gallery/6882639/INFOGRAPHICS

Infographies interactives sur Bloomberg Businessweek : http://www.bloomberg.com/visual-data/

Infographies sur le magazine Wired : http://www.wired.com/tag/infographics/

Des graphistes parlent de leurs infographies préférées : http://www.theguardian.com/membership/2014/sep/10/best-infographic-graphic-design

Blogs sur le Data Journalism

Blogs sur le design dans la presse

Art pixelisé

http://flipflopflyin.com/

Petit outil en ligne pour transformer des images bitmap en graphiques .svg : http://www.drububu.com/tutorial/bitmaptovector.html

Inspiration graphique (affiches et visuels activistes)

Voir aussi