Tag Info

Hot answers tagged

8

I used an automatic photoshop script once and worked well. The concept is : Each portion is a different image. Each portion (and so, each images) must be in the same folder w/o any other images. Run the script indicating the folder and some parameters (size, css name, etc...). The script does : Merge all images into one with the size you indicated. ...


5

Okay, if you don't have too many sprites then this shouldn't take too long. It's not automated, but if that's what you're looking for let me know and I can help you with a script to do it (although at that point this begins to fall out of the bounds of Graphic Design) Setup your sprite grid in the Photoshop preferences: 40px x 40px with 1 subdivision. ...


5

Adobe's Photoshop supports something like 300,000 pixel canvas's. It has a "Save for Web" feature that allows you to save a PNG24 file (which supports your alpha transparency). It too has all the functions you are looking for.


3

If this were my issue, I'd configure a photoshop file with guides where I needed them and everything positioned correctly. Then I could edit anything, everything remains within the guides I've configured, and I could add new items at anytime. Then simply re-save the file via Save for Web as a .png (or whatever) and have a new sprite sheet without anything ...


3

Sprite sheets should have the same size for each frame so that you don't get this problem. Thats what a sprite atlas is for, when you create a sprite atlas with images like these the program you use will create offsets for each frame so its easy to use in other programs like game salad and they take up less space. The problem here is that you are using a ...


3

Because "the sprite is quite big", an excellent "automated method" is imagemagick. I know it is not Gimp or Photoshop but with large files and automation, it is by far easier to use imagemagick. You can automate this with simple Cron -one-liner, $ crontab -e but ask more about it in Stackoverflow. Anyway here the command: $ convert your_grid.png -crop ...


3

A quick search brings up this page: ( http://boxhacker.com/blog/?s=layertoanimation ) which gives the instructions about a way to do this. In order to bring in the useful info to this page, I will summarize: ) load your tiles into a single document as layers using photoshop "file>scripts>load files to stack" ) use a script (javascript) to resize the ...


3

Hello again (I'm the guy from StackOverflow). I don't really understand the problem, but looking at your image I do notice something odd. First of all, your sprite sheet has 6 frames and is 720 pixels wide. Normally, this would mean that each frame should be 720 / 6 = 120 pixels wide. This is how each frame should be limited: All rectangles there are ...


3

Without knowing what type of sprites.. here are some general ideas to remain consistent. Create a color palette and stick to it for everything. Don't use any color which is not in your palette. Create a library of common objects to pull from. If your sprites are people... then clothing, bodies, hairstyles. If your sprites are buildings, then windows, ...


3

If in the book they are talking about image sprites for the web they are images that contain multiple images, like for instance a series of icons to be used in a navigation bar. You would have one http request for the "sprite" and use CSS to display the icon needed. You can have sprites that contain all of the images for a given page if you wanted. The ...


2

From Wikipedia: http://en.wikipedia.org/wiki/Sprite_%28computer_graphics%29 In computer graphics, a sprite is a two-dimensional image or animation that is integrated into a larger scene. Initially used to describe graphical objects handled separate from the memory bitmap of a video display, the term has since been applied more loosely to refer to various ...


2

Technically and historically, a sprite is an animation (not an individual frame of one). I have never seen an actual authority cite the origin of the term, but it has to do with scanline priority queues and graphic display hardware. A sprite sheet is a well-structured single image (usually a series of animation frames laid out in a grid of n Rows and n ...


2

It means they cannot be used as a pattern. Take a look at the small print under that paragraph: *OK, they kinda can do repeating, but it's a little trickier and can only work one-dimensionally (x or y). So, sprites should be used for graphics that are only displayed once (such as an icon). They should not be used for a gradient pattern intended to be ...


2

To export multiple same sized images, I'd suggest using layers instead of laying them out. (Stack them in a 1x1 square, not 7x3) There is a script in Photoshop to save out each layer automatically as a separate file. On a side note, if you want one grided image, there is a script in InDesign that does exactly that: Samples>Javascript folder>ImageCatalog.jsx ...


2

Well, sorry for resuscitating a thread whose solution was already accepted. I was facing the same "batch layer exporting" problem, except I wanted to export groups of layers together, for instance LAYER0+LAYER1, LAYER0+LAYER2, LAYER1+LAYER2. Neither JessyInk nor the script files from Inkscape Launchpad worked for me... This is one of the first answers I ...


2

If i get you right and the big picture wont animate and get "replaced" on the little screen: it is possible with responsive webdesign. choosing-a-responsive-image-solution and just replace the big image with ur animated gif via media queries on the small screen


2

There's not a way to directly do what you ask, to my knowledge. There is a way to "link" layers (click next to eye in layers dialog), but this linkage seems to cause only movement (dragging) to operate on the group of layers; all other operations continue to work on a single layer. If what you want is to see if the rectangular boundaries of each layer ...


1

I am not entirely sure that I unterstood correctly what you want to do, but I suggest the following: Create one sample tile with every text aligned as you wish using the corresponding text alignment. I.e., your letter is not only centred optically but also the text-alignment is centred. Your number should be probably right-aligned. Replace the letter with ...


1

Well, the idea of an Animated GIF is that the entire image is replaced with another, like a flipbook. So this isn't possible with that format. Sounds like what you are trying to achieve is to animate a UI screen on a device, in which you would need to use a program like After Effects to animate your screen, then place it over a photo of your device. After ...


1

Your measurements appear incorrect. The Tablet icon looks to be 40 px wide to me, not 47. Therefore the CSS is incorrect. Updated Fiddle: http://jsfiddle.net/j7RM3/1/ And the correct CSS: .report-option:hover { cursor: pointer; } .report-option.selected { font-weight: bold; } .report-option-icon { background: ...


1

I would recommend tackling this problem as a print merge: prepare a text file with the numbers you'll be needing (1 per line), then use it to perform a print merge on a readymade design, with the number from your text file inputted into each card that requires it. Then perform the merge - you should end up with 40 pages (or however many numbers you had) of ...


1

The answer to your dreams managing sprites with Sass and Compass. Compass makes it very easy to combine multiple images into a sprite and then manage them as the project goes on. Here is another tutorial with more examples: Web Design: CSS Image Sprite With Compass


1

How about this (not perfect but a bit faster) Replicate the artboard as many times as icons you have. You can use the Artboards panel to replicate them. Each artboard will have ALL the icons. Show only one icon per artboard and hide the rest (or delete them) Use object->artboards->rearrange to arrange the artboards in a grid or a row (whatever your sprite ...


1

Thanks to Freenode's #inkscape channel, the user su_.* and verbalsh.*. su_.* provided most of the below ideas. Please, notice that exporting to raster means an information loss. Besides, Inkscape has odd features such as anti-alias-always-on-in-exportation -feature and odd no-control-with-contrast-in-exportation -feature, meaning an extra information ...


1

You can do this with ImageMagick and this helper script. The script only splits the image vertically, but that's fine — we can rotate the resulting strips by 90 degrees and try again. (This is all assuming that you're working on Linux, Mac OS X or some other Unix-line OS, since the script is a Unix bash shell script. If you're on Windows, I suppose ...


1

Realize this post is old, but it had half of what I needed. To anyone that runs across this, another good tool is TexturePacker - http://www.codeandweb.com/texturepacker Its pretty good, lots of options.


1

This is quiet simply 1.) Create a rectangle of desired size and styling. 2.) Put a text layer with the desired number on it and merge the two layers into one. 3.) Repeat step 1. and 2. with a different number. 4.) now cut the layer on top in half 5.) press command plus T and move the anchor (the little cross) from the middle of the shape, to the ...


1

In the animation panel flyout menu, choose the (somewhat misleading, imho) "Flatten Frames into Layers." That will give you a layer for each frame. Export the layers using File > Scripts > Export Layers to Files.


1

Wouldn't using slices + starting an Action that beguins marquee selecting (with snap to slices & document bounds on) all your slices one by one, but cropping to selection each time, and saving as png, ctrl alt z undoing till not cropped, selecting each sector, cropping..etc, till done with all sectors, then stopping the Action. In the middle you could ...



Only top voted, non community-wiki answers of a minimum length are eligible