PDA

Vollständige Version anzeigen : Photoshop Gedrehte Fonts erstellen für Software-Entwicklung


topcaser
03.03.20, 23:15
Hallo,
ich möchte gerne auf Wearables eine runde Font bringen, also die sich z. B. an einem runden Displayrahmen ausrichtet. Dazu ist es notwendig, dass ich eine Font in 5 Grad Schritten drehe. Die Font liegt im PNG Format vor, eine weitere Datei zeigt für jeden Buchstaben an, wo er ausgehend vom Punkt links oben liegt.

Meine Idee war es nun, eine x-beliebige quadratische Font als Template zu nehmen, so besteht das PNG aus lauter kleinen Quadraten, in die ich meine eigentliche Zielschrift Buchstabe für Buchstabe hineinkopieren kann. Die Buchstaben hätte ich dann im nächsten Schritt um 5 Grad gedreht, um wieder ein PNG abspeichern zu können. Wie kriege ich das aufwandsarm hin?
Die Buchstaben liegen auf je einer Ebene. Ich kann sie in eine Gruppe packen und gesamt drehen. Dann muss ich sie aber wieder hinschieben auf die Quadrate. Oder ich drehe jeden Buchstaben einzeln mit einem Makro. Aber da habe ich gemerkt, dass nicht um den Mittelpunkt des Buchstabens gedreht wird, sondern um den Mittelpunkt des Objekts und das ist ein anderer Mittelpunkt (wegen dem Abstand nach unten).

Irgendwelche Ideen, wie ich dieses Projekt umgesetzt bekomme?

Danke schonmal für eure Hilfe...

ph_o_e_n_ix
04.03.20, 11:05
Ich sag mal so ... ich glaube kaum, dass dich hier jemand versteht. Dazu ist dein Vorhaben zu konfus beschrieben...

Im Topic schreibst du etwas von Software-Entwicklung ... wenn du wirklich Software entwickelst und nicht nur einen Skin bastelst, dann löse das Problem über eine Algorithmus und nicht über unzählige Grafiken.

Dann schreibst du einmal etwas von gedrehten Fonts, einmal von runden Fonts, die dann auch noch im Pixelformat vorliegen. Eher suboptimal für die Weiterverarbeitung. Wieso kein handelsüblicher Font (TTF, OTF) als Grundlage verwenden? Damit arbeitet man immer im Vektorformat und gibt es erst am Ende als Pixelformat aus.

Da vermutlich die wenigsten etwas mit Wearable anfangen können, werden die wenigsten auch wissen, dass du damit eine Smartwatch meinst (und damit vermutlich einen eigenen Skin erstellen möchtest). Und da stellt sich dann auch schon wieder die nächste Frage. klassische runde Uhr = 360° : 60(s) = 6° ... du möchtest aber um 5° drehen. Denkfehler oder einfach vergessen zu erklären, wieso um 5° gedreht werden muss.

Deine Erklärung, zur Vergehensweise ist nur äußerst schwer nachzuvollziehen...

Bilder vorher, diverse Einzelschritte und nachher und die entsprechenden Dateien um das ganze testen zu können, wären mehr als hilfreich...

Es hat sicherlich keiner Lust sich solche Gebilde nur auf Grund waager Beschreibungen nachzubauen, um damit seine eigenen Lösungsideen testen zu können ... schließlich dürfte das nichts sein, für das man selbst mal Verwendung hat, sondern einzig und alleine nur für dich dienlich sein wird.

topcaser
04.03.20, 18:17
OK, Danke für dein kritisches Feedback. Hier gibt es ein Bild: https://apps.garmin.com/de-DE/apps/c97c4e34-55e4-4601-b5c2-45763bc481a2

Die "runde" Schrift liegt nicht von Garmin vor, aber man kann seine eigenen Schriftarten erzeugen und auf die Uhr laden, in dem man im Garmin-Software-Entwicklungskit diese dazubindet. Dazubinden geht folgendermassen: mit einem Tool kann man sich Schriftarten, die in TTF oder OTF vorliegen, konvertieren. Es fällt dann ein PNG raus und eine XML. Aber es gehen nur waagerechte Schriftarten. Deswegen habe ich den Entwickler dieses Watchfaces (nicht nur ein Skin, echte Software) angeschrieben, wie er diese Schriftart gemacht hat. Das würde ich gerne nachbauen.

Er meinte, es wäre nicht eine Schriftart, sondern viele Schriftarten, und zwar pro 5 Grad gedreht eine (andere) Schriftart. Er hat sich dazu eine quadratische Font hergenommen wie die hier: https://www.dafont.com/de/inversionz.font
hat dann seine Buchstaben mit seinem Font in das png eingesetzt. Dann das ganze nochmal mit den gleichen Buchstaben, nur etwas gedreht und eine neue Font generiert. Beim Schreiben von Text auf dem Display wird dann per Software der richtig gedrehte Buchstabe referenziert.

Die Frage ist, wie baue ich möglichst effizient (zeitsparend) in Photoshop die PNGs? Ich sag mal so: Wenn ich für 180 Grad (oben (0-180 Grad) und unten (180 bis 360 Grad) werden die gleiche Schriftarten verwendet) pro 5 Grad eine png mit gedrehten Buchstaben machen will, komme ich auf 36 PNGs...

Hier sieht man in einem animierten GIF, was alles möglich ist: https://forums.garmin.com/developer/connect-iq/f/discussion/1832/text-in-circular-shape

topcaser
04.03.20, 18:26
Hier habe ich eine png: https://www.dropbox.com/s/loc4ys4qw3yl2kh/sqareFont_0.png?dl=0

und eine xml (Edit: es ist keine xml Datei, aber eine Referenzdatei zu den Koordinaten im PNG, wo welcher Buchstabe steht) dazu (der Vollständigkeit halber):
https://www.dropbox.com/s/3tigkn0jg5r9xxb/sqareFont.fnt?dl=0

ph_o_e_n_ix
05.03.20, 14:05
Da wirst du um viel Handarbeit nicht herumkommen - scripten scheidet ja vermutlich aus, sonst würde deine Fragestellung anders lauten.

Womit du dir die Arbeit minimal erleichtern kannst, ist pro Zeichen je einen Text-Layer und ein Rechteck (in der Größe wie sie in deinem Beispiel-PNG zu sehen sind) in eine Gruppe zu packen.

Die Gruppen kannst du auswählen und mit folgendem Script drehen...

http://cl.ly/c8Nh/f

Weiter gehe ich darauf allerdings nicht ein, weil das ganze ein Faß ohne Boden ist.