Was sind Thumbs? Unter Thumbs versteht man Bildverkleinerungen in einer Bildergalerie, die als Vorschau für ein größeres Bild dienen. Thumbs sollen groß genug und in der Qualität attraktiv genug sein, damit der Betrachter sie anklicken möchte. Folgende Thumbs bearbeiten wir jetzt zusammen:



 20_Drei_thumbs.jpg (Größe: 20,76 KB / Downloads: 60)


Ich zeige hier, wie man elegante Thumbs mit Rahmen, Schatten und Tesafilm (Tape, oder sticky note) in einem Grafikprogramm (hier PhotoImpact 12) erstellt, und wie man sie anschließend in die Netobjects Fusion Website einfügt. Diese Technik ist auch auf normale Bilder, Hintergründe, Banner usw. übertragbar.

Vorbereitung:

Bei der Verwendung von Schatten muss die Hintergrundfarbe des Layouts bekannt sein. Dies liegt daran, dass man Bilder mit Schatten nicht als transparente .gifs erstellen kann. Transparente Bilder mit Schatten können als .png-Datei dargestellt werden, diese werden aber in älteren Browsern wie dem IE6 nicht oder nicht korrekt dargestellt. Das heißt, wir müssen die Farbe des Layout-Hintergrunds bereits als Hintergrundfarbe des Thumbs verwenden.

Zuerst muss das Motiv des Bildes nach Wunsch ausgeschnitten und verkleinert sowie nachgeschärft werden. Das Motiv sieht so aus:


  Motiv.jpg (Größe: 5,5 KB / Downloads: 158)

Schritt 1:

Ich öffne ein neues Bild in gewünschter Größe, sowie gewünschter Hintergrundfarbe (bei mir #F4F4F4):

Bild öffnen:



 1_bild_oeffnen.jpg (Größe: 20,47 KB / Downloads: 21)


Farbe (mit Fülleimer) definieren:



 Bild_oeffnen_Farbe_zuweisen.jpg (Größe: 102,98 KB / Downloads: 15)


Ich füge dem Bild mein zuvor bearbeitetes Motiv hinzu:



 2 bildverkleinerung_einfuegen.jpg (Größe: 34,63 KB / Downloads: 17)

Ich klicke auf das Bild, so dass die gestrichelte Linie um das Bild als aktiv erscheint und öffne die Rahmen-Galerie. In der Rahmen-Galerie definiere ich den Rahmen:




 3_rahmen_auswaehlen.jpg (Größe: 82,77 KB / Downloads: 19)


Für die Erstellung des Schattens muss man kurz logisch überlegen, wie das Bild am Ende aussehen soll. Ein Schatten signalisiert Distanz zwischen Objekt und Hintergrund. Da ich oben auf das Bild ein Stück Tesafilm kleben möchte, darf dort kein Schatten sichtbar sein. Dafür verwenden fortgeschrittene Anwender die Funktion „Schatten teilen“, wir aber erledigen das gleich hier in den Einstellungen für den Rahmen:

Im Rahmen-Menü (unten) das Kästchen "Schatten" aktivieren. Das Optionen-fenster für den Schatten öffnen, Einstellungen vornehmen:



 4_schatten_zuweisen.jpg (Größe: 87,43 KB / Downloads: 9)


Wir bestätigen die Einstellungen und kontrollieren das Ergebnis:



 5_ergebnis_schatten.jpg (Größe: 30,4 KB / Downloads: 12)


OK, das sieht gut aus. Jetzt fehlt nur ein Tesafilm-Streifen, damit unser Thumb nicht davon fliegt! Nebenbei bemerkt: Nur ein Stückchen reicht, vier Streifen an jedem Eck wäre zu viel des Guten.

Wir speichern übrigens jedes Zwischen-Ergebnis in einem bearbeitbaren Format, bei PhotoImpact ist das die Datei-Form .ufo.

Schritt 2: Erstellen des Tesafilms (tape).

Am besten öffne ich ein neues Bild (Größe z.B. 130 x 60 px.), um den Tesafilm-Streifen selbst zu erstellen (Anmerkung: z.B. bei Fotolia kann man unter dem Begriff „Tape“ vorgefertigte Grafiken finden und kaufen.).




 6_neues_bild_fuer_tesa-film.jpg (Größe: 20,75 KB / Downloads: 9)


Für die Pfadbearbeitung stelle ich die Zoom-Größe auf 200 % um, damit ich beim Zeichnen der Zacken mehr Detail erkennen kann. Als Farbe wähle ich eine undefinierbare dunkle Schlammfarbe. Später wird eine Transparenz erstellt, damit die Bildkante unter dem Tesafilm sichtbar wird.

Einfügen Pfad:




 7_pfad_einfugen.jpg (Größe: 17,8 KB / Downloads: 12)


Pfad in der gewünschten Farbe (bei mir #93927D) gestalten:



 7_pfad_einfuegen_und_faerben.jpg (Größe: 96,99 KB / Downloads: 15)

Der Pfad ist noch aktiviert, ich klicke unter dem Pfad-Symbol in der Werkzeugleiste auf „Pfadbearbeitungswerkzeug“:



 8_pfad_bearbeiten.jpg (Größe: 43,49 KB / Downloads: 4)


Oben auf der Menüleiste erscheinen jetzt die Einstellungen für das Pfadbearbeitungswerkzeug:



 9_pfadbearbeitungswerkzeuge_PI.jpg (Größe: 18,37 KB / Downloads: 9)


Ich klicke auf das + Zeichen, um Punkte für die Kanten des Tesafilms hinzuzufügen. Damit möchte ich erreichen, dass die Kanten „gerissen“ aussehen.

Ich füge viele Zeichnungspunkte ein und verschiebe sie mit der Maus in unregelmäßiger Zick-Zack-Linie, bis die Grafik in etwa wie folgt aussieht (Hier 300% Zoom):




 10_zerrissene_Kante.jpg (Größe: 6,72 KB / Downloads: 10)


Und so sieht mein fertiger Pfad aus:



 11_fertiger_tesafilm.jpg (Größe: 8,59 KB / Downloads: 7)


Jetzt kann ich den fertigen Tesafilm in meine Thumb-Grafik übernehmen (kopieren/einfügen):



 12_tesa_film_eingefuegt.jpg (Größe: 28,09 KB / Downloads: 8)


Das wirkt nicht natürlich, der Streifen muss transparent werden. Ich klicke den Pfad an und stelle die Transparenz auf 70% ein:



 13_transparenz_erstellen.jpg (Größe: 29,41 KB / Downloads: 12)

Um die Grafik aufzulockern, klebe ich den Tesa-Streifen leicht schief:
Streifen anklicken, Verformwerkzeug aktivieren, um 4° nach links drehen:




 14_verformen.jpg (Größe: 29,57 KB / Downloads: 7)


Und so sieht anschließen die fertige Grafik aus:



 15_fertig.jpg (Größe: 20,69 KB / Downloads: 13)


Jetzt ist die Erstellung weitere Thumbs nur noch ein Kinderspiel.


3- Erstellung weiterer Thumbs


Nach dem Speichern des Zwischenergebnisses (immer mit „Speichern unter“ eine neue Ufo-Datei erzeugen, damit man die Arbeit bei früheren Arbeitsschritten wieder aufnehmen kann) vorhandene Datei duplizieren:

Klick auf das Bild, mit dem Tastenkürzel „Strg D“ gewünschte Anzahl Duplikate erstellen.

Bilder für die neuen Thumbs haben wir in der richtigen Größe vorbereitet, sie befinden sich auf der PhotoImpact-Arbeitsfläche.

Wir wählen ein Bild aus, mit rechter Maustaste klicken wir auf „alle“. Das Bild wird hervorgehoben:



 16_weitere_thumbs_vorbereiten.jpg (Größe: 16,65 KB / Downloads: 11)


Diese Auswahl kann ich jetzt einfach mit der Maus über das zu ersetzendes Bild in den duplizierten Thumb schieben:



 17_Thumb_ueberschreiben.jpg (Größe: 39,02 KB / Downloads: 8)


Ist das Bild am Ziel angekommen, lasse ich die Maustaste los, und mein zweiter Thumb ist erstellt:



 18_neues_bild_fertig.jpg (Größe: 6,64 KB / Downloads: 5)


Und so weiter:



 19_noch_ein_bild.jpg (Größe: 7,23 KB / Downloads: 13)


Mit diesem Tutorial habe ich Euch einige einfache aber effektvolle Techniken gezeigt, um Eure Bilder zu bearbeiten. Eurer Fantasie sind keine Grenzen gesetzt!

Je nach Zweck der Anwendung könnt Ihr die Bilder jetzt einfach in Euer NOF-Projekt einfügen oder als Hintergrund verwenden.


Schritt 5:


Wir werden Euch demnächst hier im Netobjects-Forum der NOF-Schule eine schöne Bildergalerie vorstellen, die mit solchen Thumbs und Bildvergrößerungen Eure Projekte bereichern wird.

In dem Zusammenhang wird die korrekte Einbindung von Thumbs als Vorbereitung einer Bildergalerie in NOF behandelt.

Ebenfalls wird eine standardisierte Methode gezeigt, viele (einfache) Thumbs mit nur wenigen Mausklicks zu erstellen.

Viel Spaß beim Nachbasteln! Fragen dazu könnt Ihr gerne im Hilfeforum stellen.

Und hier für Mitglieder die .pdf-Datei zum Download: