Erstellen eines transparenten Hintergrunds in HTML und CSS (Deckkraft und RGBA-Effekte)
Durchscheinender Effekt Element ist deutlich sichtbar Hintergrundbild und verbreitete sich in verschiedenen Betriebssysteme weil es stilvoll und schön aussieht. Die Hauptsache ist, dass unter den durchscheinenden Blöcken kein monochromatisches Muster entsteht, sondern ein Bild; in diesem Fall macht sich die Transparenz bemerkbar.
Dieser Effekt wird erreicht verschiedene Wege, einschließlich altmodischer Techniken wie der Verwendung eines PNG-Bilds als Hintergrund, der Erstellung eines karierten Bilds und der Opazitätseigenschaft. Sobald jedoch die Notwendigkeit besteht, einen durchscheinenden Hintergrund in einem Block herzustellen, haben diese Methoden unangenehme Nachteile.
Schauen wir uns die Transluzenz von Text und Hintergrund an – wie man sie beim Website-Design richtig einsetzt:
Das Hauptmerkmal dieser Eigenschaft ist, dass der Transparenzwert alles beeinflusst untergeordnete Elemente drinnen und nicht nur im Hintergrund. Das bedeutet, dass sowohl der Hintergrund als auch der Text durchscheinend werden. Sie können die Transparenz erhöhen, indem Sie den Deckkraftbefehl von 0,1 auf 1 ändern.
HTML 5 CSS 3 IE 9
Im Webdesign kommt auch Teiltransparenz zum Einsatz und wird durch das RGBA-Farbformat erreicht, das nur für den Hintergrund des Elements festgelegt wird.
Normalerweise sollte in einem Design nur der Hintergrund eines Elements durchscheinend sein und der Text sollte undurchsichtig sein, um die Lesbarkeit zu gewährleisten. Die Opazitätseigenschaft ist hier nicht geeignet, da der Text innerhalb des Elements ebenfalls teilweise transparent ist. Am besten verwenden Sie das RGBA-Format, das über einen Alphakanal, also einen Transparenzwert, verfügt. Der Wert wird rgba geschrieben, dann werden die Werte der roten, blauen und grünen Farbkomponenten durch Kommas getrennt in Klammern aufgeführt. Zuletzt gibt es die Transparenz, die von 0 bis 1 eingestellt werden kann, wobei 0 volle Transparenz und 1 Farbopazität bedeutet – die Syntax für die Verwendung von RGBA.
Durchscheinender Hintergrund HTML 5 CSS 3 IE 9
Die Hintergrunddeckkraft ist auf 90 % eingestellt – halbtransparenter Hintergrund und undurchsichtiger Text.
Standardmäßig werden alle neuen Ebenen in Photoshop mit 100 % Deckkraft erstellt. Der Grad der Transparenz der Ebene kann jedoch über die Einstellungen geändert werden Opazität Und Füllen befindet sich oben in der Ebenenpalette.
Opazität(Deckkraft) ist eine Einstellung mit einer Skalierung von 100 %, mit der Sie den Grad der Transparenz der gesamten Ebene mit allen angewendeten Effekten ändern können. Wenn der Wert von 100 % abweicht, ist die darunter liegende Ebene sichtbar. Ein Transparenzgrad von 0 % bedeutet, dass keine sichtbaren Bilder vorhanden sind.
Die Transparenz der Schicht lässt sich mit Pauspapier vergleichen, das auf Zeichnungen aufgetragen wird, um diese zu kopieren.
Füllen(Füllen) ist eine auf 100 % skalierte Einstellung, mit der Sie die Sichtbarkeit einer Ebene ändern können, ohne dass sich dies auf ihre Überlagerungen auswirkt.
Wie Transparenz in Photoshop aussieht
Logischerweise Transparenz digitales Bild ist ein Mangel an Farbsättigung und -dichte. Wenn Sie sich Farbe als Film vorstellen, dann ist Transparenz die Intensität des Lichts, das durch sie scheint. Aber Wie zeigt man die Transluzenz am Computer an?
Photoshop hat eine Transparenzkonvention für die Welt eingeführt Computergrafik — Schachhintergrund.
Mittlerweile ist diese Konvention zum Standard geworden. Viele Programme und Webdienste verwenden einen Schachbretthintergrund wir reden überüber Transparenz. Beispielsweise zeigen Yandex.Images oder Google Images Bilder mit transparenten Elementen auf einem schachbrettartigen Hintergrund.
3 Möglichkeiten, eine Bildebene transparent zu machen
Zunächst benötigen Sie die erforderliche Schicht. Auch hier bietet sich die Technik an, zwei oder mehrere mit der Strg- oder Shift-Taste auszuwählen.
Notiz
Die Hintergrundebene (mit dem Schlosssymbol) darf nicht transparent sein. Für ihn sind diese Einstellungen inaktiv.
Noch eine Anmerkung
Die Miniaturansicht der Ebene ändert sich nicht, unabhängig davon, welchen Deckkraftwert Sie festlegen.
Methode 1 Zahlen eingeben
Geben Sie im Fenster „Spezielle Einstellungen“ der Palette den gewünschten Transparenzwert in Zahlen von 0 bis 100 ein. Da beide Einstellungen fast die gleiche Wirkung haben, können Sie beide verwenden. Merken Sie sich einfach, was sie sind.
Methode 2 Schieberegler
Etwas rechts neben den Zahlen befindet sich eine Schaltfläche mit einem kleinen Pfeil. Wenn Sie darauf klicken, erscheint ein Schieberegler. Sie müssen es mit der Maus nach links oder rechts verschieben, um die Transparenz der Ebene zu verringern bzw. zu erhöhen.
Die Zahlenanzeige zeigt den aktuellen Wert an und das Bild selbst ändert sich mit der Bewegung Ihrer Hand.
Methode 3: Verwenden der Tastatur
Bei einer Reihe von Photoshop-Werkzeugen ist es möglich, die Deckkraft einer Ebene über die Tastatur zu ändern. Wählen Sie zum Beispiel ein Werkzeug aus oder (es gibt auch eine Reihe anderer Werkzeuge, die Sie mit roher Gewalt finden können).
Drücken Sie nun die Zahlen auf Ihrer Tastatur:
- Die Zahl 1 ändert die Deckkraft auf 10 %, 2 auf 20 %, 5 auf 50 % usw.;
- Die Zahl 0 bedeutet 100 %;
- Wählen Sie 55 und Sie erhalten 55 %, 67 ist 67 % und so weiter
Um die gleiche Technik zu nutzen, um sich zu verändern Füllt, halten Sie gleichzeitig mit den Zahlen die Umschalttaste gedrückt.
So machen Sie einen separaten Abschnitt einer Ebene transparent
Um nicht die gesamte Ebene transparent zu machen, sondern nur einen separaten Abschnitt davon, ist ein gewisser Aufwand erforderlich. Für diesen Zweck gibt es kein Werkzeug als solches. Je nach Problem gibt es jedoch mindestens zwei Lösungen.
Beide Lösungen eint die erste, vielleicht zeitaufwändigste Arbeit – die Schaffung eines eigenen Bereichs. Die Logik der Aktion ist einfach: Sie müssen ein Bildfragment auswählen, mit dem weitergearbeitet werden soll.
Nehmen wir in unserem Beispiel an, Sie müssen einen grauen runden Hintergrund transparent machen. Dazu werde ich das Tool verwenden. Im Einstellungsfeld müssen Sie den Parameter einstellen Zur Auswahl hinzufügen und klicken Sie dann auf alle gewünschten Bereiche, bis Sie alle ausgewählt haben.
Nachdem der ausgewählte Bereich erschienen ist, können Sie dieses Fragment transparent machen.
Methode 1: Den gewünschten Bildbereich auf eine neue Ebene ausschneiden
Zunächst müssen Sie sicherstellen, dass keines der Werkzeuge zum Erstellen eines ausgewählten Bereichs aktiv ist. Zum Beispiel Zauberstab, das im vorherigen Schritt verwendet wurde.
Jetzt können Sie klicken Rechtsklick Maus durch Auswahl. wird auftauchen Kontextmenü. Wir sind an der Mannschaft interessiert Auf neue Ebene schneiden.
Dadurch wird dieses Fragment vom aktuellen Bild getrennt und auf eine neue Ebene verschoben. Und dann können Sie mit dieser neuen Ebene machen, was Sie wollen, einschließlich der Änderung der Transparenz.
Methode 2: Verwenden eines Radiergummis
Diese Methode eignet sich, wenn Sie keine gleichmäßige, sondern eine schwebende Transparenzreduzierung erreichen möchten, also diesen Effekt an manchen Stellen stärker und an anderen schwächer machen möchten.
Wählen Sie aus und legen Sie in der Optionsleiste den Wert fest Opazität von 100 % abweichend. Löschen Sie dann Bereiche des Bildes, die sich im ausgewählten Bereich befinden. Das Tool wirkt sich nur auf die Pixel aus, die Sie ausgewählt haben.
Ändern Sie den Wert Opazität, wenn Sie einen ungleichmäßigen Effekt erzielen möchten.
So speichern Sie ein Bild mit Transparenz
Es gibt viele, aber nur zwei davon unterstützen Transparenz – PNG und GIF.
GIF hat eine Einschränkung – das Pixel muss entweder transparent sein oder nicht, es gibt keine dritte Option, d. h. ein Transparenzwert von beispielsweise 59 % wird nicht mehr unterstützt. Dieses Format unterliegt auch Einschränkungen hinsichtlich der Anzahl der verwendeten Farben – es dürfen nicht mehr als 256 sein.
Daher muss das Bild gespeichert werden im PNG-Format. Nur weist es keine Mängel auf und ist in der Lage, durchscheinende Pixel anzuzeigen.
Um ein PNG-Bild in Photoshop zu erstellen, müssen Sie den folgenden Befehl ausführen: Datei – Speichern unter. Es erscheint ein Dialogfeld, in dem Sie einen Speicherort auf Ihrem Computer angeben und aus der Dropdown-Liste auswählen müssen Dateityp — PNG(*.PNG).
Wenn Sie einen Fehler im Text bemerken, markieren Sie ihn und drücken Sie Strg + Eingabetaste. Danke!
Hallo liebe Besucher. In dieser Lektion werde ich zeigen, wie Sie Photoshop verwenden können Hintergrund entfernen und machen Sie das Foto transparent. Sie benötigen keine besonderen Kenntnisse über dieses Fotomonster, da hier alles sehr einfach ist. Hauptsache du hast Photoshop installiert und wiederholst alle Schritte nach mir.
Wie erstelle ich also einen transparenten Hintergrund in Photoshop?
Starten Sie Photoshop und öffnen Sie das experimentelle Foto. Klicken Sie auf das Menü „Datei – Öffnen“ und geben Sie den Speicherort des Bildes an.
Großartig, das Foto ist geöffnet und wir beginnen mit dem Zuschneiden des Hintergrunds. Zunächst müssen wir die Ebene entsperren. Achten Sie auf die untere rechte Ecke des Programms. Dort sehen Sie die Hauptebene unseres Fotos und kleines Vorhängeschloss.
Diese Sperre muss verschwinden, das heißt, die Ebene wird entsperrt. Dazu direkt zur Schleuse Machen Sie einen Klick mit der linken Maustaste. Und das Schloss ist weg!
Jetzt müssen wir den Hintergrund entfernen. Nehmen Sie dazu eine Art Auswahlwerkzeug, zum Beispiel Zauberstab.
Klicken Sie mit dem Werkzeug auf den Hintergrund des Fotos und wählen Sie so das Objekt aus, das wir nicht benötigen.
Erschien gepunktete Linie(laufende Ameisen). Sie müssen lediglich die ENTF-Taste auf Ihrer Tastatur drücken und der Hintergrund wird gelöscht. Sehen Sie, wie es ausgegangen ist:
Super! Deaktivieren Sie es nun, indem Sie die Tastenkombination STRG+D drücken.
Nun, im Allgemeinen, wie Erstellen Sie in Photoshop einen transparenten Hintergrund Wir haben es herausgefunden und jetzt müssen wir nur noch dieses Foto richtig speichern.
Klicken Sie dazu auf das Menü Datei – Für Web speichern. Oder einfach verwenden ALT+UMSCHALT+STRG+S.
Sie sehen ein Fenster, in dem wir das PNG-24-Format auswählen und erst dann auf die Schaltfläche Speichern klicken müssen.
Schauen Sie nun, was passiert ist und was geworden ist:
Abschließend sei noch erwähnt, dass Sie in manchen Fällen, wenn Sie in Photoshop einen transparenten Hintergrund für ein Bild erstellen möchten, möglicherweise andere Auswahlwerkzeuge verwenden müssen, z. B. Stift oder magnetisches Lasso. Ich habe das Tool verwendet Zauberstab, da die Person auf meinem Foto leicht vom Hintergrund zu unterscheiden war. Wenn Sie bei komplexen Bildern den Hintergrund entfernen, müssen Sie sich etwas mehr anstrengen.
Das ist alles für heute, viel Glück!
Mit dem Aufkommen von CSS3 ist die Arbeit von Layout-Designern in vielerlei Hinsicht einfacher und logischer geworden: Schließlich können Sie jetzt jedes Objekt wirklich flexibel konfigurieren und müssen immer weniger auf JavaScript zurückgreifen. Nehmen wir an, Sie müssen die Transparenz des Hintergrunds anpassen – CSS bietet sofort mehrere Optionen.
Der Hintergrund wird durch eine Reihe von Attributen angegeben (Hintergrundwiederholung, Hintergrundanhang, Hintergrundursprung, Hintergrundclip, Hintergrundfarbe), und jedes davon kann einzeln angegeben oder unter dem Hintergrundattribut kombiniert werden. Schauen wir uns jeden von ihnen genauer an.
Attribut „Hintergrundfarbe“.
Sogar IE8 unterstützt diese Methode. Für eine flexible Gestaltung werden mehrere Bilder als Hintergrund verwendet. Die Hauptsache ist, dass Sie bei der Verwendung eines Bildes nicht vergessen, es auch anzugeben CSS-Farbe Hintergrund, da Benutzer das Bild möglicherweise einfach nicht laden.
Attribut „Hintergrundposition“.
Wenn Sie ein Bild verwenden, um den Hintergrund eines Blocks festzulegen, können Sie das Bild mit CSS an einer beliebigen Stelle auf dem Bildschirm positionieren. Standardmäßig befindet sich das Bild in der oberen linken Ecke. Das Attribut akzeptiert entweder verbale Angaben (oben, unten, links, rechts) oder numerische Angaben (Prozentangaben, Pixel und andere Maßeinheiten). In diesem Fall müssen Sie zwei Werte angeben: horizontal und vertikal:
body (background-position: right center;) – in diesem Beispiel befindet sich der Hintergrund auf der rechten Seite der Seite und die Abstände von unten und oben zum Bild sind gleich.
Attribut „Hintergrundgröße“.
Manchmal erforderlich mit mit CSS Dehnen Sie den Hintergrund oder verkleinern Sie ihn. Verwenden Sie dazu das Attribut „Hintergrundgröße“. Die Hintergrundgröße kann entweder in Pixeln oder Prozentsätzen oder in beliebigen anderen Maßeinheiten festgelegt werden.
Es gibt einige Probleme mit diesem Attribut: Um den Hintergrund in früheren Browserversionen korrekt anzuzeigen, müssen Präfixe verwendet werden. Sicherlich, aktuelle Versionen Dieses Attribut wird vollständig unterstützt und die Notwendigkeit spezifischer Eigenschaften entfällt.
Attribut „Hintergrundanhang“.
Dieses Attribut gibt das Verhalten an Hintergrundbild beim Scrollen. Es kann also drei Werte annehmen (ohne Berücksichtigung der Vererbung, die allen in diesem Artikel vorgestellten Attributen gemeinsam ist):
- Fest– macht das Bild vor dem Hintergrund bewegungslos;
- scrollen— Der Hintergrund scrollt zusammen mit anderen Elementen;
- lokal– Das Hintergrundbild scrollt, wenn der Inhalt scrollbar ist. Hintergrund, der über den Inhalt hinausgeht, wird behoben.
Anwendungsbeispiel:
Körper (Hintergrundanhang behoben).
Firefox unterstützt derzeit die letzte Eigenschaft (lokal) nicht.
Hintergrund-Origin-Attribut
Dieses Attribut ist für die Positionierung des Elements verantwortlich. Browser frühere Versionen erfordern die Verwendung von Präfixen. Die Eigenschaft selbst hat drei Parameter:
- Polsterbox positioniert den Hintergrund relativ zur Kante und berücksichtigt dabei die Dicke des Rahmens;
- Grenzfeld unterscheidet sich von der vorherigen Eigenschaft dadurch, dass die Grenzlinie den Hintergrund ganz oder teilweise überlappen kann;
- Inhaltsbox Positioniert das Bild und verknüpft es mit dem Inhalt.
Bei der Angabe mehrerer Werte kann es sein, dass Browser unterschiedlich reagieren: Firefox und Opera akzeptieren nur die erste Option.
Hintergrundwiederholungsattribut
Wenn der Hintergrund durch ein Bild vorgegeben ist, sollte dieser in der Regel horizontal oder vertikal wiederholt werden. Dafür wird das Attribut „background-repeat“ verwendet. Somit kann der Hintergrund eines Blocks, dessen CSS eine solche Eigenschaft enthält, einen von mehreren Parametern haben:
- keine Wiederholung— das Bild erscheint auf der Seite in einer einzigen Version;
- wiederholen— der Hintergrund wiederholt sich entlang der x- und y-Achse;
- wiederholen-x- nur horizontal;
- wiederholen-y- nur vertikal;
- Raum— Der Hintergrund wird wiederholt, aber wenn der Raum nicht ausgefüllt werden kann, entstehen Lücken zwischen den Bildern;
- runden— Das Bild wird skaliert, wenn es nicht möglich ist, den gesamten Bereich mit ganzen Bildern zu füllen.
Beispiel für die Attributverwendung:
Körper (Hintergrundwiederholung: Wiederholung ohne Wiederholung)- ähnlich Hintergrundwiederholung: Wiederholung-y.
In CSS3 ist es möglich, Werte für mehrere Bilder festzulegen, wenn Sie die Parameter durch Kommas getrennt auflisten.
Attribut „Hintergrundclip“.
Dieses Attribut definiert das Verhalten des Hintergrunds unter Rändern (z. B. bei gepunkteten Rändern):
- Polsterbox— der Hintergrund wird ausschließlich innerhalb des Blocks angezeigt;
- Grenzfeld- das Bild passt in den Rahmen;
- Inhaltsbox— Das Bild im Hintergrund erscheint nur innerhalb des Inhalts.
Anwendungsbeispiel:
Körper (Hintergrundclip: Inhaltsbox;).
Chrom und Safari erfordern das Präfix -webkit-.
Deckkraft und Filterattribute
Mit dem Opazitätsattribut können Sie die Transparenz des Hintergrunds festlegen – die CSS-Eigenschaft funktioniert in allen Browsern. Der Wert kann von 0,0 bis einschließlich 1,0 eingestellt werden. Gleichzeitig können Sie die CSS-Hintergrundtransparenz ohne einen ganzzahligen Wert festlegen: Anstelle von 0,3 schreiben Sie einfach.3:
.block (Hintergrundbild: url(img.png); Deckkraft: .3;).
Um die Hintergrundtransparenz festzulegen, deren CSS auch für IE unter Version 9 funktioniert, verwenden Sie das Filterattribut:
.block (Hintergrundbild: url(img.png); Filter: alpha(opacity=30);).
In diesem Fall wird der Opazitätswert im Bereich von 0 bis 100 eingestellt. Bitte beachten Sie, dass sich das Opazitätsattribut von der Einstellung der Transparenz mithilfe von RGBA durch Vererbung unterscheidet: Bei Verwendung der Opazität wird nicht nur der Hintergrund transparent, sondern auch alle Elemente innerhalb des Blocks .
Überwachen Sie stets die Browser-Nutzungsstatistiken für die GUS und alle anderen Länder. Das größte Problem für alle Webdesigner sind die alten Versionen des IE; sie erlauben nicht die vollständige Nutzung von CSS3. Vergessen Sie beim Codieren nicht, spezielle Dienste zu nutzen, die prüfen, ob Ihr Browser CSS-Eigenschaften unterstützt. Wenn Sie ältere Browserversionen nicht installieren können, suchen Sie einen Dienst, der die Funktionsfähigkeit der Website überprüft verschiedene Browser online.
Transparenz in Photoshop– eines der Schlüsselkonzepte. Wenn Sie gerade erst mit dem Erlernen von Photoshop begonnen haben und noch nicht wissen, wie Sie den Hintergrund eines Fotos oder einen Teil einer Zeichnung transparent machen, ist dieses kurze Tutorial mit Illustrationen hilfreich für Sie.
So erstellen Sie einen transparenten Hintergrund in Photoshop
Um einen transparenten Hintergrund in einem Foto oder einer Zeichnung zu erstellen, reicht es aus, zwei Ebenen zu erstellen: die untere transparente Hintergrundebene und die obere sichtbare Ebene, auf der Sie unnötige Bildbereiche entfernen können.
1. Öffnen Photoshop. Öffnen Sie es mit einem Bild, das auf einem transparenten Hintergrund platziert werden soll ( Datei->Öffnen…).
2. Wählen Sie das gesamte Bild/Foto aus ( Strg+O).
3. Kopieren Sie das ausgewählte Bild ( Strg+C).
4. Öffnen Sie eine neue Datei in Photoshop ( Datei->Neu… oder Strg+N). Wählen Sie im angezeigten Fenster in der untersten Dropdown-Liste den Wert aus Transparent– „Transparenz“:
Klicken Eingeben und das sehen wir Photoshop hat eine neue Datei mit einem Hintergrund bestehend aus weißen und grauen Quadraten erstellt. Diese Quadrate in Photoshop kennzeichnen vollständig transparente Bereiche.
5. Fügen Sie das zuvor kopierte Bild in eine neue Datei mit transparentem Hintergrund ein. Hierfür verwenden wir traditionell Strg+V. Dadurch wird das zuvor kopierte Bild in die aktuelle, völlig leere und transparente Ebene eingefügt.
6. Wählen Sie mit den regulären Auswahlwerkzeugen den Bereich aus, den Sie löschen möchten ( M)
oder mit „magischen“ Werkzeugen ( W):
Drücken Sie eine Taste auf Ihrer Tastatur Löschen und anstelle des ausgewählten Hintergrunds oder Bildausschnitts sehen Sie weiße und graue Quadrate – dieser Bereich ist transparent. Als nächstes können Sie das Bild entweder mit Transparenz speichern oder in Photoshop weiter mit dem Bild experimentieren.
So erstellen Sie durchscheinenden Text und Wasserzeichen
In Photoshop zusätzlich zum Status „ vollständig sichtbar" Und " völlig transparent» Es gibt eine Bedingung teilweise Sichtbarkeit oder teilweise Transparenz. Die teilweise Sichtbarkeit eines Objekts im Bild wird in Prozent angegeben.
Zum Schutz des Urheberrechts werden häufig durchscheinende Texte, Logos oder andere durchscheinende Markierungen über Originalbildern verwendet. Sie werden normalerweise mit Photoshop oder speziellen Plugins angewendet. Ihr Ziel ist es, die Originalquelle des Bildes anzugeben, die Urheberschaft anzugeben und denjenigen das Leben schwer zu machen, die das Bild stehlen wollen.
Nehmen wir an, wir müssen ein exklusives Foto eines Autos auf der Website des Unternehmens veröffentlichen und dabei eine durchscheinende Beschriftung über dem Foto angeben. Diese Art von Transluzenz lässt sich ganz einfach in Photoshop erstellen:
1. Starten Sie Photoshop und öffnen Sie unser Foto darin ( Datei->Öffnen…).
2. Wählen Sie das Textwerkzeug ( T) und schreiben Sie eine Inschrift über das Foto die richtige Größe, Farbe und Stil:
In diesem Fall wird der Text automatisch in einer separaten Ebene platziert und ist zu 100 % sichtbar.
3. Stellen Sie die Sichtbarkeit des weißen Textes im Foto auf 40 % ein. Gehen Sie dazu im Ebenenfenster ( Lagen) Bewegen Sie den Eigenschaftsregler Opazität auf einen Wert von 40 %:
Alle. Jetzt kann ein Bild mit einer durchscheinenden Beschriftung gespeichert werden JPG-Format und auf der Website veröffentlichen. Ebenso können Sie anstelle von Text ein beliebiges anderes Bild einfügen, beispielsweise ein BMW- oder Website-Logo.
In welchem Format soll ich ein Bild mit Transparenz speichern?
Bitte beachten Sie, dass das Speichern eines in Photoshop bearbeiteten Fotos mit transparenten Bereichen in JPEG-Format Das ist nicht möglich. Dieses Format unterstützt keine Transparenz. Transparente Bereiche werden beim Speichern als JPG automatisch mit Farbe gefüllt (standardmäßig weiß). Darunter werden von Browsern korrekt angezeigt und unterstützen Transparenz – nur GIF und PNG. Das native Photoshop-PSD-Format wird von Browsern nicht angezeigt.
Leider haben die Bildformate GIF und PNG ihre Grenzen. Das GIF-Format kann wie 8-Bit-PNG maximal 256 Farben speichern und ist daher nicht zum Speichern von Fotos geeignet. Obwohl 24-Bit-PNG zum Speichern von Fotos und anderen Grafiken mit Farbverläufen und Transparenz geeignet ist, beschränken viele Websites die Formate der Grafiken, die Besucher hochladen können. Daher können Sie Ihre Fotos oder Avatare nur im JPG- oder GIF-Format auf solche Websites hochladen. In diesem Fall müssen Sie das Foto nicht auf einem transparenten Hintergrund speichern, sondern in Photoshop den Hintergrund einfügen, auf dem es auf der Site platziert werden soll, die Ergebnisse im JPG speichern und es erst dann auf die Site hochladen.