Bildunterteilung...

[julietta]

also ,ich bin neu hier und sehr untechnisch, aber ich versuch mal mein problem zu erläutern ,dass mich wahnsinnig macht:ich habe ein bild, jpg, das ist meine introseite; damit man auf die startseite kommt, wollte ich ein teil des bildes (einen kopf) sozusagen erleuchten-so mit einem rolloverimage....das geht aber imm er nur mit dem ganzen bild, ich will aber nur den KOPF (man soll auf ihn clicken und dann leuchtet er und es kommt so was wie "startseite")...jetzt meinte jemand zu mir, ich sollte das bild in mehrere bilder aufteilen, also den kopf als extrabild, aber wie geht das denn??
leider weiß ich auch nicht, ob und wenn ja, ich das bild hie rmal hpchladen könnte..kann es sich vielleicht auch so jemand vorstellen???
wäre über jegliche anwort sehr erfreut!
schönen abend noch, juli

[satre]

Hi juli und Willkommen im Forum.

jetzt meinte jemand zu mir, ich sollte das bild in mehrere bilder aufteilen, also den kopf als extrabild, aber wie geht das denn??

Du kannst das Bild in mehrere Teile zerschneiden, was man "Slicen" nennt. In Photoshop findest du die Funktion im Werkzeugfenster (siehe Anhang).

Anschließend kannst du dieses zerhackte Bild innerhalb einer html-Tabelle wieder zusammenfügen.

wollte ich ein teil des bildes (einen kopf) sozusagen erleuchten

Ist der Kopf denn freigestellt, also liegt er in einer eigenen Ebene?

[Stefan]

Hi Julietta!

Willkommen im Forum! Dein Vorhaben ist im Grunde ganz leicht. Im Grunde hast du drei verschiedene Bilder auf deiner fertigen Enter-Seite: Kopf-normal, Kopf-leuchtend, Körper.

Fangen wir mal an. Wir öffnen das Bild in Photoshop. Ich nehme als Beispiel diesen Hund, den ich mir schnell gegoogelt hab

Schritt 1: Zuerst musst du dein Bild in zwei Teile schneiden: Kopf und Körper. Wir nehmen uns zuerst den Körper vor. Dazu benutzen wir die Auswahlwerkzeuge. Ich kenn' die Komplexität deines Bildes jetzt nicht, daher nehm' ich jetzt meinen Hund als Beispiel. Ich wähle das Auswahlrechteck-Werkzeug (M) und ziehe einen Rahmen um den Körper des Hundes, etwa so:



Schritt 2: Nun ist der Körper des Hundes ausgewählt bzw. markiert. Nun wählen wir oben im Menü Bearbeiten -> Kopieren. Und dann Datei -> Neu. Im erscheinendem Dialogfenster kannst du die Einstellungen lassen. Die Größe sollte sich dem Inhalt der Zwischenablage angepasst haben - also der Größe des ausgeschnittenem Hundekörpers. Dann wählen wir Bearbeiten -> Einfügen. Nun sollte dein neues Bild total von dem ausgewählen Körper ausgefüllt werden:



Zum Schluss speichern wir das ganze Bild noch ab.

Schritt 3: Nun wechseln wir wieder zu unserem, noch ganzem Hund. Die Auswahl von vorhin sollte noch vorhanden sein. Dann gehen wir wieder in das Menü und wählen Auswahl -> Auswahl umkehren. Nun sollte genau der andere Teil des Bildes ausgewählt sein:



Schritt 4: Nun wählen wir wieder Bearbeiten -> Kopieren und erstellen wieder über Datei -> Neu ein neues, leeres Bilddokument. Und wieder wählen wir Bearbeiten -> Einfügen. Nun sollte der Hundekopf zu sehen sein, der das ganze Bild ausfüllt. Und wieder abspeichern.

Schritt 5: Nun bleiben wir beim Hundekopf Bild. Denn jetzt kommt der Glüheffekt. Ich nehme an, du weißt schon, wie das geht, da du ja schon angedeutet hast, dass du den Effekt schon umgesetzt hast. Wenn nicht, schau mal hier. Dort findest du eine Tutorialseite mit sehr vielen, schönen Effekten - auch ein glühen.

Schritt 6: Nun speicherst du auch den glühenden Kopf ab. Achtung! Nicht den normalen Kopf überschreiben, sondern über Datei - Speichern unter einen anderen Dateinamen wählen!

Schritt 7: Nun geht es an die Umsetzung in HTML. Andere Programme wie Fireworks können einen einfachen Bildertausch direkt erledigen - Photoshop eben nicht. Also helfen wir uns selbst - und zwar mit einem kleinen Javascript. Wir öffnen das Programm Notepad. Dazu gehst du auf Start -> Ausführen und gibst dort "Notepad" ein. Nun sollte sich ein kleines Textverarbeitungsprogramm öffnen. Damit öffnest du diese Datei (Rechtsklick -> Ziel speichern unter; danach in Notepad öffnen)

Schritt 8: Nun hast du eine leere HTML Datei vor dir. Ich habe dir ein simples Javascript rausgesucht, mit dem wir jetzt arbeiten werden. Du nimmst jetzt folgenden Code aus dem Link:

<a href="#" onmouseover="document.images['bild1'].src='smily_animiert.gif'" onmouseout="document.images['bild1'].src='smily.gif'">
<img src="smily.gif" border="0" name="bild1"></a>

Diesen Code fügst du in den <Body> Bereich deiner HTML Datei ein. Also zwischen <Body> und </Body>. Nun habe ich dir ein paar Stellen aus dem Code rot eingefärbt - nicht ohne Grund. Du hast ja zwei verschiedene Kopfbilder. Einmal glühend und einmal ganz normal. In meinem Fall heißen sie kopf.jpg und kopf-leuchtet.jpg. Was du nun machst, ist die Stelle im Code, wo smily_animiert.gif steht, durch dein kopf-leuchtet.jpg zu erstetzen. Die smily.gif ersetzt du durch dein kopf.jpg - soweit verstanden?

Es sollte dann so in Notepad aussehen (Screenshot) bzw. so im Browser.

Du kannst deine HTML Datei ja mal ausführen und den Mouseover testen - er sollte funktionieren.

Schritt 9: Nun fügst du den Körper noch ein. Dazu fügst du unter den Code von der JS Seite ein:

<br><img src="koerper.jpg" border="0">

Wieder ein Screenshot aus Notepad bzw. eine Onlinevorschau. Wenn ein Abstand zwischen Kopf un Körper auftaucht, liegt das daran, dass du einen Absatz bzw. eine Leerstelle gemacht hast. Das solltest du vermeiden, siehe Notepad-Screenshot.

Schritt 10: Im Grunde sind wir schon fertig. Den Link definierst du unter <a href="######" ...>. Du kannst das ganze natürlich noch zentrieren, wenn du magst. Zum Schluss sollte das ganze so aussehen: Klick

Ich hab' dir eben jetzt das grundlegende Prinzip erklärt. Klar, es geht 1000x schöner, aber ich denke, so kannst du es verstehen. Falls dein Foto sehr komplex ist, geht es eventuell etwas anders. Frag' einfach nach, falls du Probleme oder noch ein paar Fragen hast, wir helfen dir gern

Viel Spaß beim Ausprobieren,
Gruß Stefan

PS: Klar kannst du hier im Forum Bilder anhängen. Wenn du in dem Modus bist, in dem du deinen Beitrag erstellen kannst, siehst du unten eine extra Box, wo ein grauer Button ist. Auf dem steht "Anhänge verwalten". Der Rest sollte sich selber erklären. Wenn nicht, schau mal im FAQ.

[julietta]

also, wahrscheinlich bin ich einfach zu blöd, aber ich kann mit der beschreibung von satre nicht so direkt was anfangen, weil nachdem ich dieses slice-werkzeug benutzt habe, hab ich das bild gespeichert, aber wo füg ich es denn in einer html-tabelle wieder zusammen? und der kopf....also ich glaube schon, dass er in ner eigenen ebene liegt, ja! ich hab so ne kopf-collage mit ganz vielen ebenen gemacht ,also ist auc hder kohlkopf in einer einzelnen ebene.
die beschreibung von stefan find ich ja sehr toll, weil so ausführlich, nur ich bin gerade schon beim ersten schritt gescheitert... ich wollte dieses auswahlrechteck benutzen und kopieren, aber der pc sagt "konnte nicht kopieren, weil ausgewählter bereich ist leer"....????? was mach ich jetzt? ich schick das bild mal als jpg im anhang ,wenn es klappt; ich wollte halt den kopf unten von kohl scheinend haben! wieso klappt das bei mir mit dem auswahlrechteck nicht?

[satre]

wieso klappt das bei mir mit dem auswahlrechteck nicht?

Das funktioniert nur, wenn das gesamte Bild auf eine Ebene reduziert ist.

In deinem Fall machst du folgendes:

1. Du erstellst in der Kopfebene von Kohl per Ebenenstil einen Schein nach außen:



In der Ebenenübersicht sollte es so aussehen:



2. Du blendest den Ebeneneffekt mit einem Klick aufs Auge aus.

3. Du unterteilst das Bild folgendermaßen mit dem Slice_Werkzeug:



4. Du speicherst das Bild ohne "Schein nach außen" fürs Web (strg+shift+alt+s) als jpg. Wenn jetzt alles richtig geklappt hat, hast du vier Bilder mit den Endungen Bild_01, Bild_02, Bild_03, Bild_04.

5. Den Ebeneneffekt "Schein nach außen" einschalten und wieder fürs Web optimiert speichern. Da sich nur der Kopf im Slice 03 ändert, reicht es, wenn du diesen speicherst:



Diese Datei nennst du Bild_03_over.

In deinem html-Editor fügst du das Bild zusammen.
Wie das mit dem Mouseoverfunktioniert, hat Juice schon erklärt.

aber wo füg ich es denn in einer html-tabelle wieder zusammen?

Mit welchem html-Editor arbeitest du denn?

Ein Beispiel wie du das Bild zusammenfügst:
Angenommen du hast drei Slices mit folgenden Größen:
1. 150*200px
2. 300*200px
3. 200*200px

Du erstellst eine Tabelle mit drei Spalten, die insgesamt 650px breit (weil 150+300+200) und 200px hoch ist.

Der ersten Spalte weist du eine Breite von 150px zu und fügst das erste Slice darin ein. Das gleiche machst du mit den anderen beiden.

[julietta]

also erstmal vieeeelen dank, denn das mit dem slice und dem rollover hab ich ja jetzt hinbekommen; jetzt wollte ich das halt im dreamweaver wieder zusammenfügen und da sieht das dann bei "preview in browser" total zerstückelt aus, also die unteren 3 teile passen gar nicht zusammen...was hab ich denn da nun wieder falsch gemacht? kann leider kein bild anhängen, weil im dreamweaver ist es html, das format funktioniert hier nicht; hängt es vielleciht damit zusammen, das ich noch nen hintergrund eingefügt habe? also ich hab so einen normal lila hintergrund und dann hab ich eine tabelle gezogen und das 1. große bild eingefügt, dann darunter 3 kleine tabellen und die anderen 3 bilder eingefügt...und es entstand so ein casino...:-/ ach ja, ich weiß leider nicht, was ein "html-editor" ist, so kann ich auch nciht sagen, mit was für einem ich arbeite; und wie sieht man denn, wie groß die einzelnen slices sind? in fotoshop? ich seh da nix...:-/
naja, ich geh jetzt schlafen, für alle hilfe sei gedankt! juli