Workflow für Schrift in Photoshop für Webprojekt

[semi031285]

Servus

ich gestalte gerade ein Interface für ein Browser-Plugin.
Dazu habe ich eine Photoshop-Datei angelegt. Wie erstelle ich die Texte nun richtig ?

Mit Smartobjects aus Illustrator oder Indesign ? -oder direkt in Photoshop ?

Lg
Maik

 

[patrick_l]

Hi, grüß dich Maik. Vorweg sollte geklärt werden, ob die Schrift(en) direkt eingebunden werden können. z.B. via

Bitte kostenlos registrieren, damit du die Links siehst.

und

Bitte kostenlos registrieren, damit du die Links siehst.

. Wenn dies nicht möglich ist, würde ich Illustrator nutzen und Texte als SVG (Vektorgrafik) speichern. Letzteres ist vor allem im Bezug auf Retina-Displays der bessere Weg.

Liebe Grüße, Patrick

 

[semi031285]

Hi Patrick,

es handelt sich um die Open Sans von google, ich denke die kann eingebunden werden.
Heißt das, dass die Einstellungen zur Schrift (Hinting, heißt das glaub ich) der Programmierer erledigt ?

Lg
Maik

 

[patrick_l]

es handelt sich um die Open Sans von google [...] Heißt das, dass die Einstellungen zur Schrift (Hinting, heißt das glaub ich) der Programmierer erledigt ?

Mit "Hinting" ist die Optimierung auf/für Displays (Bildschirmen) gemeint bzw. wird dies so bezeichnet. Primär hat man eigentlich nur damit zutun, wenn man selber Schriften anfertigt. Gute (optimierte) Schriften haben beispielsweise in den den Glyphen H, T, L und E sowie I die selbe Pixelanzahl. Sowohl was die waage.- als auch senkrechte Linien angeht.

Die Open Sans ist im Font Directory von Google. De facto kann dieser "Webfont" wie von mir beschrieben, einfach eingebunden werden. Entweder im Kopf (head) eines HTML Dokuments oder über @font-face im CSS. Da CSS3 Eigenschaften von älteren Browsers gar nicht, nur teilweise oder fehlerhaft interpretiert werden, darf ein Fallback nicht fehlen.

Was den IE angeht, kann man mit JavaScript nachhelfen. modernizr wäre hier ein nennenswertes Script. Was jetzt in deinem Fall bei Webfonts nicht notwendig ist. Da diese ja wie bereits erwähnt unterschiedlich eingebunden werden können. Ich selber nutze fast ausschließlich die Link-Variante.

<!-- HTML5 Markup -->
<link rel="stylesheet" href="path/to/googleapis/font">

<!-- XHTML Markup -->
<link rel="stylesheet" type="text/css" href="path/to/googleapis/font">

So, nun zurück zur eigentlichen Frage. Der Programmierer wird anhand der Layout-Vorgaben die Fonts einbinden. Dabei auch Größe, Schnitt und Laufweite mit CSS umsetzen. Da die verwendete Schrift ja als Webfont frei nutzbar ist, auch kein großer Aufwand.

Liebe Grüße, Patrick