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
m |
(→Outils et guides en ligne pour le design web) |
||
| (13 révisions intermédiaires par 9 utilisateurs non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
| − | 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, | + | [[Catégorie:Ressource]] |
| + | [[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…). 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 21 : | Ligne 23 : | ||
*[http://wellcomeimages.org/ Wellcome collection] | *[http://wellcomeimages.org/ Wellcome collection] | ||
| − | ==Licences Creative Commons== | + | ===Licences Creative Commons=== |
| − | [https://creativecommons.org/licenses/?lang=fr Comment utiliser les licenses Creative Commons] | + | *[https://creativecommons.org/licenses/?lang=fr Comment utiliser les licenses Creative Commons] |
| − | https://fr.wikipedia.org/wiki/Licence_Creative_Commons | + | *[https://fr.wikipedia.org/wiki/Licence_Creative_Commons Explication Wikipédia des licences Creative Commons] |
| − | http://d3sdoylwcs36el.cloudfront.net/creative-commons-license-types-pros-cons.gif | + | *[http://d3sdoylwcs36el.cloudfront.net/creative-commons-license-types-pros-cons.gif Droits permis par chaque licence (en anglais)] |
| + | *[https://search.creativecommons.org/ Moteur de recherche multisites permettant de trouver des images sous licences CC] | ||
| − | ==Illustrations | + | === Illustrations dans le domaine public === |
http://www.oldbookillustrations.com | http://www.oldbookillustrations.com | ||
| Ligne 37 : | Ligne 40 : | ||
http://publicdomainreview.org/ | http://publicdomainreview.org/ | ||
| − | ==Textures== | + | === Textures === |
| − | http://www.demilked.com/free-paper-textures-backgrounds/ | + | *[http://www.demilked.com/free-paper-textures-backgrounds/ Textures de papier] |
| − | http://wefunction.com/roundup-of-essential-grunge-design-resources/ | + | *[http://wefunction.com/roundup-of-essential-grunge-design-resources/ Textures ''grunge''] |
| − | [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 59 : | Ligne 62 : | ||
*[https://fr.libreoffice.org/ '''Libre Office''' - suite ofimatique open source, permet de créer des documents de texte ainsi que des bases de données, etc, et permet d'éditer des documents de la suite Microsoft Office (.doc, excel, etc) tout en restant complètement gratuite] | *[https://fr.libreoffice.org/ '''Libre Office''' - suite ofimatique open source, permet de créer des documents de texte ainsi que des bases de données, etc, et permet d'éditer des documents de la suite Microsoft Office (.doc, excel, etc) tout en restant complètement gratuite] | ||
| − | *[ | + | *[https://www.openoffice.org/fr/ '''Apache OpenOffice''' (Fait la même chose que LibreOffice)] |
*[http://www.flossmanualsfr.net/ '''Floss Manuals''' - Guides d'utilisateur pour les logiciels open source (en français)] | *[http://www.flossmanualsfr.net/ '''Floss Manuals''' - Guides d'utilisateur pour les logiciels open source (en français)] | ||
| + | |||
| + | === Logiciels audio en code source ouvert === | ||
| + | |||
| + | *[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 76 : | 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)] | ||
| + | *[https://gitlab.com/esadhar/usable/wikis/liste-outils Liste d’outils libres pour la création] | ||
| − | =Design web= | + | == Design web == |
| − | ==Outils et guides en ligne pour le design web== | + | === Outils et guides en ligne pour le design web === |
| − | *[ | + | *[https://makeawebsitehub.com/social-media-image-sizes-cheat-sheet/ Formats de publication d'images pour les principaux réseaux sociaux] |
*[http://resizemybrowser.com/ ResizeMyBrowser - Outil pour recadrer la taille du navigateur selon la taille du site web] | *[http://resizemybrowser.com/ ResizeMyBrowser - Outil pour recadrer la taille du navigateur selon la taille du site web] | ||
| Ligne 89 : | Ligne 97 : | ||
*[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 95 : | Ligne 103 : | ||
*[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 101 : | Ligne 109 : | ||
*[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 115 : | Ligne 123 : | ||
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 130 : | Ligne 138 : | ||
*[http://atipo.es/trabajo/ Atipo, créateurs de caractères (certains sont téléchargeables gratuitement)] | *[http://atipo.es/trabajo/ Atipo, créateurs de caractères (certains sont téléchargeables gratuitement)] | ||
| + | |||
| + | *[http://velvetyne.fr/ Velvetyne, caractères open source] | ||
| + | *[http://usemodify.com/ Use & Modify - Liste de fontes libres] | ||
| + | *[https://github.com/raphaelbastide/libre-foundries Liste de fonderies de caractères sous licence libre] | ||
*[https://www.typewolf.com/open-source-web-fonts Sélection de caractères disponibles sur Google Fonts] | *[https://www.typewolf.com/open-source-web-fonts Sélection de caractères disponibles sur Google Fonts] | ||
| Ligne 135 : | Ligne 147 : | ||
*[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 155 : | Ligne 167 : | ||
*[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 167 : | Ligne 179 : | ||
*[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] | ||
*[http://www.copypastecharacter.com/ '''CopyPasteCharacter''' - tableau de glyphes en ligne] | *[http://www.copypastecharacter.com/ '''CopyPasteCharacter''' - tableau de glyphes en ligne] | ||
| + | *[http://unilist.raphaelbastide.com/ Unilist - Altrnative sans pub à CopyPasteChraracter] | ||
*[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 181 : | Ligne 194 : | ||
*[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://www.citrinitas.com/history_of_viscom/index.html Histoire de la communication visuelle] | |
| − | + | *[http://www.underconsideration.com/brandnew/ Under Consideration - Critique de nouveaux logotypes] | |
| − | + | *[http://www.underconsideration.com/artofthemenu/ Art of the menu - collection de menus de restaurants] | |
| − | Qu'est-ce qui fait un bon logo ? Vidéo (en anglais) | + | *[https://www.youtube.com/watch?v=RBTiTcHm_ac Qu'est-ce qui fait un bon logo ? Vidéo (en anglais)] |
| − | + | *[http://blog.logoenvue.fr/conseil-communcation/charte-graphique-marque-1301 Chartes graphiques de grandes marques (certaines ne marchent pas)] | |
| − | + | *[https://www.smashingmagazine.com/2010/07/designing-style-guidelines-for-brands-and-websites/ Guide pour la création de chartes graphiques pour le web] | |
| − | + | *[http://graphism.fr/ Graphism.fr, Graphisme interactif] | |
| − | =La couleur= | + | == La couleur == |
| − | + | *[http://color.method.ac/ Jeu pour apprendre à identifier des couleurs] | |
| − | + | *[https://color.adobe.com/fr/create/color-wheel/ Kuler (sélecteur de gammes de couleur en ligne)] | |
| − | 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.cssdrive.com/imagepalette/index.php Colors Pallete Generator, un autre outil pour générer des palettes de couleur] | |
| − | =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 217 : | Ligne 230 : | ||
Le travail de l'infographiste Jer Thorp (big data) : http://blog.blprnt.com | Le travail de l'infographiste Jer Thorp (big data) : http://blog.blprnt.com | ||
| − | + | *[http://www.digitalartsonline.co.uk/tutorials/adobe-illustrator/design-magazine-infographic/ Tutoriel pour créer une infographie] | |
| − | Histoire de l'infographie et types d'infographie (sur la Wikipédia en anglais) | + | *[https://en.wikipedia.org/wiki/Infographic Histoire de l'infographie et types d'infographie (sur la Wikipédia en anglais)] |
| − | + | ||
| − | + | *[https://www.behance.net/gallery/6882639/INFOGRAPHICS Chartes couleur pour des graphiques d'information] | |
| − | + | *[http://www.bloomberg.com/visual-data/ Infographies interactives sur Bloomberg Businessweek] | |
| − | + | *[http://www.wired.com/tag/infographics/ Infographies sur le magazine Wired] | |
| − | + | *[http://www.theguardian.com/membership/2014/sep/10/best-infographic-graphic-design Des graphistes parlent de leurs infographies préférées] | |
*[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:// | + | *[http://www.drububu.com/tutorial/bitmaptovector.html Bitmap To Vector, petit outil en ligne pour transformer des images bitmap en images .svg] |
| − | + | ||
| − | + | ||
| − | =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 254 : | Ligne 265 : | ||
*[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 == | ||
| + | |||
| + | *[[Ressources/Ressources graphiques de la Nuit Debout|Ressources graphiques de la Nuit Debout]] | ||
| + | *[http://zero.samizdat.net/ Zéro+zéro - Affiches et visuels de révolte sur Samizdat.net] | ||
| + | *[https://nuitdebout.tumblr.com/ Mouvement de libération graphique et artistique] | ||
Version actuelle en date du 29 octobre 2018 à 04:26
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.
Sommaire
Recherche iconographique[modifier | modifier le wikicode]
Ressources gratuites[modifier | modifier le wikicode]
Licences Creative Commons[modifier | modifier le wikicode]
- Droits permis par chaque licence (en anglais)
- Moteur de recherche multisites permettant de trouver des images sous licences CC
Illustrations dans le domaine public[modifier | modifier le wikicode]
http://www.oldbookillustrations.com
http://publicdomainreview.org/
Textures[modifier | modifier le wikicode]
Ressources informatiques en code source ouvert[modifier | modifier le wikicode]
Logiciels pour le graphisme en code source ouvert[modifier | modifier le wikicode]
Note : ces logiciels sont gratuits et librement téléchargeables sur des différents systèmes d'exploitation.
Logiciels audio en code source ouvert[modifier | modifier le wikicode]
Outils en ligne en code source ouvert[modifier | modifier le wikicode]
D'autres logiciels graphiques en code source ouvert (plus spécialisés)[modifier | modifier le wikicode]
- Pure Data - logiciel pour réaliser des installation interactives (audio, vidéo, etc)
- Liste d’outils libres pour la création
Design web[modifier | modifier le wikicode]
Outils et guides en ligne pour le design web[modifier | modifier le wikicode]
Apprendre le design web[modifier | modifier le wikicode]
La typographie sur le web[modifier | modifier le wikicode]
Blogs de design web[modifier | modifier le wikicode]
http://www.webdesignerdepot.com/
http://webdesign.tutsplus.com/
http://www.w3schools.com/html/html_colornames.asp
Ressources typographiques[modifier | modifier le wikicode]
Fontes gratuites de qualité (pas toutes, mais certaines)[modifier | modifier le wikicode]
- Velvetyne, caractères open source
- Use & Modify - Liste de fontes libres
- Liste de fonderies de caractères sous licence libre
Apprendre la typographie[modifier | modifier le wikicode]
Blogs et archives sur la typographie[modifier | modifier le wikicode]
Outils typographiques en ligne[modifier | modifier le wikicode]
- CopyPasteCharacter - tableau de glyphes en ligne
- Unilist - Altrnative sans pub à CopyPasteChraracter
Apprendre le dessin vectoriel[modifier | modifier le wikicode]
Notions d'Identité visuelle[modifier | modifier le wikicode]
La couleur[modifier | modifier le wikicode]
Infographies[modifier | modifier le wikicode]
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
