Photoshop: Spiegeleffekt

[mona]

::: Hoffentlich gibt es keinen Ärger, wenn ich das Apfeltalk-Logo nehme! :::

Schritt 1:
Wir brauchen zuerst einmal 2 Ebenen, die Hintergrund- und die Bildebene. Als Demonstration habe ich das Apfeltalk-Logo genommen. Wichtig ist, dass das Bild, das gespiegelt werden soll, nicht zu weit oben steht. Wir wollen es ja zum Schluss noch perspektivisch verzerren, damit es schön im Raum steht. Dazu brauchen wir etwas Platz.

Schritt 2:
Hintergrundebene(!) auswählen. Als Vordergrundfarbe Schwarz, als Hintergrundfarbe ein dunkles Grau auswählen. Verlaufswerkzeug anklicken und von unten nach oben den Verlauf ziehen.

Schritt 3:
Ebene 1 auswählen und auf das Symbol links vom Mülleimer (in der Ebenenpalette) ziehen, damit wird eine Kopie der 1.Ebene erzeugt. Nun Taste „v“ drücken und die Kopie so weit nach unten verschieben, dass zwischen Original und Kopie 1 Pixel Abstand ist. In der Menüleiste „Bearbeiten/Transformieren/Vertikal spiegeln“ auswählen.

Schritt 4:
Jetzt kommt der interessante Teil. Bei ausgewählter „Ebene 1 Kopie“ auf dieses Symbol

links vom Ordnersymbol klicken und den Tab „Kanäle“ auswählen.

Schritt 5:
In der Kanäle-Palette den untersten Kanal auswählen. Nun stellen wir die Vordergrundfarbe auf Schwarz, die Hintergrundfarbe auf Weiß. Mit dem Verlaufswerkzeug ziehen wir im Spiegelbild von unten (etwa in Höhe des gespiegelten „p“ vom Apfeltalk) nach oben bis zum „p“ von Apfeltalk im Original. Nicht erschrecken, wenn der Bereich rot eingefärbt wird. Zur Beruhigung: In der Kanäle-Palette auf das Auge des untersten Kanals klicken. Na? Bitteschön: Entspannung.

Schritt 6:
Wir verlassen die Kanäle-Palette, indem wir den Tab „Ebenen" anwählen. Nun werden beide Ebenen vereint: Oben im Fenster der Ebenen-Palette ist rechts in der Ecke ein Dreieck zu sehen, das klicken wir an und wählen aus „Mit darunter liegender auf eine Ebene reduzieren“. Mit dem Rechteck-Auswahlwerkzeug wählen wir ungefähr diesen Bereich aus:

Nun schaffen wir uns einen weichen Ausschnitt, indem wir in der Menüleiste unter „Auswahl“ die Option „Weiche Auswahlkante“ anklicken und dann 8 Pixel eingeben und mit OK verlassen.

Schritt 7:
In der Menüleiste „Filter/Weichzeichnungsfilter/Bewegungsunschärfe“ wie abgebildet einstellen.

Nun kommt die Krönung: die räumliche Wirkung. Dazu gehen wir in die Menüleiste zu „Bearbeiten/Transformieren/Perspektivisch verzerren“. An den Anfasspunkten das Bild so verzerren, dass ein räumlicher Effekt entsteht.

Fertig.

 

[Kwoth]

Wirklich nett gemacht. Nicht sonderlich schwer das ganze, aber ein recht hübscher Effekt!
Danke!

 

[Schomo]

Schönes Tutorial. Ein bischen umständlich, aber man sieht mal wieder wie viele Wege nach Rom führen. Was ich bisher nicht geschafft habe ist, mit einer Schrift der man div. Effekte zugeordnet hat das Gleiche zu machen. Selbst nachdem ich die Schrift gerendert habe geht es net. Aus irgendeinem Grund werden die Effekte nicht mitgerendert, obwohl sie in der Ebenenpalette nicht mehr ausgewiesen werden.

Gruß Schomo

 

[mona]

Meinst du so etwas?

Wenn ja: Die Textebene (die du mit Effekten versehen hast) mit der darunter liegenden vereinen. Die muss natürlich leer sein. Der Rest wie im Tutorial.

Dann funzt es.

 

[MACRASSI]

Richtig klasse!
Vielen Dank. Danach hab ich schon lange gesucht!

Gruß Rasmus

 

[Schomo]

Mona und pete, das ist die idee, die mir net eingefallen ist. Klasse eine transparente Ebene nehmen und mit dieser dann auf 1 Ebene reduzieren. Manchmal sieht man den Wald vor Bäumen net. Sollte aber eigentlich auch auf dem Weg gehen dass man die Textebene rendert, was PS aber net macht. Was soll es, so geht es und das ist wichtig.

Gruß Schomo

 

[wapplegraph]

Hallo

Das finde ich noch cool und habe es sofort nachgemacht. Ist etwa eines von meinen ersten Sachen mit Photoshop, ausser ein paar Buttons für Websites.

Das mit dem Verzerren ist noch nicht so gegangen.

Hier meinen Versuch


wapplegraph

 

[lamy]

Schönes Tutorial, danke!

Aber seitdem Office 2007 BETA 2 das kann, wirds wohl nicht lange dauern, bis viele Andere Programm sowas auch shcon "von Natur" aus mitbringen

 

[aqueous]

ähm hab da mal ne frage.

möchte gern so einen effekt auf ne neue internetseite mit einbauen...da sollen halt cd's vorgestellt werden...nur möchte ich, dass der hintergrund transparent bleibt und nicht schwarz!! soweit kann ich das ja machen (einfach die unterste ebene transparent lassen), aber wie kann ich das dann speichern?! entweder macht der den effekt beim bild dann wieder weiß, oder gar den gesamten hintergrund weiß. hmm

kann mir jemand helfen???

 

[Dante101]

Auch als png?

 

[aqueous]

gute frage hahahaha das hab ich garnicht probiert...warum aber auch nicht?! hmm...mach ich aber gleich...bearbeite grad noch die mouse over buttons!

 

[stk]

Moin,

entweder verrechnest die in Deiner Webseite vorkommende Hintergrundfarbe oder Du speicherst das als PNG-24 ab, dann bleiben die Transparenzen erhalten. Nachteil letzterer Methode: der IE kann nicht mit PNG-Transparenzen umgehen und stellt alles rundum grau dar.

Gruß Stefan

 

[Dym]

servus,

momentan gibt es wie gesagt keine browserübergreifenden darstellungsmethoden für so etwas. nimm einfach die bg-farbe deiner homepage.

 

[Schomo]

Moin,

entweder verrechnest die in Deiner Webseite vorkommende Hintergrundfarbe oder Du speicherst das als PNG-24 ab, dann bleiben die Transparenzen erhalten. Nachteil letzterer Methode: der IE kann nicht mit PNG-Transparenzen umgehen und stellt alles rundum grau dar.

Gruß Stefan

Stimmt nicht:

<!--[if IE 6]>
<style type="text/css" media="screen">
.pngweg { 
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='pngs/cd_start2.png');
        height: 1px;
        width: 1px;
   }

.pngweg img {
    visibility: hidden;
    display: none;
    height: 0;
    width: 0;
  }

</style>
<![endif]-->

So geht die Darstellung auch im IE 6

Gruss Schnomo

 

[aqueous]

dankeschön...ja als png gehts...möchte halt nicht drauf verzichten und der hintergrund hat nicht eine farbe, sondern ein bildchen

 

[aqueous]

Stimmt nicht:

<!--[if IE 6]>
<style type="text/css" media="screen">
.pngweg { 
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='pngs/cd_start2.png');
        height: 1px;
        width: 1px;
   }

.pngweg img {
    visibility: hidden;
    display: none;
    height: 0;
    width: 0;
  }

</style>
<![endif]-->

So geht die Darstellung auch im IE 6

Gruss Schnomo

muss ich den code für jedes bild extra machen, oder kann ich ihn einfach irgendwie in meine *.css datei packen?? hab da mehrere bilder auf unterschiedlichen seiten!

 

[flapappi]

Mit Adobe Photoshop Elements (hat keine Kanäle-Palette) geht das ganze wohl nicht, hm? :'-(

 

[Lord Mobi]

EDIT: So ein mist, mal zuende lessen sollte ich^^steht ja schon alles hier^^

 

[white iMarc]

Danke fü dieses Top-Tutorial...

wollte schon immer wissen, wie das geht

 

[BlackHawk]

super gemacht!

Vielen Dank für diese tolle do-it-yourself-Spiegelreflex-Anleitung!

Hat mir wirklich Spaß gemacht es nachzumachen.

Greetz