Photoshop theme & wheel making overview

[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)

Contrasting edges after "surface blur" in photoshop

In your tutorial for cover editing you should add "hi-pass filter". It add contrast to image's edges without adding too much "aliased" contour and it does have a really good control over "what" you want to have more contrast.

Duplicate the layer, filter>others>hi-pass, desaturate layer then change blending option to whathever you prefer (usually i use "overlay"). You can duplicate "hi-pass" layer to add more contrast or decrease layer visibility to decrease contrast. Moreover you can paint the hi-pass layer with background grey to decrease contrast in specific areas.

An example (with an already processed image). I didn't "hide" image's text to show how filter does not add so much aliased contour as "contrast edges" http://imageshack.us/a/img856/5072/bplz.png

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)

Edited September 12, 2014 by THK

[THK]

Dunno what else to call it

[THK]

Please post anything that should be added below

[brolly]

An useful tool is the Wheel Auditor Photoshop script that BBB made a couple of years back:

http://www.hyperspin-fe.com/forum/showthread.php?16099

Use it to audit your wheels or to fix those badly cropped ones.

[DamnedRegistrations]

THK, might I suggest a couple more useful tips?

1. Always remove TM symbols from wheel logos. They don't belong. This should be told to all wheel makers.

2. I notice a lot of wheels with black or colored borders look poor because people don't bother to blend edges. Better explained with an example:

Notice the grey, light outline around this? Best viewed on black backdrop to make it more clear.

Here it is properly blended, which will look better on any darker background. Yes it makes the edges invisible on black, but no themes really have pure black backgrounds and this is how the edges should look regardless.

It's very easy to do and much better than using defringe, which doesn't always work good.

1.) Add a new layer above the logo after you've done the pen cut

2.) Select this new layer and create a clipping mask by either doing it in the layer menu or hitting 'alt + ctrl + g'

3.) Using the dropper tool, choose the color closest to the outter border

4.) Now simply brush along the edges, the clipping mask keeps everything intact so you don't brush outside your cut

5.) When finished, just merge the layer with your main logo layer

Feel free to reword any of that how you like but I wish everyone would start adopting those habits.

[THK]

Cool, I mostly just cut so it isn't needed or a quick inner shadow/inner stroke fixes it

[Polemicist]

cool, i mostly just cut so it isn't needed or a quick inner shadow/inner stroke fixes it

+1

I want to see more people doing artwork so the more help they can be given the better.

[DamnedRegistrations]

Inner shadow/stroke works some of the time, but not always. Just like defringe.

Let's say you cut a logo. Now the left edge is white, top is purple, bottom is black and right is red. Let's also say these edges are only 1px thick to make it worse. Can't exactly use an automated blending option then, so that's when clipping masks come into play and manually brushing them. I've had it to do it on a ton of different wheels, more than you can imagine.

I know my example above is one where inner shadow would've worked fine, so maybe I should've used something else

[THK]

Inner shadow/stroke works some of the time, but not always. Just like defringe.

Let's say you cut a logo. Now the left edge is white, top is purple, bottom is black and right is red. Let's also say these edges are only 1px thick to make it worse. Can't exactly use an automated blending option then, so that's when clipping masks come into play and manually brushing them. I've had it to do it on a ton of different wheels, more than you can imagine.

I know my example above is one where inner shadow would've worked fine, so maybe I should've used something else

- apply layer effect one

- duplicate layer > convert to smart object > apply layer effect two > set layer to 0% fill > convert to smart object > rasterize > layer mask > gradient tool or brush tool

- merge layers

- repeat above for all different parts left

done in a jiffy

There are often multiple solutions which aren't all too hard. It's just that you need to be aware of them

[sonicboom88]

THK Would paint.net be s**t to do art?

[THK]

THK Would paint.net be s**t to do art?

I don't understand the question

[THK]

THK Would paint.net be s**t to do art?

I don't understand the question

[Iggy]

Hey Tim....Im thinking hes asking if Paint.net would be able to do various Hyperspin art like what Photoshop does.

[dougan78]

I think the answer to that is if you know how to use paint.net to do most the stuff in post one or what ever it may be comparably called then yes. As a artwork noob which I am. Just playing with your program is a must to see if you can turn out some results. Otherwise photoshop is a must imho.

[THK]

I have no clue about progs other than PS & AI unfortunately

[sonicboom88]

yeah that's what I mean PS costs a lot and tried to get it off tpb checked my hosts file a few days later and it had loads of bad links in it pharmcy porn bank ect.. i learned how to crop from cutting familys heads out and putting it on something lol.

[THK]

yeah that's what I mean PS costs a lot and tried to get it off tpb checked my hosts file a few days later and it had loads of bad links in it pharmcy porn bank ect.. i learned how to crop from cutting familys heads out and putting it on something lol.

I have no such an experience. I've used a student license and after that continued from CS4 to CS6 from tpb, never had any issues. I do however have script/add/pop-up blockers on my browsers, so I might not have run into them because of that.

Just checked my hosts file, nothing there except for localhost

[sonicboom88]

yeah I use adblock plus I got paranoid because it said to add stuff to my hosts file then that happend.

[DamnedRegistrations]

If you either can't afford Photoshop or are having problems getting it through "other means", then use GIMP. It's free of course. As long as it has some form of pen tool so you can cleanly cut out logos, then it should be just fine and I believe it does. I have no idea about paint.net but I think it's much more basic, more suited to simple photo editing.

[sonicboom88]

Thank's I think when i have the patience to make some art I will try other means to get it.

[Krakerman]

I use Paint.net and Paint Shop Pro X4 (This one is an older version the newer one it out which is X7 with even more features) and both work just fine.

[THK]

I use Paint.net and Paint Shop Pro X4 (This one is an older version the newer one it out which is X7 with even more features) and both work just fine.

That's all good, of course there are a couple of software programs/suites that can do the job just fine for our purposes, but I have to point out that the "self proclaimed theme guru's" knowledge base here is basically PS/AI only.

[Roadrunner]

I'm probably the only guy on the site who uses this, but Corel's CorelDraw and Photopaint work fine for me. Totally self taught and it was a long road, but I'm actually dangerous with it now.

[nathan1974au]

paint net plus CS6 paint shop Two great tools! that's what i use!

[DamnedRegistrations]

As per request, here's a Photoshop tip for noise removal that I find very useful.

Before

After

I would recommend doing the following as it does a great job at removing color noise, especially when noise removal itself doesn't do the job good enough.

1. Before even starting your pen tool selection, go to "Filter->Blur->Surface Blur..."

2. Set the radius to 3 levels then adjust the threshhold depending on amount of color noise on the cover you're working with. Try not to overdo it or it can smudge. Having some noise and grain isn't really a big deal at all.

If you have already either pen cut your wheel or are cleaning a completed wheel, then do the following. I would recommend not doing this with wheels which have thick black borders though as it creates transparent pixels for some reason:

1. Hit ctrl+J on keyboard or go to layers panel, right click the main logo layer and do a duplicate layer

2. With the duplicate layer active, apply the necessary surface blur

3. Now go to layers panel and make sure the main wheel layer beneath is active

4. Hold down ctrl on keyboard and left click on this main layer thumbnail in layers panel to make a selection

5. Make the duplicate layer that you applied the surface blur to active using layer panel again

6. With any selection tool, right click anywhere on logo and select "Layer via cut"

7. Delete the two layers beneath your new layer as they are no longer required

If the surface blur or noise removal methods don't work good enough, you can simply use the blur tool while zoomed. This usually works best with gradients.