Creating sprite sheets with Photoshop CC

Hi,
I am creating a sprite image that is 200x 125px that has 8 images accross and 5 images down with each image on its own layer and each image is a max size of 25px x 25px.
How do I have Photoshop align the layers to have each image centered within its individual grid square?
Thanks

In the Move Tool settings (see pictures) you can use the align function. Select more than one layer to align layers to each others, you can also make a selection and align to it. Short answer, try it out and if you need more help let us know...

Similar Messages

I can't create contact sheet with Photoshop CC

Hi,
I have a problem,
Since I have installed Adobe Photoshop CC, I have never been able to use the option Contact Sheet II
Here the error message that I get when I use the option
Please help me

- Transformation impossible, car les disques de travail sont saturés.@8890
2013-09-05T15:05:49 -
==============Exception==============
   Message: Erreur: Une erreur générale de Photoshop s'est produite. Cette fonction n'est peut-être pas disponible dans cette version de Photoshop.
- Transformation impossible, car les disques de travail sont saturés.
   File: /c/Program Files/Adobe/Adobe Photoshop CC (64 Bit)/Presets/Scripts/ContactSheetII.jsx
   Line: 8890
   Error Name: Error
   Error Number: 9001
   Line: (8881)            if (e.number == 8007) {      // User cancelled
   Line: (8882)              try {
   Line: (8883)                layer.resize(100, 100, AnchorPosition.MIDDLECENTER);
   Line: (8884)              } catch (e) {
   Line: (8885)                if (e.number != 8007) {      // User cancelled
   Line: (8886)                  Error.runtimeError(9001, e.toString());
   Line: (8887)                }
   Line: (8888)              }
   Line: (8889)            } else {
   Line: (8890) >> Error.runtimeError(9001, e.toString());
   Line: (8891)            }
   Line: (8892)          }
   Line: (8893)
   Line: (8894)        } catch (e) {
   Line: (8895)          if (e.number == 8007) { // User cancelled the operation
   Line: (8896)            Error.runtimeError(8007);
   Line: (8897)          }
   Line: (8898)
   Line: (8899)          var msg = ('Image file not placed: ' + file + ' - ' + e.message +
   Line: (8900)                     '@' + e.line);
[ContactSheetII.jsx]
main()
_main()
process([Object:[object Object]])
process([Object:ContactSheetIIOptions])
_processX([Object:ContactSheetIIOptions])
processFiles([Object:ContactSheetIIOptions])
contactSheetX([Object:ContactSheetIIOptions])
createCell([Document:[Document Planche contact-002]],[Object:ContactSheetIIOptions],800,2000)
createCellHP([Document:[Document Planche contact-002]],[Object:ContactSheetIIOptions],800,2000)
insertImageHP([Document:[Document Planche contact-002]],[Object:ContactSheetIIOptions],[Array:800,2000,1600,2958],[File:/e/_mac_a_t ransferrer/5_DGgraphisme/P1_SignesSymboles/recherche/YinYang.jpg])
insertImageIntoBounds([Document:[Document Planche contact-002]],[ArtLayer:[ArtLayer YinYang]],[Object:ContactSheetIIOptions],[Array:800,2000,1600,2958],[File:/e/_mac_a_trans ferrer/5_DGgraphisme/P1_SignesSymboles/recherche/YinYang.jpg],true)
logException([Error:Erreur: Erreur: Une erreur g\u00E9n\u00E9rale de Photoshop s'est produite. Cette fonction n'est peut-\u00EAtre pas disponible dans cette version de Photoshop.\n- Transformation impossible, car les disques de travail sont satur\u00E9s.])
exceptionMessage([Error:Erreur: Erreur: Une erreur g\u00E9n\u00E9rale de Photoshop s'est produite. Cette fonction n'est peut-\u00EAtre pas disponible dans cette version de Photoshop.\n- Transformation impossible, car les disques de travail sont satur\u00E9s.])
Log File:C:\Users\AnimateTrunks\AppData\Roaming\ContactSheetII.log
==============End Exception==============
2013-09-05T15:05:49 - Sheet creation complete
2013-09-05T15:05:49 - End Processing
2013-09-05T15:05:49 - 1,212 seconds overall per image
2013-09-05T15:05:49 - 0,518 seconds processing time per image
2013-09-05T15:05:50 - ContactSheetII Shutting down.

How can i create excel sheet with multiple tabs using utl file?

how can i create excel sheet with multiple tabs using utl file?
any one help me?

Jaggy,
I gave you the most suitable answer on your own thread yesterday
Re: How to Generating Excel workbook with multiple worksheets

How to create "Fisheye Effect" with Photoshop 10, on a Mac computer

How to create "Fisheye effect" with Photoshop 10 on a Mac computer?

One way : use the filter : correct camera distortion. Move the remove distortion slider towards left (barrel distortion)
Or, first increase the canvas size to a square format bigger than the larger dimension of the image and play with the filter : distort, spherize.

Contact sheet with Photoshop CS5 Windows 7

Hello
As I tried to make some contact sheets with Photoshop CS5, I found that this functions disappeared from the "Automatization" menu (I had it in Photoshop CS3)
How could I do ? Is there some special "plugin" to do that ?
I use a french version of Photoshop CS5 running on Windows 7
Thanks Have a good day

Yes, do try the bridge version and also you can download the Optional plugins for cs5,
which includes the old contact sheet II, but please READ the instructions before installing.
http://www.adobe.com/support/downloads/product.jsp?product=39&platform=Windows
MTSTUNER

Version Set is not created when editing with Photoshop CS4?

Last week I was working in PSE7 and opening files into PS CS4 for editing. I open the files by clicking the Open with link and choose Photoshop. I edited several dozen photos and when I closed them from PS CS4 Version Sets were created in PSE7 like they should be. At some point that stopped happening. Now when I do as before and open the files into PS CS4, edit them, and then close them the Version Set is not being created in PSE7. I look in the folder containing the files and the file has a new modified date but it still has the same file name instead of being saved with the - edited name as before. Does anyone know why the version sets are no longer being created when editing with PS CS4? I can edit the files with the PSE7 editor and the version sets are created as they should be. Thanks!

Okay so tha there is no misunderstanding here is exactly what I'm doing. From the PSE7 Organizer I select a photo (file name Tetons & Jenny Lake 026.jpg) and click the Fix tab. I then click More Options and select Photoshop. The photo opens in into PS CS4. I make my edits click the x on the tab to close the image and I'm asked "Save changes to the Adobe Photoshop document "Tetons & Jenny Lake 026_edited-1.jpg" before closing?" I click Yes then click OK to save the image at maximum quality. I go back to the PSE 7 Organizer and there is no version set. I check the folder the original image was in and see the original file Tetons & Jenny Lake 026.jpg with a new modified date and time. I can even choose Save As from PS CS4 and it asks me if I want to overwrite Tetons & Jenny Lake 026_edited-1.jpg and I select Yes, but I get the exact same results. Thanks!

Sprite sheet from PhotoShop CC 2014 layers to Edge Animate?

Hi
The Photoshop CC 2014 script that takes layers and generates a sprite sheet to the latest Edge Animate does not appear to work correctly. Unless I"m missing something very obvious (that isn't in the instructions below provided by Adobe), it doesn't take the seperate layers and seperate them out correctly in the output png file.   Any suggestions? Thanks - would LOVE a quick answer -
http://blogs.adobe.com/edge/2014/09/18/export-sprite-sheet-from-adobe-photoshop/

Hi Sharon
You are right. Open the .jsx file in text editor of choice and change the function the following:
function translateActiveLayer(deltaX, deltaY) {
    //see http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/photoshop/pdfs/photoshop-cc-scripti ng-guide.pdf on how to use script listener.
    var desc = new ActionDescriptor();
    var ref = new ActionReference();
    ref.putEnumerated(charIDToTypeID("Lyr "), charIDToTypeID("Ordn"), charIDToTypeID("Trgt"));
    desc.putReference(charIDToTypeID("null"), ref);
    var coords = new ActionDescriptor();
    coords.putUnitDouble(charIDToTypeID("Hrzn"), charIDToTypeID("#Pxl"), deltaX);
    coords.putUnitDouble(charIDToTypeID("Vrtc"), charIDToTypeID("#Pxl"), deltaY);
    desc.putObject(charIDToTypeID("T   "), charIDToTypeID("Ofst"), coords);
    executeAction(charIDToTypeID("move"), desc, DialogModes.NO);
Will PM you the updated script if needed. ( And also the blog post soon )
Regards
Avinash

Flash Pro CS6 - Exporting Sprite Sheet With EaselJS JSON Data

Hi,
I've imported a png sequence into Flash Pro and have been trying to get the new sprite sheet generation feature to export JSON data in EaselJS format, but when I choose the EaselJS option from the dropdown menu, I only get a window function:
(function(window) {
}(window));
However, when I export as JSON, I do get proper JSON data. Is this a known issue with EaselJS support in CS6, or should I be doing something differently? I'd rather not use Zoe, the SWF to EaselJS AIR utility, because the pngs are fairly large and Zoe seems to have a maximum dimention cap for exporting sprite sheets, I get 12 of them whereas Flash Pro is able to auto detect dimentions, exporting one sprite sheet, which is great, I just need to get it to generate the EaselJS data along with it. Thanks in advance!

Thanks, I was just about to convert the JSON file myself, then I read your reply, tried it and viola. Do you happen to know why EaselJS can only read symbols, even if I labeled my frames?

Can Anyone Tell Me How to Create Greeting Cards with Photoshop Elements 7 or 8?

I need a 7x10 page setup so that when the card is folded to a 5x7 my photo is landscape on the outside of the card. Currently I can only find a 8 1/2 x 11 paper size.
Thanks,
Lexington59

In Photoshop Elements 8 Editor, go to the Create tab, and you will see Greeting card, with 5x7 page size.

Creating Web Elements with Photoshop or AE?

OK, so I'm pretty fluent in Photoshop and After Effects.
How can I use these skills to create interactive web elements?
I'd rather not learn another product, but if I must, which one?
Thanks!

Nothing special about the link -
<a href="blabla.pdf" alt="">White Paper</a>
<a href="blabla.zip" alt="">White Paper</a>
just be sure to zip the word documents to force a download
dialog box
"preciousjewels48" <[email protected]> wrote
in message
news:fpl92s$puo$[email protected]..
>I am helping a friend with his webpage. NOT A
PROFESSIONAL WEB DESIGNER,
>just
> know a little bit (smile)
>
> he wanted me to set up his page so when visitors come to
his page they can
> click and PDF or Word document will bring up a box for
them to download
> the
> white paper.
>
> How do I do this with dreamweaver mx? or can it be done?
I know I have
> visited sites and I can click on a hyperlink and the pdf
will display or I
> can
> download it.
>
> thanks,
>
> my email is [email protected]
>

HP LaserJet 1200: Prints; creates EXTRA sheet with Offending Command: D

After every printing job is completed *an extra page is printed* with the following:
ERROR: undefined
OFFENDING COMMAND: D
STACK:
How can I stop this *unnecessary waste of paper* every time I print something?
Please help!

What does work is the following:
Set your printer to NOT use Appletalk (through your browser).
Delete your printer and install it again. If you don't see it in the list select IP printer and use the printer's IP address
Make sure you use a HP driver and not the Generic driver. I used a Gutenprint driver with success on a LaserJet 1200 with a JetDirect network adapter.

Help: importing PNG's Alphas to make a sprite sheet

Hi All,
I need some help with making PNG sprite sheets with Photoshop CS4 Extended.
The issue is with Photoshop. When I bring in the PNG animation sequence image 1 then 2 I lose the alpha after that.
What is the best way to bring in multpel alphas to make a sprite-sheet? The trick I have used so far has given me
bad results.
* Note: I have rendered out 35 frames of an animation sequence from 3Ds Max 9 as .PNGs & .TGAs with alphas.
Thanks in advance :-)
My curent way of doing this is:
Steps:
1. Launch Photoshop CS4 Extended
2. Set document size to 256X512
3. Set up a grid 32X32 pixles
4. Open Frames 1 to 35 of animation
5. place frames in order on sprite sheets
Note: open "Channels Panel" observe only the 1st frame has an alpha
And my work-around is to do the same steps for the alpha by opening each frame in Photoshop and going in the Channels tab and selecting just the alpha layer. Then copy and pasting it into new photoshop document to make the sprite sheet's alpha. Once
the alpha sprite sheet is done copy and paste it into the original sprite sheet document.
This sounds like a lot of steps and it is...

Hey All,
Thanks for posting :-)
Hi Chris Cox,
The PNG format out of Photoshop does not work in computer game graphics for some reason so the game artist use SuperPNG. To get SuperPNG to work it must have an alpha channel for the transparency to work in game engines like GameMaker & GarageGames.
HI Paul Riggott,
I am using a software tool like File Sticher called GlueIt and it is working great for me. But this is one extra step I am trying to remove to my art pipe-line.
Here is the current result in the GameMaker v7.0
Here is the my current work flow in Photoshop CS4 Extended

How to create and print contact sheet using photoshop elements 10?

how to create and print contact sheet with photoshop 10?

Which operating system are you using?
On a windows system you can use the Organizer
http://www.dummies.com/how-to/content/how-to-print-contact-sheets-in-photoshop-elements-.h tml
On a Mac, File>Contact Sheet II within the pse 10 editor

DrawImage takes long time for images created with Photoshop

Hello,
I created a simple program to resize images using the drawImage method and it works very well for images except images which have either been created or modified with Photoshop 8.
The main block of my code is
public static BufferedImage scale( BufferedImage image,
                                      int targetWidth, int targetHeight) {
   int type = (image.getTransparency() == Transparency.OPAQUE) ?
                    BufferedImage.TYPE_INT_RGB :
                    BufferedImage.TYPE_INT_RGB;
   BufferedImage ret = (BufferedImage) image;
   BufferedImage temp = new BufferedImage(targetWidth, targetHeight, type);
   Graphics2D g2 = temp.createGraphics();
   g2.setRenderingHint
         RenderingHints.KEY_INTERPOLATION,
         RenderingHints.VALUE_INTERPOLATION_BICUBIC
   g2.drawImage(ret, 0, 0, targetWidth, targetHeight, null);
   g2.dispose();
   ret = temp;
   return ret;
}The program is a little longer, but this is the gist of it.
When I run a jpg through this program (without Photoshop modifications) , I get the following trace results (when I trace each line of the code) telling me how long each step took in milliseconds:
Temp BufferedImage: 16
createGraphics: 78
drawimage: 31
dispose: 0
However, the same image saved in Photoshop (no modifications except saving in Photohop ) gave me the following results:
Temp BufferedImage: 16
createGraphics: 78
drawimage: 27250
dispose: 0
The difference is shocking. It took the drawImage process 27 seconds to resize the file in comparison to 0.78 seconds!
My questions:
1. Why does it take so much longer for the drawImage to process the file when the file is saved in Photoshop?
2. Are there any code improvements which will speed up the image drawing?
Thanks for your help,
-Rogier

You saved the file in PNG format. The default PNGImagReader in core java has a habit of occasionally returning TYPE_CUSTOM buffered images. Photoshop 8 probably saves the png file in such a way that TYPE_CUSTOM pops up more.
And when you draw a TYPE_CUSTOM buffered image onto a graphics context it almost always takes an unbearably long time.
So a quick fix would be to load the file with the Toolkit instead, and then scale that image.
Image img = Toolkit.getDefaultToolkit().createImage(/*the file*/);
new ImageIcon(img);
//send off image to be scaled A more elaborate fix involves specifying your own type of BufferedImage you want the PNGImageReader to use
ImageInputStream in = ImageIO.createImageInputStream(/*file*/);
ImageReader reader = ImageIO.getImageReaders(in).next();
reader.setInput(in,true,true);
ImageTypeSpecifier sourceImageType = reader.getImageTypes(0).next();
ImageReadParam readParam = reader.getDefaultReadParam();
//to implement
configureReadParam(sourceImageType, readParam);
BufferedImage img = reader.read(0,readParam);
//clean up
reader.dispose();
in.close(); The thing that needs to be implemented is the method I called configureReadParam. In this method you would check the color space, color model, and BufferedImage type of the supplied ImageTypeSpecifier and set a new ImageTypeSpecifier if need be. The method would essentially boil down to a series of if statements
1) If the image type specifier already uses a non-custom BufferedImage, then all is well and we don't need to do anything to the readParam
2) If the ColorSpace is gray then we create a new ImageTypeSpecifier based on a TYPE_BYTE_GRAY BufferedImage.
3) If the ColorSpace is gray, but the color model includes alpha, then we need to do the above and also call seSourceBands on the readParam to discard the alpha channel.
3) If the ColorSpace is RGB and the color model includes alpha, then we create a new ImageTypeSpecifier based on an ARGB BufferedImage.
4) If the ColorSpace if RGB and the color model doesn't include alpha, then we create a new ImageTypeSpecifier based on TYPE_3BYTE_BGR
5) If the ColorSpace is not Gray or RGB, then we do nothing to the readParam and ColorConvertOp the resulting image to an RGB image.
If this looks absolutely daunting to you, then go with the Toolkit approach mentioned first.

Copying one .eas file for multiple sprite sheets.

Hi, I've been googling the web trying to find answer to a problem but haven't found a solution yet. Maybe someone here has an idea.
I'm working on a project with Edge Animate CC where I'm creating a multitude of different animated symbols from sprite sheets. The symbols/sprites, which there are a lot of, come in sets, each with a different character wearing different colour clothes. For example, there's one of a man in a white shirt walking, and then the same man in a blue shirt, a red shirt, and so on, and then the same for several other characters. Because each version of each character is the same except for a colour change, I've been trying to create one sprite sheet from Flash CC, make colour edits to the sprite sheet in Photoshop CC, save it with a new name, then import it into Edge Animate using the same spritesheet.
It seems straightforward enough but what I've learned is you can't use an .eas file with spritesheets other than the one it was created with in Flash. When I try it says the .eas file and the image don't match, and to check the paths for both files. When I copy the .eas file and rename it, giving it the same name as the new sprite sheet I want it to work with, I still get the same message. When I open up that .eas file in TextEdit and change the "image" filename in the "meta" section to correspond to that of the new sprite sheet, it still doesn't work. I don't see anything else within the .eas file that would tie it to any particular spritesheet, so between making that change and changing it's filename I would expect the .eas file would work the new sprite sheet.
I know I could create sprite sheets for each colour scheme of each character through Flash, but since they are all identical other than their colour it would save me a ton of time to just copy and edit the sprite sheets. The colour changes are not something I could do within Edge Animate.
Has anyone had similar issues? Any tips?
-A

Hi Medley, Good to see that you are experimenting with the new SpriteSheet feature available in Animate CC 2014.
Some points:
The EAS file format is currently only supported from Flash Pro CC 2014. There are some meta data tags that is read when you bring in an eas type spritesheet and therefore Animate will be able to import only the sprite sheets created from Flash Pro CC using the EAS route.
If you want to use spritesheets from other applications like photoshop, I would recommend that you don't enable the "load an eas file" check-box. In this case the sprite sheet PNG will be the only input that you need to specify in the Import dialog.
In this case you will need to have a sprite-sheet which has the individual sprites that is stacked out in order from left to right and top to bottom. You can then specify the rows and columns and the padding options in the Spritesheet import dialog in animate.
Let me know if this works for you.
-Sujai

Creating sprite sheets with Photoshop CC

Similar Messages

Maybe you are looking for