Die Bezeichnung "Passepartout-Websites" ist eine gelungene Wortschöpfung von Friedhelm von meiner Partnerseite www.ohne-css.gehts-gar.net. Es geht darum, dem Hauptinhalt einer Webseite, oft als content bezeichnet, einen schmucken Rahmen zu verpassen. Und bevor ich weitere Erklärungsversuche starte guckst Du Dir am besten Friedhelms Demo "Swinging Passepartouts" an!
In dieser Fundgrube zeige ich, wie leicht jener Rahmen mit PI nachgepixelt werden kann. Wie Du ihn dann in Dein Webprojekt einbauen solltest, erklärt Dir Friedhelm anschaulich in seiner CSS-Fundgrube.
Öffne in PI eine neue Leinwand in der Breite und Höhe Deines Contents, also zum Beispiel in 800x600 px. Als Farbe wähle die Farbe Deines Webhintergrundes. Lass´ Dich im Folgenden von meiner nur halb so großen Leinwand nicht irritieren. Aus Platzgründen arbeite ich hier mit der deutlich kleineren Variante.
Jetzt könntest Du u.a. mittels des Pfad-Zeichenwerkzeuges einen Rahmen ganz nach Deinen Vorstellungen kreieren. Ich mache es mir einfacher und schaue erst mal, ob mir nicht schon PI einen schönen Rahmen fertig anzubieten hat.
Hierzu öffne ich die Trickkiste und wähle auf der Karteikarte 'Galerien' die Rubrik 'Bildverbesserungen'. Dort, genauer unter 'Fotorahmen', sieh´ Dir mal die Vielzahl von 'klassischen' Rahmen an, die PI fertig gepixelt zu bieten hat.
Der Rahmen 'Klassisch 46' hat es uns angetan. Du könntest ihn jetzt einfach per Doppelklick auf Deine Leinwand anwenden. Du wirst dann feststellen, dass PI ungefragt Deine Leinwand ein wenig vergrößert. Hattest Du eine Leinwand in 800x600 px geöffnet, so wächst sie mit den Standardeinstellungen auf 848x645 px an. Du musst daher vor dem Doppelklick die Eigenschaften des Rahmens 'Klassisch 46' ändern.
Dazu vollziehe auf das kleine Vorschaubild in der Trickkiste einen Rechtsklick und wähle aus dem Kontextmenü den Eintrag "Eigenschaften ändern und anwenden...". In dem neuen Fenster siehst Du vorausgewählt Deinen Rahmen. Setze das Häkchen vor "Arbeitsfläche" ...
... sowie anschließend daneben auf "Optionen". In dem neuen Fenster 'Arbeitsflächen-Optionen' überschreibe in allen vier Kästchen den jeweils voreingestellten Wert von '10' mit dem Wert '0':
Klicke auf "Okay", schließe auch das Fenster 'Fotorahmen' über den Button "Okay" und schon baut sich der Rahmen 'Klassisch 46' passgenau in Deiner Leinwand auf!
Verkleinert sollte es so aussehen:
Im Prinzip ist Dein Passepartout für Deine Webseite schon fertig. Doch vielleicht möchtest Du ja noch die ein oder andere Anpassung vornehmen?
Betrachte einmal den Ebenenmanager:
Da ist zunächst das Basisbild, Deine Leinwand. Die einzelnen Elemente des Rahmens wurden von PI gruppiert und bilden eine eigene Ebene. So kannst Du den Rahmen insgesamt bearbeiten, zum Beispiel umfärben. Willst Du jedoch die einzelnen Elemente bearbeiten, musst Du die Gruppe trennen.
Vollziehe entweder im Ebenenmanager oder direkt auf der Leinwand auf Deine Rahmengruppe einen Rechtsklick und wähle die Option "Trennen":
Sofort dröseln sich alle Einzelelemente des Rahmens im Ebenenmanager auf und Du kannst nun jedes Einzelelement nach Wunsch bearbeiten oder aber auch löschen.
Du könntest zum Beispiel die Notenlinien etwas weiter auseinander ziehen und sie zusammen mit dem Notenschlüssel am oberen Rand anordnen:
Möglich wäre es auch über "Bearbeiten" - "Füllen" oder die Funktion "Duotone-Effekt" einzelnen Elementen eine andere Farbe zu verpassen:
Ferner könntest Du über "Bearbeiten" - "Ausblenden..." einzelne Elemente je nach Bedarf und Geschmack ausblenden:
Selbstverständlich kannst Du dem Passpartout auch neue Elemente, insbesondere Texte und/oder Grafiken, hinzu fügen:
Achte jedoch darauf, dass Du das Bild nicht mit allzu vielen Elementen überlagerst. Einerseits würde es dann vermutlich zu unruhig wirken, andererseits würde das die Ladezeit verlängern.
Bist Du zufrieden, so speichere Dein Werk als JPG, PNG oder GIF ab.
Alles zu Einbau in Dein Webprojekt und Anpassung mittels CSS erfährst Du von Friedhelm!
Wie gesagt, die Trickkiste ist nur eine mögliche PI-Quelle für das Passepartout Deiner Webseite. Wenn Du selbst kreativ werden willst, dann versuche doch mal ein eigenes Passepartout zu entwerfen. Mit dem Pfad-Zeichenwerkzeug sowie dem Umriss-Zeichenwerkzeug könnte vielleicht so etwas entstehen wie auf meiner Simulation einer Bildschirmaufnahme:
