4 Replies Latest reply on May 27, 2014 7:55 AM by Kevin_808

    Using CSS to make sweeping changes to PSD files???

    Kevin_808 Level 1

      I know that you can extract CSS from layers to pass along to Devs, but is there any way to use CSS externally to to influence/define characteristics of an element used through out many PSDs?  For example... I'm designing a mobile interface, I use it to pitch to different clients every week and I customize it to them using their brand's color pallet so I want all the blue buttons to change to orange, or orange to yellow, etc.  Rather than open every PSD change the color manually, save it and close it every time, can I use CSS to change this in one place (Or from one file) and have it update all of those buttons inside the PSD file throughout all of the PSDs?


      I googles this topic but all I could find were articles on extracting the CSS to give to Devs.


      I am aware of the new "Placed Linked" feature as a possible solution and use it now (and love it, thank you Adobe!) but there are certain things like text that it will not work for.  And correct me if I am wrong but doesn't InDesign use CSS in the way I describe to update Styles throughout a whole book with the click of a button?


      Any and all guidance appreciated.



        • 1. Re: Using CSS to make sweeping changes to PSD files???
          Dsarchy Level 3

          Photoshop is fine for creating visuals but it's not really meant as a way to export to Web.


          The problem with a PSD file being exported to a HTML document is that it will slice what it see's into images and then use the simplest HTML it can to arrange those images on the page. Although you are left with a representation of what it could look like it doesn't break your document down into reusable styles.


          For example on a webpage you could have a button that has been created using CSS. Icons would then be transparent vector/pngs and the background would be made from a colour/gradient value. CSS could then be used to change the style. Photoshop doesn't do this. It takes an image of that button and just places it on the page. CSS therefore is useless in this case. If you are going to keep reusing the same template then spend a little more time in creating a proper html mock up and you will then be able to apply styles to it.

          • 2. Re: Using CSS to make sweeping changes to PSD files???
            Kevin_808 Level 1

            Thank you for the reply, but I'm not really looking to go from Photoshop >to> Web/HTML/CSS) in this instance.  I'm looking to have an external CSS effect >>> PSDs.  It's a mobile app so I will end up manually organizing and optimizing all of my assets to be passed to a dev who, depending on what platform they are on, will most likely program it in C++ or Java. 


            Specifically, I am looking for a way to use Cascading Style Sheets >to effect> Photoshop elements, similar to how InDesign does : http://desktoppub.about.com/od/indesign/ss/id_css.htm.  It's more about saving time when a client request an edit.  Like changing a single color that will affect 5 elements in 100 different PSDs equalling 500 changes.  If that color is defined in one place similar to CSS I only need to change it once. 


            Is there a feature (Besides Placed Linked) in PhotoShop that allows for this?



            • 3. Re: Using CSS to make sweeping changes to PSD files???
              Dsarchy Level 3

              That you can do in the new Photoshop. If you click on swatches and Import your CSS file it will load up styles it can from it. Might not work 100% but its worth a shot: http://design.tutsplus.com/tutorials/import-swatches-from-css-to-photoshop--psd-19073

              • 4. Re: Using CSS to make sweeping changes to PSD files???
                Kevin_808 Level 1

                That's a helpful tip, thanks!  But unfortunately does not solve for what I'm asking.