Op het internet worden er heel wat diensten en materiaal gratis aangeboden. Zonder de pretentie om volledig te zijn noch alles uitgeprobeerd te hebben, bespreken we een aantal die de moeite waard zijn, en die je werk allicht zullen verlichten of goedkoper maken. In dit eerste deel bespreken we het overnemen van visueel materiaal.

Inhoud

Foto’s en afbeeldingen

Als het copyright van het type Creative Commons Zero, CC0, is, dan kan men het materiaal vrij gebruiken zonder bronmelding, wijzigen, en gebruiken voor commerciële toepassingen. Hoewel Tumblr en Pinterest net zoals Flickr een goede bron voor het vinden van materiaal, zijn deze af te raden wegens onduidelijke auteursrechten.

Pixabay.com  zou meer dan 620.000 foto’s bevatten waaronder een 2.400 afbeeldingen en 1.500 vector graphics.

Pixabay
Wat zoeken betreft is dit de meest gemakkelijke van het lijstje. Je kan meerdere zoekcriteria combineren: type, dimensie, categorie en kleur. Om de foto’s in volle resolutie te downloaden moet je wel registreren, voor lagere resolutie niet.

Ook op www.freeimages.com/ verloopt het zoeken vlot. Mocht je hier in de gratis afbeeldingen niets vinden dan vind je ernaast (in mozaïek) te betalen alternatieven. (Deze site is ook aanbevolen door FrankWatching.com).

Heb je geen bezwaar om je te registreren en wil je een uitgebreide zoekmachine, bezoek dan depositphotos.com .

Depositphotos

Als je een zoekterm hebt ingevuld dan zal je met de filters in het linker paneel de resultaten kunnen filteren op Categorie (Abstract, Concepten, Decoraties, Kunst, Architectuur - Gebouwen, Steden, Zakelijk, IT + elektronica, Lifestyle, Beroemdheden, Dieren), oriëntatie (liggend, staand, vierkant), formaat en kleur.

www.dreamstime.com/free-photos biedt 44 miljoen gratis afbeeldingen maar vereist wel inloggen om te kunnen downloaden.

Op de cloud fotogalerij Flickr.com kan je ook foto’s vinden. Compfight.com/ zou hierbij helpen maar vergeleken met zoeken op Flickr zelf bleek al snel dat Compfight niet alles vindt.

Pexels.com biedt zowat 4.500 foto’s aan. Hier vind je zeer mooie foto’s en weinig (onbruikbare) amateurfoto’s. Spijtig laat de zoekmotor geen uitgebreide filtermogelijkheden toe.

Unsplash.com was een van de eerste die gratis stock foto’s aanbood en werd dan ook snel gewaardeerd door web bouwers e.a. . Het pagineren door foto’s is niet altijd zo gemakkelijk maar de foto’s lijken mij meer kunstzinnig en zijn allen met hoge resolutie. Voor een parallax op je website zal je hier allicht iets vinden.

Even artistiek is Fancycrave.com opgericht in 2015 door een professioneel fotograaf. Het werk van meerdere fotografen (en firma's) vind je op Fotosearch.com.

FotoSearch com Xmas

Foter.com zou meer dan 200 miljoen foto’s aanbieden maar je kan niet zoeken op een zelfgekozen term, enkel selecteren op categorie, licentie-type en kleur.

Waar je wel kan zoeken met (Engelstalige) kernwoorden is Librestock.com .

Technische termen, vakjargon, wetenschappelijke namen, ... daarvoor afbeeldingen (video’s en geluid) vinden doe je (via het zoekveld) op Wikimedia.org

Afbeeldingen over koken, eten en drinken ? Bezoek zeker foodiesfeed.com

Op New Old Stock zijn er zeker fijne oude en historische foto’s te vinden. Spijtig genoeg kan je op die site (nog) niet zoeken en zal het dus behelpen zijn met een Google-zoekopdracht als https://www.google.be/?q=christmas+site:http:%2F%2Fnos.twnsnd.co
Vele van de New Old Stock foto’s zijn ook te vinden, tussen veel meer archiefmateriaal, op een foto-archiverings-initiatief zoals op Flickr: www.flickr.com/commons

Wees kritisch bij jouw keuze uit stockfoto's, je riskeert dat je doelpubliek zich er niet in terug vindt. Dit heb je snel met foto's uit (betaalbare) foto-diensten die te aalglad of onnatuurlijk overkomen, dit is zeker het geval met Amerikaanse aanbieders. Er zijn er ook veel foto's die treffend zijn maar al te veel gebruikt zijn geweest waardoor jouw site clichématig of nietszeggend zou kunnen overkomen.

Iconen en meer

iconmonstr.com bevat meer dan 3.400 iconen verdeeld over 246 verzamelingen. Je kan hier regelmatig in navigeren omdat je snel de laatste nieuw beschikbare kunt terugvinden.
Elk icoon is beschikbaar in SVG, PSD en PNG formaat en zoals je op onderstaande afbeelding kunt zien kan je voor een gekozen icoon de kleuren van het icoon en zijn achtergrond kiezen alsook of de afbeelding van het icoon in een (afgerond) vierkant of cirkel moet staan.

iconmonstr

Freepik.com bevatte eind 2016 99.400 iconen, 153.300 vector-afbeeldingen (.ai en .eps formaat), 5.620 PDS-bestanden en 201.000 foto’s. Alles verdeeld in verzamelingen (behalve de foto’s waar geen tags noch een ander manier van selectie of onderverdeling voorhanden is). Een groot aanbod, spijtig genoeg worden er maar 35 foto’s per pagina getoond, meer filtermogelijkheden zouden ook welkom zijn. Er is wel uitleg hoe je bijv. PSD-bestanden kunt editeren (steeds is er een background-layer en een layer met de hoofdfiguren). Tussen de gratis afbeeldingen zitten Shutterstock-items waarvoor een bijdrage of inloggen gevraagd is.

Freepik categories 

Flaticon.com levert een grote verscheidenheid aan iconen: 172.514 verdeeld in 2.680 bestanden. (formaten in png, svg, eps, psd en base64). In de gratis versie kan je maximaal 3 verzamelingen downloaden. Ook hier vind je items van Shutterstock. Je kan de iconen selecteren in een boodschappenmandje (My collection) en daarna alle gekozen afbeeldingen downloaden in formaat PNG, SVG, EPS, of PSD.

Zoek je iconen voor je e-commerce site bezoek dan de blog van Lemonstand waar er 32 zeer verschillende sets van iconen gratis te downloaden zijn: http://blog.lemonstand.com/free-ecommerce-icon-sets/

Fonts

een handige site voor gratis fonts is www.fontsquirrel.com/ waar de honderden fonts redelijk gemakkelijk te vinden zijn door gebruik van tags, klassificaties, ...

Zoek je passende fonts en heb je al 1 start-font gekozen, probeer dan de www.fontspring.com/matcherator

100 gratis fonts vind je opgelijst op www.fontfabric.com/category/free/

Een enorme lijst van beschikbare fonts voor icons is te vinden op https://css-tricks.com/flat-icons-icon-fonts . Er zijn zowel betaalde als gratis fonts. Net zoals bij fontawesome zijn er fonts voor specifieke afbeeldingen zoals voor weerelementen, landen uit te beelden, mini-iconen en handgetekende.

Fontello.com maakt van vectoriële afbeeldingen webfonts. Zo kan je jouw pictogrammen net als font-awesome gebruiken. Velen vinden met fonts werken gemakkelijker dan met sprites, bovendien kunnen  afmeting, kleur en schaduw met CSS gecontroleerd worden.

In het hoofdstuk CSS zie je hoe je de CSS kan aanmaken voor verschillende font-stijlen en html-elementen p,h1, h2, h3, h4...

Achtergrondpatronen

Achtergrondpatronen: op Hero Patterns kan je op 40 start-patronen je kleur en doorzichtigheid kiezen om dan daarvoor de CSS te bekomen. www.heropatterns.com/

HeroPatterns

Voor achtergronden kan je ook terecht op Patternify er zijn minder voorgekauwde templates maar je kan daar wel zelf nieuwe patterns aanmaken.

Patternify

In het volgende deel van deze artikelenreeks wordt er ingegaan op het creëren van kleurpaletten.

Knoppen, buttons

Maken van knoppen is een fluitje van een cent met http://buttonoptimizer.com/ . Instellingen van kleuren, schaduw op tekst en/of knop, rondingen, ... alles is gemakkelijk te kiezen. Enkel voor de keuze van een bijkomende icoon is het minder soepel omdat je een sleutelwoord (in het Engels moet ingeven) en dan pas kan kiezen (house geeft > 60 varianten, eye > 33 icoontjes). Als tekst-font kan je enkel kiezen uit : Arial/Helvetica, Comic Sans, Courier New, Georgia, Impact, Tahoma, Times New Roman, Trebuchet, Verdana.
Ben je klaar met je bewerkingen dan kan je het resultaat downloaden als CSS of als PNG-afbeelding.

ButtonOptimizer

Zeer gelijkaardig is Best Button Generator. Voordeel hier is dat er een heel set van voorbeelden voorhanden is waaruit je kiezen kan om ze dan aan je smaak aan te passen.

Best CSS ButtonGenerator

 

Een schakelaar Aan / Af kan je maken in de Flip Switch Generator van {CSS} Portal. Deze site bevat trouwens tal van andere interessante en handige tools en artikels over CSS.
Er wordt zowel de HTML-code als de CSS gegenereerd.

CSSPortal FlipSwitch

CSS

Op {CSS}portal vind je niet alleen uitleg en voorbeelden maar ook hulpmiddelen die CSS creëren voor knoppen, box (schaduw, hoeken), gradiënt, gekantelde tekst, tootltip , aan-af-knop, sprites, ...

CSS Portal : CSS generator

Daarnaast kan je LESS tot CSS omzetten, je CSS valideren, formatteren en zelfs optimalizeren (snelheidswinst goed voor SEO).
Hun Style Editor is heel uitgebreid, naast de klassieke settings als font, boord & marges, achtergrond laat ze laat zelfs toe om de cursor te veranderen.

CSS Portal Style Editor

Maar om verschillende headings samen te stellen in combinatie met de paragraaf-tekst kan je alleen terecht bij Grid Designer http://grid.mindplay.dk .
Laat je niet verwarren door het startscherm waar je kolommen en hun spatiëring moet definiëren; voor onderstaande afbeelding werdend daar 3 kolommen 800px breed gedefinieerd. In de volgende stap, Typography, kan je dan kan je goochelen met font-types, size, lijnhoogte, ...

GridDesigner

 

Elementaire CSS-code kan je vinden op www.w3schools.com maar meer speciale effecten zijn er, naast het eerder vermelde {CSS} Portal ook te vinden in CSS Tutorials for Beginners.

Nog meer

All-free-download.com lijkt mij iets minder professioneel maar via de tags kan je gemakkelijk achtergrond-afbeeldingen zoeken.

Mocht je een gif willen waarvan het onderwerp niet zo specifiek is, neem dan een kijk op giphy.com . Veel hebben een Engelstalig onderschrift, zijn veel te druk en komen weinig professioneel over maar je weet nooit.

Nog meer suggesties voor visueel materiaal kan je vinden op:

Vind je niet wat je zoekt probeer dan www.dreamstime.com/welcome waar je in geavanceerd zoeken een prijslimiet kan instellen.

Zoek je background-video's lees dan op joomlaUX.com het artikel waarin 15 sites voorgesteld worden die gratis video-materiaal aanbieden.

Ben je niet zo sterk in CSS en wil je toch iets fabriceren, bezoek dan eens http://devcodegeek.com/best-css-code-generators-developers.html waar je misschien de geschikte dienst vindt voor jouw CSS-noden. Op http://line25.com/articles/css-tutorials-for-beginners worden sites voorgesteld die je CSS leren maar ook daartussen kan je al CSS-code vinden voor visuele elementen.


Volgende maand bespreken we on-line diensten waarmee je gratis afbeeldingen en tekst-documenten kunt bewerken.

In deze serie van artikelen bespraken we reeds

Heb je opmerkingen of tips over deze artikelenreeks, laat het weten aan de auteur M. Ampe