Welches Bildformat, für die ganze Seite ?

[hdd_1]

Hallo zusammen

Ich habe Logo im .AI Format (Illustrator)

Ich würde gerne den Logo sozusagen über die ganze Seite "zeigen" links und rechts kommt noch die Navigation (je 2 == 4 Buttons) das alles sollte animiert sein, also Logo sollte als Explosion erscheinen und wenn jemand auf einen Button klickt dann sollte sich der Logo um 180 Grad drehen und der Inhalt wird gezeigt. Und das alles noch in einen CMS einpacken.

Hier noch was ich möchte (Ein Bild sagt mehr als tausend Worte)

Meine Fragen:
- Was sollte ich am besten für Bildformat verwenden ? Die Seite sollte auch (möglichst schnell) angezeigt werden und nicht 30,40 Sekunden lang laden....

- Wie wäre es am besten zu realisieren: jQuery, Canvas ...?

Danke

 

[ullihantke]

Ist das für eine Präsentation?

Wenn du es als html umsetzen willst würde ich png nehmen oder du machst eine PowerPoint Präsentation.

 

[hdd_1]

Hallo

Nein, es ist nicht für eine Powerpoint Präsentation, es sollte eine
normale Webseiten entstehen, mit CMS (nicht html sondern php)

 

[msa1989]

@hdd_1
Ich würde das von deinem Bild abhängig machen. Es kann sein, dass bereits ein gif ausreichende Qualität bietet. Je nach Einstellung der Farben (z.B. 128) kommt dann wirklich ein ganz schön kleines Bild bei raus, was schnell von jedem geladen werden kann.
Zusätzlich solltest du dir mal was webp Format anschauen (vor allem von Chrome unterstützt). Dann brauchst du halt eine Funktion die je nach Browser dann das passende Bild lädt.
Ich teste meine Seiten immer mit einer Geschwindigkeit von DSL 2000. Wenn der Aufruf länger als 3 Sekunden dauert, dann verändere ich was, da ich als Benutzer auch keine Lust hätte länger zu warten.

 

[ovbb]

mit CMS (nicht html sondern php)

???

beim bild reichen 72dpi aus für die darstellung im web (nicht zum drucken). hast du irgendwelche browsereinschränkungen? ansonsten könntest du dir auch noch das svg-format ansehen, welches du direkt aus AI exportieren kannst. hierbei musst du aber auf die briwserkompatibilität achten.

 

[gmw]

auch mal OT
warum Fragezeichen?
Ich trinke auch kein Alkohol, nur Bier

 

[ovbb]

Trotzdem vergleichst du Bier und Hopfen nicht miteinander, auch wenn du angeblich keine Alkohol trinkst.

 

[gmw]

dir kann man auch nichts vormachen

 

[ovbb]

programiere ja auch html

btt: vielleicht kannst du uns ja auch das logo mal zeigen. jenachdem wieviele farben du verwendest kann man es auch in anderen formaten und geringerer qualität abspeichern ...

 

[hdd_1]

Das Logo ist schwarz-weiss

Ich würde gerne einen Logo sozusagen über die ganze Seite "zeigen" lassen, links und rechts kommt noch die Navigation (je 2 == 4 Buttons) das alles sollte animiert sein, also Logo sollte am Anfang als Explosion (oder ein andere Effekt) erscheinen und ein paar Sekunden später sollten die Buttons sichtbar sein (Foto 1)

Siehe Foto 1



Und wenn jemand auf einen Button klickt (egal links oder rechts) dann sollte sich der Logo um 90 Grad drehen (es qird quasi Rückseite von Logo angezeigt) und der Inhalt (News, Gallery, Kontaktformular..) sollten im Rahmen von der Logo erscheine (Foto 2)

Siehe Foto 2




Und das alles noch in einem CMS bzw. in WordPress (weil die News sollten editierter sein + 10 Mitglieder (Accounts erstellen für geschützten Bereich)

Danke.

 

[Harald aus RE]

...ich teste meine Seiten immer mit einer Geschwindigkeit von DSL 2000. Wenn der Aufruf länger als 3 Sekunden dauert, dann verändere ich was, da ich als Benutzer auch keine Lust hätte länger zu warten.

OT/ Hallo,

wie reduzierst Du die DSL Geschwindigkeit, Im Router? Bei mir besteht auch das Problem, da ich eine VDSL 25 habe.

Gruß Harald OT-ENDE/

 

[msa1989]

@Harald aus RE
Hast ne PM, das passt hier nicht in den Thread

@hdd_1
Wenn du noch Animationen drin haben willst, dann musst du dich in Javascript einarbeiten. Ich hab hier mal ein paar Beispiel-Zeilen. Ich hab damit ein DIV auf 100% der Seite vergrößert, und den Ursprung auf der Seite ganz links oben im Eck gesetzt.

function enlarge() {
   $('#logo').animate({               // ID: Logo animieren
     width: '100%',                   // Breite auf 100% setzen
     height: '100%',                   // Höhe auf 100% setzten
     top: 0,                           // An der Seite ganz oben
     left: 0,                         // An der Seite ganz links
     opacity: 1                       // Deckkraft auf XX% (hier 100%)
   }, 1000);                           // Gesamtdauern = 1s
}

Vermutlich brauchst du die "Top", und "Left" - Zeilen nicht, weil du das ja von Anfang an in CSS beschreiben kannst wo es stehen soll. Ich würde das Objekt an einer bestimmten Stelle positionieren (bei dir rechts neben den Button auf der linken Seite) und Breite und Höhe auf 0 setzen. Anschließend kannst du mit "animate ... width... height" das Objekt auf die gewünschte Größe "ziehen". Zu guter Letzt musst du nur noch die Zeit einstellen.
Dasselbe gilt natürlich für die Buttons die du einblenden möchtest.

 

[ovbb]

Denke, dass das Ganze nicht so einfach sein wird.
Man muss ja bedenken, dass unterschiedliche Geräte unterschiedliche Größen haben.
Da wird das mit dem Logo recht kompliziert und der Platz recht schnell sehr rar.

Frag mich die ganze Zeit warum das explodieren muss?

Die Idee mit dem Umdrehen und dies als Platz für den Inhalt zu verwenden klingt da weit spannender, ganz egal ob es gutes design ist oder nicht.

 

[msa1989]

@ovbb:
Mit den unterschiedlichen Displaygrößen hast du recht. Aber auf einem Hochkant - Format (z.B. iPhone) da kann man eh nicht links und rechts die Buttons auch noch anzeigen, wenn das Design mobile Geräte unterstützen soll. Und so machen es einem eigentlich die Prozent-Werte recht einfach, weil 100% ist immer der ganze Bildschirm, egal wie groß ;-)
Da muss man sich halt überlegen welche Größen man in welcher Optik bedienen will

 

[ovbb]

sicher. ich persönlich surfe am handy auch immer im querformat.
gebe nur zu bedenken, dass die seite sicher auf eine monitor >22" sicher super aussieht. auf kleineren geräten erkennt man wahrscheinlich das logo nicht. ganz egal ob es unproportional nach unten gedehnt wird (falls man es um den content herum gibt) oder der sichtbare bereich für den content einfach zu klein wird (falls der content im logo drinnen sein).