Pixelmountain

Embed speciale fonts in je HTML met de Google Fonts API

Simon Van den Bergh — Sun, 23 May 2010 16:59:54 +0000

Als je speciale lettertypen op je website wilt plaatsen ben je meestal beperkt tot 3 mogelijkheden:

- of je gaat ervan uit dat de gebruiker je speciale lettertype ook op zijn pc heeft (en dat is meestal niet zo!),
- of je maakt er een afbeelding van,
- of je maakt gebruik van een “font replace methode” zoals er hier enkele beschreven zijn.

De font replace methode is momenteel nog de meest solide manier, maar kan nogal omslachtig zijn. Zeker nu het sneller én eenvoudiger kan met de Google Fonts API.

Je hoeft enkel te linken naar het font dat je wil gebruiken, en het is beschikbaar. Via CSS roep je dan de juiste properties en bijhorende values op. Dit heeft ook als voordeel dat alles via de server van Google loopt, en er dus geen bandbreedte verloren gaat. Momenteel is het aantal fonts nog vrij beperkt, maar de library zal in de toekomst zeker nog uitgebreid worden.

Een simpel voorbeeldje:

<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <style>
      h1 {
        font-family: 'Lobster', arial, serif; 
        font-size: 50px;
		text-shadow: 4px 4px 4px #aaa;
 
      }
    </style>
  </head>
  <body>
    <h1>Pixelmountain.be</h1>
  </body>
</html>

Deze html-code geeft onderstaand resultaat (hier een afbeelding als voorbeeld):

In dit voorbeeld wordt ook de css-property "text-shadow" gebruikt. Deze wordt niet ondersteund in Internet Explorer.
Momenteel is er nog geen ondersteuning voor de iPhone, iPad en andere mobiele telefoons. Maar in deze gevallen wordt de tekst wel degelijk getoond in een default lettertype.

Oh ja, fan van het Lobster font dat ik gebruikte in het voorbeeld? Je kan het hier ook gratis downloaden en gebruiken in je illustraties!

Photoshop Quicktip: Pixalated Brush probleem

Simon Van den Bergh — Sat, 15 May 2010 10:37:24 +0000

Onlangs schrok ik me een hoedje. Mijn mooie collectie brushes in Photoshop zag er helemaal gepixeld uit.

Aan de instellingen bleek echter niets veranderd te zijn. Dan maar de hukp van magic Google inroepen. Bleek dat ik helemaal niet de enige was met dit probleem.

Het probleem ligt bij mijn eigen productiviteit. Om snel te switchen tussen de tools in Photoshop kan je gebruik maken van enkele shortcuts. ‘B’ is de shortcut voor de… Brush tool. Maar ook voor de Pencil tool.

En daar schuilt nu net het probleem. Met de Pencil tool geselecteerd, zien je brushes er gepixeld uit. Dus wanneer je eerder de Pencil tool gebruikt hebt, vervolgens een andere tool kiest en je wil een Brush gebruiken d.m.v. de shortcut ‘B’, zal je automatisch de Pencil tool selecteren.

Wanneer je echter de schortcut ‘SHIFT + B’ gebruikt, navigeer je als het ware door het Brush/Pencil menu. Op die manier kan je wel snel de juiste tool selecteren.

De tien slechtste Apple producten ooit

Simon Van den Bergh — Sat, 01 May 2010 10:47:59 +0000

Niet alles wat Apple aanraakt/maakt verandert in goud. De iPhone en de iPad zullen allicht nooit de geschiedenisboeken verlaten. Maar wie kent er nog de Apple Bandai Pippin, de Apple Lisa of de G4 Cube?

Allemaal producten die het daglicht beter niet zagen.

De Britse krant Daily Telegraph maakte een overzichtje van de 10 slechtse Apple producten. Ook iTunes staat in de top tien. Mede omdat de software intussen ingehaald werd door de concurrentie.

Een overzicht met foto’s kan je nalezen op www.hln.be

Prototype van nieuwe iPhone uitgelekt?

Simon Van den Bergh — Mon, 19 Apr 2010 19:33:28 +0000

Technologiewebsite Engadget zou naar eigen zeggen de nieuwste versie van de iPhone in handen hebben. Het werd gevonden op de vloer van een bar in de Verenigde Staten. Het toestel zou draaien op de iPhone OS 4.0. Dat besturingssysteem werd enkele weken geleden nog door Apple aangekondigd voor deze zomer.

Wat er verder aan de iPhone verandert is niet helemaal duidelijk. Wel zou er een camera aan de voorzijde bevinden, bedraagt het interne geheugen 80 GB, en zou er een flits op de camera komen.

Engadget zegt dat het over een betrouwbare bron beschikt over het bestaan van de prototypes. Al wordt er sterk gespeculeerd dat het toestel een Chinese of Japanese namaak is. Op Twitter duiken ook steeds meer foto’s op.

Het is wel vreemd dat het toestel gevonden werd in een bar in San Jose, Verenigde Staten. De ‘gelukkige vinder’ zou het toestel aan Engadget bezorgd hebben. Het prototype zou intussen ook “op mysterieuze wijze” de geest gegeven hebben. Gaat het hier om een pure marketingstunt? Of hebben ze bij Apple last van de aswolk uit IJsland? Wordt zeker en vast vervolgd!

Meer weten?

www.engadget.com/2010/04/19/apples-4th-generation-iphone-revealed/

www.gizmodo.com/5520164/this-is-apples-next-iphone

De nieuwe iPhone in beeld ?

Bron: www.zdnet.be

Google: snelle sites krijgen betere ranking in zoekresultaten

Simon Van den Bergh — Wed, 14 Apr 2010 12:41:14 +0000

Zoekgigant Google maakt bekend dat de snelheid van een website binnenkort mee de ranking in de zoekresultaten zal bepalen. Des te sneller je website inlaadt voor de bezoeker, des te hoger je zal staan.

Tot voor kort was vooral relevantie belangrijk om hoog te staan in de resultatenlijst. Google benadrukt wel dat dit nog steeds de belangrijkste factor blijft, en dat snelheid minder zwaar zal doorwegen.

Volgens Search Engine Land zijn er meer dan 200 factoren die de ranking bepalen, en zou snelheid zelfs voor minder dan 1 procent bepalend zijn.

Google wil met deze nieuwe factor de gebruikerservaring verbeteren, en de surfer zal sneller zijn informatie vinden. Voor webdevelopers hebben ze zelfs een hele campagne opgezet die gewijd is aan het versnellen van websites: Let’s make the web faster

Hoe weet ik of mijn website snel is?

Er zijn heel wat (gratis) tools die je toelaten de inlaadtijd van je pagina’s te meten. Een snel overzichtje:

Google Webmaster Tools
Google Analytics (goed Nederlandstalig artikel)
Yslow (plugin voor FF)
WebSiteOptimization
Let’s make the web faster (overzicht van tools)

Edwords.nl postte een interessant artikel over “Waarom website snelheid een Google ranking factor is”

PIXELS - by Patrick Jean

Simon Van den Bergh — Sun, 11 Apr 2010 08:16:12 +0000

15 Photoshop Tutorials Blogs die je moet gezien hebben

Simon Van den Bergh — Tue, 23 Mar 2010 22:28:31 +0000

Het web puilt uit van de Photoshop en andere design tutorials.

Op zoek naar coole tekst effecten, hoe je foto’s te manipuleren en te verbeteren, hoe je web templates kan maken, hoe je je eigen 3D-wereld creëert?…

Onderstaande blogs met Photoshop Tutorials helpen je zeker en vast op weg!

PSD-tuts

Ongetwijfeld een van de bekendste Tutorial Blogs, onderhouden door een aardig zootje ongeregeld in de designwereld. PSD-Tuts heeft ook heel wat zustersites in verschillende categorieën als Illustrator, Flash, 3D, en webdesign.

Deze blog is elke dag het bezoekje meer dan waard.

Abduzeedo

Abduzeedo is de weblog van gerenomeerde grafisch designers uit Brazilië. Elke dag een heleboel nieuwe inspiratie uit de hele wereld, uitmuntende Photoshop Tutorials en artikels die je zeker zullen inspireren bij je volgende werkje.

Photoshop Lady

Mannen, laat je niet afschrikken. Deze blog is niet enkel voor de ‘ladies’ bedoeld. Je vindt er een verzameling van goede PS-tutorials van op verschillende websites terug.

Tut Candy

Tut Candy oogt niet alleen mooi. Deze site biedt ook een heleboel prachtige videotutorials aan. Jammer dat de site al een tijdje niet meer geupdate is, maar met het materiaal dat je op deze blog vindt, ben je vast wel even zoet.

Zeker een bezoekje waard:

Dotcom viert 25ste verjaardag

Simon Van den Bergh — Wed, 17 Mar 2010 10:38:20 +0000

25 jaar geleden werd de allereerste ‘dotcom’ (.com) domeinnaam geregistreerd. Deze eer ging op 15 maart 1985 naar computerbedrijf Symbolics. Later dat jaar volgden 5 andere bedrijven waaronder Bbn.com en Think.com hun voorbeeld.

De meeste bedrijven die een domeinnaam registreerden waren (of zijn nog steeds) actief in de computerbranche. Tot 1997 waren de dotcom domeinnamen niet echt bekend. pas toen het internet bij jan modaal ingeburgerd raakte. In 2008 zouden er zo’n 77 miljoen .com domeinen geregistreerd zijn.

Benieuwd welke bedrijven gingen lopen met de eerste 100 domeinnamen? Het lijstje vind je hier.

De eerste .be werd in 1989 geregistreerd door Pierre Verbaeten, professor aan het departement computerwetenschappen van de Katholieke Universiteit Leuven. Op 16 februari werd het miljoenste .be domein geregistreerd: www.boekee.be

Onze noorderburen tellen intussen al meer dan 3.820.000 .nl domeinen

Meest besproken domeinnaam ‘www.sex.com’ te koop

Simon Van den Bergh — Mon, 22 Feb 2010 22:03:46 +0000

De bekendste websitenaam van het begin van het internettijdperk staat te koop. Klik gerust even door, maar kijk snel even of er niemand achter je staat mee te kijken: www.sex.com.

Escom, de eigenaar van de site die nauw samenwerkt met Playboy, heeft besloten de website van de hand te doen, wegens niet winstgevend genoeg. Vreemd denk je? Nochtans, in den beginne van het internettijddperk, toen de zoekmachines nog niet spraken, waren sites als book.com, films.com de enige manier om informatie te vinden over de respectievelijke onderwerpen. Met de komst van zoekmachines als Google is dit niet meer zo evident. Type maar simpelweg het woord sex in je favoriete zoekmachine, en je wordt overstelpt met resultaten. Of je website dan www.sex.com of www.playboy.com is maakt niet uit: vandaag wordt je waarde bepaald door je plaats in de ranglijst na een zoekopdracht.

Als je interesse hebt om dit account te kopen, zal je toch een serieuze duit in het zakje moeten doen: een gedekte cheque van minstens een kleine 750.000 euro. Vier jaar geleden wisselde de domeinnaam nog voor 10,3 miljoen euro van eigenaar. Al zal dit volgens kenners (uit de internetwereld) anno 2010 een pak minder zijn. Voor zij die dachten toch het gat in de markt gevonden te hebben: Seks.be, Seks.nl zijn al bezet.

Photoshop Tutorial: Sherlock Holmes inspired tekst effect

Simon Van den Bergh — Wed, 03 Feb 2010 21:22:32 +0000

De nieuwste film over Sherlock Holmes bekleedt heden ten dage het witte doek in de meeste cinemazalen. Alles situeert zich in het Britse rijk anno 1891. Special effects vliegen rond de oren en neusgaten. In deze tutorial maken we een teksteffect in Photoshop dat recht uit de detectievefilm zou kunnen komen.

Inspiratie:

Eindresultaat:

In deze tutorial gaan we dieper in op de laagstijlen/layer styles, het gebruik van maskers/masks, de blending modes en textures en in Photoshop.

Ingrediënten:

Voor deze tutorial gebruiken we enkele gratis resources.

1. Stone texture - via gratis Texture King

2. Wooden Floor texture naar keuze - gratis via Bittbox

3. Cardiff font - gratis via Fontspace

1. Begin

Maak een nieuw canvas aan in Photoshop. De grootte maakt niet echt uit. Ik koos voor een canvas van 1300×700 en 72 dpi.

Maak de achtergrond kleur zwart.

2. De eerste steen

Maak een nieuwe laag aan en teken de basisvorm van de steen met de afgeronde vierkant-tool (rounded rectangle). Zorg ervoor dat deze een zwarte kleur heeft. Open de Stone texture, en plaats deze in een nieuwe laag boven de basisvorm die je net gemaakt hebt. Klik met je rechtermuisknop op de laag in het lagenpallet, en kies ‘Maak uitknipmasker/create clippingmask’. Verklein de texture laag zodat het vlak dat we bedekken toch wat scherper lijkt.

Selecteer de tekst-tool, kies als lettertype Cardiff, tekstkleur wit en type nu een letter. Plaats de letter in het midden van onze steen. Dubbelklik op de tekstlaag om het lagenpalet te openen. Zet de opties van het lagenpalet zoals hieronder aangegeven:

We dupliceren nu onze tekstlaag, en veranderen de tekstkleur naar zwart. We schakelen ook de teksteffecten, behalve schaduw, uit. Sleep de tekstlaag nu een 5-tal pixel naar beneden. Dit zal de schaduw en dus ook de diepte van onze tekst versterken.

Plaats de zwarte tekstlaag onder de witte.

We gaan nu de steen texture toepassen op de bovenste tekstlaag. We doen dit op dezelfde manier als eerder beschreven. Plaats dus opnieuw een nieuwe laag met daarin de steen texture boven de tekstlaag en maak een uitknipmasker. Zet de opaciteit/opacity van de texturelaag op 50% en kies voor Multiply als Blending mode/overvloei opties:

Onze tekst is nu zo goed als klaar.

3. De achtergrond

Maak een nieuwe laag aan boven onze background-laag. Plaats hierin de Wooden Floor texture. Draai en verklein de texture, en maak enkele kopies van deze laag. Plaats de lagen vervolgens mooi naast elkaar zodat je weer een mooi geheel krijgt. Selecteer nu de kopies van de vloerlagen, en merge/verenig de lagen, zodat het nog slechts 1 laag is:

We gaan deze texture aan de kanten van ons canvas wat maskeren met een laagmasker, zodat we een mooier effect krijgen. Maak dus een laagmasker aan op de laag van de floortexture. Zorg ervoor dat je het maskeervenster geselecteerd hebt, kies een groot (300px) zacht penseel en zorg ervoor dat je de zwarte penseelkleur geselecteerd hebt:

Zet nu enkele penseelstreken aan de kanten van het canvas. Deze zouden nu donkerder moeten worden.

Tip: Het voordeel van het laagmasker te gebruiken is dat onze oorspronkelijke afbeelding op die laag behouden blijft. En als je achteraf denkt teveel weggemaskeerd te hebben, kan je op dezelfde manier, maar dan met wit als kleur geselecteerd, penseelstreken trekken over de dondere vlakken. Op die manier maak je de afbeelding weer zichtbaar. Een heel handige techniek. Probeer maar eens.

Onze vloer heeft nu nog een vale schijn. We gaan dit snel aanpassen met een hue-saturation/kleurtoon-verzadiging layer toe te voegen boven onze vloerlaag. Maak van de die laag nu een uitknipmakser, zodat die enkel betrekking heeft op onze vloerlaag. Hieronder de stappen 1-3:

4. Alles samenbrengen

We keren nu even terug naar de steen texture. Er zit niet echt veel diepte in. Dit gaan we oplossen met de tools Dodge/tegenhouden en Burn/doordrukken. Hierdoor krijgen we lichtere en donkere accenten op onze steen:

Nu plaatsen we een schaduw op onze steenlaag (de vormlaag, niet de texturelaag) zodat de laag los lijkt te komen van de achtergrond:

Maak nu een maskerlaag op de onderste steentexture laag en maskeer met een kleiner (45px) zacht penseel op dezelfde manier als eerder beschreven de zijkanten van de steen. Je hoeft hier zeker niet de vorm van de steen te volgen. Variatie zal voor betere effecten zorgen. Je kan ook de penseelgrootte aanpassen om andere effecten te krijgen:

Onze letter is klaar!

Groepeer nu alle lagen die te maken hebben met de letter. Vervolgens kopieer je de groep enkele malen, en zet je de letters naast elkaar. Zo kan je nu de letters in elke groep aanpassen (vergeet ook niet de schaduw-tekstlaag aan te passen.).

Probeer ook eens de steentexture van elke groep te verslepen, en pas de maskering van de zijkanten aan. Zo krijg je telkens weer een unieke steen.

Met nog een paar detailaanpassingen kom je tot dit effect: