Donnerstag, 18. Oktober 2018, 13:54 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:03

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!

magicmaikel

unregistriert

2

Mittwoch, 29. Oktober 2003, 08:57

Hey Jan,

da hast Du Dir ja richtig viel Mühe gemacht. Vielen Dank!

Das war aber nicht nur Arbeit, sondern Du hast auch noch richtig gut beschrieben wie man vorgehen soll.

Klar ist es auch in Deinem Interesse, dass die Leute ihre Grafiken richtig hochladen, aber nicht jeder Forums-Webmaster ist so hilfsbereit, wie Du.

Dicker Pluspunkt von

MagicMaikel

FalloutBoy

unregistriert

3

Mittwoch, 29. Oktober 2003, 14:06

Jepp, da schließ ich mich an!
endlich auch mal einer, der erklären kann, wo der Unterschied zwischen JPEG und GIF liegt.
Thanx.

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:40

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

cstueben

Maschinist

Beiträge: 27

Wohnort: Harrislee

Beruf: Dipl.-Inform. (FH)

Danksagungen: 11

  • Private Nachricht senden

5

Freitag, 12. März 2004, 15:38

RE: Danke

Respekt...gut beschrieben...

;)
MfG aus FL

Christian

jojo

Freihandkünstler

Beiträge: 2 790

Wohnort: hessen

Beruf: nix!

  • Private Nachricht senden

6

Samstag, 8. Mai 2004, 09:59

super die tipps
w w w . f r i s c h g e s t r i c h e n . n e t

comichunter

Hobbyzeichner

Beiträge: 227

Wohnort: Rostock

Beruf: Bürokaufmann

Danksagungen: 278

  • Private Nachricht senden

7

Montag, 7. März 2005, 12:51

Erst mal Respekt, tolle Tipps und ein Lob von mir das du dir die Arbeit gemacht hast!

Aber jetzt habe ich eine Frage, ?( eine schwierige, füge ich hinzu! :D Ich will ja ein Fanzine drucken und ich arbeite mit Farbkanälen in Photoshop, ein Bild besteht (später für den Druck) aus 3 Farbkanälen (schwarz, braun, grün auf weißem Hintergrund). Aber ich bekomme es nicht als JPEG oder GIF gespeichert, diese Option wird verweigert, also kann ich es nicht im Netz wiedergeben, was kann ich machen?

Wenn du es nicht im Tutorial schreiben willst, schreibe mir bitte eine Nachricht, wenn du Bescheid weißt, ich würde mich sehr freuen.

Sam

Praktikant

Beiträge: 859

Wohnort: Dresden

Beruf: Grafiker

  • Private Nachricht senden

8

Montag, 7. März 2005, 15:05

das hat glaube ich nix mit den farbkanälen zu tun, zum drucken musst du das bild in CMYK-farben umwandeln
IMAGE > MODE >CMYK COLOR

für eine webdarstellung musst du in den RGB-Modus gehen:
IMAGE > Mode RGB Color

dann müsstes funzen!
viva la leberwurst :P
view sam's blog

comichunter

Hobbyzeichner

Beiträge: 227

Wohnort: Rostock

Beruf: Bürokaufmann

Danksagungen: 278

  • Private Nachricht senden

9

Montag, 7. März 2005, 21:16

Das funktioniert leider nicht, komischerweiser verändern sich die Farben, aus Grün wird Pink usw.! ;( 8o :( :baby: Ich hatte schon gedacht, das müsste gehen. Außerdemdem kann man nur RGB auswählen, CYMK geht nicht! Komisch, ein Fehler im Programm, oder gibt es einen anderen Weg? ?(

Rastafisch

Super Moderator

Beiträge: 4 755

Wohnort: Osnabrück

Beruf: Illustrator/Comiczeichner

Danksagungen: 33

  • Private Nachricht senden

10

Montag, 7. März 2005, 23:03

Lasst uns das mal im Software Bereich weiter disskutieren.
Mach da mal bitte einen neuen Thread zu dem Thema auf, Hunter.
Dann wird Dir geholfen. ;)
Interressant wäre dann was Du für ein Programm benutzt, wie Du das Fanzin genau Drucken lässt usw.

oskar

Freihandkünstler

Beiträge: 3 246

Wohnort: München

  • Private Nachricht senden

11

Samstag, 4. März 2006, 23:51

Hallo Deadeye!
Ich bin mir nicht ganz sicher ob ich deine Frage ganz richtig verstehe. Wie man den Avatar hochlädt hast du ja offensichtlich schon rausbekommen. Wenn du ein Bild an einen Beitrag anhängen willst, dann musst du unter dem Fenster in das du deinen Text eingibst in der Zeile "Dateianhang" auf "bearbeiten" klicken, und dann das Bild von deinem Computer auswählen.
War das jetzt dein Problem?! ;)

Deadeye

Stiftehalter

Beiträge: 132

Wohnort: Hessen

Beruf: Schule

  • Private Nachricht senden

12

Mittwoch, 8. März 2006, 17:53

jo vielen dank
:D

Hillerkiller

Hillerious

Beiträge: 4 811

Wohnort: Leipzig

Danksagungen: 966

  • Private Nachricht senden

13

Mittwoch, 8. März 2006, 20:28

Na, klick doch mal, über deinem Beitrag, auf "Ändern" wenn dir dein vorheriger Beitrag nicht mehr gefällt. Da kannst du den dann auch löschen... bitte.
:D

14

Donnerstag, 6. Juli 2006, 06:05

Wenn ich die Zeichnung so abspeicher, wie Jan beschrieben, kann ich es dann auch so ausdrucken? Und kann ich das so jetzt auch noch auf diese Art umwandeln, auch wenn ich die Zeichnung schon koloriert hab und als JPEG gespeichert hab oder muss ich das alles neu kolorieren und dann gleich richtig so speichern? Also von non an werd ich es immer gleich so machen! Vielen Dank Jan, ist echt klasse wie viel Mühe du dir da gemacht hast! :D :)

clein

Stiftehalterin

Beiträge: 125

Wohnort: Österreich

  • Private Nachricht senden

15

Sonntag, 10. Dezember 2006, 02:12

hmmm ... irgendwas mach ich falsch *grübel*

kann keine bilder einstellen .. immer wird gemeckert .. falsche endung oder zu gross

JA, das Bild hat 72 DPI !
JA, das Bild ist schmaler als 800 Pixel und nicht höher als 600 Pixel!
JA, die Datei ist insgesamt kleiner als 200 KB!

und nun ?( ... hätte mich euch ja gerne "bildlich" vorgestellt!

Gartenfee

Hobbyzeichnerin

Beiträge: 290

Wohnort: Niedersachsen

  • Private Nachricht senden

16

Sonntag, 10. Dezember 2006, 08:59

ach Frau Clein,
meinste, dass deine Bilder wirklich sooo zeigungsbedürftig sind? :D
Wer weiss, warum die Technik streikt. Das ist ein Zeichen!!!!! 8)

Du wirst hier erstmal Weihnachtsplätzchen verteilen müssen, bevor der Techniker dich freigibt. :]








Achtung Spass: Ich kenne Frau Clein schön länger und vor allem ihre Zeichnungen und ICH weiss schon, was ihr verpasst, wenn ihre Werke hier nicht zu sehen sind. :P Freut euch auf sie.
Und ich behaupte mal, ich darf so ein Spässchen mit ihr machen
Hauptproblem beim Zeichnen: Der Kopf - er denkt zu naturgetreu - meine Hände leider nie.... ;(

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Gartenfee« (10. Dezember 2006, 09:00)


Uhu

Tuscherin

Beiträge: 2 441

Wohnort: früher Mannheim, jetzt Düsseldorf

Beruf: Däumchendreher

  • Private Nachricht senden

17

Sonntag, 10. Dezember 2006, 10:03

Herzlich Willkommen clein
dann wissen wir ja endlich, wer für die letzten Forumsausfälle verantwortlich ist ;) :D *spässle*

liegts diesmal vielleicht an der Endung ? Es sollten GIF oder JPG (bzw. JPEG) -Dateien sein. Sonst fällt mir auch nix zu ein.

Falls du die Möglichkeit hast, einfach "für Web" abspeichern, dann macht das Grafikprogramm schon einiges von allein.
Das Einzige, was ich in meinem Leben bedaure, ist,
keine Comics gezeichnet zu haben.
Pablo Picasso

clein

Stiftehalterin

Beiträge: 125

Wohnort: Österreich

  • Private Nachricht senden

18

Sonntag, 10. Dezember 2006, 10:41

danke UHU für dein "willkommen" !!! =)
JA, .. es sind jpg dateien! ... werds heut einfach nochmal versuchen.

und SIE da FRAU gartenfee *lach* .... AB zu deinen schattenübungen sonst passiert noch'n unfall *zerkugel*

Gartenfee

Hobbyzeichnerin

Beiträge: 290

Wohnort: Niedersachsen

  • Private Nachricht senden

19

Sonntag, 10. Dezember 2006, 12:55

Höa ma
etwas mehr Respekt vor dem Alter, du Jungspund :] :] :]

(man stellt nicht ungestraft seinen Geburtstag in sein Profil!!!)

Und ich würde jetzt gern einen Counter in deinem Profil sehen, wieviele dort nachgucken gehen.....grööööhl
Hauptproblem beim Zeichnen: Der Kopf - er denkt zu naturgetreu - meine Hände leider nie.... ;(

Gartenfee

Hobbyzeichnerin

Beiträge: 290

Wohnort: Niedersachsen

  • Private Nachricht senden

20

Sonntag, 10. Dezember 2006, 13:47

Jan,
es wäre vielleicht wichtig, wenn du am Ende in dein Tutorial schreibst, dass man es trotz hochladen und speicherns hier in der Vorschau NICHT sieht. Das es aber nach dem Senden erscheint wie hochgeladen.

Ist mir nur so aufgefallen..... :D
Hauptproblem beim Zeichnen: Der Kopf - er denkt zu naturgetreu - meine Hände leider nie.... ;(

Social Bookmarks


Thema bewerten