Bei diesem Entwurf macht es Sinn die Headergrafik in Ebene zu unterteilen. Zum einen die Hochhäuser als Endloskachel und zum anderen die dynamischen diagonalen Streifen. Der Rest ist ziemlich streight forward. Nichts aufregendes. Sozusagen ein safe bet. Schlicht, durch den harten Kontrast ein wenig rassig, durch die sanften Blautöne ein wenig romantisch. Flexibel, durch die zurückhaltende Ausschmückung.

Das tut er jetzt (nach dem großen Rauschen im Bloggerwald) auch und zwar wie ein _echter Browser des Hauses Microsoft_ hat er _ganz eigene Vorstellungen_ wie die Seite gerendert werden könnte.

Diesesmal scheine ich nicht so billig wegzukommen wie mit dem IE7, der in diesem Fall sich wie der Rest der Browser benimmt. Das heißt für den IE7 benötige ich kein conditional comment und keine extra Anweisungen. Aber der IE8 macht nicht mit. Er möchte typisch für die IE-Browser eine Extrawurscht.

Tssss! Darum kümmere ich mich später. Es ist auf meiner Todo-Liste.

Achtung, an dieser Stelle sind die Banner verkleinert, die Originale gibt es auch dieses Mal im Weblog auf PG4ME. Die Banner sind mit dem Beitrag zu den Headergrafiken verlinkt. Dort steht, wie man diese Herunterladen kann. Wo es passt, kann diese Osterdekoration natürlich auch eingebunden werden, wenn es sich dabei nicht um das WP-Theme dKret3 handelt

Ich versichere, dass ich diese Banner gestaltet habe und ich stelle diese unter der Lizenz Creative Commons 2.0 by nc, wobei ich die Verwendung für den Eigenbedarf auf kommerziellen Seiten ausdrücklich gestatte. Ungemütlich werde ich, wenn diese Banner ungefragt in Sammlungen auftauchen oder gar verkauft werden. In Bezug auf anderen Sammlugnen: Fragen kostet nichts, es gibt einige Projekte, die meine Zustimmung bekämen.

Und wer wissen möchte, wie man ein Cartoon mit Papier, Bleistift einem schwarzen Stift , einem Scanner und Photoshop zeichnet, für den gibt es in der Spielwiese zum Banner auch noch ein Tutorial.

Es ist etwas früh für Ostern aber dann … die Seiten müssen ja schließlich dekoriert werden.

Update folgt, sobald ich vom Entwurf zur Umsetzung gekommen bin. Mit den Farbwerten werde ich ggf. noch etwas spielen. Auch überlege ich, ob das “Schild” BIldergalerie per Javascript schwingen lasse. Nicht dass ich schon wüsste wie das geht und ein wenig habe ich bedenken, dass dieser Schnickschnack die Site zum Browserkiller macht, wie einst die Frontpage-Hoverbutton und jenes trendige Scrolltextchen, das angeblich stabil in allen Browsern laufen sollte, doch dann als sicherer Netscapekiller ein wichtiges Verkaufsgespräch vor über zehn Jahren zu einem jähen Ende brachte. Weswegen ich bis heute lieber Javascript weglasse, wenn es denn keinem sinnvollen Zweck erfüllt.

Da es aber eine private Spielwiese ist, käme es hier nicht ganz so darauf an, dass alle mit dem Script happy sind und es wäre ein leichtes es über eine Cookie-Steuerung rauszunehmen, wenn ein lokales System nicht mit klarkommt. Sozusagen einen Safe-Modus für die Website.

Übrigens wer nun annimmt in dem Design wären drei verschiedene Schilfgras-Elemten erforderlich, der irrt. Trotz unterschiedlicher Stillänge und scheinbar unterschiedlichen Grauwerten, handelt es sich dabei jeweils um ein und die selbe Grafik und kann auch so im HTML-Quelltext eingebunden werden. Überhaubt ist dieser Entwurf mit sehr wenigen Grafiken realisierbar und damit ein extem schlankes und schnelles Design.

Ich habe planlos gedaddelt und produzierte eine Scheußlichkeit an die nächste gereiht. Es hatte fast schon das prickelnde Nackengefühl von Horror-B-Movies und dann stoppte ich an dieser Stelle und es ist immer noch schön scheußlich, doch es reizt mich etwas an der Zusammenstellung, dass ich es hier ausstelle. Vielleicht können mir andere sagen, warum ich dieses Ding nicht wie die anderen mit dem schönen kleinen Gruselschauer ins NIrvana schicke.

Ausgangspunkt war ein unkoordinierter Schnörkel mit der Maus, der mittels dem Kaleidoskopfilter und Leerräume füllen und andere offen lassen zu einem Blütenornament verwandelt wurde.

<_aber und überhaupt_ >
Die Navigation ist für mich gar nicht so selten ein störendes Element in meiner kleinen grafischen Erlebniswelt in Photoshop; z.B. fast immer, wenn ich Seiten so im Daddelmodus in Photoshop arbeite. Sprich die Maus von Werkzeug zu Filter zu Werkzeug in Photoshop huscht, ohne konkreten Kunden, ohne konkretes Ziel.
</ _aber und überhaupt_ >

Das sind Arbeiten, die dem kreativen Zustand ähneln, wenn man mit Stift und Papier dem Anrufer am Telefon lauscht und dabei mit dem Stift Doodles fabriziert, Figürchen kritzelt, Hexenhäuschen schafft und was sonst so auf dem Notizblock zu finden ist, wenn es nichts zu notieren gibt. In diesen Arbeiten ist die Navigation ein Nachgedanke und es macht einige Mühe eine felxible Navigation, die sich unterschiedlichsten Sitekonzepten fügen kann, stimmig zum Gesamteindruck zu integrieren. So ein “ich daddle noch so ein wenig rum”-Entwurf entstand auch heute zwischen zwei Anrufen, neben dem Vesper und zwischen rein zwischen Dies und Das. Doch diesmal blieb ich bockig. Nein, einen Kasten will ich nicht. Nein einen Kasten will ich nicht. Ich will keinen Kasten, nicht! stampfte mein kleiner innerer kreativer Kasper:

Eine Alternative ist ein Link, der alle Texte einblendet. Weil es Javasript ist, müsste man insgesamt wohl dafür Sorge tragen, dass ohne Javascript die Navigation klassisch im Kasten untergebracht ist und seitlich oder oberhalb des Textes und somit den Text nicht wie beim Mouseover unproblematisch, Textbereiche überdeckt. Durch die Möglichkeit sämtliche Links ein und wieder Auszublenden, entfällt die Kritik am Ratespiel einer klassischen Mystery Meat Navigation. Die Seite kann damit zum optischen Erlebnis werden, bei dem einmal nicht irgendwo eine Navigationsleiste steht oder ein starrer Kasten erscheint oder eine Textliste dem Inhalt kostbaren Platz nimmt und um Aufmerksamkeit buhlt. Die Navigation geht auf in ein grafisches Erlebnis.

Übrigens, dass sich der Text um die Kugel und andere Objekte winden kann, dafür gibt es im Netz schon Designbeispiele und Lösungsbeispiele:

1. Die CSS-Kurve
2. Text um Bilder

Nachdem ich die Quelle der 8 Vektorgrafiken^[1] erst heute alle abgeklappert habe und dabei nur eine Sammlung für nichtkommerzielle Zwecke außerhalb von Demianart zur Verwertung vorfand, stehe ich ein wenig in der Schuld. Daher hier das Tutorial. Es fängt damit an, dass man ein geeignetes Bild heraussucht. Entweder ein helles Objekt vor dunklem Untergrund oder ein dunkels Objekt vor hellem Untergrund. Um Urheberrechte muss man sich nur bedingt Gedanken machen, da das Endergebnis sehr weit vom Original entfernt ist und es der Fotograf schwerhaben dürfte, der späteren Vektorgrafik anzusehen, dass sein Foto einst die Basis darstellte. Hier im Tutorial sieht das anders aus. Das Foto steht in direktem Zusammenhang mit der Silhouette. Ich nehme daher aus Flickr.com ein Foto aus dem creativ commons by 2.0 des Users officialstarwarsblog.

Die fünf Schritte zur Vektorgrafik:

Zunächst einmal wird die Farbe entfernt: STRG+Shift+U

Da hier ein Bild mit heller Figur ist benötige ich den Zwischenschritt der Invertierung Strg+i:

Nun werden die Kontraste bis zum Anschlag hochgefahren Image/Adjustment/Brightness+Contrast Contrast 100, Brightness je nach Bild hier 35:

Überflüssiges entfernen, Zauberstab und weißer Pinsel:

Mit diesem Zwischenstann könnte man schon leben, doch sind noch zuviele Details besser noch den Rock entfernen udn einige Lichtreflektionen und Kleidungsstücke schwarz auffüllen:

Auch habe ich noch die eine oder andere weiße Linie ergänzt. Damit aus dem schwarz/weißen Bitmap nun eine Vektorgrafik wird, muss zunächst über Select/Color Range die schwarze Figur in die Auswahl genommen werden. Danach wechselt man von der Ebene zu den Pfaden und klickt am unteren Rand die Schaltfläche “Auswahl zu Pfad”. Darauf achten, dass der Pfad aktiv ist und schon kann man über File/Export/Path to Illustrator den Pfad als AI-Vektorgrafik abspeichern und weiter verwursten. Sie erstes Bild.

Ist der Pfad noch zu ingenau, kann man diesen etweder bereits in Photoshop nachbearbeiten oder aber später im Vektorprogramm wie z.B. der Illustrator oder CorelDraw. Und hier ist die Silhouette (AI-Datei) zur freien Verfügung. Wobei ich in diesem Fall zu bedenken gebe, dass die Silhouette mit dem Foto in Verbindung gebracht werden kann und damit man sich u.U. den einen oder anderen Arger einfangen könnte. Besser wird es sein man sucht sich ein anderes Foto.

• Shopping Carts
• 70 beeindruckende Headergrafiken

Techniktricks:

• htaccess: Do thy bidding oder wie man dem Server seinen Willen aufzwingt
• 7 Webmastertools vom Seo getestet und empfohlen

Weitere Links werden folgen, wenn diese mir über den Weg laufen.

1. 70 Expert Ideas For Better CSS Coding
2. 53 CSS-Techniques You Couldn’t Live Without vom letzten Jahr
3. Und 50 Powerful CSS-Techniques For Effective Coding in diesem Jahr
4. Chic Chic, 32 Tipps zur Gestaltung von Tabellen
5. 25 Linktipps: CSS für Formulare

Mit bester Empfehlung des Smashing Magazins.

[Nachtrag]

1. Teil: 101 CSS techniques of all times
2. Teil: 101 CSS techniques of all times

Nun kann man sich frage wer von wem … baer generell gilt, dass diese Links im Netz schwirrenudn wer seine Bookmarks einmal leert wird vermutlich ähnliche Listen zusammenstellen können. Einiges ist definitiv doppelt, das bleibt nicht aus. Ein Dankeschön geht also auch an Noupe.com für die Zusammenstellung.

[/Nachtrag]

Was den @import ./. link des Stylesheets anbelangt, so ist das Argument der alten Browser reichlich hinfällig. Wo in der freien Netzwelt wird der Netscape 4 noch verwendet? Allenfalls die Möglichkeit ältere CSS-Versionen vorrätig zu halten, wie z.B. Saisonale Stylesheets , und für alle HMTL-Template diese an einer Stelle auszutauschen überzeugen mich vom @import, wobei es auch ein umtaufen der Stylesheets täte …

In Bezug auf den @import url(style.css) ist die Liste @import-Hacks sicher von Interesse.

Generell gilt, je weniger Hacks, desto besser.

via Vandelay Design Weekly Links

Nachtrag: Hacks:

• Die 10 besten CSS-Hacks
• 7 CSS Hacks die man verwenden sollte

Wenn man meint es zu brauchen … ich persönlich verzichte lieber auf Hacks und suche alternative Lösungen ohne Hack. Nur manchmal … manchmal eben

Excessiv: Übersicht der Methoden für runde Ecken … (Bestandteil der Liste oben. Aber gesondert erwahnenswert, wei ich finde.)

Ich ich bin noch am Ordnen und Sortieren meiner Feeds und der extrem vielen Tipps darin. Es sind so viele, dass ich primär hier einen Washout mache. Es folgen in Kürze weitere Listen nach Themen sortiert. Nicht verzweifeln … ich habe sie auch nur grob gescannt und was mir nützlich erschien auf die Platte gezogen und vermutlich wandert es unsortiert auf eine CD. Ich muss dringend meine Spielwiese auf Vordermann bringen, denn nur so werde ich die vielen, vielen Techniken und Tipps auch abrufbar haben. Aber immerhin ich habe es gesehen und wenn es CSS ist, dann wird mir dieser Beitrag helfen, es wieder zu finden. Sind ja nur rund 150 Links Um eine kleine Vorstellung zu haben: Ich hatte heute ca. 200 Fenster offen und zuletzt im Feedreader 150 Beiträge auf “Keep new” ohne ansurfen … Ich nenn das den totalen Overload und ich erinnere mich, warum ich den Feedreader zuletzt nur noch selten aufgesucht habe. Ich fühlte mich von der Menge schlicht erschlagen. Nicht mangelnde Güte der Beiträge machte mir zu schaffen, sondern die Beiträge so für mich zu verarbeiten, dass ich mit der Info noch etwas anfangen kann. Leiden wie gemeinsam.

Wie bei einer Flashsite so üblich keine Direktverlinkung möglich, was aber nicht das schlimmste Übel ist, denn das Formular hielt dem Screenshot 1024×768 nicht stand:

Wie man nur unschwer erkennen kann ist nun der Sendbutton hinterm Horizont verschwunden. Auch wenn ein Klick auf das kleine Hochhaus neben dem spitzen Hochhaus vermutlich die Sendefunktion noch beinhaltet, so ist das Formular damit im Grunde untergegangen. Hier fehlt für kleinere Auflösungen definitiv eine Skrollfunktion oder aber (schließlich ist es eine Flashsite) ein Zoomfaktor.

Wie dem auch sei, das Formular selbst in seinem schlichten gezeichneten Stil ist etwas, das man wohl getroßt auch ins eigene Repertoir aufnehmen kann. Auch Packpapier bzw. brauner Zeichenkarton als solches ist nicht so ungewöhnlich, dass man sich schämen müsste, macht man ein eigenes Design damit. Zeichenelemente als solches sind auch nicht so abwegig. Allein die Idee des gebastelten Kindertheaters mit den Wolken am Bändel und das ganze drum und dran, ist so unique und schön, es fiele mir nicht im Traum ein, das zu plagiatieren. Das finde ich einfach klasse. Fast perfekt, sieht man einmal vom Umstand ab, dass es eine Flashsite ist. Ja dem einfachen HTML fehlen schnickschnack Überblendungen. Ja, ich weiß der IE hat welche in seinen proprietären Filtern … proprietär zählt nicht. Crossbrowser ist da nichts. Allenfalls via Javascript und da durchaus auch als barrierearmes DOM-Scripting möglich und crossbrowserfähig. Damit behält man seinen maschinenlesbaren, marked up Text und kann, wenn man nicht gerade heftig in die Ajax-Kiste greift die Browserhistory erhalten, Bookmarking und Deeplinking erhalten, eben all die Dinge, das Web so stark mit einander vernetzt und kommunikativ macht. Auf diesen Wasserwabble-Effekt (der vermutlich fertig in der Flashbibliothek rumtreibt) muss man mit Javacript nicht verzichten, das ist machbar, alles was es braucht, ist ein verdeckendes, transparentes DIV mit einer horizontal gekachelten Wellengrafik, die sich nach unten aus dem Screen bewegt und dabei die CSS-Position der Hintergrundkachel in der horizontalen vorwärtsschiebt. Relativ einfache Übrung für geübte Javascriptler. BTW: auch die Wolken sind denkbar einfach im barrierenarmen DOM und JS und können bei PNG mit Alphatransparenz effektvoll vor und hinter der Goldengate-Bridge vorbei wandern.

Fast schon dachte ich, ich hätte eine dritte Methode entdeckt, wie man aus einem Foto eine Zeichnung macht, aber dann beim Test bedurfte es doch wieder einer der alten Methoden, um die Umrisse hervorzuheben.

Wovon ich spreche? Von einem ziemlich alten Beitrag, bei dem ein Foto in eine Comiczeichnung umgewandelt wird im alten templaterie blog. Dort werden zwei Methoden gegenüber gestellt.

Die neue Methode, die ich nun auf Tutorial-Place.com fand, verwandelt ein Foto 4 Schritten und mittels drei Ebenen in eine Zeichnung. Als ich die Methode am Hirsch von Rainer Storm testete, war das Ergebnis nicht zufriedenstellend. Aber ich konnte mir mit einem der alten Tricks helfen. Und so verwandelt man das Foto vom Hirsch in eine Zeichnung vom Hirsch:

1. Foto 4 mal dublizieren und bis zur vierten Ebene Desaturieren (STRG+U)
2. Ebene 5: Opacity 60%, Ebenen-Filter: Color ODER: Opacity 100%, Ebenen-Filter: Color Burn oder Multiply für kräftigere Farben
3. Ebene 4: Opacity 85%, Ebenen-Filter: Color-Dodge, Invertieren (STRG+I), Gaussian-Blur ca. 3px
4. Ebene 3: Opacity 20%, Filter Artistic Brushes/Crosshatches Default oder ein wenig gespielt mit den Filtern
5. Ebene 2: Opacity 70%, Ebenen-Filter: Multiply, Invertieren, Filerset-Blur/Smart-Blur (Radius 50, Threshhold 100, Quality high, Overlay Edge), invertieren

Wer noch den angefressenen Rand möchte, kann in einer neuen Ebene einen 10-12 Pixel breiten Papierfarbenen Rand erzeugen (STRG+A, Edit/Stroke: ca. 10px Location inside, Filter/Blur/Gaussien blur 3,0, Ebene-Filter: Dissolve).

Bildquelle aboutpixel.de Hirsch von stormpic aka Rainer Storm

A List apart hat diesen Umstand berücksichtigt und deren Entscheidungen schlüssig und sinnvoll begründet. (Ala4.0)

Mag sein, dass man den Aufbau noch elegnater hinbekommt und den einen oder anderne Hack vermeiden könnte, doch da häng ich mich dann nicht rein. Schließlich ist jede Seite immer nur so gut, wie es die Zeit, in der sie erstellt wurde, zulässt. Ich sage nur Panta rei oder so.

Nach dem ich schon mit Buntstiften beschäftigt war, da könnte ich schließlich ja auch noch das Figurenzeichnen ein wenig üben … wobei ich mich am Ende dann doch nicht ernsthaft drangesetzt habe, denn mit den Händen hinter dem Rücken verschränkt, gilt das nicht und die Beine einfach als zwei Ovale und ein Trapez ist dann auch nicht wirklich geübt. Nagut ein wenig schon, denn ich finde die Proportionen stimmen und Standbein und Spielbein sind ein Detail, da beachtet sein will. Die meisten Frauen stehen wie die Pelikane mit nur einem Bein auf dem Boden und das andere angewinkelt, wenn auch vielleicht nicht so extrem. Der Körper ist etwas überstreckt, das schafft erst den Pinup-Effekt und wird für die Navigation gebraucht. Das größte Pinuptoon geht über ca. zwei Monitor-Längen bei den gängigsten Auflösungen. *seufz* So langsam sollte ich mich dann doch vom Photoshop zum HMTL & CSS begeben mit einigen der Entwürfe. Wobei ich im Moment noch die Entwürfe, die ich letztes Jahr um ca. diese Zeit hier einstellte noch auf Ansichten mit 1016×640 Pixel via Thickbox umstelle und hier noch eine Weile im Beschäftigt bin. Es sind eine ganze Menge nun schon in diesem Weblog zusammen gekommen. (Ich muss es noch einmal prüfen, aber ich denke die meisten haben nun schon den Tag Webentwurf, so dass man alle Designs schon recht bequem durchblättern kann. Bei Gelegenheit werde ich mir dann noch die Galerie-Plugins ansehen und hier eine kleine Galerie einrichten … )

[Nachtrag]
Diese Figur wäre auch sehr schön für eine Pornoseite, bei der auch Nicht-Interessierte kein Problem haben wenn Sie auf der Eingangsseite landen und sie hätte Witz:

Für einen solchen Entwurf, hätte ich ja immer schon gern einen Illustrator gehabt, der dann die Katze auf verschiedene Templates wie in einem Comic in Aktion bringt, oder auch andere Motive ergänzt. Vielleicht sogar auf der Seite wie Javascript einen ganze Comic erzählt, der sollte Javscript deaktiviert sein, ersatzweise auf einer weiteren Seite abgerufen werden könnte. Dass ich aus der Übung bin kann nur allzudeutlich an den Bulldoggenbeinen der Katze erkennen. Den Entwurf finde ich herrlich auch und gerade weil die Katze nicht so perfekt ist und Bulldoggenbeine hat.

Angeregt wurde ich von einer Meisterin. Olga Linville hat mit ihrer Armorkatze mein Herz bewegt. Sie ist zum Piepen. Eine Olga Linville-Website müsste man dann mit Olga Linville klären. Würde mich in jedem Fall reizen, hier mit Künstlern zu arbeiten. *seufz* Sollte vielleicht mal fragen.

Denkbar wäre es auch hier für ein solches Template die Kinderbilder der Kinder der Tagesmutter zu verwenden.

Zur Technik: Die grafiken des Rahmens um die Inhalte sind bereits so anglegt, dass diese sich dem Umgang des Inhaltes in der Länge anpassen. Die Navigation könnte sich als schwieriger erweisen. Eventuell müsste man hier die zweite Ebene in den Inhalt an die obere Kante nehmen. Ich würde jedoch zunächst in jedem Fall versuchen, ob ich nicht auch die Navigation gedehnt bekomme. Beim Zeichnen habe ich darauf geachtet, dass meine Hand, bzw. mein kleiner Finger wie eine Zeichenschine an der Blockkante entlangfuhr. Damit habe ich die leicht krackelige Linie einer relativ freien Handbewegung, die Kachel-Bedingungen erfüllt.

Achja und Editland-technisch (CMS-mäßig) gedacht, gibt es in diesem Entwurf überhaupt keine Probleme.

Die Arbeit hat den Flair eines japanischen Holzdruckes. Schlicht und einfach. Die Illustration steuerte Franz Marc (1880-1916) bei, von dem ich ein Tempera-Bild erst mit Strg-U desaturierte, dann die Kontraste erhöhte und die Helligkeit nachjustierte so dass es eine schöne Photoshop-Werkzeugspitze (Brushes) ergab. Wenn ich auch hier in Editland denke, dann bedarf es ein ganz klein wenig Schulung bezüglich der javscript gesteuerten Mousetooltitles und in dem Design ist noch nicht definiert, wie der aktive Link und das Mouse-Over aussehen könnte. Derlei Dinge kommen bei mir oft erst mir der Umsetzung. Gesperrt wollte ich das in keinem Fall machen. Das wäre definitiv zu anfällig für eine Springbock-Navigations, bei der die Links wild hin und her springen und einen Meschugge machen.

Kein geringerer als Giovanni Battista Tiepolo (1696-1770) stiftete das Material zur Dekoration der Website. Der Entwurf verwendet sieben Grafiken für das Basisdesign, zwei gekachelt, der Rest positioniert, wobei ich noch am überlegen bin in wie weit ich die Sepiamotive ‘relative’ oder besser ‘absolute’ positioniere und prozentual oder über feste Pixelwerte einbinde und ob ich den Rechten oder den Linken Rand als Ausgangspunkt nehme. Eines ist sicher, das Haus wird sich in einer 800-Umgebung in irgendeiner Form bewegen müssen. Einfach nur die Navigation mit Hintergrund darüberschieben wäre die Alternative, aber so recht will mir diese billige Lösung nicht gefallen. Ahnliches gilt für den Busch unten rechts. Ebenso fände ich es schade, würde die Navigation in der großen Auflösung immer noch am rechten Rand kleben. Nur eine Dekografik hat schon einen festen Platz die Papierverschmutzung in der rechten unteren Ecke.

Die Navigation ist in Editland so noch nicht vorhanden und hier wird noch ein Plugin programmiert werden, wobei ich schon die Basis dafür geschaffen habe. Es könnte genau diese Notwendigkeit der Pluginprogrammierung sein, die mich dann letztendlich erst in Bewegung versetzt, wenn zum Entwurf sich ein Kunde meldet (öhm und natürlich kann so etwas auch Editland-Unabhängig umgesetzt werden.). Oder aber sich die “wer steht bei wem in der Pflicht”-Situation wieder verkehrt, gell … erst aber werde ich wohl hierfür noch ein paar grafische Designs für meine Lieblingsprogrammiererin entwerfen müssen.

Text im Entwurf stammt von “Im Schatten der Titanen, Erinnerungen an Baronin Jenny von Gustedt” der Authorin Lily Braun (1865-1916)

Erst war da der Schmerzteufel der Gicht in der kolorierten Radierung von James Wouski Gillroy (1757-1815), die wie ich fand gut in eine Website passte und so Schnitt ich mir die Figur aus und noch ein zwei andere aus anderen Werken und es schien schon fast wieder so ein Monty-Pythonesqu’sche Kreation zu werden, doch alles passte nicht so recht. Ein paar verteilte Figürchen machen eben noch keinen Website-Entwurf. Also via Stichworte “kolorierte Radierungen” nach weiteren geeigneten Motiven gesucht und da tauchte Rudolf Wilke auf, der ein Jahrhundert später lebte, von 1873-1908. Sicherlich wird das Kacheln noch etwas Arbeit machen, sowohl für den Hintergrund, als auch für die Ränder weißen Texthintergrundes, nichtds desto trotz. Ich bin zufrieden.

Man könnte noch über die Schrift debattieren. Eine Monospace wie Courier könnte sich in diesem Website-Entwurf nicht schlecht machen.

Die Blüten stammen aus einer alten gemeinfreien botanischen Zeichnung die ich bei commons.wikipedia.org oder deren Originalquelle. Angaben zum Zeichner waren weder da noch dort zu finden.

Kaum hatte ich den Entwurf hier abgespeichert und blätterte vor und zurück in den derzeit durch Thickbox zusammengefassten Website-Entwürfe, da dachte ich: “Es ist das Blatt. Das Blatt nimm nach unten zu den Blüten oder ganz weg.” Doch das ist es nicht. nimmt man das Blatt weg, oder arrangiert es um (siehe rechts), dann wird es zu profan. Dann fehlt dem Strauß etwas Neckisches. Es wird zu Harmonisch zu glatt und künstlich, zwanghaft arrangiert. Das Baltt bleibt wie es ist, ohne Kontrapunkt und Komma oder Aber. Es ist gut so.

Blogparade Blumenstrauß neu arrangieren

Wer es gerne selbst probieren möchte, hier ist die Originaldatei aus dem die Blüten stammen. Rechter Mausklick auf das kleine Vorschaubild und Ziel speichern unter.

Freistellen funktioniert sehr gut mit dem folgenden Verfahren:

1. Selektion grob um die Blüte ohne benachbarte Blüten einzuschließen
2. Zauberstab (Tolerance 35, Anti-Alias off, Contiguous on, All Layers off) mit alt gehalten weiße Flächen um die Blüte deselektieren.
3. Quickmaskmode aktivieren und die ausgebüchsten Pixel hinzunehmen oder entfernen, je nach dem. Und wieder in den Normalmodus wechslen
4. STRG+C in den Zwischenspeicher übernehmen und STRG+V in das Fenster für das digitale Blumengebinde übernehmen

Die Blogparade Stichwort “Blumenstrauss” sollte ein Zeitfenster haben … sagen wir bis Valentinstag: 14. Februar 2008 und dann wird hier zwar nicht dicht gemacht, aber meine Aufmerksamkeit wird rapide nachlassen.

PS: Natürlich ist jede Grafiksoftware zulässig, ob GIMP, PaintshopPro, Photopaint, Fireworks, PhotoImpact, oder was auch immer … Das Ergebnis ist ein GIF, JPG oder PNG webfähig eben.

Wer sich die Arbeiten von George Cruikshank (Arien schmetternder Jüngling auf dem Canapee) ansieht, wird unmittelbar an Monty Python erinnert. Die fliegenden Ausschnitte, geköpften Figuren, all das scheinen von Radierungen des 18. und 19. Jahrhunderts zu stammen, gemischt mit purer Popart der 60er. Dieser Entwurf ist eine Hommage an Python.

Die Blüten und die Katze sind aus nicht ganz astreinen Quellen und ich wage diese nur Aufgrund der starken Bearbeitung öffentlich zu zeigen. Dait ist das ein Entwurf, den ich so nicht verkaufen werde. Es sollte allerdings nicht so kompliziert sein, adequaten Ersatz für Blüte und Katze zu finden, sollte jemand Interesse zeigen. Die Wäsche stammt aus einem Bild von Auguste Macke. (Der Text über die Pythons stammt aus der Wikipedia)

Die größte Schwierigkeit bei der Umsetzung wird die Palme machen., da diese in einer leichten Schräge ist. So wie sie nun über die gesammte Höhe sich spannt, fände ich es auch bei höheren Auflösungen am besten. Die Rippen der Palme biegen hier vermutlich die beste Lösung und um eine geraden Baum zu erhalten bei dem Palmwedel erhalten bleiben und auch der Eindruck als sei immer noch eine gewisse Schräge vorhanden, zerlegt man die Palme und setzt sie wieder zusammen. Auch ist dieses Layout ein Fall von Position Fixed, zumindest was die Palme anbelangt. Je nach Umfang der Site könnte man auch den Hotai und die Navigation fixieren, doch dann darf diese Navigation keinen Link mehr dazubekommen, sonst verschwinden diese in den kleinen Monitoren. Es dürfte schon mit dieser Zahl Links kritisch werden. Mal sehen. auch dieses Layout geht in meinen Pool freier Arbeiten zum Umsetzen für irgendwann. Und logisch, wie bei allen nicht umgesetzten Layouts, kann man mich engagieren, dass ich das vorziehe und sogar exklusiv nur für den Besteller mache. Allerdings bei den Motiven selbst wird man auf Exklusivität verzichten müssen. Der Zug ist bereits vor rund 100 Jahren abgefahren.

Auch wenn das Design auf den Ersten Blick nach festen Größen aussieht, so muss das nicht sein. Allerdings erfordert der scheckige Rahmen ein wenig Trick17 mit den Nahtstellen, wo Ecken und Mittelstücke auf einander treffen, damit hier nicht die Kachelschnittstellen und die Segmentschnittstellen sichtbar werden. Kachelschnittstellen ist mit dem Offsetfilter schnell gelöst für die Segementschnittstellen stellt man den Radiergummi auf Brusch mit einer sehr weichen Werkzeugspitze und dem Ebenen Modus Dissolve und schon hat man einen grießeligen Übergang der eine Schnittstelle nicht erkennen lässt, egal wie Breit gerade das Fenster eingestellt ist und ob damit heller Abschnitt auf dunkleren Abschnitt trifft.

Ich daddel also mit den Kacheln so rum in dem Pixelschupser-Werkzeug von Adobe und das kam dabei dann raus:

Nachdem ich in keinem meiner Weblog ein selbstentwickeltes Template verwende, stelle ich diesen Entwurf unter die Creative Commons by 2.0. Und wie mit allen den Photoshop-Entwürfen, ist die Umsetzung nicht ausgeschlossen aber dann doch recht unsicher. Wenn und sobald ich es umsetze, wird es einen Beitrag geben und das Template für Wordpress zum Download bereit sein. Schaumermal

Dieser rote Herbst-Calvill sticht unter den Apfeln heraus. Als ich das Bild sah, war ich von dem Apfel begeistert. Nun sollte ich irgendwann vermutlich noch herausfinden, ob er auch schmeckt.

Text im Bild zur Pomologie stammt von de.wikipedia.org.