Fractal Softworks Forum
Starsector => Mods => Modding Resources => Topic started by: WarStalkeR on August 21, 2012, 03:15:04 AM
-
Before we start, we need couple of things:
1) Photoshop CS5 - I prefer it, because of amount of tools and features.
2) Imagination - You need at least and idea, what do you want to create and how it should look.
3) Patience - You will need a lot of this. And remember the bigger ship, the more time it takes.
As example, I will use IDF Frigate "Hesed", it takes for me about 15~19 layers per ship.
01. Let's start from sketch, or rather I call it Design Layer:
(http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_00.jpg)
Bear in mind, when you're creating design, you must plan ahead, where you will place turrets, engines, hardpoints, hangars and windows.
First you make approximate sketch of how ship should look. Then you refine it, until you look satisfied. And after that you start add some basic details, that will give this ship basic form.
02. Next thing we need to do is to fill empty space between ships lines, I call it Filling Layer:
(http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_00.jpg) + (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_01.jpg) = (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_02.jpg)
In my case I used gradient tool in Photoshop, but it can be anything, monotonic color, texture & etc. Depends on how you want your ship to look: metallic, bionic & etc.
03. It's important to make ship look more or less seamless, thus I use here Outline Layer:
(http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_02.jpg) + (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_03.jpg) = (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_04.jpg)
In my case I just copied Design Layer, changed it's color in to monotonic Dark Grey, added 50% opacity Outer Glow property of same color with 1 pixels size, then flattened it and removed outer glow part, that passes over original Design Layer. Now we got more or less harmonic ship sprite.
04. If you think that current ship sprite is too bright or too dark, you can add Tone Layer to help with that:
(http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_04.jpg) + (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_05.jpg) = (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_06.jpg)
For me ship was too bright, and thus I fixed it by adding 30% opacity layer with black color.
05. Now its time to give to sprite more realistic looks, it will benefit you in future, in other words Shadows Layer:
(http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_06.jpg) + (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_07.jpg) = (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_08.jpg)
Almost same as Tone Layer, except that you black out only parts of ship that should be more dark due the shadows. I used black color layer with 30% opacity here.
06. So far it looks good enough, but because ship now colorless, it's kinda depressing, so we fix it with Overlay Layer:
(http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_08.jpg) + (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_09.jpg) = (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_10.jpg)
I just took some camouflage texture, cut it to have for of the ship and then turned whole layer in to Overlay Mode with Photoshop. If ship turns out to be too bright or too dark you can change opacity of Tone Layer to fix it.
07. Sometimes Overlay Layer obscures original outlines, thus making it less detailed and this why I use Overline Layer:
(http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_10.jpg) + (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_11.jpg) = (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_12.jpg)
Here I used 30% opacity of main ship's color, for me it was dark green. My opinion that it made ship more detailed.
08. Now we start to add decorations to ship to make it look like a real one. Decorations can consist from multiple Decoration Layers:
(http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_12.jpg) + (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_13.jpg) + (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_14.jpg) + (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_15.jpg) = (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_16.jpg)
I used 3 layers for decorations: windows, lights and danger lines. But it can be anything.
09. Next layer I used to give ship more realistic looks and I called it Plating Layer:
(http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_16.jpg) => (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_17.jpg)
In my case it was dark lines with bright 1 pixel outline. It can symmetric or asymmetric, it can be just dark lines, or lines with pixels that represent rivets, flexible alien alloys & etc. Bear in mind, when you creating Plating Layer it must be in harmony with already predefined hangars, turrets & hardpoints layer, that will be above it. I was satisfied with my IDF Frigate "Hesed" final look :)
10. Now it's time to add to your ship unique sign of you race or civilization, it's called Insignia Layer:
(http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_17.jpg) => (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_18.jpg)
Just place you sign whatever you like, so everybody could see it. Better to place it where it won't be obscured by turret or something else.
11. And the last one set of layers are Equipment Layers:
(http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_18.jpg) => (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_19.jpg) => (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_20.jpg) => (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_21.jpg)
For me it took 3 layers, one for engines, one for external decorations and one for turrets and hardpoints.
P.S. This is actually first spaceship sprite I ever created from zero, just from my own imagination. I hope it will help other people who want and don't know where to start as it helped me :)
-
Nice, Thank you :)
-
Excellent! Now my onl problem is actually getting that pesky Design layer. Very hard to make on a computer. >_<
-
Nice guide!
if you could change it into one picture (no text)
i will place it on the spriters thread!
-
Excellent! Now my onl problem is actually getting that pesky Design layer. Very hard to make on a computer. >_<
It's actually not that hard, I first like though like this :) But then pixel by pixel I started to draw form, when I didn't liked something, I was removing and remaking parts until I was getting satisfying form :)
-
Well, now that I've found out how to do that using my old kitbashed ships, I'm turing quiet a profit. :) Made two fighters in the space of ten minutes, and both look great! I thank you once again for this.
-
Well, now that I've found out how to do that using my old kitbashed ships, I'm turing quiet a profit. :) Made two fighters in the space of ten minutes, and both look great! I thank you once again for this.
Can you post your work? I interested to see it :)
-
Sure. :)
Starting out with fighter sprites, since I have nothing else at the moment.
[attachment deleted by admin]
-
02. Next thing we need to do is to fill empty space between ships lines, I call it Filling Layer:
(http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_00.jpg) + (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_01.jpg) = (http://i1223.photobucket.com/albums/dd518/WarStalkeR/ShipTut/idf_frigate_tut_02.jpg)
In my case I used gradient tool in Photoshop, but it can be anything, monotonic color, texture & etc. Depends on how you want your ship to look: metallic, bionic & etc.
Is the gradient there a transparency one or solid colour?
-
How I did it, it was a solid color.
-
Is the gradient there a transparency one or solid colour?
Well, I was selecting empty space between lines with Magic Wand and then feeling it on another layer using Gradient Tool with 2 colors: Dark Grey and Light Grey.
-
This is one of the most detailed tutorials on spaceship spriting I've seen yet. Very nice work.
-
This is one of the most detailed tutorials on spaceship spriting I've seen yet. Very nice work.
which makes it harder for me to add it to my thread ;D
got to do it with screenshots.... (stupid max symbols...)
-
Added your guide to the guide list ;D
(hope you dont mind.. if you do just pm me)
-
HappyFace: If you're trying to copy someone's post, the easiest thing to do is to click "Quote." Then you can copy and paste the BBCode they used to create the post, and cancel your new post after copying.
I hope you're not trying to reproduce it all from scratch... because that would be error-prone and time-consuming.
-
HappyFace: If you're trying to copy someone's post, the easiest thing to do is to click "Quote." Then you can copy and paste the BBCode they used to create the post, and cancel your new post after copying.
I hope you're not trying to reproduce it all from scratch... because that would be error-prone and time-consuming.
ehm well, this way it takes up as much symbols as it would in the original code post doesnt it?
in that case i cant since i am almost at my max and i forgot to reserve.
what i did was making screen shots, combined them and uploaded those.
-
This is one of the most detailed tutorials on spaceship spriting I've seen yet. Very nice work.
Thank you :) After looking for a hours at Okim's sprites I understood that I desperately need to create unique style for IDF ships. Then I got an idea and decided to test it. After finishing work on IDF Frigate, I understood how to draw ships from scratch in simple and stylish way. After finishing more IDF ships, I decided to share this way of making sprites with everybody who willing to make ships with their own unique style from scratch, but don't know where to start :)
Now only left for me to learn how to draw people, both in normal style and anime style :) If somebody knows simple yet effective way to draw them, please share :)
-
Now only left for me to learn how to draw people, both in normal style and anime style :) If somebody knows simple yet effective way to draw them, please share :)
well....
I do some drawing in my free time. not anime but more like realistic cartoon.
There is not really a way of drawing people easily just like drawing sprites.
it takes practise , coffee and more practise.
to start ,the best thing is to check out people that surround you and try drawing them.
make sketches on how they sit, walk and do other stuff
and just keep on practising.
if you dont like to practise drawing for example anime.
there are a lot of bases on the internet which you just need to give hair, eyes, cloth etc.
-
There is not really a way of drawing people easily just like drawing sprites.
Well, I already know what I need to make my anime style drawing learning curve easier:
1) Wacom Cintiq 24HD (http://www.wacom.com/en/products/cintiq/cintiq24hd.aspx)
2) Adobe Photoshop (http://www.adobe.com/products/photoshop.html) & Manga Studio (http://manga.smithmicro.com/)
3) Mastering Manga with Mark Crilley (http://www.amazon.com/Mastering-Manga-Mark-Crilley-drawing/dp/1440309310)
4) Money...
5) Guts!
-
Drawing faces: use a reference, but turn it upside-down. Your brain's face-recognition and general pattern-recognition algorithms mess things up.
For anime faces and bodies, or without a reference, one very common thing I've seen is to use poseable wooden figurine, with reference lines drawn on the head to subdivide into the appropriate segments to get the placement, and then adjust/fill in your particular desired stylistic embellishments (or super-deformed body part ratios).
-
Photoshop CS5 doesent work on wins 7 :(
anything els good to do this ??
-
Eh yes it does o_O I am working with it right now.
-
Photoshop CS5 doesent work on wins 7 :(
anything els good to do this ??
adobe also has a program designed for drawing (instead of changing photos)
i heard good things about it. i just cant remember the name though.
-
Eh photoshop IS for drawing, not just for changing photos. It perhaps one of the most powerful drawing programs out there.
Or do you mean Illustrator? That is used for vector based drawings not pixel based one.
-
well photoshop is used for editing photo's, its design is for that although it is also good for drawing
the main sites says :" What is the Photoshop family?
The Adobe® Photoshop® family of products is the ultimate playground for bringing out the best in your digital images, transforming them into anything you can imagine, and showcasing them in extraordinary ways."
hmm i see it might have been illustrator.
i never used it personally ,just heared it was a very usefull program for creating drawings digitally and for digitalizing handdrawn pictures.
she studies art school and says she finds the program more usefull than photoshop for drawing.
-
Thats what I am saying: Photoshop is the best tool of the Adobe family for pixel based images, which are ~90% of all digital images used in games etc.
Illustrator uses vector algorithms in order to render vector based images, which then can be scaled up or down to any size without losing any image informations.
So yes if you do illustrations for lets say magazines, Illustrator is your tool of choice.
-
hmm i see.
thanks ^^
-
Ok so i got it to work on wins 7 but now ... i want to do some ships but its the 1st time im using photoshop
I dunno how to start !?
I have some ideas on which ships i would do but it seems soooooooooooo much of hard work that i just crumble and give it all up. But i still have somekind of will otherwise i wouldnt be writing this right now. So can someone point me to a quick tutorial or give me some tips ???
-
Sure ^^
First off: click the brush tool(p) and hold the left mouse button, you can switch the tool now.
Select the pencil tool and create a new "canvas", right click inside the canvas and switch to tools-tip-size to 1px.
Now hit: ctr+alt+n, this will create a new layer.
And you are ready to make your first few pixel drawings, if you need more help just ask ^^
-
Ok so i got it to work on wins 7 but now ... i want to do some ships but its the 1st time im using photoshop
I dunno how to start !?
I have some ideas on which ships i would do but it seems soooooooooooo much of hard work that i just crumble and give it all up. But i still have somekind of will otherwise i wouldnt be writing this right now. So can someone point me to a quick tutorial or give me some tips ???
First advice - arm yourself with patience :)
Second advice - dont give up :)
Third advice - very usefull topic on spriting. (http://fractalsoftworks.com/forum/index.php?topic=3342.0)
-
if you are to lazy to learn photoshop, paint.net is also a really usefull tool for pixel art and i found it much easier to learn.
paint.net is free software