ORDRE/DÉSORDRE

Transcription

ORDRE/DÉSORDRE
YGAXBLIS
TECHNIQUES
INFOGRAPHIQUES
APPROFONDIES
CHAOS/AGENCEMENT
A l’aube d’un nouveau monde
ORDRE/DÉSORDRE
JE GRILLE•TU GRILLES •IL/ELLE GRILLE
NOUS GRILLONS•VOUS GRILLIEZ•ILS/ELLES GRILLENT
http://francois-bourgaux.infographie-heaj.eu/blog/
15x4h=60h
Un ensemble d’environ 20h (peut-être 24h ?)
sera consacré à la notion de grille.
Des principes de structurations de l’espace
d’une page, nous extrapolerons les principes
ancestraux vers l’espace écran.
Oublions toutes théories des temps anciens
Bâtissons nos propres références (jusqu’à la
semaine prochaine)
COMMENÇONS PAR LE CHAOS
TECHNIQUES
INFOGRAPHIQUES
APPROFONDIES
15x4h=60h
Un ensemble d’environ 20h (peut-être 24h ?)
sera consacré à la notion de grille.
Des principes de structurations de l’espace
d’une page, nous extrapolerons les principes
ancestraux vers l’espace écran.
A l’aube d’un nouveau monde
Oublions toutes théories des temps anciens
Bâtissons nos propres références (jusqu’à la
semaine prochaine)
COMMENÇONS PAR LE CHAOS
02. TIA1.2.TID.1.2.3.2010.11
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 http://francois-bourgaux.infographie-heaj.eu/blog/
CONSTRUIRE
Nous le verrons plus tard, il était, il est et il
sera toujours question de construction.
Construire une structure
Construire une organisation
Construire un agencement
Construire des relations entre éléments
Construire avec quels éléments ?
Construire sur base d’éléments aléatoires
CONSTRUIRE PAR LA PRATIQUE
Les 2TID constituent 3 groupes.
Ces 3 groupes ont été formés en septembre
2010 par division d’un seul ensemble.
Cette division s’est produite par vos relations
personnelles, par le hasard de votre position
dans cet ensemble, par d’autres facteurs non
répertoriés.
Depuis, vous êtes figés pour une durée de 10
mois dans un sous groupe que l’on pourrait
subdiviser par genre.
Les 2TID1 se composent de 1 jeune fille et 24
jeunes garçons.
Les 2TID2 se composent de 7 jeunes filles et 19
jeunes garçons.
Les 2TID3 se composent de 8 jeunes filles et 19
jeunes garçons.
Et si vous ne vous en êtes pas encore rendu
compte, en dehors de votre appartenance à
votre groupe/classe, vous êtes perdu dans
l’espace.
03. TIA1.2.TID.1.2.3.2010.11
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 Pour cette première tentative d’agencement
d’éléments aléatoire, nous allons tenter de
créer une représentation visuelle structurée
de positions aléatoires que vous allez créer
par positionnement individuel dans un cadre
donné.
L’objectif est la création d’une réalisation
collective, collaborative des étudiants présents
en classe le jour du cours.
Par après, nous mènerons en parallèle
structuration de l’espace, organisation
d’éléments de navigation, création de
fonctionnalité pour disposer de l’ensemble
des ingrédients constitutif d’une interface, à
savoir contenu et navigation.
Peut-être aboutirons nous un jour à une
application interactive ou du moins à
l’ensemble des écrans qui constitueraient cette
application. Nous imaginons cette application
pour un ipad…
Y* GIRL(S**) AND X*** BOYS LOST IN
SPACE
* le nombre de filles présentes en classe le jour
de l’exercice.
** le S sans parenthèse si il y a plusieurs filles.
*** le nombre de garçons présents en classe le
jour de l’exercice.
Comment allez-vous procéder ?
http://francois-bourgaux.infographie-heaj.eu/blog/
Par échanges d’informations.
Par manipulations, évidemment et même des
suites de manipulations organisée en plusieurs
temps.
TEMPS 1
1.1
Selon le local du jour et selon le poste de
travail occupé par l’étudiant, ce dernier
est identifié par un numéro. Ce numéro est
essentiel pour la suite de l’exercice, ne l’oublie
donc pas.
1.2
Tu crées un nouveau calque
Tu choisi un pinceau d’un diamètre de 5
pixels
Tu sélectionnes le noir comme couleur d’avant
plan.
Comme dans Adobe After Effects®, tu as dans
Photoshop un panneau « info ».
Tu nommes ce document « stud_XX_01h »
Le XX correspond au numéro qui t’a été
attribué en début de cours.
Tu dessines un point de 5 pixels
ABSOLUMENT OU TU VEUX dans cet
espace de 1024x768 pixels et tu notes (grâce au
panneau « info ») les positions exactes en X et
en Y de ce point.
Tu double-cliques sur le nom de ton calque et
tu lui donne comme nom p1_X.Y
Tu remplaces le X par la valeur X de la
position de ton point et le Y par…
Ouvre Photoshop
Crée un document de 1024x768 pixels
1024 de large sur 768 de haut.
72 pixels/inch pour la résolution
RGB comme mode colorimétrique
Et du blanc comme arrière-plan
04. TIA1.2.TID.1.2.3.2010.11
Tu vérifies dans les préférences de ton
application que les « Units & Rulers » (Unités
et Régles ?) sont bien en pixel ainsi que la
taille de la typo.
Tu crées un second calque
Tu places un point de 5 pixels ABSOLUMENT
OU TU VEUX dans ce second calque que tu
nommes (après avoir dessiné le point) p2_X.Y
Tu places des guides horizontaux et verticaux
correspondant aux coordonnées de tes 2
points.
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 http://francois-bourgaux.infographie-heaj.eu/blog/
Tu sélectionnes l’outil ligne dont tu
paramètres l’épaisseur à 1 pixels
Ton panneau calque doit ressembler à ceci :
Tu traces une ligne entre les centres tes
2 points, exactement depuis le centre
du premier point dont tu connais les
coordonnées au centre du deuxième point, pas
d’approximation ici, haute précision.
Dans le panneau Calque, tu « rasterize »
(pixellisation ?) le calque de la ligne et tu le
nomme line_stud_XX (le XX est ton numéro).
Tu groupes tes 3 calques dans un dossier que
tu nommes stud_XX_gh si tu es un garçon,
stud_XX_fh si tu es une fille.
Enregistre ton document (avec l’extension
visible).
Si tu ne travailles pas sur une machine de
l’école, débrouille toi pour que ton document
puisse être édité en CS4 ! Si ce n’est pas
possible, soit tu travailles sur une machine de
l’école, soit abandonne ton numéro et rentre
chez toi.
Une solution : ?
« In Photoshop CS5, go to Preferences >
File Handling > Maximize PSD and PSB file
compatibility, and choose Always or Ask.
Then save your file. » trouvée sur un forum,
fonctionne ?
05. TIA1.2.TID.1.2.3.2010.11
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 Ta première composition horizontale est
terminée.
1.3
En utilisant les mêmes coordonnées de base,
nous allons maintenant composé une version
en orientation paysage de cette composition.
Très simple.
Fait subir à ton image une rotation de 90°
dans le sens des aiguilles d’une montre
(menu image)
http://francois-bourgaux.infographie-heaj.eu/blog/
Tu modifies les noms de tes deux layers
p1_X.Y et p2_X.Y selon les nouvelles
coordonnées de tes 2 points.
Tu modifies le nom de ton dossier (celui qui
contient les 3 layers) en stud_XX_gv ou fv
Enregistre ton document sous le nom :
stud_XX_01v.psd
Si tu ne travailles pas sur une machine de
l’école, débrouille toi pour que ton document
puisse être édité en CS4 !
Ta seconde composition est terminée.
1.4
Ta participation individuelle à cette
réalisation collective est presque terminée.
1.4.1
Tu places sur net-wb, dans le dossier (selon ta
classe) Tous/2TID1_TIA1_1 ou /2TID2_TIA1_1
ou /2TID3_TIA1_1, tes 2 images (stud_XX_01h.
psd et stud_XX_01v.psd) dans un dossier que
tu nommes :
stud_XX_initialeprénominitilaenom, par
exemple stud_01_fb (respecte les minuscules).
1.4.2
Selon ta classe, tu te connectes à
(lien clicable sur le blog) :
2TID1
https://spreadsheets.google.com/
ccc?key=0Ak4V-Zd_6QpmdER2ODNvZ3hUNkt
YUUJYNzBJZkU0TWc&hl=en&authkey=CK38
0sUF
2TID2
https://spreadsheets.google.com/
ccc?key=0Ak4V-Zd_6QpmdE1ZelhTVlFIR0F
OUG91bXJobWhyM1E&hl=en&authkey=CJ
nx6_AB
2TID3
https://spreadsheets.google.com/
ccc?key=0Ak4V-Zd_6QpmdFRnNjkzYks3S2Ux
SG5kaWNEM1Fybmc&hl=en&authkey=CKT
Hh-IC
et selon ton numéros, tu complètes le tableur
avec les coordonnées de tes points pour le
document horizontal et le document vertical.
Edite ce document sérieusement, ne modifie
aucune autre valeur que celle qui te concerne,
soit responsable, respecte le travail collectif et
tu sera respecté.
Cet premier temps doit impérativement être
finalisé en moins d’une heure.
06. TIA1.2.TID.1.2.3.2010.11
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 http://francois-bourgaux.infographie-heaj.eu/blog/
TEMPS 2
Ta composition se complexifie
2.1
Tu es face à deux options pour la suite de ton
travail :
Soit tu récupères l’ensemble des documents
.psd sur net_wb. Si il y a des documents
CS5 incompatible, maudit les étudiants
responsables.
Soit tu récupères l’ensemble des données du
tableur online qui correspond à ta classe.
Tu ouvres ton document stud_XX_01h.psd.
Pas celui qui est sur net-wb mais celui qui est
sur ton espace de travail.
Tu enregistres ce document sous le nom de
stud_XX_h_space1.psd
Tu assembles dans ce document
les points 1 de tous les étudiants (soit en
duplicant les layersd’un document à l’autre,
soit en redessinant les points selon leurs
coordonnées issues du tableur).
07. TIA1.2.TID.1.2.3.2010.11
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 Je conseillerais pour la suite de ta production
de placer un point par layer en suivant la
nomenclature donnée en début de document.
Et c’est ici que nous nous amusons un peu
pour créer des compositions variées sur la
base d’une structure identique simplement en
variant pour chaque étudiant l’enchaînement
des points. Cet enchaînement de point sera
également utilisé pour tes autres compositions.
Tu relies par une ligne d’1 pixel ton point 1
au point 1 de l’étudiant suivant de la liste qui
t’es attribuée.
Par exemple, l’étudiant 1 enchaîne son point
1 au point 1 de l’étudiant 4, puis à celui de
l’étudiant 2, puis à celui de l’étudiant 10, etc…
Retrouve ta liste ci-dessous :
http://francois-bourgaux.infographie-heaj.eu/blog/
stud_01/stud_04/stud_02/stud_10/stud_22/stud_20/stud_06/stud_16/stud_24/stud_15/stud_09/
stud_26/stud_03/stud_18/stud_07/stud_08/stud_19/stud_17/stud_25/stud_14/stud_27/
stud_23/stud_21/stud_13/stud_12/stud_11/stud_05
stud_02/stud_11/stud_12/stud_15/stud_07/stud_03/stud_10/stud_26/stud_23/stud_01/stud_06/
stud_19/stud_05/stud_18/stud_20/stud_17/stud_13/stud_24/stud_27/stud_25/stud_16/
stud_08/stud_09/stud_21/stud_14/stud_22/stud_04
stud_03/stud_20/stud_18/stud_25/stud_13/stud_08/stud_26/stud_21/stud_02/stud_17/stud_09/
stud_01/stud_05/stud_12/stud_22/stud_11/stud_07/stud_10/stud_19/stud_23/stud_24/
stud_15/stud_27/stud_14/stud_16/stud_04/stud_06
stud_04/stud_22/stud_12/stud_18/stud_13/stud_05/stud_25/stud_16/stud_03/stud_06/stud_27/
stud_17/stud_24/stud_26/stud_15/stud_19/stud_09/stud_20/stud_07/stud_08/stud_02/
stud_23/stud_21/stud_01/stud_11/stud_14/stud_10
stud_05/stud_23/stud_21/stud_09/stud_07/stud_02/stud_17/stud_26/stud_25/stud_06/stud_03/
stud_15/stud_20/stud_12/stud_01/stud_11/stud_08/stud_24/stud_04/stud_27/stud_19/
stud_16/stud_18/stud_14/stud_10/stud_22/stud_13
stud_06/stud_12/stud_27/stud_05/stud_26/stud_08/stud_03/stud_07/stud_20/stud_24/stud_25/
stud_10/stud_11/stud_13/stud_19/stud_18/stud_01/stud_23/stud_21/stud_14/stud_17/
stud_16/stud_15/stud_02/stud_04/stud_09/stud_22
stud_07/stud_15/stud_06/stud_25/stud_19/stud_16/stud_04/stud_23/stud_22/stud_03/stud_11/
stud_20/stud_14/stud_12/stud_01/stud_18/stud_26/stud_08/stud_09/stud_24/stud_27/
stud_21/stud_13/stud_05/stud_17/stud_02/stud_10
stud_08/stud_14/stud_06/stud_22/stud_17/stud_24/stud_25/stud_04/stud_27/stud_03/stud_02/
stud_10/stud_13/stud_18/stud_26/stud_09/stud_12/stud_19/stud_05/stud_23/stud_16/
stud_20/stud_11/stud_01/stud_21/stud_15/stud_07
stud_09/stud_05/stud_16/stud_12/stud_11/stud_04/stud_03/stud_06/stud_22/stud_02/stud_07/
stud_26/stud_24/stud_01/stud_18/stud_17/stud_15/stud_23/stud_27/stud_08/stud_25/
stud_10/stud_21/stud_19/stud_13/stud_20/stud_14/
08. TIA1.2.TID.1.2.3.2010.11
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 http://francois-bourgaux.infographie-heaj.eu/blog/
stud_10/stud_11/stud_02/stud_07/stud_26/stud_21/stud_13/stud_01/stud_20/stud_09/stud_08/
stud_24/stud_15/stud_22/stud_17/stud_14/stud_16/stud_23/stud_27/stud_12/stud_05/
stud_06/stud_25/stud_03/stud_04/stud_18/stud_19
stud_11/stud_02/stud_05/stud_19/stud_24/stud_12/stud_26/stud_20/stud_20/stud_16/stud_08/
stud_10/stud_03/stud_06/stud_27/stud_17/stud_13/stud_18/stud_07/stud_01/stud_23/
stud_09/stud_22/stud_15/stud_04/stud_21/stud_14
stud_12/stud_06/stud_05/stud_08/stud_17/stud_22/stud_15/stud_26/stud_18/stud_24/stud_27/
stud_09/stud_13/stud_25/stud_01/stud_16/stud_21/stud_14/stud_11/stud_23/stud_07/
stud_02/stud_04/stud_19/stud_10/stud_03/stud_20
stud_13/stud_26/stud_21/stud_11/stud_04/stud_25/stud_07/stud_24/stud_05/stud_01/stud_27/
stud_02/stud_22/stud_17/stud_10/stud_23/stud_18/stud_14/stud_20/stud_06/stud_09/
stud_08/stud_03/stud_12/stud_15/stud_16/stud_19
stud_14/stud_19/stud_26/stud_08/stud_22/stud_10/stud_03/stud_02/stud_24/stud_25/stud_11/
stud_04/stud_06/stud_23/stud_13/stud_21/stud_27/stud_09/stud_07/stud_16/stud_05/
stud_15/stud_12/stud_18/stud_20/stud_01/stud_17
stud_15/stud_16/stud_01/stud_06/stud_21/stud_02/stud_10/stud_13/stud_26/stud_22/stud_08/
stud_09/stud_03/stud_19/stud_07/stud_25/stud_24/stud_20/stud_27/stud_11/stud_04/
stud_17/stud_18/stud_14/stud_23/stud_05/stud_12
stud_16/stud_22/stud_09/stud_02/stud_18/stud_24/stud_04/stud_26/stud_03/stud_14/stud_10/
stud_06/stud_13/stud_20/stud_05/stud_21/stud_11/stud_08/stud_12/stud_19/stud_01/
stud_27/stud_17/stud_23/stud_15/stud_25/stud_07
stud_17/stud_04/stud_10/stud_05/stud_26/stud_23/stud_03/stud_09/stud_25/stud_18/stud_20/
stud_22/stud_14/stud_11/stud_13/stud_24/stud_27/stud_08/stud_15/stud_06/stud_07/
stud_01/stud_02/stud_21/stud_16/stud_19/stud_12
stud_18/stud_27/stud_21/stud_22/stud_12/stud_17/stud_15/stud_07/stud_23/stud_01/stud_06/
stud_11/stud_20/stud_04/stud_19/stud_03/stud_14/stud_16/stud_13/stud_09/stud_25/
stud_05/stud_24/stud_08/stud_02/stud_10/stud_26
09. TIA1.2.TID.1.2.3.2010.11
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 http://francois-bourgaux.infographie-heaj.eu/blog/
stud_19/stud_08/stud_01/stud_20/stud_16/stud_03/stud_09/stud_04/stud_18/stud_21/stud_10/
stud_07/stud_26/stud_17/stud_06/stud_12/stud_02/stud_11/stud_22/stud_23/stud_05/
stud_14/stud_24/stud_15/stud_25/stud_13/stud_27
stud_20/stud_07/stud_18/stud_15/stud_03/stud_27/stud_26/stud_17/stud_22/stud_11/stud_10/
stud_02/stud_06/stud_25/stud_21/stud_16/stud_01/stud_09/stud_24/stud_13/stud_12/
stud_05/stud_08/stud_23/stud_14/stud_04/stud_19
stud_21/stud_01/stud_18/stud_12/stud_11/stud_20/stud_26/stud_07/stud_06/stud_15/stud_17/
stud_08/stud_22/stud_14/stud_03/stud_02/stud_16/stud_27/stud_24/stud_19/stud_23/
stud_13/stud_04/stud_05/stud_25/stud_09/stud_10
stud_22/stud_04/stud_23/stud_17/stud_01/stud_13/stud_25/stud_26/stud_08/stud_12/stud_21/
stud_09/stud_10/stud_16/stud_19/stud_15/stud_11/stud_20/stud_02/stud_27/stud_06/
stud_24/stud_03/stud_07/stud_14/stud_18/stud_05
stud_23/stud_17/stud_24/stud_08/stud_01/stud_12/stud_27/stud_09/stud_20/stud_10/stud_07/
stud_19/stud_13/stud_05/stud_03/stud_22/stud_11/stud_25/stud_14/stud_02/stud_04/
stud_06/stud_26/stud_21/stud_16/stud_15/stud_18
stud_24/stud_07/stud_26/stud_10/stud_11/stud_23/stud_21/stud_15/stud_08/stud_04/stud_12/
stud_03/stud_25/stud_19/stud_06/stud_20/stud_27/stud_02/stud_16/stud_22/stud_18/
stud_14/stud_09/stud_01/stud_17/stud_13/stud_05
stud_25/stud_20/stud_14/stud_02/stud_04/stud_18/stud_22/stud_12/stud_06/stud_26/stud_11/
stud_13/stud_23/stud_10/stud_03/stud_17/stud_19/stud_24/stud_15/stud_09/stud_08/
stud_05/stud_07/stud_27/stud_16/stud_01/stud_21
stud_26/stud_16/stud_23/stud_09/stud_05/stud_21/stud_19/stud_14/stud_20/stud_02/stud_27/
stud_04/stud_01/stud_07/stud_17/stud_22/stud_11/stud_06/stud_24/stud_10/stud_12/
stud_08/stud_13/stud_18/stud_25/stud_15/stud_03
stud_27/stud_01/stud_17/stud_13/stud_20/stud_16/stud_03/stud_23/stud_05/stud_12/stud_04/
stud_22/stud_21/stud_24/stud_11/stud_15/stud_26/stud_08/stud_14/stud_09/stud_02/
stud_18/stud_25/stud_06/stud_10/stud_07/stud_19
10. TIA1.2.TID.1.2.3.2010.11
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 http://francois-bourgaux.infographie-heaj.eu/blog/
2.2
Tu as donc maintenant autant de points et
lignes qu’il y a d’étudiants présents.
Chacun de ses points peut-être utilisé comme
guide horizontal et vertical.
Ces guides et les espaces les séparant vont être
utilisés pour placer ton titre :
Y* GIRL(S**) AND X*** BOYS LOST IN
SPACE
* le nombre de filles présentes en classe le jour
de l’exercice.
** le S sans parenthèse si il y a plusieurs filles,
pas de S si il n’y en a qu’une seule.
*** le nombre de garçons présents en classe le
jour de l’exercice.
Comme typo, tu utilisera l’Helvetica Bold (si
tu as un portable et que tu n’as pas l’Helvetica
Bold, travaille sur une machine de l’école ou
installe l’Helvetica). Ton titre sera en noir et
en MAJUSCULE.
Et pour finir ton titre ne peut toucher le cadre
de ton document et devra en être éloigné
d’une distance égale à la hauteur de tes
caractères (selon son emplacement en haut et
à droite, en bas et à gauche, etc…). Si possible,
cela dépendra des compositions, tu évites que
ton titre recouvre points et ligne, si ce n’est
pas possible cherche une harmonie.
2.3
Tu places le début de ton titre sur un guide
vertical correspondant au point de ton choix.
Tu associes dans un seul calque les points et
lignes qui correspondent aux garçons.
Tu attribues à ce calque une opacité de 50%
Tu associe dans un seul calque les points
(et éventuelles lignes) qui correspondent
aux filles. Tu conserves pour ce calque une
opacité de 100%
Tu conserves pour ton titre une opacité de
100%
Tu choisis comme hauteur de caractère
une mesure égale à la distance séparant
2 guides horizontaux de ton choix
(suffisamment grand pour que ton texte reste
lisible).
Tu enregistres ton document au format .psd
(autant toujours conservé une version éditable
de tes documents).Tu enregistres une version
en jpg de ton image (donc sans calque) dont le
nom sera donc stud_XX_h_space1.jpg.
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 http://francois-bourgaux.infographie-heaj.eu/blog/
Soit tu places des guides pour tout les points,
soit tu mesures tes distances comme tu veux
mais soit précis !
11. TIA1.2.TID.1.2.3.2010.11
Si selon la position verticale que tu as choisie,
le texte ne tient pas sur une seule ligne,
tu choisis comme interlignage une autre
mesure égale à la hauteur de ton caractère
+ 20% de cette mesure. Par exemple, si tes
caractères ont un corps de 32 pixels, ton
interlignage est égal à 32px + 32*20%. 20%
de 32 est égale à 6,4 tu arrondis donc à 6, ton
interlignage est donc de 38px.
TEMPS 3
Travaillons les compositions verticales
3.1
Tu ouvres ton document stud_XX_01v.psd.
Pas celui qui est sur net-wb mais celui qui est
sur ton espace de travail.
Tu enregistres ce document sous le nom de
stud_XX_v_space1.psd
Sur le même principe que ta composition
précédente et selon le même principe de
liaison, tu rejoint maintenant ton point 1 au
point 2.
Ton point 2 tu le joint au point 1 de l’étudiant
précisé dans ta liste et ainsi de suite.
Tu procèdes de manière identique au point 2.2
pour placer ton titre et tu fait comme au point
2.3 pour finaliser ton document.
Tu conserves une version au format .psd et tu
enregistre une version sous le nom :
stud_XX_v_space1.jpg
12. TIA1.2.TID.1.2.3.2010.11
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 3.2
Créons un rapport d’échelle
Ouvre ton document stud_XX_v_space1.psd
Ne conserve que les point 1 de l’ensemble des
étudiants (supprime point 2 et ligne, si tu as
conservé comme je te l’ai conseillé une version
éditable de ton document, c’est relativement
rapide).
Enregistre ton document sous le nom:
stud_XX_v_space2.psd
Attribue à chacun de tes points une couleur
différente.
Modifie l’arrière plan de ta composition en
noir.
Tu vas modifier ton document pour que ton
point 1 soit le plus grand et que le point 1
du dernier étudiant de ta liste reste à
5 pixels de diamètre.
http://francois-bourgaux.infographie-heaj.eu/blog/
Ton rapport d’échelle sera un agrandissement
du diamètre de tes cercle de 5 pixels en 5
pixels. C’est à dire que le point du dernier
étudiant de ta liste reste à 5 pixels de
diamètre, le point de l’avant-dernier étudiant
de ta liste sera de 10 pixels, celui de l’avant
avant dernier sera de 15 pixels, etc…
Et chacun de tes cercles sera évidemment de
la couleur que tu leur aura attribué.
Tu en profite pour modifier également
l’opacité de chacun de tes cercles selon le
principe suivant :
Si il y a entre 20 et 0 étudiants présents :
ton point 1 aura une opacité de 5% que tu
augmentera de 5% pour chacun des points
suivant dans ta liste.
Si il y a entre 25 et 0 étudiants présents :
ton point 1 aura une opacité de 4% que tu
augmentera de 4% pour chacun des points
suivant dans ta liste.
Tu modifie la couleur de ton titre en blanc et
tu le positionne cette fois si en tenant compte
des diamètres de tes cercles. L’opacité de ton
titre reste à 100% et son calque est placé au
dessus de tous les autres.
Tu enregistres une version en jpg de ton
image (donc sans calque) dont le nom sera
donc stud_XX_v_space2.jpg.
TEMPS 4
Have Fun with HTML5
4.1
C’et bien joli de faire des jpg mais pourquoi
pas faire directement une version online.
Totalement nul en html, css, javascript n’en
parlons pas, j’ai néanmoins mon ami google et
les options copier/coller qui me permettent de
bricoler quelques trucs.
13. TIA1.2.TID.1.2.3.2010.11
Je vous ai donc préparé un fichier html dans
lequel il vous suffira de modifier des valeurs
pour composer une jolie image en ligne.
Il doit être évident que vous rester
évidemment libre de modifier ce fichier
soit pour le rendre plus conforme, soit pour
l’améliorer car vos connaissances dans
ce domaine sont vraisemblablement plus
étendue que les miennes. Sur mon vieux
Mac, cela fonctionne sous Safari, Firefox et
GoogleChrome.
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 http://francois-bourgaux.infographie-heaj.eu/blog/
Tu récupères sur le blog le fichier:
myspace.html
Tu visualises éventuellement l’exemple :
http://francois-bourgaux.infographie-heaj.eu/
myspacesample.html (lien sur la blog)
Tu as une balise :
<canvas id=”Lost” width=”1024”
height=”768”> </canvas>
qui détermine un espace de 1024x768 pixels
dans ta page html
Tu affiches le code de la page dans l’éditeur
de ton choix et tu découvres ce pourquoi je
suis un chipoteur. Il aurait été plus élégant
de marquer la différence entre fille et garçon
par l’introduction d’une variable dans les
fonctions, si j’avais du la faire, l’exercice
n’aurait jamais été préparé à temps. J’ai donc
simplement doubler les fonctions pour pouvoir
varier les couleurs.
Tu as des fonction pour dessiner
Les dégradés :
function addColorStops(gradient) {
gradient.addColorStop(0.25, ‘rgba(151, 165, 193, 0.25)’);
gradient.addColorStop(1, ‘rgba(151, 165, 193, 1)’);
}
4.2
Tu as un div « myspace » pour centrer
horizontalement le canvas.
#myspace {
margin: 0 auto;
height: 768px;
width: 1024px;
border: 1px solid #FFF;
}
14. TIA1.2.TID.1.2.3.2010.11
Les lignes :
function drawLine(x1, y1, x2, y2) {
var g = ctx.createLinearGradient
(x1, y1, x2, y2);
addColorStops(g);
ctx.beginPath()
ctx.strokeStyle = g;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
Ce div a un border, tu le conservera jusqu’à
la fin de ton paramétrage, tu réalisera une
capture d’écran que tu pourra alors facilement
réduire à sa dimension de 1024x768px avant
de supprimer ce border et mettre en ligne ton
fichier html comme pour mon exemple.
Les cercles :
function drawmydots(x1, y1) {
ctx.beginPath();
ctx.fillStyle=’white’;
ctx.moveTo(x1,y1);
ctx.arc(x1,y1,3,0,Math.PI*2,true);
ctx.fill();
}
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 http://francois-bourgaux.infographie-heaj.eu/blog/
Et pour le texte, c’est simplement une suite de
balises :
ctx.fillStyle=’white’;
ctx.font=’Bold 30px Sans-Serif’;
ctx.fillText(“Y GIRL”, 600, 367);
ctx.fillText(“AND XX BOYS”, 600, 409);
ctx.fillText(“LOST IN SPACE”, 600, 451);
On fait dessiner les cercles après les lignes
pour qu’ils apparaissent au-dessus des lignes
et on termine par le texte pour la même
raison, pour qu’il soit à l’avant plan.
4.3
La couleur de tes dégradés :
Choisi une couleur pour les garçons et une
couleur pour les filles, il est évident que le
bleu et le rose sont interdit.
Selon la couleur que tu choisis pour les
garçons tu modifies les paramétres de
function addColorStops(gradient) avec
les valeurs RGB de ta couleur. Les 0,25 et
1 précisent l’opacité de cette couleur, tu ne
modifies pas ces valeurs.
function addColorStops(gradient) {
gradient.addColorStop(0.25, ‘rgba(151, 165, 193, 0.25)’);
gradient.addColorStop(1, ‘rgba(151, 165, 193, 1)’);
}
15. TIA1.2.TID.1.2.3.2010.11
4.4
La couleur de tes points filles et garçons
Pour les garçons :
function drawmydots(x1, y1)
Tu modifies :
ctx.fillStyle=’white’;
tu remplaces ‘white’ par la valeur hexadécimal
de la couleur que tu as choisie, par exemple
‘#66CC99’
Pour les filles :
function drawmydotsgirls(x1, y1)
idem
4.5
Tes lignes garçons et tes lignes filles
J’ai scindé les lignes des liaisons pour vous
faciliter la tâche car vu que tes lignes sont
des dégradés, tu vas devoir organiser la
liaison entre tes points pour que tes dégradés
s’enchaînent harmonieusement. Cela m’a
semblé plus facile à réaliser si tu commences
par les lignes qui doivent rejoindre les 2 points
de chaque étudiants.
Les 2 premières coordonnées que tu introduits
correspondent au coté le plus sombre de
ta ligne et les 2 dernières coordonnées
correspondent au coté le plus claire de ta
ligne.
4.5.1
pour les filles tu modifies les valeurs de
function addColorStopsgirl(gradient)
Mes lignes pour les garçons et les filles
drawLine(x1, y1, x2, y2);
drawLinegirl(x1, y1, x2, y2);
Tu remplaces (x1,y1,x2,y2) par les
coordonnées des Points 1 et Points 2 des
étudiants de ta listes.
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 http://francois-bourgaux.infographie-heaj.eu/blog/
4.5.2
Mes liaisons pour les garçons et les filles
drawLine(x1, y1, x2, y2);
drawLinegirl(x1, y1, x2, y2);
idem qu’en 4.3.1 mais tu inverses les x1 et
x2, y1 et y2 pour que les dégradés suivent un
rythme régulier. Si à un point arrive une ligne
claire, de ce point devra partir une ligne claire
et ainsi de suite jusqu’à la fin des temps.
4.6
Tes points filles et garçons
Pour les garçon :
drawmydots(x1, y1);
tu copies cette ligne autant de fois qu’il y a de
points garçons en modifiant les valeurs x1, y1
par les coordonnées de tes points.
Pour les filles :
drawmydotsgirls(x1, y1);
idem
4.7
16. TIA1.2.TID.1.2.3.2010.11
Si ton titre dépasse du cadre, tu dupliques
la ligne ctx.fillText(“TON TITRE”, x1,
y1); en augmentant le y1 de la valeur de ton
interlignage.
Par exemple :
ctx.fillText(“Y GIRL”, 600, 367);
ctx.fillText(“AND XX BOYS”, 600, 409);
ctx.fillText(“LOST IN SPACE”, 600, 451);
4.8
Tu visualises ton fichier html dans le browser
de ton choix.
Tu fait une capture d’écran.
Tu ouvres ta capture d’écran dans Photoshop
et tu ne conserve que l’espace 1024x768
déterminé par le cadre blanc (fonction crop).
Tu effaces ton cadre blanc.
Tu enregistre ton fichier sous le nom:
stud_XX_myspace.jpg
Ton titre
ctx.fillStyle=’white’;
ctx.font=’Bold 30px Sans-Serif’;
ctx.fillText(“TON TITRE”, x1, y1);
Dans ton fichier .html tu supprime la balise
border du div #myspace
Tu met en ligne ton fichier html sur ton
espace web de l’école (pas le blog).
Tu remplaces le 30px par le corps de ton texte
Tu remplaces « TON TITRE » par Y GIRLS
AND X BOYS LOST IN SPACE
Tu remplaces x1 et y1 par les coordonnées
de ton titre, tu utilises le même principe
de placement que celui de tes autres
compositions.
Si tu n’y as pas encore accès, il est plus que
temps de t’activer, je vous en parle depuis 3
semaines.
Tu notes l’url de ce fichier dans un document
txt que tu enregistres sous le nom:
stud_xx_myurl.txt que tu places sur net_wb.
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 http://francois-bourgaux.infographie-heaj.eu/blog/
TEMPS 5
A la fin du cours, tu places sur net_wb tes
réalisations du jour dans le dossier que tu as
crée précédemment.
Ce dossier doit contenir les 7 documents
suivants :
stud_XX_01h.psd
stud_XX_01v.psd
stud_XX_h_space1.jpg
stud_XX_v_space1.jpg
stud_XX_v_space2.jpg
stud_XX_myspace.jpg
stud_xx_myurl.txt
Pour la prochaine fois, termine tes écrans si tu
n’as pas finis ou repose toi.
Merci.
17. TIA1.2.TID.1.2.3.2010.11
Helvetica bold corps 18/Nimrod Régular/Nimrob Bold Italic corps 8 http://francois-bourgaux.infographie-heaj.eu/blog/