Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' 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

Door , , 68 reacties
Submitter: wwwhizz

Iconfonts verwerven een steeds belangrijkere plek op internet. Ongemerkt zie je ze steeds meer, ook in de vorm van logo's. Tweakers heeft dat nog niet, of moeten we zeggen: had. Tweaker Deathgrunt wist dat in een verloren momentje met slechts een tablet op te lossen.

Op zijn tweakblog schrijft Deathgrunt dat hij al wachtende op de trein met zijn tablet-pc een '100% css-versie' van het Tweakers-logo maakte. Deathgrunt, die op Tweakers al snel faam verkreeg met zijn cartoons en daarna nog vaak van zich liet horen rond design-perikelen of apps voor Windows Phone en Android, postte het css-logo ook op een Tweakblog. Dat resulteerde al snel in veel reacties en anderen die ook aan de slag gingen met het logo van Tweakers, zoals Tweaker elvin. Dat gaf Deathgrunt weer inspiratie voor het maken van een dansende versie. Totdat devver ACM zijn duit in het zakje deed... Namelijk dat Tweakers meer is dan een 'T' gevat in een cirkel met wat groen en zwart. Het is ook een woordmerk. Nog geen twintig minuten later was daar een rudimentaire versie van een font-icon.

tweakers logotweakers logo

css-ontwerp: links: Deathgrunt, rechts: elvin

Het rudimentaire custom-font werd voor Deathgrunt zijn eerste icon-font van slechts 5 kilobyte groot, of eigenlijk zelfs nog minder in de TrueType-versie. Het font kan lokaal geïnstalleerd worden, maar zou ook als webfont ergens gehost kunnen worden.

Tweakers heeft niet direct plannen om het font te gebruiken, in verband met browsercompatibiliteit. Eerder zou het huidige png-bestand vervangen worden door een svg-versie. Met het voordeel van een vectortekening dat deze perfect schaalbaar is, gecombineerd met de ondersteuning voor svg door browsers.

tweakers icon font

 Dit is een gewoon plaatje! ;)

Moderatie-faq Wijzig weergave

Reacties (68)

Het retro logo is nog steeds zoveel mooier, goed dat deze ook is omgezet ;)
Binnenkort update ik het font.

Slot nummer 9 is nog vrij en daar ga ik Henk in plaatsen!
:+ Kijk de icing op de cake, want zonder Henk is het nooit compleet!
Dank voor wederom een gave update.

Henk plaatje Henk plaatje 2
Henk filmpje

[Reactie gewijzigd door kwakzalver op 1 oktober 2015 19:38]

+1
Het oude logo is IMO vele malen mooier, het nieuwe logo kan ik maar niet aan wennen. Normaal niet zo snel last van bij andere veranderingen, maar deze is "het" gewoon niet. :(
Ja, mod me maar :P
Het nieuwe logo is inderdaad onhandig. De compositie is slecht gekozen. Door de diagonale uitlijning van het zwarte vlak in de groene cirkel, met wel een horizontale onderkant van dat vlak, lijkt het alsof het de ontwerper het logo niet lekker gecentreerd heeft.
Inderdaad erg jammer, en dit had de ontwerper moeten zien.

Deathgrunt heeft echter wel mooi werk geleverd met zijn reproductie.

[Reactie gewijzigd door 70599 op 1 oktober 2015 19:09]

Een van de grootste problemen naar mijn mening, wat ik destijds ook aanhaalde, is dat het volgens de mensen erachter 'een steeksleutel in beweging' voor moet stellen. Niet zozeer omdat tweakers die gebruiken bij het tweaken van spullen, maar wel omdat het een stuk gereedschap is. Ik quote:
- Steeksleutel beter herkenbaar doordat deze iets is gedraaid.
- De gedraaide steeksleutel suggereert actie en is ook een leuke verwijzing naar tweaken.
Bron: plan: Tweakers tweakt logo - Nieuw logo voor hetzelfde Tweakers
Doordat de steeksleutel schuin staat moet hij beweging voorstellen. Maar zeg nu zelf, eerlijk, wie van jullie ziet dat? :P
Komt ook bij dat de verhoudingen compleet zoek zijn. Een 'steeksleutel' is het bij lange na niet..
Wat voor verwarring bij mensen zal zorgen en wat ook voor mij voor verwarring heeft gezorgd, is dat de verhoudingen gewoon niet kloppen. Dit vermoeden had ik zelf op een gegeven moment dus ik ben even gaan Painten. En zie hier het resultaat.
Hierbij heb ik het NIEUWE Tweakers logo gebruikt.
(Disclaimer: ik heb twee afbeeldingen van Google geplukt, dat deze correct zijn getekend (met verhoudingen e.d.) is niet zeker, maar hier ga ik voor het gemak van uit.)
Deze afbeeldingen heb ik over het Tweakers logo gelegd, en vervolgens het tweakers logo over de afbeeldingen. Wat je kunt zien is dat de verhoudingen gewoon niet kloppen.

[Reactie gewijzigd door Vickiieee op 2 oktober 2015 09:11]

Ik mis Henkie nog steeds, dat was een leuk logo ;)
Ben zelf ook een voorstander van svg ipv icon fonts.
Daarintegen werken icon fonts op een heleboel browsers zelfs oude versies van IE. Maar een vector afbeelding is gewoon beter scaling, multicolor etc.

[Reactie gewijzigd door seapip op 1 oktober 2015 17:11]

Klopt, al heb ik het icon-font via stacking ook multi-color weten te maken :p
Alleen een gradient wordt al wat lastiger xD
Nee hoor, je kan gewoon een gradientfill toekennen aan elk onderdeel van het logo... Net als een glow, dropshadow, outline, etc...

Dat is het voordeel van stacking; je kan elk element los stylen in tegenstelling tot een vast .SVG object...
Even geleden, maar als ik het me goed herinner kan je de aparte onderdelen van je svg ook stylen op voorwaarde dat deze als xml/html element in je pagina staat en dus niet als file/base64 (?) is geincluded/gestyled.
Een gradient in text wordt anders wel ingewikkeld in css...Ja het is mogelijk met wat webkit specifieke css maar of we daar blij van worden :/
En als je de svg daadwerkelijk embed ipv naar verwijzen in een img tag kan je deze ook geheel stylen met css :D
Als icoon op een button of in de tekst (waar icon fonts voor zijn) is een font beter geschikt maar als logo kun je beter een SVG pakken inderdaad :)
Niet perse, een svg ipv font is even goed of zelfs beter(omdat deze scherper blijft, geen last van browser specifieke text antialias etc). Daarnaast kan je ook svg elementen heel makkelijk gebruiken met behand van het <use> element ^^

Hier is een artikel over svg icons met behand van <use> en het stylen met css:
http://tympanus.net/codro...ling-svg-use-content-css/

[Reactie gewijzigd door seapip op 1 oktober 2015 23:09]

Alleen is een SVG font (niet te verwarren met een SVG afbeelding) láng niet overal ondersteund. Globaal gezien zelfs maar 26.74% van de browsers (bron).
<use> is GEEN svg font!
Het is een verwijzing naar svg code.
Sorry maar je hebt het eerst over een SVG font en later over het <use> element binnen een SVG afbeelding. Dat zijn twee héle andere dingen. Het eerste wordt amper ondersteund (en is zelfs deprecated), het tweede wordt bijna overal ondersteund (98%+).

[Reactie gewijzigd door Ventieldopje op 1 oktober 2015 22:53]

Sorry mijn fout, vergat het woordje ipv :P
Met het voordeel van een vectortekening dat deze perfect schaalbaar is, gecombineerd met de ondersteuning voor svg door browsers.
Gaat wel ten koste van beschikbare rekenkracht en in het geval van smartphones en tablets op accu, aangezien de svg telkens opnieuw moet worden gerenderd.
Weet je zeker dat het dan opnieuw gerenderd moet worden. Of is het niet meer dan schalen. Tenslotte zeg je alleen maar tegen de vector 'vergroot x een bepaald getal', dat wordt in de formule gegooid en de tekening wordt aangepast. Er hoeven geen pixels berekend te worden zoals bij een png die opgeslagen wordt. Een rood vlak blijft een rood vlak. Uiteraard kost het schalen wel rekenkracht, maar nooit zoveel als bij het opnieuw renderen van een png afbeelding. Maar goed, opzich een onderwerp waarover ik best duidelijkheid zou willen.
Als het logo voor de eerste keer gerenderd wordt, wordt er uitgerekend hoe het er uit ziet in de vorm van pixels, op het benodigde formaat.

Als het daarna op een ander formaat nodig is, wordt het opnieuw uitgerekend. Dat is het renderen.
Als het logo voor de eerste keer gerenderd wordt, wordt er uitgerekend hoe het er uit ziet in de vorm van pixels, op het benodigde formaat.

Als het daarna op een ander formaat nodig is, wordt het opnieuw uitgerekend. Dat is het renderen.
Ik denk dat hier vooral het antwoord van RoestVrijStaal hier goed op aansluit. Dat hangt dus erg van de browser engine af. Ondersteund die vector afbeeldingen, dan zal hij minder render werk hebben, want het is nu eenmaal geen afbeelding opgebouwd uit pixels die elke keer opnieuw berekend moeten worden bij schalen.
Tja, we kunnen er van alles bij halen, en inderdaad leiden meerdere wegen naar Rome. De smart phone zal er een fractie langer over doen dan de andere, maar in beide gevallen blijft het renderen.

Aangezien het een afbeelding met een bescheiden aantal vectoren is, zal het uitrekenen ervan geen zware wissel trekken op de rekenkracht. Tenslotte zijn fonts ook op basis van vectoren. Het zal niet heel veel meer of minder zijn dan een paar lettertekens. Op een pagina met een stukje tekst zal de aanwezigheid van dit logo niet veel uitmaken.
Een concreet antwoord is er niet op te gegeven. Het hangt er echt van af wat de web browser engine doet. En dat verschilt nogal onderling :)
Het is een wel heel eenvoudige tekening. Ongeveer even complex als een letter van het alfabet. Ja, het kost rekentijd om hem te renderen, maar niet meer dan een een of twee letters van een tekst.
Ik merkte trouwens wel dat het tweakers retro-stacked icoon geen witte rand heeft,
Maar het oude icoon heeft dat wel -> http://tweakers.net/ext/f/muiaIE09BAxmbZG5OJhGrVQg/full.png

Deathgrunt kan jij dit aanpassen?
Ja hoor, dat is een kwestie van een boxshadow plaatsen... Kan zelfs met het bestaande font; dus een update is niet nodig...

Dat is het voordeel van stacking, elk onderdeel kan je een losse styling toekennen.

Binnenkort zal ik versie 2.0 maken van de Tweakers Regular.
Box shadows zijn vierkant ik neem aan dat je font shadow bedoeld,Maar dan heb je alsnog aan slechts 2 kanten een schaduw en niet rondom.
-> http://codepen.io/anon/pen/bVgyRE
Ik moet het even checken... Anders stapel ik gewoon twee vormen op elkaar en maak ik de onderste wit en 101% groter... Dan krijg je vanzelf een outline effect :p
Ik denk dat je bedoelt 101% grootte? Of 1% groter :9
Je bedoelt text-shadow ;)

En onderschat text-shadow niet:
http://codepen.io/anon/pen/jbBNYy

>:)

[Reactie gewijzigd door seapip op 1 oktober 2015 21:54]

Het is een font, dus dan is font shadow het krachtigst :)

Eventueel nog wat spelen met inset / radius om de outline krachtiger te maken en je bent er...

Maar dat zal ik binnenkort allemaal eens finetunen!
Dus dit is slechts voor codetaal voor tweakers onderling? :P
Ik zie geen alfabet.

Wel tof gedaan.
Een font hoeft niet persé uit traditionele letters te bestaan. Selecteer op een Windows computer maar eens windings, dat is ook een font zonder letters.
wingdings is wel degelijk een alfabet. Uit 1990 zelfs. Dat jij dat niet weet, gezien je geboortedatum. :P

Ik gooi er maar een wiki linkje in, altijd het makkelijkst.
https://en.wikipedia.org/wiki/Wingdings
Het is geen alfabet, het is een serie plaatjes als font opgeslagen. Een alfabet en een font zijn niet hetzelfde :)
Een serie karakters met mening, als plaatjes opgeslagen. Zoals ons ABC dus ook is.
Het font wingdings is gewoon een alfabet, slechts met andere karakters.

Inderdaad zijn een font en een alfabet niet hetzelfde, maar fonts beelden alfabetten (in welk font dan ook) uit.
Windings is daar één van.

Edit: Hmmm :S Tegenspraak met mijn vorige post: Re:
Een alfabet is een zooi karakters verzameld in een bapaalde vorm. Of dat nou een font of een plaatsjesverzameling wordt genoemd doet er niet toe.

[Reactie gewijzigd door HMC op 1 oktober 2015 17:52]

Ik dacht dat een "plaatjes verzameling" hiërogliefen genoemd werd.
Een hiëroglief of hiëroglyfe is een pictogram dat een woord, morfeem of klank uitbeeldt.
Dus geen alfabet
Dude, lees eens de definitie van wingdings en zijn voorganger :S Is een alfabet zoals wij dat hebben niet ook een plaatjesverzameling?

[Reactie gewijzigd door HMC op 1 oktober 2015 18:11]

Een alfabet of – in het bijzonder met betrekking tot het Latijnse alfabet – abc (meervoud: alfabetten of abc's) is een verzameling symbolen om equivalenten van klanken in de gesproken taal schriftelijk weer te geven.

Gok niet dat jij wingdingse klanken praat? :+
Ik zal het even wat duidelijker uitleggen. Een alfabet representeert klanken, een logografisch schrift representeert een compleet woord of idee. Daarom zijn er ook zo veel Chinese karakters. Een pictografisch schrift verschilt met een logografisch schrift omdat het met vaste pictogrammen wordt geschreven, denk bijvoorbeeld aan het spijkerschrift. Het hiëroglyfenschrift is logografisch van nature.
Ja, maar geen willekeurige verzameling plaatjes. Een alfabet is een specifieke verzameling, niet zomaar een uitwisselbare collectie plaatjes. Wingdings is dan ook geen alfabet, alleen een verzameling plaatjes die toevallig gebruik maakt van een mechanisme dat voor alfabetten bedoeld is.

Je noemt een postzegelverzameling toch ook geen alfabet?
Mwah, als de postzegels in een bepaalde volgorde vastzitten wel toch? Dan is dat per definitie een alfabet wat gebruikt kan worden als een commucatiemedium.naar anderen toe. Waar je naar kan wijzen, verwijzen, en welke je zelfs kan citeren.

Ik kan wel weer definities van alfabetten en zo aanhalen, maar dat laat ik aan jullie over.

Een alfabet is een zooi symbolen. Wij hebben de onze, anderen hebben anderen, en wingdings is er ook één. :P
Mwah, als de postzegels in een bepaalde volgorde vastzitten wel toch?
Nee. Er is geen enkele aanleiding om dat te stellen.
Een alfabet is een zooi symbolen. Wij hebben de onze, anderen hebben anderen, en wingdings is er ook één. :P
Correct, correct, nee :p Meer is er echt niet van te maken.
Dat meen je hopelijk toch niet he?

al·fa·bet (het; o; meervoud: alfabetten) 1. het abc van een taal
http://vandale.nl/opzoeke...abet&lang=nn#.Vg4ld0bCWJA

Van welke taal mag Wingdings dan het abc zijn?
Mooi gedaan Deathgrunt. eens kijken of ik met custum css het "oude" logo hier op tweakers kan weergeven.

als autist kan ik slecht tegen het nieuwe logo :+

[Reactie gewijzigd door mrc4nl op 1 oktober 2015 17:08]

*gumgummerdegum*
Beetje dirty en getweakt voor mijn eigen devices. Maar werken doet het wel.

[Reactie gewijzigd door RoestVrijStaal op 1 oktober 2015 23:02]

Dat is image based, en dat heb ik zelf ook al ;)
De truuk is om het met css only te doen, en evt custom typefont zoals Deathgrunt aantoont.
Aha op die manier. Ik kon dat in je eerste bericht niet opmaken dat je het via de css only manier wou doen. ;)
Je wint het internet voor een dag... die pun was best geniaal en mensen die met zelfspot om kunnen zijn sowieso veel leuker.
Leuk dat het hier te lezen is en kudo's aan Deathgrunt!
Inderdaad :) Ik vind ook eigenlijk dat het artikel gewoon 'Deathgrunt maak font van tweakers logo' moet zijn, en niet 'Tweaker' - want dat is nogal obvious. :+
Ziet er behoorlijk goed uit! Is het font gratis te gebruiken?
Ik lees nergens iets over licentiekosten, dus ik neem aan dat het gratis is.
je kan het gewoon downloaden via de link -> http://deathgrunt.com/app-download/tweakers-font/

[Reactie gewijzigd door mrc4nl op 1 oktober 2015 17:17]

offtopic!
XD dat redeneren!
NIET SERIEUS NAAR DE MAKER!!!

Maar: Over een aantal maanden lezen we weer een artikel op de T.Net FrontPage dat er een "Out of The Band" Security update is uitgebracht door Microsoft in verband met een bepaald "Font" :P
Zie ook Gostbird en hier:
http://security.stackexch...ow-if-a-font-is-malicious
Fonts kunnen/konden ook malware bevatten, deze reactie is dan ook gewoon on-topic.
En nu allemaal een 3D tekst screensaver installeren/activeren met dit font...
( * Gutteguttegut deed dit soort dingen al jaren geleden met Fontographer en logo's van bedrijven :) )

[Reactie gewijzigd door Gutteguttegut op 1 oktober 2015 18:52]

Op dit item kan niet meer gereageerd worden.



Apple iOS 10 Google Pixel Apple iPhone 7 Sony PlayStation VR AMD Radeon RX 480 4GB Battlefield 1 Google Android Nougat Watch Dogs 2

© 1998 - 2016 de Persgroep Online Services B.V. Tweakers vormt samen met o.a. Autotrack en Carsom.nl de Persgroep Online Services B.V. Hosting door True