TIPPS für Webdesign

BlackBoSs · 11.03.2011

Hallo Freunde,

Ich hab immer wieder dasselbe Problem mit den Webseiten die ich designe.
Und ich wollte euch mal um eure Tipps bzw Hilfe bitten.

Und zwar mein Problem ist .. immer wenn ich im Photoshop designe .. und diese dann per html dann uploade .. brauchen die bilder ein paar sekunden bis sie geladen sind ?

als was muss ich die fotos speichern ??
ich speichere sie immer als jpeg ..

Lg

pessi55 · 11.03.2011

AW: TIPPS für Webdesign

Hast du’s schon mal mit
Datei - Für Web und Geräte speichern - JPEG
versucht?

BlackBoSs · 11.03.2011

AW: TIPPS für Webdesign

Ich speichere es immer so ..

sonst bekomme ich es ja nicht html datei ...

fakerer · 11.03.2011

AW: TIPPS für Webdesign

kommt auf die Grösse drauf an und deine Leitung grosse Bilder bei schlechter Leitung brauchen halt mal ein wenig weil die Daten eifach übertragen werden.
Du kannst auch die Qualität der Bilder reduzieren dann werden sie auch kleiner.
Hast vielleicht mal n Link zu einer Seite wo du meinst das die Bilder so lange laden?

BlackBoSs · 11.03.2011

AW: TIPPS für Webdesign

jeps hab ich ..
kannst dir gerne mal anschauen ...

** Crazy Sun ** www.crazy-sun.com **

naja auch bei super leitung bei mir daheim ist es so das sie einzeln geladen werden ...

amelander · 11.03.2011

AW: TIPPS für Webdesign

Die Bilder werden doch sehr zügig angezeigt, wie man aber ´ne 1,5 MB Hintergrundgrafik einbinden kann ??
Das Bild erschägt mich m.M. nach, könnte ruhig etwas dezenter eingebunden werden.
Nicht jeder hat ´ne schnelle Leitung.

VG

cebito · 11.03.2011

AW: TIPPS für Webdesign

Wie ich das hier rauslese, handelt es sich um ein typisches zerslicetes PS-Layout mit zig unnützen Bildern die kein Mensch braucht. Jedes dieser Bilder verursacht einen HTTP-Request beim Aufruf der Seite, im Normalfall verarbeitet der Browser max. 3 Anfragen gleichzeitig (kann man sich mit Firebug schön anschauen).
Wenn du ein Design mal online stellen kannst, kann man dir Tipps geben, wo du Bilder zusammenfassen oder auch gänzlich einsparen kannst.

Edith sagt - aja, hab ich doch richtig gedacht, neckisches Tabellendesign...

une_art · 11.03.2011

AW: TIPPS für Webdesign

Wie mein Vorredner schon sehr richtig bemerkte hast du viel zu viele Grafiken. Passiert immer, wenn man das Design schlicht in Photoshop sliced und es automatisch als HTML ausspucken lässt.
Du solltest da manuell noch mal drüber gehen, so kannst du zumindest einen Teil der Bilder einsparen. Normal- und Hover-Zustände in der Navi kannst du als ein Bild machen und dann per CSS den Hintergrund verschieben. Auch der Hintergrund im Main-Bereich muss nicht aus so vielen Grafiken bestehen da es sowieso ein Muster ist. Eine Grafik, die mit repeat-x ausgestattet ist, reicht da. Evtl sogar so anlegen dass es komplett in x- und y-Richtung widerholt werden kann.

Achso die Edith möchte noch hinzufügen: Schau dir mal in Ruhe HTML und CSS an und versuch dann deine gesliceten Designs aus Photoshop selbst zusammen zu bauen. Da kommt was sehr viel besseres bei raus und du lernst vor allem, wie man es richtig macht.

cebito · 11.03.2011

AW: TIPPS für Webdesign

Kurz mal analysiert, den Content ausgenommen lässt sich das ganze Design mit 3 Grafiken (Header, Contenthintergrund[gekachelt], Navi als Sprite) + dem großen Hintergrundbild darstellen - im Moment hats ca 70!!! Dafür solltest du allerdings anfangen dich mit css zu beschäftigen. Mit einem Tabellenlayout wird das nichts.

Hier mal eine Visualisierung der Anfragen:

Bleccer · 11.03.2011

AW: TIPPS für Webdesign

Also ich mach das immer so ich vergleiche alle Dateitypen ich schau was sieht noch gut aus und was hat zugleich am wenigsten MB das ist bei mir meistens das Gif oder PNG8. Wenn du etwas mit Transparenz im Hintergrund machst braucht das oft mehr MB als wenn du den Hintergrund einfach in der Farbe färben würdest wie deine Webseite. (Hoffe du weißt was ich meine)

Jpg ist eigentlich besser für Bilder

BlackBoSs · 11.03.2011

AW: TIPPS für Webdesign

hmm wie es aussieht ists zeit für css lernen ..
danke für eure tipps und vorschläge...

andy1304 · 11.03.2011

AW: TIPPS für Webdesign

jep, so sieht´s aus. Setze das Layout mit Div´s und CSS um, dann kannst Du die ganzen "Abstandhalter.gif" sparen. Nur so bekommst Du einen sauberen Code, PS ist dafür nicht geeignet.

Superking88 · 20.03.2011

AW: TIPPS für Webdesign

haha ja bin auch momentan am Designen im PS aber werde mir auch nochmal ein bisschen CSS angucken müssen. denkt ihr mit Splines in PS kommt man am schnellsten an die Bilder?

andy1304 · 21.03.2011

AW: TIPPS für Webdesign

Hallo,
Du meinst sicher "Slices" und nicht "Splines". Slices sind eine gute Möglichkeit, Dein Layout entsprechend zu "zerteilen" Damit Du es mit HTML und CSS zusammen setzten kannst.

MainAngler · 21.03.2011

AW: TIPPS für Webdesign

:rolleyes:

*Kopf schüttelt*
Nutze bloß nicht die Ausgabefunktion von PS um den HTML&CSS-Code zu bekommen sondern slice deine Bilder, lass nur Bilder ausgeben und schreib den Code händisch!
Hier hast du zudem, wie schon geschrieben wurde, ein Tabellenlayout und das ist in der Zeit von Web2.0 schon längst out!

Die Bilder laden bei mir trotz langsamen DSL relativ zügig.

Was ich allerdings bemerkte ist, dass selbst nachdem die Bilder geladen wurden die Seite wohl noch eine gewisse Zeit nachläd.:uhm:
Was da geladen wird - keine Ahnung.

Auch wurde ja schon erwähnt, dass es zu viele Einzelbilder sind.

Falls du es nicht mit HTML&CSS hinbekommst -> PN!

MiBo21 · 21.03.2011

AW: TIPPS für Webdesign

tjoa, das ist meist, dass wo ich (und wohl auch die meisten Anfänger im Bereich PSD Umsetzungen) auch noch dran scheitere.... genau zu lokalisieren, welches Bild macht Sinn bei einer Umsetzung und was kann einfacher.
Klar ist, denke ich, dass man seine PSD erstmal nach "Kachelmöglichkeiten" absuchen sollte.
Danach gilt es die "unikaten" Bereiche der Seite zu lokalisieren, da diese meist auch ein eigenes Bild benötigen.

Ich versuche auch immer zu vermeiden, dass große Slices verwendet werden, aber ich habe noch keine richtige Methodik entwickelt um festzulegen, was ich slice, was ich kachele und was ich ggf. mit einfacher background-colour festlegen kann. Gerade Farbverläufe oder strukturierte Backgrounds machen wir da ebenfalls zu schaffen.

Demnach kann ich den Threadersteller verstehen, dass er den "einfachsten" Weg geht und das zu Lasten der Performance in Kauf nimmt um schnell zum Ziel zu kommen.

Gruß
Mibo

Derschmi · 25.03.2011

AW: TIPPS für Webdesign

Bilder Slicen und den Code selber schreiben

Ist zwar mühsam aber so kannst du eine ordentliche Website schreiben.

Solla · 25.03.2011

AW: TIPPS für Webdesign

cebito schrieb:
Kurz mal analysiert, den Content ausgenommen lässt sich das ganze Design mit 3 Grafiken (Header, Contenthintergrund[gekachelt], Navi als Sprite) + dem großen Hintergrundbild darstellen - im Moment hats ca 70!!! Dafür solltest du allerdings anfangen dich mit css zu beschäftigen. Mit einem Tabellenlayout wird das nichts.

Hier mal eine Visualisierung der Anfragen:

@cebito: Würdest Du mir bitte verraten was für ein Analysetool Du dafür verwendet hast - auch wenn ich Dich mit dem Beitrag zum Urheberrecht offenbar unbeabsichtigt auf die Palme gebracht habe? :rot:

Ja an CSS führt wirklich kein Weg vorbei, aber wenn Du erst mal siehst wie einfach dass sein kann wirst Du Dich vermutlich fragen warum Du jemals ineinandergeschachtelte Tabellen verwendet hast, die ja von der Übersichtlichkeit Horror sind! Also nur Mut und ran an CSS - ist wirklich nicht so schwer! Google mal nach Little Boxes!

B.G.
Solla

cebito · 25.03.2011

AW: TIPPS für Webdesign

Das kann man mit firebug anschauen, auf netzwerk und dann entweder bilder oder css oder, oder, oder alle anzeigen lassen...

Hier eine kleine Einführung, die meisten wissen nicht, welche Möglichkeiten Firebug hat ... http://getfirebug.com/video/Intro2FB.htm

Solla · 25.03.2011

AW: TIPPS für Webdesign

Vielen Dank Cebito!

Auch für den Link zu dem tollen Video!

B.G.
Solla