Photoshop image/infographic met data

[gilligan]

Hallo,

Ik zou met Photoshop graag een soort van infographic maken met data, iets zoals onderstaand.



Ik heb al wel wat video's gevonden, maar dan gaat het telkens over één rij uit een CSV-bestand die dan in de afbeelding wordt verwerkt. Terwijl ik juist, zoals in bovenstaande foto, 10 rijen in één afbeelding zou willen stoppen.

YouTube: Tutorial : : Creating Data-Driven Graphics in Photoshop

Op een andere site (https://graphicdesign.sta...bular-data-into-photoshop) kwam ik dit tegen als vraag, ongeveer zoals ik het ook zou willen, maar daar werd gezegd dat het niet kan met Photoshop. Is dat zo, of zijn er inmiddels wel mogelijkheden voor?

Het kan natuurlijk handmatig maar dat is een monsterklus om vaker te doen. Iemand enig idee hoe de NOS of anderen zulke afbeeldingen maken? Ik haal de data uit een database dus importeren vanuit MYSQL of CSV is prima.

Ik heb de 2015 versie van Photoshop.

Grt

[Ventieldopje]

Ik denk niet met photoshop Als je enige programmeerkennis hebt dan zou ik er een scriptje voor schrijven. Pak de achtergrond als template en zet de tekst er overheen in je script (bijv. met PHP en GD).

Moet het nog flexibeler dan kun je het helemaal in (PHP +) HTML opbouwen en met een tool als wkhtmltoimage omzetten naar een afbeelding

[sys64738]

Inderdaad gewoon in HTML + CSS maken.

Voor die CSS + HTML kun je prima "inspiratie" opdoen bij de NOS

En met een scriptje (perl/PHP/python/scripttaal-naar-keuze) kun je vervolgens die HTML pagina maken/vullen.

[gilligan]

Ik heb al eens zoiets gedaan, dat was met html2canvas. Die maakte dan een screenshot van de div. Werkte op zich niet onaardig, maar dat beperkt je wel een beetje in creatieve mogelijkheden natuurlijk qua tekstopmaak etc. Ook de kwaliteit van de afbeelding is dan nooit zo goed als via Photoshop opslaan volgens mij.

Maarja, Photoshop heeft dan weer als nadeel dat je achter de computer moet zitten om het te maken.

Maar ik vraag me toch af hoe de NOS dit doet. Of andere websites die je een infographic aanleveren gebaseerd op jouw gebruikersgegevens.

[Voor 3% gewijzigd door gilligan op 07-11-2018 13:41]

[sys64738]

Denk dat je CSS onderschat. Het is echt verbazingwekkend wat je daarmee kunt bereiken. En de kwaliteit is juist super. Schaalbare fonts en goede CSS kun je erg hoge kwaliteit mee halen en dus ook zo high res als je maar wilt.

[Ventieldopje]

Sterker nog, die infographic is 100% na te maken (schaalbaar) met html en CSS3.

[b2vjfvj75gjx7]

Geef me een uur en ik bouw het na in SCSS

Of je rendert het dynamisch als 'echte' afbeelding via bv. een PHP script (Image Magick).

Wil je echt een .csv via Photoshop genereren, dan moet je even zoeken op "data driven graphic .psd photoshop" - dan kom je oa. hier uit;

https://graphicdesign.sta...e-name-each-line-has-a-un

- edit - Om je op weg te helpen;

https://jsfiddle.net/L58by7w3/1/

Let niet op de semantiek van de CSS (als je dat al doet, ha ha) - het is letterlijk... een fiddle.

[Voor 17% gewijzigd door b2vjfvj75gjx7 op 07-11-2018 17:45]

[gilligan]

Bedankt voor jullie hulp. Photoshop was bij nader inzien misschien toch niet zo'n goed idee. Ik gebruik toch maar weer html2canvas, maar ga wkhtmltoimage ook zeker nog even bekijken. Met een achtergrondafbeelding en dan data uit de database met PHP. Is wel wat kwaliteitsverlies, maar op zich nog wel goed genoeg. Maar dan kan ik in ieder geval ook een graphic maken zonder Photoshop.

@deathgrunt: Bedankt voor je CSS uitwerking. Maar de afbeelding diende meer als voorbeeld wat ik in gedachten had.

[Ventieldopje]

gilligan schreef op woensdag 7 november 2018 @ 22:25:
Bedankt voor jullie hulp. Photoshop was bij nader inzien misschien toch niet zo'n goed idee. Ik gebruik toch maar weer html2canvas, maar ga wkhtmltoimage ook zeker nog even bekijken. Met een achtergrondafbeelding en dan data uit de database met PHP. Is wel wat kwaliteitsverlies, maar op zich nog wel goed genoeg. Maar dan kan ik in ieder geval ook een graphic maken zonder Photoshop.

@deathgrunt: Bedankt voor je CSS uitwerking. Maar de afbeelding diende meer als voorbeeld wat ik in gedachten had.

Waar haal je die kwaliteitsverlies vandaan? Ik snap het echt niet (en ik heb met beide ervaring). Je praat je zelf daar wat mee aan. Neem van mij aan dat Photoshop niet de tool for the job is.