Travailler avec Photoshop et Dreamweaver
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Modifiez des Objets intelligents depuis des fichiers Photoshop, directement dans l’interface de Dreamweaver.
This content requires Flash
Conditions requises
Pour suivre ce tutoriel, vous avez besoin des logiciels et des fichiers suivants:
Adobe Dreamweaver CS4
Adobe Photoshop CS4
Fichiers d'exemple
lrvid4043_dw_fr.zip (ZIP, 4.6MB)
Connaissances à avoir
Niveau intermédiaire dans l’utilisation des Objets intelligents
Travailler avec Photoshop et Dreamweaver
Si vous utilisez les Objets Intelligents ou que vous mettez en œuvre les fonctions intégrées de Copier/Coller disponibles dans Adobe® Photoshop® et Adobe Dreamweaver®, vous pouvez optimiser votre flux de production en le rendant plus rapide, plus efficace, mais aussi vous pouvez avoir plus de créativité à toute les étapes de la production de vos pages Web. Dans ce tutoriel, vous apprendrez à utiliser des Smart Objets ou Objets intelligents depuis des fichiers Photoshop pour optimiser la mise à jour de vos fichiers intégrés. Vous apprendrez également à copier et coller des images depuis Photoshop dans Dreamweaver sans avoir à les optimiser.
Importation d’Objets intelligents
Dreamweaver CS4 est compatible avec les Objets intelligents de Photoshop, des images gardant leurs liens avec le fichier Photoshop d’origine. Il n’est pas nécessaire de réexporter des fichiers Photoshop quand vous voulez mettre à jour des Objets intelligents. Dreamweaver lie automatiquement ces images à leur fichier source et en gère leur mise à jour. Pour insérer un Objet intelligent dans votre page Web :
- Assurez-vous que vous avez toutes les pages Dreamweaver ouvertes dans lesquelles intégrer un Objet intelligent Photoshop. Par exemple si vous voulez intégrer un Objet intelligent à la fois sur une page index ou sur une de blog, ayez ces deux pages ouvertes dans Dreamweaver.
- Positionnez votre curseur à l’endroit précis dans la page où vous voulez intégrer l’Objet intelligent.
- Choisissez Images dans le panneau Insertion. Un menu contextuel apparaît. (Notez que vous pouvez également choisir Insertion > Image depuis la barre de menu standard).
Image 1: Le panneau Insertion
- Depuis le menu contextuel, choisissez Image. La boîte de dialogue Sélectionnez la source de l’image apparaît.
Image 2: La boîte de dialogue Sélectionnez la source de l’image
- Naviguez vers le dossier de vos sources et choisissez le fichier Photoshop (PSD) désiré. Cliquez sur OK. La boîte de dialogue Aperçu de l’image apparaît.
Image 3: La boîte de dialogue Aperçu de l’image
- Sélectionnez un format de fichier adapté aux images pour le Web depuis la boîte de dialogue Aperçu de l’image. Les formats disponibles sont : JPEG, GIF et PNG. Redimensionnez le document en utilisant les réglages de Mise à l’échelle, et modifiez les options de compression d’image que vous désirez. Vous avez ici les mêmes options d’exportation, comme si vous étiez dans Photoshop. Cliquez sur OK pour enregistrer vos modifications.
- Une fois que la boîte de dialogue Aperçu de l’image se ferme, la boîte de dialogue Enregistrer image Web vous demande d’enregistrer le fichier dans votre répertoire racine local. Sélectionnez le dossier dans lequel vous voulez enregistrer le fichier et cliquez sur OK.
Image 4: La boîte de dialogue Enregistrer image Web
- Si vous avez les options d’accessibilité activées dans Dreamweaver, la boîte de dialogue Attributs d’accessibilité des balises image s’ouvre vous demandant d’entrer un texte alternatif. Entrez un texte décrivant votre image (par exemple, « Web banner »). Cliquez sur OK et Dreamweaver intègre l’image dans votre page.
Remarque: Si vous intégrez un Objet intelligent à un document Deamweaver, l’application identifie l’Objet intelligent avec un icône en forme d’insigne. Les flèches vertes sur l’insigne indiquent que le fichier source et le fichier Dreamweaver sont compatibles ; des flèches rouges indiquent l’impossibilité de les synchroniser.
Travailler avec des Objets intelligents dans Dreamweaver
Les Objets intelligents sont utiles parce qu’ils rationalisent le processus de modification en mettant automatiquement à jour les fichiers source intégrés depuis Photoshop dans Dreamweaver. Pour intégrer avec des Objet intelligents dans Dreamweaver :
- Ouvrez une autre page de votre site dans laquelle vous voulez intégrer un Objet intelligent.
- Dans le panneau Fichiers locaux, sélectionnez le fichier image que vous avez importé depuis Photoshop. Glissez ce fichier depuis le panneau Fichiers locaux dans votre document Dreamweaver ouvert.
Image 5: Le panneau Fichiers locaux
- Déposez le fichier dans l’emplacement de votre page Dreamweaver. La boîte de dialogue Attributs d’accessibilité des balises image s’ouvre vous demandant d’entrer un texte alternatif dans le champ approprié. Entrez le texte nécessaire et cliquez sur OK.
Remarque: Dreamweaver intègre le fichier dans la page comme un Objet intelligent. Quand vous modifiez le fichier source, Dreamweaver crée une mise à jour globale sur toutes les pages dans lesquelles se trouve l’Objet intelligent, y compris les pages fermées.
- Choisissez Fichier > Enregistrer tout.
- Allez dans l’inspecteur de propriétés situé en bas de l’interface de Dreamweaver.
Image 6: L’inspecteur de propriétés
- Cliquez sur le bouton Edition dans Photoshop. Photoshop s’ouvre alors automatiquement, vous permettant de modifier le fichier dans son application native.
- Faites une modification dans Photoshop. Si vous travaillez avec les fichiers d’exemple pour ce tutoriel, sélectionnez le calque Updated Banner. Activez la visibilité du calque en cliquant sur la boîte à cocher située à côté du calque. L’icône Pupille apparaît, vous indiquant que le calque est activé.
Image 7: Le panneau Calques
- Choisissez Fichier > Enregistrer. Cliquez sur Enregistrer, puis fermez le fichier Photoshop. Réduisez la fenêtre Photoshop. Retournez dans Dreamweaver.
Remarque: L’icône insigne associé à l’Objet intelligent incorporé à chacune de vos pages a maintenant une flèche rouge. Cette flèche indique que l’élément Photoshop à été modifié. Si vous survolez le curseur au-dessus de l’insigne, Dreamweaver vous indique le problème lié à la synchronisation (par exemple « Elément original modifié »).
Image 8: L’icône Insigne
- Pour corriger la synchronisation, double-cliquez sur l’image. Un menu contextuel apparaît.
Image 9: Correction d’une erreur de synchronisation
- Accédez à l’option Mettre à jour depuis l’original. La flèche de l’insigne passe du rouge au vert et le document est automatiquement optimisé. Si vous activez une autre page contenant cette image, vous remarquerez que l’image a été mise à jour globalement sur tout le site Web.
Couper et coller de Photoshop à Dreamweaver
Les Objets intelligents ne sont pas la seule façon de profiter de Photoshop dans un flux de production de sites Web. Comme avec Dreamweaver CS3, vous pouvez copier et coller des images de Photoshop dans Dreamweaver. Pour copier/coller entre Photoshop et Dreamweaver :
- Ouvrez un fichier dans Photoshop.
- Dans le panneau Claques, désactivez tous les calques, sauf celui contenant l’image que vous voulez copier.
- Choisissez l’outil Sélection depuis la barre d’outils de Photoshop.
- Allez dans le champ Style dans la barre d’options. Sélectionnez Taille fixe depuis le menu contextuel. Entrez les valeurs pour la largeur et la hauteur en pixels.
Image 10: Le champ Style - Cliquez sur le fichier pour définir votre sélection.
- Choisissez Edition > Copier.
- Réduisez Photoshop et retournez dans Dreamweaver. Sélectionnez l’image dans Dreamweaver que vous voulez remplacer avec celle de Photoshop. Appuyez sur la touche Suppr pour la supprimer.
- Choisissez Edition > Coller. La boîte de dialogue Aperçu de l’image apparaît. Acceptez les réglages par défaut et cliquez sur OK. La boîte de dialogue Enregistrer l’image Web apparaît. Enregistrez l’image dans votre dossier en cliquant sur Enregistrer.
- Quand vous y êtes invité, entrez un texte alternatif descriptif et cliquez sur OK. La nouvelle image provenant de Photoshop apparaît dans votre page Web Dreamweaver.
- Bien que cet élément ne soit pas un Objet intelligent, Dreamweaver reconnaît que son application native est Photoshop. Dans l’inspecteur de propriétés, cliquez sur l’icône Edition dans Photoshop.
- Définissez votre nouvelle sélection. Vous pouvez copier et coller des calques multiples en activant des calques supplémentaires et en choisissant Edition > Copier avec fusion.
- L’image n’est pas mise à jour automatiquement dans Dreamweaver, mais quand vous retournez dans Dreamweaver, vous devrez sélectionner de nouveau l’image et choisir Edition > Coller. L’image mise à jour est alors insérée dans vote page Web.
Remarque: En procédant ainsi, vous n’avez pas besoin d’optimiser de nouveau l’image, cette fonctionnalité vous fera gagner du temps et rationalisera votre flux de travail pendant le processus de production. Cette fonctionnalité est également très pratique lors de la réalisation de maquettes dans Photoshop qui nécessite des découpages, ou quand vous créez des images pour le Web à partir d’images n’étant pas à la bonne dimension pour cette utilisation.
Pour aller plus loin…
- Dreamweaver CS4 Assistance et Support
- Apprenez Dreamweaver CS4
- Retouche d’images dans Lightroom et Photoshop, par Stéphane Lim
- Faire de la Rotoscopie en utilisant After Effects et Photoshop, par Bruno Quintin
- Utilisation de Photoshop avec Premiere Pro, par Stéphane Lim
- video2brain.fr
Cette oeuvre est placée sous la licence suivante : Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 3.0 Unported
A propos des auteurs
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
