Wie zerlege ich einen PSD-Hintergrund in kachelbare geschichtete Elemente?

Ich möchte einen skalierbaren Webeffekt mit mehreren Auflösungen ähnlich wie iBooks erstellen und habe damit begonnen, auf diesem Tutorial aufzubauen .

Das Problem ist das Hintergrundbild:Hintergrundbild

Wie Sie sehen können, hat es zwei Masken, die ihm diesen besonderen Effekt verleihen:

Masken und Schicht

Ich möchte einen Hintergrund erstellen, der für jede Auflösung geeignet ist. Dazu benötige ich eine kachelbare Version des Bildhintergrunds und ein durchscheinendes PNG-Maskenbild, das ich über diesem kachelbaren Bild skalieren kann, um einen ähnlichen Effekt zu erzielen.

Ich habe keine Ahnung, wie ich die Maskenebenen oben in ein einfaches Raster umwandeln soll, das ich als eigenständige PNG-Datei speichern kann. Ich habe versucht, das Aussehen mit einem durchscheinenden radialen Farbverlauf zu replizieren, bin aber nirgendwo hingekommen.

Ohne die Maske sieht das Bild so aus, was weniger überzeugend ist:

Geben Sie hier die Bildbeschreibung ein

Alle Tipps, wie man eine Textur einfach kachelbar macht, werden ebenfalls geschätzt, aber ich kann das wahrscheinlich selbst schaffen. Danke.

Es hängt ein wenig davon ab, wie Sie sich das alles vorstellen, aber ich würde im Grunde diese aktuelle Holztextur duplizieren ( Duplizieren, damit Sie die neutrale Textur dahinter sehen können. ) ein Loch in die Mitte streichen, ähnlich wie in Ihren Masken dort und vielleicht die Sättigung etwas erhöhen, die Farbe rötlicher und dunkler machen.
Übrigens. Ich könnte mich irren, aber fragt der Titel der Frage nicht, wie man diese Holzstruktur kachelt, aber in der eigentlichen Frage fragen Sie, wie man diese Vignetten in durchsichtiges PNG umwandelt?
Danke. Ich gehe davon aus (und ich kann mich hier irren), dass ich ein PNG-Maskenbild erhalten kann, das nur den Effekt (ein transparentes Bild) enthält, den ich einfach über das letzte Bild in meiner Frage legen kann, um das erste Bild in meinem zu erstellen Frage. Das kann gut funktionieren, weil ich dann das Hintergrundbild kacheln und das Maskenbild skalieren kann. Wenn ich ein Loch in der Mitte eines Bildes habe, sehen Sie eine Naht, die nicht passen würde.
Ja. Die Kachelung und die Schichtung sind in meinen Augen ein und dasselbe, ich kann das Bild nicht so kacheln, wie es ist, und wenn ich es so skaliere, wie es ist, wird es sichtbare Verzerrungen geben. Wenn ich es jedoch in zwei Ebenen aufteilen kann, kann ich den Hintergrund kacheln und die Überlagerungsebene skalieren, was einen großartigen Effekt für alle Auflösungen erzeugt.
Hier ist ein kurzes Beispiel dafür, wovon ich spreche ... jsfiddle.net/lollero/fztsV ( Durch Klicken auf den Container werden die Abmessungen animiert. ) Was ich getan habe, war, ein beschissenes Muster aus der Textur zu machen und dann einen Bereich zuzuschneiden, um ihn als zu verwenden die Vignette und tat dann, wie ich vorher vorgeschlagen hatte. Das einzige Problem mit dem, was ich vorschlage, ist ein mögliches Verwischen der Textur im Vignettenbild, wenn die Abmessungen zu hoch werden, aber es sollte immer noch funktionieren.
Eigentlich weiß ich nicht, was ich gedacht habe. Was Sie eigentlich tun sollten, ist, diese Ebenenmasken zu entfernen (damit Sie rundum eine dunklere Farbe haben) und dann alle Ebenen zusammenzuführen und einfach ein Loch in die Mitte zu streichen (oder möglicherweise eine der Ebenenmasken zu verwenden, die Sie bereits haben gemacht, um dieses Loch zu machen. ) Speichern Sie das als PNG und Sie sind fertig.
Ein Bild mit einem Loch in der Mitte kann nicht gekachelt werden ... Ich brauche das HELLERE Bild zum Kacheln (was einfach sein sollte) und ich brauche eine Überlagerung über der Kachel, die ich skalieren kann. Wenn das Overlay zu viel Deckkraft enthält, wird die Skalierung in die Kachelung der Bilder einbrechen.
Und in meinem Beispiel, was ist falsch/anders als das, was Sie wollen/brauchen?
Das Bild, das ich habe, wäre heller, nicht dunkler. Die Masken, die ich habe, sind MASK-Objekte, die ich nicht in eine tatsächliche Ebene konvertieren kann. Wenn ich sie glätte, verschmelzen sie mit dem Bild und erzeugen ein undurchsichtiges Bild. Wenn ich ein Loch in das Bild mache (um die heller gefärbte Mitte zu zeigen), entsteht eine Naht zwischen dem Bild innerhalb des Lochs und dem Bild darüber.
Sie müssen ein dunkleres Bild erstellen, um diese Vignette zu erstellen. Diese Kurvenanpassungsebenen, die Sie haben, klicken Sie einfach mit der Umschalttaste auf diese Ebenenmasken oder löschen Sie die Ebenenmasken und wählen Sie dann alle Ebenen aus (zumindest die, die ich in Ihrem Beispielbild sehe) und führen Sie diese Ebenen zusammen (Strg + E). wodurch Sie eine dunklere Version dieser Holzstruktur erhalten. Gibt es also etwas, das Sie anders machen müssen als in meinem Beispiel jsfiddle? ... und ich habe keine Ahnung, von welcher Naht Sie sprechen ... Ich meine ... dunkle Teile sehen dunkler aus als die hellen Teile, aber das ist es, was Sie hier erreichen wollen, richtig?
Du vergisst das TILLING! Wenn ich zwei davon nebeneinander lege, sehen sie nicht wie ein einziges großes Brett aus, sondern wie zwei Bretter mit zwei Flecken ... Ich möchte EIN Brett, sodass der Hintergrund gekachelt ist, aber der Vordergrund den Hintergrund färbt. Die Naht erscheint, wenn ich zwei Ebenen übereinander habe, die einige der gleichen Pixel replizieren. Versuchen Sie dies nicht mit einem Bild, sondern mit zwei (eins neben dem anderen) und Sie werden sehen, was ich meine.
Stimmt also noch einmal etwas mit meinem Beispiel jsfiddle nicht? Hier ist nochmal der Link jsfiddle.net/lollero/fztsV
Es sieht nicht ganz wie das Bild oben aus und wenn es dunkler wäre, würden Sie sehen, dass die vertikalen Linien des umgebenden Bildes mit dem Loch abrupt beginnen und dann abrupt enden, wenn Sie auf das im Hintergrund gekachelte Bild treffen. Danke für die Bemühung. Bitte senden Sie dies als Antwort, wenn ich nicht die gewünschte Antwort bekomme, werde ich dies akzeptieren. Sorry, wenn ich etwas vage war.

Antworten (1)

Ich fühle mich nicht sehr motiviert zu antworten, da es scheint, als hätten Sie meinen Vorschlag nicht einmal ausprobiert und Sie sagten, dass meine Idee nicht funktioniert, weil dies und das mir einfach so vorkam, als hätten Sie meine Nachrichten nicht richtig gelesen . (Könnte sein, dass ich mich in dem, was ich gesagt habe, nicht sehr klar ausgedrückt habe, aber trotzdem.)

Mein Beispiel sah nicht ganz so aus wie Ihr Bild, denn ich mache Ihre „Arbeit“ nicht für Sie, ich schlage Ihnen nur eine Methode vor, wie Sie dies tun können.

Grundgedanke ist folgendes:

  1. Erstellen Sie eine Kachelstruktur.
  2. Erstellen Sie eine nicht gekachelte Textur, die auf der vorherigen basiert, damit sie so konsistent wie möglich ist, und machen Sie sie dunkler. (Die Größe dieses sollte ungefähr der normalen Größe entsprechen, die die Schachtel haben würde.)
  3. Machen Sie ein Loch in der Mitte der nicht gefliesten Textur.

Wenn Sie sich große Sorgen darüber machen, dass die Textur eine Art Naht aufweist, können Sie versuchen, die Deckkraft sehr niedrig zu ändern und dann das nicht gekachelte Bild noch dunkler zu machen.

http://jsfiddle.net/lollero/fztsV/1/

http://jsfiddle.net/lollero/fztsV/1/show/

Durch Klicken auf das Bild wird angezeigt, wie ein nicht gekacheltes Bild aussieht, wenn es größer als die Originalgröße des Bildes ist.

Wenn Sie zulassen müssen, dass die Größe ziemlich groß wird, wird das nicht gekachelte Bild verschwommen, aber Sie können dies möglicherweise vermeiden, indem Sie das nicht gekachelte Bild etwas größer als die normale Größe machen. (aber dann wieder, leichte Unschärfe an den Rändern ist nicht so schlimm..)

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

Beachten Sie, dass es auch eine Möglichkeit gibt, dies so zu machen, dass die Vignettenkanten nicht entsprechend dem Container skaliert werden, aber das ist noch mehr mit der Codierung verbunden, also werde ich nicht darauf eingehen.

Wie zerlege ich einen PSD-Hintergrund in kachelbare geschichtete Elemente?
AntwortenHierDatenschutz-Bestimmungen1y, 0v