Fotos mit Rahmen und Schlagschatten versehen und automatisieren

Flex · 12.07.2009

Schaut mal diese Seite an und dort die kleinen Bilder: http://www.physio-two.de/praxis-papiermuehlenweg.html

Wie kann ich auch so einen dünnen Rahmen um ein Foto zeichnen, ohne das der Bildinhalt dabei verändert wird (also die Größe) und dann dem ganzen noch so einen Schlagschatten geben?

Geht das irgendwie in Photoshop, wo ich das dann auch gleich automatisieren kann um auf mehrere Fotos, verschiedener Größen anzuwenden?

Oder gibts hier vielleicht auch irgend welche Programme, die das selbständig erledigen?

TrµMAn · 12.07.2009

also ich glaube allein wegen der möglichkeit der Stapelverarbeitung ist Irfanview wohl eine möglichkeit

Wenn du das ganze für eine Website machen möchtest, kannst du das glaube ich auch über verschiedene Ramen machen in den 3 Ebenen Padding, Border und Margin lösen

amihandot · 12.07.2009

In Photoshop würde ich einfach die Bühne um einige Pixel vergrößern, den Inhalt der Ebene (also das Foto) als Auswahl laden und über Berabeiten --> Kontur füllen den gelben Rand hinzufügen.
Zum Schluss noch über den Ebeneneffekt "Schlagschatten" diesen in die gewünschte Richtung einfügen

Da ich mich aber noch nie mit der Automatisierung in PS auseinandergesetzt habe, kann ich dir bei diesem Punkt nicht helfen...

Grüße
ami

fellon · 12.07.2009

Du gehst auf Aktion drückst dann den Aufnehmen Knopf und machst dann, was du machen willst. amihandot hat recht, dass das alles über die Ebenstile geht mit Kontur füllen und Schlagschatten eben.
Wenn du fertig bist, einfach Aufnahme stoppen und deine Aktion ist fertig.

Dannach einfach die Bilder öffnen und die Aktion drüberlaufen lassen.

Aber sei gewarnt, die Aktionaufnahme erkennt es nicht, wenn man was rückgängig macht. Nicht, dass du dann verzeifelst und nicht weist, was los ist.

Noch mehr Automatik würde gegen aber dazu bräuchte man JavaScript. Wie das funktioniert weis ich nicht, aber die Fachliteratur liegt hier rum.

Flex · 12.07.2009

@Tryman

Ja, das ganze sollen dann mal Fotos für eine Webseite werden. Phu, aber ich hab mich da auch schon mal rumgespielt, das aber nicht hinbekommen. Wie würde denn so ein CSS dann für so ein Bild aussehen? Haste da mal was für mich?

@amihandot

So in der Art hatte ich das schon versucht. Mit Bühne meiste sicherlich die Arbeitsfläche - oder?
Der Rahmen ist nicht so das Problem, aber der Schlagschatten, da dieser ja vom Rahmen aus geht. Der Rahmen aber über dem Bild liegt und somit der Schlagschatten auch dann links und oben im Bild zu sehen ist und nicht nur wie gewünscht rechts und unten.

@fellon

Ok, wenn ich dann mal ein richtiges Ergebnis habe, dann kann ich es also auf deine Weise automatisieren - prima, das werde ich dann versuchen, jetzt muss ich das nur noch hinbekommen.

Vielleicht kann mir ein Photoshopler mal eine Step-by-Step Anleitung hier kurz reinstellen...

fellon · 12.07.2009

Mit Bühne ist Arbeitsfläche gemeint.

Also du hast dein Bild, dann klickst du auf Ebenestile und wählst deinen Rahmen aus. Einsetllungen je nach Belieben vornehmen.
Jetzt gehst du auf Schlagschatten und siehst deine Einstellungen.
Rechts unter Abbrechen und OK hast du ein kleines Vorschaubildchen mit einem grauen Viereck, dass dir zeigt, wie der Effekt angewendet wird. Wenn du den Schatten also rechts unten haben willst, dann nimmst du einen Winkel um die 50°. Rest änderst du wie du es brauchst mit Abstand.
Wenn du den Schatten nicht sehen solltest, dann nur, weil der Schatten nicht mehr auf die Arbeitsfläche passt. Also dann wie schon amihandot geraten hat, die Arbeitfläche vergrößern. (Alt + Strg + C)

Das einzige was du noch ändern könntest ist die Füllmethode von Muliplizieren auf Normal zu setzten und die Deckkraft auf 100%.
Aber guck erst mal, ob das so hinhaut.

Wenn noch Fragen offen sind, nur her damit.

TrµMAn · 12.07.2009

Flex schrieb:
@Tryman

Ja, das ganze sollen dann mal Fotos für eine Webseite werden. Phu, aber ich hab mich da auch schon mal rumgespielt, das aber nicht hinbekommen. Wie würde denn so ein CSS dann für so ein Bild aussehen? Haste da mal was für mich?

wenn ich daran denke gucke ich mir das morgen nochmal an, dürfte jedenfalls nicht allzuschwer sein!

Flex · 13.07.2009

@fellon

Also ich habe ein Bild, dann muss ich ja erst mal eine neue Ebene erstellen für den Rahmen. Dann in der neuen Ebene wähle ich Auswahl>alles markieren. Nun ist das ganze Bild markiert. Dann gehe ich auf Bearbeiten>Kontur füllen und bekomme dann einen Rahmen. Nun habe ich den Rahmen. Wenn ich jetzt auf Ebenenstile gehe und Schlagschatten anklicke (145° dann ist er rechts und unten), dann erscheint der Schlagschatten aber auch im Bild (nämlich oben und links) und nicht nur rechts und unten. Wobei ich ja dann eh die Arbeitsfläche vergrößern müsste damit ich den Schlagschatten unten und rechts sehe, weil das ja außerhalb des ursprünglichen Bildes liegt. Also irgendwas mach ich da noch falsch

@TryMAn

Ja, das wäre super!!

TrµMAn · 13.07.2009

ok ich habe hier mal eine Lösung, die das Problem angeht, indem man einfach viele Div-elemente um das Image legt und diese mit einem bestimmten Hintergrund (grauabstufungen) verseht (oder wie das in der form heißt)

das wäre dann ein beispiel für die CSS-Datei(schatten.css):

Code:

DIV.shadow, DIV.shadow2, DIV.shadow3, DIV.shadow4, DIV.shadow5 {
   padding: 1px;
   border-radius: 10px;
   -moz-border-radius: 10px;
   }
DIV.shadow {
   background-color: #8e8e8e;
   border: 1px solid #959595;
   margin: 0px;
   }
DIV.shadow2 {
   background-color: #aaa;
   border: 1px solid #bebebe;
   margin: 0;
   }
DIV.shadow3 {
   background-color: #d1d1d1;
   border: 1px solid #e1e1e1;
   margin: 0;
   }
DIV.shadow4 {
   background-color: #ededed;
   border: 1px solid #f6f6f6;
   margin: 0;
   }
DIV.shadow5 {
   float: left;
   background-color: #fcfcfc;
   border: 1px solid #fff;
   margin: 0.7em 1em;
   }

DIV.shadow IMG {
   [B][I][U]border: 2px solid orange;[/U][/I][/B]
   margin: 0;
   display:block;
   position: relative;
   top: -3px;
   left: -3px;
   }

das was ich hervorgehoben habe, ist für den Ramen den du um das Bild legen möchtest! Bei der Farbe kannst du natürlich auch Hexadezimal angeben mit einer Raute (#) davor.

in der HTML Date steht dann einfach an der Stelle des Bildes:

Code:

<div class="shadow5">
<div class="shadow4">
<div class="shadow3">
<div class="shadow2">
<div class="shadow1">
<div class="shadow">
	<img src="1.jpg" />
</div></div></div></div></div></div>

und im <head>-tag noch

Code:

<link rel=stylesheet type="text/css" href="[B][COLOR="Cyan"]schatten.css[/COLOR][/B]">

amihandot · 13.07.2009

Stimmt, meinte mit "Bühne" natürlich "Arbeitsfläche". Hatte das mit Flash verwechselt...

Hier nochmal eine ausführliche Anleitung:

1. Arbeitsfläche zu allen Seiten um ein paar Pixel vergrößern (in diesem Fall 10 Pixel)

2. Die Bild-Ebene makieren und unten über "Ebenenstil hinzufügen --> Kontur" einen Rahmen erstellen

3. Nun über "Ebenenstil hinzufügen --> Schlagschatten" einen Schlagschatten mit den gewünschten Einstellungen erstellen.

4. Wenn man das Bild nun auf einen weißen Hintergrund setzt, sieht es aus, wie es gewünscht war

Das dürfte nun verständlich sein...

Grüße
ami

Flex · 13.07.2009

@TryMAn

Phu, das probier ich mal, danke dir soweit!

Für ein Bild geht das ja vielleicht noch, aber wenn ich mehrere Bilder (Galerie) in einem Tabellenlayout habe, das wird dann schon umfangreicher denke ich...
ich versuchs mal...

Flex · 13.07.2009

@amihandot

Achso meintest du das... ja, da hatten wir vom Ergebnis bisschen unterschiedliche Vorstellungen. Ich wollte immer das Ergebnis so haben, das der weiße Rand links und oben nicht mehr da ist, sozusagen das der Rahmen des Bildes links und oben bündig mit dem eigentlichen Bild ist. Weiste was ich meine...

Wenn du dir mal ein Bild von der Homepage im ersten Posting abspeicherst und ansiehst, dann weißte wie ich es mein...

Aber das von dir wäre ne Alternative...

TrµMAn · 13.07.2009

Flex schrieb:
@TryMAn

Phu, das probier ich mal, danke dir soweit!

Für ein Bild geht das ja vielleicht noch, aber wenn ich mehrere Bilder (Galerie) in einem Tabellenlayout habe, das wird dann schon umfangreicher denke ich...
ich versuchs mal...

nein, das ist ja das schöne an CSS

ich kann dir den Code so umschreiben das du bei jedem bild das einen schatten bekommen soll in den Tag nur noch 'class="schatten"' einfügen musst ... das ist einmal eine CSS datei und dann beim einbinden der Bilder einfach nur das bisschen text mehr schreiben ... wenn du allerdings alle bilder so anzeigen lassen willst, kann man sich auch das sparen

Flex · 13.07.2009

@TryMAn

ich habs mal getestet, allerdings habe ich dann links und oben auch einen Schlagschatten....

Flex · 13.07.2009

Ah, also guck mal, das hier ist meine Tabelle, da kommen alle Bilder rein (im Moment sind nur drei drinn).

HTML:

<div id="galeriegesamt">
    <table width="100%" border="0" cellspacing="0">
     <tr>
      <td><img src="images/thumbnails/fleximage.jpg" width="237" height="152" /></td>
      <td><img src="images/thumbnails/B20-2007-3.jpg" width="237" height="158" class="td_galerie_abstand_linksrechts" /></td>
      <td><img src="images/thumbnails/DSC_0064.jpg" width="237" height="157" /></td>
     </tr>
     <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
     </tr>
     <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
     </tr>
    </table>
   </div>

Habe alles in den div galeriegesamt gelegt. Jedes Bild darin sollte so einen Rahmen bekommen und einen leichten Schlagschatten. Der Schatten in deinem CSS ist bisschen stark, das müsste ich dann wahrscheinlich ein oder zwei shadow-divs rausnehmen oder?

Und geht das, das links und oben kein Schlagschatten zu sehen ist?

TrµMAn · 13.07.2009

Flex schrieb:
Und geht das, das links und oben kein Schlagschatten zu sehen ist?

mit welchem Browser?

entschuldigung ... hatte nen flaschen code in der Zwischenablage!!

Code:

DIV.shadow, DIV.shadow2, DIV.shadow3, DIV.shadow4, DIV.shadow5 {
   padding: 1px;
   border-radius: 10px;
   -moz-border-radius: 10px;
   boarder: 0px;
   }
DIV.shadow {
   background-color: #8e8e8e;
   border-right: 1px solid #959595;
   border-bottom: 1px solid #959595;
   margin: 0px;
   }
DIV.shadow2 {
   background-color: #aaa;
   border-right: 1px solid #bebebe;
   border-right: 1px solid #bebebe;
   margin: 0;
   }
DIV.shadow3 {
   background-color: #d1d1d1;
   border-right: 1px solid #e1e1e1;
   border-bottom: 1px solid #e1e1e1;
   margin: 0;
   }
DIV.shadow4 {
   background-color: #ededed;
   border-right: 1px solid #f6f6f6;
   border-bottom: 1px solid #f6f6f6;
   margin: 0;
   }
DIV.shadow5 {
   float: left;
   background-color: #fcfcfc;
   border-right: 1px solid #fff;
   border-bottom: 1px solid #fff;
   margin: 0.7em 1em;
   }

DIV.shadow IMG {
   border: 2px solid orange;
   margin: 0;
   display:block;
   position: relative;
   top: -3px;
   left: -3px;
   }

morgen schreib ich dir das dann um, dass du wirklich nur noch ein class-attribut zu den bildern hinzufügen musst

und wenn du weniger schatten willst, nimmst du einfach ein-zwei shadow-divs (möglichst die in der mitte also 2 und 4) raus

Flex · 13.07.2009

Vielen Dank schon mal TryMAn, das mit dem class-Attribut wäre natürlich super.
Ich teste den neuen Code mal von dir morgen früh.

Echt super, das du dich da so gut auskennst.

TrµMAn · 14.07.2009

Flex schrieb:
Echt super, das du dich da so gut auskennst.

tu ich nicht, ich habe mich im letzten Praktikum mit nichts anderem beschäftigt. Aber auch nur 1 1/2 Wochen lang ... Hab mich auch jetzt ganz schön Verschätzt.

Ich dachte mit den Pseudoklassen ::before und ::after könnte man soetwas machen, das geht aber leider doch nicht. Aber ist es denn wirklich so schlimm 4 Tags einzufügen?

HTML:

<div class="shadow5">
	<div class="shadow3">
	<div class="shadow2">
	<div class="shadow">
		<img src="http://.." />
	</div>
	</div>
	</div>
</div>

kannst du dir ja so kopieren und jedesmal wenn du das brauchst einfügen ^^

Flex · 14.07.2009

Ok, nein, so schlimm ist das natürlich nicht, nur Dreamweaver stellt diese Div's so komisch verzerrt da, also nicht in Bildergröße, erst der Browser machts dann wieder richtig. Ich probiers jetzt nochmal mit dem neuen Code von dir.

TrµMAn · 14.07.2009

wie sieht es denn damit aus: Möchtest du auf dieser Seite in deiner Tabelle nur bilder haben? dann könnte das doch klappen, sieht sicher nur komisch aus, wenn du eine Zelle ohne Inhalt hast ...

Fotos mit Rahmen und Schlagschatten versehen und automatisieren

Flex

TrµMAn

amihandot

fellon

Flex

fellon

TrµMAn

Flex

TrµMAn

amihandot

Flex

Flex

TrµMAn

Flex

Flex

TrµMAn

Flex

TrµMAn

Flex

TrµMAn

Fotos mit Rahmen und Schlagschatten versehen und automatisieren

ANGEBOTE & SPONSOREN

Neueste Beiträge

Statistik des Forums