Antworten auf deine Fragen:
Neues Thema erstellen

Workflow für Schrift in Photoshop für Webprojekt

semi031285

Aktives Mitglied

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
 

Photoshop

patrick_l

Hat es drauf

Hi, grüß dich Maik. Vorweg sollte geklärt werden, ob die Schrift(en) direkt eingebunden werden können. z.B. via Cufon und CSS3 - @font-face. 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

Aktives Mitglied

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

Hat es drauf

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.

HTML:
<!-- 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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.455
Mitglieder
67.558
Neuestes Mitglied
StarsMan
Oben