Da speziell im Grafikforum täglich immer wieder dieselben Fragen auftauchen hab ich beschlossen mal ein FAQ (Frequently Asked Questions) Thread zu machen.
Ich beantworte hier mal alle Fragen die mir so einfallen - wenn es weitere FAQ's gibt wäre ich froh über eine PN oder einer Antwort hier im Thread damit ich ihn ergänzen kann! Danke. Also..
# Inhalt
- Grundlegendes zu Grafik
- Was gibt es für Grafikprogramme?
- Wo bekomme ich ein gratis Grafikprogramm?
- Wie/Womit erstelle ich ein animiertes Bild?
- Darf ich Grafiken/Webdesigns kopieren?
- Wie erstelle ich ein Webdesign?
- Wie schneide ich ein Bild aus?
- Bild als Hintergrund?
# Grundlegendes zu Grafik
Man unterscheidet Grafiken hauptsächlich in 2 Kategorien: Pixel- und Vektorgrafiken.
3d Grafiken sind Vektorbilder.
Pixel- / Bitmap- oder Rastergrafik:
- http://de.wikipedia.org/wiki/Pixelgrafik
Grafikformate: .jpg .gif .png .bmp usw.
Die meisten Grafiken die wir kennen sind Pixelgrafiken. Im Prinzip sind es einfach Bilder die aus mehreren Bildpunkten (Pixeln) zusammengesetzt zu einem Bild sind. Die Bilder die wir im Internet nutzen sind Pixelbilder. Der Nachteil dieser Bilder ist dass man sie nur in der Originalgrösse nutzen kann - wenn man sie vergrössert werden die Pixel gestreckt und die Qualität des Bildes wird schlechter.
Beispiel Pixelbild:
[Blockierte Grafik: http://www.altours-bg.com/Altours_files/hotels/sandanski/spartacus-190x190.gif]
Pixel vergrössert:
[Blockierte Grafik: http://east-handel.de/images/pixelgrafik01cols2cols2.gif]
Vektorgrafik:
- http://de.wikipedia.org/wiki/Vektorgrafik
Grafikformate: .eps (und weitere)
Vektorgrafiken bestehen nicht aus kleinen Bildpunkten, sondern aus Farbflächen die ein bestimmtes Grössenverhältnis haben. Sie lassen sich ohne Qualitätsverlust vergrössern und verkleinern. Vektorgrafiken kann man nur mit speziellen Programmen bearbeiten die vektororientiert sind. Wenn man die Vektorgrafik mal fürs Web oder so abspeichert dann wird es wieder in ein Pixelbild umgewandelt. Die Quelldatei bleibt aber ein Vektorbild.
Vektorgrafiken werden zb. für Logos eingesetzt.
Vektorgrafiken erstellt man mit Vektorprogrammen, in einem Prozess bei dem man entweder einfach das Vektorbild zeichnet oder eine Pixelgrafik als Vorlage nimmt und dieses vektorisiert. Dabei ersetzt man Stück für Stück die Teile der Pixelgrafik mit Vektorelemente (Polygone, Kreise usw.)
- Vektortutorial - Programmabhängig, am besten googlen
- Vektoreffekt
Erklärung:
[Blockierte Grafik: http://design.emu.dk/billeder/artik/00/02-vektor.gif]
Vektorgrafik:
[Blockierte Grafik: http://www.endesk.com/files/users/10019/thumb_VectorFace.jpg]
(kommt noch ein besseres)
# Was gibt es für Grafikprogramme
Die Grafikprogramme werden auch nach Pixel und Vektor unterscheidet.
Pixelorientierte:
- Adobe Photoshop
- Macromedia Fireworks
- Photoimpact
- Paint Shop Pro
- GIMP
Vektororientierte:
- Adobe Illustrator
- Macromedia Freehand
- Inkscape
3d Programme:
- Cinema 4d
- 3dmax
- Blender
- Maya
# Wo bekomme ich ein gratis Grafikprogramm?
Das oben erwähnte GIMP ist Freeware und Opensoure.
- Offizielle Webseite
- GIMP Deutsch
- Deutsches GIMP Handbuch
Inkscape - Freeware und Opensoure.
- Offizielle Webseite
- Inkscape Deutsch
- Inkspace Wiki
Für 3d Grafiken ist Blender zu empfehlen, ist auch Freeware und Opensource.
- Offizielle Webseite
- Blender Deutsch
- Blender Dokumentation
# Wie/Womit erstelle ich ein animiertes Bild?
Eine gif Animation ist einen Ablauf von mehreren Bildern, diese einzelnen Bilder werden Frames genannt.
Programme:
- Adobe ImageReady
- GIMP
- Macromedia Fireworks
- Animation Shop 3
- Ani-maker
- GIF Animator
Wie genau ein animiertes gif erstellt wird kommt aufs Programm an. Am besten ein Tutorial suchen (http://www.google.de -> gif tutorial + programmname) oder das Handbuch lesen.
[Blockierte Grafik: http://www.hal-pc.org/~bsilverm/images/Simple%20Animation.gif]
Anmkerung:
Eine Webseite vollgepflastert von irgendwelchen gifs wird nicht sehr geschätzt. Beim Webdesign gilt "weniger ist mehr". Gif's kann man zb. für Kurzerklärungen oder Navigationsbuttons sinnvoll einsetzen. Aber Webseiten wo auf jeder Seite animierte Bildern von Sonnen, Grafiken, "Welcome" werden nicht gern gesehen.
# Darf ich Grafiken/Webdesigns kopieren?
Nein! Wenn sie nicht von dir sind musst du dir die Erlaubnis einholen.
# Wie erstelle ich ein Webdesign?
Da kann man keine einfache Antwort geben. Wie bei vielen Dingen: Übung macht Meister
Es gilt zu beachten dass man ein Design nicht grösser als 800x600 machen sollte damit man es bei allen Auflösungen betrachten kann.
Vorgehensweise:
- Webdesign in einem Grafikprogramm erstellen
- überlegen was alles mit HTML / CSS umgesetzt werden kann (Farbflächen, Navigation etc.)
- die Teile Ausschneiden die man fürs Design braucht (zb. Header usw.)
- das Design mit HTML / CSS verarbeiten
Am besten ist es wenn das Design sich den Auflösungen der User anpasst. Also möchlichst wenig Grafiken brauchen (Überschriften, Navigation usw. alles mit HTML / CSS machen).
# Wie schneide ich ein Bild aus?
Kommt etwas aufs Programm an. Aber die meisten Grafikprogramme haben einen Radiergummi, ein Auswahlwerkzeug und ein Zauberstab. Damit kann man sich die überflüssige stellen löschen. Um diesen Bereich dann noch transparent zu machen muss man noch die Hintergrundebene löschen.
Mit Photoshop kann man sehr sauber ausschneiden mit der "extrahieren" Funktion.
- Photoshop extrahieren-Tutorial
# Bild als Hintergrund?
Wie und ob man ein Bild als Hintergrund nehmen kann unterscheidet sich von der "Bauart" der Webseite.
Denkt dran dass ein Hintergrundbild nur bei einer Auflösung richtig angezeigt wird! Die bessere Variante ist ein Hintergrund der sich wiederholen lässt - zb. ein Muster:
[Blockierte Grafik: http://www.squidfingers.com/patterns/patterns/img_136.gif]
- Alles zu HTML/CSS und Hintergrundbilder
Frames:
Bei Frames muss man das Bild "zerschneiden" mit einem Grafikprogramm und dann die einzelnen Teile jeweils beim richtigen Frame als Hintergrund setzen. Dies macht man am besten mit CSS - entweder im Stylesheet:
body {
/* pfad zum bild */
background-image: url('ordner/bildname.jpg');
/* verhindert das mitscrollen des Bildes */
background-attachment: fixed;
/* verhindert dass sich das Bild wiederholt */
background-repeat: no-repeat;
}oder direkt im <body> tag der HTML Datei:
<body style="background-image: url('ordner/bildname.jpg'); background-attachment: fixed; background-repeat: no-repeat;">Tabellen:
Funktioniert eigentlich ähnlich wie bei den Frames, ausser dass man dann die einzelnen Teile des Bildes als Hintergrundgrafik der Tabellenzellen nimmt. Das funktioniert gleich wie oben, einfach td anstatt body nehmen (je nach Layout kann man das Bild auch einfach ohne zerschneiden als body Hintergrund nehmen und die Zellen transparent lassen):
<td style="background-image: url('ordner/bildname.jpg'); background-attachment: fixed; background-repeat: no-repeat;">man kann das natürlich auch wieder im Stylesheet definieren.
CSS Layout:
Wenn ihr ein Layout mit CSS schafft dann wisst ihr auch wie man ein Hintergrundbild einfügt 
und auch dass sich Hintergrundbilder bei CSS Layouts nicht eignen.
Schlusswort:
Ich hoffe dieser Thread hilft bei einfachen Fragen weiter. Bei Fragen zu diesem Thread einfach eine Antwort schreiben und es wird sicher jemand helfen können.
so long
