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!
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.
Diese Beispiele verwenden OpenSans extra fett.
ORIGINALBILD:
SCHWARZER TROPFSCHATTEN + GRÖßERE SCHRIFT
SCHWARZER DROP SHADOW + NOCH GRÖSSERE SCHRIFT
HINTERGRUNDTRANSPARENZ + GRÖßERE SCHRIFT
HINTERGRUND FARBIGE BEIGE UNSCHÄRFE + GRÖßERER SCHRIFTART
HINTERGRUND FARBIGE BLAUE UNSCHÄRFE + GRÖßERER SCHRIFTART
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:
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.
Scott
Hanna