Psd theme template

[potts43]

Hi, I've read a lot of threads but I wondered if someone could cut to the chase...if I create a psd file what are the names and order of all possible layers.

One thing that confuses me when loading completed themes into hypertheme is it appears to have no video but it displays video in hyperspin-how does this work?

When you import a video it wants flv not mp4. I can easily convert them but I could do with some help.

The info out there just seems incomplete.

Any help is appreciated at this point.

[gadget2k]

PSD Order AS far as the video is concern I usually just load and flv file within hypertheme and just line it up with my video border.

[THK]

What I always do is make a theme in Photoshop, then make a copy of the .psd and clean/merge everything down to the correct layer structure & names:

Artwork4

Artwork3

Artwork2

Video

Artwork1

Background

For the vid border I grab a screenshot of the game in the correct aspect ratio in PS, resize it to the desired size and build the vid border around it.

For the background I always do a select canvas and copy it to a new layer and delete the original, just to make sure the background is exactly 1024x768. If the bg is larger, it gets all screwy in HS.

In HyperTheme I import the cleaned .psd and lock all the layers before assigning animations and placing the vid, so I don't accidentally move them as they should be placed exactly as in PS when imported.

When placing the vid/vid border, I use a generic .flv without sound and always set Force Aspect to Both when using an image as a border. The border would appear when importing the vid and when FA set to Both allows me to both set the height & width exactly as I want.

Then I move the vid to where I want it and assign all the animations, test it and export the theme zip.

Sometimes, when the location of the vid needs to be very exact, I use a mockup of the theme with the vid in place to see exactly where to place. he vid and then replace the bg with the correct one after the vid is locked in the correct place.

[potts43]

What I always do is make a theme in Photoshop, then make a copy of the .psd and clean/merge everything down to the correct layer structure & names:

Artwork4

Artwork3

Artwork2

Video

Artwork1

Background

For the vid border I grab a screenshot of the game in the correct aspect ratio in PS, resize it to the desired size and build the vid border around it.

For the background I always do a select canvas and copy it to a new layer and delete the original, just to make sure the background is exactly 1024x768. If the bg is larger, it gets all screwy in HS.

In HyperTheme I import the cleaned .psd and lock all the layers before assigning animations and placing the vid, so I don't accidentally move them as they should be placed exactly as in PS when imported.

When placing the vid/vid border, I use a generic .flv without sound and always set Force Aspect to Both when using an image as a border. The border would appear when importing the vid and when FA set to Both allows me to both set the height & width exactly as I want.

Then I move the vid to where I want it and assign all the animations, test it and export the theme zip.

Sometimes, when the location of the vid needs to be very exact, I use a mockup of the theme with the vid in place to see exactly where to place. he vid and then replace the bg with the correct one after the vid is locked in the correct place.

Many thanks! Much appreciated.

[THK]

Oh yeah, the layers in photoshop don't have to be in that exact order, they just have to be named correctly. But it's convenient to do so anyway to see how it would stack up.

I also saved a document preset named HS Theme that has all correct settings:

1024x768 px

72 px/inch

RGB 8bit

Transparent background

The flv without sound is so I can watch something on my second screen or play some music whilst making a theme without scaring the shit out of me when the vid is imported into HT and starts playing immediately. It doesn't matter anyway as the vid isn't/shouldn't be included in the theme zip anyway.

[potts43]

Oh yeah, the layers in photoshop don't have to be in that exact order, they just have to be named correctly. But it's convenient to do so anyway to see how it would stack up.

I also saved a document preset named HS Theme that has all correct settings:

1024x768 px

72 px/inch

RGB 8bit

Transparent background

Is that in your FTP folder?

Thanks for your help

[THK]

No, when opening a new document, you can set these settings and click Save Preset... on the right.

Next time you can select that in the drop down menu of the new document window.

[potts43]

Oh yeah, the layers in photoshop don't have to be in that exact order, they just have to be named correctly. But it's convenient to do so anyway to see how it would stack up.

I also saved a document preset named HS Theme that has all correct settings:

1024x768 px

72 px/inch

RGB 8bit

Transparent background

The flv without sound is so I can watch something on my second screen or play some music whilst making a theme without scaring the shit out of me when the vid is imported into HT and starts playing immediately. It doesn't matter anyway as the vid isn't/shouldn't be included in the theme zip anyway.

Hi, I created a psd and loaded it into hypertheme. It appeared to load ok but all layers were blank even though in pshop the layers were named correctly. Do you know what may cause this to happen?

Thanks for your help

[THK]

can you put your psd on the ftp for me to take a look at it?

[potts43]

can you put your psd on the ftp for me to take a look at it?

That would be great! When I get home I'll do it.

Appreciated!

[potts43]

can you put your psd on the ftp for me to take a look at it?

I've popped it in my folder "Jase psp.psd"

It's nothing special. I just wanted to make sure it worked before going to town. Good job I did as there's something not right.

Thanks again

[THK]

I've popped it in my folder "Jase psp.psd"

It's nothing special. I just wanted to make sure it worked before going to town. Good job I did as there's something not right.

Thanks again

- Convert Artwork4 into a smart object. Layer effects don't carry over into HT prevent it from working

- Artwork3 should probably be named Video, though you can get it to work this way, it requires more tinkering with the animations and placement

- Artwork1 should not be an artwork layer, this is a vid placeholder in PS so you can see how everything should look. The vid needs to be separately imported into HT

- Don't forget to mark Don't include in output for Artwork4 as this is box art and should be excluded from the zip (the placement & animation will be in the xml) otherwise you'll get the box art for you used in this psd for every game in stead of their individual box from the Artwork4 folder

[potts43]

- Convert Artwork4 into a smart object. Layer effects don't carry over into HT prevent it from working

- Artwork3 should probably be named Video, though you can get it to work this way, it requires more tinkering with the animations and placement

- Artwork1 should not be an artwork layer, this is a vid placeholder in PS so you can see how everything should look. The vid needs to be separately imported into HT

- Don't forget to mark Don't include in output for Artwork4 as this is box art and should be excluded from the zip (the placement & animation will be in the xml) otherwise you'll get the box art for you used in this psd for every game in stead of their individual box from the Artwork4 folder

THK, thanks for the info. Are you aware of any thread/place that describes this procedure in detail. I've not read anything you've stated anywhere. Although, I have read your posts.

I'm all for self education so i don't mind doing some reading...;-)

[THK]

For people trying to get better at Photoshop I really recommend the Lynda .com one-on-one CS6 training/tutorial dvd's (Get it at [PB mirror]/search/lynda%20com%20one%20on%20one%20cs6/0/99/0) Especially the chapter on the Pen-Tool is essential.

Other than that, practice is the best way to get better, don't know how to do something, look up those tutorial vids, google or ask one of our theme/wheel creators here on the forum.

Some important tools to know/learn

Image > Adjustments > Levels: Often the better way to adjust brightness & contrast

Image > Adjustments > Vibrance: Adjust vibrance & saturation

Image > Adjustments > Color Balance: Add or subtract colors

Image > Adjustments > Channel Mixer: As name implies

Image > Adjustments > Selective Color: Change cyan/magenta/yellow/black levels on red/yellow/blue/magenta/white/neutral/black

Image > Adjustments > Replace Color: Change hue on a color/color range

Image > Adjustments > Gradient Map: Applies a gradient by using the lightness and darkness values in the image as a map for how the gradient colors are applied

Layer > Matting > Defringe / Remove Black Matte / Remove White Matte: Remove fringes/matting/halos from the outside of a anti-aliased image

Select > Refine Edge: Lets you edit the selection by smoothing/feathering the selection and shift the selection up to 50 pixels (good for selection that need to be smoothed or a gradual/blurry transition into transparency, like hair)

Edit > Fill (Content-Aware): Fill a selection and PS will guesstimate what should've been there and fill the selection with that. Great for clearing objects, text etc from larger surfaces like skies or grass

Filter > Blur > Blur: As name implies

Filter > Blur > Motion Blur / Radial Blur: Create illusion of movement (often best applied on a duplicate layer on top of the original one)

Filter > Blur > Surface Blur: Blur the surface to get rid of noise (don't overdo it)

Filter > Noise > Add Noise: Add noise for a grainy (texture) effect

Filter > Noise > Reduce Noise: Reduce (color) noise (I prefer this over Surface Blur, also don't overdo it)

Tools > Pen Tool: Learn it, love it! It's the most essential tool to learn for making cuts/selections

Tools > Magic Wand: Only use this for (high res) images with a high contrast between the art and the background, preferably a solid background. If not, use the Pen-Tool! (it's the easy way out tool, but with more complex images you might end up spending more time refining the cut/edges than using the pen-tool)

Tools > Quick Selection Tool: "THE tool to deep-etch image parts like a game title over a background"

Tools > Healing / Patch / Clone Stamp Tool: Very handy for cleaning away lines, text, all sorts of things from box art for example

Tools > Shape Tools: Don't underestimate the shape tools, with fill you can use them to build up clean shapes (I use them for vid border in stead of simple strokes that tend to pixilate on corners) or with/without a fill to make a selection (Layer window > Path tab > right click path > Make selection)

Layer Panel > Opacity: Self explanatory

Layer Panel > Fill: Especially handy to only show the Layer Style/Blending Options when set to 0% (you could for instance give art a drop shadow, convert only the drop shadow into a smart object and give it a gradient overlay)

Layer Panel > Blend Mode: (next to Opacity, standard set to Normal) Lets you blend images into underlying layers in different ways. Duplicate an artwork layer edit it and then blend or blend it into the background. Make sure you merge the layers that need to blend together into one layer or a smart object.

Layer Panel > Layer Style (or Blending Options, double or right click layer): Here you'll find everything to fancy up a layer, here again, a blend mode can be chosen for the particular effect. (the order of the effects are how they are stacked on top of each other)

Layer Panel > Bevel & Emboss

Layer Panel > Stroke

Layer Panel > Inner Shadow

Layer Panel > Inner Glow

Layer Panel > Satin

Layer Panel > Color Overlay

Layer Panel > Gradient Overlay

Layer Panel > Pattern Overlay

Layer Panel > Outer Glow

Layer Panel > Drop Shadow

Layer Panel > (You can save a Layer Style and apply it to any layer afterwards)

(need to add this in, but have to check it out 1st)

If you get the hang of things and start using the Pen-Tool to actually redraw things, I really recommend watching the tutorial dvd's for Illustrator as well. Yes AI seems daunting, but if you're any good at PS, you will learn quickly (I think it took me a few days of messing around before I got good enough to make good use of the program and starting to redraw stuff)

HyperSpin standards

- Save settings below as a preset in Photoshop called something like "Wheel" & "Theme", so you don't accidentally cock it up and end up wondering what made HS/HT act out

- Before cutting or touching up artwork, increase the image size something like 400%+ to be able to do more detailed work and resize it back afterwards

- When placing/pasting art that needs sizing down, make it a Smart Object, this will ensure the original information/detail won't be lost so you can increase it's size again without losing detail. (for most editing the smart object needs to be rasterized again, so it's best to either do it before sizing down or make a backup of the smart object before rasterizing)

- Make sure the file extensions are lower cased!

Wheels

- 400x175 px

- 72 dpi

- 8bit

- RGB

- png (interlaced)

- When adding stokes/shadows/glow, make sure it doesn't get cut off by the canvas size, so apply before sizing down or make it a smart object and resize to fit canvas

Themes

- 1024x768 px

- 72 dpi

- 8bit

- RGB

- psd (to import into HT)

- All artwork layers can be larger than the canvas size except the background!, which needs to be exactly 1024x768

- When adding/replacing art or the xml on a zipped theme, make sure you set 7zip/WinRar to store & add and replace files

Some tips for searching artwork

- Start your way at large images and work your way down to any size

- Start with png's and then repeat the process with any filetype (for png's: add filetype : png without the spaces to your search query)

- For Japanese games, look up their Japanese name and search for that as well and search for both the English and Japanese names on Google.jp, set to japanese sites only

- For new games, look up their official website, there's often nice art to rip (I use firefox for this, right click page > page info > media tab, let's you browse through all non-flash art and download it)

- For new games, search for a Press Kit on the developers/publishers/official game site

- Look up a game's (or game series) wikia (not to be confused with wiki), there's sometimes some good art to be found

Some sites I use for art (plz add your own)

- http://flyers.arcade-museum.com/ (Arcade flyers)

- http://www.coinopart.com (Arcade, requires membership)

- http://www.arcadeartwork.org (Arcade)

- http://arcadeartlibrary.com (Arcade)

- http://www.arcade-gear.com (Arcade)

- http://gamesdbase.com/ (All, not too good art, but usable for redraw source)

- http://www.giantbomb.com/ (mostly for PC games)

- http://www.fightabase.com (Fighting games)

- http://fightersgeneration.com/ (Fighting games)

There's a few stickies in the Theme Announcements thread, but no thread covering everything as far as I'm aware. I know I've learned it by finding out or hearing/asking about things I hadn't figured out yet.

[potts43]

I've read most of your hints! Thank you for them. They do help. My confusion is more to do with how hypertheme works with psd files and naming layers and what each layer can be used for - and what they can't. We could do with a book for dummies. There isn't the need for guess work really. But sadly without a good guide we rely on helpful folk like you! And guides that Ron and gig do.

[potts43]

If you find time I'm sure everyone would appreciate an idiots guide to the ht layers...what you wrote for psd was great. Something similar would be fantastic. It might encourage others to assist in creating the missing themes. Instead we can't grasp the basics of ht not psd. Cheers