Page 1 of 2

[Tutorials] Creating Shield Images (Written & Video)

Posted: Sun Sep 29, 2013 6:00 am
by NewAgeOfPower
Below are some tutorials in GIMP.

KartoFlane's Photoshop tutorial is right below.

A quick GIMP tutorial video is shown here, done by Ultramantis.

And Kiloace's written GIMP tutorial is here.

Re: Creating Shield Images

Posted: Sun Sep 29, 2013 2:26 pm
by UltraMantis
I'm no expert on shields. Maybe start with an ellipse or circle then try to make a selection of it transparent. There is a way to "feather" or whatever it's called a transparency, which makes the transition between transparent and non-transparent smooth. Normal FTL shields hide the inner part of the elipse to make the ship visible.

I'm pretty sure GIMP is capable of this and it's free.

Re: Creating Shield Images

Posted: Sun Sep 29, 2013 4:35 pm
by kartoFlane
No idea how to do this in Gimp, but in Photoshop I do it like this:

  1. Create a new layer with a perfect circle - the initial shape of your shield (you'll resize it later)
  2. Create a new layer and ctrl+click on the thumbnail of the shape layer to select the shield's shape
  3. Select the gradient tool and switch it to radial gradient, set it to create a color-to-transparent gradient
  4. Beginning in the dead center, drag the mouse to the rim of selection, then release mouse button - that'll fill the area with radial gradient
  5. Ctrl+click on the thumbnail of the gradient layer to select the gradient's shape
  6. Select the shield layer, press Delete - ctrl+D to deselect - hide the gradient layer. Your shield should now have a neat "feathered" hole in the center.
  7. Copy the shield layer to have it stashed and ready in case things go bad
  8. Ctrl+T to freely transform/resize the shield shape to have it fit your ship

Re: Creating Shield Images

Posted: Mon Sep 30, 2013 12:16 am
by speedoflight
Or you could use just a thousand of filters that are available for photoshop / gimp or watever. You only need to copy a shield from the vanilla ships, and modify it as you wish. Dont even try to create the shield itself from the beginning, since it will consume you a lot of time and there is no need of that, just copy the shield from the vanilla ships. . then , change the color, apply some filters, etc.Some filters of photoshop can produce great effects, and other external plugins like the DreamSuite can achieve interesting effects as well.

Re: Creating Shield Images

Posted: Mon Sep 30, 2013 6:44 am
by UltraMantis
Why not learn? Learning how to use "feathered" transparencies comes in handy when you add room glow images. There's plenty of potential to get createive there. ;)

Re: Creating Shield Images

Posted: Mon Sep 30, 2013 10:08 am
by kartoFlane
It's not even close to the amount of work you think it is - the operation I described above takes less than half a minute for someone with experience ;)

That said, yes, copying a shield from game's files is easier, and you can resize/recolor it as you see fit.

However, there are things to consider:
Resizing it will result in loss of sharpness/detail due to low resolution, depending on whether you shrink or stretch the image - some people may want something of quality for their ship.
Also, the vanilla images have a pattern of hexes - some people may not want that, or have their shield have a different pattern.

Both methods differ in difficulty and have different results, but there is no need to outright discredit one or the other, simply because you don't like it :)

Re: Creating Shield Images

Posted: Mon Sep 30, 2013 12:59 pm
by UltraMantis
How clusmy can a shield image making tutorial be? Not too clumsy really. And yes, it really takes only a few minutes. ;)
http://www.twitch.tv/frumple1/b/466220825

Re: Creating Shield Images

Posted: Tue Oct 08, 2013 4:34 pm
by Kiloace
Here's how I do it:

1. Load your ship chassis in GIMP (the base model)
2. Copy the image into a new file (select all -> paste as -> new image. It shouldn't be a problem to select the whole image, as the surroundings should be transparent.)
3. Save the new image as a shield file (might as well start now, eh?) and create a new (transparent) layer atop the layer with the ship image. It should be pretty much exactly the same size.
4. Cover the new transparent layer using the ellipse-select tool. The tool should consist of a rectangle with an ellipse inside. Drag the corners of the rectangle to the very edges of the layer, and this should shape the ellipse accordingly.
5. Create a new gradient using the gradients dialogue. (If you want, you can extract one of the original shield images from the resource.dat file, load it in gimp, and use the color picker tool). The left side of the gradient should be completely transparent (made possible by using the alpha slider) and the other side should be the color you want for the shield, with maybe a small amount of alpha.**
6. Hopefully you still have the ellipse selection (it should remain as long as you don't make another selection). Click on the "Blend" tool and load your gradient. Change the pattern style to "shaped (spherical)."
7. Drag the blend tool over the selected area. Hopefully, the effect will resemble the shields in-game (color on the outside, fading to transparent on the inside). You might need to reblend it once or twice (for me, 20,000 times lol) to get a desirable configuration. If it appears inside out, you need to flip the gradient accordingly, but it should work. If it fills the whole image instead of the ellipse, you'll probably need to reselect.

You can use the ship image we uploaded before to see how the shield fits on the ship beforehand. If its too small, you need to make the dimensions of the shield layer bigger, and vice versa.

Long tutorial but hope this helps. :D

Re: Creating Shield Images

Posted: Wed Oct 09, 2013 1:09 am
by NewAgeOfPower
Thanks for the replies, guys. Can we get this added to the modding tutorials section?

@Ultramantis- Where are you from? I can't place that accent of yours.

@Kilo- Pretty good with the details there. How do you get the ellipse centered on your ship? Or do you just use trial and error?

Re: [Tutorials] Creating Shield Images (Written & Video)

Posted: Wed Oct 09, 2013 2:02 pm
by kartoFlane
Ellipse/shield is always centered at the smallest rectangle that wraps all of the rooms of yuor ship; say you have a room layout like this:

Code: Select all

// x - room tiles //
xx x
 xxxx
 x  xxx

Then the bounding rectangle looks like this:

Code: Select all

// x - room tiles //
 _______
|xx x   |
| xxXx  |
|_x__xxx|

The big X is roughly where the ellipse/shield would be centered in such a layout. Then in .txt file under ELLIPSE, the two latter values specify the offset from that location, so you can fine tune your shield to cover up your ship nicely.