Sterne 2.0 vom Himmel holen


Geschrieben am Freitag, 25. Januar 2008 von Henning Franke (6 Antworten)

Genau wie ein sich spiegelnder Schriftzug oder knallige Farbverläufe, gehören auch die folgenden Sternbuttons zu einer der zahlreichen Erscheinungen in Web 2.0-Layouts. Verwendungszwecke gibt es viele: Ob als simpler Eyecatcher, als Teasergrafik oder einfach nur, weil es fast schon zur Standardausstattung einer Web 2.0-Seite gehört.

Aus diesem Grund soll auch hier im Neukunden-Magnet eine entsprechende Anleitung nicht fehlen:

stern1.jpg 

Wir beginnen mit einem Rechteck auf einer neue Ebene und duplizieren die Ebene anschließend (Fig. 1). Die neue Ebene dann num 45° drehen (Fig. 2). Das Rechteck sollte insgesamt etwas größer sein, als die gewünschte Endgröße des Buttons, da die Kanten durch die Drehung etwas unscharf werden. Durch späteres Runterskalieren der Grafik können wir das verhindern.

stern2.jpg

Nach dem drehen des Rechtecks fügen Sie beide Ebenen zusammen (markieren & Strg+E) und wiederholen danach den ersten Schritt. Diesmal mit einer Drehung um ca. 22°. Das Ergebnis sollte ungefähr wie das obere Bild aussehen. Anschließend verkleinern wir den Stern auf die gewünschte Größe.

stern3.jpg

Die Grundform hätten wir – was fehlt ist der saubere, glänzende Web 2.0 Look. Wir beginnen mit einem Hell-Dunkel Verlauf der Farbe unserer Wahl und wenden anschließend ein paar Ebeneneffekte an. Zuerst einen leichten Schlagschatten nach außen und anschließend einen “Schein nach innen”. Im Eigenschaftenfenster sollte hierbei aufgrund der vielen spitzen Kanten”Präzise” als Technik eingestellt werden.

stern4.jpg

Damit der Stern seinen Glanz erhält, müssen wir zuerst die Ebenentransparenz des Sterns selektieren (Rechtsklick auf die entsprechende Ebene > “Pixel auswählen”). Die Auswahl dann um ca. 5 Pixel verkleinern, je nach Größe des Sterns. Wie benötigen jetzt zwei Verläufe (Weiß > Transparent), einmal an der Oberseite des Sterns, einmal an der Unterseite. Anschließend setzen Sie die Transparenz des oberen Verlaufs etwas herab und wechseln den Ebenenmodus der unteren Verlaufsebene zu “Ineinanderkopieren”.

stern5.jpg

Den letzten Feinschliff erhalten wir, indem wir (ungefähr) die obere Hälfte des Sterns mit dem Ellipsenwerkzeug selektieren und “Helligkeit & Kontrast” soweit erhöhen, bis sich der selektierte Teil deutlich vom unteren Teil abhebt.

stern6.jpg

Das Endergebnis mit Text und leicht schräggestellt. Eigentlich wäre ja “BETA” der passendere Text gewesen, aber das ist dann schon wieder zuviel des Guten… ;-)

Bei Fragen wie immer einfach die Kommentarfunktion benutzen oder per Mail an henning.franke( a t )thoxan( p u n k t )com.

Einen Kommentar zum Beitrag schreiben!
Verwandte Artikel:

Die Anziehungskraft von Aqua Buttons


Geschrieben am Donnerstag, 11. Oktober 2007 von Henning Franke (1 Antwort)

aqua.jpg

Die so genannten “Aqua Buttons” üben im Webdesign eine besondere Anziehungskraft aus. Es kursieren im Internet viele Tutorials, wie diese Button zu gestalten sind. Oft sind diese aber viel zu kompliziert und umständlich erklärt und die Ergebnisse variieren sehr stark. Deshalb stelle ich hier eine ganz einfache Variante vor – kurz und knapp erklärt, ohne viel drumherum und zum späteren Nachschlagen:

12.jpg

Wir fangen mit einem einfachen blauen Verlauf an (Himmelblau -> Dunkelblau)

21.jpg

31.jpg

Als nächstes die Ebenenoptionen- / Effekte so einstellen, dass wir einen leichten dunkelblauen “Schein nach innen” haben. Zusätzlich (Bild 2) einen “Schein nach außen” anwenden um den Button vom Hintergrund optisch abzuheben.

41.jpg

Die Deckkraft der Verlaufsebene etwas runtersetzen, auf ca. 80%. Die Ebenentransparenz selektieren und anschließend die Auswahl verkleinern. Einen weiteren Verlauf (auf einer neuen Ebene, Weiß -> Transparent) von unten zur Mitte ziehen. Die neue Ebene auf “Überlagern” stellen.

51.jpg

Das gleiche Spiel noch einmal für den oberen Teil, wieder auf einer neuen Ebene. Den Verlauf diesmal bis fast nach unten ziehen (etwas 3/4 des Buttons) und anschließend den unteren Teil des Verlaufs (bis zur Mitte des Buttons) entfernen um eine scharfe Kante zu erhalten.

6.jpg

Wahlweise oben und unten noch ca. 2-3px Breite Linien einfügen.

Wie unschwer zu erkennen ist, besteht solch ein Aqua Button aus nicht viel mehr als ein paar Verläufen und ein wenig Schatten. Fast alles lässt sich mit Ebeneneffekten einstellen und nichts muss wirklich “per Hand” gemacht werden. Und obwohl es mittlerweile sehr, sehr viele Dinge in diesem Stil gibt – schlecht sehen sie trotzdem noch nicht aus.

Wer möchte, kann sich hier die .PSD Datei herunterladen.

Einen Kommentar zum Beitrag schreiben!
Verwandte Artikel:

Bewegung ins Spiel bringen


Geschrieben am Montag, 08. Oktober 2007 von Henning Franke (3 Antworten)

Animierte Banner

Man begegnet ihnen tagtäglich im Internet. Früher fast überall und (zum erschrecken der User) auch auf privaten Internetseiten ohne Rücksicht auf Verluste eingesetzt, beschränken sich diese bunten, blinkenden Grafiken heute meist auf den Bereich Werbung. Aus aktuellem Anlass deshalb ein paar Tipps & Tricks rund um das erstellen von animierten Werbebannern:

Was wir benötigt, wo fängt man an?

Zum erstellen animierter Grafiken gibt es im Internet ausreichend Tools – sowohl kostenfrei als auch kostenpflichtig. Viele dieser Programme – und deshalb möchte ich auch ungern welche aufzählen – produzieren weitgehend einheitliche, unschöne Ergebnisse. Vorgefertige Filter und Effekte lassen diese Grafiken dann später in der Masse untergehen und wirken unprofessionell.

Aus diesem Grund beschränken wir uns auf das wesentliche: Ein Programm / Tool, dass es uns ermöglicht vorgefertigte Bilder aneinanderzureihen – ohne Effekthascherei, fertige Animations-Templates oder ähnliches. Schließlich soll ja die eigene Kreativität nicht in den Hintergrund rücken. Das alles bietet, völlig kostenlos und unkompliziert, der Microsoft GIF Animator. Sicher für einige noch ein Tool aus der “Internetsteinzeit”, aber es erfüllt seinen Zweck.

Bedienungshinweise zum Programm finden sich auch auf der oben genannten Webseite, ich werde daher hier nicht näher drauf eingehen.

Grundlagen

  1. Auf möglichst wenige Frames (Einzelbilder) beschränken. So wird die Dateigröße im Rahmen gehalten (Siehe auch Punkt 4).
  2. Möglichst keine flackernden, grellen und schnellen Farbwechsel – das irritiert nur und wirkt unprofessionell.
  3. Bei wechselnden Bildern die aber keine flüssige Animation darstellen sollen, sollte man sich ungefährt bei 300ms Anzeigedauer pro Bild bewegen. So können alle wichtigen Informationen vom Benutzer erfasst werden.
  4. Die Dateigröße sollte wenn möglich bei 20kb bis 30kb liegen - wobei dies in Zeiten von DSL und traffic-lastigen Flashbannern auch eher nebensächlich ist / wird.

Es ist generell immer besser einen schönen / etwas schlichteren Werbebanner mit dezenten Animationen zu haben, als einen quitsch-bunten, grellen und blinkenden Banner. Letzterer wird zwar vielleicht eher wahrgenommen, dann aber sofort unterbewusst als billig oder störend abgestempelt – und bestimmt nicht angeklickt!

Einen Kommentar zum Beitrag schreiben!
Verwandte Artikel:

Bildbearbeitung in schwarz-weiß


Geschrieben am Mittwoch, 03. Oktober 2007 von Henning Franke (2 Antworten)

Bilder richtig in S/W konvertieren

Bilder bzw. Fotos in Schwarz/Weiß zu konvertieren, hört sich einfach an – besonderes wenn man Photoshop zur Verfügung hat. Ist es eigentlich auch, nur die Ergebnisse können sehr unterschiedlich sein.

Ausgangsfoto

Aus diesem Bild soll ein S/W-Bild werden. Die wahrscheinlich gebräuchlichste Methode ist es, über die entsprechenden Regler (oder direkt den Menüpunkt “Sättigung verringern”) dem Bild einfach die Farbe zu entziehen:

Sättigung verringert

Wie man unschwer erkennen kann, funktioniert diese Methode auch – das Bild ist jetzt Schwarz / Weiß bzw. in Graustufen. Was einem aber auf den ersten Blick vielleicht nicht direkt auffällt, ist, dass die Farbtiefe bei dieser Umwandlungsmethode verloren geht. Das ganze ist gut am oberen RGB-Farbstreifen zu sehen. Rot, Grün und Blau werden zu einem grauen Einheitsbrei.

Kanalmixer

Um die Farbtiefe eines Fotos zu erhalten und viel mehr Flexibilität zu haben, was Helligkeit und Kontrast bei der Umwandlung angeht, bietet Photoshop mit dem “Kanalmixer” (Kästchen “Monochrom” aktivieren) die entsprechende Lösung. Die verschiedenen Farbkanäle (RGB) lassen sich hier einzeln und entsprechend dem gewünschten Ergebnis einstellen. Auch hier wird durch den oberen RGB-Farbstreifen wieder gut deutlich, dass sich die einzelnen Kanäle jetzt deutlich (je nach Einstellung) voneinander abheben.

Ergebnis

Die beiden Ergebnisse im Vergleich. (Zum Vergrößern bitte klicken!)

Der Zeitaufwand beider Methoden ist so gering, dass er als Entscheidungskriterium nicht berückstichtig werden muss. Das Benutzen des Kanalmixers bietet jedoch weitaus mehr Einstellungsmöglichkeiten, ermöglicht das Erhalten der Farbtiefe eines Fotos und erzielt mit ein bisschen Übung wirklich schöne Ergebnisse.

Einen Kommentar zum Beitrag schreiben!
Verwandte Artikel:

Bildbearbeitung Teil 2 – Bildgröße


Geschrieben am Mittwoch, 05. September 2007 von Henning Franke Kommentare deaktiviert

Selbstgeschossene Fotos oder Fotos die von Kunden geliefert wurden lassen sich nicht immer auf direktem Wege in Webseiten- oder Flyerlayouts einbinden. Oft sind die Bilder etwas verwackelt, nicht gerade aufgenommen oder haben schlicht und einfach das falsche Format.

Aus aktuellem Anlass deshalb diese kleine Anleitung, wie man ein etwas schräg aufgenommenes und zu kurzes Foto in die richtige Form bringt:

BB Teil 2 - Bildgröße - Beispielfoto

Als erstes richten wir das Foto richtig aus – das Foto soll später als Headerbild in eine Webseite integriert werden. Es muss also horizontal gerade ausgerichtet werden. Ohne ein Stativ bei der Aufnahme und bei unebenem Boden ist sowas natürlich schwer hinzubekommen, deshalb müssen wir mit Photoshop nachhelfen.

BB Teil 2 - Bildgröße - Beispielfoto

Dazu ziehen wir uns eine horizontale Hilfslinie (rot) und drehen das Foto – bis es entsprechend passt. Dieser Schritt und alle folgenden sollten noch mit der originalen (hohen Auflösung) des Fotos gemacht werden. Wird das Foto dann später auf die (z. B. für’s Web) passende größe runterskaliert verschwinden kleine Ungereimtheiten automatisch.

BB Teil 2 - Bildgröße - Beispielfoto

Um das Foto jetzt künstlich zu verlängern suchen wir uns eine Stelle die sich leicht wiederholen lässt (rot umrandet). Diese Stelle wird dann beliebig oft kopiert und entsprechend wieder ans Ende des Bildes angesetzt. Wichtig: nicht ein einzelnes Stück skalieren, sondern nur kopieren und wieder einfügen.

BB Teil 2 - Bildgröße - Beispielfoto

Verlängert haben wir das Foto jetzt. Wie man sieht sind die blaue Schriftleiste oben und der Boden etwas unansehnlich geworden. Deshalb muss an diesen Stellen noch etwas nachgeholfen werden.

 BB Teil 2 - Bildgröße - Beispielfoto

Den Boden (bzw. die Bodentextur) kopieren wir von einer freien Stelle aus dem Foto und fügen ihn über unserem künstlich in die länge gezogenen Boden wieder ein. Die Kanten mit Hilfe des Radiergummis ausblenden lassen.

BB Teil 2 - Bildgröße - Beispielfoto

Als letztes widmen wir uns noch der blauen Leiste oben im Bild. Einfach den Farbwert mit der Pipette aus dem Foto holen und einen neuen Balken drüber legen. Mit der passenden Schrift (dabei muss man evtl. etwas rumprobieren) bauen wir dann das ursprüngliche Foto wieder nach.

Bei Rückfragen stehe ich wie immer gerne zur Verfügung – einfach melden unter henning (punkt) franke (at) thoxan (punkt) com.

Kommentare deaktiviert
Verwandte Artikel:
Kommentare deaktiviert Design Gestaltung

Fotos aufwerten leicht gemacht


Geschrieben am Freitag, 17. August 2007 von Henning Franke Kommentare deaktiviert

Viele Fotos, die man kostenlos im Internet findet, lassen von der Qualität her oft zu Wünschen übrig. Wer da nicht zu kostenpflichtigen Bilddatenbanken greift, wird seine Fotos oft nachbearbeiten bzw. aufbessern müssen.

Natürlich gibt es da in Photoshop vorgefertigte Filter, wie “Auto-Kontrast” oder “Auto-Farbe” – die helfen zwar in gewissem Maße, es geht aber besser. Unser Ausgangsfoto haben wir von der kostenlosen Datenbank sxc.hu, legen wir los:

Beispielfoto

Das wichtigste zuerst: Farbwerte anpassen. Über den Farbbalance-Regler können die entsprechenden Werte beliebig und der Stimmung des Bildes entsprechend angepasst werden. Bei einem Wüstenbild, wie wir es hier haben sind das natürlich die Rot- bzw. Gelbtöne, die hervorgehoben werden müssen. Das verstärkt den Eindruck von Hitze und Trockenheit und verleiht dem Bild schon eine ganz andere Wirkung.

Beispielfoto

Der folgende Tipp eignet sich besonders gut für unscharfe, pixelige Fotos oder solche die zu stark komprimiert wurden. Man kopiert einfach das komplette Foto auf eine neue Ebene, wendet den Weichzeichner an (die Stärke hierbei hängt immer vom Foto / den Details ab, sollte aber möglichst gering gehalten werden) und passt anschließend die Deckkraft der weichgezeichneten Ebene entsprechend an. Der Effekt den das Ganze hat ist folgender: Die weichgezeichnete (und folglich nicht mehr pixelige) Ebene legt sich über das eigentliche Foto und glättet so unschöne Details, ohne dabei aber die Konturen verschwinden zu lassen.

Ich werde hier nach und nach noch weitere Effekte vorstellen. Gerne könnt Ihr mir “Problemfälle” per Email zusenden: Henning(Punkt)Franke(at)Thoxan(Punkt)com.

Kommentare deaktiviert
Verwandte Artikel:
Kommentare deaktiviert Design Gestaltung

Alles im grünen Bereich?


Geschrieben am Montag, 13. August 2007 von Henning Franke (1 Antwort)

Wernesgrüner

Dass der Webauftritt von (sehr) kleinen Unternehmen oft zu Wünschen übrig lässt, ist bekannt. Vielleicht fehlt hier und da das nötige Kleingeld für einen professionellen Internetauftritt oder man hat sich (leider) noch nicht wirklich mit dem Thema beschäftigt. Allerdings scheinen auch größere Unternehmen vereinzelt nicht sehr viel Wert auf ihre Internetpräsenz zu legen. Als negatives Beispiel ist mir die “Wernesgrüner Brauerei” aufgefallen. Nicht die größte Brauerei, aber eine bekannte – und laut Wikipedia auch Hauptsponsor eines Fußballvereins. Warum also spart man dann offentsichtlich an der Internsetseite?

Besucht man die Webseite, bekommt man als erstes den Jingle der Brauerei zu hören. Ist ja vielleicht ganz nett, machen andere auch - aber wo ist der Aus-Knopf? Ich konnte ihn nirgends finden und ich denke, es war auch nie einer vorgesehen. Denn dann würde man ja auch noch die vertonten Seitenwechsel verpassen – jedesmal wenn man einen Menüpunkt anklickt.

Also, Lautsprecher aus und weitersurfen. Obwohl – noch nicht ganz; Zuerst muss das Menü per Mausklick aktiviert werden (zumindest im Internet Explorer) und erst dann kann es weitergehen. Die Navigation ist nämlich fortschrittlich in Flash umgesetzt. Ist ja auch unbabdingbar, bei den aufwendigen Rollover-Effekten. Also weiter: Menü aktiviert, Menüpunkt ausgewählt, Seite gewecheselt, Jingle angehört (die Lautsprecher sind ja aus) – das ist sie, die nächste Seite. Mal sehen, was da so kommt.

Ein großes Foto, wenig Text. Nichts was einen wirklich animieren würde, länger auf der Seite zu verweilen. Länger verweilen? Das mache ich auch nicht. Die nächsten Seiten die ich zusehen bekomme unterscheiden sich nicht wirklich von der ersten. Ein Foto, ein bisschen Text – mal mehr, mal weniger gut formatiert. Nichts besonderes also, was mich auf der Seite hält. Außerdem möchte ich nicht noch mehr Jingles hören, wenn ich jetzt weitersurfe.

Ich schließe also mein Browserfenster wieder und behalte eine kleine Seite mit übergroßen abgerundeten Ecken, viel Sound, viel Grün und wenig Text im Gedächtnis. Ob ich nochmal wiederkomme, weiß ich nicht. Jetzt bin ich nämlich erstmal auf der Seite von Beck’s unterwegs. Die ist genauso grün, dort gibts auch Ton – aber die macht auch mehr Spaß und ist interaktiver.

Wie war noch gleich der Slogan von Wernesgrüner? Alles im grünen Bereich? Zumindest im Internet noch nicht.

Einen Kommentar zum Beitrag schreiben!
Verwandte Artikel:

Virales Marketing weckt Lebensgeister


Geschrieben am Donnerstag, 09. August 2007 von Henning Franke (5 Antworten)

Virales Marketing

Virales Marketing ist mittlerweile fast jedem ein Begriff. Eine gut durchdachte Kampagne hat wahrscheinlich einen Werbeeffekt, mit dem herkömmliche Methoden nur schwer – wenn überhaupt – mithalten können.

Was aber, wenn das Ganze nach hinten losgeht? Der Werbeclip verbreitet sich zwar wie gewollt, hat aber einen ganz anderen Effekt und zieht ein negatives Image nach sich. Einmal in Gang gesetzt, lässt sich so eine Kampagne nicht mehr stoppen.

Über den Ursprung von viralem Marketing, den eben angesprochenen Flops und extrem erfolgreiche Kampagnen, wie die des K-Fee Herstellers, geht es in folgendem Beitrag von 3Sat, den ich Euch nicht vorenthalten möchte. Mit etwas über sieben Minuten nicht wirklich lang, bietet er aber auf jedenfall grundlegende und interessante Informationen rund um das Thema.

Einen Kommentar zum Beitrag schreiben!
Verwandte Artikel:

Neues Styling für altes Logo


Geschrieben am Freitag, 20. Juli 2007 von Henning Franke (2 Antworten)

Gerade durch den Web 2.0-Hype sind moderne, auffallende und vor allem stylische Logos immer mehr in den Vordergrund gerückt. Klassiche und altbackene Logos wirken deshalb noch trister als vorher. Um das eigene Logo aufzuwerten, muss man aber nicht direkt seine komplette CI über Bord werfen. Mit ein paar einfachen Handgriffen lässt sich jedes Logo modernisieren.

Die folgenden kleinen Änderungen dauern nur wenige Minuten, haben dafür aber einen enormen Effekt. Hier und da ein paar Verläufe, etwas Schatten und unser verwendetes Logo wirkt gleich ganz anders. Das ganze an einem einfachen Beispiel erklärt:

logo_1.jpg

Bild A zeigt unser Ausgangslogo, bei Schritt B wurde ein leichter Verlauf in ein dunkleres Blau hinzugefügt, sowie ein weiterer Verlauf von oben (weiß) nach unten (transparent). Bild C zeigt das fertig aufgefrischte Logo. Zusätzliche Änderungen in diesem Schritt sind ein Verlauf von unten (hellblau) zur Mitte (transparent) und der weiße Bogen an der Oberseite. Der dezente Schatten ist nicht zwingend nötig, unterstreicht aber zusätzlich den plastischen Look des Logos.

logo_2.jpg

Ein aktuelles Beispiel einer solchen Modernisierung aus der Praxis ist die WB Bau und Immobilien GmbH, deren Logo wir bei der Einrichtung der neuen Internetseite entsprechend aufgemöbelt haben.

Einen Kommentar zum Beitrag schreiben!
Verwandte Artikel: