Text vor Bildern hervorheben

Ich versuche, meinen Text vor meinem Bild hervorzuheben. Ich habe sooo viele Websites gesehen, die das gut machen: zB http://brewsters.ca/

Bin ich aber eindeutig nicht: http://immehabayas.com/

Ich wollte wissen, was genau sie mit den Bildern machen, damit der Text so gut heraussticht (auch ohne einen dieser Container mit Opazität).

HINWEIS: Ich suche nicht nach: "Warum verwenden Sie nicht einen schwarzen Behälter mit Deckkraft.

DANKE SCHÖN!

Sie wissen, dass Ihr Muster ein abgeschwächtes, getöntes Foto verwendet, um es abzudunkeln, oder?
Sie müssen entweder die zugrunde liegenden Bilder abdunkeln, dem Text Striche oder Schatten hinzufügen oder eine dickere Schriftart verwenden – oder eine Kombination aus all dem.

Antworten (3)

Die Website, die Sie als Beispiel gezeigt haben, verwendet eine sehr dicke/fette und große Schrift. Sie haben auch den Hintergrund so modifiziert, dass er monoton ist und eine "flache" Farbe hat, um mehr Kontrast zu erzeugen. Sie schienen einige Zonen unscharf gemacht zu haben, damit sich die Details der Hintergrundbilder nicht mit dem Text vermischen.

Es ist jedoch möglich, dass Sie dies nicht mit den Bildern auf Ihrer immehabayas.com-Website tun können, insbesondere wenn es sich um eine responsive Website handelt. Im Gegensatz zu Ihrer Website spielt es keine Rolle, ob Details aus dem Brewster-Hintergrund verloren gehen, um den Kontrast von Hintergrund + Text zu erhöhen. Vielleicht möchten Sie jedoch die Details auf Ihren Bildern zeigen. Ein sehr großer und weicher Schlagschatten kann einen ähnlichen Effekt erzeugen, und Sie können dies in CSS tun, anstatt jedes Slider-Bild separat anzupassen.

Ihre Website verwendet eine kleine und schmalere Schriftart und verwendet das Originalbild. Ihr Text ist weiß und das Hintergrundbild hat manchmal viel Weiß. Deshalb können Sie nicht die gleiche Wirkung auf Ihren Text erzielen.

Vielleicht könnte eine Idee sein, hinter Ihrem Text eine sehr subtile Unschärfe hinzuzufügen und eine andere Schriftart auszuwählen, die etwas mehr Wirkung hat. Sie können diesen Text auch mit einem subtilen schwarzen Schatten umgeben.

Einige Beispiele dafür, was getan werden kann:

Diese Beispiele verwenden OpenSans extra fett.

ORIGINALBILD:

Originalbild beschäftigter Hintergrund

SCHWARZER TROPFSCHATTEN + GRÖßERE SCHRIFT

Wie man einen Text auf einer Website mit Schlagschatten klar aussehen lässt

SCHWARZER DROP SHADOW + NOCH GRÖSSERE SCHRIFT

So verwenden Sie Schriftgröße und Schlagschatten, um die Sichtbarkeit von Text zu verbessern

HINTERGRUNDTRANSPARENZ + GRÖßERE SCHRIFT

So verwenden Sie die Transparenz von Hintergrundfeldern, um weißen Text auf einem Bild besser sichtbar zu machen

HINTERGRUND FARBIGE BEIGE UNSCHÄRFE + GRÖßERER SCHRIFTART

So ändern Sie die Hintergrundfarbe und die subtile Unschärfe auf dem Textbanner der Website

HINTERGRUND FARBIGE BLAUE UNSCHÄRFE + GRÖßERER SCHRIFTART

Ändern Sie die Hintergrundfarbe von Text auf einem Bild, um Slider-Bild und Text besser sichtbar zu machen, wenn Sie Bilder verwenden


Hier ist eine weitere Möglichkeit , Ihren Text stärker hervorzuheben, wenn er vor einem geschäftigen Hintergrund verwendet wird.

Die Brewsters-Website hat ihre Fotos mit einer Art Sepia-Ton abgedunkelt. Sie verwenden auch eine viel schwerere Schriftart.

Ihre hingegen verwendet im Vergleich dazu eine ziemlich helle Schrift und sehr helle Fotos. Besonders um die äußeren Bereiche deiner Fotos herum, wo der meiste Text ist, wird es heller, das musst du abdunkeln.

Schauen Sie sich einfach an, wo Sie Text platzieren - es ist der weißeste Teil des Fotos:

Geben Sie hier die Bildbeschreibung ein

Nachbelichten, Kurven, Ebenen, Helligkeit/Kontrast, Airbrush – es gibt viele, viele Möglichkeiten, dies zu beheben. Spielen Sie mit ihnen herum und finden Sie einen Stil, der zu Ihnen passt, während Sie einige der hellen Bereiche loswerden.

Die Website, auf die Sie verwiesen haben, verwendet eine fette Slab-Schriftart. Diese fallen immer gut auf und sehen farblich toll aus.

Lato ist jedoch eine viel dünnere Schriftart, und ich würde auf Ihrer Website nicht mit Farben herumspielen, um den Kontrast zu erhöhen. Wenn Sie möchten, dass die Schriftart hervorsticht, erhöhen Sie die Schriftstärke ein wenig. Da Sie ein Webdesigner sind, sind Sie vermutlich auch mit der CSS3-Textschatteneigenschaft vertraut? Sie können Textschatten wie in diesem Beispiel verwenden , um Ihren Text besser hervorzuheben, ohne die Schriftart oder Schriftstärke zu ändern. Hier sind einige weitere großartige Ideen, die dieselbe Methode verwenden, aber einen anderen Stil erreichen.