Copy Paste Love

Bilder "verträumt" bearbeiten in Photoshop ♥♥♥

Hallo zusammen!

Verträumte, blasse, rosafarbene Bilder sind derzeit sehr beliebt, heute erkläre ich euch, wie man diesen Effekt in Photoshop erreichen kann. Wir arbeiten hier viel mit Ebenen, man kann den Effekt also jederzeit in seiner Intensität steuern und verändern.

Zuallererst brauchen wir ein Bild, welches wir bearbeiten möchten. Ich nutze wieder die Katze aus dem letzten Tutorial :)

David Joyce

Wer möchte, kann dem Bild erstmal ein paar Bokehkreise verpassen, die Anleitung habe ich euch ja schon gegeben :)

Bei den Ebenen findet ihr ein kleines Symbol, einen Kreis mit einer weißen und schwarzen Hälfte. Damit erstellt man eine Einstellungsebene.
Hiermit wollen wir eine Volltonebene erstellen:

Wir wählen eine violette Farbe aus, setzen den Ebenenmodus auf Negativ multiplizieren und verringern die Deckkraft:

Als nächstes erstellen wir noch eine Volltonebene in einem blassgelben Ton, Ebenenmodus Weiches Licht und verringerte Deckkraft:

Dies ist unser Zwischenergebnis:

MERKE

Einstellungsebenen sind toll, da man ALLES noch im Nachhinein ändern kann. Ein Doppelklick auf das Symbol der Ebene öffnet wieder das Einstellungsmenu.

Ich möchte noch ein wenig mehr rumspielen, und zwar mit Verläufen.
Hierbei klicken wir wieder auf das Symbol für die Einstellungsebenen und wählen den Verlauf aus. Mit einem Doppelklick auf den Verlauf können wir diesen bearbeiten:

Hierbei kann man zwischen verschiedenen Vorgaben wählen oder einen eigenen Verlauf kreiren. Mir gefällt der weiß-orange-Verlauf sehr gut, daher nehm ich ihn einfach.

Nun setzen wir auch hier den Ebenenmodus auf Weiches Licht und verringerter Deckkraft. Klicken wir nochmal auf das kleine Symbol für den Verlauf, so öffnet sich das Fenster erneut und wir können unseren Verlauf weiter verändern. Ich habe hier den ganzen Verlauf umgekehrt, damit orange unten ist. Außerdem habe ich den Winkel verändert.
Wenn man möchte, kann man auch die Farbe ändern etc.... Es ist also alles im Nachhinein änderbar!

Mir persönlich hat das Bild nun doch zu wenig Kontrast.
Es gibt natürlich tausende Wege den Kontrast zu erhöhen, ich bevorzuge hier den folgenden:

alle Ebenen mit Strg + Alt + Shift + E zu einer neuen Ebene zusammenfassen (ich LIEBE diese Tastenkombination!)
Ebenenmodus auf Multiplizieren
Deckkraft verringern

Und dies ist nun mein Ergebnis:

Ich wünsche euch viel Spaß beim Ausprobieren!

Grüße,
Jenny

Bokeh-Pinsel erstellen in Photoshop ♥♥♥♥

Hallöchen!

Heute erkläre ich euch, wie ihr in Photoshop* eine eigene Pinselvorgabe für Bokeh zaubern könnt.
*(ich nutze CS3 und kann leider nicht bei anderen Photoshopversionen helfen, falls die Bezeichnungen anders sind)

Dazu erstellen wir eine neue Datei mit den Abmessungen 900px x 900px. Nun fügt ihr eine neue Ebene hinzu (rechts unten im Bild), zieht einen Kreis mit dem Auswahlwerkzeug (links oben) und füllt ihn schwarz (links).

Mit einem Doppelklick auf unsere neue Ebene können wir verschiedene Ebenenstile verändern. Hier nehmen wir folgende Einstellungen vor:

Nun bestätigen wir mit "Ok" :)

Damit wir diesen Kreis nun auch als Pinsel verwenden können, speichern wir ihn mit
Bearbeiten → Pinselvorgabe festlegen..
ab.

Und was nun? Fertig?
Ja, aber ich zeige euch noch, wie man diesen Pinsel nun anwendet.

Dafür brauchen wir ein Bild, auf dem wir unser Bokeh anwenden wollen.
Ich habe mir dafür ein nettes Katzenbild von Flickr gesucht, welches ich benutzen darf.

David Joyce

Wir öffnen nun also unser Bild in Photoshop, (ich habs noch gerade gerichtet ;) ) und legen wieder eine neue Ebene an. Außerdem wählen wir das Pinselwerkzeug und unseren neuen Bokehpinsel. Als Farbe wählen wie weiß.

Je nach Bildgröße verändern wir nun unsere Pinselgröße - bei mir passen 300px ziemlich gut. Die Deckkraft wird runtergesetzt und als nächstes klicken wir auf das Symbol rechts, um den Pinsel weiter anzupassen.

Hier öffnet sich ein Fenster und wir nehmen folgenden Einstellungen vor:

Als nächstes malen wir fröhlich auf unserem Bild rum! Ach halt nein, natürlich auf der neuen Ebene, die wir vorhin angelegt haben :)

Das ist schonmal nicht schlecht, aber es geht besser. Mit einem Doppelklick auf die Ebene kommen wir wieder zu deren Einstellungen:

Fertig! Dies ist unser Ergebnis:

Natürlich ist es keinesfalls ein natürlicher Effekt, ich persönlich bevorzuge auch eher "echte" Bokehkreise. Aber man kann schön damit rumspielen :)

Grüße,
Jenny

Schwebende Social-Media Buttons ♥♥♥♥

Hi zusammen :)

Ich habe jetzt schon mehrmals die Frage erhalten, wie ich denn die schwebenden Buttons auf meinem Blog gemacht habe.
Heute möchte ich euch das erklären :)

Man kann die fertigen Buttons runterladen oder selbstmachen, dafür habe ich die Schriftart JustVector runtergeladen und installiert. Hier eine Übersicht über alle Logos in dieser Schrift:

Fertige Buttons findet man überall im Web, hier ein netter Link:

60-social-media-icons-und-buttons

JustVector beinhaltet leider kein Symbol für 500px, aber da gibts auch Abhilfe: 500px - Icons for Social Media

Soweit so gut, als erstes erstelle ich die einzelnen Bilder in meinem Bildbearbeitungsprogramm in einer Größe von 40x40px. Natürlich ist es egal, welche Größe eure Buttons haben, aber ihr müsst die Größe wissen :)

Wer möchte, erstellt alle Buttons nochmal in einer anderen Farbe:

Die sind dazu da, dass sich die Farbe der Buttons verändert, wenn man mit der Maus darüber geht. Daraus resultiert aber auch mein langer komplizierter selbstgebastelter Code - Anfänger wollen sich also vielleicht erstmal an der einfachen, einfarbigen Variante probieren ;)

Zuerst müssen alle einzelnen Buttons irgendwo hochgeladen werden, damit wir sie verlinken können. Am besten erstellt man dort auch einen Account, damit man immer auf die Bilder zugreifen kann. Ich kenne da tinypic und photobucket, aber ihr kennt bestimmt noch mehr :)
Nachdem wir nun alle Bilder hochgeladen haben, erstellen wir ein neues Widget "Html/Java" und fangen an zu coden ;)

Variante I : einfarbige Buttons

Unser Code besteht aus 2 Teilen: Dem css / style - Abschnitt und dem html - Abschnitt. Komplett sieht der Code für 7 Buttons wie folgt aus:

<style>
#floatbubble {position:fixed; left: 10px; bottom: 30px; width:40px; z-index:999;}
#floatbubble a {display:block; width:40px; height:40px; background-position: center; background-repeat: no-repeat; white-space: nowrap;}

#facebook a:link {background-image:url(LINK ZUM BILD); }
#px a:link {background-image:url(LINK ZUM BILD); }
#flickr a:link {background-image:url(LINK ZUM BILD); }
#da a:link {background-image:url(LINK ZUM BILD); }
#vimeo a:link {background-image:url(LINK ZUM BILD); }
#formspring a:link {background-image:url(LINK ZUM BILD); }
#rss a:link {background-image:url(LINK ZUM BILD); }
</style>

<div id='floatbubble'>
<div id='facebook'><a href="LINK" target="_blank"></a></div>
<div id='px'><a href="LINK" target="_blank"></a></div>
<div id='flickr'><a href="LINK" target="_blank"></a></div>
<div id='da'><a href="LINK" target="_blank"></a></div>
<div id='vimeo'><a href="LINK" target="_blank"></a></div>
<div id='formspring'><a href="LINK" target="_blank"></a></div>
<div id='rss'><a href="LINK" target="_blank"></a></div>
</div>

Wer jetzt absolut keine Ahnung von html/css hat, wird kaum etwas verstehen. Ich kann leider auch nicht auf alles eingehen. In den oberen beiden Absätzen, die durch <style> und </style> abgesetzt werden, wird das Design des ganzen definiert.
#floatbubble ist der "Container", der die ganzen Buttons beinhaltet und ist an der linken Seite fixiert, mit einem Abstand von 10px nach links und 40px nach unten. Das könnt ihr natürlich nach Belieben ändern. width richtet sich nach der Breite eurer Buttons.
#floatbubble a beschreibt die Links, die im Container floatbubble sind. Hierbei muss die Breite und Höhe der Buttons angegeben werden, damit dieser Platz für sie "reserviert" wird.
An den Stellen LINK ZUM BILD müsst ihr nun die Links einsetzen, die ihr von eurem Bildhoster bekommt. Anstatt dem blauen LINK kommt hier euer "Ziel" hin, also z.B. eure Homepage, euer Flickr-Account, etc. pp :)
target="_blank" ist übrigens sehr praktisch: Somit werden die Links in einem neuen Tab geöffnet, und euer Blog bleibt immernoch zu sehen :)

Variante II : farbwechselnde Buttons

Soo, dann widmen wir uns nun dem etwas komplizierterem und mehr zusammengebasteltem Teil zu :)
Wir erweitern den Code um folgende Zeilen:

Innerhalb von <style> und </style>:

#facebook a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#px a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#flickr a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#da a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#vimeo a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#formspring a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#rss a:hover {background-image:url(LINK ZUM ANDEREN BILD); }

Anstatt von LINK ZUM ANDEREN BILD fügen wir hier nun eben die Bilderlinks mit den anderen Farben ein :)

Probiert man das ganze nun aus, kann es sein, dass es ziemlich lange dauert, bis das Hover-Bild erscheint und in der Zwischenzeit kein Button zu sehen ist. Das ist natürlich nicht toll, und hier kommt meine Bastellösung. Ganz am Ende fügen wir (nicht im style-Bereich) folgenden Abschnitt ein:

<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />

Auf diese Weise werden alle Bilder schonmal "vorgeladen", aber durch visibility:hidden komplett unsichtbar gehalten.

Dann wünsche ich euch mal viel Spaß beim nachbasteln :)

Grüße,
Jennifer

Mehrfach auf einem Bild sein (Gimp) ♥♥

Hallo ihr Lieben,

ich bin Luise von luiseliebt und die liebe Mira lässt mich einen kleinen Gastbeitrag zu dieser wunderschönen Seite beitragen, wofür ich ihr sehr danke :)
Mein Tutorial dreht sich darum, wie ihr euch mehrfach auf ein Bild zaubert. Und zwar für Gimp, denn viele haben ja kein Photoshop. Geht ganz einfach, und schaut ganz toll aus!

Schritt 1: Fotos machen
Ganz wichtig ist, dass ihr ein Stativ habt oder irgendeine feste andere Unterlage, durch die sich die Kamera nicht bewegt. Wenn die Kamera ein bisschen wackelt und ihr keine weiße Wand als Hintergrund habt ist es schwerer übereinander zu legen, geht aber auch. Zuerst stellt ihr euch also vor einen Hintergrund einmal links, einmal rechts und einmal in die Mitte, zum Beispiel. Ihr könnt aber auch andere Möglichkeiten ausprobieren, wenn ihr in einen Raum mit mehr Tiefe reinfotografiert, einmal ganz klein im Hintergrund einmal ganz groß in der Nähe der Kamera etc. Ihr müsst nur aufpassen, dass ihr euch so stellt, dass "ihr euch auf dem fertigen Bild nicht berührt" (ich weiß gerade nicht, wie ich es besser beschreiben soll ;D).

Schritt 2: Bearbeitung
Wenn ihr die Fotos gemacht habt, gehts ans Bearbeiten und Übereinander legen.
Ihr klickt auf Datei > Öffnen, und öffnet euer erstes Foto. Dann klickt ihr auf Datei > als Ebene öffnen und öffnet euer zweites Foto. In dem Ebenenkasten habt ihr eure beiden Ebenen mit den zwei Bildern untereinander. (Falls der Ebenenkasten nicht von Anfang an da ist: Fenster > Kürzlich geschlossene Docks > Ebene...)

Jetzt klickt ihr auf Ebene > Maske > Ebenenmaske hinzufügen.

In dem erscheinenden Kästchen klickt ihr auf die erste Option: Weiß (volle Deckkraft). Jetzt schnappt ihr euch den Pinsel links im Werkzeugkasten. Weiter unten könnt ihr noch die Pinseldicke auswählen. Nun malt ihr ganz wild in dem Bereich herum, wo sich die andere Person, die im Bild darunter liegt, befindet. Wichtig ist nur, dass ihr nicht über die Person malt, die schon da ist.

Wenn die zweite Person vollständig da ist, klickt ihr noch auf Ebene > Nach unten vereinen, dann verschmelzen die beiden Ebenen zu einer. Abspeichern und fertig, oder weitermachen und ein weiteres Foto als Ebene hinzufügen. Tada!
Das passiert übrigens, wenn man das ganze falsch macht: Dann hat man ein Mauerkleid!

Meine Freundinnen habe ich auch dazu verdonnert, mir für diese Idee nützlich zu sein und im Garten rumzuspringen:

Also, ladet euch Gimp runter, bringt das Stativ in Position, und probiert es aus :-)

Liebe Grüße,
Luise

Datum unter Posttitel ♥♥♥

Hallöchen!
Oft gewünscht, nun ist es hier: Ein Tutorial, wie man das Datum unter den Posttitel packt.

Schauen wir uns einfach mal den html-Code an, vorher klicken wir aber auf Widget-Vorlagen komplett anzeigen.
Öffnet nun gleichzeitig den Editor, den werden wir gleich brauchen.

Kleiner Tipp: Ich nutze sehr gerne Notepad++ für solche Sachen. Man kann mehrere Dateien gleichzeitig offen haben und mit der Auswahl der Programmiersprache markiert das Programm die Codes bunt und erkennt teilweise, was zusammengehört. Und es hat eine Suchfunktion ;)

Wichtig ist - wie immer eigentlich - dass man sehr sauber arbeitet. Jede Zeile und jedes Zeichen haben eine Bedeutung und sind wichtig, damit alles funktioniert.

Wir suchen nun im Code nach dem folgenden Absatz:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Es könnte auch so aussehen, je nach Design:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

Ihr werdet noch andere, ähnliche Zeilen finden, doch nur diese hier sind die richtigen.
Kopiert nun diese Zeilen und fügt sie im Editor ein. Aus dem html-code könnt ihr sie nun löschen :)

Als nächstes suchen wir den Abschnitt, wo unser Datum hin soll.

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Direkt nach diesem Abschnitt fügen wir unsere kopierten Zeilen von vorhin ein.

Das wars auch eigentlich schon :)

Passen jetzt die Abstände nicht mehr?
Zu groß? Zu klein?
Dann schaut nochmal weiter oben, bei .date-header { ... } und h3.post-title { ... }. Um hier die Abstände zu ändern, müssen margin-top vom Datum und/oder margin-bottom vom Titel geändert werden. Dafür gibt es aber (erstmal) keine Schritt-für-Schritt-Erklärung, vielleicht ein andermal :)

Grüße,
eure Jenny