Fractal Softworks Forum

Please login or register.

Login with username, password and session length
Advanced search  

News:

Starsector 0.97a is out! (02/02/24); New blog post: Simulator Enhancements (03/13/24)

Author Topic: Yet another ship (sprite) creation tutorial  (Read 11857 times)

ORMtnMan

  • Commander
  • ***
  • Posts: 148
    • View Profile
Yet another ship (sprite) creation tutorial
« on: September 11, 2014, 10:23:18 AM »

PART ONE
Just for clarification, I am using the GIMP program, so any terminology I use is from that. I have not had much time using other similar programs (like Photoshop) so I don't know how interchangeable the terms are.

GIMP is free and can be found here: http://www.gimp.org/

If you have any questions or need clarification on steps, feel free to message me or respond to the post

Step one: Create an outline of the ship

First, create the basic outline of the ship being designed. For my demonstration I am using a re-work of my Aegis Fleet Defender.



This is the basic outline for the major parts of the ship only. Do not get too detailed at this point, the details and doodads will be added later.

Step two: Basic Color

Next I use the color bucket to add general colors to the various sections to help me distinguish the parts.
I leave the turret spots blank and transparent as I will be copy pasting turret spots from SS ships later on. If you don’t want to create your own turret spots, leave them blank as well.



I move the colors to another layer by copying the current layer combined layer and deleting the colors from one.

Then, on the new color layer I fill in the black lines with the dominant (higher on the ship) color



The separate layer allows me to add transparency to the outlines which will be described later.

PART TWO

Step one: Structural Details

Now, on the outline layer add structural details and doodads. Do not worry about texture or color details yet.



Solid black lines don't look very good on SS sprites.

To fix this, set the opacity of the black line layer to about 60%, then merge it down into the color layer. That way the black lines instead become grey colored lines. Keep in mind however, when the transparent layer is merged down, the lines will still be grey. This will not look very good in non white/grey sections.

To remedy this, use the paintbrush tool using a darker version of the color in question and lightly paint over the dark lines.
PLEASE NOTE! You will want to make any color changes now as it will only get harder later on.

Step two: Anti-aliasing

After the layers are merged, use the anti-alias tool to soften the jaggy edge lines. The anti-alias tool requires solid color on one side of a line or the other to work (no transparency). The anti-alias tool is found in the filters dropdown.

Please note that the anti-alias tool is a very blunt instrument, you will have to go back through and fix little issues manually. For instance it will round out corners of boxes you may want to keep sharp. Also, it will not AA the outside edges. So this is where the tedium of AA comes in. Use the venerable eraser method. The eraser method entails making a solid pixel on the outside edge corner (that you want to soften), then use the eraser tool and hover over a fraction of the pixel and "erase" it. This adds transparency to the pixel. (I do not have good screen capture abilities so if anyone wants to donate actual process pictures please do.)

Here is the result of my anti-aliasing. (It looks a lot better than the solid black line version)



I also modified the colors to be closer to what I want the end product to be.

Step three: Structural shading

Now, create a layer called the shading layer. Separate the layers just in case you want to change colors during the rest of the process. Set the opacity of the shading layer to about 75% and use the airbrush tool with black for the shadows and to give the sprite depth. This is because as things are shadowed, they lose saturation and the black airbrush simulates this. The same thing happens in the light areas, so my next step will be to use a white air brush on the light areas.

The more detailed shading and gribbles will come later, this is only the overlay.

I changed the blue again to be a bit darker, and rearranged the engine section for a newer idea I had... These kinds of changes happen during the creative process. So, don’t be overly attached to any one shape.



Add the lightened sections using the white airbrush. Make this a subtle change as you don’t want to make this ship shiny, especially in “painted” sections like stripes etc. SS sprites tend not to be shiny, so to keep in the same vein, keep it relatively dull.

I darkened the color/line layer as it was too bright overall.



Right now it may still look like crap, but do not be discouraged (I'm not) as it will look better when details are added.

PART THREE

Step one: Shading details and smaller additional details

Now, make a first pass at details using a combination of the paint brush, black airbrush and colorization. Don’t make internal lines darker than the outlines, these details will be to personal taste so experiment and don’t be afraid to change things if they don’t look right. If you lack inspiration (or if you just want to keep your ships in line with SS ships, use them as references for the details.

Here is the result of my first pass. Definitely better than the previous version but still needs more work. I used the Eagle as a reference for the details I added.



Step two: Color details

On a second pass, add color layers with transparency to colorize sections. I select the sections using the free select tool.
Then fill in the section with white using the paint bucket.

Finally, use the colorize function to colorize it.

 This adds variety in color which makes the ship look more “real” (or at least fit in with SS ships).  This is also to personal taste so experiment and feel free to change. I used multiple color layers in this section for the different colors to make it easy to change.

Step three: Lights/windows

To add lights and windows use a white pencil to make the center of the light or window.

Then, on a new layer with transparency use the airbrush to give the light color and a bit of radiance. I set the size of the airbrush to 2 for the radiance. Then clean up the light with the eraser tool. For instance in the bridge windows I erased the upper parts of the light to give the impression the light is radiating out the window and not up the wall above it.

I upped the contrast for my own taste here.

Step four: Adding in the turrets

If you, made your own turret spots ignore this step (obviously)
Throughout this whole process I kept the turret spots empty so I could cleanly add them later. I add a layer to the very bottom and copy paste turret points from SS ships so they fit into the open spots.

Here is the result:


« Last Edit: September 11, 2014, 10:27:35 AM by ORMtnMan »
Logged
Creator and lord of The Ashkurr Commonwealth

Sprite artist and designer for Naysmyth Armouries

xlandar

  • Ensign
  • *
  • Posts: 21
    • View Profile
Re: Yet another ship (sprite) creation tutorial
« Reply #1 on: September 11, 2014, 09:54:52 PM »

Thank you for making this! i'm going to try and make a ship following your tutorial, let's see how it goes!
Logged

ORMtnMan

  • Commander
  • ***
  • Posts: 148
    • View Profile
Re: Yet another ship (sprite) creation tutorial
« Reply #2 on: September 11, 2014, 09:59:47 PM »

Go for it!

I'm excited to see the result. if you have any questions feel free to ask.
Logged
Creator and lord of The Ashkurr Commonwealth

Sprite artist and designer for Naysmyth Armouries

joe130794

  • Commander
  • ***
  • Posts: 226
    • View Profile
Re: Yet another ship (sprite) creation tutorial
« Reply #3 on: February 01, 2015, 01:43:02 PM »

is it possible to have a mirror line down the middle to save doing both sides seperately??
Logged

Protonus

  • Captain
  • ****
  • Posts: 444
  • AAAAAAAAAAAA
    • View Profile
Re: Yet another ship (sprite) creation tutorial
« Reply #4 on: February 01, 2015, 07:23:48 PM »

It is possible, to save the extra time with the detailing and shading. Mirroring one side of the ship can produce the latter side, but removes some sort of uniqueness in it.

I'm trying on it right now, though.  ;D
Logged

The cookies are a weird one, okay.

WKOB

  • Admiral
  • *****
  • Posts: 732
  • Odobenidine Benefactor
    • View Profile
Re: Yet another ship (sprite) creation tutorial
« Reply #5 on: February 01, 2015, 11:53:32 PM »

Interesting process, seems simple but solid. I'll give it a shot.
Logged

joe130794

  • Commander
  • ***
  • Posts: 226
    • View Profile
Re: Yet another ship (sprite) creation tutorial
« Reply #6 on: February 02, 2015, 03:26:29 AM »

i'm getting into spriting and it seems like a good tool i just didnt know how to mirror what i have already done. think i figured it out now. select what you want to copy, copy and paste, flip it and then move it carefully to where you want it.
Logged

Re-bot

  • Ensign
  • *
  • Posts: 3
    • View Profile
Re: Yet another ship (sprite) creation tutorial
« Reply #7 on: January 17, 2019, 03:06:30 PM »

GIMP's mirror mode can be found under Windows-Dockable Dialogs- Symmetry painting (has a butterfly)

Once your click on it you can set up your mirror axis in the box at the top left.

I Hope this solves mirroring for ya

-Rebot
Logged
I may be insane but, I don't mind it to much.