1. Starbucks – Nostalgie, Abenteuer und Romantik

(Fotokredit: pierofix)

Ich gebe es zu, ich liebe Kaffee :-) Daher hat es mich natürlich brennend interessiert, woher das extravagante Logo der beliebtesten Kaffee-Kette der Welt, das Starbucks-Logo eigentlich kommt, und welche Bedeutung und Wirkung das Logo hat.

Der Name Starbucks ist inspiriert von Starbuck, dem kühnen Seefahrer aus dem Roman »Moby Dick«. Damit wollten die Gründer von Starbucks an die alte Kaffeehändler-Kultur anknüpfen, was auch sehr gut passt, denn das erste Starbucks-Kaffee wurde in der Hafengegend von Seattle eröffnet. Ursprünglich war das Logo braun, und nostalgischer gestaltet. Die Figur im Starbucks-Logo mit den zwei Fischflossen ist eine Sirene, ein Fabelwesen aus der griechischen Mythologie. In der ersten Logo-Version waren die Brüste der Sirene und ihr Bauchnabel zu sehen. Später wurden die Brüste durch die offenen Haare der Sirene verdeckt. Du kannst dir das erste Starbucks-Logo auf der Starbucks-Webseite anschauen. Die derzeitige, moderne Version des Logos gibt es seit 1992.

1.1. Nostalgische Symbole und Wappen

Ich finde die Geschichte des Logos sehr interessant, und habe eine Auswahl ähnlicher Symbole zusammen gestellt, die für mich Nostalgie, Abenteuer und Romantik ausstrahlen. Als Formen für Logos im nostalgischen Stil sind Wappen und Embleme sehr geeignet.

1.2. Weitere, kreative Logos im Nostalgia-Stil

2. Amazon.com – Geschwindigkeit, Humor und Zufriedenheit

(Fotokredit: soumit)

Das Logo des weltberühmten Versandhandels Amazon hat eine clevere und humorvolle Doppelbedeutung. Der Pfeil, der Geschwindigkeit aussagt, zeigt von A bis Z. Das bedeutet, Amazon-Kunden können Waren jegliche Art bestellen.Gleichzeitig ist der Pfeil zu einem Lächeln geformt. Ein Symbol für eine clevere Business-Idee und zufriedene Kunden.

Ich finde es sehr spannend, was für eine geniale Wirkung eine eigentlich so simple Idee haben kann. Der Pfeil ist natürlich ein sehr beliebtes Logo-Symbol, der für Dynamik, Geschwindigkeit und Zukunft steht. Bei einem so deutlichem Symbol ist es besonders wichtig, die Logo-Idee kreativ umzusetzen.

2.1. Jede Menge Pfeil-Symbole

2.2. Kreative Logoentwürfe mit Pfeilen

3. Deutsche Bank – Wachstum und Sicherheit

(Fotokredit: Deutsche Bank AG)

Das zeitlose Logo der Deutschen Bank ist ein richtiger Klassiker, und wurde 1974 entworfen. Das Logo-Symbol ist ein Schrägstrich im Quadrat. Der Schrägstrich steht dabei für ständiges Wachstum und eine dynamische Entwicklung. Das umrahmende Quadrat für Sicherheit und ein kontrolliertes Umfeld. Das Logo kann alleine stehen oder mit dem Schriftzug der Deutschen Bank (Schriftart: Univers). Der Schriftzug ist zeitlos und auch auf der Entfernung noch gut lesbar. Mehr über das Logo und seine Geschichte kannst du übrigens auf der Internetseite der deutschen Bank nachlesen.

Geometrische Formen symbolisieren Ordnung, Struktur und Zuverlässigkeit. Sie sind daher ebenfalls beliebte Logo-Symbole.

3.1. Geometrische Formen, Quadrate und Rechtecke

3.2. Kreative, geometrische Logos

4. WWF – Treue und Hilfsbedürftigkeit

(Fotokredit: Stéfan)

Das berühmte Logo der Tierschutzorganisation WWF zeigt das Symbol eines Pandabärs und wurde inspiriert vom Pandabär Chi Chi, der zur Zeit der Logo-Entwicklung im Londoner Zoo lebte. Das Logo besteht fast unverändert seit 1961.

Ein Tier als Logo-Symbol ist sehr beliebt und wird nicht nur bei Organisationen und Firmen, die direkt etwas mit Tieren zu tun haben gerne verwendet. Tiere sind Sympathieträger und strahlen Unschuld, Treue, Hilfsbedürftigkeit, manchmal auch Humor aus.

4.1. Tierformen und Silhouetten

4.2. Jede Menge Logos mit Tieren

5. Apple – Natur versus Technik

(Fotokredit: ping ping)

Das berühmte und von vielen heiß geliebte Apple-Logo symbolisiert den Gegensatz von Technik und Natur. Die erste Version des Apple-Logos war ein Kupferstich-ähnliches, nostalgisches Bild, das Issac Newton unter einem Apfelbaum sitzend zeigt. Die nächste, modernere Logo-Variante war der bunt gestreifte, angebissene Apfel. Das der Apfel angebissen ist, wird als eine Anspielung auf das englische Wort bite (Biss) und die Ähnlichkeit zu Byte interpretiert. Das Apfel-Symbol hat sich seit dieser Zeit kaum noch verändert, seit 1998/99 ist der Apfel aber nur noch einfarbig dargestellt.

Auf Wikipedia kannst du dir die verschiedenen Apple Logo-Varianten anschauen.

Früchte und Pflanzen sind ähnlich wie Tiere ein sehr beliebtes Logo-Symbol. Sie symbolisieren Wachstum, Ausgeglichenheit, Fortschritt und Einklang mit der Natur. Wie beim Apple-Logo werden Natur-Symbole gerne auch im Kontrast zu technischen Themen eingesetzt, wobei der Gegensatz beider Symbole die Wirkung verstärkt.

5.1. Früchte und ihre Formen

5.2. Kreative Logos mit Früchten

6. Nike – Schwung, Geschwindigkeit und Dynamik

(Fotokredit: Daniel Y. Go)

Das Nike-Logo hat ebenfalls eine sehr spannende Geschichte. Es wurde 1971 für gerade mal 35 Dollar von einer Studentin entworfen (die allerdings später von Nike noch etwas besser für ihre Arbeit entlohnt wurde). Heute ist der simple Nike-Haken, auch »Swoosh« genannt sicher eines der berühmtesten Logos der Welt. Die geschwungene, dynamische Form symbolisiert den Flügel der griechischen Siegesgöttin Nike.

Anfangs wurde das seither kaum veränderte dynamische Symbol zusammen mit dem Nike-Schriftzug dargestellt, inzwischen wird der Swoosh alleine dargestellt.

6.1. Formen mit Schwung

Geschwungene Formen werden nicht nur für Logos im Sportbereich sehr gerne verwendet. Geschwungene, einfache Formen symbolisieren Geschwindigkeit, Modernität, Dynamik, Kraft, Sieg und Zukunft.

6.2. Weitere kraftvolle, dynamische Logo-Symbole

Welche Formen und Symbole gefallen dir am besten in Logos? Hast du ein ganz spezielles Lieblings-Logo oder kennst du weitere, kreative Logos, die zu den besprochenen Symbolen passen? Über deine Tipps und dein Feedback freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. So findest du die passende Schrift für dein Logo
2. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
3. 25 köstliche Logo Inspirationen zum Thema Essen
4. 20 grandiose Webseiten-Header, die deine Kreativität beflügeln
5. Typo-Tipps für Webdesigner (Teil 1): Styling der Überschriften

Grafikprogramme zum Herunterladen

1. Inkscape

Inskape ist wohl das Beliebteste, unter den kostenlosen Vektor-Grafikprogrammen. Du kannst das Programm für Windows, Mac und Linux herunterladen. Speichern kannst du deine Grafiken dann u.a. in den Dateiformaten EPS, SVG und SVGZ und AI.

Eine ausführliche Beschreibung des Programms und aller Features kannst du auf der Inkscape-Webseite durchlesen (auf Deutsch). Auf dem Blog für Inkskape-Tutorials findest du außerdem jede Menge Anleitungen zur Verwendung.

2. Karbon

Karbon ist das Grafikprogramm des Koffice-Pakets http://www.koffice.org/, einem kostenlosen Software-Paket ähnlich wie dem OpenOffice-Paket. Hier findest du weiter Infos über Koffice.

Mit Karbon hast du die Möglichkeit auf mehreren Ebenen zu arbeiten, deine Dateien kannst du in den Dateitypen ODG, SVG, PNG, PDF, WMF abspeichern. Alle Programm-Features findest du auf dieser Karbon-Webseite.

Online-Grafikprogramm

3. Aviary Vector Editor Raven

Aviary bietet ein ganzes Paket von Online-Tools, mit den du Bilder, Grafiken und Audio-Dateien online bearbeiten uns abspeichern kannst. Das hat den Vorteil, dass du auch von unterwegs auf deine Arbeiten zugreifen kannst. Allerdings kannst du die Dateien derzeit und in vereinfachter Version (also als JPG oder PNG) auf deinen eigenen Computer herunterladen.

Raven ist das Grafikprogramm von Aviary und vorausgesetzt du hast eine schnelle Internetverbindung, kannst du auch sehr schöne Ergebnisse mit dem Programm erstellen. Auf dem Aviary-Server kannst du deine Grafiken als PDF, SVG, EPS oder Bitmap abspeichern (dafür musst du dich vorher bei Aviary kostenlos anmelden). Hier findest du auch jede Menge hilfreiche Tutorials für die Aviary-Tools.

Bildbearbeitungs-Programme zum Download

4. GIMP

GIMP ist eines der umfangreichsten Freeware-Programme für die Bildbearbeitung und kann gut mit den teuren Profi-Programmen Schritt halten. Es gibt das Programm für Windows, Mac und Linux zum downloaden. Jede Menge Tutorials zum Programm findest du auf der GIMP-Webseite und auf der Webseite GIMP-Tutorials.net.

5. Paint.NET

Paint.NET ist ebenfalls ein umfangreiches Bildbearbeitung-Programm für deinen Computer. Es wird unterstützt von Windows (ab XP). Deine Bilder kannst du nach der Bearbeitung in den Dateiformaten JPG, PNG, TIFF, BMP und GIF speichern.

Zu den Grundfunktionen kannst du dir praktische Plugins installieren. Mit dem PSD-Plugin kannst du dann z.B. auch die Ebenen von PSD-Photoshopdateien öffnen und bearbeiten (allerdings ohne Ebeneneffekte). Hier findest du weitere Infos zu den Paint-Plugins.

Weitere Infos und Hilfe zum Programm kannst du im Paint-Forum bekommen. Außerdem gibt es eine ausführliche Dokumentation aller Programm-Funktionen (nur auf Englisch), anschaulich mit jeder Menge Screenshots dargestellt.

6. Krita

Krita ist das Bildbearbeitung-Programm des Koffice-Pakets.

Du kannst das Krita für Linux, Mac und Windows herunterladen. Du kannst mit praktischen Bearbeitungs-Ebenen arbeiten, und das Programm Programm unterstützt das Importieren von RAW und PDF-Formaten, sowie das Speichern in JPG, PNG und TIFF.
Alle Features von Krita, wie Werkzeuge, Farbwertunterstützung und Filter kannst du dir auf der Krita-Webseite genau anschauen.

7. Picasa

Mit dem Bildverwaltungs- und Sharing-Programm Picasa von Google kannst du deine Fotos auch bearbeiten. Du hast die Möglichkeit grundlegende Funktionen wie Farben, Sättigung, Hell/Dunkel-Kontraste, Zuschneiden etc. einzustellen. Außerdem gibt es mehrere Effekte mit denen du deine Fotos optimieren kannst. Für die schnelle und einfach Bearbeitung direkt beim Sortieren deiner Bilder auf dem Computer ist Picasa also durchaus sehr hilfreich.

Online-Tools zur Bildbearbeitung

8. Pixlr

Pixlr ist eines meiner Lieblingsprogramme für schnelle Bildbearbeitung online. Es ist schnell und hat eine angenehme, aufgeräumte Benutzeroberfläche. Zum schnellen Zuschneiden und Bearbeiten von Fotos also genau das Richtige. Pixlr kann natürlich noch jede Menge mehr. Du hast sogar die Möglichkeit verschiedene Bearbeitungsebenen anzulegen. Speichern kannst du deine Bilder auf deinem Computer als JPG, PNG oder BMP.

9. Picnik

Picnik ist ein bisschen mehr ein Spaß-Tool. Du kannst deine Fotos z.B. mit lustigen Icons verzieren. Es bietet aber auch die grundlegenden Möglichkeiten der Bearbeitung wie Zuschneiden, Farbeinstellung, Hell/Dunkel-Kontraste, Drehen etc. Außerdem hat das Tool eine sehr schöne Effekte-Palette, die ich z.B. sehr für die Bearbeitung von Flickr-Fotos nutze. Picnik lässt sich übrigens auch direkt mit Flickr verknüpfen.

10. Aviary Image Editor Phoenix

Phoenix ist das Bildbearbeitung-Tool von Aviary. Du kannst deine Bilder online bearbeiten und das Tool testen, um deine Bilder online bei Aviary zu speichern, musst du dich allerdings erst anmelden. Bist du als User registriert, kannst du deine Bilder auch als JPG und PNG auf deinen Computer herunterladen.

3D Modeling und Animation

11. Blender

Ein spannendes Programm für alle, die sich auch für 3D Modeling und Animation interessieren, ist das umfangreiche, kostenlose Programm Blender. Mit Blender kann man aufwendige 3D-Modelinerungen bauen, rendern und animieren. In der Gallery kannst du dir beeindruckende Artworks anschauen, die mit dem Programm erstellt wurden. Jede Menge Tipps und Tutorials für den Einstieg ins Programm findest du im Tutorial-Bereich der Webseite.

Hast du diese Freeware-Programme bereits getestet? Können die Programme deiner Meinung eine echte Alternative zu den teuren Profi-Programmen sein? Und kennst du weitere kostenlose Programme für Webdesigner und Foto-Fans? Ich freue mich über dein Feedback und deine Tipps!

Ähnliche Artikel zu diesem Thema

1. Typo-Tipps für Webdesigner (Teil 3): Texte spannender gestalten
2. 16 praktische Cheat Sheets für Webdesigner
3. Kostenlose Icons, Fonts & Texturen – die 20 besten Ressourcen für Webdesigner
4. 15 praktische Typografie- und Font-Tools für Webdesigner
5. 20 Google Chrome Extensions für Webdesigner und Programmierer

1. Miley Cyrus

2. Diddy Blog

3. Kylie Minogue

4. Beastie Boys

5. Bush

6. Katy Perry

7. Ellie Goulding

8. Jay-Z

9. Fettes Brot

10. Morcheeba

11. The Roots

12. Phoenix

13. Pete Yorn & Scarlett Johansson

14. Alejandro Escovedo

15. Jane Monheit

16. Dark Child

17. Kimberly Caldwell

18. Seal

19. stanfour

20. David Garrett

Wie gefallen dir die WordPress-Seiten der Stars? Kennst du weitere Webseiten von Musikern? Über deine Meinung und deine Tipps freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Webdesign Inspiration: 20 mobile Webseiten für iPhone, Android & Co
2. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
3. Webdesign Inspiration: 30 minimalistische WordPress-Blogs
4. Webdesign Inspiration: 40 kreative Kontaktformulare
5. Webdesign meets Soccer: 15 Webseiten zum Thema Fußball

1. Short-URL deines Artikels anzeigen

Damit Leser deine Artikel leicht weiter empfehlen können, kannst du eine Kurz-URL zu deinen Posts zur Verfügung stellen.

Bei Perishable Press wird unter jedem Artikel eine TinyURL Kurz-Link angezeigt.

Eine Möglichkeit ist es, dazu einen URL-Shortener Dienst wie TinyURL zu nutzen. Füge dazu einfach folgenden Code-Schnipsel in die functions.php-Datei deines WordPress-Themes ein.

function shortenURL($longURL) {
$shortURL = file_get_contents("http://tinyurl.com/api-create.php?url=".$longURL);
echo $shortURL;
}

In deiner single.php Datei fügst du jetzt innerhalb des Loops diesen Code ein, um die Kurz-URL anzuzeigen.

<p>Kurz-URL des Artikels: <?php shortenURL(get_permalink()); ?></p>

Möchtest gleich mit einem Link zu Twitter weiterleiten, kannst du folgenden Code verwenden.

<p>Kurz-URL des Artikels: <a href="http://twitter.com/home?status=%20<?php the_title(); ?>:%20<?php shortenURL(get_permalink()); ?>" rel="nofollow" target="_blank"><?php shortenURL(get_permalink()); ?></a></p>

Weitere Infos und Twitter-Tricks findest du bei Perishable Press.

2. Ein Autorenfeld einfügen

Ein weiteres Feature für deine Artikelseite ist ein Autorenfeld einzurichten. Diese Option ist natürlich besonders wichtig, wenn mehrere Autoren auf dem Blog-Artikel schreiben.

Informatives Autorenfeld auf Pro Blog Design.

Um die Funktion zu nutzen, musst du als erstes die Autoreninfo unter Benutzer / Biographische Angaben im Admin-Bereich eintragen. Möchtest du auch auf Twitter oder andere Networks deiner Autoren hinweisen, kannst du diese in das Feld »AIM« eintragen.

Dann fügst du folgenden Code in die single.php-Datei deines Themes ein.

<div class="author-info">
        <h3>Autor des Artikels: <?php the_author_meta('user_firstname'); ?></h3>
        <?php echo get_avatar( get_the_author_meta('user_email'), '70', '' ); ?>
        <p><?php the_author_meta('description'); ?> Du findest mich auch auf <a href="<?php the_author_meta('aim'); ?>">Twitter</a>!</p>
</div>

In diesem Beispiel wird der Vorname, das Gravatarbild (in der Größe 70×70 Pixel), die bigraphische Beschreibung und ein Link zum Twitter-Profil des Autors angezeigt. Jetzt kannst du dein Autorenfeld noch mit Hilfe von CSS stylen.

Mehr Infos zu den Autoren Meta-Daten kannst du im WordPress-Codex nachlesen.

3. Anzahl der Wörter im Artikel anzeigen

Zahlen-Fans haben die Möglichkeit die Anzahl der Wörter eines Artikels anzuzeigen. Dies ist zwar nicht unbedingt relevante Info, kann aber ein nettes kleines Feature sein.

Max Voltar zeigt in seinen Artikeln die Anzahl der Wörter direkt unter dem Datum an.

Um die Zahl der Wörter deiner Artikel anzuzeigen, kannst du den praktischen Code-Schnipsel von »Digging into WordPress« nutzen. Dazu fügst du diesen Code in deine functions.php Datei ein.

// count words in posts
function word_count() {
	global $post;
	echo str_word_count($post->post_content);
}

Um die Zahl aufzurufen fügst du jetzt innerhalb des Loops in deiner single.php diesen Code-Schnipsel ein.

<?php word_count(); ?>

Möchtest du lieber ein WordPress-Plugin nutzen, kannst du auch »Simple Post Word Count« einsetzen, um die Anzahl der Wörter im Artikel anzuzeigen.

4. Ähnliche Artikel zum Thema anzeigen

Sehr praktisch ist es auch, ein Liste ähnlicher Artikel zum Thema zu integrieren. So können interessierte Leser sehen, ob sie noch weitere spannende Artikel auf deinem Blog finden können.

Eine Auflistung ähnlicher Artikel im »The Hickansian« Journal.

Am besten nutzt du für die Funktion ein WordPress-Plugin. Eines der beliebtesten Plugins ist z.B. das »Yet Another Related Post Plugin« (kurz YARP).

In den Einstellungen des Plugins hast du etliche Optionen, um die Anzeige deiner ähnlichen Artikel zu optimieren. Du kannst Kategorien und Tags aus der Liste ausschließen, bestimmen aus welchem Zeitraum die Artikel sein sollen und die Darstellung der Artikel sowohl auf der Webseite, als auch im RSS-Feed bestimmen.

Das Plugin wählt die Auswahl relevanter Artikel nach Übereinstimmung von Tags, Kategorien, des Titels und der im Text vorkommenden Wörter. Du kannst bestimmen, wie hoch die Relevanz jeweils eingestuft werden soll.

Auf dem Elmastudio-Blog haben wir außerdem noch das jQuery-Plugin jCarousel verwendet, um den Blog-Lesern noch mehr Möglichkeit zu geben, nach ähnlichen Artikeln zu suchen.

5. Social Media & Bookmark-Buttons

Du solltest deinen Lesern auf jeden Fall die Möglichkeit geben deine Artikel schnell weiterempfehlen und als Lesezeichen abspeichern zu können. Am einfachsten ist das mit beliebten Social-Media Plugins, von denen es jede Menge für WordPress gibt.

Um den praktischen Retweet-Button einzurichten, kannst du z.B. das Plugin »Tweetmeme Button«, oder »Topsy Retweet Button« verwenden.

Für Bookmarks ist das Sexy Bookmark-Plugin eine schöne Lösung. Und um den beliebten »Gefällt mir«-Button für Facebook einzubinden, kannst du entweder das Facebook Like Button-Plugin nutzen, oder dir den Button-Code mit dem Facebook Social-Plugin Widget erstellen.

Admin-Einstellungen des Sexy Bookmark-Plugins.

Eine ausführliche Zusammenstellung praktischer Social Media-Plugins findest du auch in meinem Artikel »18 der angesagtesten Social Media-Plugins für deinen WordPress-Blog«.

6. Besucherstatistik des Artikels anzeigen

Eine weiteres kleines Feature, dass du in die Einzelansicht deiner Artikel einbauen kannst, ist eine Besucherstatistik der einzelnen Posts.

Am einfachsten geht das mit dem Plugin »WP-PostViews«. Nach der Installation des Plugins musst du nur noch den folgenden Code-Schnipsel innerhalb des Loops in der single.php einfügen, um die Anzahl der Besuche anzuzeigen.

<?php if(function_exists('the_views')) { the_views(); } ?>

7. Datum des letzten Artikel-Updates anzeigen

Gerade bei Code-Schnipseln oder neuen Online-Tools kann es hilfreich sein, den Lesern die Information zu geben, wann du den Artikel zuletzt überarbeitet hast. So bekommen die Leser eine Vorstellung, wie aktuell die Infos im Artikel noch sind.

Um das aktuelle Datum anzuzeigen, fügst du einfach folgenden Code-Schnipsel in deine single.php-Datei ein.

<?php if($post->post_date != $post->post_modified) the_modified_date(); ?>

Wie nützlich findest du diese Tipps, und fallen dir noch weitere hilfreiche Features ein, um die Artikelseite in WordPress zu verbessern? Über deine Tipps und dein Feedback freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. 18 der angesagtesten Social Media-Plugins für deinen WordPress-Blog
2. Jede Menge Tipps & Tricks, um die WordPress-Suche zu verbessern
3. So optimierst du deinen WordPress RSS-Feed mit Feedburner
4. 12 WordPress-Plugins für den Kontaktbereich deines Blogs
5. WordPress Tipp: Die neusten Blog-Artikel mit Thumbnails anzeigen

1. Flickr Badge

Mit dem praktischen Flickr Badge kannst du deine neusten Flickr-Bilder, eine zufällige Bilderauswahl oder deine Flickr-Alben auf deinem Blog anzeigen. Das Aussehen des Badges und die Größe der Bilder kannst du anschließend mit CSS-Styles anpassen.

2. Twitter Widget

Auch für deine neusten Tweets gibt es auf der Twitter-Seite ein hilfreiches Widget-Tool. Du kannst Farben und Styles anpassen, bestimmen wie viele Tweets du anzeigen lassen möchtest und ob auch die Avatar-Bilder mit angezeigt werden sollen.

3. Zootool Badge

Das Zootool ist der neuste Renner unter den Social Network-Sites. In deinem Zoo kannst du Bilder-Inspirationen aus dem Netz sammeln und mit anderen teilen. Um deine neusten visuellen Inspirationen auch auf deinem Blog zu zeigen, kannst du entweder das Zootool-Badge verwenden, und auch ein Zootool WordPress-Plugin gibt es schon.

4. DeviantArt WordPress-Plugin

Für alle Künstler, Illustratoren und Fotografen ist DeviantArt eine beliebte Plattform, um künstlerische Arbeiten zu präsentieren. Mit dem WordPress-Plugin DeviantArt Thumbs kannst du deine neusten Werke in einem praktischen JavaScript-Slider auch auf einem Blog zeigen.

5. Facebook Social Plug-ins

Ein Facebook-Fanfeld in der Blog-Sidebar zu integrieren, ist ebenfalls sehr beliebt. Hast du eine Facebook-Seite eingerichtet, kannst du dein Fanfeld mit dem Social Plugin-Widget von Facebook ganz leicht gestalten und den fertigen iframe-Code auf deiner Seite integrieren.

6. Delicious Linksrolls

Eine tolle Möglichkeit deine Link-Tipps auch mit deinen Blog-Lesern zu teilen, ist das Delicious Linkroll-Widget. Mit dem Tool kannst ganz leicht eine Liste deiner neusten Delicious-Bookmarks auf deinem Blog anzeigen. Die Liste musst du dann noch mit CSS an dein Blog-Theme anpassen.

7. Vimeo Widgets

Möchtest deine neusten Vimeo-Videos in kleinen Vorschaubildern oder sogar in einem Slider präsentieren? Mit den praktischen Vimeo-Widgets kannst du deine Videos ganz leicht in verschiedenen Styles anordnen.

8. YouTube WordPress-Plugin

Um Videos auf deinem YouTube-Channel auf deinem Blog zu zeigen, ist das WordPress-Plugin Smart YouTube eine praktische Lösung. So kannst du die Ansicht und Größe deiner Videos direkt im WordPress-Adminbereich stylen, ohne immer per Hand den Code auf deinem Blog einbetten zu müssen.

9. Last.fm WordPress Plugin

Du bist Musik-Fan und möchtest deine aktuelle Last.fm Playlist auch auf deinem Blog weiter empfehlen? Mit dem WordPress-Plugin Last.fm Records kannst du deine Lieblingscover auf deinem Blog anzeigen.

10. Gowalla WordPress-Plugin

Für alle Gowalla-Fans gibt es ebenfalls bereits ein praktisches WordPress-Plugin. Mit WP-Walla kannst du deine neusten Location-Check-Ins in deine Blog-Sidebar integrieren.

11. Foursquare WordPress-Plugin

Mit dem WordPress-Plugin Foursquare Map des Location-Networks Foursquare kannst du sogar gleich eine Karte anzeigen, um deinen Blog-Lesern deine neusten Location-Tipps gleich weiter zu empfehlen.

12. Amazon Widget

Bist du ein wahrer Bücherwurm und möchtest deine neusten Buchempfehlungen gerne auf deinem Blog weitergeben? Dann kannst du das Amazon-Widget für Buchempfehlungen nutzen.

13. Tumblr WordPress Widget

Um deinen Tumblr-Blog mit deinem WordPress-Blog zu verbinden, und so deine neusten Tumblr-Fotos und Beiträge zu teilen, kannst du das WordPress-Plugin Tumblr Widget for WordPress einsetzen.

Welches Social Network hast du bereits mit deinem Blog verknüpft? Kennst du noch weitere tolle Widgets, mit denen man schnell und ohne große Programmierkenntnisse beliebte Social Networks auf seinem Blog integrieren kann? Über deine Tipps und dein Feedback freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. 18 der angesagtesten Social Media-Plugins für deinen WordPress-Blog
2. So optimierst du deinen WordPress RSS-Feed mit Feedburner
3. 12 WordPress-Plugins für den Kontaktbereich deines Blogs
4. WordPress Tipp: Die neusten Blog-Artikel mit Thumbnails anzeigen
5. Die beliebtesten Artikel im WordPress-Blog anzeigen – mit oder ohne Plugin

Fluid Webdesigns

Die innovativsten Beispiele mobiler Webseiten sind die neuen Webdesigns von Hicksdesigns oder SimpleBits. Die Layouts sind so flexibel konzipiert, dass sie sich dem jeweiligen Gerät (Smartphone, iPad, Laptop oder großer Desktop-Monitor) anpassen. Ein spannender Artikel zum Thema flexibles Webdesign ist »Responsive Web Design« bei A List Apart.

1. Hicksdesign

Webseite: hicksdesign.co.uk

Das neue Blogdesign von Hicksdesign verändert sich je nach Gerät in ein ein-bis vier-spaltiges Layout. Die einspaltige Version ist dabei für das 320 Pixel breite iPhone-Display optimiert. Jon Hicks beschreibt in seinem Blogartikel »Finally a fluid Hicksdesign« sehr schön das Konzept seiner neuen Seite.

2. Simple Bits

Webseite: stream.simplebits.com

Den gleichen Designansatz wie Jon Hicks hat auch Dan Cederholm von SimpleBits. Das Ergebnis seines neuen Bitstream-Designblogs ist wirklich sehr gelungen und inspirierend.

Mobile Webseiten-Versionen mit flexibler Breite

Natürlich muss man nicht gleich ein ganz neues Design für seine Webseite erstellen. Es gibt auch die Möglichkeit, eine extra Version eines Webdesigns für die unterschiedlichen Smartphone-Formate z.B. auf einer Subdomain (m.meinedomain.de) einzurichten. Dazu kann man sich entweder ein Account bei einen Online-Anbieter (z.B. Mobify) einrichten, oder falls man eine WordPress-Seite hat, auch ein WordPress-Plugin verwenden. Hier findest du jede Menge Infos zu Tools und Plugins für mobile Webseiten.

3. Tanya Ryno

Webseite: m.tanyaryno.com

Ein schönes Beispiel für eine mobile Webseiten-Version von Mobify ist die Webseite der Produzentin Tanya Ryno.

4. thirdoor

Webseite: thirdoor.com/m

Die mobile Seite von thirdoor ist sehr sehr benutzerfreundlich gestaltet. Über den Home-Button kannst du dich geschickt durch die gesamte Seite navigieren.

5. mediaburst

Webseite: mediaburst.co.uk/m

Eine sehr schöne mobile Seite gibt’s von mediaburst.

6. WolframAlpha

Webseite: m.wolframalpha.com

Die clevere Wissensmaschine Wolfram Alpha sieht auch in der mobilen Version sehr übersichtlich aus.

7. I Love Typography

Webseite: m.ilovetypography.com

Sehr schön sieht auch das minimalistische Webdesign von I Love Typography in der Mini-Version made by Mobify aus.

8. SNOOK.CA

Webseite: m.snook.ca

Das schlichte Webdesign von Jonathan Snook sieht auch in der mobified Version seiner Webseite klasse aus.

9. Erskine Design

Webseite: m.erskinedesign.com

Auch die Designagentur Eskine Design hat eine iPhone-Version ihrer Webseite.

10. upstract

Webseite: upstruct.com/m

Auch das Design Studio upstruct berlin oslo hat eine schöne mobile Webseiten-Version.

11. Crush & Lovely

Webseite: m.crushlovely.com

Die inspirierende Webseite von Crush & Lovely hat jetzt auch eine tolle mobile Version von Mobify bekommen.

12. Diesel

Webseite: m.diesel.com

Eine sehr schöne mobile Version gibt’s auch von Diesel.

13. Webdesigner Depot

Webseite: m.webdesignerdepot.com

Auch den sehr beliebten Webdesign-Blog Webdesigner Depot gibt’s jetzt Dank Mobify in Mini-Version.

14. David Praznik

Webseite: davidpraznik.com/m

David Praznik hat eine schöne mobile Version seiner Portfolios, inklusive About-Seite und Kontaktformular gebaut.

15. Coldwater Creek

Webseite: coldwatercreek.com/mobile

Die mobile Version von Coldwater Creek ist ein spannendes Beispiel für ein mobiles Shop-Design.

Mobile Webdesigns mit fixer Breite

Eine weitere Variante mobiler Webdesigns sind extra für die Smartphone-Displays gestaltete Webseiten mit einer festgelegten Breite (meist 320 Pixel wie beim iPhone).

16. coosh

Webseite: coosh.com/iphone

Die mobile Webseiten-Version des Headset-Herstellers Coosh.

17. Christopher Meeks

Webseite: christophermeeks.com

Die sehr schön gestaltete, minimalistische Seite von Christopher Meeks hat zwar kein fluid Layout, ist aber auch auf einem größeren Bildschirm schön anzusehen, ohne das sich das Design verändert.

18. Pixelumbrellla

Webseite: pixelumbrella.com/iphone

Auf der mobilen Version von Pixelumbrella gibt es sogar einen Mini-Slider zu bewundern.

19. Procab Studio

Webseite: procab.ch/iphone

Eine sauber durchgestylte iPhone-Seite der schweizer Design-Agentur Procab Studio.

20. Alex Buga

Webseite: alexbuga.com/v9/iphone

Alex Bugas Seite ist ein schönes Beispiel für ein privates Blog-Design und zeigt, dass auch der self-made Notizenbuch-Stil klasse in der Mini-Version funktioniert.

Wie gefallen dir die mobilen Webdesigns? Hast du selbst schon darüber nachgedacht, für deine Webseite oder deinen Blog eine mobile Version zu gestalten? Und kennst du noch weitere schöne Bespiele für mobiles Webdesign? Über dein Feedback und deine Tipps freue ich mich sehr :-)

Hast du selbst kein eigenes iPhone und gerade auch keines von einem Bekannten zur Verfügung, kannst du dir die mobilen Webdesigns übrigens auch prima mit dem Online-Tool TestiPhone anschauen. Und für Google Chrome gibt es die praktische Erweiterung Window Resizer, mit der du dein Browser-Fenster schnell in die verschiedensten Größen wechseln kannst.

Ähnliche Artikel zu diesem Thema

1. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
2. 20 grandiose Webseiten-Header, die deine Kreativität beflügeln
3. Webdesign Inspiration: 40 kreative Kontaktformulare
4. Webdesign meets Soccer: 15 Webseiten zum Thema Fußball
5. Webdesign Inspiration: 16 Webseiten zum Thema Kaffee

Das fertige Logo

So sieht das fertige Limebot-Logo aus.

Also los! Ab in den Illustrator, und ran an die Arbeit :-)

1. Eine Limette in Illustrator bauen

Hast du eine Logo-Idee entwickelt und vielleicht schon eine erste Skizze von Hand gezeichnet, kannst du damit anfangen das Symbol deines Logos in Illustrator (oder einem alternativen Grafikprogramm) zu bauen. Ich zeige dir in den folgenden Arbeitsschritten, wie ich die Limette für mein Limebot-Logo gebaut habe.

1.1. Die Grundform erstellen

Als erstes legst du dir ein neues Dokument an. Da ich ein Logo fürs Web erstellen möchte wähle ich den RGB-Wert, die Maßeinheit Pixel eine Auflösung von 72dpi (für Print-Logos sind CMYK, mm und 300dpi geeignet).

Dann legst du die Grundformen deines Symbols an. Für die Limette baust du drei, ineinander liegende Kreise, und gibst den Kreisen jeweils eine Farbe (z.B. dunkelgrün #5db801, weiß #fffadc, hellgrün #dbf298). Der größte Kreis hat einen Durchmesser von 85 Pixel.

Als nächstes habe ich das Fruchtfleisch der Limette unterteilt. Dazu kannst du das Stern-Werkzeug verwenden (das Sternwerkzeug findest du in der gleichen Werkzeug-Palette wie die Ellipse).

Um den Stern zentral zu den Limetten-Kreisen auszurichten, öffnest du jetzt das Ausrichten-Fenster (Fenster / Ausrichten), wählst den Stern und alle Kreise an und wählst die Funktionen »Horizontal zentriert« und »Vertikal zentriert« aus.

Die Spitzen des Sterns kannst du an den Enden abschneiden, indem du den mittleren Kreis auswählst (A), kopierst (Strg+C) und über alle anderen Flächen an der gleichen Stelle einfügst, indem du alles anwählst und Strg+F (F für front) drückst.
Jetzt öffnest du den Pathfinder (Fenster / Pathfinder), wählst den Stern und den gerade neu erstellten Kreis aus (A) und verwendest die Pathfinder-Funktion »Schnittmengenfläche«.

Um die Gruppierung aufzuheben, wählst du den Stern mit der Direktauswahl (A) aus, und gehst auf Objekt / Gruppierung aufheben (oder Umschalttaste +Strg+G). Jetzt gibst du dem Stern mit dem dem Pipetten-Werkzeug (I) die weiße Farbe des mittleren Kreises und setzt einen kleinen Kreis (4x4px) im hellen Grünton in die Mitte. Zum Schluss gruppierst du alle Elemente miteinander (Strg+G).

1.2. Eine 3D Ansicht erzeugen

Um die Limette in Form zu bringen wählst du jetzt alle Elemente (A) aus und gehst auf Effekt / 3D / Extrudieren und abgeflachte Kante. In diesem Fenster gibst du jetzt folgende Werte ein: 9° / -26° / 8° / 40° / 0pt / keine Schattierung.

Anschließend wählst du wieder alle Elemente aus (A) und gehst auf Objekt / Aussehen umwandeln. Die Limettenscheibe liegt jetzt schon schräg im Bild.

Um die Form der Limette zu modellieren, erstellst du mit dem Ellipsen-Werkzeug (E) einen neuen, pinken Kreis mit ca. 85px Durchmesser, wählst den oberen Pfadpunkt des Kreises an und löscht ihn mit (-) weg. Lege jetzt den pinken Kreis hinter die Limettenschnitte und zupf dir die Pfade so zurecht, dass die pinke Fläche die Unterseite der Limette bildet. Gib der pinken Fläche die dunkelgrüne Farbe der Limettenschale.

1.3. Schatteneffekte hinzufügen

Um der Limette einen Schatten zu geben (links im Bild), kopierst du die eben erstellte Fläche (also der Körper der Limette) und fügst die Form an der gleichen Stelle noch einmal ein (Strg+F). Dieser neuen Fläche gibst du eine noch etwas dunklere grüne Farbe. Jetzt zupfst du die Pfade der Fläche so zurecht, dass die Form die vom Licht abgewandte Schattenfläche bildet.

Den Schatten unter der Form (rechts im Bild) erzeugst du, indem du eine schwarze Ellipse (E) hinter der Limette zeichnest, diese auf 35% Transparenz setzt und Multiplizieren setzt (im Fenster Transparenz) und bei Effekt / Weichzeichnungsfilter / Gaußscher Weichzeichner einen Effekt von 17 Pixel wählst.

1.4. Schriftzug wählen

Da ich mit Schriften viel lieber im Illustrator arbeite (als im Photoshop) habe ich die Schrift für das Logo schon jetzt gewählt. Ich habe für den Schriftzug die Free-Font »Zag Regular« verwendet.

2. Hintergrund und Schriftzug mit Photoshop stylen

Im zweiten Schritt des Logo-Tutorials geht es ab in den Photoshop. Hier kannst du am besten einen coolen Hintergrund mit Beleuchtungseffekt erzeugen für dein Logo erstellen und deinen Schriftzug stylen.

2.1. Dunkler Hintergrund mit Beleuchtungseffekt

Als erstes öffnest du dir ein neues Photoshop-Dokument (lass den Illustrator aber weiter geöffnet) und gib der Hintergrund-Fläche die Farbe mit dem Hex-Wert #272727. Dann wählst du unter Filter / Kunstfilter / Körnung & Aufhellung und stellst folgende Einstellungen ein: Körnung 1, Aufhellungsbereich 0 und Intensität 2.

Für den Beleuchtungseffekt wählst du anschließend Filter / Renderfilter / Beleuchtungseffekte. Du musst darauf achten, dass die Lichtart bei den Einstellungen auf »Strahler« eingestellt ist.

So sieht der fertige Photoshop Hintergrund-Effekt aus.

2.2. Illustrator-Elemente in Photoshop einfügen

Als nächsten Schritt kopiert du die Limette im Illustrator (Strg+C) und fügst sie (Strg+V) in dein Photoshop-Dokument ein. Es öffnet sich das Fenster »Einfügen als«, wähle hier die Option Pixel aus. Das gleiche wiederholst du mit dem Limebot-Schriftzug. Lege für jedes Element noch eine eigene Photoshop-Ebene an.

2.3. Schriftzug stylen

Mit Ebenenstilen im Photoshop kannst du den Schriftzug des Logos jetzt noch so richtig pimpen.

Klicke dazu mit einem Doppelklick auf die Schriftzug-Ebene und stelle die Einstellungen bei Schlagschatten, Schatten nach innen und Verlaufsüberlagerung ein. Mit der Vorschau-Funktion kannst du den jeweiligen Effekt gleich kontrollieren.

Ich habe diesw Werte bei dein Ebenstilen der Schrift ausgewählt.

Das fertige Limebot-Logo

Du hast es geschafft :-) Dein Logo ist fertig gestaltet.

Ich hoffe dir gefällt das Logo und du kannst die verwendeten Illustrator- und Photoshop Funktionen für deine eigenen Logos gebrauchen. Über dein Feedback und deine Fragen freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Ein Roboter-Maskottchen entsteht (Teil 2): Illustration mit Adobe Illustrator
2. Transparente Farben mit der CSS3-Funktion RGBA
3. Stylische Web 2.0 Buttons in Photoshop erstellen
4. Für Photoshop-Fans: Pinsel-Sets selbst erstellen
5. WordPress Tipp: den Login-Bereich individuell gestalten

1. Mobify

Bei »Mobify« kannst du dir kostenlos ein Account einrichten und deine mobile Webseiten-Version Schritt für Schritt in deinem Mobify-Account erstellen. Die mobile Version kannst du dann auf eine Subdomain deiner Seite (z.B. m.deinedomain.de) umleiten. Mit ein bisschen CSS-Anpassung (das Style-Cheet kannst du direkt in deinem Mobify-Account anpassen) kannst du recht schnell ein schönes Ergebnis hinbekommen.

Um Inspirationen zu sammeln kannst du dir die Mobify-Gallery anschauen, bevor du mit deinem mobilen Design loslegst.

Ein schönes Beispiel für eine mobile Webseiten-Version aus der Mobify-Gallery.

Das WordPress-Plugin »WordPress Mobile by Mobify« übernimmt anschließend die automatische Umleitung aller Besucher mit mobilen Geräten auf deine neue mobile Webseiten-Version.

2. Mofuse

»Mofuse« ist einer der größten Anbieter für mobile Webseiten-Versionen und wird u.a. von Seiten wie Mashable genutzt. Es gibt allerdings keine kostenlose Version des Tools, das kleinste Paket (für eine nicht-kommerzielle Webseite) kostest 7,95$ im Monat.

Das Tool hat allerdings auch etliche Features zu bieten, u.a. die Möglichkeit Google Maps und Google Checkout auf deiner Seite zu integrieren, und Statistiken für die mobile Nutzung deiner Seite auszuwerten. Für die Umleitung deiner Besucher auf die mobile Version gibt es ebenfalls ein WordPress-Plugin.

3. Mippin Mobilizer

Mit »Mippin Mobilizer« kannst du in ein paar Schritten eine kostenlose, mobile Version deiner Webseite erstellen. Dein eigenes Logos kannst du auf der Seite anpassen.

4. Wirenode

Bei »Wirenode« kannst du mehrere Webseiten in deinem Account verwalten (bis zu 3 Seiten kostenlos). Bei der kostenlosen Version kannst du allerdings nicht deine eigene URL verwenden. Dafür gibt es bei dem Tool etliche Features wie ein Twitter-, Umfragen- und Formular-Widget.

5. WPTouch Pro

»WPTouch« ist ein kostenpflichtiges WordPress-Plugin (29$), welches deine Webseite automtisch auf eine mobile Theme-Version umleitet, sobald ein Besucher deine Webseite mit einem mobilen Gerät aufruft. Alle Bilder und Videos werden dann automatisch verkleinert und lange Artikel-Seiten untergeteilt, damit die Inhalte schneller laden. Das WPTouch-Theme hat ebenfalls etliche spannende Features zu bieten und einen eigenen Admin-Bereich für dein mobile Device gibt es auch mit dazu.

WPTouch Version 1.9.16 (kostenlos)

Die ältere Version 1.9.16 des WPTouch-Plugins (ebenfalls kompatibel mit WordPress 3.0) kannst du übrigens weiterhin kostenlos nutzen.

6. WPtap

»Wptap« ist eine weiteres Plugin/Theme Paket, um deine WordPress-Seite für iPhone, iPad, Android & Blackberry fit zu machen. Das Plugin leitet deine Besucher automatisch auf die mobile Version um. Du kannst aus 5 kostenpflichtigen Themes (je 49$) und einem FreeTheme wählen.

Eine Demoansicht des WPtap Free-Themes »New Press«.

7. WordPress Mobile Pack

Das kostenlose WordPress Mobile Pack-Plugin bietet jede Menge Optionen, um deine WordPress-Seite mobile ready zu machen. Es gibt einen Theme Switcher zwischen mobiler- und Vollversion deiner Webseite, verschiedene Themes und Möglichkeit der CSS-Anpassung, einem mobilen Admin-Bereich und etliche weiteren Features.

8. Mobile Press

»Mobile Press« ist ein ebenfalls ein kostenloses WordPress-Plugin, um für deine Webseite eine mobile Version zu erstellen. Es bietet die Möglichkeit eigene Themes für die unterschiedlichen mobilen Geräte zu erstellen.

Welche Erfahrungen hast du mit den Tools/Plugins für mobile WordPress-Versionen schon gemacht? Hast du Tipps parat oder kennst du weitere praktische Tools, um WordPress-Seiten für mobile Devices zu rüsten? Über deine Erfahrungen und dein Feedback freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. 20 WordPress-Plugins mit praktischen Funktionen für deine Sidebar
2. Hilfreiche Plugins für dein WordPress-Theme Redesign
3. 10 WordPress-Plugins für Typografie-Liebhaber
4. 10 praktische Online-Tools für Webdesigner
5. Layout-, Raster- und Mockup-Tools und Ressourcen für Webdesigner

1. Girly Style und Bakery Logos

Der Girly-Style ist vor allem bei Bäckerei- und Café Logos sehr beliebt. Pastellfarben, Muffins und Schriften mit dünnen, oft geschwungenen Linien im Art Deco-Stil passen super zu diesem Trend.

Logo Inspirationen

Passende Free-Fonts für Logos im Girly-Style

2. Asiatische Logos

Asiatisches Design ist immer sehr stilvoll. Als Schrift für dein Logo im Asia-Style kannst du z.B. eine Schrift mit kalligrafischem Pinselstrich oder eine ganz minimalistische, serifenlose Schrift verwenden.

Logo Inspirationen

Passende Schriften für Logos im asiatischen Stil

3. Futuristisch, minimalistische Logos

Für ein Logo im futuristischen Computer-Stil eignet sich eine dünne, serifenlose Schriften besonders gut. Oft wird hier auch komplett auf Großbuchstaben verzichtet.

Logo Inspirationen

Passende Free-Fonts für futuristische Logos

4. Bubble Style Logos

Der Bubble-Style ist spätestens mit den Logos von Twitter und Skype zum Kult geworden. Die Wirkung ist der Logos ist modern mit einer netten, freundlichen nicht zu kühlen Komponente. Kein Wunder das dieser Stil im Web so beliebt ist.

Logo Inspirationen

Kostenlose Schriften im Bubble Style

6. Retro und klassische Logos

Immer wieder schön sind klassische Logos mit einem modernen, zeitlosen Twist. Für den klassischen Stil findest du jede Menge wunderschöne Free Fonts, meist passen Serifen-Schriften am besten.

Logo Inspirationen

Passende Schriften für den klassischen Logo-Stil

Wie gefallen dir die Logos und Schriften? Kennst du weitere schöne Free-Fonts, die zu diesen Logo-Stilen sehr gut passen würden? Über deine Tipps und dein Feedback freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Über die Kraft von Symbolen, und wie du das passende Symbol für dein Logo findest
2. 25 köstliche Logo Inspirationen zum Thema Essen
3. 25 Logos inspired by Nature
4. 10 WordPress-Plugins für Typografie-Liebhaber
5. Slab Serif Free-Fonts – die schönsten serifenbetonten Schriften im Überblick

1. Ice-Horse.de

Ice-Horse.de ist kreative Plattform und Portfolio von Webdesignerin, Grafikerin, Fotografin und Pferdeliebhaberin Birgit Zimmermann.

2. Chris Magiera

Moargh ist die wunderschön poetische Webseite und Fotografie-Portfolio von Chris Magiera.

3. surfgarden

Surfgarden ist kreativer Spielplatz der Berliner Webdesignerin und Grafikerin Manuela Hoffmann.

4. Blog.Tocki

Auf dem kreativen Blog des Stuttgarter Webdesigners und Grafikers Tocki alias Tilman Ockert findest du jede Menge interessanten Lesestoff zum Thema Mediengestaltung.

5. David Hellmann

Der Grafiker, Webdesigner und Webentwickler David Hellmann schreibt auf seinem Blog u.a. über Webdesign, Apple, und seinen Webworker-Alltag und in Davids Portfolio findest du jede Menge kreative Arbeiten.

6. Style Spion

Kai Müller schreibt auf seinem Blog StyleSpion über Design, Fotografie, Musik, Inneneinrichtung und viele andere schöne Dinge des Lebens.

7. Andreas Hommel

Die Webseite von Andreas Hommel ist Portfolio und kreatives Journal des Webdesigners und Webentwicklers mit interessanten, buntgemischten Themen.

8. faebric

faebric ist ein Online-Magazin für alle Modestudenten und jungen Leute, die sich für Mode interessieren. Das Magazin bietet u.a. jede Menge Tipps und Infos über neue Projekte und Events, Studiengänge und kreative, junge Mode-Labels.

9. Kulturbanause

Kulturbanause ist Blog und Portfolio des Düsseldorfer Mediengestalters Jonas Hellwig. Auf seiner Seite findest du jeder Menge Infos zu den Themen Webdesign, Programmierung, Werbung, Internet, Reisen und Alltägliches.

10. Jazz Drummer World

Jazz Drummer World ist Online-Magazin und Blog für alle Schlagzeuger und Percussionisten und Jazz-Liebhaber gegründet von David Kobrehel.

11. webdemar

Webdemar ist der Webdesign- und WordPress-Blog von Simon Rimkus, dessen WordPress-Themes du auch bei Themeshift ersteigern kannst.

12. WordWeb

WordWeb ist die Webseite der schweizer Texterin Barbara Frolik. Auf ihrem Blog findest du jede Menge hilfreiche Tipps zu den Themen Texten im Internet, Freelancing und Webdesign Inspiration.

13. shortees skizzenblog

Auf Shortees Skizzenblog gibt es jede Menge Skizzen, Illustrationen, Wallpapers und kreativen Input vom Leipziger Designer und Illustrator Shortee.

14. Orangetopic

Bei Orangetopic, dem Blog von Svenja Paulsen und Janet Freysoldt geht’s um Vielseitiges aus den Bereichen Netzkultur, Lifestyle, Musik und Design.

15. Playground

Playground ist Blog und kreativer Spielplatz des Webentwicklers und WordPress-Plugin Programmierers Sergej Müller.

16. bueltge.de

Frank Bültge hat auf seinem Blog bueltge.de jede Menge hilfreiche Tipps und Infos über WordPress, Themes, Plugins und WordPress-Programmierung für dich parat.

17. UARRR.org

UARRR.org ist Blog und experimentelle Plattform von Marcel Wichmann. Marcel schreibt über Musik, Zeichnen und Illustration, über Bücher und Themen aus dem Internet.

18. ZWEIVIEREINS

ZWEIVIEREINS ist Webseite und Blog des BMX- und Skateboarding Vereins 2plus4macht1 e.V. in Plauen.

19. aHeadwork

aHeadwork ist der Blog von Hannah, mit jeder Menge kreativen Texten, Koch-Rezepten und Alltagsgeschichten.

20. Hadouken

Hadouken ist der private Blog von Jeremy Lonien. Jeremy schreibt über alles was ihn im Internet gerade so begegnet und bewegt.

21. Kubis Welt

Kubis Welt ist Blog und T-Shirt Shop vom kleinen, neuseeländischen Spatz Kubi.

22. Franzbully

Auf der Webseite Frankbully.de dreht sich alles um niedliche, kleine Hundewelpen.

23. Artcore Skizzenblog

Der Artcore-Blog ist der Blog der Grafikerin und Illustratorin Nadja Hallfahrt. Hier gibt’s tolle Illustrationen, Icons und Wallpapers zu bewundern.

24. Showscreens

Auf Showscreens kannst du Inspirationen für neue iPhone-Apps bekommen, indem du nachliest welche Apps bei Bloggern, Designern und Entwicklern gerade besonders beliebt sind.

25. Admartinator.de

Admartinator.de ist der Blog des Apple- und Social Media Fans Martin Sauer. Martin schreibt über alles rund um Apple, gibt Blog- und WordPress Tipps und berichtet über ganz unterschiedliche Internet-Themen.

26. Codecandies

Codecandies ist der private Blog des Webdevelopers und Frontend-Entwicklers Nico Brünjes.

27. Make Better Apps

Bei Make Better Apps, dem neusten Projekt von David Hellmann findest du Beurteilungen und genaue Infos für verschiedenste iPhone, iPad, und Mac Apps.

28. Cute monstR Blog

Der cute monstR-Blog ist der Blog mit News zu neuen Designs und Events des Online-T-Shirt-Shops cute monstR.

29. Markus Freise

Markus-Freise.de ist der private Blog des begeisterten Poetry-Slammers und Comic-Zeichners Markus Freise.

30. Martin Neuhof

Martin-Neuhof.com ist Portfolio und Blog des Webdesigners, Mediengestalters, Fotografen und Bloggers Martin Neuhof von Farbwolke.de.

Im wilden Web-Dschungel ist uns bestimmt der ein oder andere Leckerbissen entwischt. Daher würden wir uns sehr über deine Mithilfe freuen!

Kennst du weitere kreative, deutschsprachige WordPress-Seiten, die hier auf keinen Fall fehlen dürfen? Über deine Empfehlungen und dein Feedback freuen wir uns schon sehr!

Ähnliche Artikel zu diesem Thema

1. Webdesign Inspiration: 20 mobile Webseiten für iPhone, Android & Co
2. Webdesign Inspiration: 30 minimalistische WordPress-Blogs
3. 20 grandiose Webseiten-Header, die deine Kreativität beflügeln
4. Webdesign Inspiration: 40 kreative Kontaktformulare
5. Webdesign meets Soccer: 15 Webseiten zum Thema Fußball

Bevor du loslegst die neuen CSS3-Eigenschaften für deine Designs zu verwenden, solltest du in dieser Browser Support-Liste nachschauen, welche Browser die CSS3-Features bereits unterstützen und bei welchen Browsern es Probleme gibt.

1. Linear Gradients (lineare Verläufe)

Lineare Verläufe kannst du super für Buttons oder Hintergrund-Verläufe verwenden. Und mit dem »CSS3 Linear Gradient-Tool« von Westvic wird es zum Kinderspiel wunderschöne Verläufe zu erstellen. Den dazugehörigen CSS3-Code gibt es natürlich gleich mit dazu. Ein toller Tipp um sich mit den CSS3-Eigenschaften vertraut zu machen, ist sich den CSS-Code ganz genau anzuschauen und zu beobachten, was sich jeweils verändert.

2. Radial Gradients (radiale Verläufe)

Und Westvic hat gleich eine ganze Reihe CSS3 Online-Tools erstellt. Mit dem »Radial Gradient-Tool« kannst du kreisförmige CSS3-Verläufe erstellen.

3. Text Shadow (Textschatten)

Textschatten sind total im Trend, und mit dem »Text Shadow-Tool« erstellst du sie mit Leichtigkeit.

4. Box-Shadow (Box-Schatten)

Auch Schatten auf Flächen sind mit dem »CSS3 Box Shadow-Tool« super leicht zu realisieren und ein sehr schönes Element, um Webdesigns aufzupeppen.

5. Transforms (transformieren)

Mit der Transform-Eigenschaft von CSS3 wird es so richtig wild. Mit dem »Transform-Tool« kannst du jede Menge Features diese spannenden CSS3-Eigenschaft testen und entdecken.

6. Text Stroke (Text-Konturstärke)

»Text Stroke« wird zwar noch nicht wirklich von den Browsers unterstützt, es ist aber eine interessante CSS3 Text-Eigenschaft, mit der du auf alle Fälle schon einmal ein bisschen herumspielen kannst.

7. Button-Maker von CSS-Tricks

Jede Menge wunderschöne CSS3-Buttons kannst du mit dem praktischen »Button-Maker« von CSS-Tricks erstellen. Auch hier ist es wieder hilfreich, sich den CSS-Code ganz genau anzuschauen, um mit den CSS3-Eigenschaften vertrauter zu werden.

8. CSS3 Generator

Der »CSS3 Generator« von Randy Jensen ist ein richtiges Multitalent. Du kannst 11 verschiedene CSS3-Eigenschaften (u.a. Multicolums, RGBa, Text- und Box Shadow, Gradients, Selectors und @font-face) testen und deinen CSS-Code erstellen. Welche Browser diese Eingenschaft unterstützen, ist auch gleich mit angezeigt.

9. CSS3 Please

Bei »CSS3 Please« kannst du verschiedene CSS3-Styles (z.B. abgerundete Ecken, Verläufe etc.) an einem Live-Beispiel testen.

10. CSS Corners (abgerundete Ecken und Verläufe)

Mit dem »CSS Corners-Tool« kannst du dir ganz leicht den CSS-Code für Buttons oder Flächen erstellen, und dabei sowohl abgerundete Ecken (CSS3 border-radius) als Farbverläufe (CSS3 gradients) bestimmen.

11. Border Radius (abgerundete Ecken)

Mit »Border Radius« kannst du dir den CSS-Code für abgerundete Ecken in Gecko (Mozilla), Webkit (Safari, Google Chrome) und CSS3 generieren.

12. Border Image Generator (Image als Rahmen)

Möchtest du ein cooles Images als Rahmen in deinem Design einsetzen? Dann kannst du den praktischen »Border-Image Generator« nutzen, um deinen CSS-Code zu erstellen.

13. @Font-Face Generator

Bei Fontsquirrel findest du etliche vorbereitete @font-face Kits. Und falls deine Lieblingsschrift noch nicht dabei ist, kannst du dir dein Kit (mit Beispieldatei, Schriften-Sets und CSS-Code) mit dem »@font-face Generator« selbst erstellen.

14. Text Shadow CSS3 Google Font Preview

Mit dem »CSS Font Generator von Google« kannst du dir u.a. auch den Code für Text Shadows erstellen, und deine Schrift gleich live testen.

15. 52 Framework

Der »52 Framework« ist ein Framework-Projekt, das HTML5 und CSS3 unterstützt. Das System unterstützt u.a. die CSS3-Eigenschaften Text- und Box Shadow, Selectors, und Rounded Corners.

16. CSS3 Learning Tool

Bist du dir noch nicht ganz sicher, wie die neuen CSS3-Eigenschaften funktionieren und in welchen Browsern sie wie angezeigt werden? Dann kannst du mit dem kleinen »CSS3 Learning Tool« schnell verschiedene CSS3-Styles in verschiedenen Browsern testen.

17. Find Me by IP

Auf »Find me by IP« kannst du dir u.a. auch eine Liste der von deinem Browser unterstützen CSS3-Eigenschaften anzeigen lassen. Außerdem findest du unter dem Navi-Punkt Webdesign eine interessante Auswertung der Browser-Unterstützung verschiedener CSS3-Properties.

18. CSS3 Help Sheet (CSS3 Spickszettel)

Zur Übersicht oder als Spickzettel während der Programmierung kann dir das »CSS3 Help Sheet« von GoSquared behilflich sein.

Wie gefallen dir diese CSS3 Online-Tools? Hast du schon eigene Erfahrungen mit den Tools und den neuen CSS3-Eigenschaften allgemein gemacht? Kennst du noch weitere praktische CSS3-Tools, die bei der Programmierung und dem Erlernen der neuen Funktionen hilfreich sind? Über dein Feedback und deine Tipps freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. 8 Tools und Plugins, um eine mobile Version deiner WordPress-Seite zu erstellen
2. 15 praktische Typografie- und Font-Tools für Webdesigner
3. 10 praktische Online-Tools für Webdesigner
4. Layout-, Raster- und Mockup-Tools und Ressourcen für Webdesigner
5. 10 praktische to-do Listen Tools für Webworker

1. Text und Bilder

Bilder sind eines der wichtigsten Elemente, um einen längeren Text oder Artikel aufzulockern. Dabei solltest du darauf achten, dass der Abstand zwischen Bild und Text immer gleichmäßig und in einem angenehmen Abstand gesetzt ist (CSS margin).

Außerdem kannst du Bilder rechts oder linksbündig setzen und den Text (mit floating) darum fliessen lassen.

Dabei ist es aber sehr wichtig, dass die Textbreite nicht zu schmal wird.

1.1. Vorschaubilder (thumbnails)

Eine tolle Option (die du z.B. bei WordPress-Blogs ganz einfach einfügen kannst, hier eine kleine Anleitung) sind Vorschaubilder (thumbnails) für deine Artikel. Ein Vorschaubild macht es dem Leser leichter, einen Einstieg in den Artikel zu finden.

1.2. Bilder mit oder ohne Rahmen

Bilder kannst du mit oder ohne Rahmen einfügen. Die Entscheidung, ob du einen Rahmen verwenden möchtest, hängt stark vom Hintergrund der Seite ab. Wichtig ist, dass sich die Bilder genug vom Hintergrund abheben. Bei dunklen Bildern auf dunklem Hintergrund (oder hellen Bildern auf hellem Hintergrund) ist die Kante des Bildes nicht mehr deutlich zu erkennen. Wenn du möchtest, kannst du aber auch gerade diesen Effekt als Stilmittel einsetzen.

Ein Beispiel für Bilder auf dunklem Hintergrund. Hier wäre ein Rahmen überflüssig.

Ein Bild auf hellem Hintergrund, dass ebenfalls ohne Rahmen auskommt.

1.3. Bildunterschriften (Captions)

Ein weiteres, hilfreiches Stilmittel beim Arbeiten mit Text und Bild sind die Bildunterschriften (Captions). Diese sind oft kleiner als die eigentliche Textgröße und eventuell in einer leicht helleren Farbe gesetzt. Du kannst auch kursiven Text für deine Captions verwenden.

Beispiel einer Bildunterschrift innerhalb des Rahmens.

Hier kommt eine kursive Schrift zum Einsatz.

2. Listen

Inhalte in Listen zu unterteilen ist ebenfalls sehr hilfreich, um Texte zu ordnen. Listen verdeutlichen die Struktur eines Textes. Der Leser kann leichter überschauen, was ihn im Text erwartet.

Du kannst deine Listenelemente entweder in einer »Unordered List« (HTML-tag ul) sortieren, oder in einer »Ordered List« (ol).

2.1. Unordered List

Eine »Unordered List« ist nicht nummeriert, sondern wird durch verschiedene Listenzeichen (Bullets) markiert. Es gibt unterschiedliche CSS-Elemente, die du den Listenelementen (HTML-tag li) deiner Unorderd List mit dem CSS-Style »list-type« zuweisen kannst.

Falls du deine eigenen Bullets gestalten möchtest, kannst du auch ein Image erstellen und es als Bullet einfügen.

Eine Liste mit kreativen Sternchen.

Hast du einen relativ breiten Text, kannst du das Listenelement auch noch ein wenig nach rechts einzurücken. So hebt sich die Liste deutlicher vom übrigen Text ab. Außerdem ist es sinnvoll zwischen Fließtext und Listenelement, sowie zwischen den einzelnen Elementen innerhalb der Liste, einen gwissen Abstand zu halten. So wirkt die Liste nicht gequetscht und die einzelen Listenelemente sind optisch angenehm voneinander getrennt.

2.2. Ordered List

Bei einer Ordered List kannst du deine Listenelemente z.B. mit Zahlen, Buchstaben oder römischen Zahlen nummerieren.

Hier findest du eine Zusammenstellung aller CSS-Styles für Listenelemente.

3. Initiale (große Anfangsbuchstaben) setzen

Den ersten Buchstaben deines Artikels kannst du als einleitendes Element in Großbuchstaben setzen. Entweder verwendest du dafür ein Image, oder du stylst den ersten Buchstaben im Text mit in einer größeren Schrift. Du solltest allerdings darauf achten, das der Abstand ziwschen Initiale und Fließtext angenehm gestaltet ist.

4. Zitate und Textpassagen hervorheben

Ein sehr schönes Stilmittel ist es auch, besondere Textpassagen (z.B. Zitate, die wichtigste Ausage eines Textes etc.) durch Schriftgröße, Hintergrund oder kursiven Text hervorzuheben.

4.1. Zitate

Zitate markierst du in deinem Code durch »blockquotes«. Um Zitate hervorzuheben, kannst du ihnen eine besondere Schrift- oder Hintergrundfarbe geben, sie in kursiv setzen und eine größere Schrift verwenden. Wenn du möchtest, kannst du auch eine andere Schriftart einsetzen (z.B. eine Serifenschrift).

Ein Trend im Webdesign ist es auch, Zitate mit einem Balken links vom Text zu markieren oder besonders große Anführungszeichen zu verwenden. Allgemein ist es sinnvoll Zitate ein wenig rechts und links einzurücken.

4.2. Mit Pullquotes Inhalte hervorheben

»Pullquotes« sind hervorgehobene Textpassagen oder Säzte, die du aus deinem Text herausziehst, um so die Aussage des gesamten Textes besonders zu unterstreichen. Der Unterschied zu »blockquotes« ist, dass der Text wiederholt wird (also im Fießtext noch einmal vorkommt).

Oft sind »pullquotes« rechts oder linksbündig vom Textblock platziert, und in einer größeren oft fetten Schrift gesetzt.

Du solltest Zitate und hervorgehobenen Text nur dezent einsetzen. Hast du zu viele Zitate in einem Text, geht der Effekt verloren und der Textfluß wird zu stark unterbrochen.

4. Code anzeigen

Hast du eine Webseite oder einen Blog auf dem du auch Code-Beispiele zeigen möchtest, solltest du diesen ebenfalls besonders gestalten.

Ein sehr schönes Beispiel für die Gestaltung von Code kannst du dir auf der Webseite Perishable Press anschauen.

Die HTML-tags um Code in Text zu kennzeichnen sind pre und code.

Da sich der Code vom übrigen Text abheben soll ist es hilfreich, wenn du einen Rahmen oder eine Hintergrundfarbe verwendest. Eine geläufige Methode ist auch, eine farbige Border an der linken Seite zu setzen. Für die Darstellung von Code solltest du eine eigene Schriftart verwenden. Meist werden für Code Monospaced Fonts (nichtproportionale Schriftart) verwendet.

Hast du eine WordPress-Webseite kannst du natürlich auch ein Plugin installieren, um Codeschnipsel auf deiner Seite anzuzeigen. Beim Plugin »Syntax Highlighter Evolved« hast du z.B. die Möglichkeit die Codezeilen zu nummerieren und den Code farblich zu unterscheiden. Außerdem können deine Leser den Code ausdrucken, kopieren oder sich in einem extra Fenster anzeigen lassen.

So sieht Code mit Hilfe des WordPress-Plugin aus.

Wie du siehst gibt es jede Menge Möglichkeiten deine Webtexte ansprechend und übersichlich zu gestalten. Kennst du weitere Techniken, um Texte attraktiv darzustellen? Über dein Feedback und deine Tipps freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Kostenlose Grafik- und Bildbearbeitungs-Programme für Webdesigner
2. Typo-Tipps für Webdesigner (Teil 2): Fließtexte gestalten
3. Typo-Tipps für Webdesigner (Teil 1): Styling der Überschriften
4. 10 WordPress-Plugins für Typografie-Liebhaber
5. 15 praktische Typografie- und Font-Tools für Webdesigner

1. Jad Limcaco

2. z8

3. EMQuinn

4. Triimpuls

5. Drexler

6. iA

7. Kyle Fiedler

8. On

9. The Living Principles

10. Human Recources

11. James Deer Design

12. David Airey

13. 204 Beech Avenue

14. Merkmal

15. Olliekav

16. Voce antica

17. Flixic

18. The Old Fashioned

19. Stefan Persson

20. 70folk

21. Spinz

22. NotJones

23. I Love Typography

24. One Twentysix

25. Shaken and Stirred

26. Tobias Ahlin

27. SimpleBits

28. Do it for the fame

29. Astheria

30. Fresh01

Wie gefallen dir die reduzierten Blog-Designs? Kennst du noch weitere minimalistisch gestaltete WordPress-Blogs, die in dieser Liste auf keinen Fall fehlen dürfen? Über dein Feedback und deine Tipps freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Webdesign meets Music: 20 WordPress-Seiten berühmter Musiker
2. Webdesign Inspiration: 20 mobile Webseiten für iPhone, Android & Co
3. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
4. Webdesign Inspiration: 40 kreative Kontaktformulare
5. Webdesign Inspiration: 16 Webseiten zum Thema Kaffee

Die fertige Illustration

So sieht die fertige Illustration des Lime-Bot Maskottchens aus.

Also los geht’s, machen wir uns an die Arbeit :-)

1. Das Illustrator-Dokument vorbereiten

Als erstes solltest du deine Zeichenvorlage einscannen oder mit einer Digitalkamera abfotografieren. Da die Skizze nur als Unterlage für die Illustration dient, reicht eine geringere Auflösung (ca. 150dpi beim Scannen). Anschließend kannst du die Vorlage noch im Photoshop (mit Tonwertkorrektur oder Helligkeit / Kontraste) ein wenig aufhellen.

Jetzt legst du dir ein neues Illustrator-Dokument an. In meinem Beispiel habe ich eine Dateigröße von 600×600 Pixel gewählt. Da ich die Illustration ja später auf einer Webseite verwenden will, wähle ich den RGB-Farbwert und eine Auflösung von 72dpi.

Die Skizzen-Vorlage fügst du mit Datei / Platzieren in dein Dokument ein. Diese Vorlagen-Ebene nenne ich »Skizze«. Mit einem Doppelklick auf die Ebene öffnest du die Ebenen-Optionen. Um die Skizze nur mit 30% Deckkraft anzuzeigen, wählst du 30% Transparenz aus. Anschließend kannst du deine Skizzen-Ebene noch sperren, damit du die Skizze während des Arbeitens nicht verschiebst.

2. Pfade bauen

Im nächsten Schritt musst du alle Linien deiner Skizze in Illustrator-Pfaden nachbauen.
Lege dir dazu die neue Ebene »Pfade« an. Ich habe bei meinem Roboter mit den Pfaden für den Kopf angefangen. Beim Nachbauen der Linien in Pfade kannst du ein paar Tricks anwenden, um die Linien sauber (so wenig Pfadpunkte wie möglich) und schnell hinzubekommen. Hier die wichtigsten Werkzeuge und Funktionen.

2.1. Das Ellipsen-Werkzeug (L)

Mit dem Ellipsen-Werkzeug (Kurzbefehl L) kannst du alle Kreise und Ellipsen deiner Figur bauen.

2.2 Die Pathfinder-Funktion: Schnittmenge bilden

Außerdem kannst du sehr viele Formen bauen, indem du von zwei Kreisen die Schnittmenge bildest. Ich habe z.B. erst einen Kreis für den Roboter-Kopf gezogen, diesen mit Strg+C kopiert, mit Strg+F (F steht für front) an der gleichen Stelle darüber eingefügt, und einen weiteren Kreis daneben aufgezogen. Dann wähle ich beide Kreise an und wähle aus dem Pathfinder-Fenster die Funktion »Schnittmenge bilden«. So bekomme ich die Fläche für die Ohren am Helm.

Alle weiteren Formen am Kopf kannst du mit der gleichen Funktion bauen.

2.3. Das Zeichenstift-Werkzeug (P)

Formen, die nicht direkt aus den geometrischen Formen (Kreis, Rechteck) abgeleitet werden können (z.B. die Antenne am Roboter-Kopf), legst du einfach selbst mit dem Zeichenstift-Werkzeug (P) an.

2.4. Filter: Biegung

Die Arme meines Roboters habe ich mit einem weiteren Trick geformt. Dazu zeichnest du ein freies Rechteck (M) und wählst unter Effekt / Verkrümmungsfilter / den Effekt »Bogen« aus. Bei den Optionen habe ich 20% Filter bei Biegung gewählt.

Jetzt musst du die Form anwählen, und Objekt / »Aussehen umwandeln« anklicken (so nimmt die Form die Kontur an, und der Biegungs-Effekt wird entfernt). Anschließend musst du die Pfade des Arms noch mit dem Direktauswahl-Werkzeug (A) ein bisschen zurecht zupfen. Fertig ist der Roboter-Arm.

2.5. Pathfinder-Funktion: Fläche aufteilen

Um die Unterteilung bei den Armen zu erzeugen habe ich drei Pfade gebaut, und diese jeweils über die Armform hinaus stehen lassen. Dann wähle ich alle Pfade an (inklusive den Arm) und wähle die Pathfinder-Funktion: »Fläche aufteilen«.

Mit diesen Pfad-Funktionen kann ich den gesamten Körper und Kopf, sowie alle Gliedmaßen erstellen. Hände und Füße zeichnest du anschließend direkt mit dem Zeichenstift-Werkzeug (P) und zupfst sie mit dem Direktauswahl-Werkzeug (A) zurecht.

So sieht mein Roboter in Illustrator-Pfaden aus.

Die Pfade sind fertig gebaut. Deine Skizzen-Ebene kannst du jetzt ausblenden.

3. Farbkonzept erstellen

Bevor du die Farben für dein Maskottchen anlegst ist es hilfreich, sich ein Farbkonzept von ungefähr 5 Farben anzulegen. Lege dir dazu die neue Ebene »Farben« in deinem Dokument an.

Für meinen Lime-Bot habe ich als Farbinspiration eine Limette verwendet und dann mit Hilfe eines Online-Farbtools (z.B. Color Scheme Designer) eine Farbpalette angelegt.

4. Flächen kolorieren

Als nächsten Schritt kannst du den Flächen deines Maskottchens die entsprechenden Farben zuweisen, indem du eine Pfadkontur anwählst und mit dem Pipetten-Werkzeug (I) auf eine Farbe deiner Farbpalette klickst.

Es hilft ein wenig mit den Verhältnissen von dunklen und hellen Farben herum zu spielen.
Bei meinem Roboter habe ich z.B. helle Farben für den Körper gewählt (da ich die Figur in einen dunklen Hintergrund setzen möchte) und dem Gesicht dagegen eine dunkle Farbe als Kontrast gegeben (das lenkt den Fokus aufs Gesicht).

5. Volumen mit »Schein nach innen« erzeugen

Um der Figur mehr Volumen zu geben (so werden die Kreise mehr zu Kugeln) kannst du
auf bestimmte Flächen den Effekt Schein nach innen (Effekt / Stilisierungsfilter / Schein nach innen) setzten. Ich habe beispielsweise allen weißen Flächen des Roboters einen Schein nach innen gegeben.

6. Fugen hinzufügen

Fugen sind ein wichtiges Stilmittel, um bei einer Illustration Volumen zu erzeugen.

Die Fugen (der schmale Zwischenraum zwischen zwei Objekten) erzeugst du, indem du eine Fläche (z.B. das grüne Gesicht) anwählst und bei Objekt / Pfad / »Pfad verschieben« auswählst. Den Versatz habe ich beim Roboter-Gesicht mit -3px gewählt (damit bekomme ich eine Fuge von 3 Pixeln).

Du erstellt so die gleiche Fläche, nur ein bisschen kleiner und gibst der größeren eine dunkle Farbe.

Fugen kannst du auch bauen, indem du eine Fläche mit Strg+C kopierst und sie mit Strg+B (B steht für behind) an die gleiche Stelle dahinter setzt. Dann skalierst du diese Fläche proportional mit Umstell-Taste+Alt gedrückt ein klein wenig größer.

7. Schattierungen

Um deiner Illustration mehr Tiefe zu verleihen, ist es wichtig Schattierungen hinzu zu fügen. Dazu musst du dir als erstes Gedanken machen, aus welcher Richtung das Licht kommen soll. Denn danach richtet sich, wo du die Schatten für deine Figur anlegen musst.
Kommt die Lichtquelle z.B. von rechts oben, bilden sich die Schatten unten links an deiner Figur.

Ich habe alle Schattenflächen pink eingefärbt.

Die Flächen für die Schatten (pink) habe ich übrigens genauso mit Pfaden gebaut, wie in Schritt 2 beschrieben.

Als nächstes setzt du deine Schattenflächen auf Schwarz (#000000), 20% Transparenz und Multiplizieren (Fenster Transparenz). In meinem Beispiel habe ich die grüne Fläche des Gesichts und des Knopfs am Bauch vor die Schattenflächen gesetzt, da ich diesen Flächen später noch eine Reflexion geben möchte.

Um die Schatten noch raffinierter aussehen zu lassen (und deiner Figur mehr Volumen zu geben), kannst du jetzt noch eine zweite, parallele Schattenschicht bauen. Diese Flächen ziehst du allerdings nicht ganz so hoch, wie die ersten Schatten. Diesen zweiten Schattenflächen gibst du wieder die Farbe Schwarz, und setzt sie auf 10% Transparenz und Multiplizieren.

Als finalen Schliff kannst du jetzt noch die Ecken deiner Schattenflächen abrunden. Dazu fügst du mit dem Ankerpunkt hinzufügen-Werkzeug (+) zwei weitere Pfadpunkte rechts und links (ganz nah) von der Ecke ein.

Den eigentlichen Eckpunkt löscht du jetzt mit dem Ankerpunkt entfernen-Werkzeug (-) weg.

Außerdem solltest du alle Schattenflächen an den Außenkonturen leicht nach innen kleiner skalieren. Damit wird die äußerste Linie z.B. bei einer Kugel wieder hell und hebt sich dadurch von einem dunklen Hintergrund besser ab. Es entsteht eine Lichtkante.

8. Highlights, Leuchteffekte und Reflexionen

8.1. Highlights an den Fugen setzen

Wenn das Licht von oben kommt, bildet sich ein Highlight (Lichtkante) an einer Fuge an der unteren Kante und nicht an der oberen (die obere Kante ist ja vom Licht abgewandt).

Ein gutes Beispiel für Highlights an Fugen sieht du an diesem Auto.

Die Highlights bilden sich bei meinem Roboter z.B. am Helm oder an den Fugen des Roboter-Anzugs.

Du kannst Highlights im Illustrator setzen, indem du den mittleren Pfadpunkt einer Fuge mit dem Direktauswahl-Werkzeug (A) auswählst. Kopiere dann den Punkt mit Strg+C. Die beiden benachbarten Pfadpunkte werden so automatisch mit kopiert. Füge jetzt die kopierten drei Pfadpunkte mit Strg+F an der selben Stelle wieder ein. Jetzt wechselst du die angewählte Fläche mit Umschalttaste+x in eine Kontur. Dann gibst du der Kontur eine Breite von 2 oder 3 Pixeln, damit deine Lichtkante etwas breiter wird.

Verändere deine Lichtkante mitt Objekt / Pfad / Konturlinie in eine Fläche. Jetzt gibst du der Lichtkante einen Blendeneffekt (ab CS4). Die Blendeneffekte findest du unter Fenster / Farbfeldbibliotheken / Verläufe / Blendeneffekte (ganz oben). Wähle den »Weißübergang zu Kante-Effekt«.

Als letztes verschiebst du die Lichtkante 1 bis 2 Pixel nach unten (bzw. zur Seite, je nach Fuge). Achte darauf, dass deine Lichtkante in der obersten Ebene angeordnet ist.

Diese Highlights setzt du jetzt bei allen Fugen (ich habe Highlights in meiner Illustration z.B. am Helmvisier, am Bauch, an den Ohren und Schultern gesetzt).

8.2. Leuchteffekte

Leuchteffekte lassen Flächen spannender wirken. Ich verwende einen Leuchteffekt z.B. für das Gesicht und am grünen Knopf am Bauch.

Wähle dazu deine Fläche an, gehe auf Effekt / Stilisierungsfilter und wähle »Schein nach innen«. Bei den Einstellungen habe ich Ineinanderkopieren, Farbe Weiß, Deckkraft 75%, Weichzeichnen 40px und Mitte gewählt.

Den gleichen Effekt habe ich beim grünen Button am Bauch mit einer ähnlichen Einstellung wiederholt.

Bei den Augen und dem Mund meines Roboters nutze ich den gleichen Effekt nur diesmal mit »Schein nach außen« und den Einstellungen Negativ multiplizieren, Deckkraft 100%, Weichzeichnen 5px.

8.3. Reflexionen

Um die sehr wichtigen Reflexionen im Gesicht vom Lime-Bot zu erzeugen, kopiere ich den Schatten im Gesicht, sowie die äußere (schwarze) Fläche des Gesichts und füge dann mit Strg+F beide Flächen an der gleichen Stelle wieder ein.

Zur besseren Ansicht habe ich den Flächen neue Farben gegeben und die Deckkraft auf 100% gesetzt.

Dann wähle ich beide Flächen an und wähle im Pathfinder »Fläche aufteilen«. Anschließend muss ich die Flächen noch einmal anwählen und die Gruppierung (mit der rechten Maustaste: Gruppierung aufheben) aufheben. Jetzt lösche ich die pinke Fläche weg und die blaue Fläche habe ich in zwei Teile geteilt.
Der unteren blauen Fläche gebe ich die Farbe Schwarz auf 30% Transparenz, der oberen Fläche den Blendeneffekt »Weißübergang 1« (du solltest darauf achten, dass Augen und Mund der Illustration über der Reflexion liegen).

Genau den gleichen Vorgang habe ich beim grünen Button am Bauch.

9. zusätzliche Details hinzufügen

Tata, wir haben es geschafft! Die Roboter-Illustration ist fertig :-)

Eigentlich kannst du deine Illustration jetzt schon als fertig bezeichnen. Möchtest du allerdings deinem Maskottchen noch den finalen Schliff geben, kannst du noch ein paar zusätzliche kleine Schmankerl einbauen.

Ich habe beim Lime-Bot z.B. eine kleine Nummer auf den Anzug geschrieben, auch kleine Accessoires (z.B. die Limette in der Hand des Roboters) sind ein nettes Feature. Wenn es zum Stil deiner Illustration passt, kannst du auch noch Texturen (z.B. bei den Kleidungstücken oder im Hintergrund) addieren. Um dein Maskottchen würdig zu präsentieren, kannst du außerdem noch einen Hintergrund, eine Bodenfläche und ein Schlagschatten am Boden gestalten.

Wie du siehst, sind deiner Kreativität wirklich keine Grenzen gesetzt und du kannst die verschiedensten Dinge ausprobieren.

Noch ein Tipp: Alternative Grafik-Programme

Hast du kein Abode Illustrator Programm und möchtest trotzdem Illustrationen in einem Grafik-Programm erstellen, gibt es das kostenlose Inkscape oder das sehr spannende, neue Online-Programm Aviary Raven als Alternativen. Mit diesen Tools lassen sich ebenfalls etliche, tolle Effekte erzeugen.

Ich hoffe dir gefällt der fertige Lime-Bot und du kannst die Illustrations-Tipps und -Tricks auch bei deine eigenen Arbeiten anwenden. Über dein Feedback und deine Fragen zum Tutorial oder zu den verwendeten Illustrator-Funktionen freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. So erstellst du ein stylisches Logo in Photoshop und Illustrator
2. Ein Roboter-Maskottchen entsteht (Teil 1): Charakterfindung und Skizzen
3. Transparente Farben mit der CSS3-Funktion RGBA
4. Stylische Web 2.0 Buttons in Photoshop erstellen
5. Illustrator Tutorial: Konturen und Effekte skalieren kurz erklärt

1. Verschachtelte Kommentare aktivieren

Um eine spannende Diskussion mit Fragen, Meinungen und Antworten auf deinem Blog zu ermöglichen, kannst du die Blog-Kommentare ineinander verschachtelt anzeigen.

Der Kommentarbereich bei Nettuts.

Dazu musst du die Funktion im Adminbereich unter Einstellung / Diskussion freischalten (ab WordPress-Version 2.7). Du kannst bestimmen, wie weit die Kommentare ineinander verschachtelt werden können (also wie oft eine Person auf eine Kommentar-Antwort wiederum antworten kann).

Unter jedem Kommentar erscheint jetzt ein Antworten-Link.

Falls du ein älteres Theme nutzt oder dein eigenes Theme entwickeln möchtest, musst du dein Theme noch auf diese neue Funktion anpassen. Eine genaue Beschreibung für die Anpassung des Codes findest du auf WordPress.org.

2. Autorenkommentare hervorheben

Ein weiterer Effekt, der deinen Kommentarbereich noch übersichtlicher macht, ist es alle Kommentare des Artikel-Autors besonders zu stylen. Du kannst z.B. eine leicht dunklere Hintergrundfarbe wählen. Seit der WordPress-Version 2.7 geht das ganz einfach. Du musst lediglich die CSS-Styles li.bypostauthor in deine CSS-Datei einfügen und entsprechend stylen (z.B. mit background-color, border etc.).

3. Avatare anzeigen

Um die Kommentare deines Blogs persönlicher zu gestalten, hilft es Avatare neben den Kommentaren anzuzeigen. Die nötigen Einstellungen kannst du wieder im Adminbereich unter Einstellungen / Diskussion vornehmen. Du kannst zusätzlich bestimmen, welche Bewertungen du zulassen möchtest und was für ein Motiv angezeigt werden soll, falls jemand noch kein Avatar-Bild besitzt.

Damit dein Theme Avatare unterstützt, muss dieser Code in der functions.php Datei (wenn du bereits die Custom Callback-Funktion nutzt) oder in der comments.php Datei einfügt sein.

<?php echo get_avatar( $comment, 65 ); ?>

Im Codex bei WordPress.org findest du weitere Infos Funktion.

4. Ein eigenes Standard-Avatar hinzufügen

Mit einem kleinen Trick, den ich bei WPEngineer entdeckt habe kannst du dein eigenes Standard-Avatarbild für dein Theme hinzufügen. Dazu musst du nur einen Codeschnipsel in deine functions.php Datei einfügen, und anschließend dein neues Standard-Avatar in den Diskussionen-Einstellungen im Adminbereich auswählen.

Hol dir den Codeschnipsel für dieses Feature auf der WPEngineer-Webseite.

5. Verschachtelte Kommentare nummerieren

Nummerierte Kommentare bei Perishable Press.

Um deine Blog-Kommentare besser zu strukturieren (das ist vor allem bei verschachtelten Kommentaren sinnvoll), kannst du z.B. das WordPress-Plugin »Greg’s Threaded Comment Numbering« verwenden.

Mit Hilfe des Plugins kannst du verschachtelte Kommentare in bis zu 10 Ebenen nummerieren. Nachdem du das Plugin aktiviert hast, musst du noch folgenden Code in deine Callback-Funktion (in der functions.php) einfügen.

<div class="commentnumber"><?php gtcn_comment_numbering($comment->comment_ID, $args) ?></div>

Anschließend kannst du die Nummerierung mit der CSS-Class .commentnumber in deinem Style-Sheet stylen. In den Einstellungen des Plugins unter Configurations / Styling Comment Numbers solltest du dann noch angeben, dass du dein eigenes Styling verwendest.

6. Kommentare sortieren

Du kannst dir überlegen, ob du die neusten Blog-Kommentare ganz oben anzeigen möchtest, oder das älteste Kommentare an der ersten Stelle stehen soll. Die Einstellung dazu findest du wieder unter Einstellungen / Diskussion im Admin-Bereich.

Die üblichere Methode ist das älteste Kommentar zuerst anzuzeigen, vor allem wenn auf deinem Blog viele Fragen gestellt werden und zusätzlicher Support zu den Artikel-Themen geleistet wird.

Auf Blogs mit sehr vielen Kommentaren (über einen längeren Zeitraum) macht es aber eventuell Sinn, die neusten Kommentare nach vorne zu stellen. Bei WebdesignerWall kannst du dir diese Vorgehensweise sehr schön ansehen.

Der Kommentarbereich bei Webdesigner Wall.

7. Kommentare zitieren

Sehr schöne Zitate auf Veerles Blog.

Eine weitere schöne Funktion, um die Kommunikation untereinander zu verbessern, ist die Möglichkeit sich gegenseitig zitieren zu können. Für diese Option gibt es das praktische »Quote Comments Plugin«.

Es erstellt einen Quote-Button unter jedes Kommentar, der den Kommentar-Text bei Klick kopiert und in das neue Kommentar mit blockquote-tags einfügt.

Du kannst die Zitate und den Zitat-Button dann noch in deiner CSS-Datei stylen. Der Zitiere-Button hat die CSS-Class .comment_quote_link.

8. Benachrichtigung bei weiteren Kommentaren

Deine Leser kommentieren oftmals auf deinem Blog, um Fragen zu stellen oder interessieren sich allgemein für die Diskussion zu einem Artikel. Daher ist es sehr hilfreich, wenn du deinen Lesern die Möglichkeit gibst, über weitere Kommentare zu einem Artikel per Email informiert zu werden.

Hierfür gibt es wieder etliche Plugin-Optionen. In Deutschland ist es Pflicht das »Double-Opt-In Feature« in die Abo-Funktion einzubauen. Das bedeutet der Leser bekommt erst eine Mail, in der er das Abo bestätigen muss, bevor er die Benachrichtigungen über weitere Kommentare erhält.

Das WordPress-Plugin »Gurken Subscribe to Comments« erfüllt z.B. diese Funktion. In den Einstellungen des Plugins kannst du die Texte für die Email und den Text im Kommentar-Formular anpassen.

Ein sehr hilfreicher Trick, um die Option zum Kommentar-Abo oberhalb des Senden-Buttons zu positionieren, ist im Artikel »Mehr Usability in WordPress: Subscribe To Comments perfektionieren« von Sergej Müller beschrieben. So können die Kommentatoren die praktische Abo-Funktion nicht so leicht übersehen.

9. RSS-Feed für Kommentare eines Artikels

Eine weitere Option die Diskussion in den Kommentaren weiter mitzuverfolgen, ohne jedesmal wieder den Artikel besuchen zu müssen, ist den RSS-Feed für Kommentare eines Artikels zur Verfügung zu stellen. Dazu musst du einfach folgenden Codeschnipsel in deine comments.php Datei einfügen.

< ?php post_comments_feed_link( $link_text = 'link_text', $post_id = 'post_id', $feed = 'feed_type' ) ?>

Weitere Infos zu post_comments_feed_link findest du im WordPress-Codex.

10. erlaubte HTML-Tags anzeigen

Eine sehr schöne Lösung von Veerle, um die erlaubten HTML-Elemente zu zeigen.

Um in deinem Kommentar-Formular darauf hinzuweisen, welche HTML-Tags in den Kommentaren verwendet werden dürfen fügst du folgenden Code oberhalb des Kommentar-Formulars ein.

Folgende HTML-Elemente sind erlaubt: < ?php echo allowed_tags(); ?>

11. Kommentare in mehrere Seiten unterteilen

Hast du einen Blog mit sehr vielen Kommentaren kannst du die Kommentare in mehreren Unterseiten sortieren (seit WordPress-Version 2.7). Dazu musst du als erstes die Einstellung unter Einstellungen / Diskussion im Admin-Bereich aktivieren. Anschließend fügst du folgenden Code in deine comments.php Datei ein.

< ?php paginate_comments_links( array('prev_text' => '&laquo;', 'next_text' => '&raquo;') ) ?>

Weitere Infos zur Paginate WordPress-Funktion kannst du im WordPress-Codex nachlesen.

Wie gefallen dir diese Optionen, die Kommentare auf deinem Blog noch attraktiver zu gestalten? Kennst du weitere, praktische Möglichkeiten, um den WordPress Kommentarbereich zu pimpen? Über dein Feedback und deine Tipps freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Jede Menge Tipps und Plugins, um die Artikelseiten in WordPress zu optimieren
2. So optimierst du deinen WordPress RSS-Feed mit Feedburner
3. 12 WordPress-Plugins für den Kontaktbereich deines Blogs
4. WordPress Tipp: Die neusten Blog-Artikel mit Thumbnails anzeigen
5. Die beliebtesten Artikel im WordPress-Blog anzeigen – mit oder ohne Plugin

1. Die fertige Skizze

Diese Skizze dient später als Vorlage für die Illustrator-Illustration.

Darf ich vorstellen: Das ist der kleine Roboter »Lime-Bot«. Er soll später in der Tutorial-Serie zu unserem Webseiten-Maskottchen werden. Als ersten Schritt möchte ich heute beschreiben, wie ich den Charakter und die Figur des kleinen Roboters entwickelt habe. Bei der Entwicklung eines Maskottchens kommt es nicht unbedingt darauf an, dass du der allerbeste Zeichner bist. Vielmehr ist wichtig, dass du dir Gedanken machst, welche Wirkung dein Maskottchens haben soll (möchtest du z.B. einen athletischen Superheld, einen niedlichen Panda oder vielleicht sogar einen richtigen Bösewicht gestalten).

Das Ziel dieses ersten Tutorials ist es also nicht eine perfekte Zeichnung zu erstellen, sondern einen lebendigen Charakter zu entwickeln.

2. Inspirationen sammeln

Um Inspirationen für dein Maskottchen zu sammeln ist es sehr hilfreich, dir ein Imageboard (oder Moodboard) anzulegen, bevor du mit der eigentlichen Zeichenarbeit beginnst. Ein Imageboard ist eine Collage deiner Inspirationen. Diese können ganz unterschiedlich sein und z.B. aus Farben, Architektur, Comic-Figuren, Actionhelden, atmosphärischen Bildern oder Zeichnungen entstehen. Du kannst auch mehrere Imageboards anlegen, und diese in unterschiedliche Themen kategorisieren.

Dieser Arbeitsprozess hilft dir deinen Charakter zu entwickeln, und eine genauere Vorstellung davon zu bekommen, in welchem Stil du dein Maskottchen gestalten möchtest.

Bilder für dein Imagebord findest du natürlich bei Google, aber auch Flickr, Zeitschriften, deine eigene Fotosammlung, alte Comics, die Artworks bei DeviantArt oder Artikel auf Kreativ-Blogs wie Abduzeedo liefern dir jede Menge Material.

Das ist das Imageboard für die Entwicklung meines Roboter-Maskottchens.

3. Körper- und Kopfform entwickeln

Jetzt beginnt endlich die eigentliche Zeichenarbeit. Um dich ein bisschen warm zu zeichnen, und in die Materie deines Charakters (z.B. Roboter) rein zufinden, kannst du zuerst ganz locker verschiedene Körper- und Kopfformen zeichnen. So findest du am besten heraus, welche Formen für deinen Charakter in Frage kommen. In dieser Phase ist es auch wichtig, die Größenverhältnisse der Körperteile und die Anatomie deiner Figur zu definieren.

Hierbei solltest du wieder überlegen, welche Wirkung dein Maskottchen auf den Betrachter haben soll. Runde Formen und ein großer Kopf (wie bei Kleinkindern) wirken z.B. niedlich. Eckige Formen und ein kleiner Kopf im Verhältnis zum Körper wirken dagegen stark, überlegen, eventuell sogar böse.

In dieser Skizze habe ich verschiedene Körperformen für meinen Roboter ausprobiert.

Ich habe die unterschiedlichsten Kopfformen gezeichnet.

Am einfachsten ist es, wenn du so viele Skizzen wie möglich machst. Dabei ist ein Trick (vor allem wenn du noch unsicher beim Zeichnen bist) auch mal ganz nebenbei, z.B. während eines Telefongesprächs zu zeichnen. Aus diesen spontanen Krizzeleien entstehen oft die schönsten Ideen, da du unbefangen an die Sache heran gehst. Später kannst du deine Ideen dann weiter ausarbeiten.

Am Ende dieser ersten Zeichenphase sollte die Form deiner Figur weitgehend definiert sein, damit du im nächsten Schritt die Körpersprache, Bewegung und Mimik deines Maskottchens entwickeln kannst.

4. Gestik und Mimik definieren

Du weißt also, wie dein Maskottchen aussehen soll. Jetzt kannst du dich um die Körperhaltung und den Gesichtsausdruck deines Charakters kümmern. Die Wirkung deines Maskottchens auf den Betrachter erzielst du durch eine entsprechende Gestik und Mimik.

Du solltest dir also Gedanken machen, ob dein Maskottchen z.B. herzlich, einladend, schüchtern, oder angriffslustig wirken soll.

Um die Gestik deiner Figur leichter zu erfassen, kannst du jetzt Bewegungsskizzen machen. Es reicht, wenn du deine Figur dazu nur ganz vereinfacht darstellst. Du kannst deine Figur fliegend, vor Freude in die Luft springend, nachdenklich oder meditierend skizzieren. Je mehr Skizzen du machst, desto lebendiger kannst du deinen Charakter darstellen.

Hast du die Bewegungen deines Maskottchens erfasst, solltest du im nächsten Schritt verschiedene Gesichtszüge üben. Als Hilfsmittel kannst du auch dein Imageboard zur Hand nehmen, um zu gucken wie eine bestimmte Mimik erzeugt wird. Nicht nur die Gesichtszüge, auch die Kopfhaltung ist ein wichtiges Stilmittel, um deiner Figur Ausdruck zu verleihen.

Die Skizzenblätter können ganz frei entstehen. Wieder gilt: Je mehr du zeichnest, desto besser kannst du den Ausdruck deines Maskottchens einfangen.

5. Die finale Sizze erstellen

Als letzten Schritt musst du jetzt noch die zuvor definierten Elemente (Form, Gestik, Mimik der Figur) in einer finalen Skizze zusammenfügen. Am besten fängst du mit leichten Strichen an, und arbeitest dich immer mehr ins Detail vor.

Der Lime-Bot Roboter entsteht in mehreren Zeichenschritten.

Du kannst deine Figur auch auf mehrere Blätter zeichnen, indem du sie von der vorherigen Skizze durch paust. Hier musst du allerdings aufpassen, dass deine Zeichnung nicht an Dynamik und Lebendigkeit verliert.

In der finalen Zeichnung solltest du auch Details wie Kleidung, Schattierungen, Licht / Schattenwirkung (eine Kugel kann unten dunkler sein, als oben) klären.

Es kommt bei dieser Skizze wirklich nicht auf eine perfekte Zeichnung an sondern darauf, dass dein Maskottchen den richtigen Ausdruck hat, und alle Flächen und Formen in der Zeichnung definiert sind. So bekommst du eine schöne Unterlage für deine spätere Illustrator-Illustration.

In unserem Flickr-Account kannst du dir übrigens alle Zeichenblätter noch einmal in einem größeren Format anschauen.

Und so geht’s im nächsten Teil weiter

Du hast also dein Maskottchen definiert und eine Vorlagen-Skizze für die Illustration gezeichnet. Im nächsten Teil geht es ab in den Illustrator, wo du mit der Skizze als Unterlage dein Maskottchen in Pfaden nachbaust, dir ein Farbkonzept für die Kolorierung überlegst und die Flächen deines Maskottchens anmalst.

Ich hoffe dir hat der erste Teil des Tutorials gefallen, und du kannst die Tipps und Tricks bei deinen eigenen Arbeiten anwenden. Über dein Feedback und deine Fragen freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Ein Roboter-Maskottchen entsteht (Teil 2): Illustration mit Adobe Illustrator
2. So optimierst du deinen WordPress RSS-Feed mit Feedburner
3. WordPress Tipp: Die neusten Blog-Artikel mit Thumbnails anzeigen
4. Transparente Farben mit der CSS3-Funktion RGBA
5. Stylische Web 2.0 Buttons in Photoshop erstellen

Du kannst dir die Icons als transparente PNG’s in zwei verschiedenen Größen oder als AI-Illustrator-Datei (Version CS4) herunterladen. Wir hoffen dir gefallen die Icons und du kannst sie gut gebrauchen, um deine nächste selbst gebastelte Geburtstags-Karte zu verzieren.

Detailansicht der Icons

Hier geht’s zum Download

• Download PNG
  .zip, 441 KB
• Download Vector
  .zip, 3,05 MB

Wir freuen uns schön auf ein weiteres, gemeinsames Blog-Jahr mit jeder Menge neuen, spannenden Artikeln :-) Über dein Feedback, Verbesserungsvorschläge und Tipps für unseren Blog würden wir uns sehr freuen!

Ellen, Manuel & Kubi :-)

Ähnliche Artikel zu diesem Thema

1. Lass den Sommer rein! Erfrischende Summer Holiday Icons downloaden
2. Das neue Elmastudio-Design ist online :-)
3. Leckere Sushi Restaurant-Icons kostenlos downloaden
4. Tool Time – Werkzeug Icons kostenlos downloaden
5. Rudi the Rabbit wünscht Frohe Ostern – kostenlose Osterhasen-Icons downloaden

1. Get Social WordPress Plugin

Mit diesem Plugin kannst du eine floating Social-Media Box (inkl. Retweet-Button, Facebook-Share, Google Buzz, Stumple Upon…) auf deinem Blog integrieren. Du kannst selbst zusätzliche Social-Dienste einfügen.

2. Social Slider

Das Plugin fügt eine Social-Media Bar am linken Seitenrand deines Blogs hinzu, die sich auf dem Blog mitbewegt und aufklappbar ist. Du kannst jede Menge Social-Media Angebote integrieren.

3. Twitter @Anywhere Plus

Mit dem Twitter @Anywhere Plus Plugin kannst du die @Anywhere-Features, wie einen Reweet-Button, ein Tweet-Feld, einen »Folge mir auf Twitter«-Button, oder Infos über TwitterUser bei Maus-Hover.

4. Social Grid

Mit diesem Plugin kannst du Buttons deiner verschiedensten Social-Sites in einem Sidebar-Widget anlegen. Auf der Plugin-Homepage findest du ein anschauliches Intro-Video zum Plugin.

5. Tweetmeme Button

Das Plugin integriert den beliebten Tweetmeme Retweet-Button auf deinen Blog. Es gibt den Button in normaler Größe (siehe Screenshot) und kompakter Form (wie hier auf dem Blog).

6. Topsy Retweet Button

Der Topsy Retweet Button ist eine Alternative zum Tweetmeme-Button. Du kannst den Button in den verschiedensten Farben einfügen und so an dein Seitendesign anpassen.

7. Twitter for WordPress

Mit Twitter for WordPress kannst du einen Live-Stream deiner neusten Tweets auf deinem Blog anzeigen.

8. Facebook Like Button

Mit dem Plugin kannst du den neuen »Gefällt mir« Button von Facebook bei deinen Blog-Artikeln anzeigen.

9. Facebook Share

Möchtest du deine Besucher dazu aufrufen deine Artikel mit ihren Facebook-Freunden zu teilen, kannst du den Facebook-Share Button auf deinem Blog einfügen.

10. WP Google Buzz

Sind deine Leser bereits im Google Buzz-Fieber oder möchtest du sie dabei unterstützen? Dann integriere mit Hilfe des WP Google Buzz-Plugins den Buzz-Button auf deinem Blog.

11. Digg Digg

Digg Digg ist ein weiteres WordPress-Plugin, mit dem du eine Social-Media Box mit verschiedenen Diensten (z.B. Tweetmeme, Digg, Delicious, Buzz, Facebook etc.) an der Seite deines Blogs anzeigen kannst.

12. Wibiya Toolbar

Mit Wibiya kannst du eine umfangreiche Social Toolbar-Leiste auf deinem Blog integrieren. Ein Beispiel der Toolbar kannst du dir auf der Wibiya-Webseite anschauen.

Eine Alternative zu Wibiya ist die Meebo-Toolbar. Es gibt zwar kein WordPress-Plugin, aber du kannst dir die Toolbar direkt auf der Meebo-Webseite anlegen.

13. Sexy Bookmarks

Sexy Bookmarks ist ein tolles Plugin, um Bookmarking-Link unter deinen Artikeln anzubieten. Es gibt jede Menge Dienste zur Auswahl und das Design der Plugins ist sehr ansprechend.

14. Sociable

Sociable ist eines der umfangreichsten Plugins, um Social Bookmark-Buttons auf deinem Blog anzubieten. Die neue Version von Sociable bietet schöne Icons an. Zusätzlich hat der Dienst den Vorteil das er auch deutsche Social Media Dienste (z.B. MrWong.de, Webnews.de oder Yigg) standardmäßig im Angebot hat.

15. Share and Follow

Mit Share und Follow kannst du ein Sidebar Widgets deiner Social-Profile auf deinem Blog integrieren, sowie Optionen der beliebtesten Bookmarking-Dienste anbieten.

16. Add to Any

Willst du Platz sparen und deinen Lesern einen Button für alle Bookmarking- und Link-Dienste anbieten, kannst du den Add to Any-Button einbauen. Er bietet jede Menge Optionen und Dienste zum Bookmarken, Teilen und Weiterleiten deiner Artikel per Email .

17. Share This

Share This funktioniert ähnlich wie Add to Any, indem du verschiedene Dienste in einem Button zusammenfassen kannst.

18. Blippr

Das Plugin integriert den Dienst von Blippr.com auf deinem WordPress-Blog. Blippr ist ein Social-Media Dienst, bei dem du deine Lieblingsthemen (Blogs, Filme, Bücher etc.) bewerten kannst. Auf dem Mashable-Blog kannst du dir Blippr im Einsatz anschauen.

Welche Social-Media Plugins gefallen dir am besten? Kennst du noch weitere WordPress-Plugins, die Blogs mit der Social Media-Welt verbinden? Über dein Feedback und deine Tipps freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Jede Menge Tipps und Plugins, um die Artikelseiten in WordPress zu optimieren
2. Praktische Widgets, um Twitter, Facebook, Zootool & Co auf deinem Blog zu promoten
3. 8 Tools und Plugins, um eine mobile Version deiner WordPress-Seite zu erstellen
4. So optimierst du deinen WordPress RSS-Feed mit Feedburner
5. 12 WordPress-Plugins für den Kontaktbereich deines Blogs

1. Carroket

2. Du Jardin

3. Jamie Oliver’s Food Revolution

4. BestFood

5. Golden Spoon

6. Fresh Fast Food

7. Joey’s Pizza

8. Mc Dougal’s

9. The Fat Bun Restaurant

10. Blink Chocolate

11. Umami Burger

12. Monty’s Crab Shack & Grill

13. Big Oak Catering

14. Lindy’s Corner Cafe

15. the dining room

16. cookietrail

17. MogiMirim

18. Osaka

19. Art Kitchen

20. Little Swift Olives

21. Devious Treats Patisserie

22. Tatanka’s

23. Smarter Foods

24. Ajisen Ramen

25. Sprouts

Wie gefallen dir die Logo Inspirationen? Kennst du weitere schöne Logos zum Thema Essen? Über dein Feedback freue ich mich sehr :-)

Ähnliche Artikel zu diesem Thema

1. Über die Kraft von Symbolen, und wie du das passende Symbol für dein Logo findest
2. So findest du die passende Schrift für dein Logo
3. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
4. 25 Logos inspired by Nature
5. Webdesign meets Soccer: 15 Webseiten zum Thema Fußball

1. Die Schriftart wählen

Auch beim Fließtext stellt sich dir wieder die gleiche Frage, wie schon bei der Schriftwahl der Überschriften: Verwendest du eine serifen- oder eine serifenlose Schrift?

Eine Serifenschrift hat den Vorteil, dass sie auch bei längeren Textabschnitten gut lesbar ist. Eine serifenlose Schrift ist dagegen zeitloser und passt eventuell besser zu deinem restlichen Webdesign. Ein Trick (den du besonders gut bei Texten fürs Web anwenden kannst) ist es großzügig Absätze einzubauen, um die Textpassagen so kürzer und überschaubarer zu gestalten.

Du solltest auch daran denken, dass Texte im Internet eher vom Leser abgescannt werden, als von Anfang bis Ende durchgelesen.

2. Die passende Schriftgröße

Nachdem du dich für eine Schriftart entschieden hast, musst du dich nun noch für eine passende Schriftgröße entscheiden. Über die passende Größe von Webtexten wird ganz gerne diskutiert. Meiner Meinung nach tendieren viele Webdesigner dazu, eine zu kleine Schriftgröße zu verwenden (weil sie finden das es schicker aussieht oder besser zum übrigen Design ihrer Seite passt).

Doch was bringt der beste Text, wenn er nicht angenehm zu lesen ist? Daher würde ich beim Fließtext eher zu einer größeren font-size raten. Kleiner als 12px-13px sollte der Fließtext also wirklich nicht sein, eher größer. Ich denke eine Standard-Schriftgröße zwischen 14-16 Pixeln ist (je nach Schriftart) ideal.

3. Der Zeilenabstand (line-height)

Nicht nur die Schriftgröße ist für die Lesbarkeit eines Textes wichtig, auch der Abstand zwischen den einzelnen Text-Zeilen. Du solltest darauf achten, das der Text einen angenehmen Fluss bildet, und du beim Lesen mit den Augen leicht von einer Zeile in die nächste springen kannst. Bei zu geringem Zeilenabstand wirkt der Text gequetscht und man verrutscht beim Lesen leicht in der Zeile.

4. Die Textbreite bestimmen

Ein weiterer, wichtiger Punkt ist die richtige Textbreite für deinen Fließtext zu bestimmen. Diese sollte nicht zu schmal, aber auch nicht zu breit sein.

Bei einer zu schmalen Textbreite kann kein Rhythmus beim Lesen entstehen, da der Leser ständig den Text unterbrechen muss, um in die nächste Zeile zu wechseln.

Bei einem zu breitem Text verrutscht der Leser leicht mit dem Auge (während er in die nächste Zeile springt) und weiss dann nicht mehr, in welcher Zeile er weiter lesen muss.

Ist die Textbreite dagegen richtig gewählt, kann der Leser dem Text entspannt folgen, ohne sich besonders anstrengen zu müssen.

5. Kontrast zwischen Schrift und Hintergrund schaffen

Um zu Vermeiden, dass die Augen beim Lesen unnötig angestrengt werden, ist es auch wichtig einen gewissen Kontrast zwischen Schriftfarbe und Hintergrund zu erzeugen. Bei ähnlichen Farben für Text und Hintergrund ist der Text sehr schwer zu lesen.

Grundsätzlich ist es für das Auge angenehmer, dunkle Schrift auf hellem Hintergrund zu lesen. Helle Schrift auf dunklem Hintergrund ist vor allem für kurze Textpassagen oder besonders hervorgehobenen Text geeignet.

6. Absätze für bessere Lesbarkeit

Gerade im Web ist es wichtig den Text aufzulockern, und genügend Weißraum zwischen den einzelnen Absätzen beizubehalten. So kann der Leser auch an einer beliebigen Stelle im Text einsteigen, und eventuell nur für ihn relevante Absätze des Artikels lesen.

7. Textelemente hervorheben

Um bestimmte Wörter oder Sätze zu betonen, verwendest du am besten kursiven oder fett gesetzten Text.

Willst du einen ganzen Satz betonen, kannst du diesen auch kursiv setzen und zusätzlich einrücken. So hebt sich die Textpassage noch mehr vom restlichen Text ab.

Du solltest Text (der kein Link) ist, allerdings nicht durch Unterstreichen betonen, da unterstrichene Elemente in Webtexten als Links gesehen werden.

8. Text-Links stylen

Wie gerade schon erwähnt gelten unterstrichene Wörter als Links. Zusätzlich kannst du einen Link noch durch eine spezielle Linkfarbe hervorheben. Diese kann entweder im Normal-Zustand heller sein als bei Hover, oder anders herum.

Eine sehr beliebte Alternative zur durchgezogenen Linie (text-decoration: underline) ist, den Link mit einer gepunkteten Border zu unterstreichen (text-decoration: none; border: dotted;).

Natürlich kannst du deine Links auch nur mit einer Signal-Farbe markieren, und dann bei Hover unterstreichen oder eine Hintergrundfarbe setzen.

9. Abstände zu Elementen (margin, padding)

Als letzten Punkt möchte ich noch kurz darauf hinweisen, wie wichtig der Abstand zwischen Text und anderen Elementen im Artikel (z.B. Bilder oder Überschriften) ist. Du solltest bei deinem CSS-Styling der margins und paddings darauf achten, dass immer ein gleichmäßiger Abstand zwischen den jeweiligen Elementen eingehalten wird.

Haben dir diese Typo-Tipps weiter geholfen? Kennst du noch weitere wichtige Punkte, die bei der Gestaltung von Texten im Web unbedingt zu beachten sind? Über dein Feedback und deine Tipps freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Typo-Tipps für Webdesigner (Teil 3): Texte spannender gestalten
2. Typo-Tipps für Webdesigner (Teil 1): Styling der Überschriften
3. 15 praktische Typografie- und Font-Tools für Webdesigner
4. 20 Google Chrome Extensions für Webdesigner und Programmierer
5. 10 praktische Online-Tools für Webdesigner