|
 |
Photoshop: les bases
|
|
|
 |
L'environnement de travail
|
|
|
 |
raccourcis clavier / créer et enregistrer le nouveau set
|
|
|
 |
palettes et enregistrement de son espace de travail
|
|
|
 |
rappel du fonctionnement des palettes
|
|
|
 |
dock
|
|
|
 |
groupe de menus ou en individuel
|
|
|
 |
choisir menu web et ajouter (M fenêtre)
|
|
|
 |
historique
|
|
|
 |
compositions de calques
|
|
|
 |
formes
|
|
|
 |
réglages
|
|
|
 |
enregistrer l'espace de travail
|
|
|
 |
sauvegarder
|
|
|
 |
place Mac = /Users/aglekis3/Library/Preferences/Adobe Photoshop CS4 Settings
|
|
|
 |
nouveau fichier
|
|
|
 |
La gestion des Calques
|
|
|
 |
comprendre les calques
|
|
|
|
|
fichier : dossier C_...>tea_layers_01.psd
|
|
|
 |
l'importance des calques
|
|
|
 |
principe d'empilement
|
|
|
 |
transparence et identification
|
|
|
 |
pourquoi mettre sur plusieurs calques
|
|
|
 |
pour organiser la composition de façon plus souple
|
|
|
 |
pour appliquer des effets différents
|
|
|
 |
mode de sélection
|
|
|
 |
créer des calques
|
|
|
|
|
fichier : dossier C_...>tea_layers_02.psd
|
|
|
 |
ordre des calques
|
|
|
|
|
fichier : dossier C_...>tea_layers_02.psd
|
|
|
 |
calques multiples
|
|
|
|
|
fichier : dossier C_...>buttons.psd
|
|
|
 |
opération courantes
|
|
|
 |
Les calques de forme
|
|
|
 |
Présentation
|
|
|
 |
Les calques de formes sont les formes vectorielles crées dans photoshop
|
|
|
 |
Ces formes peuvent être crées à la plume, avec les formes prédéfinis ou les formes personnalisées
|
|
|
 |
Il est possible de mixer toutes les différents type de formes sur un même calque en utilisant les fonctionnalités Pathfinder
|
|
|
 |
Ces formes sont associées à une couleur qui peut être modifiée
|
|
|
 |
Style de calques peuvent y être associés
|
|
|
 |
Manipulation basique des formes
|
|
|
 |
installer les grandes parties avec des calques de formes
|
|
|
 |
manipulation des calques de forme
|
|
|
 |
les calques de formes se manipulent facilement avec : control/command + T . C'est valable pour 1 ou plusieurs éléments
|
|
|
 |
avec la flèche noire les différentes formes sur un même calque sont déplaçables
|
|
|
 |
en lançant ctrl/command + clic la flèche noire devient blanche et les modifications sur la forme sont plus nombreuses
|
|
|
 |
avec l'outil déplacement, si plusieurs formes sont présentes sur le même calque, elle sont déplacées toutes ensemble
|
|
|
 |
Les outils de mesure
|
|
|
 |
le magnétisme
|
|
|
 |
les repères commentés
|
|
|
 |
la grille
|
|
|
 |
La couleur
|
|
|
 |
couleur sRGB
|
|
|
 |
les couleurs sRGB se rapproche plus des couleurs d'un PC standard
|
|
|
 |
ainsi, il y a moins de risque de décallage d'un environnement à l'autre (Mac/PC)
|
|
|
 |
Gestion des couleurs dans Photoshop
|
|
|
 |
Management de la couleur pour la creative suite
|
|
|
 |
à partir de bridge :
|
|
|
 |
Désynchronisation de la Créative Suite
|
|
|
 |
Le texte
|
|
|
 |
le type vecteur et le type pixel
|
|
|
|
|
fichier : Dossier E_...> flavor_of_the_month.psd
|
|
|
 |
Caractères
|
|
|
|
|
fichier : Dossier E_...> flavor_of_the_month-02.psd
|
|
|
 |
création du texte
|
|
|
 |
activer l'outil texte
|
|
|
 |
choisissez la police "Arial"
|
|
|
 |
entrer le titre "Tea Collection"
|
|
|
 |
en déplaçant la souris loin du texte, c'est l'outil déplacement qui s'active automatiquement
|
|
|
 |
Pour des alignements plus précis, choisir l'outil déplacement avec les repères commentés affichés
|
|
|
 |
ajustement du texte
|
|
|
 |
Paragraphe
|
|
|
|
|
fichier : Dossier E_...> javaco_about.psd
|
|
|
 |
principe du bloc paragraphe
|
|
|
 |
réglage du paragraphe
|
|
|
 |
en sélectionnant le texte
|
|
|
 |
en lançant ctrl/commande + H
|
|
|
 |
et en essayant divers réglages entre la palette "Caractère" et la palette "Paragraphe"
|
|
|
 |
valider après les changements avec la barre d'outils du haut comme nous l'avons vu
|
|
|
 |
Enregistrer des styles de texte
|
|
|
 |
Les styles
|
|
|
 |
Présentation
|
|
|
 |
les styles sont très utilisés dans le Webdesign
|
|
|
 |
ils permettent de nombreuses expérimentations et automatisations
|
|
|
 |
certains styles par défaut existent pour le web: Fenêtre "Styles" > "Styles Web"
|
|
|
 |
les styles ne sont pas définitifs, il est possible à tout moment de les modifier
|
|
|
 |
Utilisation des styles enregistrés
|
|
|
 |
Les styles en détail
|
|
|
 |
Enregistrement
|
|
|
 |
Enregistrement d'un style isolé
|
|
|
 |
Avec le "Gestionnaire de paramètres prédéfinis" pour un groupe
|
|
|
 |
Les masques
|
|
|
 |
Présentation
|
|
|
|
|
fichier : dossier F_...>waterfall.psd
|
|
|
 |
Le masque dans Photoshop est un outil d'une grande puissance qui s'applique sur plusieurs registres
|
|
|
 |
Le masque fonctionne comme le principe des ombres chinoise ou des caches qui étaient avant utilisés en développement photographique en noir et blanc
|
|
|
 |
La correction du masque ne marche qu'avec le Noir et le Blanc:
|
|
|
 |
Le noir et le blanc peuvent être appliqué avec le pinceau, une sélection
|
|
|
 |
Des effets et filtres peuvent modifier le passage du noir et du blanc
|
|
|
 |
Pour réintialiser le premier plan et l'arrière plan entrez D
|
|
|
 |
Pour passer du blanc au noir entrez X
|
|
|
 |
Le mode Masque
|
|
|
|
|
fichier : dossier F_...>waterfall.psd
|
|
|
 |
Le masque de pixels
|
|
|
|
|
fichier : dossier F_...>waterfall.psd
|
|
|
 |
Le masque vectoriel
|
|
|
|
|
fichier : dossier F_...>waterfall.psd
|
|
|
 |
Les masques pour les calques de remplissage
|
|
|
 |
Les masques des calques de formes
|
|
|
 |
Les masques avec les calques de réglage
|
|
|
|
|
fichier : dossier F_...>waterfall.psd
|
|
|
 |
Les masques des filtres dynamique
|
|
|
|
|
fichier : dossier F_...>waterfall.psd
|
|
|
 |
exo: combinaison de deux images
|
|
|
|
|
fichier : dossier F_...>coupon_02.psd bambou.psd
|
|
|
 |
Combiner deux images en se servant d'un masque avec un dégradé
|
|
|
 |
ajustement du masque
|
|
|
 |
Les motifs/Pattern
|
|
|
 |
Principes
|
|
|
 |
les motifs permettent de générer une image qui se répète indéfiniment
|
|
|
 |
exploiter le jeu de lumières et de transparences que permet l'écran par rapport au print
|
|
|
 |
grande base de donnée sur le net pour les textures gratuites (voir les liens du cours)
|
|
|
 |
motifs et fonds (pattern et background)
|
|
|
 |
les css permettent d'exploiter beaucoup de possibilités dans le design avec une accessibilité maximum
|
|
|
 |
dans les css les images seront fixes, se répéteronts sur x ou sur y
|
|
|
 |
attention : l'image de fond ne pourra avoir de commentaire pour la décrire. En résumé, les images en fond ne doivent s'appliquer qu'à des parties du site dont la compréhension du contenu n'est pas importante
|
|
|
 |
création d'un motif avec un calque de remplissage
|
|
|
 |
préparation du motifs pour l'intégration html
|
|
|
 |
Liens
|
|
|
 |
chercher "Brush" ou "Pattern"
|
|
|
 |
Les paramètres prédéfinis
|
|
|
 |
Présentation
|
|
|
 |
Gestion avec la fenêtre "Gestionnaire....
|
|
|
 |
Gestion en direct
|
|
|
 |
Importation
|
|
|
 |
Pour importer des paramètres dans la fenêtre "Gestionnaire des paramètres prédéfinis"
|
|
|
 |
lancer "Charger"
|
|
|
 |
choisir le fichier
|
|
|
 |
ATTENTION, il s'ajoutera à la précédente sélection
|
|
|
 |
Exportation
|
|
|
 |
Pratique
|
|
|
 |
créer deux styles poussé de bouton Web avec à chaque fois 3 variantes pour trois états de bouton
|
|
|
 |
enregistrer ce jeux de style dans la bibliothèque de photoshop
|
|
|
 |
exporter ce jeu à partager avec vos collègues
|
|
|
 |
Photoshop: exportations
|
|
|
 |
Optimisation
|
|
|
 |
comprendre "enregistrer pour le web"
|
|
|
 |
optimiser = convertir dans un format possible sur le web
|
|
|
 |
compresser l'image
|
|
|
 |
le but en tant que web designer est de trouver le meilleur compromis entre le poids et l'apparence
|
|
|
 |
avec les fichiers qui suivent voir les différences d'affichage et de poids en fonction du format, au moment de l'exportation pour le web
|
|
|
 |
JPEG Joint Photographic Expert Group
|
|
|
|
 |
photographies
|
|
|
 |
dégradés
|
|
|
 |
objets avec ombre
|
|
|
 |
objets brillants
|
|
|
 |
ne gère pas la transparence
|
|
|
 |
...
|
|
|
 |
GIF : Graphic Interchange Format
|
|
|
|
 |
images simples, graphiques (seulement 256 couleurs)
|
|
|
 |
logo
|
|
|
 |
aplats
|
|
|
 |
BD
|
|
|
 |
art vectoriel, linéaire
|
|
|
 |
images avec transparence
|
|
|
 |
....
|
|
|
 |
PNG : Portable NetWork Graphic
|
|
|
 |
8 ou 24
|
|
|
 |
le 24 est très puissant sur la définition et la transparence
|
|
|
 |
pas toujours compatible (surtout avec IE 6)
|
|
|
 |
plus lourd
|
|
|
 |
tout type d'images
|
|
|
 |
"enregistrer pour le web et les périphériques" interface
|
|
|
|
|
fichier : Dossier G_...> candles.psd
|
|
|
 |
optimiser les JPEG
|
|
|
|
|
fichier : Dossier G_...> candles.psd
|
|
|
 |
trucs pour être le plus léger possible :
|
|
|
 |
tons continus non contrastés
|
|
|
 |
léger flou
|
|
|
 |
baisser la saturation
|
|
|
 |
baisser le contraste
|
|
|
 |
Exemple JPEG
|
|
|
 |
si on clique sur terminer photoshop enregistre nos derniers réglages sans exporter l'image
|
|
|
 |
si le fichier est encore trop lourd dans le fichier original :
|
|
|
 |
réduire la saturation
|
|
|
 |
réduire le contraste
|
|
|
 |
comparer avec l'original
|
|
|
 |
optimiser les GIF
|
|
|
|
|
fichier : Dossier G_...> dragonwell.psd
|
|
|
 |
trucs pour être le plus léger possible :
|
|
|
 |
images avec larges parties de couleurs
|
|
|
 |
réduire le nombre de couleurs
|
|
|
 |
réglage de la palettes
|
|
|
 |
ajouter un algorithme de réduction des couleurs : sélective, adaptative....à tester en direct. Ils sont tous très similaires sauf "restrictive" qui est trop radical
|
|
|
 |
"diffusion" pour étaler les pixels
|
|
|
 |
"aligner sur le web" en accord avec palette sécurisée web qui réduit les couleurs
|
|
|
 |
enregistrer
|
|
|
 |
comparer l'image exportée avec l'image originale
|
|
|
 |
couleurs verrouillées
|
|
|
|
|
fichier : Dossier G_...> chai.psd
|
|
|
 |
PNG
|
|
|
|
|
fichier : Dossier G_...> dragonwell.psd
|
|
|
 |
le PNG 8 peut remplacer le gif et il est souvent plus léger. Le fonctionnement est le même que le gif.
|
|
|
 |
le PNG 24 permet des transparences poussées. Par contre IE 6 ne peut pas le gérer sans un script.
|
|
|
 |
attention le PNG 24 peut être beaucoup plus lourd par rapport à un GIF ou un JPEG. Bien contrôler le poids avant d'utiliser ce format
|
|
|
 |
Transparences
|
|
|
 |
transparence
|
|
|
|
|
fichier: Dossier J_...> chai.psd
|
|
|
 |
optimiser
|
|
|
|
|
fichier: Dossier J_...> chai.psd
|
|
|
 |
motif (pattern)
|
|
|
|
|
fichier: Dossier J_...> chai.psd cup_tile.gif
|
|
|
 |
Les Tranches
|
|
|
 |
comprendre les tranches
|
|
|
|
|
fichier: Dossier K_...> javaco_stores.psd
|
|
|
 |
les tranches utilisateurs
|
|
|
|
|
fichier : Dossier K_...> javaco_stores_02.psd
|
|
|
 |
les tranches basées sur les calques
|
|
|
|
|
fichier : Dossier K_...> javaco_stores_03.psd
|
|
|
 |
les tranches se font automatiquement avec les calques
|
|
|
 |
essai avec un calque :
|
|
|
 |
sélectionner un calque
|
|
|
 |
lancer menu Calque > nouvelle tranche d'après un calque
|
|
|
 |
avantages
|
|
|
 |
la tranche bouge avec le contenu de la tranche
|
|
|
 |
si on essaye sur le logo à droite, seule l'image change de place avec l'outil déplacement
|
|
|
 |
avec une tranche d'après un calque la tranche se redimensionne automatiquement en fonction du contenu du calque
|
|
|
 |
essayer de changer le contenu du calque "cup" en le bougeant ou en le transformant (control/command + T) pour voir comment la tranche se repositionne
|
|
|
 |
cette fonction de redimensionnement fonctionne aussi avec les effets. Faire un essai avec une ombre que nous ajouterions à une des images
|
|
|
 |
il est possible de sélectionner plusieurs calques et de lancer la même commande
|
|
|
 |
limites des tranches basées sur les calques
|
|
|
 |
tous les objets à découper ne sont pas toujours sur des calques séparés
|
|
|
 |
il est impossible de redimensionner une tranche d'après un calque. Dans ce cas il suffit de lancer clic droit + convertir en tranche utilisateur ou en cliquant sur le bouton "convertir" dans la barre d'outil du haut. Dans ce cas les tranches deviennent modifiables
|
|
|
 |
les options de tranche
|
|
|
|
|
fichier : Dossier K_...> javaco_stores_04.psd
|
|
|
 |
sauvegarder les tranches
|
|
|
|
|
fichier : Dossier K_...> javaco_stores_05.psd
|
|
|
 |
Photoshop: Gif animé
|
|
|
 |
visibilité
|
|
|
|
|
fichier :Dossier M_...> smoke.psd
|
|
|
 |
attention à ne faire que des animations courtes pour des questions de poids
|
|
|
 |
les animations ne peuvent qu'être qu'en gif
|
|
|
 |
les animations gif ne nécessitent aucun plugin et peuvent être lues par tous les navigateurs
|
|
|
 |
création d'une animation
|
|
|
 |
optimiser et exporter
|
|
|
 |
dans la fenêtre d'exportation pour le web
|
|
|
 |
l'optimisation peut se faire par séquence
|
|
|
 |
exporter le fichier de l'exercice précédent
|
|
|
 |
voir dans le navigateur
|
|
|
 |
Utiliser les transitions
|
|
|
 |
Fichier suplémentaires
|
|
|
 |
Fonction Trajectoire avec l'opacité
|
|
|
|
|
fichier :Dossier M_...> white_tea.psd
|
|
|
 |
Fonction Trajectoire avec la position
|
|
|
|
|
fichier :Dossier M_...> white_tea_02.psd
|
|
|
 |
Bridge: Classer les images
|
|
|
|
|
Dossier complet: Photos_exo_bridge
|
|
|
 |
Présentation
|
|
|
 |
Principe général
|
|
|
 |
Lancer
|
|
|
 |
Ergonomie
|
|
|
 |
Mode d'affichage de bridge
|
|
|
 |
barre du haut
|
|
|
 |
Tri de la barre du haut
|
|
|
 |
3 actions importantes
|
|
|
 |
changement nom global :
|
|
|
 |
mode vérification :
|
|
|
 |
espace de travail
|
|
|
 |
Réglage de la barre du haut
|
|
|
 |
informations essentielles
|
|
|
 |
visionner
|
|
|
 |
filtrer
|
|
|
 |
donner des mots clefs
|
|
|
 |
voir les collections
|
|
|
 |
film fixe
|
|
|
 |
visionner les grands formats
|
|
|
 |
filtrer
|
|
|
 |
Métadonnées
|
|
|
 |
accent sur les métadonnées
|
|
|
 |
Sorties
|
|
|
 |
sorties PDF automatisées
|
|
|
 |
exportation en galeries web flash
|
|
|
 |
Mots-clefs
|
|
|
 |
accent sur les mots clefs avec les métadonnées
|
|
|
 |
Prévisualisation
|
|
|
 |
filtrer
|
|
|
 |
accent sur les très grands formats
|
|
|
 |
Table lumineuse
|
|
|
 |
toutes les vignettes seules
|
|
|
 |
Dossiers
|
|
|
 |
rechercher dans un dossier
|
|
|
 |
table lumineuse
|
|
|
 |
Le filtrage
|
|
|
 |
filtres
|
|
|
 |
voir dans les dossiers :
|
|
|
 |
les filtres :
|
|
|
 |
mots clefs
|
|
|
 |
création par projet pour optimiser le classement
|
|
|
 |
Utilisation
|
|
|
 |
quand les mots clefs sont en italique cela signifie que les mots clefs sont associés aux images mais non enregistrés dans les métadonnées locales
|
|
|
 |
pour les conserver, créer un nouveau dossier et glisser les mots-clefs à l'intérieur pour les mémoriser localement
|
|
|
 |
filtrage avec fonction rechercher :
|
|
|
 |
les piles
|
|
|
 |
les notes et étiquettes / menu étiquette
|
|
|
 |
Camera Raw
|
|
|
 |
présentation
|
|
|
 |
cameraw permet de corriger les images en série sans toucher à l'original. Les corrections vont se loger dans les méta données
|
|
|
 |
exercice
|
|
|
 |
exercice
|
|
|
 |
Projet web : "mag famille"
|
|
|
 |
Il s'agit de regrouper et de sélectionner rapidement 4 groupes d'images en créant les mots clefs pour chaque
|
|
|
 |
jouets sans personnages
|
|
|
 |
portraits enfants
|
|
|
 |
portraits adultes
|
|
|
 |
activités sportives ou dansées
|
|
|
 |
A l'aide de Bridge, créer 4 collections à partir des outils vu dans bridge :
|
|
|
 |
regrouper par pile
|
|
|
 |
attribuer les mots clefs (nom des parties)
|
|
|
 |
changer avec des noms plus évocateur, en série
|
|
|
 |
corriger dans camera raw (résolution, profil, couleur, contrastes)
|
|
|
 |
attribuer des étoiles
|
|
|
 |
filtrer avec les étoiles
|
|
|
 |
filtrage final en mode vérification
|
|
|
 |
exporter les images à une dimension de 400pix maximum
|
|
|