Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Dreamweaver CS6 : Les nouveautés

Amélioration avec le format natif PSD

Testez gratuitement nos 1337 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Il y a une amélioration dans le flux de travail entre images pour le web utilisées dans Dreamweaver et les documents natifs de Photoshop au format PSD. Dorénavant, il est possible de choisir la qualité et l'optimisation de son rendu dès son importation, possible par glisser/déposer depuis le système.
05:09

Transcription

Des améliorations côté intégration d'images et surtout utilisation de format de fichiers natifs d'images. Dans un premier cas, on va voir avec Photoshop, je peux passer en mode création pure et dure et, ici, les insertions d 'images se font soit par ce menu-là, soit depuis le menu commun par cette icône-là. On peut également glisser directement depuis le panneau des fichiers, ici, le fichier directement à l'intérieur du document. On peut également utiliser le glisser depuis l'explorateur Windows ou le finder MacIntosh. Voici ici le finder. Je vais pouvoir prendre ce document de type psd et le glisser directement dans Dreamweaver. Une nouveauté va être que l'on va avoir une boîte de dialogue qui va venir nous informer de la prise en compte, de la prise en charge de ce document et nous dire : que voulez-vous comme type de pré-réglage ? du PNG24, du JPEG, du JPEG élevée ? Ici, je vais partir pour un JPEG élevée qualité 80, ça me va très bien. Je vais dire ok. Par contre, vous avez remarqué, au passage, la taille du fichier : 664 ko. Il est vrai qu'ici on va me demander d'exporter ce format JPEG qui va être généré pour moi donc je vais aller l'exporter directement dans le chapitre 9. Une fois que je l'aurai enregistré, on va donner le texte secondaire, ici, et une fois que j'aurai donné toutes ces informations, l'image s'affiche et effectivement, ici, on voit qu'on est à 665 ko, qu'on est relié à ce fichier psd. L'exportation se fait sous forme JPEG mais l'image ici fait 3072. Une nouveauté, c'est ce cadenas qui va permettre de redimensionner l'image. Je vais partir dans une image à 450 pixels et voyez ici le petit cadenas qui va contraindre l'homothétie, le ratio, le respect du ratio de l'image. Voilà, on est passé à 346 pixels et l'image s'est redimensionnée. Si on regarde d'un peu plus près, on peut s'apercevoir d'une forme de pixellisation, c'est vrai que l'image étant de très grosse qualité, on la distingue moins mais on voit quand même une pixellisation. Vous allez voir la différence dès que je vais mettre à jour le système. Ici, on a une petite icône qui nous dit : attention c'est un smart objet de Photoshop donc vous êtes relié avec un fichier natif, ici. Il y a aucune synchro nécessaire entre les deux fichiers, le fichier que vous avez récupéré psd et ce fichier d'export sont synchronisés, il n'y a pas de soucis. Par contre, attention, l'image, la dimension de l'image Web sélectionnée sont différentes par rapport à l'original, ici. J'ai la possibilité de rétablir la taille d'origine ou envoyer la taille de l'image ici à Photoshop, c'est-à-dire demander à Photoshop de se mettre à jour sur cette taille-là. Ce que je veux, c'est tout simplement, faire un clic droit ici et dire depuis le clic droit : mets à jour depuis l'original. Ici, il va mettre à jour depuis l'original. Dreamweaver sait que je veux une image en JPEG80, Photoshop connaît la taille que je veux, il va recevoir cette information-là et là, regardez la qualité qui va se passer, un petit temps et voilà, il y a une amélioration de qualité, il n'y a plus cette pixellisation sur la barre et là, on a une image prête à être utilisée. Cette image, ne l'oublions pas, qu'elle est originale à partir d'un Photoshop, ici donc, si je regarde bien, j'ai une synchro parfaite entre le document d'origine et Photoshop mais j'ai cet élément-là qui ne correspond pas tout à fait à ce que je voudrais. Je voudrais supprimer le texte, j'aimerais mieux mettre le texte dans du html et non pas sur l'image. On peut utiliser toutes les icônes de travail sur l'image, ici, comme à l'accoutumée. Le problème est que, si vous faite cela, vous allez rencontrer une perte de lien par rapport au fichier natif, original, qui est du psd. Ce que je vais faire, c'est basculer directement dans Photoshop. Là, je vais faire Fichier ouvrir et je vais ouvrir le fichier plat.psd qui est la taille originale en 38 mo ici qui est extrêmement lourd et, en fait, en analysant ce fichier, je vais m'apercevoir que je possède un calque texte que je peux éventuellement désactiver. Je vais simplement désactiver le calque et je vais fermer ce document en prenant soin de l'enregistrer. Je rebascule dans Dreamweaver. Maintenant, dans Dreamweaver, l'icône de liaison avec le smart objet s'est mise en rouge dans la partie basse. Cela veut dire qu'il me manque une synchronisation par rapport à ce fichier, ici et je vais pouvoir rétablir la synchro. On pourrait faire un clic droit, ici, pour mettre à jour le fichier et faire Mettre à jour depuis l'original. On peut également utiliser ce raccourci depuis l'inspecteur de propriétés qui permet de faire exactement la même modification. Regardez, on est parti sur le côté psd maintenant, on a fait la moulinette et on est revenu. On a une synchronisation parfaite. Bien sûr, le texte a été supprimé. Voilà une partie de travail avec Photoshop qui nous permet de pouvoir travailler de manière souple avec un vrai flux de travail avec de vraies images, de vraies tailles d'images, de travailler avec des formats natifs et Dreamweaver se mettra à jour automatiquement en fonction des modifications que l'on souhaite apporter à notre document Web.

Dreamweaver CS6 : Les nouveautés

Allez à la découverte des nouveautés de Dreamweaver CS6, qui gravitent autour du développement d’applications mobiles, de la pluri-distribution et de sites Internet réactifs.

3h16 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :23 avr. 2012
Mis à jour le:5 avr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !