Welcome Guest [Log In] [Register]

Quote of the Moment


We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use.

If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.

Join our community!

If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Book Cover Tutorial For Tes4: Oblivion; Metallicow BookJacket Retexture Tutorial
Topic Started: Aug 13 2009, 04:22 AM (142 Views)
Metallicow
Member Avatar
Moo.
BOOK COVER TUTORIAL FOR TES4: OBLIVION
By Metallicow

For this tutorial, I will be using Photoshop and Artweaver, but anyone with a simple understanding of layers, ability to work with various programs and windows open at the same time, can achieve the same results rather easily with some of the other FREE programs.

[NOTE: FOR FREE PROGRAM USERS: Paint.NET can save in various .dds formats and also has a normalmap.dll you can download, RealWorld Paint.com supports the Photoshop Nvidia DDS/Normalmap Plugin. The DDS Convertor 2 will convert normalmap textures with the right compressions.]

First of all, you will need some programs and utilities.

Image Manipulation Programs that could be used for this project:
Artweaver 0.5.7 (FREE!)
http://www.artweaver.de/index.php?en_version

Paint.Net 3.36 (FREE!)
http://www.getpaint.net/

Pixel Image Editor (NOT FREE, FREE DEMO)
http://www.kanzelsberger.com/pixel/?page_id=12

RealWorld Paint.COM (FREE!)
http://www.rw-designer.com/image-editor

Photoshop (NOT FREE, TRIAL VERSION)
http://www.adobe.com/

TwistedBrush Open Studio 16.02 (FREE EDITION)
http://www.pixarra.com/

Paint Shop Pro (NOT FREE, TRAIL VERSION)
http://www.corel.com/servlet/Satellite/us/en/Content/1150905725000

ArtRage 2.5 (FREE DEMO)
http://www.ambientdesign.com/artrage.html

PhotoFiltre v6.3.2 (FREE!)
http://photofiltre.free.fr/

GIMP (FREE!)
http://www.gimp.org/

Various others (If you like a particular program better, GO FOR IT.)
http://www.freebyte.com/graphicprograms/#editors
http://www.snapfiles.com/Freeware/gmm/fwgraphicedit.html


Other Programs & Utilities that will be used for this project:
It is in your best interest to use a fully patched version of Oblivion.
http://www.elderscrolls.com/downloads/updates_patches.htm

NifSkope 1.0.20. (FREE!)
http://niftools.sourceforge.net/wiki/NifSkope

Nvidia Photoshop DDS/Normalmap plug-in (FREE!)
http://developer.nvidia.com/object/photoshop_dds_plugins.html

Paint.NET NormalMap.dll (FREE!)
http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Color/Normal_Map/

GIMP DDS plug-in (FREE!)
http://nifelheim.dyndns.org/~cocidius/dds/

GIMP Normalmap Plug-in (FREE!)
http://nifelheim.dyndns.org/~cocidius/normalmap/

DDS Thumbnail Viewer (FREE!)
http://developer.nvidia.com/object/dds_thumbnail_viewer.html

TES4: Oblivion PC Game (NOT FREE)
Highly recommended buying the GOTY version, if you don't already have it.

TES Construction Set v1.2.404 (FREE!)
http://www.elderscrolls.com/downloads/updates_utilities.htm

Metallicow Book Jackets Resource & Tutorial (FREE!) (Needed for the NIF)
http://www.tesnexus.com/downloads/file.php?id=26414


Other things that will help facilitate future book cover projects (but are not necessary for this particular one)
DDS Tools/TES Construction Set Wiki (FREE!)
http://cs.elderscrolls.com/constwiki/index.php/DDS_Tools

NvidiaNormalMapFilter (tool overview)
http://www.modwiki.net/wiki/NvidaNormalMapFilter_(tool_overview)
*If this link doesn't work for you, just copy it all and paste it into a new tab.*

DDS Convertor 2 (FREE!)
http://eliteforce2.filefront.com/file/DDS_Converter;29412

LOTS of Plugin Filters, brushes, gradients, etc. for the image manipulation programs. A lot are free and demos are also useful too, if you only need a small portion of a picture without DEMO written on top of it.
http://www.freephotoshop.com/html/free_plugins.html
http://www.photoshop-filters.com/
http://www.obsidiandawn.com
http://www.deviantart.com/#catpath=resources&order=24

Any PC that can run Oblivion should be up to the job, but extra RAM and a decent graphics card really does help your overall gaming/modding experience to be more enjoyable.

Creativity & Patience.
Edited by Metallicow, Aug 28 2009, 01:40 PM.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
BOOK COVER TUTORIAL PART 1: The Texture
1. The texture we will be working with can be downloaded from Lostandtaken.com. It is a old book pic with Book Lore on the front.
http://lostandtaken.com/blog/2008/9/5/15-old-book-cover-textures-high-res-and-free.html
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
2. Open the pic up in photoshop, artweaver, or your preferred program. Photoshop will not let you do anything with it until the background layer is unlocked.(Pic1) Double click the small lock and it should ask you: New layer. The name doesn't matter unless you would like to name it something else. Default will be Layer 0. Click OK and the layer will now be unlocked.
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
3. Crop the image down to where the ripped edges of the cover are not visible (Pic2).
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
4. Right click on Layer 0 and duplicate the layer. This will make Layer 0 copy.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
5. Using the rectangular marquee tool delete what is inside the frame-border of the book on layer 0 copy (Pic3). The background should be transparent.
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
6. Now click back to your layer 0 and crop the bottom half of what is inside of the frame-border of the book (Pic4).
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
7. Check the image size. Select all and copy the image into memory with (Ctrl+C).
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
8. Now open up artweaver and make a new project with the image size you got in step 7. Paste (Ctrl+V) the image into the project window.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
9. Go to Filter>Distort>Seamless and click on it. You will notice this has changed the texture into a seamless texture (Pic5).
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
10. Now select all and copy (Ctrl+C) the seamless texture you just created into memory and skip back over to photoshop.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
11. Under the history you will want to click layer 0 back one step before you cropped the image for manipulation in artweaver. You accomplish this under the history view. Now click the eye icon next to layer 0 to make it invisible so that only layer 0 copy is showing.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
12. Paste (Ctrl+V) the seamless texture from memory into the photoshop project. It will create layer 1. Paste (Ctrl+V) once or twice again and move Layer 2 & Layer 3 above the others to create a bigger seamless texture. This will become the new texture inside the frame of the book. (Pic6)
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
13. Move Layer 0 copy up to the top of the layers list so it will show on top of the others and click the eye icon so you can see it. Layer order from top to bottom should now be as follows: Layer 0 copy, Layer 3, Layer 2, Layer 1, Layer 0. (Pic7)
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
14. Now save this as TutBook.bmp, or .jpg and stick somewhere in a resources folder you have made. You may want to save the photoshop document also .psd. Save as the highest quality or else it will look like crap further down the line.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
15. Open the TutBook file you just saved back into your image manipulation program. It will be a flattened image now. Go to Image size and change the width to 410 and the height to 512. Alternately, for better resolution, but bigger file size, you could go with 820 X 1024. Stick with the first set of figures for learning.
Edited by Metallicow, Sep 2 2009, 07:23 AM.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
16. Open a new document with the image area as 512 X 512. Select all on your TutBook and drag or copy/paste into the new document. Move copied book cover far most right which will leave a 102 X 512 empty space at the left (Pic8). This empty space is what will become the book spine. Also remember that the *snap to* function can be turned on/off to make placing easier in certain situations.
Posted Image
Edited by Metallicow, Sep 2 2009, 07:24 AM.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
17. Crop a portion of the TutBook on the far most left about 35 X 512 out and take it through the seamless texture process described in step 9 in artweaver.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
18. Take this seamless texture you made in artweaver and stick it back in your photoshop project. Three layers should fill in the book spine portion. Move your layer 1 to the top of the layer order. (Pic9)
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
19. Now take a suitable brush and using the burn tool we will make shadows along the edges of the cover and the spine working with the 4 layers. (Pic10)
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
20. Save this again as TutBook bmp, jpg, psd, whatever. You have successfully created the book texture. If you would like a fancier book spine or cover, you can continue working from this point forward on your own. If there will be text on the spine it will need to be flipped or it will appear flipped(mirror) later on.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
BOOK COVER TUTORIAL PART 2: DDS & NifSkope
21. Before you can apply your texture to a Mesh/NIF, it has to be in DDS format. Open your finished TutBook texture back up in photoshop after you have installed the Nvidia DDS plug-in. Go to the save as function under File and save as TutBook.DDS format in your resource folder you have created. It will pop up this screen (Pic11). The compression option should be set to DXT1 no alpha as shown. The different compression options will achieve different looks and effects in game depending on how you set your Nif properties up. DXT3 explicit alpha will make your book cover shiny such as a special chromed comic book cover would look like. Scale in the normalmap settings will adjust the height or embossed look of the cover. You can play around with these settings to achieve different looks in game, but for learning purposes, use the example in (Pic11).
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
22. Now you need to create a normalmap for your book cover. Go under Filter>NVIDIA Tools>Normalmap Filter. Your screen should now look like this (Pic12) Click OK and your book cover will turn different colors of neon. This is absolutely normal, do not be alarmed. Now save this as TutBook_n.DDs into your resource folder you created. Use DXT1 no alpha just as you did in step 21.
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
23. Now you will have to create three folders in the oblivion Data folder. The paths should be as follows:

A- My Computer>Local Disc (C:)>Program Files>Bethesda Softworks>Oblivion>Data>Textures>*My Name Book Resource*.

B- My Computer>Local Disc (C:)>Program Files>Bethesda Softworks>Oblivion>Data>Textures>Menus>Icons>*My Name Book Resource*.

C- My Computer>Local Disc (C:)>Program Files>Bethesda Softworks>Oblivion>Data>Meshes>*My Name Book Resource*.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
24. Now copy TutBook.DDS & TutBook_n.DDS from your resource folder into folder A- you created in step 23.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
25. Unzip/extract the contents of the Metallicow Book Resource you downloaded into a temporary folder. Now you should open up NifSkope. Click the Load Button at the top left corner of the screen and it will open up a Choose a file window. Navigate to the folder you extracted the Metallicow Book Resource to: Temporary>Meshes>Metallicow Book Resource and open the 1 Book.nif. This will open a book with a mystical delta on the cover.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
26. Click open the 0, 6, 8, 12, and 14 buttons to branch out the options as seen in (Pic13).
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
27. Now click on the purple Icon next to the 15 NiSourceTexture. This will open a Select a texture file window. Navigate to the folder A- you created in step 23 and open the TutBook.DDS file you placed into it. Your TutBook texture should now be fitted on the provided Mesh/Nif (Pic14). You should also copy the book pages1.dds and book pages1_n.dds from the temporary folder into your A- folder. Change the path of the 9 NiSourceTexture to the book pages1.dds in your A- folder.
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
28. It is time to save the Nif you just created, so click the Save As button at the top of the screen. Make sure the path leads to the C- folder you created in step 23. Save this as TutBook.nif.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
29. Now to create the in-game icon. Under the Render>Settings there is an option to change the background color. Set the background color to white. Hit the Prt Scr button on your keyboard. This will take a screenshot of your screen and put it into memory, such as copy(Ctrl C) would. Now go back into photoshop and make a new document. Hit Paste (Ctrl+V) to paste screenshot into document. Use the Magic Wand Tool and set the tolerance to 10 or so. Click on the white portion around the book and hit the delete key. This should make the background transparent. Now crop your image similar to (Pic15). Then change the image size to 64 X 64 and save as TutBook Icon.DDS with DXT3 explicit alpha and No MIP maps. Then copy your TutBook Icon.DDS into the B- folder you created in step 23. This is where you will locate your icon file from in the TES Construction Set.
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
30. If you would also like to create better looking book pages as I have, you can do so as described in Part 1 of this tutorial. Remember, the higher the resolution, the better it will look in game, just don't go overboard with it unless you like the smell of your graphics card melting. The 9 NiSourceTexture slot is where you would stick your bookpages#.DDS in the provided Nif (Pic14). The DDS Convertor 2 may come in handy to convert some DDS files to another format Ex. jpg, bmp, png, psd, tga for manipulation in photoshop, artweaver, whatever. The DDS Thumbnail viewer allows you to see a thumbnail preview of the .DDS file you may be working on without having to open them up in a program.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
BOOK COVER TUTORIAL PART 3: Importing into a TES4: Oblivion MOD

31. If you are not familiar with at least the basics of the TES Construction Set, then I would highly recommend you do so, before proceeding any further. Help can be found here. http://cs.elderscrolls.com/constwiki/index.php/Main_Page
Open up the TES Construction Set, and click on File>Data. This will open a list of the oblivion MODS/Plugin Files you have installed. Click on Oblivion.esm or another mod you are working on and Set as Active File, and hit OK. In the object window, click on Items>Book>Clutter or Books. Find yourself a suitable location to put your book in the Cell View window. I like World Space:Tamriel, EditorID:ICTalosBridge02 because it is open to changing lighting and weather conditions. Double click on it to open it up in the Render window. After it loads, press the A key so you can see what your doing. Scroll down closer to the bridge and find a spot you would like to put your book (Pic 16).
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
32. In the object view window, right click to make a new object. In the Book window that pops up click on the Add Nif File button and this will open up a select model window. Navigate through the folders to the Tutbook.Nif file you saved in you C- folder in step 28 and open it. Change the ID to whatever you feel is a good name to organize your books. The ID can include numbers, but no spaces. As long as there is not already another ID by that name, you should be fine.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
33. Next click on the Add Icon Button and locate the TutBook Icon.DDS you have in your B- folder you created in step 29.
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
34. Write "my first bookjacket or whatever" in the name space. This is what will appear as the name of the book when you cursor over the book in-game. In the text section write "Metallicow Is Great!" and click OK. It will probably tell you, you can't spell but just ignore that for now. (Pic17)
Posted Image
Offline Profile Quote Post Goto Top
 
Metallicow
Member Avatar
Moo.
35. Now drag your book you created in the object window in to the render window and set up as you like. Save as My Name Book Resource.esp in the file menu. Now fire up Oblivion, activate your esp and check out the awesomeness.


Posted Image
Mooo
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · TSRL - Modding Forums - Guest View · Next Topic »
Add Reply