Wie erhalte ich bogenförmige Schlagschatten mit Center-Glow-Effekt in Photoshop?

Ich habe gerade auf plugins.joshlobe.com gestöbert , und was mir aufgefallen ist, war die interessante Verwendung von Schlagschatten. Ich spreche von dem Schlagschatten im verlinkten Bild mit einer Art Schein in der Mitte.

Geben Sie hier die Bildbeschreibung ein

Kann mir jemand sagen, wie ich den Effekt erzielen kann? Handelt es sich um einen reinen Bildeffekt oder kann er mit einer Kombination aus CSS und einem Bild erzeugt werden? Alle Tutorials, in denen ich lernen kann, diese Art von Effekt zu erzielen, würden ebenfalls helfen.

Deine Hilfe ist wilkommen.

dk.

Antworten (2)

Die Schatten auf seinen Boxen scheinen eine Kombination aus Bildern und CSS zu sein. Der relevante Code aus seiner CSS-Datei lautet:

.comment, .trackback, .pingback { position:relative;margin-bottom: 30px;padding:15px;border:4px solid #eee;background: #f8f8f8;
    border-color: #ddd #ddd #ccc;
    border-radius: 3px;-border-radius: 3px;-webkit-border-radius: 3px; -moz-border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    -box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;
 }

.comment:after, .trackback:after, .pingback:after { 
  bottom: -35px;
    content: url("../images/shadow-after.png") !important;
    position: absolute;
    right: 0;
    z-index: 1;
}   
.comment:before, .trackback:before, .pingback:before { 
  bottom: -35px;
    content: url("../images/shadow-before.png") !important;
    position: absolute;
    left: 0;
    z-index: 1;
}

Der Effekt „Zentrales Leuchten“ ist eigentlich der Abstand zwischen den linken und rechten („vorher“ und „nachher“) Schatten-PNGs. Soweit ich weiß, gibt es keine Möglichkeit, ungleichmäßige Schatten in reinem CSS anzuwenden.

Ich kann Ihnen mit dem CSS nicht helfen, aber für die Bilder selbst würde ich empfehlen, ein Set wie dieses zu verwenden:

https://creativemarket.com/Rhett/18-Shadows-for-images-and-sliders

oder dieses:

http://www.pixeden.com/psd-web-elements/web-slider-psd-shadows-pack

Das erste Paket kostet nur 4 US-Dollar, und ich benutze sie die ganze Zeit. Es ist viel einfacher, als zu versuchen, sie in Photoshop von Grund auf neu zu erstellen. Die URL sagt 18 Schatten, aber Sie erhalten tatsächlich 26.

Das zweite Paket enthält nur 15 Schatten, und sie scheinen nicht so vielseitig zu sein wie die Schatten im ersten Paket, aber sie sind kostenlos.

Wie erhalte ich bogenförmige Schlagschatten mit Center-Glow-Effekt in Photoshop?
AntwortenHierDatenschutz-Bestimmungen1y, 0v