mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mo 09.12.2019 21:21 Benutzername: Passwort: Auto-Login

Thema: Farbüberlagerung eines transparenten Bildes? vom 16.10.2013


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Farbüberlagerung eines transparenten Bildes?
Seite: 1, 2  Weiter
Autor Nachricht
swedax94
Threadersteller

Dabei seit: 30.09.2013
Ort: Heidenheim a.d. Brenz
Alter: 25
Geschlecht: Männlich
Verfasst Mi 16.10.2013 09:44
Titel

Farbüberlagerung eines transparenten Bildes?

Antworten mit Zitat Zum Seitenanfang

Hey liebe Nonprintler,
da ich mich im Online Bereich nicht so auskenne, im Internet schon danach gesucht und nichts gefunden hab wende ich mich an euch.

Ist es mit CSS möglich eine Farbüberlagerung auf ein Bild anzuwenden (ähnlich wie bei Photoshop).

Um es deutlicher zu machen was ich genau meine, schreibe ich den Grund warum ich es brauche:
Auf einer Veranstaltungswebseite wird ein Logo als PNG eingebunden. Jedes Jahr hat diese Veranstaltung eine andere Farbe. Durch Ändern des Farbcodes in CMS (Contao) wird dadurch die Navigation sowie weitere Elemente auf der Seite die Farbe verändert. Nun wäre es gut wenn das Logo auch dem entsprechend variabel wäre. Der Kunde sollte nacher nur den Farbcode ändern und die Webseite passt sich dementsprechend an (inkl. Logo). Das wäre für den Kunden am einfachsten.

Hat jemand einen Lösungsvorschlag oder eine Idee wie ich das Problem mit dem Logo angehen könnte?
  View user's profile Private Nachricht senden
qualidat

Dabei seit: 14.09.2006
Ort: Berlin
Alter: 59
Geschlecht: Männlich
Verfasst Mi 16.10.2013 09:55
Titel

Antworten mit Zitat Zum Seitenanfang

Du kannst per CSS die Opazität (Parameter opacity: x; x im Bereich von 0...1 mit Punkt als Komma), deutsch "Undurchsichtigkeit" von Objekten festlegen. Default ist 1, also deckend, bei 0 ist es unsichtbar, dazwischen mehr oder weniger ...

Wie sich das optisch mischt, musst du ausprobieren. Selten ist es besonders schön, weil auch die Helligkeit und die Sättigung reduziert werden. Wahrscheinlich würden ein par Zeilen Javascript, angewandt auf ein Canvas, mehr bringen. Da könnte man Farbton, Sättigung und Helligkeit getrennt bearbeiten oder das Logo einfach in einer passenden Farbe automatisch neuzeichnen ...


Zuletzt bearbeitet von qualidat am Mi 16.10.2013 09:58, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
fyll

Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 35
Geschlecht: Männlich
Verfasst Mi 16.10.2013 09:55
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn du das Logo als SVG speicherst und einbindest, sollte es relativ stressfrei sein, den Farbcode in der .svg zu ändern.

Je nachdem wie das Logo aussiehst, könntest ihm evtl auch transparente Bereiche geben und über backgroundColor dann die Farbe ändern - oder eben mit <canvas/> arbeiten.
  View user's profile Private Nachricht senden
swedax94
Threadersteller

Dabei seit: 30.09.2013
Ort: Heidenheim a.d. Brenz
Alter: 25
Geschlecht: Männlich
Verfasst Mi 16.10.2013 10:38
Titel

Antworten mit Zitat Zum Seitenanfang

Danke für die schnellen Vorschläge.

Das Problem dabei ist, dass das Logo im Hintergrund transparent bleiben sollte, also kann ich keine Background colour vergeben.
Nächstes Problem liegt darin das Logo ziemlich filligran ist und schwarzen Linien enthält, die erhalten bleiben sollten.
Hier ist ein Ausschnitt des Logos um es sich besser vorstellen zu können (das weiße im Logo sollte variabel sein):
Dropbox
  View user's profile Private Nachricht senden
hilson

Dabei seit: 05.09.2005
Ort: Pforzheim
Alter: 49
Geschlecht: Männlich
Verfasst Mi 16.10.2013 10:47
Titel

Antworten mit Zitat Zum Seitenanfang

Hab ich das richtig verstanden ... EIN Logo, welches EINMAL pro Jahr aktualisiert werden muß?

Natürlich wäre es schön/elegant, das auf diesem Wege zu machen. Mir persönlich stellt sich allerdings dabei die Frage, ob das den Zeitaufwand zur Entwicklung einer solchen Lösung rechtfertigt * Keine Ahnung... *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Zoro

Dabei seit: 06.05.2008
Ort: Helvetia
Alter: 28
Geschlecht: Weiblich
Verfasst Mi 16.10.2013 10:54
Titel

Antworten mit Zitat Zum Seitenanfang

Das einzufärben sollte ja ein Aufwand von ca. 2 Minuten für dich sein...
  View user's profile Private Nachricht senden
swedax94
Threadersteller

Dabei seit: 30.09.2013
Ort: Heidenheim a.d. Brenz
Alter: 25
Geschlecht: Männlich
Verfasst Mi 16.10.2013 11:09
Titel

Antworten mit Zitat Zum Seitenanfang

@Zoro Ja für den Kunde aber nicht.
@hilson Ja hast du Recht. Wahrscheinlich wäre über spezielle CMS Plugins etc. möglich aber die Entwicklungszeit rechnet sich nicht mit den Kosten.

Ich habe nun eine Lösung gefunden mit den Ideen von euch kombiniert.
Ich habe das Logo in den Background mit eingearbeitet und nur das Logo transparent gemacht.
Bsp. hier: Dropbox
Nun kann ich einen Background vergeben und das Logo färbt sich.



Danke für eure Ideen.
  View user's profile Private Nachricht senden
Zoro

Dabei seit: 06.05.2008
Ort: Helvetia
Alter: 28
Geschlecht: Weiblich
Verfasst Mi 16.10.2013 11:22
Titel

Antworten mit Zitat Zum Seitenanfang

Weisst du denn schon, was das für Hintergrundfarben sein können?
Geht man zum Beispiel von einem dunklen Rot oder sowas aus, wird man nicht mehr viel vom Logo lesen können...
Was spricht denn dagegen, das Logo einfach Schwarz-Weiss zu lassen? Beisst sich ja wahrscheinlich nicht mit dem Hintergrund.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Photoshop 2020 Farbüberlagerung für Ebenenmaske
In Photoshop Farbüberlagerung + Glanzeffekt (siehe Bsp.)
Photoshop CS5 Verlaufs- und Farbüberlagerung gleichzeitig
Dreamweaver => Verlinkung eines Bildes
Teile eines Bildes farbig
flashfilm mit einem transparenten hintergrund
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.