Designgröße

Hi!

Ich habe vor für mein Borwsergame ein neues Design zu machen. Alles schön und gut, aber ich weiß net welche Größen ich verwenden soll! Ich habe vor in PS (Photoshop) ein komplett Design zu machen und das dann mit Slices zu teilen. Aber ich weiß net welche Pixel/cm (Pixel oder cm) Größe ich nehmen soll, damit ich den gesamten Bildshcirm nutzen kann.

Könnte mir wer diese Größe verraten?^^ Danke im Voraus!



PS: Ich lasse das Spiel über einen Link öffnen, der oben diesen ganzen Krimsrams wegnimmt (Da wo Datei, Bearbeiten usw steht bis zum Seitenanfang ist also alles weg. Soll ehißen da ssich das Fenster nochmal um ... *nachmess* 2,5 cm erweitert.

Das Spiel wird für die Auflösung 1024 x 768 Gemacht, weil das die momentan umgänglichste Auflösung ist.




Danke im Voraus... warte geduldigst^^ Habe übrigens schon gegooglet und nichts gefunden, net das ihr Google Links angebt oder sagt "Benutz doch google!" oder Ähnliches.

mach es am besten vom design her wie bei www.inselkampf.de mit css.
Es ist schnell und unkompliziert, ich habe die erfahrung gemacht das viele modem user browser games spielen, weil es schnell und einfach ist für einen modem user.
Nim so wenig bilder wie möglich.

*hust*

Also wie heisst die Goldene Regel des Webdesigns ?

Nein nicht der IE ist müll auch wenn es stimmt :p sie heisst "Sei Kompertibel zu Niemanden"

Das heisst soviel wie bau deine seite so auf das sie jeder User ansehn kann ohne probleme egal welche auflösung und egal welchen browser sie benutzen.

Du Kannst und darfst NIEMALS davon ausgehn das der Browser wirklich im Vollbild modus ist etz.

Was wenn ich z.B. 1024 x 768 habe aber den Bildschirm teile / gleichzeitig surfe und Code ?
das sind sachen die man miteinbezihn sollte/ muss.

Wie heisst die Zweite Goldene Regel ? "Gib dem User die Wahl"
Entscheide nicht für den user.Wenn der User Bock hat alles in neuen Fenstern zu öffnen soll er es machen wenn er aber alles in einem will lass ihn eben falls machen.Und Blockiere nicht die Benutzerfreundlichkeit durch wegnehmen von Menus oder Target Atributen.

Der User muss die Webseite Controlliere und nicht anderrs rum ;)

und nun zur 3 Goldenen regel "Nutze Niemalds Photoshop"

Es ist fakto das dass Programm ein Geniales Bildbearbeitung Programm ist aber man darf es nicht als Sclicer missbrauchen.

Schneide die Einzellnen Texturen aus dem Fertigen Bild un sätze sie in ein von dir gefertigtes Tabelen oder Div rasster ein.Das hat 3 Vorteile

1,Du weisst was für was steht und kannst einfach veränderungen vornehmen.
2,Du hast keinen Überflüssigen code / bilder
3,Es ist Scalierbar !


So ich will dich nicht angreiffen ich will eben nur sagen das man es doch anderrs lösen sollte.Ich glaube in diesen Punkten stimmt mir fast jeder Webdesigner über ein :)

und noch ein tip : Trenne das Design (HTML/XHTML) vom script (ASP/PHP etz.) und bau eine Modulare bauweisse ein um das script einfacher zu erweitern ;)

@dadie dito

Ich habe mich gerade mal gereggt und beim reggen ist das design verschwunden und es ist eine 404 fehlerseite aufgetrehten. Nach dem ich die seite neuaufgerufen habe ging es wieder.


<edit>Ähm irgend wie ist es verwirrend und ich sehe da nicht durch was ich machen soll bzw. kann.</edit>

Na doll^^

Jetz bin ich noch verwirrter als vorher! Ich hatte vor es in Tabellen zu amchen. Aber ich hab Probs mit der Größe der Bilder. Ich will acuh nicht allzu vile ebenutzen, zu hohe Ladzeiten. Aber das mit dem Neuen Fenster und oben das Zeug weg mache ich. Das is wichtig.

Es sieht besser aus!
Ich hab mehr Platz für die Spieldinge, denn ich will, das auch die Nutzerdaten immer zu sehen sind!
Die Leute die mir Mut zu sprechen usw ( ^^ ) die wollen das so, und ich ehrlich gesagt auch!

Hmm.. könnte mir mal wer erklären wie man diese (Man nennt es doch so?) Barrierefreies Design macht? CSS okay, is mir klar. Aber wie macht man das dann noch mit der Tabellen Struktur usw?

Zitat:

---

Ich hab mehr Platz für die Spieldinge, denn ich will, das auch die Nutzerdaten immer zu sehen sind!

---

Un inwievern stört da diese Leiste o.O ich meine was raubt die max. 50pixel ? Ich meine
ob die nun etwas mehr scrollen oder in China fällt ein sack mehr um.Für das Bischen wenniger scrollen raubst du dem User jegliche Benutzerfreundlichkeit o.O

Zitat:

---

Hmm.. könnte mir mal wer erklären wie man diese (Man nennt es doch so?) Barrierefreies Design macht? CSS okay, is mir klar. Aber wie macht man das dann noch mit der Tabellen Struktur usw?

---

Einfach W3C Valid schreiben.Am bessten noch XHTML 1.1 wobei man da aufpassen muss wegen unserem "tollen" "freund" IE -.-

Zitat:

---

Zitat von raian

Hi!

Ich habe vor für mein Borwsergame ein neues Design zu machen. Alles schön und gut, aber ich weiß net welche Größen ich verwenden soll! Ich habe vor in PS (Photoshop) ein komplett Design zu machen und das dann mit Slices zu teilen. Aber ich weiß net welche Pixel/cm (Pixel oder cm) Größe ich nehmen soll, damit ich den gesamten Bildshcirm nutzen kann.

Könnte mir wer diese Größe verraten?^^ Danke im Voraus!



PS: Ich lasse das Spiel über einen Link öffnen, der oben diesen ganzen Krimsrams wegnimmt (Da wo Datei, Bearbeiten usw steht bis zum Seitenanfang ist also alles weg. Soll ehißen da ssich das Fenster nochmal um ... *nachmess* 2,5 cm erweitert.

Das Spiel wird für die Auflösung 1024 x 768 Gemacht, weil das die momentan umgänglichste Auflösung ist.




Danke im Voraus... warte geduldigst^^ Habe übrigens schon gegooglet und nichts gefunden, net das ihr Google Links angebt oder sagt "Benutz doch google!" oder Ähnliches.

---

also um bei 10247 x 768 pixel den ie bildschirm vollständig auszufüllen muss dein design ne breite von 1004 pixeln haben ;)

Breite 1004 Pixel... gut

Dann hab ich schonmal die Breite... XHTML? Was is das eigentlich? Das fragte ich mich schon oft!


@Dadie: Deinen vergleich mit den Säcken in China hab ich zwar net verstanden, hast mich aber trotzdem überzeugt. Damit krieg ich auch wenigstens die automatische weiterleitung nach dem Login hin!

Gut, dann mach ich mich mal an die Grafiken. Ich poste dann mal die Rohform hier rein und frage wwa ihr davon haltet. Sieht das schonmal gut aus dann werde ich das Design noch detailieren und schauen wies dnan aussieht. Ist es akzeptabel werde ich meine Zeichnerin nochmal bemühen und sie bitte ein Paar kleine Grafiken zu machen.


Danke für die Hilfe, wem noh was einfällt: POSTET!^^

Zitat:

---

Dann hab ich schonmal die Breite... XHTML? Was is das eigentlich? Das fragte ich mich schon oft!

---

XHTML ist eine weiter entwicklung von HTML.XHTML Änelt dem XML Syntax diese besagt das z.B. Jedes Tag (Tag z.B. <a></a>) ein ende haben muss.Daher heisst es in HTML

HTML-Code:

---

ich <br> will <br> das

---

in XHTML

HTML-Code:

---

ich <br/> will <br/> das

---

Man kann auch glaube ich auch <br></br> schreiben ^^

XHTML unterscheided sich vorallem in HTML von der sache das viele sinnlose Atribute weg welche alle durch CSS ersätz wurden.Auserdem ist XHTML benuzerfreundlicher aber XHTML geht es wie Linux weil die Menschen an Windows (HTML) gewöhnt sind erscheint ihnen das einfachere Linux (XHTML) schwerer.

da stellt sich aber die frage, warum sollte jemand, der sich, wie ich das jetzt mitbekommen habe, nicht so gut mit HTML/XHTML auskennt gleich auf XHTML aufbauen. Mit dem schließen aller Tags ist es ja nicht belassen dazu kommen ja noch sachen wie "Tabellen nur zur Inhaltsstrukturierung" -> daraus folgt ja das man container benutzen muss, was sicherlich nicht jedermanns sache ist, außerdem ist das optimieren der Seite auf verschiedene Browser ungleich schwieriger mit Containern da es ja so lustige Sachen wie z.B. die unterschiedliche Interpretierung der Breite von Containern bei gleichzeitiger verwendungg von border und padding vom IE und Mozilla,.... etc. pp. gibt

Mach lieber ne saubere HTML Page mit Tabellen da kann man nix falsch machen und lass dich nicht von dem XHTML gerede beeindrucken.

Was denn nun? Ich fang gleich an zu heulen!^^

Der eine sagt das, der andere sagt das... Container sind doch diese <div> 's, oder? Da bleibe ich lieber bei den Stylesheets und id's
(im style sheet z.B.

#menue1
{
ahover-color:#000000;
}

<table id="menue1">
[...]
</table>

[...]
)

als bei div containern. Danke sehr!^^ Und ich hab nur gerafft das bei XHTML und HTML der einzige Unterschied ist das XHTML immer eine ENdung haben muss, und deshalb selbst ein einfaches kleines <br> zu einem <br/> werden muss... meine frage: WAS SOLL DAS BRINGEN?!

Was es bringt - man hat eine durchgängigere Struktur und nicht mehr so viele "Ausnahmen" wie in normalem HTML.

Zitat:

---

HTML-Code:

---

#menue1
{
ahover-color:#000000;
}

---

---

Was soll das denn darstellen? Das ist aber kein valides und funktionsfähiges CSS! (wäre mir jedenfall neu) Wenn du die Hover-Linkfarbe in dieser Tabelle definieren willst, mach es doch so:

HTML-Code:

---

#menue1 a:hover {
  color: #000000;
}

---

Das ist imo besser ;)

Zitat:

---

Zitat von raian

Was denn nun? Ich fang gleich an zu heulen!^^

Der eine sagt das, der andere sagt das... Container sind doch diese <div> 's, oder? Da bleibe ich lieber bei den Stylesheets und id's
(im style sheet z.B.

#menue1
{
ahover-color:#000000;
}

<table id="menue1">
[...]
</table>

[...]
)

als bei div containern. Danke sehr!^^ Und ich hab nur gerafft das bei XHTML und HTML der einzige Unterschied ist das XHTML immer eine ENdung haben muss, und deshalb selbst ein einfaches kleines <br> zu einem <br/> werden muss... meine frage: WAS SOLL DAS BRINGEN?!

---

schön wäre es wenn es so wäre, aber es ist nicht so. Schon oben von mir genannte sache (divcontainer statt tables) ist sehr nervig und zeitaufwändig, und vor allem ist es bei etwas anspruchsvolleren Designs sehr schwer umzusetzen da IE und Moz. alles verscheiden interpretieren.

Noch was nimm lieber classes als ID's, ID's kann man nur einmal verwenden classes so of t man will.

Aha! Hab mich schon gewundert!

Classes führt man mit einemPunkt ma Anfan ein, oder?


Das mit dme a:hover hab ich ja nur mal schnell hingeschreiben. Da war mir klar das irgendein Fehler drinne war, war aber acuh nur ein Beispiel!


Nunja... Ich mach jetz erstmal ein Tabellengerüst und schau ob ich das Hinkriege, und dann mach ich die Pics, is glaub ich besser so!^^

Zum Thema Klassen schau dir lieber das hier noch mal an:
CSS Klassen

Ich persönlich designe mit Tabellen, weil Div Container mir einfach nicht den nötigen Zusammenhang untereinander geben, d.h. es sind lose Container und nicht Zellen, die fest in einer Tabelle drin hängen (man könnte sagen, das Tabellen auch nur aus Containern bestehen, weil alles im <table>-Container drinhängt, die einzelnen Zellen (<td>) in dem <tr>-Zeilen-Container usw.) Und das Argument, Tabellen seien nicht zum Designen gedacht, finde ich schwachsinnig, da die meisten Designs tabellarisch aufgebaut sind... Imo kann man Tabellen wunderbar für Designs verwenden.

Ich hab jetz mal schnell eine Rohform des Menschendesigns gemacht. (Ja eines der VIER Designs!)

Das hier wird eventuell später mal das Design der Menschen. Allerdings kommen noch verzierungen wie Schwerter usw dazu. Allerdings erst nach , oder in späteren Zeiten der Ferien, da meine Zeichnerin (MEINE EIGENE^^) momentan im Urlaub ist. Die wohnt bei mir in der Nähe und geht auf die gleiche Schule wie ich. Das bringt viele Vorteile!

Nun ja, hier eine gekürzte Form, ich muss noch ein Fenster für den Status des Users einbauen. Ich werde wohl jede Seite gerade so groß machen das sie In das Fenster passt damit keine Scollbalken erscheinen. Ich schalte sie zwar aus, aber das zerstört auch das Design wenn da die hälfte fehlt...

Nunja, hier der Link zu absoluten Rohform. Das .css File lohnt sich ach noch nicht zum angucken, da ist kaum etwas enthalten, noch nichteinmal die Links sind designed! Ich muss noch Slicen und die tabellen umformen (ist noch innerhlab von einer Tabelle) und den Rest noch ändern.

Hier, viel Spaß (^^) :
http://adrians.pyrokar.lima-city.de/roh_design.html

PS: JA NICHT IM IE ÖFFNEN! DAS SIEHT FATAL AUS! xDDD

HTML-Code:

---

<html>
<head>
<link rel="stylesheet" type="text/css" href="mensch.css">
</head>
<body>
<table height="581" width="1004">
<td class="head">
</td>
</table>
</body>
</html>

---

Wie machst du die Tabellen O_o ???

so gehört das:

HTML-Code:

---

<table height="581" width="1004">
<tr>
<td class="head"></td>
</tr>
</table>

---

Dann siehts auch im IE garantiert normal aus O_O

ô0

mal davon abgesehen, das das keine grafische höchstleistung ist und sich mit css sicher auch hätte realisieren lassen, wenn man mal von den runden ecken absieht, die ohne grafiken iirc nicht zu realisieren sind, dann würde ich sagen, dass du dringend erstmal vernünftig html lernen solltest...das sind ja wirklich sachen, die nicht mehr lustig sind:eek:

Zitat:

---

Zitat von dadie

*hust*

Also wie heisst die Goldene Regel des Webdesigns ?

Nein nicht der IE ist müll auch wenn es stimmt :p sie heisst "Sei Kompertibel zu Niemanden"

Das heisst soviel wie bau deine seite so auf das sie jeder User ansehn kann ohne probleme egal welche auflösung und egal welchen browser sie benutzen.

Du Kannst und darfst NIEMALS davon ausgehn das der Browser wirklich im Vollbild modus ist etz.

Was wenn ich z.B. 1024 x 768 habe aber den Bildschirm teile / gleichzeitig surfe und Code ?
das sind sachen die man miteinbezihn sollte/ muss.

Wie heisst die Zweite Goldene Regel ? "Gib dem User die Wahl"
Entscheide nicht für den user.Wenn der User Bock hat alles in neuen Fenstern zu öffnen soll er es machen wenn er aber alles in einem will lass ihn eben falls machen.Und Blockiere nicht die Benutzerfreundlichkeit durch wegnehmen von Menus oder Target Atributen.

Der User muss die Webseite Controlliere und nicht anderrs rum ;)

und nun zur 3 Goldenen regel "Nutze Niemalds Photoshop"

Es ist fakto das dass Programm ein Geniales Bildbearbeitung Programm ist aber man darf es nicht als Sclicer missbrauchen.

Schneide die Einzellnen Texturen aus dem Fertigen Bild un sätze sie in ein von dir gefertigtes Tabelen oder Div rasster ein.Das hat 3 Vorteile

1,Du weisst was für was steht und kannst einfach veränderungen vornehmen.
2,Du hast keinen Überflüssigen code / bilder
3,Es ist Scalierbar !


So ich will dich nicht angreiffen ich will eben nur sagen das man es doch anderrs lösen sollte.Ich glaube in diesen Punkten stimmt mir fast jeder Webdesigner über ein :)

und noch ein tip : Trenne das Design (HTML/XHTML) vom script (ASP/PHP etz.) und bau eine Modulare bauweisse ein um das script einfacher zu erweitern ;)

---

Also ne gewisse Kenntnis will ich dir nicht absprechen, aber die Regeln sind nicht so der Burner.

Zu 1:
OK, hier kann ich ja kaum widersprechen. Aber 640*480 ist Mist.... ich denke mal 800*600 reicht (man hört, dass wischen 5 und 20% der User diese Auflösung wählen.... hängt aber stark von Inhalt der Seite ab).... es sei denn, deine Seite muss unbedingt wirklich jeden User erreichen können.

Zu2:
Hier verstehe ich nicht, was du meinst... es ist doch logisch, dass ein User die Seite so weit kontrollieren kann, wie der Entwickler es wünscht. Ich wüsste auch nicht, was ich dagegen machen sollte, dass ein User jede Seite selbst in einem neuen Fenster öffnet....

Zu3:
Kann ich absolut nicht nachvollziehen...
Ich will nicht sagen, dass man mit Slices keinen Mist bauen kann, aber jeder, der etwas Ahnung hat, das vernünftig einstellt und nachbearbeitet kann damit sehr gute Ergebnisse erzielen. Mit ein paar Handgriffen kann man es auch skalierbar machen. Wichtig ist dabei nur, dass man nicht mehr Slices benutzt als nötig, damit der Code später ordentlich nachbearbeitet werden kann.

Hast du dir diese "goldenen Regeln" selbst ausgedacht?

@Orckrieger:

Ich sagte das ist eine ROHFORM nicht das End Ergebnis. Ich warte noch auf Bilder von einem netten Mädel namens Maike die mir Bilder für das Spiel zeichnet. Gute Bilder! Deshalb ist das Ding hier noch keine grafsiche Meisterleistung. ROHFORM! Hast du überhaupt gelesen was ich geschrieben ahbe... mir scheints nicht so, sorry.

@Fanrpg: Eigentlich kann ich HTML sehr gut, aber ich habe nie wirlich mit Tabellen gearbeitet.^^ Html hab ich immer nur für das Grundgerüst benötigt und dann undesignete Webpages mit PHP gemacht. Aber ich fand das die Hässlich sind und hab angefangen mich schlau zu amchen wie man ichige Designs macht, und voila CSS. Dann hab ich angefangen zu elrnen. Der Fehler mit dem <tr> Wird natürlich sofort ausgebessert.
Aber das man es nicht im IE öffnen sollte hat noch einen Grund: Bei mir im IE (obs an der Version liegt oder am Internetexplorer) unterstützt er keine durchsichtigen PNG's. Aber ich stehe nicht so auf Gif's. (Schlecht Erfahrungen. Sie haben mir oft die Farben verfälscht und ähnliches.)

@Topic: Nun ja, das mit den Bildern dauert wirklich etwas länger. Das heißt es wird auch insgesamt etwas länger dauern, da google auch nichts brauchbares ausspuckt!^^


Bitte weiter die R-O-H-F-O-R-M bewerten. (ROHFROM = Aller erstes Erscheinungsbild, nicht das ENDERGEBNIS)

Es geht ja nicht darum, das diese Seite nur eine Rohform ist - sondern darum, das eine Tabelle hiervollkommen unnötig ist, weil du nur ein einziges Bild hast -_- Das könntest du auch mit einem <img> machen. Deine "Seite" ist keine Rohform, sondern viel weniger, lediglich ein Bild. Und auch noch kein besonders tolles. Ich kann nicht besonders viel erkennen oder toll finden an deiner "Rohform" und frage mich deshalb, warum du das hier rumzeigst und bewertet haben willst? Mach erstmal eine etwas fertigere Version, indem du zB dein Bild zerschnibbelst und zu einer HTML-Seite zusammenbaust. Dann kannst du (vielleicht) daran denken, uns das bewerten zu lassen... ;)
Oder warte besser noch, bis deine Maike dir die Bilder gemacht hat und das Design komplett ferig ist. Dann wirst du hier auch nicht angemacht, weil du irgendwelchen Mist hier rumzeigst. Wenn du Probleme bei der Umsetztung hast, kannst du dich natürlich immer noch hier melden und um Hilfe bitten ;)

Hmm, ich versuche es mal. Dann mach ich jetz mal die "Heldendatenbox" und ein paar weitere Effekte. Wenn es besser wird und ich der Meinung bin das ihr es bewerten könntet poste ich es eventuell nochmal, allerdings wird das wohl eher nicht der Fall sein. Das meiste machen schließelich die weiteren Bilder aus.