Skip navigation
Currently Being Moderated

Save PSD File of Social Icons to Separate PNG image files for each file

Jun 26, 2012 10:28 AM

Tags: #beginners

social-fun.png

 
Replies
  • Currently Being Moderated
    Jun 26, 2012 11:06 AM   in reply to brad-wpsites

    Hi there - If I understand your inquiry correct, you can accomplish this using slices.

     

    Using the slice tool (click and hold the Crop Yool icon on your tool panel slice tool.jpg), drag slices around your icons. To keep a perfect square, drag from the upper left corner of each icon holding down Shift on your keyboard.

     

    all slices2.jpg

     

    After you've finished creating your slices, go to File > Save For Web. You will get a dialogue box in which you can specify your output file as PNG in the upper right hand corner.

     

    all slices3.jpg

     

    Click Save. Another dialogue box should pop up where you can specify your output destination. Make sure you select "All Slices" from the Slice dropdown menu.

     

    all slices.jpg

     

    This will generate a folder entitled "images" that will be saved to wherever you specified in the final step. Hope this helps!

     

    EDIT: If these icons are all separate layers, you can go to File > Scripts > Export Layers to Files. Make sure that all your icons are on their own single layers (i.e. if one icon has multiple layers, merge them together).

     

    layers to files.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 26, 2012 11:13 AM   in reply to brad-wpsites

    Have you tried using the Slice tool option? This might work better, especially if you're using these on the web.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 26, 2012 3:27 PM   in reply to brad-wpsites

    The Slice Tool can semi-automatically divide up your icons in an instant.

     

    Take the Slice Tool and drag one rectangle around the block of 16 icons as if you were using the Rectangular Marquee Tool to give the result below.

     

    slice1.png

     

    Right click on the blue tag at top left of the rectangle and pick "Divide Slice…". Enter 2 and 8 into the dialogue as below and OK it.

     

    slice2.png

     

    File > Save for Web.... Set the output file type and click "Save…". A dialogue will appear in which you can specify "All User Slices" or "Selected Slices". Finally, click "Save" to output the files.

     

    slice3.png

     
    |
    Mark as:
  • Noel Carboni
    23,526 posts
    Dec 23, 2006
    Currently Being Moderated
    Jun 26, 2012 6:14 PM   in reply to brad-wpsites

    brad-wpsites wrote:

     

    I simply need 6 of the icons in png to put on  my website

     

    Another option:

     

    Choose the Rectangular Marquee tool.

    Make sure feather is 0 px and Anti-Alias is unchecked.

    Zoom in close to the icon you want.

    Drag a rectangular selection around it, carefully including the dark lines of border pixels.

    Edit - Copy.

    File - New.

    Edit - Paste.

    File - Save As - PNG.

     

    Repeat the above for all of them you need.

     

    -Noel

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points