Dieses Blog ist nicht länger aktiv!

Hier wird es in Zukunft keine neuen Inhalte geben, allerdings bloggen die Autoren weiter. Die Designartikel werden nun auf dem persönlichen Blog von Ivo Mynttinen veröffentlicht, während Artikel in denen es um Webdevelopment geht demnächst hier veröffentlicht werden.

Weitere Projekte der Autoren: Fireworks Lab - Kostenlose Adobe Fireworks Dateien

“Letterpress”-Effekt erstellen in Fireworks CS4 & CSS3

März 7th, 2010 | von Ivo Mynttinen | Design, Tutorials, XHTML/CSS

Der so genannte “Letterpress” (also eingedrückter Text) Effekt ist zur Zeit sehr populär, was durch die CSS Eigenschaft “text-shadow” auch noch verstärkt wird, da sich so der Effekt ohne Einsatz von Bildern im Web nutzen lässt. In diesem Tutorial werde ich euch zeigen wie man schnell und einfach einen Letterpress-Effekt in Adobe Fireworks CS4 erstellt und diesen anschließend in CSS3 umsetzt.

Schritt 1: Hintergrund

Wir erstellen zunächst in Fireworks ein neues Dokument mit beliebigen Maßen. Unsere Leinwand füllen wir nun mit einem Rechteckt (U), welchen wir als Füllkategorie “Linear” zuweisen. Die Farben des Verlaufs könnt ihr beliebig einstellen, wichtig ist bei diesem Tutorial nur das helle Farben als Hintergrund verwendet werden. Ich habe zum Beispiel den Farbverlauf #B7C4CD zu #CDD7DC verwendet.

Linearer Verlauf in Fireworks CS4

Schritt 2: Hinzufügen eines Textes

Auf unseren Hintergrund fügen wir nun einen Text (T) hinzu. In diesem Tutorial verwende ich als Schriftart “Nevis“. Als Schriftfarbe für unseren Text verwenden wir #444651.

Text hinzufügen

Schritt 3: Letterpress Effekt

Unseren Effekt erreichen wir mit den beiden Filtern “Innerer Schatten” und “Schlagschatten”. Zum hinzufügen eines solchen Filters selektieren wir den Text und klicken anschließen auf das Plus welches sich unter dem Mischmodus befindet.

Wir fügen nun den Filter “Innerer Schatten” zu unserem Text hinzu.

Innerer Schatten hinzufügen

Als Eigenschaften verwenden wir:

Innerer Schatten

  • Abstand: 2
  • Deckkraft: 100%
  • Weichheit: 3
  • Winkel: 315°
  • Farbe: Schwarz

Eingedrückter Text in Fireworks CS4
Nun fügen wir dem Text den Filter “Schlagschatten” hinzu. Diesen finden wir ebenfalls in der Kategorie “Schatten und Glühen”. Diesmal verwenden wir folgende Eigenschaften:
Innerer Schatten

  • Abstand: 2
  • Deckkraft: 100%
  • Weichheit: 0
  • Winkel: 315°
  • Farbe: Weiß

Wir erhalten nun den derzeit so beliebten “Letterpress”-Effekt.
Eingedrückter Text in Fireworks CS4

Schritt 4: Konvertieren zu XHTML/CSS

Bevor wir unseren Text-Effekt in CSS erstellen sei noch gesagt dass es nicht möglich ist den von uns in Fireworks erstellten Text ohne das nutzen von Bildern pixelgenau im Browser darzustellen, da CSS keine Möglichkeit bietet einen Schatten innerhalb eines Textes hinzuzufügen.
Zunächst erstellen wir in einem Ordner zwei neue Dateien: “index.html” und “style.css”. Wir öffnen die Dateien beide in einem beliebigen Texteditor und erstellen in der “index.html” unser HTML-Grundgerüst.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <title>Letterpress Effekt mit CSS3</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
       
<body>
    <div id="backgroundblue">
        <h1>Letterpress</h1>
    </div>
</body>
</html>

Nun können wir den Hintergrund sowie unsere Überschrift “h1″ in der “style.css” die entsprechenden Eigenschaften zuweisen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#backgroundblue{
    width:464px;
    height:140px;
    background:-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.5, rgb(205,215,220)),
    color-stop(1, rgb(183,196,205)));
    background:-moz-linear-gradient(
    center bottom,
    rgb(205,215,220) 50%,
    rgb(183,196,205) 100%);
    -moz-border-radius:4px 4px 4px 4px;
    padding:30px;
    text-align:center;
}

h1{
    font-family:"nevis",sans-serif;
    font-size:60px;
    text-transform:uppercase;
    color:#444651;
    text-shadow: -1px -1px 0px black, 1px 1px 1px white;
}

Für den Hintergrund verwenden wir CSS-Verläufe, daher benötigen wir für den Hintergrund kein Bild um unseren Verlauf darzustellen (Achtung: diese CSS-Eigenschaft wird derzeit nur in Chrome, Safari und Firefox unterstützt).

Der text-shadow setzt sich aus folgenden Eigenschaften zusammen:

1
text-shadow: -1px -1px 0px black;
  • X-Koordinate des text-shadows (-1px), relativ zum Text
  • Y-Koordinate des text-shadows (-1px), relativ zum Text
  • Stärke des “Blur”-Effekts (ähnlich Weichzeichnen)
  • Farbe des Schattens (#000, schwarz)

Das Ergebnis

Letterpress


Download

Ähnliche Artikel

  1. Tutorial – Lichteffekte erstellen mit Fireworks CS4
  2. Tutorial – Business Webseiten Design erstellen mit Fireworks CS4
  3. Tutorial – Server Icon erstellen in Fireworks CS4

Mit anderen teilen

Der Autor

Ivo Mynttinen

Ivo arbeitet in einer Agentur als Screendesigner. Außerdem ist er freiberuflich als Interface Designer tätig. Er würde sich freuen euch als "Follower" bei Twitter begrüßen zu dürfen.

Ein Kommentar

  1. Adrian sagt:
    16. April 2010 um 01:13

    cooles tutorial, danke

    Antworten

Hinterlasse einen Kommentar