Photoshop to unity - photoshop

Hello I made a spritesheet in photoshop. The process to make the spritesheet was fairly easy. The issue is when importing to Unity I get a white background and I don't know how to remove the white background from my spreadsheet in unity. I have taken the following steps to resolve this issue
First unchecked the background in photoshop.
Second I tried to remove background from each individual image in photoshop.
But no luck can someone help.

You can select the asset and change its type to Sprites, instead of Default (in the Inspector); if you've already done that, how about trying .png files?

In one of the updates to Unity of last year, they removed the option to use the image transparancy as alpha when using .psd files. The option was a checkbox in the import setting of the image, which is no longer shown.
You can however use an import preset with a preset that still has this option set.
What you can do is:
Create a preset when in the texture-importer panel. How to make a preset? What is the texture-import panel?
Open the file which was created (e.g. myimporter.preset). You could use a file explorer in your project and search for the name
Then set these values to 1:
propertyPath: m_PSDRemoveMatte
propertyPath: m_PSDShowRemoveMatteOption
Apply this preset to all your psd files inside unity.
Now, importing a .psd file should work fine with transparancies.
Note: Unity's intent was for users to import .png files when dealing with transparancies. But I found it annoying to manually re-import all my .png files when i made changes to the .psd file.

Related

Edit .blend file's Text only

http://www.blendswap.com/blends/view/73614
I have downloaded this and want to use my own text on it using Blender (or another program). It is not used for commercial purpose. When I open it, I get no option to edit text. I tried edit external and GIMP which failed.
the .blend file is binary and can only be opened inside of Blender, When you create text objects they are displayed as objects inside blender. You should be able to find the object by using the object browser section inside blender and changing it there. You may have to recreate the text object depending on how the author did the original.

How to get the path coordinates of a shape for use with image-maps?

I am creating an image map using ImageMapster from here.
I have created a photoshop image with several images that I have cut out from the original photographs. Each image is on a separate layer.
Now, I need to get the path coordinates of each object, and I don't want to hover over every corner and manually write down each coordinate.
Is there an automated way to get this path?
Maybe there is some application or web service whence I can send my image and get the path in return?
I have tried exporting each layer separately and then importing them into illustrator and vectorizing the shape (it keeps the shape in its original position), but I can't figure out how to get the coordinate path as text. I can export it to svg, but that isn't the same simple code needed for the css image map.
Ah! After googling image-map, much thanks to Sven for the idea (he got my +1), I found this thread here on Stack Overflow.
So here is my process.
Prepare the image in Photoshop with each object on a separate layer with a transparent background (this will make it easy for you when you do the tracing).
Save your photoshop file.
Open the Photoshop file in Illustrator using File...Open (works in CS4 and CS5) and make sure to allow the option to import Photoshop's layers as separate objects. After you open the file, make sure NOT to move any of the objects around - you need them to be in the exact same place as they were in the photoshop file so they can superimpose each other when rendered to the imagemap.
Use the Live Trace with custom settings. Use the black & white mode with the threshold all the up (255). This will produce a black silhouette of the shape. (You can also use "ignore white"). Push the Trace button. If you have many layers, you can save this new tracing pattern as a preset - I called mine, Silhouette. Now, I just click on a layer and choose Silhouette from the tracing buttons' dropdown menu.
Expand the shape and make sure it consists of only a single flat shape:
you can use the blob brush in illustrator to blacken over any unwanted white areas
no groups
no compound shapes (or it won't work) - which means you can't create cutouts.
You can tell the shapes are right when you click on them - you should be able to see the path itself with no "other" shapes involved (perhaps the blob brush additions) - just a single path. An easy method is this:
select the shape
ungroup if necessary
release compound path
unite (shape mode merges all shapes into one)
Don't crop your image - you want your shape to be in the same place in the image's area as in your original photoshop image.
Don't join all the shapes together, either.
The shapes should all be individual whole shapes, all in their original locations, each on a separate layer.
Now, open Illustrator's Attributes panel, and make sure to "show options".
Select your shape and in the "Attributes" panel, switch the "Image Map" combo box from None to Polygon. Make sure to add a url (it doesn't matter what you put; you can change it later - I just put "#" and the name of the shape so I can tell which one it belongs to in the image map code)
Do this for each of the objects.
Now, in the File menu, go to "Save for Web and Devices". Skip all the settings here and just push "Save".
In the "Save As" (the title of the window is "Save Optimized As") dialogue box, use "Save As type:" and select HTML Only(*.html) if you just want the code, or HTML and Images if you want the sillouhuette, too (they will appear in a folder called "images") - and note your save location.
Now go open that html file in notepad!
Voila! All the shapes will be rendered for you as a pre-made image-map - points path and even html code. Here is what it looks like when you open in notepad the html file you just created: For this demo, I chose a particularly complicated image - one which you would never want to estimate by hand, nor have to do twice!
Don't forget to place the actual image file somewhere in your site's images folder. You can save the psd file for later and add more "stuff" if you want, and repeat the process.
I was able to create the image map this way for my photoshop picture in just a brief couple of minutes. After you do it once, it gets easier for next time.
This has been bugging me for so long and I don't have Illustrator to be able to use the solution proposed by BGM, that I created my own Photoshop addon.
You can get it here: https://creative.adobe.com/addons/products/2389
It writes all your paths' points' coordinates to a text file.
Should work for CS6 and above.
The way I use it is I create a marquee, right click -> make work path, rename my path, [repeat], then just export coords via my addon.
If anyone's interested in the scripts behind it, you can have a look here: http://pastebin.com/8ugcAV3j
In case you make any improvements, please post them here so that other people may use them as well.
Hope this helps someone.
EDIT: added link to source script (was only in comments before)
I used this to find the co-ordinates of the outline of a shape to make image hotspots for links in dreamweaver. If you have something else in mind, then you'll have to ignore some of it. This works on a single layer so you may want to make a "flattened copy first", but I don't see why it wouldn't work on a multi layered image.
Use wand to highlight area you want. This will be different for different images.
Right click and hit Make Work Path. Use a suitable tollerance which is found by trial and error. I just use the most sensitive.
Do this for all areas in all of your images creating separate paths for each.
Click edit then export paths to illustrator and save file in sensible place.
Open the saved file in word. Ignore the bumf the the top and use replace to remove ALL LETTERS. Don’t worry about the paragraph characters.
Note that all of the work paths are exported in the same file separated by a blank line so must copied and pasted separately to be used for each hotspot.
After inserting your image. Start making a map in dreamweaver with a couple of co-ordinates then simply replace these in the with information from the illustrator file for each of the map areas to be produced.
I add my updated answer I had to find since adobe has eliminated HTML output in many instances, I work mostly with photoshop (CS4) and this is a perfect solution:
1) download following file: https://github.com/andyhawkes/ps-paths-to-imagemap
2) open your image in photoshop and select the form with the magic wand
3) right click and select 'make work path' (the lesser the px, to more accurate)
4) go to File -> Scripts -> Browse ... and select the script from the first step
that's it !! this script will open your texteditor with the coordinates ...
Something like this may be useful;
http://code.google.com/p/imagemap/
Copy your image into position, then plot.
creating an image map is really simple.
First we need to look at the syntax of the code
Let's create a div.If we want to position it at the right side of our page,we can just begin by writing
<div align="right">
After that, we import the image that we are gonna map.
<img src="" alt="" width="" height="" usemap="#nameofmap" />
Now we have to define the map structure.First lets assume that you want a rectangular portion of an image to act like a hyperlink.
<map name="nameofmap">
<area href="wherever I wanna take that.com" alt="" title=""
shape=rect coords="A,B,C,D"></map>
Now we close the div.
</div>
If the shape is circular,we use the syntax
shape=circle coords="x,y,radius"
If shape is polygonal, we use
**shape=poly coords="a,b,c,d,e,f,gh"
Now comes the big part:How to find the image map coords.
Very simple.Go to
http://www.image-maps.com
Browse your image file,click "Start Mapping your image",then you proceed, and then on the next page,click "Import Old mapping Code" on the right.then you get the coords.
After that, you can use FIREBUG to change the coords according to your specifications,because image-maps only hyperlinks the whole image,so use firebug to change the coords and adjust according to your requirements.
Have fun.

Changing OS file icons using AIR app

I am building an AIR app which will be kind of like Dropbox. It will allow users to sync their files between various OSs. What I would like to know is that how can i change the default file system's file icons (add an overlay for eg) for states like - Synced and Syncing, the way Dropbox does it ??
On Windows i found out that Dropbox edits the registry files to insert the overlay icons..not yet sure how they do it in MAC OS X though.
I saw some threads here asking similar questions about AIR, but none referencing how to change file's icons. Hoping to get a solution for this from the various experts .. Please suggest any ideas if you know how it can be accomplished. Much thanks.
A simple yet effective solution would be to use icons that are only internal to your application : just embed in your application files some transparent pictures representing the various states of your files (with only the small part telling in which state it is, with the rest totally transparent), that you will add at runtime above the displayed icons.
Since you can get the actual icon of your files, just draw them into a BitmapData (if needed) & add an overlay with theses custom images, using the one related to your file's state in your application.
And one step further could be to store in your AIR application folder any resulting icons for future use (check what types of files you already have, and if your new file type isn't in thoses, export the various icons with your custom overlays to PNG files directly on the user device, for re-loading them the next time the application is opened).

Is there a quick way to change the underlying image in a .snag Snagit file?

I'm using Snagit for user guide screenshots. (New to it, but so far it's great!). I save the screenshot as a layered .snag file, then export .png files for putting into the document. The layers in the .snag file consist of the underlying raster image (the background) plus a layer of annotations and callouts on top.
Doing it this way lets me move and edit the annotations and callouts with ease, then export a replacement .png file. But what if I have a bunch of callouts on a screenshot and the screen itself changes?
Is there a way to replace the raster layer (background) with a new one, while keeping the callouts in place, so I don't have to create a new .snag file? (I want to avoid copying and pasting the callouts from the existing file into a newly created one...)
Thx!
Yes, that is possible, as long as your annotations and callouts are still vector objects. Here's what you need to do:
Delete the existing screenshot.
Make a new screenshot and paste it into the snag file.
Select the screenshot and use the Send to Back function to move it to the bottom layer.
If required, adjust the positions of your annotations.

iTunes Connect sends email about a issue with icon file, how to fix?

This is the email:
Dear developer,
We have discovered one or more issues with your recent binary submission for "Bla". Before your app can be reviewed, the following issues must be corrected:
Corrupt Icon File - The icon file 72 x 72.png appears to be corrupt.
Once these issues have been corrected , go to the Version Details page and click Ready to Upload Binary. Continue through the submission process until the app status is Waiting for Upload and then use Application Loader to upload the corrected binary.
I have change the file and re-upload the app, but I got the email again.
As Michael Dautermanm says.
Make sure "compress png's" is turned off in the build settings.
thanks
Can you open the file in Preview, and choose 'Tools' -> 'Show Inspector'? The file may be using some PNG format features that Apple don't like. They want RGB, 8 bit depth, no alpha. See the Custom Icon and Image Creation Guidelines.
For comparison, here are screenshots of the Preview Inspector, showing properties of an icon for an app that was accepted. If you're unsure, post similar screenshots for the properties of your picture.
The "Pixels Per Meter" part may or may not appear. It wasn't there when I first opened some icon files five minutes ago, and now it appears for every PNG I open. Weird.
Edit: also check the icon entries in your 'Info.plist', or the 'Info' tab for your Target. (These are not the same thing, as I just spent several hours discovering. Settings in the 'Info' tab override your 'Info.plist'.) As of the iOS 5.1 SDK, these include Icon file (a string), Icon files (an array), and Icon files (iOS 5) (a dictionary containing at least one dictionary containing an array). XCode seems to add your launch images to this list too. Don't rely on it to keep the list tidy - I have sometimes found outdated filenames in mine.
For further comparison, here's what ended up in the Info.plist of a valid app. Your filenames may be different, as long as they match the resources in your project.
I'm the developer of the app Pillboxie. I have been having the same issue as you, but I believe I may have finally found a solution.
Before proceeding with my suggestion, make sure that your Info.plist and all icon filenames appear exactly as Apple requires. Keep checking the documentation to make sure you're up-to-date, but Dondragmer's recommendation looks correct to me.
I created all my image resources, including app icons, in Photoshop, exporting for web as PNG-24's. Because Pillboxie has numerous images, setting "Compress png's" to YES in the build settings helps me save several megabytes of space. I was getting the same error as you until I tried turning off this compression, as Evaristoyok suggests. However, my app jumped up several mb. I hoped to find a better way.
Tonight I found the following link: article. In it the author suggests to make sure that "Interlaced" is NOT selected in Photoshop when exporting images in the Save For Web & Devices dialog window. I re-exported all icon and launch images with this disabled, and it solved my issue. I was able to submit my app and still leave png compression enabled.