Tutorials
[ Zurück ]
Transparenz / Alpha in TGA , PNG, GIF Images
"Transparenz / Alpha in TGA , PNG, GIF Images erzeugen"
Zum erstellen einer Textur mit transparentem Bereich/en gibt es mehrere Möglichkeiten.
Am besten eignen sich die folgenden Dateiformate in der hier aufgeführten Rang-Folge.
- PNG
- TGA
- GIF
Diese können Alpha Channel speichern und somit im Image darstellen.
Abhängig für welchen Zweck / Programm ihr das Image am Ende benötigt. Kann es natürlich sein das Ihr euch auf eins der Formate festlegen müsst.
Für Web-Design eignen sich (aufgrund der Vorgaben) am besten PNG und GIF (letztes kann ebenfalls auch als animiertes Image mit Frames erstellt werden)
Viele Games und Graficanwendungen jedoch arbeiten mit dem TGA Format.
Hier eine kleine Einführung wie man in diese Alphalayer / Alpha (transparente) Bereiche einbringt. (Erklärung erfolgt anhand von Adobe Photoshp CS4, nachfolgend als "PS" abgekürzt bezeichnet)
1.) PNG und Transparenz
- Erstelle in PS eine neue Datei
MENÜ - DATEI - NEU
- Im nun erscheinenden Dialog-Fenster wähle im Dropdownmenü für "Hintergrund" : Transparent
- Im grossen und ganzen ist das erstellen von Transparenz in PNF Images hiermit schon erledigt. Alles was du nun Zeichnest / auf
dem Image anbringst wird dargestellt und alles was du vom Hintergrund dabei "frei" lässt" wird später unsichtbar sein. Und somit,
wenn zum Beispiel auf eine Webseite hochgeladen den Hintergrund dort "durchscheinen lassen"
- Datei fertigstellen, und abspeichern unter MENÜ - DATEI - SPEICHERN ALS - hier im Format drowdown PNG auswählen.
Auf diese Weise erstellst du relativ simple "freistehende" icons, oder andere Formen. die keine unschönen Ränder oder gar einen
quadratischen Hintergrund in farbe des Images haben, bzw aus diesem Grund Farblich an die Webseite angepasst werden
müssten.
Note: Ein Vorteil von PNG Grafiken ist (voller Name: Portable Network Grafics) das die "scaleable" sind. D.h. beim Skalieren (grösser / kleiner machen) verlieren sie kaum an Qualität / Bildschärfe. Sie eignen sich somit hervorragend zum erstellen von Icons, und Funktionsgrafiken auf Webseiten.
2.) GIF und Transparenz:
- Gif Images sind relativ simple struktiriert und liiegen Qualitativ weit hinter den beiden anderen Formaten.
- Zum Erstellen der Gifgrafik mit transparentem Hintergrund geht Ihr einfach genauso vor wie zuvor unter 1.) beschrieben.
- Beim speichern hier natürlich "GIF" als Format auswählen.
Wichtiger Hinweis: Augfrund von Formatbezogenen Beschränkungen kann ein GIF "keine prozentuale Transparenz" speichern.
D.h. "Schattenwurf" oder änhliches was Bildpunkte mit z.B. 10% Transparentz / Deckungskraft erzeugt, werden beim Speichern gnadenlos durch einen "voll-Opaque" (deckenden) Bildpunkt ersetzt..
Wenn Ihr also Schatierungen erreichen wollt. Dann beim GIF lieber darauf zurückgreifen den Hintergrund-Layer mit der benötigten Farbe zu füllen (z.B. verwendete Farbe auf Webseiten-Element wo das Gif später platziert werden soll). und dann in Layern Darüber die gewünschten Schatten / Verlaufs- Effekte aufmalen und so speichern.
2.) TGA und Transparenz:
Hier wird es nun wesentlich komplizierter. Solltet Ihr aufgrund der Ziel-Platzierung für das Image auf ein TGA Format angewiesen sein (Bsp: Online Games wie SecondLife ®, WOW und ähnliches) dann hier eine Erklärung wie man mit "Alphachanneln" Transparente Bereiche erschafft.
- Auch hier wieder in PS Eine neue Datei erzeugen
MENÜ - DATEI - NEUE DATEI
- Hintergrundfarbe ist hier egal. Die Transparent-Einstellung hat keinerlei Einfluss bei TGA's.
Ich werde dies nun anhand eines Simplen Beispiels erläutern, das sich wenn ihr den Bogen einmal raushabt auf alles andere übertragen lässt.
- Bsp: Deckendes Quadrat auf transparentem Hintergrund.
- Wählt nun in eurer Werkzeugleiste / Toolbar ganz oben das Auswahlwerkzeug aus (Quadratische Form)
- zieht in eurem Image ein kleines Quadrat in der Mitte auf und lasst genügen "freien" bereich" zu den äusseren Bildrändern (dies wird
später unser transparenter Bereich.
- Wählt nun in der Toolbar das "füllwerkzeug" (kleines Farbeimer-Symbol) aus und klickt damit in den Bereich "innerhalb" der zuvor
erstellten Auswahl.
- nun zur Transparentz: (bitte die Selektion/Auswahl nicht deaktivieren die wird hierfür benötigt)..
Wenn euer PS immernoch die Standard Einstellung für die Arbeitsfläche hat, solltet Ihr im Rechten Bereich das "Ebenen-Docklett"
haben.
Dieses hat mehrere Tabs, darunter auch den Channel / Kanal-Tab.
Auf diesen müsst Ihr nun wechseln.
(Solltet Ihr die Ebenen-Palette nicht haben bitte einmal auf MENÜ- FENSTER - EBENEN gehen um sie einzublenden)
- Im unteren Bereich der Kanäle-Plette befinden sich 2 Icons: ein kleiner gestrichelter Kreis, und nochmal ein gestrichelter Kreis vor
einer Box ..
- auf das 2-te Icon hier klickt ihr nun einmal (kreis mit box dahinter)
- Nun erzeugt PS einen neuen Kanal-Layer namens "Alpha 1" (namen könnt ihr selbstverständlich ändern)
- Nun könnt Ihr euer Image auch schon speichern (wie oben, nur diesmal im Format-Dropdown TGA auswählen)
Erklärung zum Alphachannel:
Wenn Ihr den Alphachannel einmal anklickt, werdet Ihr sehen das es eine schwarz-weiss Darstellung Eures Bildes ist. (weisses Quadrat vor schwarzem Hintergrund)
Der Alphachannel teilt der Plattform in dem Ihr das Bild verwendet mit welche Bereiche opaque / deckend ( Weiss) und welche alpha / transparent (schwarz) sein sollen.
Da die Deckung / Transparenz mit Schwarz/Weiss dargestellt wird, sind logischerweise "Grautöne" prozentual transparent. Würdet ihr also nun auf dem Alpha-Channel das quadrat noch einmal auswählen (einfach auf das kleine Icon mit dem gestrichelten Kreis klicken), und nun mit einem 50 % Grau ausfüllen, währe dieser Bereich später zu exact 50% deckend. Und liesse das dahinterliegende zu diesem Prozentsatz durchscheinen.
Praktischer Weise könnt Ihr eben auch auf dem Alphalayer selber "zeichnen". Somit könnt Ihr z.B mit einem Farbverlauf von Schwarz-nach Weiss einen weichen Übergang oder Rand erzeugen, und vieles mehr. Einfach einmal herumexperimentieren.
Genauso geht Ihr natürlich vor wenn Ihr zum Beispiel auf einem Foto bestimmte Bereiche Transparent werden lassen möchtet (zum Beispiel einen Gegenastand auf dem Bild freistellen und den rest transparent werden lassen. Selectiert das Object anhand der in PS vorhandenen Auswahlwerkzeuge so sauber wie nur möglich aus, und erzeugt dann mit dieser Auswahl den benötigten "Alphachannel".
So hoffe das hat ein wenig geholfen.
LG
=CODE=
Zum erstellen einer Textur mit transparentem Bereich/en gibt es mehrere Möglichkeiten.
Am besten eignen sich die folgenden Dateiformate in der hier aufgeführten Rang-Folge.
- PNG
- TGA
- GIF
Diese können Alpha Channel speichern und somit im Image darstellen.
Abhängig für welchen Zweck / Programm ihr das Image am Ende benötigt. Kann es natürlich sein das Ihr euch auf eins der Formate festlegen müsst.
Für Web-Design eignen sich (aufgrund der Vorgaben) am besten PNG und GIF (letztes kann ebenfalls auch als animiertes Image mit Frames erstellt werden)
Viele Games und Graficanwendungen jedoch arbeiten mit dem TGA Format.
Hier eine kleine Einführung wie man in diese Alphalayer / Alpha (transparente) Bereiche einbringt. (Erklärung erfolgt anhand von Adobe Photoshp CS4, nachfolgend als "PS" abgekürzt bezeichnet)
1.) PNG und Transparenz
- Erstelle in PS eine neue Datei
MENÜ - DATEI - NEU
- Im nun erscheinenden Dialog-Fenster wähle im Dropdownmenü für "Hintergrund" : Transparent
- Im grossen und ganzen ist das erstellen von Transparenz in PNF Images hiermit schon erledigt. Alles was du nun Zeichnest / auf
dem Image anbringst wird dargestellt und alles was du vom Hintergrund dabei "frei" lässt" wird später unsichtbar sein. Und somit,
wenn zum Beispiel auf eine Webseite hochgeladen den Hintergrund dort "durchscheinen lassen"
- Datei fertigstellen, und abspeichern unter MENÜ - DATEI - SPEICHERN ALS - hier im Format drowdown PNG auswählen.
Auf diese Weise erstellst du relativ simple "freistehende" icons, oder andere Formen. die keine unschönen Ränder oder gar einen
quadratischen Hintergrund in farbe des Images haben, bzw aus diesem Grund Farblich an die Webseite angepasst werden
müssten.
Note: Ein Vorteil von PNG Grafiken ist (voller Name: Portable Network Grafics) das die "scaleable" sind. D.h. beim Skalieren (grösser / kleiner machen) verlieren sie kaum an Qualität / Bildschärfe. Sie eignen sich somit hervorragend zum erstellen von Icons, und Funktionsgrafiken auf Webseiten.
2.) GIF und Transparenz:
- Gif Images sind relativ simple struktiriert und liiegen Qualitativ weit hinter den beiden anderen Formaten.
- Zum Erstellen der Gifgrafik mit transparentem Hintergrund geht Ihr einfach genauso vor wie zuvor unter 1.) beschrieben.
- Beim speichern hier natürlich "GIF" als Format auswählen.
Wichtiger Hinweis: Augfrund von Formatbezogenen Beschränkungen kann ein GIF "keine prozentuale Transparenz" speichern.
D.h. "Schattenwurf" oder änhliches was Bildpunkte mit z.B. 10% Transparentz / Deckungskraft erzeugt, werden beim Speichern gnadenlos durch einen "voll-Opaque" (deckenden) Bildpunkt ersetzt..
Wenn Ihr also Schatierungen erreichen wollt. Dann beim GIF lieber darauf zurückgreifen den Hintergrund-Layer mit der benötigten Farbe zu füllen (z.B. verwendete Farbe auf Webseiten-Element wo das Gif später platziert werden soll). und dann in Layern Darüber die gewünschten Schatten / Verlaufs- Effekte aufmalen und so speichern.
2.) TGA und Transparenz:
Hier wird es nun wesentlich komplizierter. Solltet Ihr aufgrund der Ziel-Platzierung für das Image auf ein TGA Format angewiesen sein (Bsp: Online Games wie SecondLife ®, WOW und ähnliches) dann hier eine Erklärung wie man mit "Alphachanneln" Transparente Bereiche erschafft.
- Auch hier wieder in PS Eine neue Datei erzeugen
MENÜ - DATEI - NEUE DATEI
- Hintergrundfarbe ist hier egal. Die Transparent-Einstellung hat keinerlei Einfluss bei TGA's.
Ich werde dies nun anhand eines Simplen Beispiels erläutern, das sich wenn ihr den Bogen einmal raushabt auf alles andere übertragen lässt.
- Bsp: Deckendes Quadrat auf transparentem Hintergrund.
- Wählt nun in eurer Werkzeugleiste / Toolbar ganz oben das Auswahlwerkzeug aus (Quadratische Form)
- zieht in eurem Image ein kleines Quadrat in der Mitte auf und lasst genügen "freien" bereich" zu den äusseren Bildrändern (dies wird
später unser transparenter Bereich.
- Wählt nun in der Toolbar das "füllwerkzeug" (kleines Farbeimer-Symbol) aus und klickt damit in den Bereich "innerhalb" der zuvor
erstellten Auswahl.
- nun zur Transparentz: (bitte die Selektion/Auswahl nicht deaktivieren die wird hierfür benötigt)..
Wenn euer PS immernoch die Standard Einstellung für die Arbeitsfläche hat, solltet Ihr im Rechten Bereich das "Ebenen-Docklett"
haben.
Dieses hat mehrere Tabs, darunter auch den Channel / Kanal-Tab.
Auf diesen müsst Ihr nun wechseln.
(Solltet Ihr die Ebenen-Palette nicht haben bitte einmal auf MENÜ- FENSTER - EBENEN gehen um sie einzublenden)
- Im unteren Bereich der Kanäle-Plette befinden sich 2 Icons: ein kleiner gestrichelter Kreis, und nochmal ein gestrichelter Kreis vor
einer Box ..
- auf das 2-te Icon hier klickt ihr nun einmal (kreis mit box dahinter)
- Nun erzeugt PS einen neuen Kanal-Layer namens "Alpha 1" (namen könnt ihr selbstverständlich ändern)
- Nun könnt Ihr euer Image auch schon speichern (wie oben, nur diesmal im Format-Dropdown TGA auswählen)
Erklärung zum Alphachannel:
Wenn Ihr den Alphachannel einmal anklickt, werdet Ihr sehen das es eine schwarz-weiss Darstellung Eures Bildes ist. (weisses Quadrat vor schwarzem Hintergrund)
Der Alphachannel teilt der Plattform in dem Ihr das Bild verwendet mit welche Bereiche opaque / deckend ( Weiss) und welche alpha / transparent (schwarz) sein sollen.
Da die Deckung / Transparenz mit Schwarz/Weiss dargestellt wird, sind logischerweise "Grautöne" prozentual transparent. Würdet ihr also nun auf dem Alpha-Channel das quadrat noch einmal auswählen (einfach auf das kleine Icon mit dem gestrichelten Kreis klicken), und nun mit einem 50 % Grau ausfüllen, währe dieser Bereich später zu exact 50% deckend. Und liesse das dahinterliegende zu diesem Prozentsatz durchscheinen.
Praktischer Weise könnt Ihr eben auch auf dem Alphalayer selber "zeichnen". Somit könnt Ihr z.B mit einem Farbverlauf von Schwarz-nach Weiss einen weichen Übergang oder Rand erzeugen, und vieles mehr. Einfach einmal herumexperimentieren.
Genauso geht Ihr natürlich vor wenn Ihr zum Beispiel auf einem Foto bestimmte Bereiche Transparent werden lassen möchtet (zum Beispiel einen Gegenastand auf dem Bild freistellen und den rest transparent werden lassen. Selectiert das Object anhand der in PS vorhandenen Auswahlwerkzeuge so sauber wie nur möglich aus, und erzeugt dann mit dieser Auswahl den benötigten "Alphachannel".
So hoffe das hat ein wenig geholfen.
LG
=CODE=
|
Folgende User sind hier gerade aktiv:
-
-