culture libre & open source dans le graphisme

mémoire
- fond (lire en ligne)(↑)
- forme
  - photos
  - fichiers sources
    - scribus (zip: cahiers texte & images + images sources)
    - pdf (texte / images)
    - pdf imposés (texte / images) + mode d’emploi
      Pour chaque livret :
      
      Imprimer d'abord les pages impaires, ordre inversé ;
      
      Replacer les feuilles dans l'imprimante, sans les retourner ni les retourner (marche pour les imprimantes où la feuille sort imprimée sur le dessus) ;
      
      Puis imprimer les pages paires, ordre normal.
      
      Couper le cachier image selon les traits de coupes ;
      
      Plier les deux cahiers ;
      
      Placer le cahier images sur le cahier texte ;
      
      Relier.

projets

licences libres
Kit pédagogique vis à vis des licences libres, des droits et devoirs du copyleft. Comprend un livret (dépliable), deux séries de cartes (droit et devoirs / licences), et un poster (dépliable aussi).
Les cartes des licences sont des cartes à trous, qui lorsqu'elles sont posées sur la jaquette, laissent apparaitre les droits et devoirs auxquelles elles donnent lieu.
- photos
- fichiers pdf
  - cartes
  - poster
  - mode d’emploi :
police collaborative
D'après le gabarit, le public est invité à redessiner une lettre de la manière qu'il souhaite.
Les seules contraintes étant le respect des hauteurs (d’x, ascendantes, etc.), et l'utilisation de la grille (de manière plus ou moins libre).
→ Les lettres sont construites indépendamment les unes des autres / reflète la diversité / le cadre permet d’éviter une disparité trop importante.
- dessins
  ...
- vecto
- fichier ttf
- mise en application

redesign de wikipedia

Différents essais pour le redesign de wikipédia /

recherches css

idée d’après user CSS de stdin
La css de la page est modifiée avec stylish, de manière à isoler les différents éléments les uns des autres.

page d’accueil

* { visibility:visible; }

* {
 visibility:invisible;
}
a {
 visibility:visible; 
}

* {
 visibility:invisible; 
}
span {
 visibility:visible; 
}

* {
 visibility:invisible; 
}
a,p,b,i,strong,em {
 visibility:visible; 
}

* {
 visibility:invisible;
}
div {
 visibility:visible; 
}

* {
 visibility:invisible; 
}
img {
 visibility:visible; 
}

* {
 visibility:invisible; 
}
table {
 visibility:visible; 
}

article

* {
 visibility:visible; 
}

* {
 visibility:invisible; 
}
a {
 visibility:visible; 
}

* {
 visibility:invisible; 
}
h1,h2,h3,h4,h5,h6 {
 visibility:visible; 
}

* {
 visibility:invisible; 
}
p,span,b,i,strong,em {
 visibility:visible; 
}

* {
 visibility:invisible; 
}
div {
 visibility:visible; 
}

* {
 visibility:invisible; 
}
img {
 visibility:visible; 
}

* {
 visibility:invisible; 
}
li {
 visibility:visible; 
}

css modifiée

réglages esthétiques ; longueur et hauteur des lignes, couleurs, nuances, typo, barre du haut fixe, etc.

voir code

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("wikipedia.org"),
domain("wikimedia.org"),
domain("wiktionary.org"),
domain("wikiquote.org"),
domain("wikisource.org"),
domain("wikiversity.org") {
/******************* TEXTE, COULEUR DE FOND****/
body {
	font-family: serif !important;
	font-size: 16px !important;
	color: #000;
	background-color:#FFF !important;
}
div#p-namespaces{ margin-left:20px;}
/******************* COULEUR ****/
div#content, .homonymie, #mp-right {
	color: #000;
	background-color: #f6f6f6 !important;
}
/*************** LONGUEUR DE LIGNE, INTERLIGNAGE, MARGE ****/
div#content p, div#content li, div#content dl,
.NavFrame, pre, h1,h2,h3,h4,h5, .mw-content-ltr div{
	max-width: 700px;
	line-height:1.6em !important;
}
.firstHeading,.modifiedSectionTitle{
	border-bottom:0.15em #555 solid !important;
	margin:0.2em !important;
}
/******************* INFOBOX ****/
.infobox_v2 tbody{width: 300px !important;float: right;}
.infobox_v2 p{ width: 170px !important; }
/******************* SOMMAIRE ****/
#toc { font-size:12px !important; max-width:700px;}
#toc li, #toc ul { display: inline; }
#toc li:after { content: ' | '; }
#toc li:last-child:after { content: ''; }
#toctitle { display: none; }
/************ COULEUR DES LIENS / FOND(s) *****/
a, a:visited,
div#mw-panel div.portal div.body li a,
div#mw-panel div.portal div.body li a:visited {
	color: #777 !important;
}
.new {color:#994444 !important;}
.vectorTabs, div#content, div#footer, div#mw-head-base,li{
	background-image: none !important;
}
.vectorTabs{
	background-color: #fff !important;
	height:10px;
}
#mw-js-message{background-color:#ddd !important;}
/******************* ONGLETS SUPÉRIEURS ****/
.vectorTabs .selected a, .vectorTabs a:hover{
	background-color: #f6f6f6 !important;
}
.vectorTabs a{
	color: #333 !important;
	background-color: #fff !important;
}
#mw-head, mw-head-base{
	background-color: #FFF !important;
	position:fixed !important;
}
#p-personal{font-family:Trebuchet, Trebuchet MS !important;}
/******************* LOGO ****/
#p-logo{display:none;}
#mw-panel {margin-top:-30px;}
#mw-panel:before {
	font-family:BetecknaLowerCase;
	font-weight:bold;
	content:'W';
	font-size:130px;
	margin-left:10px;
	line-height:1em;
	color:#555;
	position:fixed !important;
	margin-top:-150px !important;
}
/******************* IMAGES ****/
img, .thumbinner, .bandeau,
.mw-js-message-interprojets {
	border-radius:7px;
}
/******************* ACCUEIL ****/
.mw-content-ltr table p img,hr{visibility:hidden !important;}
#mp-right div{background:none !important;}
#accueil_titre{max-width:1200px !important;}
#mw-content-text table td{
	background:none !important;
	border:0 !important;
}
/******************* TITRES ****/
.modifiedSectionTitle, .firstHeading,h1,h2,h3,h4,h5{
	padding:5px !important;
	font-family:Trebuchet MS, Trebuchet !important;
	line-height:0.5em !important;
	letter-spacing:0.05em;
}
.mw-headline h2{font-size:2em !important;}
.firstHeading{font-size:2.5em !important;}
}

logo

9 choix / réseau / modulaire

Puis typo dérivée:

a b c d e f g h i j k l m n o p q r s t u v w x y z
é è ë ê ç œ æ ﬁ ﬂ
0 1 2 3 4 5 6 7 8 9
., : ; / ? ! ( { [ ] } ) | « » “ ” ' > < - — _ & • ƒ ¶ × ÷ + ± = - % $ * ø °
> fichier ttf
Wikimédia
Wikipedia : Accueil
- Interface où l’on peut déplacer les blocs ; accent mis sur la modularité du site. Barre de naviguation commune à tout le site.
- (script open-source trouvé ici)
Wikipedia : Article
- affichage en colonne plus fines, images mises en valeur dans une autre.
- menu et autres outils (pratiques mais peu utilisés) dans une colonne à droite, possibilité de la cacher (modulaire aussi?)

diplôme

recherches

Gentium

Ajout de ligatures (traditionnelles et conditionnelles) et chiffres elzéviriens à la police libre Gentium.
Beteckna

ajout de quelques caractères spéciaux à la police Beteckna, corrections de quelques erreurs, etc.
œ æ Œ Æ ç Ç ñ Ñ
- – — ‹ › µ § ¶

imposition

Pour l’imposition et l’impression de livrets en ligne de commande, création d’un script bash (utilisation à l’aide du terminal sous Linux) qui permet d’automatiser la recette rendue disponible par osp.

#!/bin/bash
# imposition et impression de livrets
# d'après “19 steps to do a booklet”, d'Open Source Publishing
# licence Art Libre 1.3
#
# à faire :
# - détecter automatiquement le nombre de pages et le format.
# - n'avoir qu'à faire un clic droit pr détecter le fichier
# automatiquement (+ nb pages + format)
# - si trop de pages, créer plusieurs livrets
#
#
#-------------------------------------------------

# collecte les informations nécessaires
echo -n "→ nom du fichier (sans .pdf)? : "
read nom
echo -n "→ nombre de pages? : "
read nb
#echo -n  "format d'une page? : "
#read format
format=A5

# convertit le .pdf en .ps
pdftops -paper match $nom.pdf temp_convertir.ps
# il paraît qu'acrobat marche mieux
# acroread -toPostScript $nom.pdf temp_convertir.ps

# change l'ordre des pages
psbook -s$nb temp_convertir.ps temp_imposer.ps

# dispose deux pages sur une seule
psnup -2 -P$format temp_imposer.ps temp_disposer.ps

# convertit le .ps obtenu en .pdf
ps2pdf temp_disposer.ps $nom'_imprimer'.pdf

# supprime les fichiers intermédiaires
rm temp_convertir.ps temp_imposer.ps temp_disposer.ps

echo -n  "→ do you want to print it now? (o/n) : "
read print

if [ "$print" = "o" ]; then
	echo -n  "→ nom de l'imprimante? : "
	read myprinter
	#myprinter=psc-2500-series
	#myprinter=MP550-series

	echo "…impression des pages impaires…"
	# impression ds pages impaires, ordre inversé
	lpr -P $myprinter -o page-set=odd -o outputorder=reverse -#1 $nom'_imprimer'.pdf
	echo -n "…une fois fini, remettre des feuilles dans l'imprimante sans les tourner, pour imprimer les pages paires. \nprêt ?"
	read pages_paires
	# impression ds pages paires, ordre normal
	lpr -P $myprinter -o page-set=even -o outputorder=normal -#1 $nom'_imprimer'.pdf
	echo "plus qu’à plier et relier.."
else
	echo ".."
fi

travaux graphiques

graphisme
- carte de vœux 2011
  - sujet de deuxième année ; cartes de vœux pour 2011, où le 11 de 2011 devient le n de onze / et où le onze se lit verticalement ou horizontalement.
- l’image des mots
  - Sujet de deuxième année ; donner forme et sens à une liste de citations en les mettant en scène.
- plier/déplier
  - sujet de deuxième année ; seule contrainte : « une feuille + deux plis croisés ». Jeux sur les mots, où le dépli crée de nouvelles phrases, dont le sens est induit par les précédentes.
  - Un premier mot est écrit à cheval sur les trois épaisseurs différentes de la feuille ; en le dépliant, d'autres mots apparaissent, qui ont des lettres ou parties de lettre en commun avec le précédent ; au final, 3 mots qui forment une «histoire-aphorisme» , en essayant de respecter une syntaxe correcte mais en créant un sens plus ou moins absurde :
  - Même jeu avec des phrases : chaque partie de la phrase est écrite sur une épaisseur différente ; quand on déplie ou replie, des 5 manières possibles, une nouvelle phrase apparaît ; chaque mot précédemment écrit est une contrainte pour les suivants.
  - Ici, un sonnet de Victor Hugo, soumis à la contrainte oulipienne du tireur à la ligne, inversée.
- illustres inconnus
  - sujet de troisème année ; recherches autour de l’artiste John Maeda et réalisation d'un livret, utilsant la syntaxe de processing et les couleurs par défaut qui en dérivent. Couverture réalisée avec processing, référence à l'art ascii, à mi-chemin entre l'image et la lettre, l'art et le code.
    Puis réalisation d’un poster le représentant : codé le cheminement pour arriver à ce résultat, c'est-à-dire transposé des éléments réels dans un langage de code, puis retransposé ce code au monde réel en l'imprimant, en le sortant de son contexte.
- musique & partitions
  - Recherches graphiques autour des partitions musicales, et tri des éléments présents.
édition
- ponctuations
  - Workshop Edition « Inter- Epi- Para- Méta- Archi- Hyper- »
    avec les graphistes Coline Sunier & Charles Mazé
    Travail réalisé avec Lucie Lafitte et Chloé Sérieys.
    
    Le sujet, pour faire simple, était de choisir un catalogue, en extraire le paratexte, puis en faire une nouvelle édition.
    
    Nous avons choisi le livre de Daniel Buren, Ponctuations, où il répertorie toutes les statues de Lyon et liste leurs caractéristiques : une page par statue, avec photo, description, informations sur le contexte, schéma et dimensions du socle.. Il intervient ensuite sur chacun de ces socles en les entourant d'une bande de tissus rayée à sa manière, mais cette intervention discrète n'est visible que sur la couverture et peu décrite dans le livre.
    
    L'idée forte de ce «catalogue» est la liste, et d'autres recherches sur Daniel Buren nous ont amené à voir qu'il se servait souvent de cette méthode dans ses œuvres.
    
    Nous avons donc décidé de retourner sa méthode contre son livre. Le rabat reprend la maquette des pages de description des statues. Le livre quant à lui est une liste de tous les éléments qui y sont présents, mais triés selon leur aspect : d'abord seulement le texte en gras, puis les italiques, puis les majuscules, puis les ponctuations, puis les chiffres. Pour les images, d'abord les statues par degrés d'abstraction croissant, puis les socles en fonctions de leur forme, carrée, ronde, puis de plus en plus complexe.. Au final, un pavé de 408 pages..
    
    L'aspect esthétique, les différences de rythmes de ces colonnes plus ou moins remplies sont donc crées uniquement à partir du texte de départ et d'une idée ; la méthode employée par Buren est poussée à son paroxysme et donne lieu à un nouveau livre..
- grapus
  - Réalisation d’une édition présentant le travail du collectif Grapus.
- désert graphique
  - Atelier de Recherche et Création mené dans le désert des Bardenas. Double pages présentant un répertoire des différentes matières et objets du désert.
- chaumont — concours étudiant à textes ouverts
  - Réponse au sujet « à textes ouverts » :
    — livre qui s'ouvre dans un sens, soit dans l'autre ;
    — du côté de l'esperluette, il se lit façon codex, les couleurs utilisées sont CMJN, références au papier ;
    — du côté de l'arobase, il se lit dans le sens vertical et peut se dérouler en volumen. Couleurs RVB, référence à l'écran ;
multimédia
- musique & couleurs
  - Travail sonore et visuel en flash et processing autour des sons, de la théorie musicale, et des associations sons/couleurs.
    → à voir ici.
peinture
- le monde de l’image
  - sujet de première année ; diverses représentations de unes de journaux (Libération) ou de prospectus, pour redonner un statut à une image produite en série et lui donner un nouveau sens, des nouvelles formes, en y apportant des modifications.
photo
- la ville
  - sujet de première année ; représentations géométriques de la ville.
- entre deux
  - sujet de première année ; l’entre deux représenté par le sommeil, photos de dormeurs.
vidéo
- focus sonore
  - Voir sur viméo.
    Extrait d'un texte de Hervé le Tellier (oulipien), lu par Jacques Roubaud (oulipien), enregistré par Christophe Rault (ourapien), pour arte radio. Le focus sonore est retranscrit par un flou appliqué aux sous-titres, et l'intonation ou le sens des phrases est retranscrit par la typographie.
- (google) earth
  - Voir sur viméo.
    Superposition de sons à des images filmées dans google earth.