Jump to content

  • Free consultations and support
  • Live chatClick Here for Live Chat
  • Call ico 1888-906-1888
    Phone support: Open

    Ready for your call :)

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams

    Phone support: Closed

    We are back in: 1h 20m

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams


Exporting PSD to CSS

exporting psd to css

  • Please log in to reply
&nsbp;

#1 Ammar11

Ammar11

    Senior Member

  • Designer
  • 197 posts

Posted 27 September 2013 - 04:11 PM

To export PSD to CSS
1.Open your image file in Photoshop and go to the Slice tool and put the mouse on the area you need to slice, and make a box around that area, then release the mouse. Repeat the same if you want more slices of the image.
2.Go to ->File->Save for Web & Devices, and click Save. Now change the drop down option format to "HTML and Images." And the drop down option settings to ‘Other.’
3. In the drop down list change HTML to Slices. Select ‘Generate CSS’ from the Slice Output
4. Set the ‘Referenced’ for css code as ‘by ID,Inline or set it as ‘By Class’ . Then from Default Slice Naming select a naming convention.
5.Go to Save->name your file, and select Save->OK."
6.in the window "Save Optimized As" double click the folder containing your images and code. Put a file name and select Save.
  • nullobject, pixlogix01 and Phopon like this

#2 denvarghese

denvarghese

    Banned

  • Banned
  • 50 posts

Posted 11 June 2014 - 12:45 AM

Good work!... thanks.

#3 seanquinn

seanquinn

    Junior Member

  • Designer
  • 12 posts

Posted 23 June 2014 - 09:11 AM

Excellent!

#4 VaughnMoline

VaughnMoline

    Apprentice Designer

  • Designer
  • 35 posts

Posted 14 July 2014 - 02:59 AM

Thanks! Very useful tips for beginners like me!

#5 cartknkr

cartknkr

    Junior Member

  • Designer
  • 10 posts

Posted 14 July 2014 - 05:40 AM

thanks

#6 ptu12

ptu12

    Senior Member

  • Designer
  • 238 posts

Posted 22 July 2014 - 11:40 PM

Thank you very much.

#7 pixlogix01

pixlogix01

    Junior Member

  • Designer
  • 4 posts

Posted 09 January 2018 - 11:53 AM

Step to Export PSD to CSS

1. Open any image file in Photoshop and go to the Slice tool and put the mouse on the area you need to slice and make a box around that area, then release the mouse. Repeat the same if you want more slices of the image.

2. Go to ->File->Save for Web & Devices, and click Save. Now change the drop down option save format to "HTML and Images." And the drop down option settings to Other.

3. In the drop-down list change HTML to Slices. Select Generate CSS from the Slice Output.

4. Set the Referenced for CSS code as by ID, Inline or set it as By Class Then from Default Slice Naming select a naming convention.

5.Go to Save->name your file, and select Save->OK.

6. in the window "Save Optimized As" double-click the folder containing your images and code. Put a file name and select Save. 



#8 RajGawdi

RajGawdi

    Member

  • Designer
  • 70 posts

Posted 23 January 2018 - 09:37 AM

Thanks for sharing.



#9 Phopon

Phopon

    Junior Member

  • Designer
  • 14 posts

Posted 02 May 2020 - 07:42 PM

Thanks :o







Also tagged with one or more of these keywords: exporting psd to css

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users