Cookies op Tweakers

Tweakers is onderdeel van DPG Media en maakt gebruik van cookies, JavaScript en vergelijkbare technologie om je onder andere een optimale gebruikerservaring te bieden. Ook kan Tweakers hierdoor het gedrag van bezoekers vastleggen en analyseren. Door gebruik te maken van deze website, of door op 'Cookies accepteren' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt? Bekijk dan ons cookiebeleid.

Meer informatie
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: 15:58

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
Mijn sig is te klein :+


  • sys64738
  • Registratie: oktober 2002
  • Laatst online: 17:46

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: 17:46

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: 15:58

Ventieldopje

I'm not your pal, mate!

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

www.maartendeboer.net
Mijn sig is te klein :+


  • deathgrunt
  • 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 deathgrunt 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: 15:58

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
Mijn sig is te klein :+

Pagina: 1


Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Microsoft Xbox Series X LG CX Google Pixel 5a 5G Sony XH90 / XH92 Samsung Galaxy S21 5G Sony PlayStation 5 Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True