Be a Supporter!

BlackPTBlackPT

Main News Favorites Reviews Stats
Follow BlackPT

Contact Info / Websites

Entry #19

Guide to make your own Newgrounds messages!

2008-08-15 11:31:58 by BlackPT
Updated

First of all, you'll need Adobe Photoshop CS3. You can download the 30 day trial here or buy it for $649.
In alternative, you can use Photoshop CS3 Extended, an upgraded version, downloading the trial here or buying it for $999.

Today I'll show you how to do some customized newgrounds-style messages/features like the one on the picture (scroll down)

~=MAKING THE PRINT=~

To start, screenshot a original message from any place on the site. Go to a under judgment entry at the portal (for example) and click the key "Prt Scr" next to F12.
Be careful, screenshots only show the part of the screen you're seeing in that moment, so, don't distract yourself.

Open MS Paint and paste the print by pressing Ctrl+V. Then select the "Submission is Under Judgment" part [Explain image]. Now, right click, "Copy To" or "Save cut". Name and select "Save as: PNG (*.png)" (PNG is the best image quality to this kind of files).

~=CREATING=~

Now it's time to the magic of image editing!
Open Photoshop and go to "File" > "Open File". Search the screenshot you made and open it.

Step 1: Changing the icon

If you don't wanna change the top left corner icon and keep the print original, you can skip to step 2.
In the example, I'll use an Eulogy icon, but you can use whatever you want, like the file one, smile, music, etc.
To start go to the page when you're icon is. Mine is on Obituaries in any random blammed submission.
Right click on the icon and "Show background image". Now, right click it again and select "Copy Image". Go back to Photoshop again and press Ctrl+V. The icon should pop up and automatically create a new layer. Drag it to the top of the old icon and don't move it anymore. [Explain Image #1 | Explain Image #2]. Here you can see a completely list of all messages icons on Newgrounds.

Step 2: Manipulating The Pattern

This step is really simple: select (clicking "M") the part of the pattern who don't have any letters, press Ctrl+C and then Ctrl+V. You now have a new layer, probably called "Layer 2". Select it. Choose the drag tool (or just click "V") and drag it to the top of the letters, so you can hide them (like the step 1). [Explain Image #1 | Explain Image #2]

Step 3: Working on background

Now we have have all minor details done, let's delete not wanted parts of the background. This the easiest way I could find out.
Choose the Background layer and click the selection tool (or press "M") and select the unwanted parts you wanna remove (In this case the "Submission is under judgment" explanation). When you're finished, press delete, and your top color will replace the selected area (don't worry, that's normal). Now pick the color selection tool (pressing "I") and click the grey (none-selected) area, so you can have the color on your pallet. Time for the paint bucket tool ("G" key)! Fill the selected area and now you have a space for your message! [Explain Image #1 | Explain Image #2 | Explain Image #3]

Step 4: Editing the size

Wanna change the size of your message space? If yes see the video, if not, skip to step 5
This step would be very confusing to read, considering my bad English,so I made a video. Hope you like it!

.
/* */
To increase the message size, go to "Image" > "Canvas Size" and put approximately the size you want. Do what the video says, but drag the selection down instead up. To fill the blank area, you'll to copy this image (Right click > "Copy Image. Open the image we're working and press Ctrl+V and drag the bar to the right. Do the same same thing with this one and drag it to the left. Now pick the paint bucket tool, select the background layer and fill the blank space with the color from step 3. Don't forget to cut the unwanted parts! [Explain Image #1 | Explain Image #2]

Step 5: Letters

This personally the best part on the entire tutorial. You can think on ways to insult, praise or simply say stuff. Don't forget to enable Character options on "Window" > "Character"
Here you got all the fonts, colors, sizes and all you'll need to write your so expected message: (Don't forget to enable Character options on "Window" > "Character" )

Title/Pattern [Result]: Font: Arial | Color: #e4b814 | Size: 13 pts | Bold
(Please, see this image so you understand my bad English. I highlighted the parts you'll need to modify. [Character Box definitions]

Since I couldn't discover the original font used by the most part of the site, I wrote in arial. (Personally, I think is best than the pixel one)
Message text/General
[Result]: Font: Tahoma | Color: #ffffff | Size: 13 pts [Character Box definitions]

Step 6: Raw Materials

To do the last step and finish the tutorial, you'll need to take a look on the Raw Materials and download the . PSD file of the NG Style Guides (It's just a 500 KB file) or simply clicking here. When finished, open the file we're working on Photoshop and the Style Guides one. Now, on the ng_elements file, go to the layers board and click on the "Buttons" folder and then on the "NORMAL_1" layer. Pick the selection tool ("M") and select the button "Normal1". Press Ctrl+C to copy . Press Ctrl+V to paste and you have a button! Move it with the drag tool to anywhere you want. Pick the text tool ("T" key) and click over the button. Set the text definitions to this: [Explain Image #1 | Explain Image #2 | Explain Image #3]

Font: Tahoma/Microsoft Sans MS | Color: #000000 | Size: 11 pts
[Character Box definitions]

If you're element is too small or to large for the text you wanna put on, you must select that layer and go to "Edit" > "Processing" > "Resize". Now, adjust the size manually 'till you're done

Now save it and you're on your way to show him to Newgrounds!
But this is only a example! You can choose anything from the NG style guides and create your own customize message! Here you got some images to inspire you:

~=Images Gallery=~

1.: Wade Fulp - Killing question
BlackPT sig - Random funnies
Still working on this...

Also, if you actually try do this, you can send me a PM or post a response with the link of you're image (Host it here so I can add you to this gallery:

~=Reader Created Gallery=~

Example: 1. BlackPT

Still have questions? Download the .psd file and explore it
Sorry for my bad English. If you find any grammar errors, have any complaint or suggestion, please post a response saying what's wrong
I will keep updating this!

Guide to make your own Newgrounds messages!


Comments

You must be logged in to comment on this post.


jake-thesnakejake-thesnake

2009-10-25 17:37:49

Hey thanks man you rock!


InnerChild548InnerChild548

2009-09-01 19:27:35

Bah! Photoshop is for designers...

When I want something like you've created, I just completely edit the HTML/CSS in a NG page.

BlackPT responds:

Thanks for the useful information asshole. You might want to make a 8000 characters guide about that?


danicosdanicos

2009-07-26 00:55:12

I hope you remember me!http://danicos.newgrounds.com/news/po st/142764#comments
I didnt ''steal'' it, I was just trying to express my confusion! i hope we can grow friends, I dont want anymore enemies then I already have!^^


RustenRusten

2009-06-16 06:01:07

Gotcha!


SK8ninjaSK8ninja

2009-02-13 09:33:27

wow, really awesome. put in my favourites, and its great that you spent your time making it


RuyukRuyuk

2008-12-26 15:02:56

Not to be mean but you got your ass pwn3d by MindChamber....

BlackPT responds:

Oh yeah, I totally forgot that I got owned by an admin on the P-Bot thread, and telling it to me on my own profile page is absolutely the best way to refresh my memory. Truly thanks, dumbfuck.


36Holla36Holla

2008-12-10 11:16:25

For future reference, programs like Gimp and Paint.net are open source programs meaning your comment saying that I could not discuss them when answering someone's photoshop question was wrong. If you want more details go back to the thread in Wi/Ht?.

BlackPT responds:

Hey, thanks for the help dude


HEMI9HEMI9

2008-11-12 20:50:20

$999 Jesus That is More Than I Make

(Updated ) BlackPT responds:

Don't buy, don't make, DON'T POST


super-sensesuper-sense

2008-11-10 14:23:10

You got the text wrong.
It should be the font Microsoft Sans Serif with colour #FFCC00.

Hope that helps

BlackPT responds:

Yeah, I though that Microsoft Sans Serif was the correct font, but Tahoma was almost the same thing... And I didn't really care about it...

Added! Thanks for commenting!


KevinKevin

2008-10-26 19:17:51

Me + you = same sign up date.

BlackPT responds:

Care= 23%


mayoarm11mayoarm11

2008-10-26 15:54:01

... srsly? this is such a lengthy tutorial, for such an easy task. this is for complete computer noobs, whom i doubt spend their computer time on newgrounds.

but i c u a put a lot of effort into it, and it looks very cool, so gj.

(Updated ) BlackPT responds:

Yep, I made it so evry single one could understand. Ir was kinda hard thought.


ZiggyZack99ZiggyZack99

2008-10-11 18:25:46

I suggest both:

Firebug Add-On for Firefox
and
The GIMP

Firebug is easier.


SlintSlint

2008-10-08 18:40:31

xD uk ek significa akele comment k m pusest?
i comment crap
uk ek keres dizer com isso?

BlackPT responds:

O teu news tinha o título crap >_>


andy70707andy70707

2008-10-04 03:53:42

Cool, thanks, I made a BBS sig before in fireworks, I don't have photoshop, then I came across a tutorial like this. I didn't use a tutorial, but it helps alot. I might make it into a flash tutorial.

BlackPT responds:

Ok, you're free to do whatever you want.


ps3isdabombps3isdabomb

2008-09-26 16:44:04

lmao mn ur suh a losr u shud get sum grl 2 fuk u bt u cnt cuz ur gay nd u jak of 2 nakd duds.

BlackPT responds:

\/\/07 d1d j00 s4'/?


FroFro

2008-09-22 08:41:59

Dude. I try to help you out in the abusive review thread and then your a dick to me? Grow the fuck up man. Don't get off on the wrong foot and start acting like everyone else on this website.

BlackPT responds:

I'll try. Sometimes I'm just a dickhead for fun. Sorry


KorpKyuu-SamaKorpKyuu-Sama

2008-09-19 13:36:27

Respect!!

BlackPT responds:

okay


ChdongaChdonga

2008-09-13 20:10:39

:(

Damn, it sucks that one can't do this with MS Paint

BlackPT responds:

Gimp is free...


BFKBFK

2008-09-12 17:27:58

It's easier and looks better when you just edit the source code with javascript or firebug.

Also there's plenty of alternatives to photoshop.

BlackPT responds:

Yeah, but this was the easiest I could find


SlintSlint

2008-09-11 18:24:51

Ahahah
ta bem fix
mas n tenho dinheiro...
xD


EmmDubyaEmmDubya

2008-09-06 07:05:35

I will proceed.

BlackPT responds:

I hope


PinballWizard976PinballWizard976

2008-09-05 18:16:23

Cool. I like it. I'll have to make one later. :)

BlackPT responds:

Hurray xD


SonofkirkSonofkirk

2008-09-05 14:31:48

yeah this post deserve more comments and congratulations.

BlackPT responds:

thanks again :)


ChandelierChandelier

2008-08-26 12:48:56

Let's fuck da pussy

BlackPT responds:

Okay


ArchawnArchawn

2008-08-22 09:41:42

Awsome! Bookmarked!

BlackPT responds:

Awesome!


FroFro

2008-08-18 09:25:44

So much better then the ones that I make. :(

BlackPT responds:

Muahhahaha! I'm your master!

Thanks :)


SonofkirkSonofkirk

2008-08-16 10:07:40

You should submit this tutorial, you did it very well ...

BlackPT responds:

Meh, I can't do flash


groundpwndrgroundpwndr

2008-08-16 09:49:40

wut the hell, where is the boobies and porn???

BlackPT responds:

Boobies? What are you, a 8 years old kid?


SonofkirkSonofkirk

2008-08-16 09:39:11

Well done bro ! And nice pic lol. I'll do one : )

BlackPT responds:

Nice, thanks