8 Replies Latest reply on Apr 15, 2010 5:21 AM by JoeDaSilva

    Photoshop to Dreamweaver CS4

    G-Rice1990 Level 1

      Hello everyone,

       

      I have two questions. I created my website through photoshop. It is about 30 different files. I saved all photoshop files to web with slices on where I want to create links. In photshop I saved it with preset to JPEG and at 60 quality. When I open the files in dreamweaver and open it through firefox the website is all the way to the right instead of centered how do I change that. Also the quality is not that good should I put it to 100 instead of 60?

       

      My last question is when I link my slice in dreamweaver i get a bold blue border around it even when I preview it, it is still there. Is this just to show me I did it or is it going to stay there?

       

      Thank You

        • 1. Re: Photoshop to Dreamweaver CS4
          Brad Lawryk Adobe Community Professional & MVP

          Heya G-Rice,

           

          First the blue lines .... easy fix. yes they will stay there if you don't remove them. When you add a link to an image, DW automatically puts a 1 pixel border around it. Simply select the image and set the border to 0 in the properties inspectoor at the bottom of your screen to remove the border.

           

          Now the 60% thing .... shouldn't need to go any less than 80%. Quality really drops off. Do you have Fireworks? If so, open your Photoshop file in there and use Fireworks to slice your image. I find it 10x better than in Photoshop. Fireworks was more designed for web graphics.

           

          Brad Lawryk
          Adobe Community Professional: Dreamweaver
          Northern British Columbia Adobe Usergroup: Manager

          • 2. Re: Photoshop to Dreamweaver CS4
            John Waller Adobe Community Professional & MVP

            Would really help if you upload the files to some webspace and provide a link to the page.

             

            Re: saving as JPG - hard to comment without seeing the artwork. However JPG creates artifacts in artwork depending on the compression level used. Try GIF or PNG and see if it helps.

             

            Re: blue borders on links. This is normal browser behaviour and will remain unless you get rid of them via CSS (Cascading Stylesheets).

             

            Add "a img { border: none; }" (without the quotes) to your stylesheet.

             

            Using Brad's technique is fine if you only need to remove the blue border on one or two slices. Using CSS removes the blue border on all linked slices and images in one fell swoop.

            • 3. Re: Photoshop to Dreamweaver CS4
              G-Rice1990 Level 1

              Thank You both of you so much really helped.

               

              Well I have 80 photoshop files with around 6 slices on each one so opening them in fireworks and redoing them will take forever. However I changed the quality to 86 and it looks much better.

               

              One thing I didnt understand was the CSS part. I got to get the border away with changing it to zero. But, I'm not sure how to do it using with CSS it confused me.

               

              As you can see from the pictures I uploaded the website is all the way to the right. How do I center it? Also from the picture can you guys let know what you guys think I should do JPEG, PNG, or GIF. Thanks again

               

              Presentation1.jpg

              • 4. Re: Photoshop to Dreamweaver CS4
                Brad Lawryk Adobe Community Professional & MVP

                First I am very curious as to why you would have something like 80

                Photoshop files with a layout like that? But oh well ... lol

                 

                As for the images, jpg is fine. To center the layout, if your entire

                layout is not inside a

                tag tag, put it in one.(This is where it


                would be best to see the site live so we could see the code).



                Once the entire layout is inside a

                 

                tag, then select that tag and

                open the CSS panels and set the left and right margins to 'Auto'.

                 

                Brad Lawryk

                Adobe Community Professional: Dreamweaver

                Northern British Columbia Adobe Usergroup: Manager

                • 5. Re: Photoshop to Dreamweaver CS4
                  G-Rice1990 Level 1

                  well I made a new photoshop page for each product I'm selling. Not sure if that was the best way. Dang I'm a newb. So I opened it up in dreamweaver and clicked on (CODE). What now? Sorry I'm a newb. Can you send me a better detailed instruction on how to do that? Thanks again Brad.

                  • 6. Re: Photoshop to Dreamweaver CS4
                    G-Rice1990 Level 1

                    Hey I figured it out myself thank you tho!


                    • 7. Re: Photoshop to Dreamweaver CS4
                      Brad Lawryk Adobe Community Professional & MVP

                      Cool, glad you got it. Good luck with the site.

                       

                      As for the pages, yeah, thats definately the hard way to do it. You

                      could have done it in two ways that would have been tons easier on you.

                       

                      1: DW Templates

                      2: Server Side Includes.

                       

                      Being new, likely number 1 woould have been your best choice.

                       

                      Alternatively you could have just made one page in DW and then used

                      'Save As' to make your other pages. But DW Templates would be the best

                      way to go for you in my opinion. I'd research that before going tomuch

                      further.

                       

                      *Brad Lawryk

                      Adobe Community Professional: Dreamweaver

                      Northern British Columbia Adobe Usergroup: Manager*

                      • 8. Re: Photoshop to Dreamweaver CS4
                        JoeDaSilva Level 4

                        G-Rice,

                         

                        I think someone should point out that the methods you're using aren't how web pages are made at all. The Photoshop export trick that you're using is only there so you can play around with a semi-functional "mock-up" of a page design. It was never intended to be used for an actual website. Google won't be able to index your site, you won't be able to change your content without exporting new images just to name a few problems with how you're going about this.

                         

                        This article explains how to take a design and convert it into HTML the proper way:

                         

                        http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html

                         

                        The article is written for Adobe Fireworks, but you can apply the same logic to Photoshop.

                         

                        In short though, you need to start over.