- Gfx - FAQ & Tutorials - Do it yourself!

  • 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.



    • Welche Programme soll ich verwenden?__________________________________________________________________


    • Die richtige Bildwahl__________________________________________________________________


    • Arbeiten mit Ebenen__________________________________________________________________


    • Das richtige Ausschneiden__________________________________________________________________


    • Hantieren mit Schriften__________________________________________________________________


    • Das richtige Speichern (Anpassen von Größen)__________________________________________________________________


    • Und wie lade ich Bilder hoch ?__________________________________________________________________


    • Nützliche Internet Seiten _________________________



    • Fragen und Antworten__________________________________________________________________




    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

  • • Helligkeit/Kontrast


    Eine der Wichtigsten Funktionen, wenn man seinen Bildern noch den letzten Schliff geben will.
    - Photoshop listet diese Funktion unter Bild - Anpassen - Helligkeit/Kontrast auf
    - Gimp besitzt sie unter dem Menüpunkt "Farben".


    Diese Funktion ist bei fast jedem Banner nötig um zumindest den "Grauschleier" zu entfernen, der auf den meisten Bildern liegt.
    Nehmen wir nun als Beispiel mal dasEndergebnis von iSoul's Banner-Tutorial.
    Das fertige Endergebnis sieht -gut- aus, ist aber nicht wirklich ein Eyecatcher.
    Das können wir allein mit dieser Funktion ändern.


    Nehmt ruhig mal den fertigen Banner aus dem Tutorial

    und spielt ein bisschen mit der Helligkeit/Kontrast Funktion. Ihr werdet sofort einen erheblichen Unterschied bemerken.
    -----
    Achtung(!) Da sich Helligkeit/Kontrast nur auf eine Ebene anwenden lässt müsst ihr alles auf eine Ebene zusammenfügen (Oder das Bild -z.B- als Png abspeichern und zum Verändern noch einmal öffnen). Spart euch aber unbedingt eine Datei mit den einzelnen Ebenen auf, damit ihr den Banner ggf. später noch verändern könnt.


    Es gibt also die Möglichkeit jede Eurer ebenen individuell zu bearbeiten und aufeinander abzustimmen (wäre zu empfehlen), oder erst ganz zum Schluss das gesamte Bild zu verändern.
    ------
    Um den Grauschleier zu entfernen sollte man nach Gefühl agieren, es gibt keine "Optimalwerte" für alle Bilder.
    Grundsätzlich gilt allerdings zum entfernen des Grauschleiers das man die Helligkeit ein bisschen verringert, und dafür den Kontrast erhöht.
    Da die Programme gleich eine Vorschau erstellen kann man relativ gut mit den Werten spielen, bis man das 'Optimale' erreicht hat.


    Zusätzlich kann man mit den Auswahl Werkzeugen oder durch das Anwenden auf einzelne Ebenen noch bestimmte Effekte erzielen/verstärken. Bei dieser Funktion gilt allerdings sprichwörtlich "probieren über studieren".


    Es gibt natürlich unterschiedliche Geschmäcker wie "kräftig" die Farben sein sollen/dürfen. Und variieren natürlich auch von Motiv zu Motiv.


    ================================================================


    ___
    -Fly

  • Wunderbares Tutorial!!


    Eine Frage aber: Kann ich bei Imageshack quasi unbegrenzt viel hochladen?? Oder darf man da nur 1 Bild hochladen...wie ist das??

  • Zitat

    Original von Cato
    Wunderbares Tutorial!!


    Eine Frage aber: Kann ich bei Imageshack quasi unbegrenzt viel hochladen?? Oder darf man da nur 1 Bild hochladen...wie ist das??


    Du darfst ungegrenzt viele hochladen (wenn du angemeldet bist). Sie werden in deiner persöhnlichen Galerie gespeichert.
    Du kannst auch viele Bilder gleichzeitig hochladen.
    MfG

  • Zitat

    Original von CHAOS (im zimmer)


    Du darfst ungegrenzt viele hochladen (wenn du angemeldet bist). Sie werden in deiner persöhnlichen Galerie gespeichert.
    Du kannst auch viele Bilder gleichzeitig hochladen.
    MfG


    Der Hauptvorteil von Imageshack ist allerdings das man nicht angemeldet sein muss, und trotzdem unbegrenzt hochladen kann.
    Dann hat man nach dem uploaden allerdings auch keinen Zugriff mehr auf seine Bilder. (Kann auch ein Vorteil sein)


    (!) Für diejenigen die iGoogle verwenden gibt es übrigens ein nützliches Imageshack-Gadget.



    ____
    -Fly

  • Zitat

    Original von CHAOS (im zimmer)
    Habe mein Tutorial noch etwas erweitert (C4Ds).


    MfG :)


    Da es noch zum restlichen Tutorial passt habe ich die zwei Posts zusammengefügt.


    Dein Tutorial ist im Startpost verlinkt worden.
    Danke für deinen Beitrag. :)
    _____
    -Fly

  • die musst du auf windows installieren. wie das genau bei der seite abläuft die fly genannt hat weiß ich nicht. da wo ich fonts runterlade wird das als Zip datei gespeichert, diese muss man dann mit adobe reader extrahieren und unter windows fonts ablegen. am besten in suchfunktion von windows "fonts" eingeben dann kommt man zur liste der fonts.

  • Mal eine sehr, sehr dringende und wichtige Frage.


    Darf ich die C4Ds von dieser Seite (im Tutorial von Chaos (im Zimmer) erwähnt) kostenlos und unbegrenz verwenden?? Gibts da Copyright bzw. muss man, im schlimmsten Fall, Strafe zahlen??


    Für Teambanner oder Avatare z.B.


    Danke, ist wirklich wichtig!!

  • Zitat

    Original von Cato
    Darf ich die C4Ds von dieser Seite (im Tutorial von Chaos (im Zimmer) erwähnt) kostenlos und unbegrenz verwenden?? Gibts da Copyright bzw. muss man, im schlimmsten Fall, Strafe zahlen??
    Für Teambanner oder Avatare z.B.


    Grundsätzlich sehe ich auf der Seite folgendes:
    "Welcome to Planet Renders, the best source for free renders and sprites - images already cut-out/masked to speed up the design process and complement your web graphics!"


    Sollte also kostenlos zur Verfügung gestellt sein.



    Das mit dem Urheberrecht ist immer so eine Sache, denn wenn du in Google Bildersuche ein Bild findest, hat auch zu 99% jemand ein Copyright darauf. (Sieh dir doch z.B. auf einer Yugioh Karte den Rand rechts unten an)


    Grundsätzlich ist es aber so das man die Bilder für den Privatgebrauch verwenden kann, ohne das man angst haben muss das man von irgenjemand eine Abmahnung bekommt. (Also Wichtig dabei ist in welchem Kontent es benutzt wird, und ob der Benutzer das Werk anderer damit zu Geld macht - Oder ob man dreisterweise einen Banner von jemand anderes -in dem viel Arbeit steck- übernommen hat, und dabei nur das "Copyright xxxx" entfernt hat)


    Vor allem in so kleinen Foren wie diesen hier (auf die Größe des Internets bemessen) ist es sehr unwahrscheinlich das überhaupt irgedjemand diesen Signatur sieht, geschweigedenn sich da aufregen würde, wenn du irgendein Bild zum Erstellen deine Signatur verwendest.


    ____
    -Fly

  • Hi,


    ich hab jetzt das Programm Apophysis und kann damit selbst C4Ds erstellen, doch wenn ich sie speicher kann ich sie weder mit Gimp noch mit Imageshack öffnen. Normalerweise speichert Apophysis die C4Ds als flame, ich habs auch schon als jpg und bmp versucht, immer mit dem Ergebniss, das Imageshack sagt : No files uploadet.... Bei BMP und FLAME sagt Gimp unbekannter Dateityp und bei JPG sagt er sowas wie "Das Bild ist kein JPG" oder so.


    Weiß jemand wie ich es in einem anderen Programm öffnen kann?


    MfG :)

  • Zitat

    Original von iSoul
    Versuch mal Photoshop der kann recht viel öffnen.
    Btw würd ich C4Ds NIE! als .jpg speichern, dann ist die ganze gute qualia/transparenz kaputt.


    Transparenz braucht man ja nicht, ist schwarzer Hintergrund ;) Habs jetzt geschafft es als JPG zu speichern und ich find die Quali ist noch ganz gut :) Für alle die auch dieses Problem haben: Man muss "Flame-Export" klicken und dann sein speicherziel wählen. Ist eigentlich logisch, bin aber halt nicht so gut damit klargekommen, weils halt neu war. Danke für die schnelle Antwort :)


    MfG

  • Ich hätte da noch ein Paint.NET Tutorial am start :D


    ========================================


    !Paint.NET Banner Tutorial!
    ================
    Beginner // Advanced
    ================


    Tastenkombinationen:
    Neue Datei erstellen: Strg + N
    Datei(en) öffnen = Strg + O
    Datei Kopieren = Strg + C
    Datei Einfügen = Strg + V
    Neue Ebene hinzufügen = Strg + Shift + N
    Ebene Duplizieren = Strg + Shift + D
    Layereigenschaften = F4
    Toolbox = F5
    Ebenen = F7
    Farben = F8
    Bild abspeichern = Strg + S


    Schritt 1:
    Folgende Dateien öffnen: ESB_Stock.png, Explosion_Stock.jpg und Inuyasha_Render.png (Oder andere Bilder die euch gefallen :^^: )
    Step 1 Finished


    Schritt 2:
    Eine neue Datei mit den Maßen 500x200pixel erstellen (vorerst) und die weiße Fläche mit einem Farbverlauf eurer Wahl füllen.
    Step 2 Finished


    Schritt 3:
    Eine neue Ebene erstellen und den Render darin einfügen. Danach setzt ihr ihn an eine Stelle wo es euch passt.
    Step 3 Finished


    Schritt 4:
    Eine neue Ebene zwischen dem Render und dem Farbverlauf erstellen und die Datei 'Explosion_Stock' darin einfügen. Danach setzt ihr den Modus dieser Ebene via Layereigenschaften auf 'Raster'.
    Step 4 Finished


    Schritt 5:
    Eine neue Ebene über dem Render erstellen und erneut den Explosion_Stock darin einfügen. Die Deckfähigkeit auf ca. 170 ändern. Danach versucht ihr grob mit dem Radiergummi (ca. 35) alles was über dem Render ist wegzuradieren. Anschließend nutzt ihr den Gaußschen Weichzeichner (80) und setzt die Ebene auf Differenz.
    Step 5 Finished


    Schritt 6:
    Eine neue Ebene über den ersten zwei Ebenen erstellen. Kopiert die Datei ESB_Stock in diese Ebene und setzt die aus 'Additiv'.
    Step 6 Finished


    Schritt 7:
    Eine neue Ebene über allen andern erstellen. Danach geht ihr zu Effekte > Wiedergabe > Wolken (Wählt vorher eine passende Farbe aus). Setzt diese Ebene auf 'Erhellen' und die Deckfähigkeit auf ca. 180.
    Step 7 Finished


    Schritt 8:
    Den Banner auf eine passende Größe zuschneiden und alle Ebenen vereinen. ACHTUNG: Immer die erste Ebene über dem Hintergrund einzeln nach unten vereinen, sonst verändert sich eure Einstellung der einzelnen Ebenen!
    Step 8 Finished


    Schritt 9:
    Eine neue Ebene erstellen und darin einen Text einfügen. Diese Ebene danach auf 'Reflektieren' setzen.
    Step 9 Finished


    Schritt 10:
    Noch einen Rahmen hinzufügen und ihr seid fertig! Den Banner dann das Bild als .png oder .jpg Datei abspeichern.
    Step 10 Finished



    =============
    Fertiges Produkt
    =============



    Stocks // Render





    Ich hoffe es hat euch gefallen :^^: