Toon posts:

Photoshop image/infographic met data

Pagina: 1
Acties:

Vraag


  • gilligan
  • Registratie: November 2013
  • Laatst online: 19-08-2020
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

Alle reacties


  • Ventieldopje
  • Registratie: December 2005
  • Laatst online: 10:23

Ventieldopje

I'm not your pal, mate!

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 ;)

www.maartendeboer.net
1D X | 5Ds | Zeiss Milvus 25, 50, 85 f/1.4 | Zeiss Otus 55 f/1.4 | Canon 200 f/1.8 | Canon 200 f/2 | Canon 300 f/2.8


  • sys64738
  • Registratie: Oktober 2002
  • Laatst online: 07:59

sys64738

Moderator Foto & Video

Press play on tape

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.

@gijspeijs | 500px | Flickr | Photography 101: Skills > Patience > Gear


  • gilligan
  • Registratie: November 2013
  • Laatst online: 19-08-2020
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
  • Registratie: Oktober 2002
  • Laatst online: 07:59

sys64738

Moderator Foto & Video

Press play on tape

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.

@gijspeijs | 500px | Flickr | Photography 101: Skills > Patience > Gear


  • Ventieldopje
  • Registratie: December 2005
  • Laatst online: 10:23

Ventieldopje

I'm not your pal, mate!

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

www.maartendeboer.net
1D X | 5Ds | Zeiss Milvus 25, 50, 85 f/1.4 | Zeiss Otus 55 f/1.4 | Canon 200 f/1.8 | Canon 200 f/2 | Canon 300 f/2.8


  • b2vjfvj75gjx7
  • Registratie: Maart 2009
  • Niet online
Geef me een uur en ik bouw het na in SCSS :p

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
  • Registratie: November 2013
  • Laatst online: 19-08-2020
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
  • Registratie: December 2005
  • Laatst online: 10:23

Ventieldopje

I'm not your pal, mate!

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.

www.maartendeboer.net
1D X | 5Ds | Zeiss Milvus 25, 50, 85 f/1.4 | Zeiss Otus 55 f/1.4 | Canon 200 f/1.8 | Canon 200 f/2 | Canon 300 f/2.8

Pagina: 1


Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee