ExoticA:Themes

From ExoticA

Overview

The ExoticA look and feel is based on workbench 1.3 with a pretty header with a logo and montage. We would love to have some more styles for the site. You will find on this page some information on how the themes are comprised and some help on creating certain aspects.

Ideas

Anything Amiga related would be perfect for a theme, or something demo scene related, or retro computing related. Basically anything that reflects the content of the site. Seasonal styled graphics are also appreciated.

Technical Details

The header layout consists of a fixed size logo, a transparency piece, and then a horizontally repeating image. The height of the header is 140 pixels.

The logo should be about 400 - 500 (width - a guide) x 140 (height - must be this) pixels. For pixelled graphics, the logo should be in PNG format (24 bit and lossless).

Ocean Theme Logo

To the right of the logo is a right aligned repeating montage, like the example below. It must be horizontally seamless, that is to say, if repeated again and again horizontally, the left side should match neatly to the right side of it. The width is not fixed, but a width of 800 is good if you don't want it to repeat unless people are using a very large screen. The height should again be 140 pixels. As the montage is a large graphic, we generally use jpeg for the file. However, for pixelled work, send the original in png so that there is no loss.

Montage (scaled - click for larger version

There is another image used to the right of the logo, which overlays over the left side of the montage. This is a special graphic which is 128 (w) x 140 (h) pixels and has a transparent gradient, with the opacity going from 100% to 0% from left to right. The left side of the transparent piece should match up with the right hand side of the logo. This means that we can have a smooth gradient/transition from the logo area to the montage. The transparent piece can have some graphics on it, and does not need to be plain. See in the example below from KF in the theme examples.

Creating the Transparent Piece

These instructions are for the software GIMP which is free and available for most operating systems. GIMP version 2.4.2 was used in this example.

First create a suitable version of the far left piece above (without transparency). Assuming the graphic is on one layer, right click the layer in the layer dialog, and choose add alpha channel. If this option is greyed out, then the layer already has an alpha channel, which is fine. Then right click on the layer again, and choose add layer mask. You should get a window asking how to initialize the layer. Just choose White (full opacity) and click add. The layer dialog should now show the mask to the right of the layer preview, and it should be automatically selected. Now choose the blend tool. In the tools options dialog, you can choose the Gradient to use. Click the Gradient button and select the FG to BG (RGB) gradient. Also make sure the other settings match those in the shots below. One this is set, you need only to use the gradient tool on the image, dragging it to make a horizontal line from the far right of the image to the far left.

GIMP Layer dialog showing layer with mask added
GIMP Gradient tool dialog showing required settings for creating transparent gradient

Some Theme Examples

KF's Theme Pieces

Logo
Transparent Piece with continuaton of owl graphic
Montage (scaled -click for full size)

Superfrog/Team17 Theme Pieces

Team17/Superfrog Logo
Team17/Superfrog Transparent Piece
Team17/Superfrog Montage (scaled -click for full size)

Agony Theme Pieces

Agony Logo
Agony Transparent Piece
Agony Montage (scaled -click for full size)

Help is Available

We can help you with any questions you have regarding creation of themes, and we can add the transparency for you, so long as you give us a piece of graphic which fits to the right hand side of the logo.

Please contact User:BuZz or email him directly (buzz [at] exotica.org.uk) to submit a theme. You can use the discussion area on this page for help, or to get feedback, or use the forums