Das ist quasi eine Ausschreibung in zwei Losen

1: Rand für die Karten, die im Spiel sichtbar sind, wenn man aus einem Ort weiterreisen will.

Da diese Karten sehr unterschiedlich groß sind, muss der Rand variabel im Spiel aufgebaut werden können und sich dann um/hinter/auf das Bild legen. Da ist also auch ein Teil Programmierung notwendig.

Der Rand soll möglichst schmal sein und das Bild nur sauber und etwas augengefälliger als bisher vom Rest der Ansicht trennen. Es soll einfach schicker aussehen.




2: Rand für größere Karten wie bspw. im Wiki-Atlas.

Dies muss eine Möglichkeit, in welcher Form auch immer sein, die von uns erstellten und zukünftig zu erstellenden Karten per Photoshop (ich arbeite mit CS5) mit einem hübschen Rand zu versehen, der den Karten ein angenehmes Aussehen verleiht. Ich will das gar nicht weiter einschränken, hauptsache es ist für alle möglichen Größen nutzbar (skalierbar) oder, was noch geiler wäre, eine Art Filter o.ä. der größenunabhängig funktioniert.

Das einfachste wäre über CSS:

Code: Alles auswählen

img {
  border:8px ridge #CC9940;
}

Vorteil: Fast kein Aufwand. Nachteil: Unterschiedliche Darstellung in verschiedenen Browsern. Sehr schlichter Rahmen.

Wenn es etwas Grafisches sein sollte, dann müsste man mindestens 4 div einbauen, die dann die Hintergrundgrafiken tragen, so wie in der angehängten Skizze. (Die überstehenden Kanten würden durch die Vorgaben der tragenden div verborgen. Wenn man dann noch die Ecken herausarbeiten will (Was vermutlich nötig wäre), wären es noch 4 div mehr. Nachteil: div-Suppe. Vorteil: Hintergrundgrafiken müssen nicht vom Browser skaliert werden.

Ferner fällt mir noch die Möglichkeit einer skalierbaren Hintergrundgrafik ein. Das hätte aber den Nachteil, dass die Breiten des Rahmens unter Umständen ziemlich unterschiedlich erscheinen, je nach Dimensionen des Kartenbildes. Zudem führt das Skalieren von Pixelgrafiken durch den Browser auch nicht immer zu den schönsten Ergebnissen.

Das wären die drei Lösungsansätze, die mir spontan einfallen.

Was davon stellst Du Dir denn vor? Könntest Du vielleicht Beispiele von Rahmen verlinken, die so in die von Dir gewünschte Richtung gehen?

Ich wollte ja extra keine Vorgaben machen, um nicht einzuschränken, aber sowas wäre klasse:


oder so, mit den keltischen Verschnörkelungen (was mir persönlich am besten gefällt):


oder sehr pur:

Nach einigem Nachdenken komme ich bei einer solchen grafischen Lösung auf mindestens 4 div. Ich habe mal eine Skizze anghängt, wie das aufgebaut werden könnte.
Eine Grafik für Rand oben, Rand links und Ecke oben links sowie falls nötig Hintergrund
Eine Grafik für Ecke oben rechts (rot)
Eine Grafik für Rand unten, Rand rechts und Ecke unten rechts.
Eine Grafik für die Ecke unten links (grün)
Die Grafiken würden dann je nach Grösse des bildtragenden div übereinandergleiten. Der sichtbare Bereich wäre dann wie auf der Skizze gezeigt, der farbenstarkte innere Bereich. Die "überstehenden" Teile der Grafiken würden als Hintergrundbilder nicht angezeigt werden, wenn sie dem div "überhängen".

Das wäre das einfachste, was mir einfällt.
Das würde aber nur funktionieren, wenn die Ränder keine zu zentrierenden Verzierungen haben, wie an dem keltischen Beispiel von Athuran. Dann wären mehr div nötig, wie in meiner ersten Skizze.

Wenn man ein Pergament unter die Karten legen wollte, so wie die letzten beiden Beispiele und meine zweite Skizze, dann hätte man das Problem mit den Farben. Das würde meiner Meinung nach nur gut wirken, wenn die IG Karten auch monochrom sind, wie in den Überblickskarten.

Aber vielleicht fällt ja noch jemandem was passenderes ein.