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
- Iconen maken
- Fonts vinden
- Achtergrond(patronen)
- Knoppen, buttons
- CSS code
- Varia, nog meer
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.
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 .
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.
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.
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.
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/
Voor achtergronden kan je ook terecht op Patternify er zijn minder voorgekauwde templates maar je kan daar wel zelf nieuwe patterns aanmaken.
Gradient Hue of lineaire kleurgradienten in CSS-code zoals background-image: linear-gradient( 135deg, #92FFC0 10%, #002661 100%); kan je gemakkelijke kiezen en downloaden op https://webkul.github.io/coolhue/ Hieronder een klein voorbeeld van aangeboden kleurschakeringen:
In het volgende deel van deze artikelenreeks wordt er ingegaan op het creëren van kleurpaletten.
Een redelijk recente foto-galerij biedt nu al enkele fijen achtergrondafbeeldingen: pikwizard.com . Er lijken (op september 2018) weinig zoekmogelijkheden maar weet dat onderaan de site een klassement te vinden is.
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.
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. De HTML- en CSS-code worden niet op het scherm getoond, ze worden naar je klipbord gecopieerd (bij het klikken op de kop "Get CSS", "Get HTML").
Deze twee sites geven je de HTML- en CSS-code maar laten niet toe om de knop als een image te bewaren, donwloaden. Lijkt je niet zo nuttig maar in een email kan een afbeelding handiger zijn dan code.
Die extra flexibiliteit levert Da Button Factory wel. Eenmaal je knop klaar kan je de HTM- en CSS-code verkrijgen maar de knop ook als afbeelding downloaden waarbij je keuze heb in het formaat jpg, png, gif of ico.
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.
Een aantal knop-fantasietjes kan vinden je op http://wdrfree.com/107/20-purecss-call-to-action-animated-buttons-for-inspiration waarvan je de code (CSS, Javascript en HTML-code) kunt overnemen.
CSS
Een spiekbrief(je) voor CSS? Overzichtelijk en gemakklijk in gebruik: https://frontend30.com/css-selectors-cheatsheet/
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, ...
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.
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, ...
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.
Wil je wagt meer animo op je site, bekijk dan zeker http://kristofferandreasen.github.io/wickedCSS/ . Met 1 bijkomende CSS-bestand kan je meerdere leuke animatie-truukjes op je afbeeldingen of andere pagina-elementen toepassen.
Nog meer
Een bouwkit voor emoji's (4K resolutie) is te vinden onder http://phlntn.com/emojibuilder
Links de lijst met keuzes voor gezicht, mond, ogen, accessesoires, ... waarbij een klik op een element dat bij jouw emoji voegt. In de rechterkolom kan je dat dan verplaatsen (links, rechts) of de positie kan aanpassen.
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:
- wpdiv.com/best-free-stock-photos-websites
- speckyboy.com/free-stock-photos/ (maart 2018)
- www.wpzoom.com/resources/15-best-places-find-free-stock-photos/ ,
- www.rockettheme.com/blog/reviews/210-five-great-free-stock-image-sites-in-2016
- https://www.creativebloq.com/infographic/tools-2131971 (jan. 2018)
- https://www.webdesignerdepot.com/2018/01/10-best-free-animation-libraries-for-the-web
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.
Op speckyboy.com zijn er meerdere generators te vinden voor CSS3 algemeen en specifiek zoals o.m. Media Queries, Flexy boxes, sprites maar ook voor PHP-code, JQuery en zelfs .htaccess .
Volgende maand bespreken we on-line diensten waarmee je gratis afbeeldingen en tekst-documenten kunt bewerken.
In deze serie van artikelen bespraken we reeds
- online diensten waarmee je visueel materiaal kan maken of bewerken
- tools en online diensten die bestandstypes converteren naar andere types
- gratis database-interface programmas
Heb je opmerkingen of tips over deze artikelenreeks, laat het weten aan de auteur M. Ampe