Gfx Tutorials - Do it yourself!
Der Titel ist Programm! In diesem Thread bieten wir euch den Einstieg in die immer wichtiger werdende Welt des Web Designs.
Ob es nun eine ein Avatar oder eine Signatur fürs Forum, eine Arbeit für die Schule oder eine Präsentation für den Beruf sein soll, um die Bildbearbeitung kommt kaum jemand herum.
Dies ist ein Open-Source Projekt von Etcg, ihr könnt gerne etwas für die Community hinzufügen, oder aber auch eine Frage stellen wenn euch ein Gebiet fehlt oder ihr etwas nicht ganz verstanden habt.
Inhaltsangabe.
Zum Anzeigen der Inhalte einfach den Spoiler öffnen.
ZitatAlles anzeigen• Community Tutorials zu ausgewählten Themen (Letzte Aktualisierung 20.09.10)l
Allgemein:
- Helligkeit/Kontrast von Fly
Photoshop
- Photoshop - 'Verschmelzung von Bildern' von Breaking Benjamin
- Photoshop - Bild/Photographie in eine Zeichung umwandeln von iChaos [Neu! - 18.09.2010]
Gimp
- Gimp - 'Banner Tutorial' von iSoul
- Gimp - 'Banner Tutorial' von Spunk
- 3D Müsli Schüssel + Bubble C4D von Spunk
Paint.Net
- Paint.Net - 'Banner Tutorial + Shortcut-Erklärung' von iSoul
• Welche Programme soll ich verwenden?__________________________________________________________________
- Photoshop
- Paint.Net (Freeware)
- Gimp (Freeware)
----------
Paint.Net
Ein weit verbreitetes Freeware Programm. Es ist zwar auf dem Paint von Windows aufgebaut, doch durch die vielen neuen Funktionen ist es kaum wieder zu erkennen und wirkt dennoch wie das vertraute Microsoft Paint. Von der Benutzerfreundlichkeit kann ich es jedem Empfehlen der bisher wenig mit Fotobearbeitungsprogramme zu tun hatte, oder sich für kleine Bearbeitungen nicht Fotoshop holen will. Zudem ist es schnell gestartet und benötigt auch nur wenig Arbeitsspeicher. Ideal für den Anfang.
Gimp (Freeware)
Neben Photoshop wohl das am weitesten verbreitete Freeware Programme für die digitale Fotobearbeitung. Dieses Programm soll lt. Nutzer fast dasselbe können wie Photoshop, nur mit dem Unterschied das vieles aufgrund fehlender Funktionen mehr Zeit und übung in der Umsetzung benötigt.
Mir selbst ist das Programm bei kurzen Tests sehr suspekt vogekommen, denn vor allem die Handhabung und Übersicht ist nicht ideal gelöst worden. (zumindest aus meiner Subjektivität nach langjähriger Photoshop Erfahrung) Mag sein das die ein schlechter erster Eindruck den ich von dem Programm beim Testen bekam, es gibt sicherlich viele andere welche darauf schwören, doch als Einsteigerprogramm sehe ich dieses Programm nicht als optimale Wahl.
Für Fortgeschrittene, die sich aus welchen Gründen auch immer kein Photoshop anschaffen können (oder wollen) kann ich dieses Programm jedoch schon empfehlen, da es definitiv mehr kann als Paint.Net oder alternativprogramme. Nur man muss sich wohl schon allein mit der Materie "Gimp" eine Weile beschäftigen.
Photoshop(Testversion)
Nicht ohne Grund kostet dieses Programm in der aktuellsten Version >1000 €.
Es hat eine rießen Palette an Funktionen, die Bearbeitungsmöglichkeiten sind schier unbegrenzt und auch aufgrund der unmengen an Faq und Tutorials ist dieses Programm seit Jahren unangefochtener Primus im Bildbearbeitungsbereich, sowohl für Einsteiger als auch für Professionelle Webdesigner .
Ich selbst verwende von Anfang an nur Photoshop und würde auch auf nichts anderes mehr umsteigen.
Wer das Kleingeld dafür definitiv nicht auftreiben kann, der kann sich das Programm auch als Testversion direkt von Adobe erst einmal laden und ausprobieren.
==> Alte Versionen /z.B. Photoshop 6.0 ,welches ich bis vor kurzem auch noch genutzt habe/ gibt es teilweise sogar schon für unter 100 €.
Haben (bis auf ein paar Spielereien) alle Funktionen die man benötigt.
Ich empfehle aus meiner persönlichen Erfahrung heraus ganz klar Photoshop.
Es gibt unterschiedliche Geschmäcker und Arten zu designen, ich kann niemanden die entscheidung abnehmen, empfehlen würde ich euch einfach mal die Programme durchzuprobieren.
Wenn jemand noch weitere Empfehlungen hat, kann er gerne seine Eindrücke zu dem Programm hier im Thread posten.
____________________________________________________
• Die richtige Bildwahl__________________________________________________________________
-.Die Input-Bilder beeinflussen die Qualität des fertigen Produkts-
Je besser die Qualität der ausgewählten Bilder, desto besser wird euer Bild am Ende auch aussehen. (grobe Faustregel)
Grundlegende Fehler hierbei sind:
- Das Bild ist zu klein.
Bilder lassen sich in den meisten Fällen ohne Probleme verkleinern.
Wenn das Bild allerdings schon von vorneherein zu klein ist (bzw. zu wenig Pixel aufweist) und gestreckt werden muss geht dies auf Kosten der Qualität, und ist somit in den meisten Fällen nicht zu empfehlen.
- Das Motiv ist unvollständig.
Vor allem bei Kartenbilder hat man oft das Problem das die einzelnen Monster von der Karte beschnitten sind. Dies sollte man bei der Bildwahl mit einkalkulieren werden.
Lieber weicht man auf ein anderes Monster aus, als unschöne Kanten zu haben.
Teilweise kann man dies zwar ausgleichen indem man bestimmte Motive an den Rand setzt, die Kanten retuschiert oder einfach ein anderes Motiv über die Stellen überlappen lässt.
- Die Motive passen nicht zu einander
Bis zu einem gewissen Grad kann man versuchen mit Helligkeit/Kontrast und Farbalance unschöne Kontraste zu retuschieren. Wenn zwei Motive überhaupt nicht zusammenpassen sollte man lieber auf andere Bilder ausweichen oder nur eins verwenden.
____________________________________________________
• Arbeiten mit Ebenen__________________________________________________________________
Ebenen sind im Grunde verschiedene Malflächen die übereinander gestapelt werden. Stellt euch die Ebenen einfach als übereinander gelegte Folien vor.
Es ist grundsätzlich immer besser mit verschiedenen Ebenen zu arbeiten. So bleibt man flexibel und kann alle Elemente je nach Bedarf verschieben, verkleinern, ausblenden oder sogar bei manchen Programmen sogar die Transparenz verändern.
Photoshop Paint-Net und Gimp bieten euch die Möglichkeiten dazu. In der Standardeinstellung findet ihr die Ebenen meist am unteren rechten Bildrand. Durch einen Klick auf den dort ansässigen Button wird eine neue Ebene erstellt. Achtet immer darauf, dass eure Werkzeuge immer nur auf der derzeitig ausgewählten Ebene benutzt werden können.
Nutz dies zu eurem Vorteil! Zum Beispiel beim:
- Verschieben einzelner Elemente
- Anwenden von Helligkeit/Kontrast (bzw. andere Effekte) auf einzelne Bildelemente
- Benutzen des Lösch Werkzeugs auf einzelne Elemente
So könnt ihr euch auch einzelne Elemente aus Bilder in eine neue Ebene Kopieren um diese zu bearbeiten oder Visuelle Effekte zu erstellen. (Z.B. wenn ein Gegenstand eingefügt werden soll der Teilweise vor und Teilweise hinter dem Motiv steht.
____________________________________________________
• Das richtige Ausschneiden__________________________________________________________________
Es gibt verschiedene Ansätze. Zunächst sorgt dafür das euer Motiv NICHT mehr auf der Hintergrundebene ist, da diese bei manchen Programmen beim Freistellen nur Weiß bemalt wird.
Dann ist es euch überlassen, je nach Motiv könnt ihr
- Den Radiergummie (in verschiedenen Formen und Größen) benutzen
- Auswahl Rechteck-und Kreis verwenden (+Del)
- Oder am häufigsten verwende ich das Polygonlasso.(+Del)
Die Px bei Lasso und Auswahl Rechteck geben an wie genau euer Motiv ausgeschnitten wird. 0pX ergeben Harte Kanten während 5 Px einen Weichen übergang schaffen. probiert ruhig durch.
Im Allgemeinen Empfehle ich Weiche Kanten 1 px. + Glätten
Bei größeren/komplexeren Figuren empfehle ich eine Schrittweise Freizustellung.
Man kann auch die verschiedenen Verfahren Kombinieren um so Große Flächen mit dem Radiergummi freizustellen und die Feinheiten mit dem Polygonlasso zu verrichten.
Tipp: macht euch immer eine Kopieebene um versehentlich gelöschte Teile wiederherstellen zu können.
____________________________________________________
• Hantieren mit Schriften__________________________________________________________________
Eine Schrift sollte auf dem Banner gut zu lesen sein, aber auch zum Banner passen. Oftmals reichen dazu die Standard Schriften von Windows nicht aus. Daher müssen dringend neue Fonts her. (! "Fonts" sind Schriftarten)
Kostenloser Download von Fonts (gibt natürlich noch andere Quellen, einfach in Google suchen)
Diese Dateien müssen nun nur noch unter "C:\WINDOWS\Fonts" gespeichert werden, und sind nach dem nächsten Programmstart verfügbar.
Weiterhin ist die Wahl der richtigen Effekte ebenso wichtig. Ansonsten könnte man den Banner ja gleich mit Paint erstellen.
Während es bei Photoshop die Möglichkeit gibt über Fülloptionen (zu finden durch Rechtsklick auf eine Ebene!) alle möglichen Änderungen an der Schrift zu machen (Rand, Schein nach Außen, 3D-Effekte) ist es bei Gimp etwas schwieriger. Hier sollte man sich schon mal ein paar Gimp Tutorials ansehen.
Ansonsten geht natürlich nichts über ausprobieren. Jeder Banner ist anders, und man kann in der Regel nicht immer die selbe Schrift auf jeden Banner anwenden.
____________________________________________________
• Das richtige Speichern (Anpassen von Größen)__________________________________________________________________
Auf Etcg ist die Maximalgröße eines Signaturbildes 50 Kb.
Um diese Grenze muss man sich aber i.d.R. keine Gedanken machen, bis man das Bild dann schließlich Speichern muss.
Grundsätzlich gibt es viele Unterschiedliche Dateiformate in denen euer Bild gespeichert werden kann, die gängigsten Formate dabei sind:
Png:
- hoher Speicherbedarf
- beste Qualität
- Transparenz-Effekt
Jpeg (jpg):
- Der Speicherbedarf/ Die Qualität kann (bei den meisten Programmen) beim Speichern in verschiedenen Stufen Reguliert werden.
Gif:
- Meist Qualitative einbußen, da es nur bis zu 256 verschiedene Farben unterstützt. (Fällt aber bei kleineren Motiven oder Motiven mit wenig Farbübergängen meist nicht auf.)
- Niedrigster Speicherbedarf
- Transparenz-Effekt
Es wird also Empfohlen das Bild zunächst versuchen in Jpeg zu speichern, dabei sollte man darauf achten, ob die Qualität durch das Verkleinern zu sehr leidet.
Alternativ kann man auch auf Gif ausweichen, soweit das Bild mit 256 Farben zurechtkommt. (ausprobieren!)
Zusätzlich empfehle hierbei (bei Photoshop) die Funktion "Für Web und Geräte Speichern", damit kann man bei den Einstellungen gleich sehen wie die Qualität und die Datengröße aussehen wird.
! Ich würde in den meisten Fällen empfehlen das Bild zu verkleinern (z.B. 450x150 pixel).
Lieber hat man einen Qualitativ hochwertigen Banner, als einen der mit Pixeln übersäht ist.
Falls überhaupt nichts klappen will, könnt ihr uns euer Bild auch in den Gfx Thread stellen.
Es gibt noch andere Möglichkeiten die Größe zu senken. Allerdings sind die Erfolgsquoten und die Qualität damit eher geringer, wer will kann sich noch einen ergänzenden Post von mir zu diesem Thema durchlesen. Dort wird noch erklärt das Paint dafür unter gewissen Umständen auch verwendet werden kann.
____________________________________________________
• Und wie lade ich Bilder hoch ?__________________________________________________________________
- Die schnelle Variante: bei http://www.imageshack.us das Bild hochladen
[I]- Die dauerhafte Variante: Einmal kostenlos bei http://www.photobucket.com (oder Imageshack) registrieren.
Gibt natürlich noch weitere Anbieter, der Vorteil von anmeldepflichtigen Seiten ist i.d.R. das man auch später noch auf die eigenen Bilder zugreifen und damit ansehen, austauschen oder löschen kann.
____________________________________________________
• Nützliche Internet Seiten _________________________
• Links zu verschiedenen Gfx-Seiten
www.Gfx-Designer.net
Pst-Tutorials.de
Photoshop
Photoshop Brushes (Pinselspitzen)
Gimp
Schrifteffekte
• Sonstige Links:
- Bilder-verkleinern.de/
- bit.ly - Urls Verkleinern, um Signaturplatz zu sparen
- Rapidshare - Uploaden von allen Dateiformaten
____________________________________________________
• Fragen und Antworten__________________________________________________________________
- Wie speichere ich mit dem Programm Apophysis Bilder im richtigen Format ab?
-> Antwort - Darf ich die C4Ds von dieser Seite (im Tutorial von Spunk erwähnt) kostenlos und unbegrenzt verwenden?? Gibt es da Copyright bzw. muss man, im schlimmsten Fall, Strafe zahlen??
-> Antwort - Wieso wird meine Signatur nicht mehr Angezeigt?
-> Antwort - Wie erstelle ich Scanlines mit Photoshop?
-> Antwort - Ich habe einen Avatar der allerdings zu groß für Etcg ist, was kann ich tun?
-> Antwort - Was bedeuten denn nun Dpi, bzw. was muss ich beim Designen beachten das mein Bild ein gutes Druckergebnis liefert?
-> Antwort
____________________________________________________
Bei Vorschlägen, Anregungen oder Fragen habt, steht dieser Thread jedem zur Verfügung!
Natürlich sind auch Hilfe und Anregungen jeglicher Art gerne gesehen.
Den alten Gfx-Hilfe Thread findet man unter folgendem Link: -Klick-
____
-Fly