pennyright.blogg.se - Saving psd web page layers as png

#SAVING PSD WEB PAGE LAYERS AS PNG HOW TO#
#SAVING PSD WEB PAGE LAYERS AS PNG SKIN#

Choose a function key (and an optional modifier key if needed).

Open the actions palette context menu (figure c.) and select "Action Options".

Select your action in the actions palette.

At this point, you can use your action on another asset, by selecting it, and hitting the play button (figure a.) The last step is to assign a function key. This tells the action to pause when the save for web window appears, so that you can change your settings and name your file before exporting. Make sure to switch on the "dialog on/off" toggle box next to "Export" (figure b.).

Your new action should now look something like this: Carefully repeat each step listed in "A better way", including closing the document.Hit the "Create New Action Button", and name it.Open your actions palette (window > actions).Select the layer or group containing your asset.Saving the steps listed in "A Better Way" as an action with a shortcut key is SUPER easy. How you do dis, you ask? ACTIONS my friend. One keystroke, name that file, and you're onto the next one.

#SAVING PSD WEB PAGE LAYERS AS PNG HOW TO#

Now, let's look at how to set that up as an action. There's nothing to undo to get back to where you were. Save for Web (works cleanly since you're saving the whole document - no accidental extras or generated filenames)Īnd now you're back to your pristine Photoshop file, with your perfectly sized asset saved out and ready to go.Now your document is exactly the size of your asset, to the exact pixel.Now you have a new photoshop document with just that isolated asset!.In the dialog that pops up, change the destination document to "New" and hit ok.Right click on the layer or group title and click "Duplicate Layer/Group".A better way: The best thing about this workflow, is that it's COMPLETELY automatable, meaning we can turn this in to a reusable action. This was my terrible work flow years ago. Have an emotional breakdown as you realize you must repeat this process 99 more times today.Delete the slice you created that's overlapping another asset you need to cut out separately.Remember which layers you hid to export that one piece, and re-enable them.

Delete all of the non-slices you just accidentally exported along with the one slice you did want, because you forgot to customize your export options.

Zoom in 1000% to make sure you're not cutting off any pixels, or leaving any blank ones.

Turn off all the layers behind your asset.

If you ever find yourself repeating the same sequence of actions over and over again in Photoshop, STAHP, and open up that dusty actions pallet.īefore we get into actions, lets compare two ways to do this manually. One of the most repeated tasks in the build-out process is saving out an individual asset in the comp as a. Please contact me if you have any suggestions.Use this sweet photoshop action to save out layers and groups with one click. I would appreciate any help! We usually set up batches of 500 and save them out manually and it is brutal. Is there a way to create a custom script to automatically perform these repetitive actions? I am obviously doing the same thing over and over again. We then save out that design, delete the layer we just saved and duplicate our actions for the next layer in this case would be "Seamless Vector Gold Fish". Then change the save type to PNG or JPEG.

So we will then need to put our layer title into the spot that currently says "(layer name):

#SAVING PSD WEB PAGE LAYERS AS PNG SKIN#

Then we bring up a "save as" window and you will see our PSD file is currently save as "The (layer name) Skin for the Beats by Dre Solo 2 Headphones", How we do this now is we double click the layer title, so it allows us to "copy" the title (instead of typing it in).

For example: The top layer here is called "Blue Vector Fish and Boat Pattern". Here's a test example of a few designs.Įach background layer is titled corresponding to what the design is called. After we line up all the backgrounds as individual layers behind the main device window, we then have to save out each layer as its own png. We have 2,000+ designs to offer for each device, so this takes time. To show what a design looks like on a device, we have to create a main layer of the device, having the place of where the skin would fit cut out for our background layer images to slide behind.