Photoshop niveau 5

Voici les différentes étapes de ce TP de niveau 5 réalisé en autoformation avec Photoshop. Chaque étape correspondait à une compétence à atteindre.

1. Créer un rendu dessiné (ou peint) à partir d’une photo
   J’ai testé deux façons différentes :
   • Possibilité n°1 : À partir d’une photo d’un champ de tournesols, j’applique un filtre « artistique » de type « fresque » pour lui donner l’effet et la texture d’un tableau.

   Réglages :

   Taille du pinceau : 1

   Détail du pinceau : 2

   Texture : 2

   • Possibilité n°2 :

   1. J’ouvre mon fichier tournesol.psd.

   2. Je sélectionne Filtre > Esthétiques > Contour lumineux. Cet effet inverse le positif et le négatif de l’image (les noirs deviennent blancs et les blancs deviennent noirs).

   3. Je règle l’épaisseur (du trait pour un rendu suffisamment fin), la luminosité (assez forte pour obtenir un maximum des couleurs initiales ou très basse pour n’avoir qu’un trait de crayon ou un dessin très délavé) et le lissage (assez bas pour conserver suffisamment de détails de l’image).

   4. L’image étant inversée, il suffit de faire ctrl i pour rétablir le positif et le négatif de l’image. J’obtiens ainsi l’image ci-après.

   

2. Rendre floue une partie d’une photo

A partir d’une des photos utilisées dans le TP de niveau 2, j’ai utilisé la baguette magique et réglé la tolérance de la baguette magique afin de sélectionner le personnage uniquement (assez simple étant donné le contraste des couleurs entre le personnage et le reste de la photo). J’ai ensuite inversé la sélection et j’ai appliqué à ma sélection un filtre de type flou (courbe de Gauss) dont j’ai réglé l’intensité. J’obtiens l’image ci-contre.

3. Faire des effets de texte
   

   Voici deux exemples :
   	Ici, j’ai utilisé l’effet plume et l’effet forme géométrique avec du texte.
   	Ici, j’ai ajouté la mention de copyright le long de la courbe de la cible. Cette image est un détail du photo montage vu dans le TP niveau 3.

4. Faire des effets spéciaux
   

   Voici un exemple :
   	A partir du logo du CERCLE (le centre de ressources que j’ai créé), j’ai utilisé des effets en 3D permettant de retourner, déformer, aplanir, etc.

5. Créer un reflet dans une image
   Voici deux exemples de photos avec un reflet :

   Comment créer un reflet ?

   • Ouvrir l’image dans un nouveau fichier psd.
   • Renommer le calque correspondant à l’image de travail (calque 1).
   • Agrandir la taille du canevas en prévision du reflet qui sera créé sous l’image initiale puis recentrer l’image initiale par rapport à la taille du canevas.
   • Créer un fond noir et disposez le, dans l’ordre des calques, après celui qui contient l’image initiale.
   • Créer une copie du calque image initiale calque (copie calque 1).
   • Sélectionner le calque « copie calque 1 » et lui faire subir une transformation verticale, déplacer ensuite l’image sous l’image initiale en laissant un léger espace entre les deux (plus joli à mon avis).
   • Créer un masque de fusion associé au calque « copie calque 1 » en choisissant l’option « tout cacher ».
   • Sélectionner le masque et utiliser l’outil « dégradé » de type « premier plan vers arrière-plan » ou « premier plan vers transparent » et ajuster le « lissage » et le dégradé.
6. Créer des boutons

Voici deux boutons créés à partir du logo du CERCLE, au format gif (fond transparent), en vue de créer ensuite un bouton roll-over (étape suivante).

Voici une autre version du bouton, de couleur légèrement différente et au format jpg :


7. Faire un roll-over

Cliquez ici pour visualiser le bouton CERCLE avec effet roll-over : au survol du curseur sur le bouton, ce dernier change de couleur.

8. Faire une boîte 3D avec des facettes
   • J’ai d’abord cherché un tutoriel sur Internet. Ensuite, j’ai essayé d’appliquer la technique des lignes de fuite et de ligne d’horizon (base du dessin en perspective) dans Photoshop. J’ai également pris un cube photo réel pour observer les perspectives et tenter de les reproduire dans Photoshop.
   • À partir de la même photo du tournesol déjà utilisée aux niveaux précédents, j’ai recadré l’image pour lui donner les dimensions d’un carré (taille d’une des faces de mon cube). Je crée un nouveau fichier psd dans lequel je crée un premier calque que je nomme faceA. Dans ce calque, je copie l’image carrée du tournesol. Ensuite, je fais deux copies de ce calque, que je renomme faceB et faceC. Je positionne la face A du cube, et je lui applique les transformations nécessaires (perspective, distorsion et éventuellement rotation). La position de la première face va conditionner les perspectives des autres faces.
   • Dans le calque faceB, je sélectionne l’image de la seconde face visible du cube et je lui applique également les transformations nécessaires en fonction de la position de mon regard, qui crée une ligne d’horizon et les deux lignes de fuite. Je fais de même avec la troisième face visible.
   • Enfin, j’applique les effets de mon choix aux sélections représentées par chacune des faces du cube.

   Voici le résultat :

   Au final, mon cube n’est pas parfait et ça se voit. Je ne sais pas si un outil dans Photoshop permet de tracer toutes les lignes imaginaires (de fuite, d’horizon) permettant de faire de bonnes perspectives, mais je pense qu’il serait utile de faire ces tracés dans un logiciel comme Canvas (utilisé en architecture).

Photoshop niveau 4

Voici les différentes étapes de ce TP de niveau 4 réalisé en autoformation avec Photoshop. Chaque étape correspondait à une compétence à atteindre.

1. Utiliser les masques de calque
   • J’ai utilisé le masque de calque pour créer un reflet dans une image,
   • et pour créer un fondu entre deux photos.

   


   Créer un masque de calque (cliquez sur l’image pour la visualiser à sa taille réelle) :

2. Créer un dégradé dans le masque
   

   Voici deux exemples :
   	Au départ, j’avais eu l’idée d’utiliser deux photos, l’une de ruines et l’autre de fonds marins poissonneux. J’ai donc cherché dans ma photothèque et sur les sites de photos libres de droits des photos qui pourraient permettre de faire un aquarium avec un paysage de ruines sous la mer. Par manque de temps, mon choix de photos n’a pas été optimal, mais j’ai pu tester la technique du dégradé entre deux calques, en insérant un masque de fusion au niveau du premier calque (celui qui se trouve au dessus). Ensuite, j’ai utilisé l’outil « dégradé ». 1er calque : les ruines 2nd calque : l’aquarium.
   	Avec la photo de la bufflonne, j’ai procédé de la même manière. Un masque permet de créer un dégradé dans le reflet (image retournée verticalement et coupée) pour que l’effet reflet soit plus naturel et plus esthétique. On utilise pour cela l’outil « dégradé».

3. Utiliser les effets spéciaux
   J’ai utilisé des effets spéciaux Photoshop à plusieurs reprises. En voici un exemple :

   A partir du dessin créé pour le niveau 2, j’ai ajouté un effet “chrome” au dessin. Par ailleurs, l’effet de texte appliqué au signe copyright est l’effet “lueur externe”.

Photoshop niveau 3

Voici les différentes étapes de ce TP de niveau 3 réalisé en autoformation avec Photoshop. Chaque étape correspondait à une compétence à atteindre.

1. Se servir des outils de sélection
   • Le masque rapide
   • Le rectangle de sélection
   • L’ellipse de sélection
   • Le lasso (standard, polygonal et magnétique)
   • La baguette magique

   


   Voici quelques exemples d’utilisation d’outils de sélection :
   	J’ai utilisé l’outil rectangle de sélection pour opérer un redécoupage/recadrage de mon tournesol au niveau 1.
   	J’ai utilisé l’ellipse pour sélectionner un échantillon d’une photo (visage de jeune mariée) et que l’on retrouve dans une production montrée au niveau 2
   	J’ai utilisé le lasso magnétique pour sélectionner la partie de ma photo Vincent.psd qui compose le ciel, délimité par la roche en second plan (voir l’exemple).

   On peut lire une page qui résume bien ce qu’il faut connaître sur les outils de sélection : http://akvis.com/fr/graphic-tips/selection-tools/select-photoshop.php

2. Faire un détourage
   
   Ici, j’ai utilisé la technique du détourage en mode masque.
   J’avais essayé d’abord avec la baguette magique (mais j’avais beaucoup trop de variantes de couleurs dans ma photo) et avec le lasso magnétique (mais sans palette graphique, je fatigue vite de faire et refaire). J’ai finalement trouvé un petit tutoriel qui m’a permis de découvrir le détourage en passant par le mode masque.
3. Manipuler les calques, faire un photo montage et manipuler les sélections
   J’ai choisi de regrouper ces trois compétences en une photo composition, que je me suis amusée à réaliser tout en apprenant.
   J’ai pris mon image détourée, j’ai recherché un personnage de BD qui avait un peu la même position que moi, puis j’ai transformé la sélection pour avoir le personnage de « cartoon » orienté dans ma direction (en retournant la sélection selon un axe horizontal).
   J’ai ajouté quelques effets au calque de mon image : l’effet « cible » notamment, et j’ai choisi un mode de fusion autre que « normal ». Enfin, j’ai ajouté un calque texte le long du cercle extérieur de la ‘cible’ pour insérer le copyright. Il a fallu manipuler le texte pour lui donner la bonne courbure.
   Voici le résultat :

Photoshop niveau 2

Voici les différentes étapes de ce TP de niveau 2 réalisé en autoformation avec Photoshop. Chaque étape correspondait à une compétence à atteindre.

1. Dessiner à la main
   Dessiner à la main sans palette graphique, ce n’est pas simple ! J’ai donc choisi pour cette étape d’utiliser un personnage de “cartoon” comme base de départ, plutôt que de partir de zéro.

   J’ai opéré un détourage du contour du personnage à l’aide du lasso magnétique, puis j’ai dessiné au crayon le contour de la silhouette par dessus la sélection faite au lasso. Ensuite, j’ai utilisé l’outil remplissage et la couleur noir à la sélection (l’intérieur de la silhouette) et je lui ai appliqué un filtre pour lui donner un effet pour atténuer le manque de précision de mon dessin.

   Voici le résultat :

2. Utiliser les formes géométriques
   Voici un exemple de forme géométrique que l’on peut utiliser dans Photoshop : la bulle de bande dessinée.
   J’ai utilisé l’outil forme géométrique de type « spécial » et j’ai choisi le type « bulle de BD ». J’ai ensuite ajouté un calque de type texte pour écrire dans la bulle.
   
3. Se servir de l’outil de remplissage

   J’ai choisi l’une de mes photos avec un personnage au premier plan, des pierres et un ciel pâle au second plan (Vincent.jpg). La gamme des couleurs du fond n’étant pas très riche, il n’a pas été très difficile de sélectionner le contour des pierres avec la baguette magique (le lasso magnétique aurait pu faire l’affaire). Une fois la sélection opérée, j’ai sélectionné l’option du menu Sélection pour obtenir l’inverse de la sélection, la sélection se faisant sur le ciel. Ensuite, l’outil « Remplissage » et une couleur de ciel bleu m’ont permis de rendre ma photo plus contrastée au niveau du ciel uniquement sans avoir modifié le reste de ma photo !

   Voici le résultat :

4. Reproduire et cloner
   Cliquez sur une photo pour la visualiser en grand dans une nouvelle fenêtre.

   Dans cette série de 4 photos, je me suis amusée avec l’outil clonage.
   La photo du minaret a un ciel que je trouve superbe. J’ai donc voulu faire disparaître le minaret pour ensuite pouvoir reproduire ce ciel sur ma photo source Vincent.jpg (celle dont le ciel était pâle).
   J’ai fait disparaître le minaret à l’aide de l’outil clonage et j’ai créé un nouveau calque dans mon fichier PSD contenant la photo source (Vincent.psd). Ce fichier contenait donc au moins deux calques : la photo principale et le morceau de ciel bleu « truqué » par clonage (la 2ème photo en partant de la gauche). Une fois de plus, j’ai appliqué la technique du clonage d’un calque à l’autre (en “coloriant” la zone de ciel).

   Dans le photo montage du tournesol (photo n°4 ci-dessus), j’ai utilisé le clonage afin de reproduire certains détails de la photo hors du cadre initial de la photo. À l’intérieur de la corolle, j’ai ajouté la photo d’une jeune mariée après avoir découpé la partie d’une autre  de mes photos. J’ai joué sur l’opacité des calques, le mode de fusion des calques pour éviter que la fleur et la photo de la mariée ne soient trop en contraste. Au contraire, le visage est fusionné dans la corolle du tournesol.
   J’ai laissé libre court à mon imagination pour tester quelques outils de Photoshop, qui est d’une telle richesse qu’on y passe facilement des jours entiers à découvrir et se perfectionner sur quelques outils…

Photoshop niveau 1

Voici les différentes étapes de ce TP de premier niveau réalisé en autoformation avec Photoshop. Chaque étape correspondait à une compétence à atteindre.

1. Ouvrir une image à partir d’une copie d’écran
   
   Je fais une capture d’écran, puis je sauvegarde l’image au format jpg. J’ouvre cette image dans Photoshop et je l’enregistre au format projet .psd afin de pouvoir la retravailler.
2. Recadrer une image

   Voici la photo source à partir de laquelle j’ai créé plusieurs nouvelles images dans ce TP.

   A partir de la photo source, j’ai utilisé l’outil “rectangle de sélection” pour recadrer mon image à ma convenance, l’outil “recadrage” pour ne conserver que mon nouveau cadre. Puis, j’ai fait pivoter le canevas de l’image du projet (de paysage en portrait) et j’ai recentré mon tournesol (le carré) à l’intérieur du canevas pour lui donner les dimensions d’un polaroïd. Enfin, j’ai créé une nouvelle couche que j’ai nommée “fond” et je lui ai attribué la couleur noir à l’aide de l’option “remplissage”.

3. Donner la bonne résolution et définition
   • Ma photo source (tournesol.psd) avait les caractéristiques suivantes :

   définition : 2048 pixels par 1536 pixels

   résolution : 72 pixels/pouce

   taille : 72,25cm x 54,19cm.

   • J’ai fait un nouvel échantillonnage de ma photo, pour la mettre à un format proche du A4

   nouvelle définition : 842×631

   résolution : 72 pixels/pouce (inchangée)

   taille : 29,7 cm x 22,26 cm.

   • J’ai bien compris les notions de définition et de résolution grâce à un article clair et concis (http://www.pixelvalley.com/appareil-numerique/definition-resolution.php)

   Ensuite, j’ai écouté plusieurs fois cet excellent et captivant tutoriel vidéo de Dominique Legrand sur le site wisibility.com (http://www.wisibility.com/blog/?2006/09/11/38-la-vie-numerique-definition-resolution-du-pixel).

   Ce que l’on doit retenir :

   • Avoir en tête, le format final souhaité de l’image
   • Mauvaise résolution = pixels trop gros / haute résolution = pixels petits
   • Lorsque l’on augmente la définition, la taille de l’image augmente.
   • Si l’on ne sélectionne pas “ré échantillonnage”, changer la résolution de l’image ne modifie pas la définition de celle-ci. Sa qualité n’est pas altérée.
4. Agrandir et réduire une image
   

   Agrandir une image signifie modifier sa taille et sa définition.

   Réduire une image : La définition d’origine de ma photo est de 2048 x 1536 pixels.

   Je conserve ma résolution (pour le Web) à 72 pixels/pouce et j’ajuste la taille de l’image en sélectionnant l’option « rééchantillonage » et l’option permettant de conserver les proportions. La conséquence est la suivante : mon image a moins de pixels (définition plus basse), une taille réelle inférieure, mais ses proportions sont conservées. Il n’y aura pas d’effet de pixellisation tant que je ne zoome pas trop.

   Remarque : ce qui compte est en effet la taille finale souhaitée pour une image. Ici, j’ai redéfini mon image à 512×384 pixels, soit une réduction de 75%. Sa taille réelle est maintenant de 18,06 cm x 13,55cm.

5. Ajuster les niveaux de couleurs
   
   J’ai créé un fichier psd dans lequel j’ai créé deux calques pour accueillir l’image source (tournesol.jpg) en haut et en bas. Dans l’image du bas, j’ai ajusté ici le niveau de couleur de la photo au niveau des bleus : réglé la balance des bleus au maximum tout en conservant la luminosité. Ce qui fait un fond très bleu et la fleur reste bien jaune.
6. Ajuster les contrastes
   J’ai créé un fichier psd dans lequel j’ai créé deux calques pour accueillir l’image source (tournesol.jpg) en haut et en bas. Dans l’image du bas, j’ai légèrement ajusté le contraste et la luminosité.
   
   À partir du même fichier psd, j’ai choisi ici le contraste maximum pour ne conserver que le jaune et le noir.
   
7. Sauvegarder pour le web
   L’option « sauvegarder pour le Web » de Photoshop propose 4 options par défaut : le format original, et 3 qualités : haute (60% de l’image d’origine), moyenne (30%) et basse (15%). On peut ajuster la résolution, et jouer sur le flou, et quelques autres options. Les formats d’export sont : gif, jpg, png et wbmp.
8. Nommer correctement les fichiers
   Lorsqu’on a un grand nombre de fichiers images à gérer (photothèque, site web, etc.), il faut utiliser une règle de nommage simple pour organiser les images et pouvoir facilement les retrouver, si on veut les retravailler, en remplacer une qui n’est plus d’actualité, etc. Le nommage peut refléter l’arborescence du site, utiliser des mots-clés ou un ordre d’apparition, etc.

Autoformation sur Photoshop

Le module intitulé “Outils et panorama du Web” (cours Construction d’un site web) a été l’occasion de me former davantage sur le logiciel Photoshop. C’est un logiciel de traitement et de création d’images très puissant et complexe ; ce logiciel propriétaire fait partie de la suite logicielle de l’éditeur Adobe.

Dans ce cours, nous étions amenés à travailler en autoformation sur le logiciel libre GIMP, moins riche que Photoshop mais dont les fonctionnalités sont comparables à celles de Photoshop et suffisent pour quelqu’un dont le coeur de métier n’est pas l’image et la photo. S’il s’agissait d’autoformation, il était toujours possible de demander de l’aide à l’enseignant et aux autres étudiants, via le forum du cours. Comme j’ai travaillé cette année sur un ordinateur portable (Mac) et que je n’avais pas tous les éléments avec moi pour installer GIMP, j’ai choisi de travailler sur Photoshop. Mais j’ai à présent tout ce qu’il faut pour travailler également avec GIMP que j’ai installé, et je vais donc pouvoir l’utiliser. Un des intérêts des logiciels à code ouvert est bien évidemment que l’on peut facilement les implémenter au sein d’institutions publiques (à l’université notamment) sans entamer le budget, notamment dans le cadre de la conception de projets en e-learning ou de création web. Il faut d’ailleurs encourager l’utilisation de ces logiciels à code ouvert et les faire connaître davantage aux étudiants et aux enseignants, car ils permettent l’accès à l’information et aux savoirs pour tous.

Les travaux pratiques de ce module se divisaient en cinq niveaux de compétence, comme on peut le voir sur la carte conceptuelle ci-dessous (extraite des consignes du TP) :

5 niveaux

J’ai suivi cette carte et choisi de nommer mes productions graphiques d’après le niveau et la ramification concernée. Ainsi, une image intitulée niv5_B est sensée démontrer la compétence de niveau 5 intitulée “Rendre floue une partie d’une photo”.

Niveau 1

Niveau 2

Niveau 3

Niveau 4

Niveau 5

De MS Access à MySql

Pour la réalisation de mon projet de site web dynamique, j’ai choisi de faire un site pour le CERCLE. Ce site devrait permettre d’une part de consulter le catalogue des ressources disponibles au et par le centre, d’autre part, il devrait proposer le programme des ateliers et autres événements proposés par l’équipe du CERCLE au cours de l’année.

Pour plus d’information, lire ma note d’intention.

J’ai élaboré cette année pour le cours de BD Access une base de données des ressources du centre, en collaboration avec Dina El Kassas. C’était un travail d’équipe.

Il faut donc exporter reprendre notre modèle de BD relationnel et l’améliorer pour qu’il soit parfaitement fonctionnel. On a la possibilité d’exporter les tables et requêtes d’Access et de les importer sur une nouvelle base de données Mysql.

De quoi a-t-on besoin ?

Il faut d’abord installer un environnement de développement (en local) comprenant un serveur web (Apache) et un serveur de base de données (Mysql), un interpréteur de script PHP et une interface d’administration SQL (PHPMyadmin). Nous avons donc installer EasyPhp, qui réunit tous ces éléments.

A cette étape du projet, nous nous concentrons sur la structure de la base de données. Pour le site du centre, notre base de données a besoin d’un ensemble de données concernant les ressources, mais aussi des données concernant les événements (ateliers, concours, jeux, etc.). Nous aurons également besoin de données concernant les utilisateurs, si nous décidons de créer une interface de consultation (avec profil associé) et une interface d’administration (gestion des rôles).

Mais revenons à la partie concernant les ressources.

Voici quelques sites qui devraient nous aider à progresser avec Mysql…

http://cerig.efpg.inpg.fr/tutoriel/bases-de-donnees/sommaire.htm

Scribd, un cousin de YouTube ?

En travaillant sur le dossier “E-learning en 2030 ou e-learning 4.0″ dans le cadre du module “Voix et vidéo sur IP” proposé et encadré par Mr Olivier Cotinat, j’ai découvert le service Scribd. Quelle trouvaille ! C’est en effectuant des recherches sur Internet pour me donner des idées et alimenter ma réflexion sur le sujet que je l’ai découvert.

Scribd, l’équivalent de YouTube mais pour la publication et le partage de documents textuels. Je me suis dit immédiatement que je devais explorer cette piste en vue de permettre la consultation de mes travaux, dossiers et productions de cette année. En effet, si ce service fonctionnait comme YouTube, j’allais donc pouvoir insérer le code imbriqué (en anglais embedded code) de mon document  directement sur mon blog !

Je n’ai pas eu le temps de tester ce service tout de suite étant donné tous les projets que j’avais en cours, à remettre sur les plateformes WebCT et Moodle. J’ai donc remis cette expérimentation à la mi-juillet.

Le service Scribd repose sur IPaper, un widget en Flash permettant de visualiser des documents textes (.doc, .ppt, .pdf, etc.) et images avant de les imprimer et de les partager à partir de sites Web. Impressionnant, non ?

Vous pouvez ainsi lire ce billet posté sur mon ancien portfolio MySpace et constater ce que donne l’insertion du code associé à la mise en ligne d’un document sur Scribd : mon billet sur MySpace.

Lorsque j’ai décidé d’héberger mon ePortfolio sur WordPress, j’ai immédiatement cherché comment utiliser IPaper de Scribd. Mais le problème est que pour le moment, WordPress ne permet pas d’insérer IPaper, à moins de développer son propre site WordPress. Dans ce cas, un plug-in a été développé pour combler ce manque. Mais jusqu’à présent, je n’ai pas encore eu le temps de m’y mettre !

J’ai donc poursuivi mes recherches pour trouver une solution de remplacement et j’ai découvert Vodpod, un autre widget disponible pour les blogs WordPress hébergés par WordPress. Je l’utilise comme solution de remplacement en attendant.

Pour lire mon billet sur Vodpod, cliquez ici.

Partager ses signets avec del.icio.us

En créant mon premier blog sur WordPress et en consultant différents blogs sur Internet, j’ai remarqué à plusieurs reprises le service “del.icio.us”. Il m’a fallu quelques temps avant d’en prendre conscience. Mais aujourd’hui, ma curiosité devenant trop grande, je me suis décidée à taper ce mot dans Google et de visiter le site http://delicious.com. Je savais que c’était un service du Web 2.0 (web participatif et collaboratif), mais encore ?

J’ai donc découvert que ce service permettait de partager des signets avec d’autres utilisateurs de ce service, par le biais des tags (mots-clés) et de mettre un lien vers sa page de signets depuis n’importe quel outil de blog, WordPress notamment. Super ! J’étais contente de cette découverte. J’allais enfin pouvoir ajouter les signets des sites consultés et sélectionnés pendant mes recherches, afin de pouvoir les retrouver à tout moment lorsque je ne suis pas devant mon ordinateur. Je me suis même demandé si je n’allais pas utiliser que cette technique plutôt que de sauvegarder mes signets sur mon ordinateur. J’y réfléchis encore…En attendant, j’ai rassemblé essentiellement les sites que je voulais utiliser avec les étudiants ou simplement partager avec eux.

J’ai également découvert une fonctionnalité intéressante dans WordPress, celle qui permet de définir quels tags associés à des signets seront visibles.

Je n’ai pas encore exploité toutes les possibilités offertes par del.icio.us. C’est pour bientôt !

Enfin, mes signets sur del.icio.us sont accessibles depuis la barre latérale gauche de ce ePortfolio.