Pünktlich zum Osterfest präsentiert Frank Herold mit seinen Jungs mit seiner Crew die wohl schickste Casting-Show für Nerds und Geeks: marketing-blog.biz, das Besserwerberblog, sucht zum zweiten Mal Deutschlands schönstes Blog-Logo. Bereits im vergangenen Jahr wurden die besten Logos und Header aus rund 150 Einsendungen gewählt. Nun läutet das Besserwerberblog mit der Aktion “MBBDBWBSZZMDSBL” die nächste Runde ein. Und dieses Mal wird alles natürlich noch viel bunter, noch viel begeisternder und noch viel besser:

Durch unsere neue Jury sowie das neue Auswertverfahren lohnt sich auch das Mitmachen auch für die, die nicht über einen Web 2.0-Nerds-Only-Freundeskreis verfügen oder in der Vergangenheit weniger erfolgreich abschnitten. (…) …warten wir dieses Jahr wieder mit einer Schar schöner Präsente auf, u.a.: Schokoladenbrunnen, Eventim-Konzertgutscheine, Amazon-Einkaufsgutscheine und was sonst noch zusammenkommt.

Natürlich ist auch das Neukunden-Magnet Weblog wieder mit dabei und stellt sich der Wahl zum Blogo 2008. Frank hat mich gebeten, ihm ein paar Worte zu unserem Logo zu mailen, die Licht ins Dunkel seiner Entstehungsgeschichte bringen sollen. Nun denn:

Ein Magnet ist ein Magnet ist ein Magnet.

Dem ist nichts hinzuzufügen.

• Mit längstem Acronym zum Superstar
• Los! Auf, auf! Wählt mein Blogo!
• Logo + Banner für 3. Business-Blog-Karneval
• Einladung zum 3. Business-Blog-Karneval
• Erfolgsfaktor Kontrollverlust

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:

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.

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.

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.

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”.

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.

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.

• Backstage - Hinter den Kulissen
• Logo + Banner für 3. Business-Blog-Karneval
• Aufnahmen im Filmstudio für Videocast
• Origami für Fortgeschrittene
• Got Problems?

Alles neu macht der November: Seit heute läuft auf dem Neukunden-Magnet Weblog die Wordpress-Version 2.3.1 und auch am Layout haben wir in den vergangenen Wochen kräftig gearbeitet. Dem Layout liegt nun kein Wordpress-Template mehr zu Grunde, sondern es ist komplett eigenständig in unserer Agentur entwickelt worden (Danke, Henning!).

UPDATE: Die Kommentarfunktion hat sich bei der Umstellung auf Wordpress 2.3.1 leider stark erkältet und liegt nun fiebrig im Bett. Deshalb sind derzeit keine Kommentare möglich.  

UPDATE 2: Kommentare haben sich rasch erholt. Bitte schreibt wieder fleißig in den Kommentaren.

Sollte es bei Euch weitere Fehlermeldungen o.ä. geben, schreibt bitte einen Kommentar oder eine kurze Email an Info(at)Neukunden-Magnet(Punkt)de.

• Schulen Sie Ihre Schokoladenseite!
• Gut erholt und mit neuem Look zurück
• Igel-Countdown 32-36 - Content Management Systeme
• Schokoladenseite zeigen!
• Die Weltherrschaft der lila Kuh

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:

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

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.

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.

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.

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.

• Mittagspause in Ostwestfalen-Lippe (OWL)
• Achtung: Countdown für Bürowettbewerb 2008
• Zeigt her Eure Fenster, zeigt her Euer Büro!
• Igel-Countdown 25 - Bilder aussagekräftig betiteln
• Mein Schreiburlaub ist schon wieder fast vorbei

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!

• Thoxan startet Business Newsletter
• Ohrwurm-Marketing steigert den Absatz
• Der Kundennutzen entscheidet
• Wie promote ich eine Blog-Serie?
• Open Source Marketing - Unentdeckte Potenziale für Unternehmen

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.

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:

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.

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.

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.

• Igel-Countdown 25 - Bilder aussagekräftig betiteln
• Blogparade “Dein bestes Selbstportrait”
• Die Anziehungskraft von Aqua Buttons
• Neukunden-Challenge - Tag 05
• Neues Styling für altes Logo

Den folgenden Gastbeitrag habe ich von Alexander Jahn erhalten, der in seinem Farbmodul-Weblog interessante Artikel zum Themengebiet Farbe & Gestaltung veröffentlicht. Der Designer entwickelt Farbkonzepte für Architektur, Innenarchitektur, NonPrint, Print und Internetseiten unter Berücksichtigung von Farbstimmungen, Farbthematiken, Farbwirkungen sowie Farbeigenschaften. Den zweiten Teil dieses Artikels hat Alexander in seinem Weblog veröffentlicht.

Farben haben Charakter. Sie sind prägnante Erkennungsmerkmale und das nicht nur in der Tier- und Pflanzenwelt. In der Unternehmenskommunikation ist die Farbe ein zentrales Bindeglied zwischen Unternehmen und Kunde. Sie trägt maßgeblich zum Image des Unternehmen bei und unterstreicht dessen Kompetenzen, mit denen sich der Kunde bereits im Vorfeld auseinandersetzen muss. Des Weiteren untermauert die Farbe die Firmenphilosophie und die Glaubhaftigkeit der Firma und sollte daher bereits bei Firmengründung mit Bedacht und Feinfühligkeit gewählt werden. Denn Ihr Firmensignet und die dazu gewählte Farbe, bzw. Farbkombination repräsentieren im Geschäftsalltag Sie und Ihr Unternehmen.

Daher sollten Sie einige Punkte genau definieren und in Ihre Überlegungen einfliessen lassen:

1. Wer bin ich?
2. Was biete ich an?
3. Wen will ich erreichen?
4. Wo sind meine Kunden?
5. Wie verkaufe ich mich?

Wenn Sie diese Fragen beantworten, erhalten Sie einen Überblick über den Standpunkt Ihres Unternehmens und Ihre Absichten. Anhand dieser Angaben lässt sich mit Sicherheit sagen, welche Farbe/Farbkombination Ihr Unternehmen am besten repräsentieren wird. Mit der passenden Farbkombination können Sie Ihre Absichten auch noch besser herauskristallisieren, bzw. sich besser im Gedächtnis Ihrer zukünftigen Kunden verankern.

In der Geschäftswelt hat sich eine Farbe besonders etabliert, weil sie Uniformität, Seriosität und Vertrauen vermittelt. Es ist Blau. Keine andere Farbe wird im Business-Sektor öfter verwendet als Blau. Beständigkeit und feste Werte vermittelt diese Farbe weltweit und verkauft sich damit als robuste Konstante. Doch einzig und allein verkörpert Blau noch keine Firmenidentität. Dazu sind einprägsame Farbkombinationen und/oder Logoapplikationen nötig.

Welche Firmen Farbe geschickt inszenieren und zu Werbezwecken nutzen, erfahren Sie im 2. Teil dieses Artikels.

Vielen Dank an Alexander für den interessanten Beitrag. Sehr gerne nehmen wir Artikel von Gastbloggern zu den Themengebieten Neukunden-Gewinnung, Marketing und Neue Medien in dieses Weblog auf. Kurze Email an Info(at)Neukunden-Magnet(Punkt)de genügt!

• Sag zum Abschied leise Servus
• Vielen Dank für die Blumen!
• Podcast: Verkaufen von Mensch zu Mensch
• Die Weltherrschaft der lila Kuh
• Gewinner des Bürowettbewerbs 2008

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:

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.

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.

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.

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.

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.

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.

• Fotos aufwerten leicht gemacht
• Igel-Countdown 25 - Bilder aussagekräftig betiteln
• Unsere Falten in 30 Jahren
• Professionelle Fotos für den ersten Eindruck
• Igel-Countdown 14 - Wer suchet, der findet … - auch Sie?

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:

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.

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.

• Bildbearbeitung Teil 2 - Bildgröße
• Schulen Sie Ihre Schokoladenseite!
• Professionelle Fotos für den ersten Eindruck
• Büro-Wettbewerb 2008: Einsendung 011
• Sterne 2.0 vom Himmel holen