Um auf seiner Homepage auf etwas ganz besonderes aufmerksam zu machen bieten sich bunte PostIts bzw. Notizzettel an. In einer weiteren Co-Produktion mit Friedhelm wollen wir Dir vor allem zwei verschiedene Möglichkeiten aufzeigen. Du kannst entweder einen bloßen Notizzettelkopf, der dann mittels CSS-Anweisungen zu einem beliebig langen Zettel wird, anfertigen (A.) oder einen kopmletten Notizzettel, welcher in der Größe von vornherein festgelegt ist (B.)
Wichtiger Hinweis:
Die hier gezeigten Web-Notizzettel eignen sich nur für uni-farbene Webhintergründe. Das Problem liegt darin, dass gif-Dateien die Transparenz, die für mehrfarbige bzw. gekachelte Webhintergründe nötig wären, nicht 100%ig umsetzen können. Bei den gif-Dateien ist ein Pixel entweder transparent oder farbig, so dass man in einer Bilddatei nur eine einzige Farbe transparent machen kann. Für Übergänge wie Vignetten und Schatten reicht das jedoch nicht aus. Hierzu benötigt man die sog. Alpha-Transparenz. Nur png-Dateien können eine echte Transparenz darstellen, da sie, im Gegensatz zu den gif-Dateien, die Alpha-Transparenz unterstützen. Allerdings können Dateien im png-Format von den älteren Internet Explorern (kleiner als IE 7) nicht angezeigt werden.
Dieser Tipp ist eine Coproduktion mit Friedhelm von meiner Partnerseite. Die Einzelheiten dazu, wie Du die Web-Notizzettel in Deine Webseite einbinden kannst, findest Du in Friedhelms CSS-Fundgrube anschaulich erklärt. Ein Besuch lohnt sich!
1. Das Grundgebilde
Öffne in PI eine neue Leinwand in der Farbe Deines Webhintergrundes - für diese Anleitung habe ich #C2C2C2 gewählt. Die Leinwand kann ruhig etwas größer sein als der geplante Zettel, also beispielsweise 300x250 px. Sodann aktiviere das Pfad-Zeichenwerkzeug. Wähle als Pfadform das Rechteck, bei der Farbe kannst Du Dich nach Deinem Projekt richten. Ich möchte einen gelben Zettel anfertigen und wähle daher #EFD551.
Ziehe ein schmales Rechteck auf:
Jetzt schneiden wir den Zettelkopf zurecht. Wechsele deshalb bei aktiviertem Rechteck-Pfadobjekt zum Zuschneidewerkzeug. Klicke auf den kleinen Pfeil in der Attributleiste. Achte auf die Größe der zugeschnitten Leinwand! PI schneidet teilweise mit einer kaum erkennbaren Vignette von rundherum 1 px. Auch im vorliegenden Beispiel hat mir PI die Leinwand gemgemäß auf 231x36 px zugeschnitten, so dass ich zusätzlich den 1-Pixel-Rand manuell wegschneiden musste. Danach ist die Datei genau wie das Pfadobjekt exakt 230x35 px groß.
2. Die eingerollte Ecke
Du könntest nun bereits dieses Gebilde als Notizzettel auf Deiner Website einsetzen. Dafür hättest Du aber nicht extra ein Bild pixeln müssen. Unser Web-Notizzettel soll realistischer und zugleich peppiger werden, indem eine Ecke des Zettelchens leicht eingerollt wird.
Lasse Dein Rechteck-Pfadobjekt aktiviert. Rufe den PI-eigenen Umblättern-Effekt auf:
In dem neuen Fenster kannst Du alle möglichen Einstellungen vornehmen. Teste einfach mutig diverses durch. Ziehe auch ruhig einmal an den drei Punkten im linken Vorschaubild. Keine Angst, denn in dem rechten Vorschaubild erkennst Du immer sogleich, was die jeweilige Einstellung bewirken würde, wenn Du sie auf das Bild anwenden würdest.
ACHTUNG: Nur an einer Einstellung kommst Du nicht vorbei, damit die Ecke später auf Deiner Webseite auch wirklich gut aussieht. Wähle als "Hintergrundfarbe" die Farbe Deines Web-Hintergrundes!
Für meinen Notizzettelkopf habe ich schließlich folgende Einstellungen für gut befunden ...
... und damit folgenden Notizzettelkopf erstellt:
Nachdem Du die Grafik im gif-Format abgespeichert und Friedhelms Anleitung, dort unter Ziffer 2, studiert und umgesetzt hast, könnte Dein Notizzettelkopf mit Hilfe einiger CSS-Anweisungen im Quellcode zu einem echten PostIt heran wachsen - ganz so wie auf dem folgenden Screenshotausschnitt einer Webseite:
Du könntest der obigen Anleitung folgen und anstelle einer Höhe von nur 35 px für das Rechteck-Pfadobjekt die gewünschte Zettellänge wählen. Ich möchte Dir aber eine andere Variante zeigen, die den Notizzettel nicht ganz so rechtwinkelig erscheinen lässt.
1. Pfadform
Öffne zunächst eine ausreichend große Leinwand in PI. Auch hier wähle wieder die Hintergrundfarbe Deiner Webseite. Nachdem Du das Pfad-Zeichenwerkzeug aufgerufen hast, wählst Du in der Attributleiste die Funktion "Zeichnen freier Form":
Rufe die "Werkzeugeinstellungen-Pfad" auf, wähle "Glatt schließen " sowie eine Genauigkeit von ‘9‘ für das gleich folgende freihändige Pfadzeichnen:
Wende Dich Deiner leeren Leinwand zu. Jetzt brauchst Du eine ruhige Hand und ein wenig Vorstellungsvermögen. Stelle Dir vor, wie ein PostIt mit dem Hauch einer Wölbung vor Dir auf dem Tisch liegt und zeichne dessen Umrisse. ACHTUNG: Übertreibe es mit den Wölbungen nicht, denn auf all zu unregelmäßige Notizzettel kann nachher mit Hilfe der CSS-Anweisungen nur eingeschränkt Text platziert werden.:
In dem Moment, wo Du den Startpunkt wieder erreicht hast und die Maus los lässt, erscheint Deine Pfadform. Das Ergebnis könnte so aussehen:
2. Schatten, Zuschneiden und Speichern
Nun fehlt noch ein dezenter Schatten. Vollziehe einen Rechtsklick auf das aktivierte Pfadobjekt und wähle aus dem Kontextmenü "Schatten". Übertreibe es bei den Einstellungen nicht, es soll ja natürlich aussehen. Ich habe diese Schatten-Einstellungen gewählt:
Dein Notizzettel ist noch aktiviert. Schneide ihn wie bereits oben im Kapitel "Notizzettelkopf" zu. Danach speicherst Du das gesamte Bild als gif-Datei ab. Ergebnis:
Web-Notizzettel in pink
Werfen wir einen Blick auf das Ergebnis:
Auf der nächsten Seite zeige ich Dir noch ein paar kleine Gimmicks zu dem Thema.
