Jump to content

{TUTORIAL + TEMPLATES} How To Mimic Don't Starve Together's Big Portrait Style


Recommended Posts

Hello, all! I'm Fid and I've figured out a way to replicate the Don't Starve Together big portrait style that is so simple that even someone like me who does not know how to make art can do it!
I had made a tutorial on how to do this long ago but at the time I was not doing it correctly nor did I explain it all very well... TBH, I'd rather that thread just die in a fire and this one take its place! :)

I'm going to show you how to turn this:

Spoiler


old DS version.png

Into these:

Spoiler


step 7 darkened name.png
step 5 skin portrait.png
step 6.4 name applied.png

 

Step 1: Getting rid of the banner (If you are starting from scratch and don't have a DS version of the big portrait with a banner then skip to step 2)

Spoiler


Starting out with your good old DS version background, eh? Welp, if you stuck to that style you most likely have a banner and possibly a glow behind your character or something of that caliber. Your goal is to just go through and remove as much of it as possible! Like so:
step 1 example.png

 

Step 2: Adjusting Saturation (If you already drew your character's big portrait art in a greyscaled colortone then go ahead and skip to step 3)

Spoiler


If you notice... The big portraits in DST have less color in them than the ones in DS! I've figured out a way to mimic that decolorization pretty well by unsaturating the image! c:
If your image editing software has the ability to adjust the saturation please set the saturation to negative forty to properly mimic the greyscaled colors of the DST big portraits! Example:
step 2 example.png 

 

Step 3: The paper cut-out effect

Spoiler


Another thing different between DS portraits and DST portraits are the "paper cut-out" effect which makes it look like your character was on a piece of paper, got cut out, and was placed on a cool background.
There are a few ways to achieve this that I know of and I'll go over each one!

1: copy the image, paste it on a new layer, change the entire color of the art on the new layer to a grey color leaving you with a grey shape, move the layer behind the original layer, and deform/move it around until it's sticking out from behind the character art.
Pros: very quick
Cons: Does not give a lot of control and 90% of the time it'll end up only sticking out too far or only stick out in 1 direction. You can repeat the same process twice and move 1 layer to the lower right and the 2nd layer to the upper left to try and cover all edges though.

2: Take your paint brush or pencil tool (whatever you use to draw/color), select a grey color, create a new layer, set it behind your character's art, and start drawing around the edges of your character.
Pros: Gives a lot of control
Cons: Takes forever >.<

Example of what you want to achieve:
step 3 paper cutout.png
(I kinda used the first example of how to do this so it doesn't look as good as it could... :c)

 

Step 4: Applying the background

Spoiler


Now we are on to plopping on that coolio background!.... But wait... How does one get this background? Worry not! I've got ya'll covered with a few templates!

Spoiler


Original:
portrait background template original.png
CREDIT FOR THIS FIRST TEMPLATE GOES TO THIS THREAD: 

The rest of these were edits off of the original! Said edits were made by me! ^-^
Cloudy:
portrait background template cloudy.png
Spring:
portrait background template spring.png
Full Moon:
portrait background template fullmoon.png

Now all you gotta do is simply paste your character art onto the background! Just like this:
step 4 background.png

 

Step 5: The "skin" portrait

Spoiler


Leave your big portrait the way it is for now because we have to do a few other things first. (It is of GREAT importance that you keep the layers of your art and the background separate when you leave it. Save the project file if you're closing it.)

Some of you may be wondering what a "skin" portrait is or rather thinking "But... Mods don't have skins!". Well, mods technically do have skins! The default one! and the "skin" portrait is there to match the art of your currently equipped skin!... Which is the default one...

Anyways, this is basically a repeat of Step 4 but with a different background shape! :p
Templates:

Spoiler

I made all of these templates on my own! (the original got a little bit of help from the original background template though...)
Original:
skin portrait template original.png
Cloudy:
skin portrait template cloudy.png
Spring:
skin portrait template spring.png
Full Moon:
skin portrait template full moon.png

Skin backgrounds: (I reconstructed these to the best of my ability)

 

 

 

Guest of Honor:
none.png

Survivor:
none.png

Triumphant:
none.png

 

 

Example:
step 5 skin portrait.png

 

Step 6: Creating and applying the name

Spoiler


This step itself will require a few steps of its own! But do not worry, we're almost finished!

Step 6.1: Laying out the name

Spoiler

Your first step in creating the name in the DST style is setting the name up like so:
step 6.1 layed out name.png
"But Fid" you say... "How do I use this font?"
Well there 2 easy ways to do it without having to draw all your own and I'll go over each and their pros and cons

Using a letter template:
DST Letter template.png
Template made by @Dudedude
(still need a zero to nine template >.>)
Using this template all you have to do is copy/paste each of the needed letters into a new transparent image as new layers (separate layers for each letter are needed to make the next step easier)
Pros: quick, simple, effective
Cons: makes you look silly? idk... I can't see any cons here... *shrugs*

Using a DST font:
There are 2 fonts that have this DST style about them
The first:

Download here.

LEGAL INFORMATION:

THIS SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

Made by Klei! (Thank you, @Kzisor for providing the link)

The second:
http://mf99k.deviantart.com/art/Font-Forbidden-Knowledge-571349611
Made by @mf99k
Pros: You now have the DST font in all/most of your programs...
Cons: The next step becomes incredibly difficult and it takes a bunch of time to replicate the color/noise of other big portraits' names using this method.

Step 6.2: Making the text inconsistent

Spoiler


If you followed the first method and now have each letter on a different layer you can now go to each layer and rotate/change the width or height/move up or down the letter on that layer. This is needed to give it that goofy inconsistent look that all the other portraits have!
Example:
step 6.2 inconsistent text.png

NOTE: YOU WILL NEED TO SAVE THIS VERSION OF THE NAME FOR STEP 7

Step 6.3: Making a shadow

Spoiler

There are many ways of giving something a shadow but the most common is copying the image (merge all the letters first), pasting it in a new layer behind it, change the color of this layer to black, moving it slightly off center to the original, and blurring it. But if you have your own method you can do it that way! :)
Example:
step 6.3 shadow.png

Step 6.4: Applying the name

Spoiler


Now we go back to the image I told you to leave in step 5! Generally the layer order goes Background > Name > Portrait so all you gotta do is make a new layer between the portrait and the background (assuming you kept the layers separate) and paste the name there! Like this:
step 6.4 name applied.png

 

 

Step 7: Making the darkened name

Spoiler

This image shows up above your character's head in the clothing selection screen after you select your character. It also shows above the character's skin portrait when you examine them!
Here is a texture template:

Spoiler


burnt name texture template.png

Use the saved image from step 6.2, apply this texture to it, change the darkness on each of the letters, apply a shadow effect behind it much like in step 6.3, and you should come out with something like this:
step 7 darkened name.png
 

If you've followed all these steps properly you should have a nice big portrait replicating the style of other portraits and ready to put in to your mod! :D
As well as a skin portrait and that darkened lookin' name!
(Also, if anyone wants to make any more portrait templates go ahead and put them here in this thread! If I like it I'll add it to the main post and give you credit!)

Here's a .zip filled with all the templates used in this tutorial: DST Big Portrait Templates.zip

Edited by Fidooop
  • Like 1
  • Thanks 2
Link to comment
Share on other sites

On 3/11/2016 at 2:55 PM, mf99k said:

wait, so what is it exactly that makes my font harder to work with? I might want to fix it if it's something major

I love the font and use it whenever possible... the problem with it on a bigportrait though is the texture and getting it to have that jumbled up inconsistent look :p

Link to comment
Share on other sites

1 minute ago, Fidooop said:

I love the font and use it whenever possible... the problem with it on a bigportrait though is the texture and getting it to have that jumbled up inconsistent look :p

what program do you use? I didn't have any trouble making the letters jumbled, the only issue for me was the texture and that was only because I didn't have the texture file. Plus the letters are all on the same layer.

warper__mirra__dst_character_mod_by_mf99

my main question is, what is the difference you are seeing between the two fonts, because I've tried both and they seem the same.

Link to comment
Share on other sites

3 hours ago, mf99k said:

what was it that made the letters harder?

I don't have an image editing program for jumbling up text like that nor do I have the texture for the letters to put on the font so I use the other method with the pre-set texture c:

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
  • Create New...