PDA

View Full Version : [Tutorial] Making and Indexing the Curvy "VERSION" text on title screens


RetroRoller
September 6th, 2012, 09:56 AM
This is my first tutorial for PC, so sorry if there's something that's not well written or you can't understand.


This a tutorial on how you can recreate this text:
http://i1129.photobucket.com/albums/m514/Poshie9999/1636-PokemonFireRedUSquirrels_01.png


So, I'm going to show you how to create the curvy effect - you need the following tools.


Microsoft Word - I know, I know, but it's the easiest way to create the logo. (I'm using 2010, but 2007 and 98-2003 work fine too.)
Photoshop - Or any free alternative. It basically allows us to apply the finishing touches to the image.

Really important stuff is boldfaced!


Also, remember this is NOT a tutorial on how to insert the logo, just a tutorial on how to create and prepare it FOR inserting.


Step One:
Open up Microsoft Word, and create a Blank Document.
http://i1129.photobucket.com/albums/m514/Poshie9999/StartMenu.png


Step Two:
Go to the INSERT tab, click Text Box, and click DRAW TEXT BOX.
http://i1129.photobucket.com/albums/m514/Poshie9999/DrawTextBox.png


Step Three:
Draw out the textbox, however big you want, but avoid putting the box over the 'I' shaped typing cursor just in case..
http://i1129.photobucket.com/albums/m514/Poshie9999/DrawTextBox2.png


Step Four:
We need to make a few adjustments to the textbox and the text inside. First off, when the textbox is selected, click FORMAT, then SHAPE OUTLINE, and click NO OUTLINE.

http://i1129.photobucket.com/albums/m514/Poshie9999/NoOutline.png


Step Five:
Now we can type in our title. Let's say I have a hack called Pokémon Titanium Version (I don't). Use whichever font you think suits best. For example, I'm using a medium ITC Avant Garde Pro, if you played the Fallout games you might recognize it. I set the text size to 72, and set it to bold.

http://i1129.photobucket.com/albums/m514/Poshie9999/Font.png
http://i1129.photobucket.com/albums/m514/Poshie9999/Font2.png


Step Six:
To create the curvy text we want, go back to FORMAT, click TEXT FILL, and click NO FILL, if your page background is white. If not, click white.
http://i1129.photobucket.com/albums/m514/Poshie9999/NOFILL.png



Then go to TEXT OUTLINE, and choose BLACK. Click Text Outline again and click WEIGHT, and change it to what you thing looks best. Personally, I think 3pt looks the best.
http://i1129.photobucket.com/albums/m514/Poshie9999/BLACKOUTLINE.png
http://i1129.photobucket.com/albums/m514/Poshie9999/Weight.png


Step Seven:
Creating the actual CURVE. First, center the text so the arch will look how it is intended.


Then go to FORMAT, TEXT EFFECTS, and TRANSFORM.


Click ARCH UP on the FOLLOW PATH section.
http://i1129.photobucket.com/albums/m514/Poshie9999/CenterText.png
http://i1129.photobucket.com/albums/m514/Poshie9999/Transform.png


Step Eight:
Saving it. There are two ways you can save this, the first is PRINT SCREEN and going into Paint and cropping it out.


The way I use, is SNIPPING TOOL for Windows 7, which does the cropping for you. Once you've got the picture, click SAVE and save it.
http://i1129.photobucket.com/albums/m514/Poshie9999/SnippingTool.png


Step Nine:
Preparing the image to be indexed. We're done with Word now so you can close it.


Open up Photoshop and open our image.



Step Ten:
Photoshop Editing. Think about this logically, when we index the image, the white background will be included, ruining our logo.


Use the brush selection tool to select everything that is NOT your text.


Once its selected, press DELETE and the white "waste" will be deleted.

http://i1129.photobucket.com/albums/m514/Poshie9999/BrushSelection.png


Step Eleven:
There's still some waste on our image. Resize the brush selection tool if you need to and click the holes in the letters with holes in them, like: A, D, B, P, O, R, Q and any others.
http://i1129.photobucket.com/albums/m514/Poshie9999/Waste.png


Step Twelve:
To insert the image, follow THIS TUTORIAL (http://www.pokecommunity.com/showthread.php?t=173298), or whichever one you find most suitable to follow.


Resize the image we have currently, to make it more suitable for adding to the unLZ graphic.



Click Image > Image Size and resize it however you want, but I recommend something like 256 width with whatever height the Constrain Proportions gives you.
http://i1129.photobucket.com/albums/m514/Poshie9999/ImageSize.png


Step Thirteen:
It's okay, we're done now. On the saved image, copy the logo.


On the saved unLZ image, click the Pipette Tool, and choose the green background. Goto the brush tool and draw over the "FireRed".



http://i1129.photobucket.com/albums/m514/Poshie9999/Tita1.png



On the saved unLZ graphic, paste in your logo. It should be far too big, so resize it by pressing CTRL+T and holding SHIFT. Or, goto Edit > Free Transform.

http://i1129.photobucket.com/albums/m514/Poshie9999/Titanium.png



And that's it! It should be prepared and ready to be inserted!

Spherical Ice
September 7th, 2012, 09:25 AM
To be honest, I find using Photoshop, the Stroke layer effect, and text curving closer to the original than using Word, but good tutorial nonetheless.

RetroRoller
September 7th, 2012, 11:52 AM
To be honest, I find using Photoshop, the Stroke layer effect, and text curving closer to the original than using Word, but good tutorial nonetheless.

I guess, but I prefer this as an easier alternative.