The Mugen Fighters Guild

Help => Development Help => Tips, Tricks, Tutorials => Topic started by: Realra on June 01, 2017, 03:35:28 PM

Title: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: Realra on June 01, 2017, 03:35:28 PM
Want to make high res effects but don't have the patience to go through and make them all? Then this tutorial is for you. I'll show you how to automate the whole process.

Things you will need:
Photoshop (https://helpx.adobe.com/creative-suite/kb/cs2-product-downloads.html?promoid=19SCDRQK#) (You can get Photoshop CS2 off of adobe's website for FREE! Just make an account on their website!)
My Photoshop Action Files (https://www.mediafire.com/folder/435lhxl7rzag6/Effects) (Includes a 1x, 2x, and 4x version.)
Fighter Factory 3 (http://mugenguild.com/forum/topics/fighter-factory-3-0-1-final-137126.0.html)
Character Sprites (Duh)
Patience
A Brain (http://i.imgur.com/sFoRyRh.png) (Optional)


Step 1 (Setup):
Once you have the action files, open up Photoshop (it'll ask you to register if you have CS2, just click Do Not Register) and press Alt-F9 on your keyboard to open up the actions window.
(https://image.prntscr.com/image/af128162d10a47c3974379f1bdbba6ec.png)
Click the little arrow, it will bring up a menu.
(https://image.prntscr.com/image/cf44b3a32f85485e97e5c6b0a4d8f0fa.png)
Click Load Actions... and locate your action file (I'm going to load my 2x action file) You should now have this:
(https://image.prntscr.com/image/db47c7faa7f74c7796d6a2f5818c8009.png)


Step 2 (Preparing Images):
Open up your character in Fighter Factory 3 and export their sprites (you can either choose to export all the sprites or just the ones you need. I tend to export all the sprites so I can get all the effects exported very quickly)

(I'm using Momoko as an example. She is so very happy to get some effects high-res'ed)
Spoiler (click to show)
(https://image.prntscr.com/image/ee2e5c43ef7f45c982cddc6320115b1c.png)

Make sure each effect color is in a separate folder with a new folder to put the exported effects in. (Momoko only has one effect color and its pink so I only need one folder to put them in.)
Spoiler (click to show)
(https://image.prntscr.com/image/027e3eca42e844869089b89d738bedba.png)


Step 3 (The Fun Part!):
Open Photoshop up again. Click File, Automate, and then Batch.
Spoiler (click to show)
(https://image.prntscr.com/image/132b9dfda34549e193f0d87d79efb8d5.png)
In the Batch window there are a few options.
Set: This specifies the bank of actions you want to use. You can set this to Effects 1x, Effects 2x, or Effects 4x.
Action: This specifies the action you want to use. Set it to the color of the effect you want to convert.
Spoiler (click to show)
(https://image.prntscr.com/image/aaac3076dd894b4fbdac04369a073222.png)
Under "Source" make sure it is set to folder, and click Choose.. and locate your folder of effects. Same goes for Destination except this will be where your effects go.
Then click OK and watch as Photoshop opens the files and converts them at blinding speed!
(Warning! Not actually blinding, your eyes are safe.)


Step 4 (Profit :D):
Spoiler (click to show)

1x Example
(http://i.imgur.com/Q7W505r.png)
4x Example
(http://i.imgur.com/jUDmsUK.png)
Hope this helps some people out!
Title: Re: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: BurningSoul on June 01, 2017, 04:11:44 PM
Interesting I will try this
Title: Re: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: 2Dee4ever on June 02, 2017, 04:05:51 AM
I'm going to pass this around, thanks. Would this work for like, Pyron? I always wanted to see how he'd look.
Nope, I'll have to figure out a way to get that done.
Title: Re: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: SOLIDUS SNAKE on June 02, 2017, 05:49:26 AM
I got another one for my personal mugen vault. Thanks my man, will help many in the community very much.
Title: Re: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: The4ury on June 03, 2017, 11:28:02 AM
QuoteMy Photoshop Action Files

Are these necessary? it seems like your effects are using simple blurs in Photoshop? e.g. Blur, Gaussian blur

The tutorial is great for people who didn't know about this.

I just want to say. learn what he's actually doing and not copy the tutorial exactly, because the possibilities are almost endless. You can make really good effects like this with hardly any effort and time.
Title: Re: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: Realra on June 03, 2017, 07:05:18 PM
Quote from: The4ury on June 03, 2017, 11:28:02 AM
QuoteMy Photoshop Action Files

Are these necessary? it seems like your effects are using simple blurs in Photoshop? e.g. Blur, Gaussian blur

The tutorial is great for people who didn't know about this.

I just want to say. learn what he's actually doing and not copy the tutorial exactly, because the possibilities are almost endless. You can make really good effects like this with hardly any effort and time.

The idea was to make it effortless. If you don't have the action files you won't be able to automate the process. They are open source of course. I don't believe they are the best methods to create high resolution effects. In fact I'm always looking for ways to make the effects look better. The idea of these was a focus on time. But if you want to make your own automated process with different blurs or other effects you can use my action files as a template.
Title: Re: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: SOLIDUS SNAKE on June 04, 2017, 04:46:29 AM
I think your process is simple and straight to the point. Like me, I don't have time for fancy resolutions. I just want my stuff to be awesome and simple. Thanks again for taking your time, to contribute your knowledge for this.
Title: Re: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: Realra on June 04, 2017, 05:37:05 PM
Thank you Big Boss. Means a lot to me. :)
Title: Re: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: Sir Ghostler on June 09, 2017, 01:15:08 PM
This is a really neat tool! I ran into some trouble using it however. When the images are exported, the transparency color isn't set correctly.

(http://i.imgur.com/LdEJtwE.png)
(http://i.imgur.com/xsIH3VJ.png)

I tried with all size and multiple color settings, they all suffer this problem.
Title: Re: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: The4ury on June 09, 2017, 01:55:58 PM
Quote from: ゴーストキラー on June 09, 2017, 01:15:08 PM
This is a really neat tool! I ran into some trouble using it however. When the images are exported, the transparency color isn't set correctly.

(http://i.imgur.com/LdEJtwE.png)
(http://i.imgur.com/xsIH3VJ.png)

I tried with all size and multiple color settings, they all suffer this problem.

Set your background colour to black. #000000.

Try if that helps.
Title: Re: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: Sir Ghostler on June 09, 2017, 02:16:15 PM
Just tried it, this was the result.

(http://i.imgur.com/6z4olsD.png)

Title: Re: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: Realra on June 09, 2017, 02:32:49 PM
Quote from: ゴーストキラー on June 09, 2017, 02:16:15 PM
Just tried it, this was the result.
(http://i.imgur.com/6z4olsD.png)

1. Were there any stray pixels at the edge of the image?
2. What version of Photoshop are you using? (It would be good for me to know if there are compatibility issues between different versions of Photoshop.)
3. Have you gotten the same issues with other sprites?
Title: Re: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: The4ury on June 09, 2017, 02:42:48 PM
Quote from: ゴーストキラー on June 09, 2017, 02:16:15 PM
Just tried it, this was the result.

(http://i.imgur.com/6z4olsD.png)



Did you increase canvas size?

increase it by 200 percent.
Title: Re: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: Sir Ghostler on June 09, 2017, 03:28:58 PM
Quote from: Realra on June 09, 2017, 02:32:49 PM
Quote from: ゴーストキラー on June 09, 2017, 02:16:15 PM
Just tried it, this was the result.
(http://i.imgur.com/6z4olsD.png)

1. Were there any stray pixels at the edge of the image?
2. What version of Photoshop are you using? (It would be good for me to know if there are compatibility issues between different versions of Photoshop.)
3. Have you gotten the same issues with other sprites?

1. Nope. The images were completely clean.
2. CS6.
3. Yes. I tried with multiple animations and the issue persisted.

I have no idea why, but after retrying a bunch more times with the batching it seems to be working fine now, with the same images from before. Tried it on more stuff and it also converts them correctly. I'm baffled but happy, lol.

Thanks for the help, guys.
Title: Re: High-Res Effects in the Blink of an Eye! [Photoshop]
Post by: Realra on June 09, 2017, 04:21:44 PM
Quote from: ゴーストキラー on June 09, 2017, 03:28:58 PM
Stuff

That is very unusual. Well I'm glad it worked out! You are welcome.