Comment exporter des documents Photoshop dans dreamweaver

Images Ablestock.com/AbleStock.com/Getty

Adobe Photoshop vous permet de concevoir une mise en page dynamique, alors que Dreamweaver apporte à la vie dans le codage HTML. Le processus d`exportation n`est pas difficile, mais il peut être un peu méthodique, car elle nécessite une préparation minutieuse avant l`exportation. documents PhotoShop, communément appelés fichiers PSD, doivent être modifiés et mis en place en tant que dispositifs web et images découpées pour le transfert à DreamWeaver. Ensuite, le fichier doit être importé dans DreamWeaver pour le codage HTML. Dans l`ensemble du processus, prend environ 10 à 15 minutes selon votre degré de familiarité avec les outils PhotoShop, fonctions et composants.

PhotoShop PSD tranchage et Prep

Accéder à l`application Adobe PhotoShop en cliquant sur son icône de bureau.

Clique le "Fichier" onglet de menu en haut de l`écran et sélectionnez la "Ouvrir" action pour charger le fichier PSD PhotoShop dans l`application.

Cliquez sur le bouton de la barre d`outils découpage en tranches, qui affiche une image d`un couteau à découper. (Ceci est l`outil de coupe comme la mise en page doit être coupé en tranches à des fins de codage HTML.)

Trace sur les sections des agencements pour séparer les éléments et de créer des pièces individuelles de la mise en page.

Clique le "Fichier" onglet une nouvelle fois, et sélectionnez la "Enregistrer pour le Web et les périphériques" action dans la liste déroulante.

Clique le "sauvegarder" bouton dans la "Web et les périphériques" fenêtre pour créer une version mise à jour du document PSD qui sera utilisé pour le codage HTML dans Dreamweaver.

Importation de Dreamweaver

Ouvrez l`application Adobe Dreamweaver à partir de l`écran de bureau de votre ordinateur.

Clique le "HTML" option sous la "Créer un nouveau" l`article qui est affiché dans la "Configuration Nouveau document" fenêtre.

Localisez le "Des dossiers" onglet dans le coin inférieur droit de l`écran et cliquez sur le "Articles de bureau" onglet dossier pour afficher les options de menu de l`effondrement et sous-dossiers.

Clique le "Images" dossier qui sera répertorié sous les articles de bureau, car cela est l`emplacement du dossier de fichier qui a été créé lorsque vous avez enregistré le fichier PSD Photoshop avec les mises à jour effilées. Cette action va importer le document Photoshop découpé en la plate-forme de conception Dreamweaver.

Attention

Ne pas exporter le document Photoshop sans trancher. Le fichier tranchage PSD Photoshop est extrêmement important. L`outil de coupe se casse la mise en page en bas de sorte qu`il n`apparaît pas comme une seule grande image. Une mise en page est comme un grand puzzle qui est déjà mis en place, de sorte que vous voulez faire le contraire. Vous voulez le décomposer afin qu`il puisse être pleinement fonctionnel et accessible. Toutes les couches de conception et d`éléments représentant des boutons, des liens, des boîtes, des sections d`image et d`autres éléments qui doivent être séparés doivent être débités en morceaux individuels. Ce sont vos périphériques Web, car ils font le site Web d`un site Web. Sans ces appareils, vous aurez seulement une image fixe qui ressemble à une mise en page, mais rien ne fonctionnera.

Articles Tu auras besoin de

Les références

EntheosWeb.com: Slicing la mise en page Photoshop et exporter vers Dreamweaver
Adobe: Sites web design avec Photoshop et Dreamweaver

A propos de l`auteur

Meaghan Ellis a écrit des nouvelles, des articles de journaux, le contenu Web et des rapports de recherche de produits pour plus de 12 ans. Alors que deux dans la gestion des majoring affaires et marketing à l`Université du Sud, elle dirige une conception graphique à domicile et des entreprises de contenu Web.