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

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

1. Deine RSS-Feeds bei Feedburner brennen

Als erstes solltest du deine RSS-Feeds bei Feedburner brennen (falls du dies nicht schon getan hast). Da Feedburner ein Google-Produkt ist, brauchst du hierzu ein Google-Konto. Logge dich in dein Google-Konto ein, und gehe auf die Webseite www.feedburner.google.com.

Die Standard Feed-URL deines WordPress-Blogs lautet http://deinedomain.de/feed/rss2/. Die Feed-URL deiner Blog-Kommentare lautet http://deinedomain.de/comments/feed/.

Mehr Infos über RSS und WordPress kannst du im WordPress-Codex nachlesen.

2. Die RSS-Feeds mit Hilfe des Feedburner-Plugins zu Feedburner umleiten

Hast du deine RSS-Feeds bei Feedburner gebrannt kannst du das Feedburner-Plugin für WordPress nutzen, um die RSS-Feeds zu Feedburner umzuleiten.

Merke dir die URLs deiner Feedburner RSS-Feeds und trage diese bei den Plugin-Optionen ein. Das Plugin leitet dann deine WordPress-Feeds automatisch zu Feedburner um.

3. Tipps zur Optimierung deines RSS-Feeds

3.1. Den gesamten Artikel oder nur eine Text-Vorschau im RSS-Feed anzeigen

Unter Einstellungen / Lesen im WordPress-Adminbereich kannst du festlegen, ob du nur eine Text-Vorschau oder den gesamten Artikel in deinem RSS-Feed anzeigen möchtest.

An dieser Stelle kannst du übrigens auch die Anzahl der Artikel im RSS-Feed bestimmen.

3.2. Ähnliche Artikel im RSS-Feed anzeigen

Nutzt du z.B. das Yet Another Related Post WordPress-Plugin (YARP), um eine Liste ähnlicher Blog-Artikel anzuzeigen, kannst du diese Funktion auch ganz einfach in deinem RSS-Feed anbieten. Gehe dazu einfach in die Einstellungen des YARP-Plugins und wähle unter »Darstellung (RSS)« die Option »Änhnliche Beiträge in Feeds anzeigen« und die max. Anzahl der Beiträge aus.

3.3. Dein eigenes Logo im Feedburner-Titel anzeigen

Um deinem Feedburner-Feed einen individuellen Touch zu geben, kannst du rechts oben neben dem Feed-Namen dein eigenes Logo einfügen. Dazu erstellst du ein Bild, das nicht größer als 144px breit und ungefähr 50px hoch sein sollte. Lade das Bild auf deinen Server hoch und kopiere die Bild-URL.

Jetzt gehst du in dein Feedburner-Konto und klickst auf »Optimize«. Im linken Menü findest du den Punkt »Image Feed Burner«. Hier kannst du die URL deines Logos, dein Image Title und einen Image-Link eintragen. Klickst du auf »Activate« wird dein Logo rechts neben der Überschrift in deinem Feedburner-Feed angezeigt.

3.4. Bookmarks und Share-Links in deinen RSS-Feed einbauen

Damit deine Leser die Artikel gleich bei Delicious, Digg & Co abspeichern oder Ihren Freunden auf Facebook oder per Email weiterempfehlen können, kannst du unter jeden Artikel im RSS-Feed entsprechende Links einfügen. Du kannst sogar anzeigen, wie viele Kommentare der Artikel schon hat.

Dazu gehst du in deinem Feedburner-Account auf »Optimize« und wählst im Seiten-Menü »FeedFlare« aus. Hier findest du jede Menge Optionen, die du in deinen RSS-Feed intergrieren kannst. Weiteren Bookmarking-Dienste (z.B. Twit This, Yigg, Wong) findest du unter »Browse the Catalog«.

3.5. Werbung im RSS-Feed anzeigen

Unter dem Punkt »Monetize« hast du die Möglichkeit Google Adsense in deine Feeds zu intergrieren. Um eigene Text- oder Bannerwerbung in deinen RSS-Feeds anzuzeigen, kannst du folgenden Code-Schnipsel in die functions.php Datei deines WordPress-Themes einfügen.

<?php
function insertAds($content) {
$content = $content.'<hr />Hier kannst du deine <a href="http://www.deinedomain.de">Werbung</a> eintragen!<hr />';
return $content;
}
add_filter('the_excerpt_rss', 'insertAds');
add_filter('the_content_rss', 'insertAds');
?>

Code-Quelle mit vielen weiteren Hacks für den RSS-Feed deines WordPress-Blogs: »9 Extremely Useful RSS Tricks and Snippets for WordPress« bei WPBeginner.

4. Den RSS-Feed auf deinem WordPress-Blog promoten

4.1. Die Anzahl der Feed-Abonnenten anzeigen

Es gibt zwei Möglichkeiten die Zahl deiner Feed-Abonnenten auf deinem Blog anzuzeigen. Entweder du verwendest den Feed-Count Banner von Feedburner, indem du in deinem Feedburner-Account auf »Publicize« gehst, und dann im Menü Feed-Count auswählst. Hier kannst du die Farben des Banners anpassen, und zwischen einem statischen und animierten Banner wählen. Anschließend musst du den HTML-Code nur noch in deinen Blog (z.B. in der Sidebar) einfügen, damit der Feedburner-Counter angezeigt wird.

Alternativ kannst du die Abonnenten-Anzahl auch in deinen selbst gestalteten Banner einfügen. Wie das funktioniert und welche Code-Schnipsel du dazu in dein Theme einfügen musst, kannst du auf dem Playground-Blog von Sergej Müller in der hilfreichen Beschreibung »Anzahl der FeedBurner-Abos und Twitter-Follower in WordPress abbilden« Schritt für Schritt nachlesen.

Damit deine Feedburner-Zahlen auch wirklich aufgerufen werden, musst du vorerst die Awareness API unter »Publicize« in deinem Feedburner-Account aktivieren.

Vielen herzlichen Dank an Sergej Müller für diese hilfreichen Tipps und die tolle Beschreibung :-)

4.2. RSS-Feed per Email abonnieren

Um deinen Blog-Lesern die Möglichkeit zu geben, den RSS-Feed auch per Email zu erhalten, kannst du mit Hilfe von Feedburner ein entsprechendes Formular auf deinem Blog integrieren. Dazu gehst du in deinem Feedburner-Account auf »Publicize«, und wählst »Email Subscriptions« im Menü aus.

Hier findest du den ensprechenden Code, den du in deine Webseite einbaust. Du kannst den Code mit CSS noch ein wenig an dein Webdesign anpassen. Möchtest du kein Formular einbauen, sondern lediglich mit einem Link auf das Subscribe per Email Formular hinweisen, kopierst du den Code unter »Subscription Link Code« (auf der gleichen Feedburner-Seite weiter unten), und fügst diesen auf deinem Blog ein.

Hast du deinen RSS-Feed ebenfalls zu Feedburner weitergeleitet, oder nutzt du lieber den Standard-RSS-Feed? Fallen dir noch weitere Möglichkeiten ein, wie man den RSS-Feed mit Feedburner optimieren kann? Über deine Tipps und dein Feedback 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 den Kommentarbereich deines WordPress-Blogs
3. 18 der angesagtesten Social Media-Plugins für deinen WordPress-Blog
4. 12 WordPress-Plugins für den Kontaktbereich deines Blogs
5. WordPress Tipp: Die neusten Blog-Artikel mit Thumbnails anzeigen

1. Die neusten Artikel mit query-posts anzeigen

Um die 5 neusten Artikel deines Blogs anzuzeigen, kannst du folgenden Code verwenden.

<?php query_posts('showposts=5'); ?>
<ul class="recent-posts">
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;?>
</ul>

Natürlich kannst du noch etliche weitere Einschränkungen für die Sortierung der Artikel machen. Um nur die 5 neusten Artikel einer Kategorie (z.B. der Kategorie: News) anzuzeigen, verwendest du folgenden Code.

<?php query_posts('cat=news&showposts=5'); ?>
<ul class="recent-posts">
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;?>
</ul>

Im WordPress Codex findest du eine genaue Beschreibung, was du mit query_posts so alles anstellen kannst.

2. Thumbnail-Bilder hinzufügen

Seit der WordPress-Version 2.9 gibt es eine neue, praktische Möglichkeit Thumbnails für deine Artikel zu verwenden. Eine ausführliche Beschreibung, wie du die Thumbnail-Funktion verwendest findest du im Artikel »Using The New Post Thumbnail Feature In WordPress 2.9«.

Um die Thumbnail-Funktion in deinem WordPress-Theme zu aktivieren, musst du folgenden Code in die functions.php Datei deines Themes einfügen.

if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

Anschließend findest du die neue Option »Beitrags-Miniaturbild« rechts auf der Artikel-Seite im Admin-Bereich. Über »Miniaturbild setzen«, kannst du deinem Artikel ein Thumbnail-Bild hinzufügen.

Um die Thumbnails im WordPress-Loop der index.php und single.php Datei einzufügen, verwendest du jetzt folgenden Code-Schnipsel.

<?php the_post_thumbnail(); ?>

3. Die Thumbnails in der Neusten Artikel-Liste anzeigen

Um die Thumbnails in deiner Neuste Artikel-Auflistung anzuzeigen, erweiterst du Codeaus Schritt 1 um folgende Zeile (Zeile 5 in der Code-Ansicht).

<?php query_posts('cat=news&showposts=5'); ?>
<ul class="recent-posts">
<?php while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array( 90,90 ), array( 'class' => 'recent-thumbs' )); ?></a>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
</li>
<?php endwhile;?>
</ul>

In meinem Beispiel linke ich vom Thumbnail auf den jeweiligen Artikel, verkleinere die Größe der Thumbnails auf 90×90 Pixel und gebe ihnen die CSS-Class: recent-thumbs. So kann ich meine Neusten Artikel später leichter mit CSS stylen.

Das war’s auch schon, deine neusten Artikel sollten jetzt inklusive Thumbnails angezeigt werden.

Hast du noch Fragen oder Anregungen zu meinem kleinen WordPress-Tutorial? Dann schreibe mir doch einfach einen Kommentar. Ich freue mich auf dein Feedback!

Ä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. 18 der angesagtesten Social Media-Plugins für deinen WordPress-Blog
4. So optimierst du deinen WordPress RSS-Feed mit Feedburner
5. Die beliebtesten Artikel im WordPress-Blog anzeigen – mit oder ohne Plugin

Uns so funktioniert’s

Anstelle des einfachen RGB-Farbwerts (rgb = red, green, blue) gibst du den RGBA-Wert an. A stellt dabei für Alpha, und gibt den Alphakanal Transparenz-Wert deiner RGB-Farbe an.

Der CSS-Code sieht so aus:

background: rgba(255, 255, 0, .5);

Schau dir ein paar Beispiele für die CSS3 RGBA-Funktion an!

Leider unterstützen der Internet Explorer und Opera RGBA noch nicht. Als Alternative kannst du einen ähnlichen RGB-Farbwert angeben, oder ein transparentes PNG aufrufen. Mehr Infos zur Browser-Unterstützung von RGBA kannst du in Chris Coyiers Artikel »RGBa Browser Support« auf CSS-Tricks nachlesen.

Wie nützlich findest du die CSS3-Funktion RGBA? Verwendest du sie schon in deinen Projekten, oder warest du lieber bis RGBA von allen Browsern unterstützt wird? Deine Meinung zum Thema interessiert mich sehr. Schreibe mir doch einfach einen Kommentar!

Ähnliche Artikel zu diesem Thema

1. So optimierst du den Kommentarbereich deines WordPress-Blogs
2. 20 Google Chrome Extensions für Webdesigner und Programmierer
3. Layout-, Raster- und Mockup-Tools und Ressourcen für Webdesigner
4. Rudi the Rabbit wünscht Frohe Ostern – kostenlose Osterhasen-Icons downloaden
5. Hintergrund-Verläufe mit CSS3

Öffne dazu ein neues Photoshop-Dokument. Wenn du möchtest, kannst du dir Hilfslinien einrichten.

Abgerundetes Rechteck

Dann wählst du das Abgerundetes-Rechteck-Werkzeug (U) aus. Der Radius für die abgerundeten Ecken sollte auf 5px eingestellt sein. Danach ziehst du deinen Button in gewünschter Größe auf. Im Augenblick spielt die Farbe des Feldes noch keine Rolle, da du später einen farbigen Verlauf erstellen wirst.

Als nächstes wandelst du die Form in ein »Smart Object« um, indem du mit der rechten Maustaste auf die Ebene klickst, und »Smart Object« aus dem Dropdown-Menü wählst.

Jetzt klickst du mit einem Doppelklick auf die Ebene, um das Fenster für die Ebenenstile zu öffnen.

Schlagschatten

Klicke im linken Menü auf Schlagschatten, und stelle dir die Einstellungen so ein, dass du mit dem äußeren Schatten um dein Feld zufrieden bist. Meine Einstellungen sehen so aus:

Bestätige deine Einstellungen mit ok.

Schatten nach Innen

Öffne wieder die Ebenenstile mit einem Doppelklick auf die Ebene und wähle im Menü »Schatten nach innen«. So kannst du eine leicht helle Kante erzeugen, durch die dein Button eine gewisse Stärke bekommt.

Hier meine Einstellungen:

Verlauf erstellen

Um deinem Button eine Farbe und einen ganz dezenten Verlauf zu geben, gehst du im Menü der Ebenstile auf »Verlaufsüberlagerung«.

Ich habe einen leichten Grün-Verlauf gewählt, indem ich mit einem Doppelklick den ursprünglichen Verlauf angeklickt habe. Hier kannst du deine Button-Farben wählen. Die Farbe sollte oben heller sein, als unten.

die Textebene

Dein Button ist soweit fertig, jetzt brauchst du nur noch deinen Text, oder Icon für den Button.
Dazu erstellt du eine Textebene, und schreibst deinen Text in das Feld.

Jetzt öffnest du wieder mit einem Doppelklick die Ebenstile deiner neuen Textebene.

Wähle Schlagschatten, und gib dem Schatten eine weiße Farbe. Dadurch wirkt dein Text wie in den Button eingestanzt. Meine Einstellungen für den Schlagschatten siehst du hier.

Bestätige deine Eingaben und klicke auf Schatten nach innen, um den Effekt von eingestanztem Text noch zu verstärken. Stelle hier folgende Einstellungen ein.

Wähle dann »Farbüberlagerung« aus dem Ebenstil-Menü, so stellst du die Farbe des Textes bzw. Icons ein.

Das war’s auch schon! Fertig ist dein Photoshop-Button :-) Natürlich kannst du mit den Effekten ein bisschen herumspielen, bis dir dein Ergebnis so richtig gut gefällt. Ich hoffe dir hat mein kleines Tutorial gefallen, und du hast jede Menge Spaß dabei deine eigenen Buttons zu erstellen.

Ähnliche Artikel zu diesem Thema

1. So erstellst du ein stylisches Logo in Photoshop und Illustrator
2. Ein Roboter-Maskottchen entsteht (Teil 2): Illustration mit Adobe Illustrator
3. Transparente Farben mit der CSS3-Funktion RGBA
4. Hintergrund-Verläufe mit CSS3
5. Jede Menge Javascript-Slider mit dem jQuery Cycle Plugin erstellen

Das Anlegen von Pinselspitzen in Photoshop ist wirklich ganz einfach (ab CS2, die älteren Photoshop-Versionen erlauben leider keine hohe Auflösung), und deiner Kreativität sind keine Grenzen gesetzt. Ich erkläre dir kurz, wie’s funktioniert!

1. Erstellen der Vorlage

Als erstes erstellt du dir eine Vorlage, aus der du einen Brush machen willst. Ich habe z.B. mit japanischer Tusche und einem Kalligrafie-Pinsel auf sehr dünnes Japan-Papier gemalt. Diese Vorlage scannst du in hoher Auflösung ein.

2. eine neue Datei anlegen

Jetzt erstellst du dir ein leeres Photoshop-Dokument. Die max. Größe für Brushes ab PS CS2 ist 2500x2500px. Füge jetzt dein eingescanntes Bild in diese neue Datei ein. Da Photoshop-Pinsel immer schwarz/weiß sind, kannst du den Farbmodus auf Graustufen setzen.

3. Farbwerte bearbeiten

Als nächstes musst du lediglich mit Hilfe der Einstellungen Tonwertkorrektur, Kurven und Helligkeit/Kontraste deinen Pinsel so einstellen, wie er dir am besten gefällt. Versuche dabei so viele Details wie möglich zu erhalten, damit dein Pinsel authentisch wirkt. Du solltest außerdem darauf achten, das keine Pixel am Bildrand angeschnitten sind. Diese kannst du weg radieren.

4. Pinsel anlegen

Ist deine Pinsel-Struktur fertig, musst du das Bild nur noch in einen Pinsel umwandeln. Dazu gehst du auf »Bearbeiten/Pinselvorgabe festlegen…«

Jetzt gibst du deinem Pinsel noch einen Namen. Willst du ein ganzes Pinsel-Set anlegen, nummerierst du die Pinsel am besten durch.

Das war’s schon! Deine neuer Pinsel erscheint in deinem Pinsel-Fenster.

5. Brush-Set speichern

Um ein ganzes Pinsel-Set als ABR-Datei zu speichern, öffnest den Vorgaben-Manager im Pinsel-Fenster und wählst alle Pinsel an, die du zusammen speichern möchtest. Jetzt klickst du auf »Set speichern« und benennst deine Brush-Set Datei.

Um die Pinsel auch auf einem anderen Computer nutzen zu können, musst du lediglich die ABR-Datei in den Ordner Programme/Adobe/Photoshop/Presets/Brushes einfügen. In deinem Pinsel-Fenster kannst du jetzt unter »Optionen/Pinsel laden…« das neue Set in in dein Photoshop-Programm laden.

Ich wünsche dir ganz viel Spaß beim Arbeiten mit Photoshop-Pinseln. Schau dir doch auch mal die kostenlosen Brush-Sets Japanese-Ink-Brushes und Monster-Brushes hier auf dem Blog an!

Ähnliche Artikel zu diesem Thema

1. So erstellst du ein stylisches Logo in Photoshop und Illustrator
2. WordPress Tipp: Die neusten Blog-Artikel mit Thumbnails anzeigen
3. Jede Menge Javascript-Slider mit dem jQuery Cycle Plugin erstellen
4. Stylische Web 2.0 Buttons in Photoshop erstellen
5. Schriften mit @font-face einbetten, so funktioniert’s

Öffne also die single.php Datei in deinem Theme und suche diese Zeile:

<?php the_content(__('')); ?>

Darunter fügst du jetzt folgenden Codeschnipsel ein:

<div class="postauthor">
<?php echo get_avatar( get_the_author_id() , 80 ); ?>
<h4>Autor des Artikels: <?php the_author(); ?></h4>
<p><?php the_author_description(); ?></p>
</div><!--end postauthor-->

Jetzt öffnest du deine style.css Datei und fügst diese Styles hinzu:

.postauthor {
    position: relative;
    overflow: hidden;
    background: #EFE9DF;
    border: 1px solid #AA9B8A ;
    padding: 15px;
    margin: 10px 0;
}

.postauthor h4 {
   font-size: 24px;
   margin: 0 0 10px 0;
}

.postauthor img {
   float: left;
   background:#C9BBAA;
   border:#AA9B8A solid 1px;
   margin:0 20px 0 0;
   padding:5px;
}

Du solltest die Styles natürlich jetzt noch an dein eigenes Design anpassen.

Falls du noch kein Beschreibungstext für die Autoren angelegt hast, kannst du diesen im WordPress-Admin unter Autoren & Benutzer bei »Biographischen Angaben« einfügen.

Eine sehr detailierte Beschreibung und etliche weitere Optionen zum Thema Autorenfeld findest du auf dem Themeforest-Blog.

Hast du Fragen zum Code oder der Beschreibung, dann schreibe mir doch einfach einen Kommentar. Ich freue mich auf deine Nachricht!

Ähnliche Artikel zu diesem Thema

1. Jede Menge Tipps und Plugins, um die Artikelseiten in WordPress zu optimieren
2. So optimierst du den Kommentarbereich deines WordPress-Blogs
3. Jede Menge Tipps & Tricks, um die WordPress-Suche zu verbessern
4. So optimierst du deinen WordPress RSS-Feed mit Feedburner
5. WordPress Tipp: Die neusten Blog-Artikel mit Thumbnails anzeigen

Plugins zur Anpassung der Login-Seite

Es gibt einige WordPress-Plugins, mit deren Hilfe du den Adminbereich anpassen kannst. Mit dem Plugin Custom Admin Branding kannst du z.B. das WordPress-Logo auf der Login-Seite durch ein Firmenlogo ersetzten. Auch das WP-Logo oben in der Adminleiste und den Footer kannst du mit Hilfe des Plugins ganz einfach umgestalten.

Mit dem sehr beliebten BM Custom Login kannst du das Loginformular ebenfalls in ein paar Schritten an dein eigenes Webdesign anpassen. Als Inspirationsquelle kannst du dir die Bilder der Flickr-Gruppe zum Plugin anschauen. Hier findest du jede Menge kreative WordPress-Loginseiten.

Anpassung ohne Plugin

Auf dem Prodesign-Blog findest du eine Anleitung, um den Loginbereich auch ohne Hilfe eines Plugins umzugestalten. Mit Hilfe weniger Codeschnipseln und ein paar zusätzlichen CSS-Styles kannst du so ebenfalls deine eigene Login-Seite erstellen.

Ich finde eine individuelle Login-Seite ist gerade für ein Firma, die WordPress als CMS nutzt ein tolles Feature. Was hältst du von einem individuellen WordPress-Login? Kennst du noch weitere Plugins, die bei der Anpassung des Logins hilfreich sind?

Schreib mir dein Feedback doch einfach in einem Kommentar. Ich freue mich schon auf deine Nachricht!

Ähnliche Artikel zu diesem Thema

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

Um alle Funktionen im Illustrator besser zu sehen, schaust du dir das Video am besten im Vollbildmodus an. Ich wünsche dir ganz viel Spaß bei meinem kleinen Illustrator-Tipp!

Ich hoffe dir hat dieser kleine Tipp weitergeholfen. Hast du Fragen oder Feedback, schreibe mir doch einfach einen Kommentar. Ich freue mich schon auf deine Nachricht!

Ähnliche Artikel zu diesem Thema

1. So erstellst du ein stylisches Logo in Photoshop und Illustrator
2. Ein Roboter-Maskottchen entsteht (Teil 2): Illustration mit Adobe Illustrator
3. WordPress Tipp: Die neusten Blog-Artikel mit Thumbnails anzeigen
4. Illustrator-Tutorial: 3D-Effekte im Einsatz
5. Illustrator-Tutorial: eine Logo-Reflexion erstellen

Um alle Schritte im Illustrator-Programm genau mitzuverfolgen, schaust du dir das Video am besten im Vollbildmodus an.

Hier kannst du dir die Vektordatei downloaden

3D-Effekt-Illustrator.eps (Dateigröße 2,16 MB)

Wie hat dir mein Tutorial gefallen? Hast du Fragen oder Anregungen zu den verwendeten Funktionen? Schreibe mir doch einfach einen Kommentar, ich freue mich schon auf dein Feedback!

Ähnliche Artikel zu diesem Thema

1. So erstellst du ein stylisches Logo in Photoshop und Illustrator
2. Ein Roboter-Maskottchen entsteht (Teil 2): Illustration mit Adobe Illustrator
3. Illustrator Tutorial: Konturen und Effekte skalieren kurz erklärt
4. Illustrator-Tutorial: eine Logo-Reflexion erstellen
5. It’s Freebie-Time: Music Twitter-Icons zum kostenlosen Download

Reflexion Vektor-Logo zum downloaden:

Wie immer kannst du dir die Vektordatei des Tutorials hier herunterladen!
logo-reflextion.eps (Dateigröße 1.79 MB)

Wie hat dir Manuels Illustrator-Tutorial gefallen? Für Fragen, Feedback oder Tipps schreib doch am besten einen Kommentar. Wir freuen uns schon auf deine Nachricht!

Ähnliche Artikel zu diesem Thema

1. So erstellst du ein stylisches Logo in Photoshop und Illustrator
2. Ein Roboter-Maskottchen entsteht (Teil 2): Illustration mit Adobe Illustrator
3. Leckere Sushi Restaurant-Icons kostenlos downloaden
4. Sweet Chocolate Vektor Icon-Set kostenlos downloaden
5. Illustrator Tutorial: Konturen und Effekte skalieren kurz erklärt

Wie immer schaust du dir das Vimeo-Video am besten im Vollbildmodus an. Ganz viel Spaß beim Zuschauen und Ausprobieren!

Grungy Vektoren downloaden

Hier kannst du dir die EPS-Datei mit den Grungy-Vektoren runterladen:
Elmastudio-Grungy-Vectors.eps (Dateigröße: 4,2MB)

Hat dir das Video-Tutorial gefallen? Hast du Fragen zu den verwendeten Illustrator-Funktionen, oder Anregungen für weitere Tutorials? Dann schreib doch am besten einen Kommentar, wir freuen uns auf deine Nachricht!

Ähnliche Artikel zu diesem Thema

1. So erstellst du ein stylisches Logo in Photoshop und Illustrator
2. Stylische Web 2.0 Buttons in Photoshop erstellen
3. Für Photoshop-Fans: Pinsel-Sets selbst erstellen
4. WordPress Tipp: Ein Autorenfeld einfügen
5. Illustrator Tutorial: Konturen und Effekte skalieren kurz erklärt

Um alles genau verfolgen zu können, schaust du dir das Video am besten im Vollbildmodus an. Viel Spaß beim Tutorial!

Hier kannst du das fertige Vektorbild downloaden:

Vektorblume.eps (Dateigröße 6,0 MB)

Hast du Fragen, Anregungen oder Feedback zum Tutorial? Dann schreib doch einfach einen Kommentar! Wir freuen uns, über deine Nachricht :-)

Ähnliche Artikel zu diesem Thema

1. So erstellst du ein stylisches Logo in Photoshop und Illustrator
2. Ein Roboter-Maskottchen entsteht (Teil 2): Illustration mit Adobe Illustrator
3. Stylische Web 2.0 Buttons in Photoshop erstellen
4. WordPress Tipp: den Login-Bereich individuell gestalten
5. Illustrator Tutorial: Konturen und Effekte skalieren kurz erklärt

All unsere Vimeo-Videos kannst du jetzt übrigens direkt hier auf der Seite in hoher HD-Qualität anschauen. Am besten natürlich im Vollbildmodus. Viel Spaß beim Tutorial!

Buttons als Vektordatei downloaden:

Du kannst dir die EPS-Datei der Buttons herunterladen, und sie für dein nächsten Projekt verwenden :-)
Glossy-Buttons.eps (Dateigröße 2.03 MB)

Hat dir Manuels Tutorial gefallen? Hast du Fragen zu den verwendeten Funktionen, Anregungen oder Tipps? Dann schreib uns doch einen Kommentar, wir freuen uns über Feedback!

Ähnliche Artikel zu diesem Thema

1. So erstellst du ein stylisches Logo in Photoshop und Illustrator
2. Ein Roboter-Maskottchen entsteht (Teil 2): Illustration mit Adobe Illustrator
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

Um alle Schritte genau nachvollziehen zu können, schaust du dir das Video am besten im Vollbildmodus an. Viel Spaß beim Tutorial!

Hat dir Manuels Screencast gefallen? Hast du Fragen oder Anregungen zum Video, oder den Illustrator-Funktionen, die Manuel im Video verwendet? Schreib uns doch einfach einen Kommentar, wir freuen uns auf deine Nachricht!

Ähnliche Artikel zu diesem Thema

1. So erstellst du ein stylisches Logo in Photoshop und Illustrator
2. Ein Roboter-Maskottchen entsteht (Teil 2): Illustration mit Adobe Illustrator
3. Illustrator Tutorial: Konturen und Effekte skalieren kurz erklärt
4. Illustrator-Tutorial: 3D-Effekte im Einsatz
5. Illustrator-Tutorial: eine Logo-Reflexion erstellen

1. neue Möglichkeiten mit CSS3

Die neuen Möglichkeiten von CSS3 werden derzeit unter Webdesignern heiß diskutiert. Die Möglichkeit von abgerundeten Ecken ganz allein mit CSS Styles gehört u.a. zu den neuen Features.

Die Methode ist simpel. Füge deinem div einfach die folgenden CSS Styles hinzu:

.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Diese Methode ist fantastisch simpel und der Code sauber, doch wie könnte es anders sein, hat sie natürlich einen Haken. Leider wird diese Methode nicht von Internet Explorer und älteren Versionen anderer Browser unterstützt.

Wenn die abgerundeten Ecken für dein Design nicht unbedingt notwendig sind, und du mit der Option, ist diese neue Methode aber sicherlich eine tolle Option.

Noch mehr Infos über die neuen Möglichkeiten und Highlight von CSS3 kannst du auch in dem Artikel »11 Classic CSS Techniques Made Simple with CSS3« bei Nettuts nachlesen. Die neusten Infos und Diskussionen rund um das Thema CSS3, findest du außerdem auf der Webseite www.css3.info.

2. abgerundete Ecken mit Javascript

Eine weitere einfach, und vor allem Browser-kompatible Methode, um abgerundete Ecken zu erzeugen, ist die Möglichkeit das Javascript zu verwenden.
Downloade dir dazu einfach die aktuelle Version von Jquery und das Javascript-Plugin Corners, und rufe beides im Head-Bereich deines Codes auf.

Füge dann noch für die entsprechende div-class diese Funktion ein:

<script type="text/javascript"> $(function(){ $('.box').corners('10px'); }); </script>

Diese Methode funktioniert natürlich nur, wenn der Betrachter Javascript zugelassen hat. Ansonsten werden, wie auch bei der CSS3 Methode, normale Ecken angezeigt.

3. abgerundete Ecken mit CSS und Images

Falls du ganz sicher gehen möchtest, dass deine abgerundeten Ecken in allen Browsern (auch älteren Version von IE) angezeigt werden, ist diese Methode wohl derzeit die einzige Option.

Zuerst erstellt du vier Images deiner abgerundeten Ecken mit Photoshop oder Fireworks als Vorlage. Diese Vorlagenbilder setzt du dann als Background-Image in deine CSS Styles ein.

Der Vorteil, dieser Methode ist, dass du die vorbereiteten Ecken auf verschiedene Flächen mit unterschiedlicher width und height (also Länge und Breite) anwenden kannst.

Bist du sicher, dass du die Ecken nur in einer Größe benötigst, kannst du auch nur zwei Vorlagenbilder (eines für die oberen zwei Ecken, eines für die unteren zwei) erstellen.
Eine ausführliche Beschreibung dieser Methode kannst du dir auch in dem Screencast-Video bei CSS-Tricks anschauen. Chris Colyier erklärt hier alle Methoden, um abgerundete Ecken zu erstellen, noch einmal ganz ausführlich.

Welche Methode verwendest du am liebsten, um abgerundete Ecken in deinem Webdesign darzustellen? Hast du weitere interessante Tipps zum Thema abgerundete Ecken? Dann schreib mit doch einen Kommentar, ich freue mich schon auf dein Feedback.

Ähnliche Artikel zu diesem Thema

1. Mach dich fit für CSS3 mit diesen praktischen CSS3 Online-Tools
2. Die 10 schönsten JavaScript-Plugins für dein Portfolio
3. JavaScript Dropdown-Menüs mit Superfish
4. Transparente Farben mit der CSS3-Funktion RGBA
5. Meine Top 10 JavaScript-Plugins

1. Schrift in Pfade umwandeln

Als ersten Schritt solltest du deine Logoschrift in Pfade umwandeln (Schrift / Pfade umwandeln oder Shift+Strg+O). Lege dann eine zweite Ebene an und kopiere dein Logo. Füge das Logo mit Strg+F auf die neue Ebene ein.

2. Die Form der Reflektion erstellen

In der zweiten Ebene erstellst du jetzt mit dem Pfadwerkzeug eine Form, die dein Logo ungefähr in der Mitte zerschneidet. Ich habe meiner Form eine leichte Wellenlinie gegeben.

3. Das Logo teilen

Am besten färbst du jetzt dein oberes Logo in einer anderen Farbe (z.B. grün). Wähle dann das grüne Logo zusammen mit der Wellenfläche an, und wähle im Pathfinder, Fläche aufteilen aus. So trennst du das grüne Logo in zwei teile.

Jetzt kannst du den unteren Teil, zusammen mit der Wellenfläche löschen. Dein ursprüngliches (schwarze) Logo auf der unteren Ebene kommt wieder zum Vorschein.

4. Einen Verlauf erstellen

Sperre jetzt deine Ebene mit dem grünen Logoteil, und blende diese Ebene aus. Deinem schwarzen Logo gibst du jetzt einen Verlauf. Ich habe zwei Blautöne gewählt.

Zusätzlich zum Verlauf kannst du deinem Logo mit einer dunkleren Farbe noch den Effekt Schein nach Innen geben (bei Effekt / Stilisierungsfilter / Schein nach Innen).

5. Den Blendeneffekt erzeugen

Jetzt machst du die obere Ebene mit dem grünen Logoteil wieder sichtbar, und gibst diesem einen Weiß-Blendeneffekt.

Richte den Weißübergang jetzt bei Verlauf im 90Grad-Winkel aus, und stelle in auf Linear.

Die Deckkraft des Weißübergangs setzt du auf 40%.

Der Verlauf des Logos ist fertig. Jetzt fehlt nur noch die Spiegelung im Boden.

6. Die Spiegelung im Boden erzeugen

Gruppiere deine Ebenen und kopiere das Logo. Erstelle eine neue Ebene, und füge das Logo mit Strg+F auf die neue Ebene ein. Jetzt kannst du dieses Logo spiegeln (Objekt / Transformieren / Spiegeln).

Erstelle ein Rechteck, und stelle die Deckkraft auf 60 Prozent. Gib dieser Fläche einen Verlauf von Schwarz auf Weiß. Schiebe den Schwarz-Regler etwas nach rechts.

Wähle jetzt die Fläche zusammen mit dem dem gespiegelten Logo aus. Wähle im Verlaufsfenster, bei zusätzlichen Optionen, Deckkraftmaske erstellen.

Setze die Deckkraft der Spigelung jetzt auf 40 Prozent. Deine Spiegelung im Boden ist jetzt fertig.

7. Verlauf im Hintergrund

Als letzten Schritt kannst du noch einen Verlauf in Hintergrund setzen. Dazu legst du am besten noch einmal eine neue Ebene in den Hintergrund an.

Erstelle eine rechteckige Fläche und gebe ihr einen Verlauf von Hellblau zu Weiß. Schiebe den Weiß-Regler weit nach rechts (ungefähr 90%).

Und das wars auch schon, dein Logo mit Reflektion ist fertig.

Ich hoffe, dir hat mein Tutorial gefallen, und du hast Lust bekommen, diesen tollen Illustrator-Effekt selbst einmal auszuprobieren.

Wenn du Fragen oder Feedback zu meinem Tutorial hast, würde ich mich über ein Kommentar von dir sehr freuen.

Ähnliche Artikel zu diesem Thema

1. So erstellst du ein stylisches Logo in Photoshop und Illustrator
2. Ein Roboter-Maskottchen entsteht (Teil 2): Illustration mit Adobe Illustrator
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

Der WordPress Header Teil 1

Der WordPress Header Teil 2

Hat dir mein WordPress-Screencast gefallen? Hast du noch Fragen an mich? Schreib doch einfach unten einen Kommentar, ich freue mich sehr über deine Nachricht!

Ähnliche Artikel zu diesem Thema

1. WordPress Tipp: Ein Autorenfeld einfügen
2. Illustrator Tutorial: Konturen und Effekte skalieren kurz erklärt
3. WordPress-Hack: Text automatisch in den Texteditor einfügen
4. Illustrator-Tutorial: 3D-Effekte im Einsatz
5. Illustrator-Tutorial: eine Logo-Reflexion erstellen