Anzeige
Tutorialbeschreibung

Banner leicht erstellt

Banner leicht erstellt

Schritt 1.
Wir erstellen ein Bild mit den Maßen : 468x60 px (Standardnorm Banner).
Hintergrundfarbe nehme ich hier weiß, ist aber eigentlich egal.
Dann ziehen wir, wie unten dargestellt, einfach mittig zwei Hilfslinien:

Bilder


Schritt 2.
Nun erstellen wir einen Rahmeneffekt. Dazu markieren wir die Ebene.
Dann folgende Schritte:
- Auswahl
- Auswahl verändern
- Auswahl umranden (mit 10px)

Jetzt erstellen wir eine neue Ebene (ich nenne Sie Rahmenebene).
Diese Rahmenebene füllen wir jetzt auch mit weiß.

Schritt 3.
Jetzt füllen wir die Hintergrund- und Rahmenebene mit dem gleichen Stil (ich habe mich hier für den "Glaseffekt Gel-Rollover blau" entschieden).

Jetzt sollte es so aussehen:

Bilder


Schritt 4.
Wir erstellen eine neue Ebene (ich nenne sie Inlay).
Jetzt erstellen wir mit Hilfe des Auswahlrechteck-Werkzeug ein Rechteck das mittig sitzt mit der festen Größe von: 400x40px.
Dazu wählen wir nach für die Auswahl:
- Auswahl verändern
- Auswahl abrunden (mit 5px)
und dann füllen die Auswahl wieder mit weiß.

So siehts aus:

Bilder


Diesen füllen wir jetzt mit dem Effekt "Gebürstete Metallschaltfläche".
Jetzt entfernen wir noch die Stileffekte "Schlagschatten" und Kontur der Inlayebene nach der Füllung.

Schritt 5.
Jetzt markieren wir die "Hintergrundebene" und drücken "Entf", danach sollte es so aussehen:

Bilder


Schritt 6.
Jetzt markieren wir wieder die "Inlay" Ebene und erstellen darüber eine neue Ebene "Inlay 1", diese füllen wir mit der Farbe "4B74B5" danach stellen wir den Ebeneneffekt auf  "Farbe" ein.

So siehts aus:

Bilder


Schritt 7.

Schrift einfügen; ich habe mich hier für meine Standardschrift "bladerunner" entschieden und meinen Schriftzug erstellt.
Die Schrift habe ich einfach mit blau gefüllt: 4B74B5.
Dann habe ich wie abgebildet einfach noch zwei Kreise eingefügt mit dem gleichen Stil wie die Rahmenebene und Kontur, sowie den Schatteneffekt entfernt.

So siehts aus:

Bilder


Die Kreise rechts und links noch wie den die Rahmenebene unter Schritt 2. umranden mit 10px und mit gleichem Stil füllen.

Bilder


Zum Schluss kommt noch eine neue Ebene (oberste Ebene) nach ganz oben und wird mit dem Stil "Glaseffekt Gel-Rollover blau" gefüllt und Ebeneneffekt  "Farbe" gesetzt.

Bilder


Das wars! Ihr könnt jegliche Stile verwenden, probiert es aus!

Viel Spaß beim Ausprobieren und Basteln.

Grüße webdesign

Ps: Alle Schritte, Grafiken sind aus meiner Feder ;-)


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von boxner
  • 14.12.2011 - 09:52

für blutige Anfänger eher ungeeignet... "Gel-Rollover-Blau" schlecht dokumentiert

Portrait von snusi
  • 22.04.2011 - 09:20

danke genau sowas hab ich gesucht

Portrait von Knaddel
  • 29.01.2011 - 15:38

super Tutorial. Genau das was ich gesucht habe

Portrait von Competo_gin
  • 17.12.2010 - 15:16

gefällt mir sehr gut. kann ich nur weiter empfehlen

Portrait von Gugormilian
  • 07.04.2010 - 15:43

Geile Sache, hat mir verdammt geholfen, immer weiter so!

Portrait von Ndakota
  • 19.03.2010 - 16:07

Ich bekomme die Grafiken nicht angezeigt. Von daher habe ich keinen Ansatzpunkt wie es aussehen soll.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 30.01.2010 - 15:44

Danke Danke :)
Hat mir sehr geholfen :))

Portrait von oRbb
  • 01.01.2010 - 16:06

Was heisst denn die Ebenen mit dem gleichem Stil machen..?
Glaseffekt Gel-Rollover blau?

Portrait von Octryl
  • 22.12.2009 - 14:07

Nicht ganz verständlich!

Portrait von Dezign16
  • 17.11.2009 - 07:55

Ich habs nicht hinbekommen so wie du es erklärst.

Portrait von smegster
  • 05.11.2009 - 15:06

Werd ich umgehend ausprobieren!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 14.10.2009 - 05:29

Danke, genau das was ich gesucht habe...

Portrait von Dani09
  • 31.07.2009 - 02:58

Schoenes Tutorial, Klasse

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.07.2009 - 22:45

ich kapier des mit dem glas effekt net sry besser erklärn bitte

Portrait von kikili
  • 06.07.2009 - 17:03

danke,kurz, knapp und gut

Portrait von Riccione
  • 01.06.2009 - 12:43

danke für die Erklärung, ich werde es mal ausprobieren

Portrait von wuhu
  • 08.05.2009 - 18:07

Danke, hat sofort geklappt. Danach hab ich gesucht.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 25.03.2009 - 00:27

Supi Tut danke.

Zu Lyrik - Es kann ja nit immer alles für die Anfänger sein. =)
Gruß

Portrait von Lyrik
  • 21.01.2009 - 15:20

Cooles tut ;) für Anfänger jedoch unverständlich, 4*

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.01.2009 - 18:09

netter und stylischer banner =)

x
×
×