Gratis Photoshop alternatief wat prima werkt

Enkele dagen geleden kwam ik langs een fantastisch stukje websoftware. Pixl editor genaamd. Een online Flash Photoshop alternatief wat echt superstrak in elkaar zit. Niet alleen zijn de functionaliteiten overweldigend maar het ziet er ook nog eens allemaal heel gelikt uit en is gratis. Wat wil je nog meer?

Niet alleen kun je met Pixl editor afbeeldingen op je PC bewerken (met de nadruk op het woord “op” omdat je als Flash 10 gebruiker gewoon lokaal werkt) maar je kunt ook gelijk een afbeelding van het internet “plukken” of uit een andere bron zoals Facebook etc.

Alle serieuze zaken die je in een betaald pakket tegenkomt zitten erin. Enkele van deze leuke functionaliteiten zijn:

  • Afbeeldingen opbouwen uit lagen
  • Veel prachtige filters zoals tilt shift, water effecten, caleidoscoop, haltone en meer
  • Geschiedenis om bewerkingen ongedaan te maken
  • Eenvoudig afbeeldingen bijsnijden etc
  • Vele mogelijkheden tot bijwerken kleurtinten
  • Meertalig
  • Rotate, flip en meer
  • Layer styling zoals dropdown shadows, bevels etc

Kortom, eigenlijk heel veel voor weinig. Ideaal om “even snel” ergens een afbeeling bij te snijden als je geen pakket op je PC tot je beschikking hebt.
Bezoek http://pixl.com/editor/

 

Online favicon.ico maken in 3-stappen

Voorbeel van een favicon

Voorbeeld van een favicon in actie

Laat uw website opvallen tussen andere websites met behulp van een favicon. Dit icoontje van 16 x 16 word door de meeste browsers in de adresbalk getoond en maakt het mogelijk uw website op te laten vallen tussen de overige tabbladen. Ook in de bladwijzers en favorieten word het favicon gebruikt.

Het maken van een favicon is in 3-stappen gedaan:

  1. Maak een plaatje van 16 x 16 pixels en sla deze op als .png, .gif, .jpg of .bmp
    (.png en .gif mogen ook transparant zijn)
  2. Ga naar www.dynamicdrive.com, upload uw bestand en klik op create icon
  3. Download uw favicon en sla deze op als favicon.ico

Als dit is gelukt hoeft u de favicon alleen nog op uw website te plaatsen. Om dit te doen doorloopt u de volgende 2-stappen. Het enige wat u hier voor nodig heeft is toegang tot de bestanden van uw website (FTP en een beetje kennis van HTML. Toevoegen van uw favicon gaat als volgt:

  1. Voeg de hieronder staande HTML code toe aan de code van uw website, doe dit tussen de <head> en </head> in uw broncode
    <link rel=”shortcut icon” href=”/favicon.ico”>
  2. Upload vervolgens de favicon.ico in de zelfde map als uw pagina.

Wanneer dit gelukt is zou de favicon moeten werken. Het kan zijn dat u de favicon niet direct ziet, start dan uw browser opnieuw of leeg uw cache.

De beste software en tools voor PHP webdevelopment

Met de jaren bouw je een verzameling op met software waar je als developer prettig mee werkt. Van tools om het programmeren eenvoudiger te maken tot software om grafische zaken te doen.

Hieronder staat mijn lijst met favorites en een korte omschrijving waar ze voor dienen / wat deze software waardig maakt om in deze lijst te komen;

  • Netbeans
    Als serieus PHP developer moet je een goede IDE hebben en Netbeans is dit meer dan waardig.
    www.netbeans.org
  • MySQL workbench
    Voor het maken van gelikte database ontwerpen en deze inzichtelijk maken aan projectmanagers / opdrachtgevers.
    wb.mysql.com
  • Photoshop
    Hoort eigenlijk niet thuis in een lijst voor PHP developers maar zeker wel als webdeveloper om zo nu en dan een plaatje te snijden of een knopje te maken.
    http://www.adobe.com/nl/products/photoshop/photoshop/
  • Notepad2
    Naast Netbeans is het altijd handig een lightweight tooltje te hebben om even snel htaccess bestanden of conf files te bewerken. Ik vervang altijd zelf de notepad van windows met notepad2 zodat ik altijd syntax highlighting en regelnummers tot mijn beschikking heb.
  • http://www.flos-freeware.ch/notepad2.html
  • Filezilla
    Een goede en stabiele FTP tool.
    http://filezilla-project.org
  • Tortoise SVN
    Soms kom je er met je IDE gewoon niet goed uit als het gaat om SVN en dan is Tortoise de beste windows oplossing. Mooi is hij niet maar wel effectief.
    http://tortoisesvn.tigris.org/
  • WAMP of Zend Server
    Niets werkt zo lekker als lokaal. Snel, veilig en resultaat voor je F5 hebt kunnen drukken.
    http://www.wampserver.com/en/
    of
    http://www.zend.com/en/products/server-ce/
  • De browsers om te testen
    Test op dit moment met Safari, Firefox, Chrome, IE7, IE8, IE9 en op een Virtual PC met windows XP en IE6. Voor noodgevallen vragen we een Mac visie op zaken. Daarnaast spelen we natuurlijk wel eens met Adobe labs maar bovenstaande dekt aardig de lading.

Dit zijn wel een beetje de belangrijkste.Niet alle software mag op kantoor in productie gebruikt worden maar als ik thuis voor mezelf aan het rommelen ben mag dit vaak wel dus dan komt mijn goede ervaring daaruit voort.

Nu ik dit lijstje typ realiseer ik me dat ik ook best veel handige firefox plugins gebruik. Zal daarover binnenkort een keer iets schrijven.

http://wb.mysql.com/

Legaal fontgebruik op websites (deel 2)

Eerder berichtte ik over Typekit wat de nodige bezoekers naar ons weblog trok en dus blijkbaar een onderwerp is wat erg leeft op dit moment. Nu kwam ik een ontzettend uitgebreide posting tegen op Smashingmagazine.com die wel zo’n ontzettend goede aanvulling vormt op mijn eerdere bericht dat ik die toch even onder de aandacht wilde brengen.

Andrew Follett bespreekt daar namelijk nagenoeg alle bekende oplossingen voor web fonts (waaronder Typekit). Van alle oplossingen geeft hij aan hoeveel fonts er beschikbaar zijn, tegen welke kosten, welke voordelen en nadelen ze precies hebben en hoe ingewikkeld/eenvoudig implementatie is.

Mocht je dus met web fonts aan de slag moeten gaan in een project dan is deze posting zeker even het bezoeken waard.

http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/

Spritebaker CSS booster

Een eenvoudige online tool om je CSS bestand en alle externe media in één bestand te “bakken” met base64 encoded datasets. In combinatie met gzip-compression zou je website een enorme snelheidsboost krijgen. Het idee is namelijk dat je alle kleine bestandjes die normaal los geladen worden door je browser samenbrengt in één bestand. Dit scheelt al snel tientallen requests. In theorie zijn die losse request namelijk langer bezig met het opvragen van de server, het bestand en het downloaden dan dat je dit samenvoegt. Als met een tool als Firebug de Net explorer pakt zie je snel hoe een request is opgebouwd en dan blijkt inderdaad dat vaak een deel van de tijd bezig is met het leggen van een verbinding met de server.

Nooit kun je iets mooier testen dan met je eigen site. Even snel de Webparking website voorzien van een gebakken-css bestand om te kijken wat de verschillen zijn. Omdat de logica je zegt dat gebakken-css altijd winst is ging ik uit van prachtige resultaten. Helaas… Het viel allemaal iets tegen.

Even wat testcijfers (drie runs per keer);
Normaal  met browser cache uit:
24 server requests (1.22 s, 1.07 s, 1.22 s)

Normaal met browser cache aan:
2 server requests (731 ms, 739 ms, 637 ms)

Gebakken CSS met browser cache uit:
11 server requests (1.4 s, 1.25 s, 1.41 s)

Gebakken CSS met browser cache aan:
2 server requests (998 ms, 892 ms, 913 ms)

Nu is natuurlijk de vraag. Waar zit dit negatieve verschil toch in. Leuk is in iedere geval om te zien dat het aantal requests met 50% afneemt in de gebakken versie. Logisch maar toch leuk. Alleen het lijkt geen echte tijdswinst te geven. In iedere geval zeker niet voldoende om het waard te maken meerdere styles naast elkaar te draaien. Niet alle browsers  hebben namelijk even goede ondersteuning voor data URI’s (de base64 geëncodeerde blokken in de CSS).

Webydo van PSD naar HTML

Het klinkt erg aantrekkelijk als je het zo hoort. Webydo helpt je om eenvoudig een website te maken door een PSD bestand te importeren. Hierna kun je met een soort “sleep en plaats” systeem de inhoud op zijn plek zetten en koppelen aan elkaar en klaar. Er is een werkende website ontstaan.

Er is een demo video beschikbaar waarop te zien is hoe het zou moeten werken. Allereerst probeer ik me gelijk een beeld te vormen van de beoogde doelgroep. Klanten van webdevelopment bureaus zullen hier niet terecht komen maar hobbyisten beschikken volgens mij niet altijd over PSD bestanden van het gewenste ontwerp. Het zou dus ergens op een gat ertussen terecht moeten komen. Mensen met voldoende kennis om zelf PSD bestanden te verkrijgen / maken maar met een budget wat niet toereikend is om een webdeveloper erbij te halen. Hoe dan ook is het concept wel erg grappig.

Daarnaast vraag ik me gelijk af;

  • Hoe solide is de code (volgens de vertellingen valid HTML/CSS)
  • Hoe goed kan het omgaan met rommelige PSD bestanden
  • Hoe onderhoudt je de site na de 1e keer in elkaar zetten*
  • Wat gaat het kosten (een deel van de pagina’s is nog leeg)

* Detail hierbij is dat er in de navigatie al ruime is voor de producten Design Management Systeeem (DMS) en Content Management Systeem (CMS) dus wie weet wat er nog komt.

Voor nu wel een leuke om te volgen denk ik. Kijken hoe het eindresultaat wordt en natuurlijk wat het gaat kosten.

Vecteezy.com

Vecteezy.com is een online verzamelplaats voor vrij te gebruiken vector afbeeldingen. Als ontwerper kun je er een account aanmaken en je werken uploaden. Door de redelijk grote community die erachter zit krijg je als ontwerper feedback, erkenning en naamsbekendheid. Als webbouwer of hobbyist is het een leuke bron van inspiratiemateriaal of misschien net dat icoontje wat je project afmaakt.

Naast de “vrij beschikbare” afbeeldingen is er ook een deel met premium content. Dit wordt echter niet op een zeer nadrukkelijke wijze gebracht. Daarnaast is een premium account zeer goed betaalbaar. Voor $ 19 per maand kun je een onbeperkte hoeveelheid materiaal downloaden.