Wer kennt und liebt sie nicht, diese Spiegelungen auf den Apple Bildern. Es gibt sicher einen Haufen Programme die das können, aber wenn man keinen MAC hat, ist die Auswahl schon eingeschränkter, und ausserdem gibt es ja Leute die, wie ich, auf Handarbeit stehen.
Heute also mal ein Photoshop Tutorial um ein Bild manuell mit einer Spiegelung zu versehen. Hab ich aktuell bei den kleinen Icons oben rechts im Blog versucht, und so geht es:
1. Bild aussuchen
Als erstes brauchst Du ein Bild das Du mit einer Spiegelung versehen willst. Ich hab dazu Icons vom Smashing Magazin genommen.
2. Ebene dublizieren
Nun musst Du die Ebene mit dem zurechtgeschnittenen Bild dublizieren, dazu kannst Du einfach die Ebene nehmen und auf das markierte Icon unten ziehen, Photoshop legt dann direkt eine Kopie der Inhalte an.
3. Vertikal spiegeln
Danach drückst Du „strg+T“ um die Ebene zu modifizieren, klickst mit der rechten Maustaste auf das Bild und wählst „“vertikal spiegeln“ aus. Nun hast Du den Spiegeleffekt den wir noch ein bischen verwischen wollen.
4. Ebene verschieben
Nun nutzt Du das Verschiebe-Werkzeug um die gespiegelte Ebene bis an den unteren Rand zu verschieben. Nicht schlimm wenn man einen Teil nicht sehen kann, den entfernen wir eh gleich.
5. Ebenenmaske erstellen
Um die Spiegelung etwas ausfaden zu lassen kannst Du das Werkzeug Ebenenmaske nutzen. Dazu klickst Du im Ebenen Fenster unten auf das Icon (die Ebene mit der Spiegelung muss ganz oben und markiert sein). Nun hast Du die Maske eingefügt, neben dem Bild sollte sowas wie hier auf dem Screenshot zu sehen sein.
6. Verlauf hinzufügen
Mit dem Verlauf-Werkzeug definieren wir jetzt den Bereich der weniger sichtbar werden soll. Einfach unten am Originalbild ansetzen und dann bis etwas über den Rand ziehen.
Du wirst sofor sehen wie die Spiegelebene durchsichtiger wird. Mit diesem Schritt kannst Du ein wenig rumspielen, je nachdem wie durchsichtig, bzw groß Du die Spiegelung haben willst.
7. Deckkraft reduzieren
Um die Spiegelung nochmals etwas leichter zu machen, kannst Du nun oben die Deckkraft der Ebene auf 50-60% reduzieren. Muss man nicht, sieht aber nicht schlecht aus.
Jetzt das fertige Bild noch als PNG24 speichern und fertig ist Dein Foto oder Icon mit einer Spiegelung die den Apple Bildern in fast nichts nachsteht:
Geht sicher mit diversen Programmen auch einfacher, aber es geht doch nichts über Handarbeit, ausserdem finde ich es ganz interessant zu verstehen wie solche Effekte entstehen, deshalb will ich sie wenigstens einmal selber gemacht haben.
Ich hoffe das Tutorial war verständlich und hilfreich und würde mich über Feedback sehr freuen.
Hab mich mal wieder an nem Photoshop Tutorial versucht: Spiegelung im Apple Stil –
Freue mich über Feedback:
http://tinyurl.com/qdmxhg
Hab mich mal wieder an nem Photoshop Tutorial versucht: Spiegelung im Apple Stil –
Freue mich über Feedback:
http://tinyurl.com/qdmxhg
Stark geworden, muss ich doch auch unbedingt mal ausprobieren =)
Hast du echt gut gemacht. Ich spiel auch im Moment wieder viel mit PS rum, bei mir springt bloß nie was wirklich brauchbares heraus 🙁
LG
Timo
Danke schön ❗
Ich wollte halt so Spiegelungen unter den Icons haben, also hab ich am Wochenende gelernt wie das geht..
Und da es relativ schwer war ein einfaches Tutorial zu finden, hab ich meine Lernkurve eben in ein paar Schritten niedergeschrieben, denn so kompliziert sind diese Spiegelungen gar nicht.
Photoshop Tutorial: Spiegelung im Apple Stil | Das Meinungs-Blog: Hier ein kleines Photoshop Tutorial mit dem Du.. http://bit.ly/16y6Ko
Hach ja, wenn ich mal mit meinem GIMP umgehen könnte… Ob ich das wohl auch so bei Gimp anwenden könnte ? Ich glaube ich muss mich damit mal mehr auseinandersetzen.
Super Tutorial, wirklich gelungen und auch für einen nicht Experten nachvollziehbar. Weiter so!
Ferdi
@Sebastian: Denke schon, Du musst halt nur bei Gimp die Werkzeuge suchen, die Logik ist ja relativ einfach
@Ferdi: Danke sehr ❗
@Matthias:
Ich werde mal versuchen, dein Tutorial in Gimp umzusetzen und dann gibt’s vielleicht ein Turorial für Gimp bei mir dazu 🙂 Natürlich mit Trackback zu deinem Tutorial, damit die Leute das auch finden 🙂
Aber ich muss das erstmal testen, obs geht.
@Kim: Au ja, das wird sicher dem einen oder anderen helfen, ich bin gespannt
@Matthias:
Im Grunde zeichnet sich ab, dass sich dein Tutorial 1:1 in Gimp umsetzen lässt, man muss nur die Werkzeuge an anderen Stellen suchen 🙂 Mein Problem ist jetzt nur dieser Verlauf mit Transparenz. Entweder liegts an meinem Bild, was ich ausgewählt hab oder am Gimp oder an der Maske, die ich verwende – ich suche noch die Ursache *g*. Problem is bei mir, dass er von Schwarz kommend bis 50% Grau 100% Deckung bzw. Transparenz macht und dann sprunghaft ab 50,X% Grau in Richtung Weiß auf einmal komplett tranzparent wird bzw. abdeckt… Aber das kann nur eine Kleinigkeit sein denke ich.
Komisch, klingt nach ner falschen Einstellung beim Verlauf..
Viel Erfolg 😮
Es lag an der zugrundeliegenden Grafik… Irgendwie ist GIF als Ausgangsbasis in dem speziellen Fall jetzt nicht gut gewesen 🙂 Mit nem JPG hats direkt auf Anhieb funktioniert. Jetzt muss ich nur noch das Tutorial „aufs Papier“ bringen 🙂 Das wird dann wohl heute Abend passieren.
Es gibt kleine Unterschiede, z.B. muss man bei Gimp VORHER bevor man den Verlauf „laufen lässt“, die Deckkraft einstellen, weil die sich im Nachhinein nur noch über die Ebene selbst regeln lässt. Sind aber Dinge, auf die ich wohl dann auch eingehen werde…
Deine Tutorials sind wirklich gut, davon kannst Du gerne mehr posten
. So eine Spiegelung habe ich auch schon einmal im Selbstversuch probiert, hat aber nicht geklappt.
Ein sehr schönes Tutorial!
Im Grunde genommen ist eine Spiegelung ganz einfach, man muss nur wissen wie.
Du hast es in deinem Tutorial gut, einfach und schnell erklärt (auch wenn die Bilder skalierbar sein sollten hier 😉 ).
Freue mich auf weitere Tutorials von dir!
Gruß
Danny
Ich weiß nicht, ob der Trackback nicht durchkam oder noch in der Moderation hängt… jedenfalls ist das angekündigte Gimp-Tutorium in Anlehnung an dein Tutorium fertig und unter diesem Link zu erreichen: Spiegelungseffekt mit Gimp erzeugen.
@Andreas: Danke! Werd ich sicher auch machen wenn ich wieder was über Photoshop lerne, bzw ihr etwas findet was ich kann 😉
@Danny: Danke sehr. Stimmt, das mit dem Skalieren ist eine gute Idee, das mach ich das nächste Mal, versprochen.
@Kim: Wow! Klasse Tutorial, hätte nicht gedacht, dass das in Gimp auch so einfach geht.
@Matthias:
Du solltest dich mehr mit Gimp befassen 🙂 Aber auf der anderen Seite: Wenn du in Zukunft noch weitere Photoshop-Tuts machst, hab ich wiederum Motivation und Stoff, equivalentes für Gimp zu bosseln 🙂 Auf dem Weg können wir natürlich auch weitermachen 🙂 Schafft „Content“ und Vernetzung 🙂
Stimmt, gute Idee..
Zwei hab ich ja noch an denen Du Dich versuchen kannst:
http://www.meinungs-blog.de/photoshop-tutorial-rahmen-mit-schatten/
http://www.meinungs-blog.de/tilt-shift-fotos-in-miniaturen-mit-photoshop-umwandeln/
@Matthias:
Hab’s mir auf die Todo-Liste geschrieben… wird aber heute und morgen nix, denn das derzeitige Projekt nennt sich „Büromöbel meiner Maus aufbauen“ 🙂 Da bin ich aber mit angehendem Schwiegerpapa schon fast fertig, müssen nur noch die Türen ausgerichtet werden, dass sie „im Blei“ sind 🙂
Dann viel Erfolg und Gruss and die Maus 🙂
Hallo Matthias,
super Tutorial! Ich nutze zwar nur PS Elements 7, aber selbst damit geht das, dank Deiner Anleitung hervorragend!
Gute Nacht, Micha
Kleiner Tipp, lass zwischen dem Button und dem gespiegelten Element einen kleinen Luftraum, dann wirkt es echter 😉
Mit Gimp geht es praktisch genauso!
Super tutorial 🙂
Gut für meine Icons auf meinem Mac dock.
PS; Ich habe Windows :D.