Schritt 1

Ihr legt ein neues Dokument (300×300 im Beispiel) an und wählt eine Hintergrundfarbe, vorzugsweise Schwarz. In diesem Dokument erstellen wir nun mit dem abgerundeten Rechteck-Werkzeug eine weiße Form, wie im Bild zu sehen. Die Maße betragen in etwa 175×30 px - ist jedoch geschmackssache.

Schritt 2

Unser abgerundetes Rechteck bekommt nun einen Farbverlauf von einem dunkleren Türkis (#0099CC) in ein helleres Türkis (#00CCFF).

Schritt 3

Unser abgerundetes Rechteck erhält nun noch den Filter “Inneres Glühen” mit den angegebenen Werten und als Farbe #006699

Schritt 4

Das abgerundete Rechteck wird nun dupliziert

Die Ecken müssen etwas spitzer gemacht werden, damit wir es schmaler machen können.

Nun nehmen wir noch die den Farbverlauf heraus, setzen die Farbe auf weiß und löschen den “Inneres Glühen”-Filter. Die Ecken rundet Ihr wieder ab.

Schritt 5

Nun bekommt unser kleineres abgerundetes Rechteck die Option “Ausblendbild”

Der Verlauf darf nicht ganz senkrecht sein, sondern muss ganz leicht schräg sein, sodass man am rechten Ende des Rechteckes noch etwas Weiß sieht. Den Mischmodus stellt Ihr nun auf “Überlagerung” bzw. “Ineinanderkopieren” in älteren Fireworks Versionen.

Schritt 6

Nun erstellen wir mit dem Ellipsen-Werkzeug eine Ellipse mit folgender Form und geben ihr einen Feder-Rand mit dem Wert “30″ und einer Opazität (Transparenz) von “40%”.

Wenn wir die Elipse in den Ebenen nun noch in die Mitte packen, sind wir mit diesem Schritt fertig.

Schritt 7

Wir duplizieren unser großes abgerundetes Rechteck erneut, stellen als Farbe weiß (#FFFFFF) ein und entfernen den “Inneres Glühen”-Filter.

Mit dem Pfad-Werkzeug erstellen wir nun erstmal solch eine simple Form über die Hälfte des weißen Rechteckes.

Wenn wir fertig sind wählen wir kurz den weißen Mauszeiger, markieren die Form und wählen erneut das Pfad-Werkzeug, um in der Mitte des unteren Randes einen neuen Punkt hinzuzufügen.

Nun ziehen wir diesen Punkt mit dem weißen Mauszeiger noch etwas zurecht und verschieben das Rechteck etwas nach links, wie im Bild zu sehen.

Wir markieren beide Objekte und wählen “Modifizieren” -> “Pfade Kombinieren” “Überschneiden” aus.

Schritt 8

Das entstandene Objekt bekommt einen Verlauf - oben weiß und unten ein helles Türkis.
Wir legen es jetzt über unser Button und geben der Form noch eine Opazität (Transparenz) von 25%.

Schritt 9

Dieser Schritt ist recht spontan entstanden und im Button-Überblick ganz oben nicht mit enthalten.
Wir duplizieren unser fundamentales abgerundetes Rechteck erneut, lassen dieses Mal aber Verlauf, Farbe und “Inneres Glühen” drin. Wir verkleinern es von der Breite her ein wenig, geben dem Objekt den Filter “Gauß Verwischen” mit einem Wert von 3.3 und legen es in den Ebenen ganz nach unten.

Schritt 10

Wir markieren nun alle Objekte und gruppieren sie (Str+G).

Schritt 11

Die Gruppierung wird nun dupliziert, vertikal gekippt und bekommt erneut ein “Ausblendbild”

Wir stellen nun noch den Verlauf ein und geben dem Ganzen eine Opazität von 70%.

Fertig ist unser Button im Web 2.0 Style

Logo-Showcases zur Inspiration

Logofi, logopond und faveup sind fantastische Logo-Sammlungen. Jeder kann dort Logos veröffentlichen und sie anschließend bewerten lassen. Darüber hinaus sind es tolle Tolle, wo man sich Inspiration für das eigene Logo-Design holen kann.

LOGOFI - Get INSPIRED. GET LOGOFI’D

logopond - identity inspiration

faveup

Logo-Design-Prozesse & HOW TOs

The Logo Design Process from Start to Finish

In diesem Design-Verlauf wird darauf eingegangen, wie das Logo mit Beginn des Auftrages bis hin zu Skizzen und Font-Auswahl entstanden ist. Sehr interessant!

Creating a crazy cool logo

Auf abduzeedo.com wird hier erklärt, wie ihr in Adobe Illustrator ein Logo anfertigt. Das Ergebnis kann sich sehen lassen!

How to Create a professional Logo

Webdesignerdepot.com zeigt euch von der Skizze beginnend, wie Ihr ein Logo umsetzt und auf welche technischen Details ihr achten solltet.

How to Design a Logo

Justcreativedesign.com erklärt, welche Grundprinzipien für das Designen von Logos wichtig sind und was man dafür lernen muss.

The Logo Design Process of TOP Logo Designers

Wie geht eigentlich ein Designer an das Designen von Logos? In diesem Artikel werden die Schritte bis hin zum fertigen Logo beleuchtet und erklärt.

Design a Logo - The Ultimate Guide

Sikbox Logo Design Process

Anhand eines Beispiels aus der Praxis - dem Logo von sikbox.com - wird der Prozess des Designs erklärt. Auch hier wurden zu Beginn viele Skizzen angefertigt, um dann mehrere Versionen digital umzusetzen. Der beste digitale Entwurf wurde dann in vielfacher Weise farblich gestaltet.

Logo Sammlungen

Auf den folgenden Websites werden viele Logos gesammelt. Beim Durchschauen hat man eine Menge zu tun, doch es lohnt sich garantiert. Außerdem bieten die Sammlungen grandiose Inspiration.

15+ Amazingly Clever Logos

Inspire Yourself: 58 Creative Logos

Show me some well designed logos!

50 Stunning Examples of a great redesign

Vor allem in dieser Sammlung ist der Prozess vom alten zum neuen Logo sehr interessant.

Logo Design Trend 2009

Artikel über das Logo-Design

Why logo design does not cost $5.00

Nicht jeder versteht, warum nicht nur große Unternehmen sehr viel Geld für Logos ausgeben. Es ist ein elementarer Bestandteil jedes Unternehmens und muss sofort überzeugen, da es meistens das Erste ist, was ein Kunde vom Unternehmen zu sehen bekommt. Auch in diesem Artikel wird davon gesprochen, warum ein Logo nicht nur $5 kostet.

How To Use Colour In Logo Design To Effectively Communicate The Right Message

Logo Typografie

Auf diesen Websites bekommt man viele Ideen, welchen Font man für sein Logo nutzen könnte bzw. welche sich gute eignen würden. Außerdem könnt ihr erfahren, welche Schriftarten bekannte Websites sowie große Unternehmen für ihr Logo benutzen.

Welches Unternehmen benutzt welchen Font?

The Logos of Web 2.0

Great Fonts for Web 2.0

Logo Websites

Am Ende noch einige weiterführende Websites, die man sich unbedingt merken sollte. Sie widmen sich Logos bzw. dem Design von Logos und veröffentlichen zu diesem Thema regelmäßig Artikel und bieten eine Menge interessanten Lesestoff.

logolounge.com

LOGODESIGNLOVE.com

LogoDesignerBlog.com

Designguide.at

Nano icon set - Dock Icon

Icon Set

Simplexity File Icons

Black Pearl Files

Onibari Leopard Made

Green Icon Set

Feed Icons

Sticky Pack

Knob Button Toolbar Icons

Aquaticus Social

Social Icons - Digg, Twitter, Stumble, RSS, Delicious & Reddit

Socialize Icons

Hand drawn social media icon set

Vector Social Bookmark Icons

Glossy Blogging Icon Sets

Icon Set

Free eCommerce Icons

Math Document

Simple Life

affel PNGs

Free Icons

Social Web Buttons

Email Me

OSE PNGs

Bright! Free Icon Set

Sticker Pack

Light Icons

Free Web Development Icon Set

Web Icon Set

Vaga

Web Application Icon Set

Icon Set Sketch’d Up

Function Free Icon Set

Vector Icon Set

Milky Icon Set

RSS Icon Campaign

Pure Icon Pack

Weitere Icon Set Sammlungen

40 Professional Icon Sets For Free Download

96 of the Best Ever Free Icon Sets - For Web Designers, Developers and Bloggers

Top 50 Supercool Free Icon Sets

40+ Extremely Beautiful Icon Sets Hand-picked from deviantART

21 Best Icon Sets for Designing Web Apps

35 (Really) Incredible Free Icon Sets

Schritt 1

Ihr legt ein neues Dokument (400×400 im Beispiel) an und wählt eine Hintergrundfarbe, vorzugsweise Weiß.

Schritt 2

Nun schnappt Ihr Euch das Pfad-Werkzeug (P) und zieht damit solche Pfade, wie ich es (im Bild zu sehen) getan habe.

Das macht Ihr vorzugsweise drei Mal. Ihr könnt auch mehr Pfade ziehen, aber umso mehr Pfade Ihr erstellt, desto mehr kurbelt der Prozessor später. Achtet beim Erstellen der Pfade darauf, dass sie sich oft überschneiden.

Schritt 3

Nun noch schnell jedem Pfad eine andere Farbe verpasst und ab geht’s zum Schritt 4.

Schritt 4

Markiert die drei Pfade, geht rechts unten auf die Registerkarte “Pfade” und wählt bei “Ändern” den Punkt “Pfade mischen” aus.

Setzt eine Zahl ein, wieviele Schritte zwischen den Pfaden erstellt werden sollen. Je höher die Zahl, desto “weicher” und fließender werden die Übergänge - desto mehr kurbelt aber auch euer Rechner. Ich habe 250 gewählt.

Nach kurzer Rechenzeit sieht das Ganze dann so aus:

Schritt 5

Nun wird die Gruppierung dieses Objektes zwei Mal aufgehoben (Strg+Shift+G),

was anschließend so aussehen sollte

Schritt 6

Markiert alle Pfade und stellt die Transparenz auf einen niedrigen Wert zwischen 0 und 15. In diesem Fall habe ich “8″ gewählt.

Schritt 7

Markiert alle Pfade wieder und gruppiert sie (Str+G). Dupliziert das Objekt und wandelt es in eine Bitmap-Grafik um (”Modifizieren” > “Auswahl als Hintergrund”). Dieser Bitmap-Grafik weist Ihr den Gausch-Verwischen-Filter.

Schritt 8

Erstellt einen großen Kreis über beide Objekte mit der Verlaufsoption “Radial”

Der Kreis muss nach außen hin ins Transparente verlaufen und den Misch-Modus “Überagerung” bzw. “Ineinanderkopieren” (ältere Fireworks Version) haben.

Das war’s schon. Unser fertiges Endprodukt sieht dann wie folgt aus:

Wladislaw Sokolowskij’s Personal Playground & Portfolio

Hi Wladislaw, zu Beginn möchte ich mich bedanken, dass Du dir Zeit nimmst, um meine Fragen zu beantworten!

1. Kannst Du uns ein wenig zu deiner Person erzählen und wie Du zum Grafiker bzw. Designer geworden bist?

Servus!
Ich heiße Wladislaw Sokolowksij, geboren 86 in Kiew/Ukraine lebhaft seit 18jahren in München.

Begonnen hat alles mit einer private Funpage.
Das Interesse wurde größer in diesem Bereich was zu machen, so fing ich an Artworks, Logos usw zu gestalten. 2005 fing ich auf freiberuflicher Basis an. Nebenbei studierte ich bis zum vierten Semester Kommunikationsdesign in München. Dann beschloß ich meine Prioritäten auf meine berufliche Laufbahn umzulegen und pausierte das Studium.

Halloween Night

2. Wie sieht es aus, wenn Du deine Arbeit beginnst – Womit fängst Du zuerst an und woher bekommst Du deine Inspiration?

Die Konzept-, bzw Ideenentwicklung beginnt auf dem Papier. Die nötige Muse und Inspiration kriege ich durch meine Musik und durch Anregungen aus dem Internet.

3. Unter welchen Bedingungen musst oder darfst Du arbeiten, also wie sieht dein Schreibtisch aus, welche Software und Hardware nutzt Du zum Arbeiten?

Ich habe meinen Arbeitsplatz zu Hause. Falls ich von Agenturen gebucht werde, bin ich natürlich flexibel.
Ich arbeite mit der Premium Design Creative Suite 3 von Adobe, habe eine 24″ iMac zur exzellenten Darstellung und setze meine Arbeit sowohl an einem Cintiq 21UX, als auch einem Wacom Tablet um.

Rizer

4. Auf welche Weise hast Du dir deine Fähigkeiten mit der Software sowie das Wissen zum Design angeeignet?

Für mich galt schon immer “leaning by doing”. Durch probieren und üben hab ich mir meinen persönlichen Stil im Umgang mit den Programmen zugelegt. Außerdem erfahre ich viele News und Tipps von Design Konferenzen und aus der Fachliteratur.

Select Movement

5. Welche Fähigkeiten muss man besitzen und wie muss man vorgehen, um in dieser Branche dauerhaft zu bestehen?

Das dauerhaft wird sich bei mir erst noch herausstellen, allerdings weiß ich, dass ein guter Umgangston mit seinen Kunden und der Spaß an der Arbeit sehr wichtige Faktoren sind. Außerdem sollte es natürlich nicht an kreativen Ideen und der Umsetzung mangeln.

6. Viele werden sich fragen, ob und wie man sein Leben mit dieser Arbeit finanzieren kann. Was meinst Du dazu? Ist es schwer Aufträge zu bekommen oder hat man sogar zur aktuell bekannten Wirtschaftskrise einen Schreibtisch voll Arbeit?

Ich kann davon auf jeden Fall leben. Allerdings hatte ich das Glück durch Wettbewerbe und Mundpropaganda eine Kundenkreis zu kriegen, der mir seit über zwei Jahren die Treue hält. An Aufträgen mangelt es deshalb selten. Allerdings geht das sicher nicht jedem so. Es gibt viele Talente, die einfach keinen Anschluss finden, weil ihnen die richtigen Ansprechpartner fehlen.

Select Transform

7. Heutzutage steigen viele durch die Verbreitung von Photoshop & Co schon früh ins Design ein. Welche Tipps hast Du für angehende Grafiker/Designer, was ist wichtig und worauf kommt es an?

Den inneren Schweinehund überwinden, am ball bleiben und ständig üben, experimentieren. Wichtig ist einfach das tägliche Training (Scribbles,Zeichnungen etc.. )

Hugo Boss

8. Wenn Du die Zeit zurückschrauben könntest, würdest Du denselben Weg einschlagen? Was würdest Du anders machen und worauf würdest Du dich mehr konzentrieren?

Ja würde ich, dazu würde ich noch Flash & After Effects lernen!

Danke nochmal, dass Du dir Zeit genommen hast.

Jau hat mich gefreut, greetz Wladi

Design

Bei der Umsetzung einer grafischen Navigation in HTML und CSS gab es für mich zwei Möglichkeiten:
Entweder, ich werde sie suchmaschinenoptimiert gestalten, wodurch die Optik einen winzigen Abstrich erfährt, oder ich werde sie visuell attraktiver gestalten, wodurch die Suchmaschinenoptimierung einen Abstrich erleiden muss.

Optisch schönere Navigation ohne SEO

Wählt man die Variante, bei der die Navigation am Ende dem Entwurf getreu und damit besser aussieht, so verwendet man bei der Umsetzung in HTML und CSS nur Bilder. Die einzelnen Navigationspunkte sind einzelne Bilder, die bei a:hover bzw. li:hover - also beim scrollen über die Links - ausgetauscht bzw. verschoben werden (letzteres ist die edlere Variante ohne Reload-Problem).
Vorteil: Font-Fetischisten können dabei jeden Font verwenden, den sie mögen und brauchen nicht auf die mehr oder weniger öden Standard-Fonts zurückgreifen.
Nachteile: Suchmaschinen wie Google erkennen den visuellen Text in den verwendeten Grafiken für die Navigation nicht - die Navigation trägt also nicht zur SEO bei. Weiterhin müssten wir für jeden neuen Navigationspunkt eine neue Grafik anfertigen, wodurch wir am Ende auf recht viele Grafiken kommen - die Navigation wird am Ende also traffic-lastiger.

Optisch mit abstrichen, aber SEO gerecht, sparend und einfach zu verwalten

Die zweite Variante, welche ich in diesem Tutorial auch benutze, ist folgende: anstatt für die Navigationspunkte im normalen und im gescrollten Zustand Bilder zu verwenden, benutzen wir insgesamt nur zwei Grafiken für den gescrollten Zustand - diese zwei Grafiken ergeben zusammen den Hintergrund.
Vorteile: Wir verwenden für die gesamte Navigation nur drei kleine Grafiken, nämlich den Hintergrund der gesamten Navigation und den zwei Grafiken für die Hintergrundbilder im gescrollten Zustand. Dadurch können wir die Navigation einfach und beliebig erweitern, da wir für die Links HTML-Text verwenden, was uns zusätzlich noch den SEO Vorteil bringt, da der HTML-Text von Suchmaschinen verwertet werden kann.
Nachteil: Vor allem, wenn wir für die Navigation ausgefallene Fonts benutzen, die sich stark von den Standard-Fonts unterscheiden, wird das Ergebnis enttäuschend vom Original abweichen. Im Falle dieses Tutorials hingegen unterscheidet sich Arial nicht extrem von der verwendeten Schriftart in Fireworks.

HTML unserer Navigation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web 2.0 Navigation - CSS</li>
 <div id="navigation">
     <ul>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">FORUM</a></li>
        <li><a href="#">STUFF</a></li>
	<li><a href="#">CONTACT</a></li>
	<li><a href="#">IMPRINT</a></li>
     </ul>
  </div>
</body>
</html>

Zuerst legen wir das Markup unserer Navigation fest. Innerhalb des div Elements mit der ID “navigation” - dieses block-Element bekommt später mittels CSS den Navigations-Hintergrund zugeschrieben - folgt eine Liste mit den Navigationspunkten. Mehr brauchen wir innerhalb des HTML-Teils nicht mehr zu machen. Wenden wir uns nun dem CSS zu.

CSS unserer Navigation

/* Die Schriftart Arial sieht dem
in Fireworks verwendeten Font am ähnlichsten.*/
body {
	font-family:Arial, Helvetica, sans-serif;
	}

/* Die Navigation erhält ihren Hintergrund.
Es ist ein 1px breiter und 45px hoher  Streifen, den wir horizontal wiederholen*/
#navigation {
        background:url(images/navigation_bg.jpg) repeat-x;
	height:45px;
	width:600px;
	}
#navigation ul {
	list-style:none;
	margin:0;
	padding:0;
}
#navigation li a {
	text-decoration:none;
	color:#FFF;
	display:block;
	padding-left:10px; /* Der linke innere Abstand der Links
vom hellblauen Hintergrund.*/
	padding-right:10px; /* Der rechte innere Abstand der Links
 vom hellblauen Hintergrund.*/
}
#navigation li {
	line-height:45px;
	margin-left:35px;
	float:left;
	height:45px;
}
#navigation li:hover {
	background:url(images/hover_bg_right.jpg) no-repeat;
	line-height:50px;
}
#navigation a:hover {
	background:url(images/hover_bg_left.jpg) no-repeat;
}
#navigation li:hover a {
	color:#000;
}

Da die Links unserer Navigation unterschiedliche Längen (Breiten) besitzen und die Abstände zum Hintergrund einheitlich aussehen sollen, können wir kein einzelnes, fixes Hintergrundbild benutzen. Dazu kommt, dass wir auch keinen 1px breiten Streifen benutzen können, der sich innerhalb eines Navigationspunktes wiederholt, da unser Hintergrund links einen Schatten besitzt, den er auf der rechten Seite nicht besitzt.
Wir müssen die Grafik also in zwei Teile aufteilen:

Die linke Seite (hover_bg_left.jpg) weisen wir a:hover zu. Die rechte Seite (hover_bg_right.jpg) weisen wir li:hover zu. Sobald wir nun über einen Navigationspunkt scrollen, werden beide Grafiken sichtbar, doch sie überlappen sich und der Hintergrund sieht aus, als wäre es eine Grafik.

Web 2.0 Navigation anschauen

Zu Teil 1 des Tutorials: Web 2.0 Navigation mit Fireworks

Schritt 1

Zu Beginn erstellen wir ein Rechteck mit beliebigen Maßen, wichtig ist, dass die Höhe der einer Navigation entspricht - In meinem Falle sind das 45px. Dieses Rechteck bekommt nun den Stil “Dark Chrome 008″. Die Stile könnt Ihr in der rechten Sidebar unter “Elemente” verwalten und anwenden.

Schritt 2

Stellt nun den Zoom-Faktor höher, damit Ihr den folgenden Schritt besser anwenden könnt. Mit Hilfe des schwarzen Zeigers zieht ihr den Verlauf am oberen Haltepunkt so nach oben, dass der hellgraue Streifen an der oberen Kante beginnt. Am unteren Haltepunkt des Verlaufes zieht ihr den Verlauf nun noch soweit in die Länge, dass der Kontrastwechsel in der Mitte liegt.
Unser Navigations-Background ist somit fertig.

Schritt 3

Nun machen wir uns an die Hintergrundbilder, die erscheinen, sobald wir über einen Navigationspunkt fahren. Dafür duplizieren wir unser Rechteck, stellen die Breite auf z.B. 100px (hauptsache das Rechteck ist breitenmäßig kleiner). Dann setzen wir den “Farbton/Sättigung”-Filter mit folgenden Werten an:

Schritt 4

Nun folgt noch der Filter “Innerer Schatten” mit den im Bild zu sehenden Werten.

Schritt 5

Am Ende legen wir den blauen Hover-Hintergrund und ein paar Navigationspunkte auf unseren Navigationshintergrund um zu sehen, wie es am Ende aussehen soll/wird.

Blog Action Day

Typography Animation

Typography Animation - One of these Mornings

Typography

Zoolander Typography

V for Vendetta in Kinetic Typography

Snatach Typography motion graphic

Typography Motion Video “conscious”

Phonebooth Typography Animation

Nick the Greeck

OCEAN’S 11 typography - Ruben’s In

Soze

Matrix Animation

REQUIEM FOR A DREAM in typography / motion type

The Dark Knight Text motion graphics

Design Rhythmic Motion Typography in After Effects - ein sehr gutes Tutorial, das zeigt, wie man diese Motion Typography erreichen kann.

http://www.alexbuga.com/v8/

http://www.estudioalmacen.com/

http://www.ginoorlandi.com/

http://www.shannonmoeller.com/

http://www.simpleart.com.ua/en/

http://www.style-force.net/

http://www.thibaud.be/

http://www.transparenthouse.com/main/#/en/0/1/