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/