Templaterie Blog

Smashingmagazine stellt Websites vor, die Handzeichnungen für Webdesign-Elemente verwenden. Hierbei handelt es sich überwiegend um Flashsites. Und zugegeben die Zeichnungen sind schön, es macht Spaß die Seiten abzuklappern. Mel Kadel zeichnet herrlich (übrigens keine Flashsite, sonder iFrame und Javascript). Auch (diesmal Flashsite) Heather Sloane macht Spass. Preise für gutes Webdesign habe ich bisher aber noch nicht gesehen (ich habe nicht alle angesehen, manche Vorschau reizt mich schlicht nicht). Gute Zeichner sind nicht notwendigerweise gute Webdesigner. In meinem persönlich favorisierten Fenster 1280×1024 begeisterte mich das Kontaktformular von Christian Sparrow:

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, (more…)

Filed under: Design, Webtechniken
No Comments

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

Filed under: Design, Tools, Tutorials
No Comments

Mathew James Taylor zählt zu den Predigern des all liquid und hat einen Beitrag herausgebracht, wie er meint, dass man A List Apart verbessern sollte. Doch das Mockup ist eine klare Verschlechterung des Designs von A list apart. Mathew James Taylor berücksichtigt nicht, dass es Menschen gibt, die auch bei hohen Auflösungen mit vollem Fenster surfen und die Zeilenlänge dann die Lesbarkeit erheblich beeinträchtigen.

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.

Filed under: Design, Projektplanung
No Comments

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:

Filed under: Design
No Comments

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.

Filed under: Design
No Comments

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.

Filed under: Design
No Comments

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)

Filed under: Design
3 Comments

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.

Filed under: Design
No Comments

Es fing alles damit an, dass ich die arbeiten von Dr. Seuss, Kinderbuch-Sachen und seine politischen Cartoons ein wenig durchstöberte und Lust bekam ein wenig Kontrastreich und bunt zu werden und so entstand Stars &amp, Stripes mit Fingerzeig:

Filed under: Design
No Comments

Bei diesem Entwurf habe ich mich als Floristin betätigt nd vollkommen unterschätzt wie lange man an einem Blumenarrangement arbeitet. Noch immer habe ich das Gefühl es ginge noch besser, doch hat mich einst ein Profi, als ich noch in der “Ausbildung” war einmal gestoppt, als mein kleiner Ehrgeiz an der Position eines Clipart in der Vereinszeitung schob und schob und schob und schob, vor und zurück, nach rechts, nach links, zurück, links, vor … was er sagte, ist mir in Erinnerung geblieben … das heißt nicht den Wortlaut, eher Tonfall und sein Einwand bezüglich Sinnhaftigkeit einer solchen exzessiven Pixelschupserei. — Irgendwann muss dann einfach gut sein.

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.

Filed under: Design
No Comments