1. Stripe Generator

Met de Stripe Generator maak je mooie achtergronden voor je website (of een repeating achtergrond voor buttons of banners). Via diverse instellingen maakt je makkelijk online een afbeelding naar wens. Via een refresh knop kun je het resultaat altijd makkelijk in je browser bekijken. Een prima alternatief is Stripemania, Pattern Cooler en Striped Backgrounds. Hier nog een handige tool om gestippelde (dotted) achtergronden te maken.

2. Tartan Maker

Tartans zijn ruitmotieven. Dit is dus een handige tool om ruitmotieven mee te maken. Wederom heb je zelf de mogelijkheid om via diverse instellingen een tartan naar wens te maken. De tartan kun je als (repeating) achtergrond gebruiken, maar ook binnen elk ander ontwerp. Hier nog een alternatieve website om patronen en ruitmotieven te maken: Colourlovers Patterns.

3. Tabs Generator

Tabs Generator is een handige tool om tabs (bv menu items) voor op je website te maken.

4. Reflection Maker

Met de Reflection Maker kun je elke afbeelding van een mooie reflectie (spiegeling) voorzien. Dit geeft afbeeldingen een mooi effect mee, dat in veel gevallen mooi past binnen het design van je website. Dit kun je bv ook doen met een eerder gemaakt logo of een tekst.

5. Favicon Generator

Een belangrijk onderdeel van elke website is de favicon; het kleine plaatje (16x16px) dat je in de browser ziet naast de titel van je website (links ervan). De favicon zorgt voor een herkenning bij je bezoekers. Het geeft de website verder een professioneel tintje mee. De generator werkt erg makkelijk; je laadt een 16×16 pixels .png plaatje in en vervolgens maakt de generator er een .ico (favicon) van. Hier een uitleg hoe je de favicon in je website kunt opnemen. Naast de Favicon Generator biedt Dynamic Drive overigens nog veel meer handige tools.

6. Lorem Ipsum Generator

Lorem Ipsum is een handige dummytaal die webdesigners doorgaans gebruiken op de website in aanbouw. Het is makkelijk om een website ontwerp alvast van enige tekst te voorzien om bepaalde locaties. Met de Lorem Ipsum generator maak je makkelijk enkele alinea’s met dummy tekst.

7. Load Generator

Deze Load Generator maakt handige ‘loading’ plaatjes, de plaatjes die afbeelden dat er een actie plaatsvindt waarbij je even geduld moet hebben. Je kunt diverse variaties op de standaard ‘loading’ afbeelding selecteren en deze van een voor- en achtergrondkleur voorzien. Hier en hier vind je nog twee mooie alternatieve websites met loaders.

8. Cooltext Logo Generator

Cooltext.com oogt in de eerste instantie een beetje ouderwets, maar je kunt er erg leuke logo’s en buttons mee maken. Hoewel de logo’s niet enorm professioneel ogen, kan het zeker van pas komen in het geval van de startende webmaster. De voorbeelden op de mainpage zijn misschien niet allemaal even mooi, als je echter eenmaal op een voorbeeld klikt dan kom je in een nieuw scherm terecht waar je enorm veel mogelijkheden hebt om het logo naar je eigen wens aan te passen. Nadat je een button hebt gemaakt kun je deze makkelijk lokaal opslaan en op je eigen website gebruiken.

9. BGPatterns Background Generator

Handige webtool om website achtergronden op basis van herhaling aan te maken (repeating background). Op deze wijze hoef je alleen maar een klein plaatje via css in te laden; en vervolgens heb je een prachtige achtergrond. Je kunt alle aspecten van de achtergrond naar eigen wens aanpassen. Een andere goede site met herhaalde website achtergronden is Pattern8 (dit is echter geen tool).

10. Color Scheme Designer

Een enorm handige webtool om een mooi kleurenpallet mee samen te stellen. Deze tool zet je in om bijpassende kleuren voor je website te vinden. Ik gebruik het echter ook regelmatig om niet website gerelateerde kleur ideeen op te doen (zoals in huis). Kuler, de officiele tool van Adobe werkt natuurlijk ook super!

11. Buttonator

Handige tool om online buttons te maken. Deze buttons zien er erg fris uit, het zijn moderne ontwerpen (in tegenstelling tot enkele andere tools waarbij je nogal ouderwets ogende ontwerpen aangeboden krijgt). Met Buttonator maak je in een handomdraai leuke buttons voor je website. Er zijn overigens ook diverse andere button makers in de omloop, zoals deze.

12. Icon Generator

Leuke webtool om kleine icons mee te maken. De icons kun je dan weer makkelijk op je eigen website gebruiken. Wanneer je de icon ontworpen hebt, kun je de hele set (in verschillende standaard formaten) downloaden.

13. Web 2.0 Badges

Supertool om snel mooie web2.0 badges te maken voor op je website. Zet je bijvoorbeeld een leuke aanbieding online; dan heb je via deze website in een handomdraai een mooie passende badge. Zoals gewoonlijk kun je weer diverse instellingen doorlopen om zo de ultieme badge samen te stellen. Op deze website vind je ook diverse mooie voorbeelden van eerder gemaakte badges, deze kun je er makkelijk in .psd (bronbestand photoshop) downloaden.

14. Seal Maker

Hoewel je dit niet snel nodig zult hebben is het toch wel een leuke generator. Hiermee kun je leuke wapens/zegels maken. Je hebt beschikking tot diverse vooraf ontworpen zegels die je naar eigen wens kunt finetunen.

15. Background Creator

Een handige online tool om makkelijk standaard button achtergronden mee te maken. Dit keer geen drukke achtergrond, maar gewoon een standaard achtergrond. Je kunt er ook makkelijk rond of hoekige randen aan toevoegen.

16. Ribbon Generator

Quickribbon is een handige online tool waarmee je een javascript ribbon (strik) kunt genereren. Deze ribbon kun je op je website plaatsen en je ziet dan vervolgens een strik in de linkerbovenhoek van je website. De ribbon bevat een link naar een opgegeven pagina (binnen of buiten je website). Een handige manier om wat extra aandacht te trekken naar een aanbieding of een pagina met belangrijke informatie.

17. Rounded CSS Corners

Roundedcornr is een handige tool waarmee je een stuk css opmaak met ronde hoeken kunt creeren om direct in je website te hangen. De output is in dit geval dus geen afbeelding, maar een stuk code die je volledig naar eigen wens hebt ingericht. De tool bevat enorm veel opties; zodat je er een zeer mooie css box met kunt maken. Er zijn vier varianten mogelijk (met elk diverse instellingen); een gewone box, een box met gradiënt, een box met rand en een box als afbeelding (dus geen css).

18. Freshgenerator

Freshgenerator is een prachtige tabs en button generator. Hiermee maak je weer gemakkelijk maatwerk buttons voor je websites. Je kunt er ook mooie banners met ronde randen van maken; prima uitgangspositie om je eigen advertentie materiaal samen te stellen.

19. Magazine Cover Generator

Deze is meer een funtool dan een belangrijke tool voor webmasters. Het eindresultaat is echter wel weer erg leuk. Je kunt er makkelijk magazine covers mee maken. Met een beetje creativiteit kun je er ook leuke banners mee maken.

20. Graph Generator

Supertool! Hiermee maak je online grafieken. Je kunt zelf het type grafiek selecteren en vervolgens via de tool de data invoeren. De output is vervolgens een prachtig gestylde grafiek

Zo gretig als ik was begon ik direct met de upload van een .psd bestand. De output was niet wat ik ervan hoopte; eigenlijk was er niet meer dan een plaatje in html gezet, eigenlijk vele tientallen losse plaatjes. Wel grappig, ook 100% valide, maar helaas nog geen werkende website. Bij de 2e test kon ik het bestand helaas niet downloaden, een dikke server time-out. Bij de derde keer kreeg ik het geheel wel goed aan de praat, blijkbaar had ik een .psd met teveel layers gebruikt Ik ga de tool de komende tijd wat meer inzetten, al is het maar om te kunnen beoordelen of de personen waaraan ik dit soort klussen normaal uitbesteed niet ook gewoon van deze tool gebruik maken

Check de tool op de website psd2cssonline.com

Het artikel: Designing the Qlicks logo

Dirk Leys: Unieq Design