Exercice 1 : Webtoon VS turbomédia

Un petit post de soutien à ceux qui étaient absents !

Le but de ce premier exercice est d’utiliser les images que vous avez préparé et qui proviennent d’un récit déjà créé en atelier.

Vos cases sont à isoler de vos planches dans Photoshop. Le projet est de les répartir au sein d’un des deux canevas proposé, au choix.

Pour rappel le modèle était à choisir au 2e cours : soit un turbomédia (un diaporama d’images, voir cet exemple assez démonstratif) ou de faire le choix d’un webtoon (des planches les une sous les autres, exemple classique type mangaun autre là plus indé et encore un ici de Boulet très réussi).

Le modèles (ensemble de quelques fichiers à éditer) sont disponibles dans la section ressources. Notez que la page html (appelée index.html par convention) est la seule que vous devez véritablement modifier !

De plus il y a 2 programmes gratuits à aller impérativement récupérer pour travailler, Brackets et Filezilla (voir plus bas).

Pour vous mettre au boulot dans cette première partie, dans l’ordre il s’agit de :

  1. Scanner les pages choisies.
  2. Séparer ses cases dans Photoshop et éventuellement faire un petit découpage préparatoire de ce qu’on veut faire.
  3. Sauver tout ça pour le web en JPG, GIF ou PNG via Photoshop et son outil spécifique  (exporter > sauver pour le web). Pour ceux qui n’étaient pas là et qui ne comprennent rien à ces formats, internet est votre ami.
  4. Préparer les images définitives dans Photoshop.
    1. En webtoon, on peut partir sur un fichier de 1500px de large par 3000px de haut. Mais vous pouvez directement aussi faire un fichier de 10 000 px voir 20 000 px pour placer vos cases. Le but au final sera de découper ce fichier en morceaux afin qu’ils se chargent un à un et que le début du récit soit immédiatement lisible
    2. En turbomédia, le format doit rentrer dans votre écran, testez par exemple 600px de haut par 1200px de large. Créez autant d’images qu’il y a d’étapes dans votre narration : si une bulle apparait dans un 2e temps sur une case, vous ne pouvez pas exporter que la bulle. Vous aurez une image sans bulle, puis la même image avec la bulle, etc.
  5. Récupérer ensuite le module choisi sur le site du cours : http://mbd.gr3.be/ressources/ZIP/
  6. Editer le dossier et plus spécialement la page web html (index.html) avec Brackets. >> http://brackets.io/
  7. Vous testez sur votre ordi jusqu’à ce que ça soit ok. Pour rappel une page web peut être lue dans votre navigateur même si elle est rangée sur votre bureau, elle ne doit pas être sur le web…
  8. Quand vous êtes satisfaits, la dernière étape (qui prend environ 15 secondes :)) est d’envoyer tout en FTP sur le serveur du cours avec FileZilla >> https://filezilla-project.org/ (version client). Les identifiants sont donné en cours pour des raisons de sécurité.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *