144 replies to this topic

[Draco1962]

I have created this thread with the sole purpose of maintaining a location where we can discuss and share image and theme editing techniques, discussions, and tutorials for all things GIMP, PhotoShop, or other editing software related.

Below is a list of the more popular FREE PROGRAMS (Online or for download) that I will update periodically with additions as they come available from you. If anyone can provide names and site links to good tutorial sites for these programs as well as PhotoShop, I will gladly include them as well!

Free Image Editing Programs:
The GIMP (Gnu Image Manipulation Program)
Inkscape
Paint.net
MyPaint
PaintStar

Online Fonts and Font Manipulation:
Flaming Text

Tutorial Site Links:
Gimp Tutorials on Pixel2Life.com



To start things off, please take a look at the attached images and let me know what ya think. Tinkering with scan line effects in GIMP. Thanks!

Attached Files

•  scanlines-ex1.png   1.05MB   35 downloads
•  scanlines-ex2.png   1MB   33 downloads

[ehuonder]

I like the scan line effects for some themes. If your logos become available in both styles, I'll have to switch to them almost full time! After that, you'd only missing vector graphics styles... Nice work!

[Draco1962]

Thanks for the feedback!

The effect is actually very easy to achieve in GIMP (probably equally as easy or maybe easier in Photoshop). What I did was:
1. Loaded the image
2. Applied a new layer and chose the default Foreground Color (which is 000000 - Pure Black).
3. I then accessed the Filters, selected Remove Every Other Row from the Distorts Section, an removed every even row from that black layer.
In effect, you are creating a black "screen" consisting of alternating odd rows of black pixels that is blocking the corresponding rows of pixels from the image below.

Now this is reflected in image _Console__Atari_Pong-Ex1.png attached to this post. I like this option better as it allows me more flexibility and preserves the alpha transparency (gradient dissolve) effect from black to nothing. If I apply directly to the image, then I have to create a solid layer of black below the image (see example image _Console__Atari_Pong-Ex2.png) or else the image appears as if it is disappearing - example _Console__Atari_Pong-Ex3.png. This is due to the fact that I have removed every other pixel row from the actual image exposing the alpha channel below.

Attached Files

•  _Console__Atari_Pong-Ex1.png   123.5K   15 downloads
•  _Console__Atari_Pong-Ex2.png   91.15K   16 downloads
•  _Console__Atari_Pong-Ex3.png   123.05K   14 downloads

[celly]

From the first post, I love the look of the icons with the scan lines. Of the Pong images, the second image with the solid layer of black I like the best. These would be a great addition to the Space Invaders theme!

[Adultery]

Thanks for the share Drac ol buddy!

Teaching the community to fish will feed them for a lifetime.

[Draco1962]

All - I have uploaded Logo Pack #4 which Tom has graciously added to the main GameEx site. It is a fairly large file as it contains all of the logos from packs 1-3 and some more recent. All of the logos are in Photoshop .psd and GIMP .xcf formats and sorted by category. This will allow those using either Photoshop or GIMP to save the files however they need to. I have included with each .psd/.xcf the following:

1. A scan line layer that, when selected, will overlay the selected image below it. This gives the effect of monitor/TV scan lines to the image.
2. Image layers. All logo images have been sorted into separate .psd/.xcf files by category - Arcade, Console, Corporate, Emulator, GameEx Core-Misc, Handheld-Fruit Machine, PC-Pinball.
3. Color layers beneath the image layers so that the end user may "colorize" the background underlying the image as desired to fit their theme.

Give them a try and let me know if you have any questions.

P.S. A word of caution! If for some reason you resize your images, the scan lines will not look right. For example, if you enlarge the res form 640x480 to 800x600, the pixels will multiply for all aspects of the image, including the scan lines and they will appear too thick. Always best to use a scan line layer created fresh for the size image you will be displaying and that image should not have scan lines already in it.

Edited by Draco1962, 30 July 2011 - 01:03 PM.
Additional word of caution!

[celly]

Thank you Draco!

[Adultery]

Thanks again Drac! You da man!

[Adultery]

Do I need to tell you my opinion? It'll be a strong competitor for the contest for sure!!

[Draco1962]

I think those with the HTPC rigs that like the HSL enhancements for MAME will also like this as it has a scan line layer in the image fields so this will ensure a similar effect in the demo vids without having to edit them for the effect (same goes for the static snaps), and will look especially good with the H264 480p MP4's available on EmuMovies for those with paid memberships. The 240p MP4's look nice as well, but the more pixels you can throw at a larger display the crisper the image.

[Draco1962]

Just a quick share for those of you that are designing your own themes and might need a quick reference as to scalability within aspect ratios. I have found this to be quite handy. Generally speaking, when you scale images within the same "family" there is little to no distortion (although sizing up from a smaller image res will degrade the quality and sharpness of the image, pixelization, etc.)

Also, a hex table of color codes for those GIMP and PS Pros that I have found to be very useful.

Attached Files

•  screen_resolution_standards.jpg   164.07K   17 downloads
•  hextable1.gif   158.68K   18 downloads

[Adultery]

Everyone should have a hex table!

I often use this along with the eyedropper tool.

[ehuonder]

Thanks for the images! I've seen the resolution one before (and refer to it often), but not the hex image. That will come in handy, instead of guessing so much.

[Draco1962]

To All - As you know I am working on another theme. I am also revamping some of the logos from the most recent packs. If you have any good logos (no drop shadows, vector preferred when possible, the larger the better for scaling) and/or system images, please share them here!

[Draco1962]

Well, things are moving along at a deliberately slower pace with my Hexed theme. It will be a 16:10 V4 theme (1920x1200) geared towards HTPC and will be employing recent changes to the Theme Editor. Because of the layering limitations I have found my creativity challenged, but in a positive way. While not ideal, it is getting better and I hope to have some solid suggestions to provide for Ben and Tom as they continue towards the next generation GameEx Theme Editor and Skinning utilities!

Here are a few snaps and, as always, your feedback (constructive criticism) is always welcome! As you can probably tell, I am taking advantage of the foreground top most setting in theme editor. This makes the selector bars appear below the foreground image which looks more polished. I am also using the scan lines effect over all image files. I will also have the header bar populated with system names and system images as they are available. The completed theme will include the core system displays and will have PSD/XCF files so that the end-user can create foreground images as needed for their specific emulated systems. I have replaced some of the logos entirely and added color where previously the gradient dissolved to transparency.

Attached Files

•  Snap.png   1.04MB   17 downloads
•  Snap2.png   898.84K   20 downloads

[Krakerman]

Looks freakin sweet Draco! Yeah I agree we need a newer NextGen Theme Editor for GameEx! I really don't like the current one at all. Maybe that's why we don't see more themes out there.

Really looking forward to you releasing this one

[hansolo77]

@ Draco

The bottom info far looks too difficult to read. The icons are in the foreground, but the text next to them is under the hexagon grid. This makes it hard to read that stuff. Is there a way to bring the text to the foreground too? Like the cloud in the weather. Just looks wrong? Also, I'm not a huge fan of scanlines. Some purest out there might, but if I got this theme, I'd be hard pressed to find a way to disable them...

[Draco1962]

@ Han - The scan lines are optional and if the end user prefers, the PSD file can be used to create the foreground files they need without the scan line layer included. I have to agree with you about the hex pattern overlying the text in the footer and have modified it to remove this layer so that the text is not affected. Thanks for the feedback!

[Krakerman]

Hey Draco have you ever made a Super Gameboy Image to go with your image packs that you have made?Also any ETA when you gonna release your latest HTPC Theme?

[nullPointer]

I’m using a combination of GIMP and Inkscape to do some image editing and creation. I’m learning the ropes for both of these programs, but have used Fireworks for a number of years. I’m finally making the switch since I figured it was high time that . . . ahem . . . I go legit (if you know what I’m saying ) . I’m using GIMP for bitmap manipulation, but prefer the vector capabilities of Inkscape for creating new graphics. These programs seem to cooperate fairly well together.

I’ve got a couple questions for the local GIMP masters around here. I’ve been working with Draco's logo packs in order to leverage his awesome talents into some controller images I’ve been working on. So my first question is:

• Hey Draco, is it alright if I’m modifying your images for my personal use?

Specifically I’m using GIMP to remove the backgrounds from the logos so that the backdrop is purely transparent. To that end I’ve been tracing paths around the stuff I want to keep and removing the backdrop via the wand tool. This can be time consuming depending upon the complexity of the images I’m tracing. The other downside of this technique is that the ‘foreground’ image ends up with a thin line around it. It's not terribly noticeable so long as my lines are crisp and I use a neutral line color. I’m sort of OK with that part. (An argument could be made that I should use the lasso tool rather than tracing a path, but what can I say I’m much better at playing connect the dots than I am at freehand artwork ) This leads me to my next question (for you GIMP masters):

• Is there a better and/or preferred method for pulling this off? A faster technique would be fantastic. Perhaps this just amounts to needing more practice? Additionally I’d like to do away with the tracing line resulting from my current technique.

Finally one last bonus question:

• What’s a good technique for managing all those floating panels in GIMP!? Perhaps I just need to hook up a second monitor and move the panels there, but it sure would be sweet if I could dock those suckers!

Thanks in advance for any help and/or suggestions!