Antworten auf deine Fragen:
Neues Thema erstellen

TIPPS für Webdesign

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

♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥

AW: TIPPS für Webdesign

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

fakerer

Aktives Mitglied

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?
 

amelander

Nicht mehr ganz neu hier

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

undefined

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...
 
Zuletzt bearbeitet:

une_art

Wissenssauger WS2100

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

undefined

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:

 
Zuletzt bearbeitet:
B

Bleccer

Guest

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
 

andy1304

Aktives Mitglied

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

Noch nicht viel geschrieben

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

Aktives Mitglied

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

Excel (SVERWEIS...)

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!:p

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

Nicht mehr ganz neu hier

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

Noch nicht viel geschrieben

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

Aktives Mitglied

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:


@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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.349
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben