Donnerstag, 14. Dezember 2017, 5:34 UTC+1

Du bist nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: Kims Comiczeichenkurs Forum. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

Jan

Webmaster

  • »Jan« ist der Autor dieses Themas

Beiträge: 406

Wohnort: London, UK

Beruf: Freelance Graphic Designer

  • Private Nachricht senden

1

Mittwoch, 29. Oktober 2003, 02:01

Anleitung zur Bildervorbereitung für den Upload

Hi!

In Diesem Tutorial soll es darum gehen, wie ihr am besten Grafiken fürs Internet vorbereitet um sie in diesem Forum hochzuladen.

Wem das hier alles zu viel ist, muss einfach mal ganz unten gucken – da ist eine Zusammenfassung.

Das Problem, vor dem ich nun stehe, ist das die meisten von euch unterschiedliche Grafikprogramme benutzen.
Ich versuche also so allgemein wie möglich und so präzise wie nötig zu sein.
Ich benutze in meinem Tutorial das Programm Adobe Photoshop.
Vom Prinzip her sind alle Optionen in allen anderen Programmen, wie z.B. Paint Shop Pro, ACDSee Foto Canvas, und sogar MS Paint ähnlich.

Wenn ihr Fragen habt, antwortet einfach auf diesen Thread.
Ich werde das Tutorial dann dementsprechend anpassen und die Antwort wieder löschen.


Fangen wir mal an mit ein paar Basics:
Im Internet ist es wichtig, dass Bilder eine möglichst geringe Dateigröße haben.
Um diese gering zuhalten werden Grafiken Komprimiert.
Die verbreitetsten Formate für komprimierte Grafiken sind: GIF und JPG (bzw. JPEG)
Grob gesagt ist der Unterschied folgender:
GIFs sind hauptsächlich für Bilder geeignet mit WENIGEN Farben, z.B. schwarzweiß Bilder oder Skizzen.
JPEGs sind besser geeignet für Bilder, die viele verschiedene Farben haben, wie z.B. Fotos.


Fangen wir an mit dem GIF-Format.
Wir wollen nun die Vorbereitung eines Bildes fürs Internet anhand des folgenden Beispiels üben:



Dieses Bild (übrigens von Kim gezeichnet) wollen wir nun im Internet publizieren.
Ich finde das Bild passt schon ganz gut und der Betrachter soll es auch ungefähr in dieser Größe zu sehen bekommen.
Also einfach speichern, ne? NEEEE!
Genau betrachtet steht im Titel 12,5%!
Das heißt, dass die Pixelgröße dieses Bildes viel höher ist, als das, was momentan angezeigt wird! Wenn ich das Bild auf die volle Größe zoome, sieht es so aus:



Der Ausschnitt, den man hier sieht zeigt etwas von Nase und Mund.
Das ganze Bild ist natürlich in der Form fürs Internet vollkommen ungeeignet, zum einen, weil es für den Betrachter viel zu groß ist (der sieht es nämlich auf 100%) und zum anderen, weil die Dateigröße so viel zu hoch wird.

DER ERSTE SCHRITT IST ALSO DIE ANPASSUNG DER PIXELMAßE.

Wichtig zu wissen: Die kleinste Bildschirmauflösung, mit der wir rechnen müssen zeigt 800 Pixel in der Breite und 600 Pixel in der Höhe an. Darum sollten wir diese Werte auch nur in Ausnahmefällen überschreiten.
Ein Ausnahmefall wäre z.B., wenn das Bild Text enthält, der einfach nicht mehr leserlich ist, wenn man das Bild zu klein macht. Dann muss man eben in Kauf nehmen, dass nicht das ganze Bild auf den Bildschirm eines potentiellen Betrachters passt.
Das ist aber bei unserem Beispiel nicht der Fall und wir suchen uns darum im Grafikprogramm die Option mit der man die Größe des Bildes festlegen kann.
Zu finden ist das meistens unter „Bild --> Bildgröße“ oder ähnlichem.



Hier fällt sofort etwas ins Auge:
Kim hat dieses Bild offensichtlich mit 600 DPI (Pixel / Inch) gescannt.
Dpi heißt Dots per Inch und gibt an, wie viele Pixel auf der Länge eines Inches untergebracht werden sollen.
Je höher dieser Wert, desto größer die Datei und desto mehr kann man ohne Verlust ranzoomen.
Für das Internet ist das aber unnötig und darum fangen wir hier gleich an:
Wir ändern die DPI Zahl auf 72, das ist genau das, was unser Monitor anzeigen kann.
Falls euer Bild schon auf 72 DPI eingestellt ist, könnt ihr diesen Punkt natürlich überspringen.



Wie ihr gemerkt habt, hat sich gleich auch die Pixelbreite und die Pixelhöhe verändert.
Wir klicken darum nun erstmal auf ok um zu schauen, wie groß unser Bild nun ist:



Das Bild hat nun eigentlich schon die richtige Größe zum Veröffentlichen.
Es ist mit einer Größe von 315 X 389 Pixeln wesentlich kleiner als die besagte Auflösung von 800 X 600.
Um aber ein Beispiel zu geben, wollen wir dieses Bild noch kleiner ins Internet stellen!
Wir rufen also erneut den Bildgröße-Dialog auf und kümmern uns diesmal um die Pixelgrößen:



Wir tragen für die Höhe die Zahl 290 ein.
Bei den meisten Programmen wird die Breite gleich proportional angepasst, damit das Verhältnis von Höhe und Breite das gleiche bleibt und das Bild nicht verzerrt wird.
Ein Klick auf „OK“ beschert uns ein Ergebnis: Ein Bild mit der Auflösung 235 X 290.

Hier ein Beispiel, was passiert, wenn die Höhe des Bildes nicht proportional angepasst wird:



Der arme Karl sieht total gequetscht aus, weil zwar die Höhe des Bildes verändert wurde, die Breite aber gleich geblieben ist.
Also immer darauf achten, dass Höhe und Breite immer im richtigen Verhältnis stehen!


Nun haben wir also unsern Karl in der richtigen Größe vor uns.
Jetzt müssen wir ihn nur noch richtig speichern!

Darum kommen wir zum zweiten wichtigen Punkt:
DATEIGRÖßENOPTIMIERUNG DURCH DIE RICHTIGE KOMPRIMIERUNG.

Wie gesagt ist es bei Bildern mit einer so geringen Farbvielfalt sinnvoll sie als GIF zu speichern.
In Photoshop gibt es nun unter „Datei“ die Option „Für Web speichern“.
Bei andern Programmen heißt das ganze sicher ähnlich.
Falls ihr nichts in der Richtung findet, wählt einfach „Speichern Unter“ aus.
Wählt nun als erstes als Dateitypen „GIF“ aus.

Ich zeige nun wie man mit verschiedenen Einstellungen die Qualität und Dateigröße eines Bildes entscheidend verändern kann.



Die Farbpalette ist bei einem GIF-Bild vorgegeben.
Je mehr verschiedene Farben, desto größer die Datei.
Wenn ich nun zum Beispiel die Farben auf 4 reduziere, dann erhalte ich folgendes Resultat:



Das ist natürlich wenig zufrieden stellend, auch wenn die Dateigröße dieses Bildes nur 5,8 KB (Kilobytes) beträgt.
Die Dateigröße seht ihr entweder links unten im „Für Web speichern“ Dialog oder wenn ihr auf die gespeicherte Datei mit der rechten Maustaste klickt und dann „Eigenschaften“ wählt:



Die Maximale Größe eines Bildes, das ihr ins Forum stellen könnt, beträgt 200KB.
Also können wir ruhig die Qualität noch etwas anheben.
Was passiert, wenn ich die Farbpalette auf 256 Farben stelle? (Maximum)



Nun sieht das Bild wirklich gut aus und hat eine Dateigröße von 25 KB.
Das wäre also schon geeignet zum Hochladen.
Nur ist es wirklich nötig die Qualität aufs Maximum zu schrauben?
Die Kunst am herstellen von Webgrafiken ist eine möglichst hohe Komprimierungsrate ohne sichtbaren Verlust für den Betrachter.
Wir wollen nun also Kims Internet-Speicherplatz nicht unnötig belasten und testen aus, wie weit wir die Farbpalette runterschrauben können, ohne dass das Bild schlecht aussieht.

Bei diesem Bild habe ich die Farbpalette auf 8 Farben runtergeschraubt.



Erkennt ihr einen Unterschied?
Ich auch nicht! Nur diesen: Dieses letzte bild ist nur 10 KB groß!!!
Damit ist das nun auch unser endgültiges Bild, das nun bereit zum Hochladen und Publizieren in Kims Forum ist!
Herzlichen Glückwunsch!


Nun wollen wir uns aber noch kurz dem JPG widmen.
Die Anpassung der Pixelmaße erfolgt hier genauso wie beim GIF – Unterschiede gibt es nur beim Datei-Export.
Ich habe darum hier ein Bild schon fertig zugeschnitten und möchte es nun fürs Internet exportieren!
So schaut’s aus:



Wenn ich nun wieder den „Für Web speichern“ Dialog auswähle, dann bekomme ich diese Optionen:



Rechts ist ein Eingabefeld zur Regulierung der Ausgabequalität.
Eine Ähnliche Abgfrage kommt, wenn man mit dem „Speichern Unter“ Dialog ein JPG speichert.
Um euch auch hier den Zusammenhang von Qualität und Dateigröße klar zu machen schaut euch mal das hier an:

Mit MINIMALER Qualität ist das Bild 12 KB groß:



Mit MAXIMALER Qualität ist das Bild 94 KB groß:



Es gilt also auch hier wieder einen möglichst guten Kompromiss zwischen Dateigröße und Qualität zu finden.
Ich habe mich entschieden das Bild auf 40% Qualität zu setzen.
Nun hat es 26 KB und sieht so aus:



Ganz passabel, wie ich finde und ebenfalls fertig zum Hochladen auf die Seite.

Das war’s nun also!
Sollte deine Datei nun immer noch größer als 200 KB sein, dann musst du entweder die Pixelmaße weiter verringern oder in Kauf nehmen, dass die Qualität etwas niedriger ist.



Wollen wir hier mal die wichtigsten Fakten zusammenfassen:

Pixelmaße anpassen:
- hat das Bild 72 DPI ?
- Ist das Bild schmaler als 800 Pixel und nicht höher als 600 Pixel?
Dateigröße optimieren:
- habe ich einen guten Kompromiss zwischen Aussehen und Dateigröße gefunden?
- Ist die Datei insgesamt kleiner als 200 KB?
Ich brauche mit dieser Prozedur ca. 2-3 Minuten pro Bild.
Mit ein wenig Übung schafft ihr das auch in der Zeit.


Abschließend noch ein paar wichtige Tipps:
Wenn ihr die Pixelmaße eurer Ursprungsdatei verändert habt, dann speichert sie danach NICHT! Wenn ihr sie später noch bearbeiten wollt ist es immer wichtig sie in möglichst guter und UNKOMPRIMIERTER Form zu haben.
Speichert eure Ursprungsdatei in einem verlustfreien, also nicht komprimierten Format ab.
Dazu gehört z.B. PSD, PSP, TIF und auch BMP.

Ansonsten dürfte ich aus dir, wenn du aufmerksam gelesen hast, nun einen ordentlichen Webgrafiker-Anwärter gemacht haben. :-)

Ich hoffe ich konnte euch helfen!
Bis dann und viel Spaß beim Uploaden.
Liebe Grüße,
Jan


P.S.: Wer nen Rechtschreibfehler findet, darf ihn behalten!

DIPI

Anspitzer

Beiträge: 64

Wohnort: Duisburg

  • Private Nachricht senden

2

Donnerstag, 30. Oktober 2003, 18:08

RE: Anleitung zur Bildervorbereitung für den Upload

Deine Anleitung ist echt spitze. Danke dafür! Hoffentlich kann ich sie dann auch entsprechend umsetzen. Jetzt weiß ich auch, warum Kim auf Dich als Webmaster zurückgegriffen hat: Du bist einfach eine Granate auf Deinem Gebiet!!!!

Krustowsky

Stiftehalter

Beiträge: 102

Wohnort: Hamburch

Beruf: Buchstabenschuppser, Schmierfink

  • Private Nachricht senden

3

Donnerstag, 30. Oktober 2003, 18:14

Yepp :D, super erklärt!!
Löblich, löblich!!!

Jan

Webmaster

  • »Jan« ist der Autor dieses Themas

Beiträge: 406

Wohnort: London, UK

Beruf: Freelance Graphic Designer

  • Private Nachricht senden

4

Donnerstag, 30. Oktober 2003, 18:41

Danke

Danke für die Blumen Jungs :)

Wollte ja eigentlich (wie angekündigt) die Antworten löschen, aber ich brings nicht übers Herz :-).

Jetzt kann ich immer hier ins Forum gehn, wenn ich mal down bin und moralische Unterstützung brauche.
Dann les ich mir einfach eure Antworten durch und mir gehts besser :D

Bis bald und viel Erfolg!
lg Jan

dusel

Praktikant

Beiträge: 613

Wohnort: CH

Beruf: schueler

  • Private Nachricht senden

5

Samstag, 23. April 2005, 20:58

RE: Anleitung zur Bildervorbereitung für den Upload

grrrr ich brings ned hin ich speichere es 290*174 pixel ab als giff geh dann ins forum antworten dateianhang durchsuchen finde das bild geh auf speichern und schliessen dann auf vorschau aber was seh ich es ist schon wieser nicht drinn was kann ich tun

oskar

Freihandkünstler

Beiträge: 3 246

Wohnort: München

  • Private Nachricht senden

6

Samstag, 23. April 2005, 21:19

Hmm...Umlaute im Dateinamen? CMYK modus eingestellt?

Frogger

leeres Blatt

Beiträge: 1 997

  • Private Nachricht senden

7

Samstag, 18. Februar 2006, 15:49

Ich hab da auch noch ne Frage!
Wenn ich ein Bild reinstellen will, geh ich einfach auf Dateianhang und Wähl das Bild aus. Wenn ich noch einen Text schreibe, kommt der zuerst. Danach wird das Bild angehängt. Wie kann ich das machen, das text kommt, dann das Bild und dann wieder Text?
MFGFROGGER
MFG
Frogger

Der Daniel

Moderone

Beiträge: 2 865

Wohnort: Mehr Stuttgart

Beruf: Praktikant

  • Private Nachricht senden

8

Samstag, 18. Februar 2006, 15:51

Dann musst du das Bild irgendwo anders hochladen (siehe Fragen Und Probleme) und dann hier drauf , da die Adresse eingeben, und dann kannst du weiter schreiben.

Frogger

leeres Blatt

Beiträge: 1 997

  • Private Nachricht senden

9

Samstag, 18. Februar 2006, 16:06

Danke! Ich hab mich immerschon gefragt, wofür die ganzen Symbole gut sind... :P
MFG
Frogger

graf_von_park

Praktikant

Beiträge: 642

Wohnort: München

Beruf: Schüler

  • Private Nachricht senden

10

Mittwoch, 22. Februar 2006, 19:18

Hi! Ich habe folgendes Problem: mein Avatar sieht nicht allzu gut aus, wenn ich ihn in der geforderten Pixelgröße abspeichere, die ist dann dank der seitenverhältnisse 100*75 pixel groß und alle anderen haben so tolle Avatars (oder Avatare?) wie machen die das und wie kann ich das mit Gimp nachmachen? Danke im voraus, GvP
Free Tibet.

Killing for peace is like fucking for virginity.

night

Vollprofi

Beiträge: 4 072

Wohnort: Aurich (urspr.Frankfurt)

Beruf: Kfm. Angestellte

  • Private Nachricht senden

11

Mittwoch, 22. Februar 2006, 22:30

also ich find jetzt nicht dass dein Avatar schlecht aussieht, aber es sieht aus als hättest oß ist du noch irgendwelche Ecken mitgescannt, die nicht mitsollen. Wie bist du denn vorgegangen und wie groß ist das Original?
Zensur der schlimmsten Art, ist die Angst vor dem eigenen Wort. (Heinrich Heine)

Der Daniel

Moderone

Beiträge: 2 865

Wohnort: Mehr Stuttgart

Beruf: Praktikant

  • Private Nachricht senden

12

Donnerstag, 23. Februar 2006, 06:14

Bitte hier rein:
Fragen Und Probleme
Hier gehts ja "nur" um das Tutorial ;)

graf_von_park

Praktikant

Beiträge: 642

Wohnort: München

Beruf: Schüler

  • Private Nachricht senden

13

Donnerstag, 23. Februar 2006, 08:13

@night: ich hab n foto von meiner zeichnung gemacht und des dann bearbeitet, ich hab leider keinen Scanner :( ich weiß nich ob sich des auswirkt, die originalgröße is halt 2048*1536 oder so, und wenn ich des dann runtersetz, sieht man halt die einzelnen Pixel, wird des besser wenn ich des einscannen lass von nem freund ?(
Free Tibet.

Killing for peace is like fucking for virginity.

Solo

Chefradierer

Beiträge: 1 048

Wohnort: Ottobrunn

Beruf: Pigmentansetzer

  • Private Nachricht senden

14

Montag, 8. Januar 2007, 16:15

??!??

Bahnhof...

Aber das heißt nichts. PC-mäßig bin ich `ne ziemliche Flasche.


Je größer der Fun - desto breiter das Grins!

LilaLaunemary

Hörnchen

Beiträge: 4 486

Wohnort: NRW

Beruf: Nüsse sammeln

Danksagungen: 2248

  • Private Nachricht senden

15

Donnerstag, 18. Januar 2007, 19:09

...Soll noch mal einer sagen, ich bin die Einzige, die Jahre nach dem letzten Eintrag wieder was dazuschreibt... :D


"I never let schooling interfere with my education." - Mark Twain

derSteffish

Praktikant

Beiträge: 756

Wohnort: Altach, Vorarlberg

  • Private Nachricht senden

16

Dienstag, 12. Februar 2008, 20:31

Zitat

Original von Solo
PC-mäßig bin ich `ne ziemliche Flasche.


Ich schließ mich an:
PC-mäßig bin ich auch ne Flasche -
drum hab ich zuhause auch nur Mac's rumstehen.
:-P
Man soll die Feste feiern mit den Quallen.

www.steffish.com

comicphil

Hobbyzeichner

Beiträge: 510

  • Private Nachricht senden

17

Dienstag, 28. Oktober 2008, 17:40

Sei doch froh, Macs sind (meistens) eine gute Sache aber wie es bei jedem PC der Spruch gilt: EIN COMPUTER IST DAZU DA DIE PROBLEME ZU LÖSEN DIE MAN OHNE IHN NICHT HÄTTE.

18

Dienstag, 28. Oktober 2008, 18:06

PC-mäßig bin ich auch ne Flasche -
drum hab ich zuhause auch nur Mac's rumstehen.
Warum ist ein Mac so viel weniger PC? Was ist an denen eigentlich so besonders? (Rasta, guck mich jetzt nicht so böse an! ;))

LilaLaunemary

Hörnchen

Beiträge: 4 486

Wohnort: NRW

Beruf: Nüsse sammeln

Danksagungen: 2248

  • Private Nachricht senden

19

Dienstag, 28. Oktober 2008, 18:13


PC-mäßig bin ich auch ne Flasche -
drum hab ich zuhause auch nur Mac's rumstehen.
Warum ist ein Mac so viel weniger PC? Was ist an denen eigentlich so besonders? (Rasta, guck mich jetzt nicht so böse an! ;))
Braucht er nicht, dafür musst du jetzt den bösen Monsterblick ertragen. ;)

Mal ehrlich, probiers einfach aus, bei nem Freund/Bekannten/etc, nach spätestens einer halben Stunde bist du verliebt. 8o


"I never let schooling interfere with my education." - Mark Twain

Karl

Tuscher

Beiträge: 2 399

Wohnort: Wien

Beruf: Irgendwannmal Cartoonist

  • Private Nachricht senden

20

Dienstag, 28. Oktober 2008, 18:21

Sagmasmalso:
Ein Mac ist ein PC, der besser aussieht und funktioniert als die anderen PCs.

Aber gings hier nicht um Bildupload? ?( :D
Wer regelmäßig vorbeischaut, wird beinahe jede Woche (wenn sichs ausgeht) mit einem frischen Cartoon belohnt!


Social Bookmarks


Thema bewerten