BildFarbe geht in Webseitenhintergrundfarbe über

Simple Man

Lt. Commander

Registriert

Sep. 2003

Beiträge

1.415

• 11. September 2010

• #1

Hallo,

Ich hätte eine webseite mit der hintergrundfarbe #0b1921 und dazu noch 2 Bilder.

Ist es mit Photoshop eigentlich ohne grösseren Aufwand möglich diese 2 Bilder in die Webseite, vorallem in die Hintergrundfarbe der Webseite, zu integrieren? Im Grunde sollen einfach die Ränder des Bildes (bzw. die Konturen der Körper) nach 1 oder 1,5cm die Farbe der Webseite annehmen. Mit irgendeinem "Verwaschen/Unschärfe" Filter langsam die Farbe der Webseite annehmen. Ich habe im 3. Bild zum Testen dann einfach pixel für pixel die Kontur ausgeschnitten und mit der passenden Farbe umrahmt.


Die 2 Bilder sollen dann links und rechts oben auf der Seite stehen.

 

Anhänge

• 
  goblin.JPG

  28 KB · Aufrufe: 153
• 
  wolf.JPG

  249,6 KB · Aufrufe: 137
• 
  goblin2.JPG

  10,5 KB · Aufrufe: 168

powerfx

Admiral

Registriert

Apr. 2009

Beiträge

9.351

• 11. September 2010

• #2

Wie wär's mit einem Alpha-Kanal?

Auf das ganze Bild angewendet sieht es dann aus wie im Anhang, aber da du ja das Motiv ausschneidest, hast du praktisch schon zwei Ebenen und kannst dann den Hintergrund zu Alpha umwandeln, bzw. das gesamte Bild nach außen zur Transparenz "abschwächen".

 

Anhänge

• 
  goblin2.png

  90,8 KB · Aufrufe: 160

Zuletzt bearbeitet: 11. September 2010

Simple Man

Lt. Commander

Ersteller dieses Themas

Registriert

Sep. 2003

Beiträge

1.415

• 12. September 2010

• #3

hmm verstehe nicht ganz was du meinst.

ich habe mal die 2 Bilder mit den Figuren ausgeschnitten und angehängt.

Ziel wäre es halt, dass Farben am äußeren Ende des Randes mit der Hintergrundfarbe der Webseite verschmelzen. Damit ein flüssiger Übergang ensteht.

edit: hier die links zu den hochauflösenden Bildern
http://www.wow-europe.com/cataclysm/_images/artwork/ss36_hires.jpg
http://eu.media.blizzard.com/c_1256-4/wallpaper/goblin/goblin_1920x1200.jpg

Jemand in der Lage die 2 Figuren auszuschneiden und dann mit der hintergrundfarbe #0b1921 verschmelzen zu lassen?

 

Anhänge

• 
  wolf_ausschnitt.JPG

  75,9 KB · Aufrufe: 102
• 
  goblin_ausschnitt.JPG

  26,8 KB · Aufrufe: 133

Zuletzt bearbeitet: 12. September 2010

TBMule

Lt. Commander

Registriert

Mai 2006

Beiträge

1.156

• 12. September 2010

• #4

hab dir mal ne PSD gemacht damit sollte es verständlicher sein wie son Effekt funktioniert. Wenn Du einen weicheren Übergang haben willst musst Du nur den Hintgrund<->Transparent Verlauf verändern.
Mußte das Bild für die PSDatei verkleinern, weil nur Maximal 1MB upload möglich ist.

 

Anhänge

• 
  wolf_ausschnitt_Verlauf.jpg

  136,9 KB · Aufrufe: 119
• wolf_ausschnitt_Verlauf_Kl.7z

  717,6 KB · Aufrufe: 86

Simple Man

Lt. Commander

Ersteller dieses Themas

Registriert

Sep. 2003

Beiträge

1.415

• 13. September 2010

• #5

Genau diesen Effekt hab ich gemeint.

Hättest du diese Woche noch kurz Zeit diesen Effekt auch auf den Goblin anzuwenden? Ich glaube das ist etwas kniffliger weil es hellere Farben sind, die nachher ins dunkle verlaufen sollen.

 

TBMule

Lt. Commander

Registriert

Mai 2006

Beiträge

1.156

• 13. September 2010

• #6

Ja kann ich machen.

Ergänzung (14. September 2010)

anbei der Goblin als Verlauf

Werd nochmal den Wolf etwas verfeinern dauert aber noch etwas.

 

Anhänge

• 
  goblin_Large_Verlauf.jpg

  80,3 KB · Aufrufe: 155

Zuletzt bearbeitet: 14. September 2010

TBMule

Lt. Commander

Registriert

Mai 2006

Beiträge

1.156

• 14. September 2010

• #7

Anbei der überarbeitete Wolf

 

Anhänge

• 
  wolf_Large_Verlauf.jpg

  194,3 KB · Aufrufe: 159

Simple Man

Lt. Commander

Ersteller dieses Themas

Registriert

Sep. 2003

Beiträge

1.415

• 15. September 2010

• #8

Da kann ich wirklich nur "wow" sagen. Finde das klasse gemacht!

Wenn du mal was in Java oder C# programmiert brauchst, dann melde dich .

Ergänzung (15. September 2010)

Ui, fällt mir gerade auf die haben ja nicht die gleiche Hintergrundfarbe

Kannst du eigentlich auch mit Fireworks oder einem ähnlichen Tool umgehen um einen Banner( die 2 Bilder links und rechts und in der Mitte ein-zwei Worte als Schriftzug) zu erstellen

würde auch kinoabend+pizzaessen spendieren!

 

TBMule

Lt. Commander

Registriert

Mai 2006

Beiträge

1.156

• 15. September 2010

• #9

Die BG kann ich schnell ändern hatte die BG-Farbe genommen von Deinem Beispiel Post1 letztes Bild.
Fireworks habe ich nicht aber nen Banner kann ich erstellen.

Ergänzung (15. September 2010)

BG auf Werte geändert 0b1921

 

Anhänge

• 
  wolf_Large_Verlauf2.jpg

  201,3 KB · Aufrufe: 114
• 
  goblin_Large_Verlauf2.jpg

  68,8 KB · Aufrufe: 123

De-M-oN

Commander

Registriert

Mai 2009

Beiträge

2.740

• 15. September 2010

• #10

Ich würde die Grafiken als PNG speichern. JPG ist verlustbehaftet, PNG nicht.

 

powerfx

Admiral

Registriert

Apr. 2009

Beiträge

9.351

• 15. September 2010

• #11

PNGs wären hier ca. 10x größer.
Keine gute Idee für eine Website.

 

De-M-oN

Commander

Registriert

Mai 2009

Beiträge

2.740

• 15. September 2010

• #12

hmm ist aber komisch.

Manchmal isses nämlich auch so, das PNG erheblich kleiner als JPG ist, hatt ich schon oft so gehabt, aber auch eben manchmal deutlich größer, ja.

Naja aber wenn schon jpg würd ich das erst in jpg wandeln (weiß ja nicht wie TBMule es gehandhabt hat), wenn mans nicht nochmals speichern muss.

Sprich erst immer schön als PNG speichern und erst bei letzter Bearbeitung in JPG gehen. Jede erneute JPG Speicherung würde sonst ja weiteren Qualitätsverlust bedeuten (wie eben auch bei MP3).

Und die JPGs unbedingt ohne Component Sampling speichern (Standardmäßig isses nämlich komischerweise aktiviert) Und dann haste diese Verschwommenheit, so wie es bei Paint immer rauskommt^^

 

powerfx

Admiral

Registriert

Apr. 2009

Beiträge

9.351

• 15. September 2010

• #13

Die Antwort auf die Frage wieso PNGs manchmal kleiner und manchmal größer werden als JPGs, findest du hier, insbesondere Seiten 18 + 19. Dabei ist PNG mit GIF vergleichbar.
(Auf Seite 18 ist offenbar ein kleiner Fehler. Die obere Tabelle ist natürlich verlustfrei.)

*Edit: Zum Vergleich auch die Bilder als PNG mit und ohne Alpha-Kanal.




Die Kompression beim Goblin ist etwas besser, da dort große, einfarbige Flächen vorhanden sind.

 

Zuletzt bearbeitet: 12. Januar 2011 (Link entfernt)