Avatar billede likedon Nybegynder
29. juni 2012 - 10:26 Der er 17 kommentarer og
1 løsning

Hjælp mig lidt på vej med tekst på billeder

De her laver nogle rigtige flotte eksempler med tekst oven på billeder:
http://www.scannex.dk/rio-298?namecolor=hvid&tapecolor=sort

Jeg har leget en del med det med GDlib, men jeg er ikke i nærheden af at kunne lave det i den kvalitet som de gør.

Jeg kan se de kalder en webservice i php og at de kører magento.
Men jeg ved faktisk ikke hvad sprog de laver eksemplerne i.

Mit største problem er at skrifftyperne man bruger når man bruger "imagettftext" ikke ser ud som i word. Nogle bogstaver står ex. for tæt sammen.

Ligeledes har jeg ingen ide om, hvordan de har fået "mønster" på skriften så det ser ægte ud.

Hvis der er nogen der kan hjælpe ville jeg være glad.
Der er også mulighed for betaling for en færdig løsning, hvis en kan lave eksempler som ovenstående.
Avatar billede Panen Nybegynder
29. juni 2012 - 11:36 #1
Umiddelbart kunne jeg forestille mig at de lægger et ekstra billede med prikker eller streger over hele billedet efter teksten er blevet lavet og farvet med imagettftext.

Med hensyn til font tror jeg bare de har nogle "gode" fonts der bliver renderet pænt. Der findes sikkert en masse fonts på nettet der er lavet til imagettftext så de ser pæne ud.
Avatar billede olebole Juniormester
29. juni 2012 - 14:13 #2
<ole>

Vær lykkelig for, resultatet ikke ligner noget fra Word, som blandt grafikkere - og andre med bare et flygtigt kendskab til typografiske principper og regler - er kendt for at være komplet uegnet til gengivelse af tekst. På lange stræk skriver Word langt værre end de gamle, mekaniske skrivemaskiner. Word hopper ikke så meget vertikalt som en skrivemaskine - men er katastrofal til horisontal spatiering af tekst  *o)

Hvad du i øvrigt mener med det, kan jeg eller andre intet vide om. Prøv at vise os, hvordan dine resultater ser ud, så vi kan se, hvad du gør galt. I den forbindelse er det nok også en rigtig god idé at vise den kode, du bruger. Ellers quizzer vi bare ud i den blå luft  =)

Nej, der er i følge Ekspertens regler ikke mulighed for en betalingsløsning. Point er det, du kan betale med i disse kategorier - og højst 200 pr. spørgsmål

/mvh
</bole>
Avatar billede vagnk Juniormester
29. juni 2012 - 15:49 #3
De lægger, som Panen er inde på, en raster henover. Det kan du gøre med imagesetpixel i et lille to-dimensionalt loop. Det er da i øvrigt ganske smart.

Er du med på at du skal finde dine fonde i $ttf_path = "C:/Windows/Fonts/"?
Avatar billede olebole Juniormester
29. juni 2012 - 17:55 #4
#3: forudsat, det er der, de ligger. Der vil de meget ofte ligge i forbindelse med en lokal server, men ikke under forskellige *nix bokse, som PHP-hoteller ofte kører på. Tjek udbyderens dokumentation, og står det ikke der, så spørg.

Der kan være rigtig mange grunde til, at forskellige skrifter ikke renderer pænt. Prøv først med et par helt almindelige standard skrifter. Renderer de pænt, er det de fonte, der ikke renderer pænt, som er årsagen.

Der bliver produceret enorme mængder elendige skrifter af folk, som ikke har lært det. At udvikle en god font tager ofte 3-5 år for en eller et par professionelle typografidesignere. Mange af dem, man kan downloade gratis på nettet, er lavet af en arbejdsløs neglekosmetolog på en måned.

Sålænge du bruger professionelt udviklede skrifter, kan du være rimelig sikker på, de renderer pænt. Hvis de imod forventning heller ikke renderer pænt i dit setup, er der derimod grund til undren.

En anden ting er, at hvis du kun har skærmskriften (bitmap versionen) af en bestemt font, så vil den altid pixellere. Men som sagt er det svært at råde, når vi ikke ved, hvad problemet reelt er - og uden at kunne se det  =)
Avatar billede likedon Nybegynder
29. juni 2012 - 18:14 #5
Olebole-> ved godt man ikke må udlode penge, men opgavebørsen blev da lukket ned ikke (kan ikke huske hvad den hed)?
Vil gerne flytte den over til et sådanne sted.

Det med mønster kigger jeg på, så den del anser jeg som besvaret.

Det var selvfølgelig ikke meningen, at der skulle gættes :-)
http://www.kreasmykker.dk/other/test/previewsimpel.php

Rimmelig tydligt at den ikke skriver det rigtig.

GDlib-versionen har stor betydning for hvor meget mellemrum, der er mellem de enkelte bogstaver, har jeg fundet ud af.

Det er faktisk det største problem, at PHP ikke kan finde ud af hvor meget de enkelte bogstaver fylder, så det kan se lige så "pænt" ud som i word.

Min løsning indtil videre har være at skrive et bogstav af gangen og så lige en variable afstand ind efter hvert, men det bliver aldrig super godt.
Ovenstående link er blot lavet med imagettftext, hvor teksten er skrevet på engang.
Der er brugt en ganske alm arial.ttf
Avatar billede Panen Nybegynder
29. juni 2012 - 19:59 #6
Når jeg kigger på dit link, ser bogstaverne fine ud her? :)
Avatar billede olebole Juniormester
29. juni 2012 - 20:04 #7
Spatiering (afstand mellem bogstaver) er præcis det, Word absolut ikke kan. Det er den dårligst tænkelige reference.

En god prøve er at skrive 'ALTSÅ' - i bold, versaler og stor tekststørrelse. Så vil det lynhurtigt afsløres, om programmet tager hensyn til skriftens indbyggede knibe-/spærrepar.

En almindelig, annerkendt font indeholder gerne en tabel med 2-500 specielle tegnkombinationer, hvor de enkelte tegn skal have enten mere eller mindre luft imellem sig, end normalt. De kaldes knibe- og/eller spærrepar.

Et godt eksempel er stort 'L' og stort 'T'. L'et har 'fra fødslen' lidt mere luft på venstre end på højre side. T'et har samme mængde luft på begge sider - nogenlunde det samme som på L'ets højre side. Det skyldes, at L'ets venstre side virker mere 'kompakt' end den højre. Den højre er en typisk trekant, som det kendes fra f.eks. V, A og P's højre side.

Skriver med imidlertid 'L' og 'T' ved siden af hinanden, vil de stadig stå og flagre, alt for langt fra hinanden. I næsten alle skrifter skal T'ets top og L'ets bund faktisk trækkes ind over hinanden. Så ser det først rigtigt ud med samme luft som de omgivende tegn.

Simple tekstgengivelses teknologier som en browser tager slet ikke højde for alle disse knibepar, hvorfor tekst i stor størrelse ofte ligner noget, der ikke er meningen. Word's tekstgenererings motor er den samme som Internet Explorer's, og derfor tager Word ikke hensyn til knibeparrene. Word renderer kun marginalt bedre end Explorer.

Photoshop lærte først at skrive nogenlunde i version 7/8. Inden da gik man en lidt sjov omvej, når der skulle laves en gif til en overskrift. Først blev overskriften skrevet i et layoutprogram som Quark XPress. Derefter lavede man et screendump - loadede det i ImageReady (Adobe's daværende program til giffer) - og exporterede det som gif. Så holdt spatieringen  =)

I Photoshop kan du vælge at sætte knibning ('kerning' på engelsk) til 'Metrics', som er det Word og browseren gør - altså gengiver tegnene med deres 'rå' afstande. Du kan også vælge 'Optical', som tager hensyn til knibepar og viser teksten, som den bør se ud ved print.

Prøv at se, hvordan, det ser ud i en browser. Læg mærke til at L og T står og 'råber til hinanden':

ALTSÅ


Jeg har lige lavet en lille test og må desværre slå fast, at både GDLib og ImageMagick i det store hele renderer præcist som Word - lidt bedre end Explorer  :o|

InDesign, Illustrator og Photoshop renderer tekst fra en helt anden galakse!
Avatar billede olebole Juniormester
29. juni 2012 - 20:05 #8
Å'et synes tydeligvis også, at S'et lugter fælt, og læner sig derfor mod højre  *o)
Avatar billede likedon Nybegynder
29. juni 2012 - 20:13 #9
Panen -> du synes ikke at AAA står tæt i forhold til ND
Olebole -> tja det hjælper mig jo ikke så meget :-(

men fandt da ud af at www.scannex streamer direkte fra en tyske side:
http://www.dortex.com/nametape-assistant/taxt.html

Jeg ved så ikke hvilket sprog det er lavet i, det kan jo være det ikke er php.
Avatar billede olebole Juniormester
29. juni 2012 - 20:50 #10
Det hjælper dig da til at afgøre, at de to gratis libraries ikke opfylder dine krav. Det har forhåbentlig også givet dig lidt bedre forståelse af, hvor årsagerne ligger  =)

Det kan sagtens være skrevet i PHP. PHP tager sig bare af nogle beregninger og fyrer en kommando af mod et library, der tager sig af selve billedbehandlingen. Det er ikke usandsynligt, at Dortex har installeret et kommercielt library.

I øvrigt er der også forskel på udgaver af en font - selvom de hedder præcist det samme. Der er tydeligvis forskel på den Arial, du har skrevet med og den, jeg har. Hvilken størrelse har du præcist brugt?
Avatar billede likedon Nybegynder
29. juni 2012 - 21:44 #11
http://www.kreasmykker.dk/other/test/previewsimpel.php

Indrømmet at jeg sidder(sad) og retter i det lige nu.
jeg lade det på 3 forskellige webserver med forskellige GDlib versioner, og de var alle forskellige.

$font = "ARIAL.TTF";
$size = "18";

lige nu er den vist med en manuel space mellem bogstaverne ($t=1)

function ImageTTFTextWithTracking($im, $size, $angle, $t, $x, $y, $color, $font, $text) {
    $numchar = strlen($text);
    for($i = 0; $i < $numchar; $i++) {
        # Assign character
        $char[$i] = substr($text, $i, 1);

        # Write character
        imagettftext($im, $size, $angle, ($x + $w + ($i * $t)), $y, $color, $font, $char[$i]);
       
        # Get width of character
        $width = imagettfbbox($size, $angle, $font, $char[$i]);
        $w = $w + $width[2];
    }
}


Men må indrømme det bliver ikke godt.
Arial'en er taget direkte fra min windows 7.

Jeg kan jo læse mig til at GDlib ikke rigtig bruger bogstaverne indbyrdes forhold, og det er jo det der går galt

Jeg har ikke adgang til en server med imagemagick, men kan ikke læse mig til, at det vil løse mit problem.

Har du kendskab til et kommercielt produkt/lib/webservice der vil kunne løse mit problem?
Avatar billede olebole Juniormester
29. juni 2012 - 22:56 #12
Nej. Mens Flash stadig var under MacroMedia, fandtes der en 'Flash server', som kunne eksportere billeder med tekst i bedre resultat end GDLib dengang gjorde. Flash bruger vektorer og forstår derfor PostScript algoritmerne. Om den stadig eksisterer, ved jeg ikke.

Ved mindre tekststørrelser vil man aldrig kunne opnå et godt skriftbillede med den nuværende skærmopløsning, men det kan blive væsentligt bedre end GDLib, ImageMagic, Word eller HTML renderer. Spørgsmålet er, om der findes noget tilgængeligt, og om du kan overtale og/eller betale din udbyder  *o)

Må jeg spørge, hvad du skal bruge det til?
Avatar billede olebole Juniormester
29. juni 2012 - 22:57 #13
PS: Du gør kun tingene værre ved at prøve at 'tracke' skriften. Det er som regel langt under en pixel, forskellen/skønheden ligger i
Avatar billede likedon Nybegynder
01. juli 2012 - 17:29 #14
ja, og flash duer jo som sådan ikke mere :-) griner af alle webshops der bruger det.

Det er i øvrigt til en webshop jeg skal bruge det, hvilket også er grunden til at det gerne måtte koste.

men jeg takker for input olebole.

Tror jeg vil prøve at lave det som html5 for de bruger, der kan se det.

Har ikke lige fulgt med i om du tager mod point nu, men hvis du gør så kom du bare et svar.
Jeg har jo rigelig af dem, da jeg ikke selv er "aktiv" mere på eksperten.
Avatar billede olebole Juniormester
01. juli 2012 - 17:45 #15
"ja, og flash duer jo som sådan ikke mere" >> Jo, det ville virke helt perfekt. Flashserveren skal jo i denne forbindelse ikke vise animation, men bare eksportere et billede på samme måde, som GDLib eller ImageMagick. Forskellen er, at Flash etknologien bygger på vektorgrafik og ikke bitmaps. Derfor er Flash i modsætning til de to andre velegnet til typograi.

HTML5 er desværre ligeså komplet uegnet til opgaven. Til gengæld hat IT-udviklingen og udviklingen i skolernes skriveundervisning gjort, at der i dag er lysår imellem folk, der evner at have en kvalificeret mening om, hvorvidt et skriftbillede er korrekt sat op. Det værste er, at det også gælder blandt rigtig mange, som i egen selvforståelse er designere.

Elendig typografi er desværre blevet normen - så du kan efterhånden slippe afsted med næsten, hvad somhelst.

Ellers ta, jeg samler ikke point  =)
Avatar billede olebole Juniormester
01. juli 2012 - 17:46 #16
*LoL* ... og slave- og ståfejl er også ganske gratis!  :D
Avatar billede likedon Nybegynder
02. juli 2012 - 08:46 #17
hmm, flash server tjow go ide, kender bare ikke lige nogen der tilbyder det :-)

men tak for input, og så må jeg jo svarer selv. Jeg samler jo heller ikke på dem.
Avatar billede olebole Juniormester
02. juli 2012 - 14:03 #18
Selvtak, men du skal lige acceptere dit svar, så tråden lukkes  =)

Så vidt jeg husker, fandtes der på et tidspunkt en SourceForge prjekt, der kunne det samme som Flash serveren. Men under alle omstændigheder kræver det nok, du selv administrerer serveren. Kræsenhed koster  *o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester