Op het internet worden er heel wat diensten en materiaal gratis aangeboden. Nadat we eerder getoond hebben waar en hoe web-materiaal te vinden, bespreken we hier het bewerken van visueel materiaal.
Voor basisbewerkingen is er geschikte software en online services waarvan we er hier enkele voorstellen. Sommige hebben we getest, enkele gebruiken we zelf al lang en de rest leek ons de moeite om te vermelden.
Wat wordt hier besproken?
- Afbeeldingen maken en bewerken
- GIF-makers
- Infographics maken
- Flowcharts, schema's
- Iconen en ander materiaal
- Kleurpaletten
- Comprimeren van beeldmateriaal
Het maken van (achtergrond)patterns werd in het eerste deel van deze artikel-reeks besproken.
Idem dito voor de aanmaak van knoppen.
Voor de liefhebbers sluiten we dit artikel af met software die niet online is maar geïnstalleerd moet worden op je computer:
Online services
We starten met een eenvoudige editor Pixlr Express , https://pixlr.com/express/ , waarmee je een bestaande afbeelding (bestand of ULR of een opname van je webcam) kan bewerken . Hoewel je een PNG-bestand kan openen is het resultaat steeds in JPG-formaat.
Zijn grotere broer is Pixlr Editor , https://pixlr.com/editor/ . Deze online editor is de laatste jaren met aardig veel bewerkingsmogelijkheden uitgebreid. Het staat tussen Paint en Photoshop | Gimp en is nog steeds intuïtief in zijn gebruik.
Er kan met layers gewerkt worden. De taal van de interface kan veranderd worden naar Nederlands (of vele andere). Deze 2 laatste mogelijkheden bestaan niet bij de online editor van Photoshop: http://www.photoshop.com/tools?wf=editor . Met deze kan je nu (zomer 2018) enkel bestanden van het formaat JPEG, JPG en JPE, max. 16 mega-pixels bewerken.
Een nog sterkere editor is Photopea https://www.photopea.com/. Voor diegene die GIMP kennen, zal de interface vertrouwd overkomen. In deze editor kan men ook PSD- en XCF- bestanden bewerken. In één sessie kan men meerdere bestanden tegelijk open hebben. In tegenstelling tot Pixlr is er nog geen Nederlandstalige versie.
Wil je kunnen kiezen uit afbeeldingen, achtergronden of templates dan kan Canva https://www.canva.com/ een oplossing bieden. Je kan niet werken in layers maar dat houdt het gebruik ook laagdrempelig. Er zijn voor-gedefinieerde formaten voor afbeelding op sociale media, banners en zelfs printmateriaal zoals flyers, visitekaartjes, postkaarten, .... Het resultaat kan je bewaren als PDF, JPeG of PNG.
Je moet inloggen maar dit kan evengoed met jouw Facebook of Google account. Canva heeft een aantal handleidingen of korte oefeningen (met hints) waar je al doende mee leert. Achter dit redelijk nieuw product zit een dynamisch team, dus verschiet niet als je na inloggen mails krijgt met tips & hints.
Heb je een kant en klare afbeelding maar moet ze enkel bijgesneden worden om ze dan op een sociaal medium als Facebook, Tumbrl., Pinterest, ... te zetten dan kan je hiervoor een speciaal ontworpen bewerkingsprogramma gebruiken: http://www.internetmarketingninjas.com/seo-tools/favicon-generator-crop-images/ .
Google heeft ter ondersteuning van zijn AdWords service ook een programma ter beschikking gesteld specifiek voor het maken van banners. Maar door de uitgebreide functionaliteiten is het (even moeilijk of wennen) als een foto-editor waarbij animatie-effecten in een tijdslijn gedefinieerd kunnen worden. https://www.google.com/webdesigner/
Een kersvers programma sinds de zomer van 2016 is Vectr https://vectr.com/waarmee je vectoriële afbeeldingen kan maken en dit zowel on-line als met hun gratis software. Hierbij kan je ook bestaande svg-bestanden opladen.
De beschikbare hulpmiddelen zijn weliswaar beperkt. Inloggen of registreren is nodig maar dit kan je zowel met Facebook, Twitter als Google. Deze laatste optie bleek echter niet te werken op 31-012-2016.
Gezien de jonge leeftijd van deze software(dienst), is dit misschien toch de moeite om in het oog te houden.
GIF-makers
http://ezgif.com/maker is zeker een online dienst die je moet kennen. In vergelijking met andere diensten is EZgif wel de meest uitgebreide en toch soepel in gebruik.
Ga hiermee jouw gif maken, dan toch enkele weetjes.
- De delay-time is in honderdsten van seconden
- Bestanden zullen na upload alfabetisch gerangschikt worden (je kan ze nog gemakkelijk verplaatsen)
- Ga niet naar een andere tab (zoals GIF Effects of GIF Optimizer) want dan mag je terug beginnen met je bestanden op te laden
- De settings voor delay-time, effects e.a. worden niet hernomen bij een volgende upload, als je dus herbegint of een volgende gif aanmaakt, moet je deze waarden zelf herinneren.
- Limiet staat op bestandsgrootte van 5Mbyte, in totaal 30Mbyte en maximum 400 afbeeldingen.
- Na het opladen van de bestanden en het specificeren van de Delay time met Effects, klik je op Animate it! Na even wachten wordt het resultaat getoond met vermelding van bestandsgrootte, dimensies en aantal frames. Op de resulterende gif kan je nog nabewerkingen doen zoals bijsnijden, verkleinen, watermerk of tekst overleggen
- Als je een zachtere overgang tussen de afbeeldingen wil, weet dat een kortere Fader delay met een hoger Frame count de overgang zachter maakt maar de bestandsgrootte verhoogt.
Op EZGif.com kan je ook reeds bestaande GIF’s bewerken zoals opsplitsen, optimizeren, dimensies aanpassen (resize en crop), een tekst erbij zetten en (kleur)filters toepassen zoals je in Instagram hebt (sepia, helderheid & verzadiging, ...
Wil je een eenvoudig animatie-effect op 1 afbeelding bekijk dan zeker http://waitanimate.eggbox.io/#/ waar je verschillende type effecten met hun overeenkomstige CSS kunt vinden. (Waarschuwing: deze site bevat een overdaad aan rode kleur, en kan zo je humeur schaden).
Infographics maken
We hebben maar 1 dienst getest, InfoGr.am waar je grafieken en kaarten mee kan maken. Ze staan wel op de servers van InfoGr.am waardoor je ze met een embed in jouw site moet oproepen.
De interface werkt intuïtief, toch zeker als je de intro-video van 3minuten bekeken hebt.
Je kan data uit meerdere bronnen opnemen (jouw bestand opladen of uit de Cloud zoals Google Drive, Dropbox en OneDrive).
Onder de gratis licentie kampt je wel met volgende limieten:
- maximum 10 projects
- maar 2 (land)kaarten beschikbaar: een wereldkaart en de VS
- uploaden van 10 afbeeldingen
Uit mijn test blijkt wel dat bij cijfers over verschillende kolommen er maar 1 schaal , de grootste, gehanteerd wordt. In het onderste voorbeeld zal onder de tab van levensverwachting de gegevens dus allen tegen de y-as plakken (want hoogste schaal is in de miljoen zoals in de tab "#inwoners").
Andy Kirk, gespecialiseerd in data visualiteis heeft een lijst gemaakt van tientallen programma's en diensten (zowel gratis als betalende) die gegeven data visualiseren. Zijn overzicht, in het Engels, kan je raadplegen op http://www.visualisingdata.com/resources/
Iconen en ander materiaal
Tips om afbeeldingen te maken voor sociale media vind je zeker op https://blog.bufferapp.com/tools-create-images-for-social-media
Voor het maken van infografieken vind je misschien je gading bij Piktochart https://piktochart.com/ ; registreren of inlogin is wel vereist.
Icons: In het programma IconsFlow, https://iconsflow.com/ , start je van een (basis)icon, te kiezen uit 25 categorieën, waarna je dan kleur, schaduw, achtergrond-kleur & -formaat kunt instellen. Je kan ook starten van een eigen SVG-bestand dat je dan uploadt voor bewerking. Inloggen is verplicht maar dit kan evengoed met je Facebook of Google account.
Resizen van een afbeelding voor een favicon kan je snel & simpel op iconifier.net . Je laadt je bestand van maximum 500Kbyte op en dan wordt je (vierkantige) afbeelding gevonverteerd naar volgende formaten: 16x16, 24x24, 32x32, 48x48 en/of desgewenst naar: 64x64, 128x128x, 256x256.
https://www.websiteplanet.com/nl/webtools/favicon-generator/ laat toe om afbeeldingen tot 5MByte grootte om te zetten naar een favicon en dit met grote flexibiliteit. Je kan zels uit hun afbeeldingen-lijstje een favicon kizen dat bij jouw site past.
We hebben nog enkele andere mogelijkheden besproken in het vorige deel van deze artikel-reeks.
Flowcharts
We bespreken hier maar 1 programma omdat het gratis is, zeer intuïtief werkt en heel wat mogelijkheden biedt: www.draw.io
Bij opstart moet je kiezen waar je jouw diagrams zult bewaren:
- op je PC ("Device") of
- in de cloud: Dropbox, Google Drive, OneDrive, Github of Trello.
Als je goed oplet dan zie je onderaan dat je deze keuze voor altijd of enkel nu wil, of dat je later nog kan kiezen ("Decide later").
De editor is heel intuïtief om in te werken en laat veel bewerkingen toe. Een pluim voor de ontwikkelaars! De enigste bewerking die ik niet kon vinden is het (horizontaal of verticaal) aligneren van meerdere objecten.
Er zijn massa's symbolen, iconen en afbeeldingen om uit te kiezen.
Handig om weten:
- bewerken van tekst bij een object kan je door het indrukken van F2-toets (net zoals bij Microsoft Visio)
- om het resultaat als een afbeelding te bewaren, kies je niet "Save as ..." maar "Export as ..." waarna je de keuze hebt uit volgende formaten: png, jpeg, svg, pdf, html, vsdx en een url; standaard formaat van bewaren is een xml-bestand.
Ben je niet tevreden van dit programma, bekijk dan de bespreking van 4 alternatieven op www.ilovefreesoftware.com
Comprimeren
We hebben hiermee zelf nog geen testen gedaan om het effect te meten, maar een artikel van juli 2018 op Web Desinger Depot kan ons helpen.
Hun conclusie in een paar zinnen:
Allerbeste is Shortpixel maar bij kleine afbeeldingen bleek de finale bestandsgrootte vaak nog te groot. Hiervoor blijkt ImageResize dan wel prima werk te leveren.
Heb je veel afbeeldingen te comprimeren en vind je dat die 2 te veel tijd vragen voor hun verwerkingsproces, ga dan voor Kraken. TinyJPG die in deze test soms falen maar als gratis dinest is hij een goedkoop alternatief voor Kraken.
- http://shortpixel.com/ maximum 50 afbeeldingen per keer
- https://imageresize.org/ max. 20 afbeeldingen per keer
- https://kraken.io/web-interface , login vereist
- https://tinypng.com gratis tot 20 afbeeldingen met elk max 5Mbyte groot.
- https://www.jpeg.io
Comprimeer je vaak dan kan je volgende programma’s op je computer installeren:
- https://github.com/sindresorhus/gulp-imagemin
- https://github.com/gruntjs/grunt-contrib-imagemin
- http://getoptimage.com hier heb je trouwens enkele overtuigende voorbeelden van afbeeldingen vóór en na compressie.
Kleurpaletten
De meest gesofistikeerde kleurpaletmaker is van Adobe. Met https://color.adobe.com/create/color-wheel kan je m.b.v. glijders zeer specifieke kleuren kiezen. Het te installeren programma van Color Schemer (zie hieronder) werkt gelijkaardig maar deze online versie is gratis.
Van dezelfde maker is https://color.adobe.com/create/image dat vertrekt van een bestaande afbeelding. Ideaal om op basis van een logo kleurcombinaties op te zoeken!
Heb je één basiskleur voor ogen en wil je dan bijpassende kleuren vinden, dan is Color Schemer een handige tool. Is de hoofdkleur te licht of donker, met 1 knop zie je een de lichtere of donkere variant met wederom 16 bijhorende kleuren.
Het programma is te betalen maar de online versie is gratis te gebruiken: http://www.colorschemer.com/online.html . In de te betalen applicatie kan je de kleurschema’s bewaren, exporteren (naar html), ... en zijn er meer visualisaties van de kleurpaletten mogelijk waardoor je op meerdere manieren kan kiezen tussen / spelen met de kleurcombinaties.
Minder verwante kleuren worden getoond in ColorExplorer maar daar kan je wel kiezen uit meerdere algorithmen die de "ideale" kleurcombinaties zoeken. Zo kan je uiteindelijk ook tot een uitgebreid set komen.
Wil je kleuren vinden die passen bij je bedrijfslogo of een afbeedling probeer dan http://colormind.io. Je kunt daar een afbeelding opladen waarna de site je 5 passende kleuren toont. Spijtig genoeg zijn het maar 5 kleuren want als de afbeelding al zo veel kleuren bevat, dan brengen de getoonde kleuren weining nieuws.
Alternatieven:
- Starten met 2 zelfgekozen kleuren http://www.materialpalette.com
- Kiezen uit 330 kleurpaletten van telkens 4 kleuren: https://colordrop.io
- Random generator: https://coolors.co
- 8 kleurkiezers besproken waarvan de belangrijkste reeds hier in dit artikel aan bod kwamen http://www.creativebloq.com/features/8-free-apps-for-picking-a-colour-scheme
Nog andere recentere tools voor kleurpaletten zijn gepresenteerd op https://css-tricks.com/re-pleasing-color-palettes/ ( update winter 2019 ).
Software om afbeeldingen web-klaar te maken
Het is niet de bedoeling om hier tekenprogramma’s te bespreken, daarvoor vind je op het internet genoeg andere artikels. Met het bewerken van video's heb ik helemaal geen ervaring, maar vind je programma dan evt. op http://www.ilovefreesoftware.com/13/featured/free-portable-video-editors-windows.html
Gimp zal je zeker bekend zijn als gratis alternatief voor Photoshop. Een Nederlandstalige versie is beschikbaar maar door de vele functionaliteiten is een instap voor beginners niet evident. Voor hen raad ik wel aan om het werk van een Nederlandse te bekijken: in 40 video’s maakt ze je vertrouwd met alle functionaliteiten in Gimp: https://www.youtube.com/user/cursusfotobewerken .
Er zijn 2 lichte programma’s die ikzelf intensief gebruik om aangeleverde afbeeldingen klaar te maken voor publicatie op je site.
Kroppen, resizen (dimensies, DPI, ...) of formaat wijzigen doe ik met Irfanview.
Je kan evenzo kleurcorrecties uitvoeren: rode-ogen correctie, vervangen van 1 kleur door een andere (maar je kan ze niet wegdoen om een deel transparant te maken), tekst en watermerk toevoegen.
Om op de gekozen afbeelding iets anders toe te voegen zal je een tekenprogramma moeten openen.
Het andere beeldverwerkingsprogramma dat ik gebruik is FastStone.
Het bestaat in feite uit 2 delen: FastStone Image Viewer waarmee je een individuele afbeelding kunt bewerken, en FastStone Photo Resizer. Deze laatste biedt zeker alle functionaliteiten van IrfanView aan met als grootste extra voordeel dat je meerdere bestanden tegelijkertijd kunt bewerken (in een batch programma).
Met FastStone Photo Resizer kan je namelijk
- heel soepel resizen (je kan zelfs standaardmaten bepalen),
- de afbeelding draaien, afsnijden (crop)
- DPI (dots per inch) instellen
- de kleurdiepte wijzigen (2, ,4, 8, 16,32, 64, 128, 256 en 16,7miljoen)
- instellen van helderheid, contrast, verzadiging ...
- een watermerk of tekst over je afbeelding zetten (wel iets te weinig mogelijkheden)
- rond de afbeelding een kader zetten waarvan je de kleur, radius, opacity kunt instellen
Dat FastStone zich meer richt naar het beheren van een verzameling foto’s of afbeeldingen merk je al met het hoofdscherm dat gelijk een bestandsbrowser werkt waarbij de afbeeldingen in een rechts paneel gevisualiseerd worden.
Dit heeft het nadeel dat bij bewerking van 1 enkele afbeelding de preview in een te klein venster getoond wordt, bij IrfanView tegenover is de afbeelding in het hoofdvenster te zien.
Bekijk enkele besprekingen van deze freeware op:
- http://www.gratissoftwaresite.nl/downloads/grafische-vormgeving
- https://www.cmscritic.com/eight-free-photoshop-alternatives/
Schermafdrukken maken
Ik ben een gebruiker van het betalende Snagit maar ik blijf mij onwennig voelen bij zijn interface en hoe het programma in elkaar zit. Op een andere PC daarentegen, gebruik ik met veel plezier & gemak goed gekozen gratisch software.
Greenshot https://sourceforge.net/projects/greenshot/
Dit licht programma biedt de meeste basis-functionaliteiten aan en dit op een duidelijke manier, je bent er zo weg mee.
Zoals de meeste van dergelijkeprogramma's kan je afdrukken maken van je hele scherm, het actieve programma, of een zelfgekozen gebied. Als je het gebied kiest (met slepen van de muis) dan toont het de breedte en hoogte van je selectie in pixels. De gemaakte schermafdruk kan je in de editor van Greenshot bewerken door het bijvoegen van een rechthoek, ellips, lijn of pijl waarbij je de kleuren en lijndikte kunt kiezen. Idem dito voor tekst waarbij je dan ook het font-type & -grootte kunt kiezen, alsook vetjes & schuin, alignering. Op de toegevoegde elementen kan je een schaduw-effect toepassen. Je kan ook nog markeringen aanbrengen zoals met een fluostift (met keuze uit alle mogelijke kleuren) alsook maskeren (obfuscaten).
Extra effecten op de hele afbeelding zijn inverteren van kleuren, links/rechts draaien, omkaderen.
Je kan de afbeelding vanuit de Greenshot editor direct zenden naar uw standaard MS Office-applicaties, je tekenapplicatie zoals MSPaint of Paint.Net, je mail-client zoals in mijn geval Mozilla Thunderbird (als bijvoegsel aan de mail), of zelfs naar de cloud. Voor deze laatste wordt naast Flickr en Imgur ook Dropbox, Box, Picasa Confluence vermeld maar deze laatsten werkte niet bij mij. Een kwestie van de juiste plugin installeren?
Het aantal mogelijkheden zal voor sommgien tekort schieten maar door het juist gekozen aantal toeters en bellen, een duidelijke interface, is dit programma zeer intuïtief en gemakkleijk in zijn gebruik. Wat ontbreekt in deze tool is de mogelijkheid om cursor-iconen zoals wijzer, zandloper, handje, ... toe te voegen.
Er is een Nederlandstalige versie beschikbaar.
Screenshot Captor staat op Gizmo's Freeware als beste aangeschreven, dus toch even geprobeerd. http://www.donationcoder.com/Software/Mouser/screenshotcaptor/index.html Deze software biedt veel meer functionaliteiten en beeldbewerkingsmogelijkheden waaronder:
- clipart en watermerk toevoegen
- bij het bewaren van de afbeelding de dimensies opgeven
- commentaar ingeven die in de afbeelding embedded worden
- speciale effecten zoals blur toepassen.
Net zomin als in Greenshot kan je geen afbeeldingen van systeemelementen zoals een cursor, een zandloper, ... toevoegen.
Een beeldafdruk maken beperkt zich niet alleen uit tot je scherm maar ook tot het beeld van je webcam, van je scanner (met correctiemogelijkheid om het gescande beeld recht te zetten) en van een video die je afspeelt op je scherm (mits het installeren van een ander programma van dezelfde maker: Easy Screencast Recorder, output formaten: AVI, MP4, ASF, FLV, MKV, WebM, Mpeg, Multiplex Determined).
Een Nederlandstalige versie is niet beschikbaar.
Let wel: na download op mei 2016 en dan installatie van Screencast met de video-recorder werd een rootkit op mijn PC vastgesteld !
Tijdens het publiceren van dit artikel heb ik nog een tip van een Joomla! gebruiker gekregen en die was echt de moeite waard. De aanrader voor gratis programma’s om schermafdrukken te maken is het zeker Screenpresso, https://www.screenpresso.com .
Het is een meer eigenwijze interface dan Greenshot maar biedt dezelfde functionaliteiten aan én meer: hier is wel de mogelijkheid om systeemelementen zoals cursor-iconen bij je schermafdruk toe te voegen. Een ander leuke functie die Greenshot niet biedt is een middendeel van de afbeelding wegnemen en dit aantonen door een gekartelde rand op de overblijvende delen te zetten.
Je kan hiermee ook een video-opname van je scherm maken. Maar in de gratis versie is dit beperkt (geen systeem geluid maar omgevingsgeluid wordt opgenomen). Op het einde van de video verschijnt trouwens een groot wit scherm met de merknaam Screenpresso. Mocht je deze laatste weten weg te werken, dan blijft over heel de video in de rechterhoek nog steeds de merknaam (in het klein) te zien. De merknaam verdwijnt dus pas in de betalende versie volledig.
Gelijkaardig aan Greenshot kan je de afbeelding niet alleen op je PC bewaren maar ook nog sturen naar een mail-client of bewaren in de cloud met als keuze Google, Dropbox, OneDrive of hun eigen ScreenpressoCloud.
Zeker het proberen waard temeer daar je het programma niet onmiddellijk hoeft te installeren: bij uitvoeren van de download, een exe-bestand, kan je kiezen om het niet te installeren maar wel uit te proberen via de knop: “Uitvoeren (Mobiele versie)”.
Mocht je hun interface niet appreciëren en verkies je eerder een klassieke interface, bekijk dan zeker een gelijkaardig programma PicPick. Er zijn meer bewerkmogelijkheden zoals aanpassen van transparantie, grijswaarden, contrast, kleurtoon & balans. Maar een deel van de screenshot weglaten (zoals de witte zigzag-lijn in de afbeelding hierboven) is enkel mogelijk via selecteren van een deel van de afbeelding mat daarna een copy & plak zoals je in Paint zou doen. Dus geen speciale effecten om de intersectie te visualiseren.
In deze serie van artikelen bespraken we reeds
- waar je bronmateriaal zoals afbeeldingen, iconen, achtergfronden en fonts kan vinden
- tools en online diensten die bestandstypes converteren naar andere types
Opmerkingen op dit artikel of enkele aanbevelingen? Geef ze door aan de auteur Manu Ampe