Design 101

Nederlandstalig geschreven uitleg en tutorials over Photoshop en (web) design

HTML voor beginners

In dit artikel leer je vanuit de basis met HTML te werken. Dit komt van pas als je hebt besloten je eigen website te maken, of je een bestaande website onderhoudt.

Lees verder →

iOS App icoon toevoegen aan je website

App Icoon toevoegen aan je websiteWat is een app icoon en hoe kan je die aan je website toevoegen? Een app icoon is de afbeelding die een gebruiker op de iPad of iPhone (iOS) krijgen te zien als ze je website toevoegen aan hun Home Screen. In feite dus een snelkoppeling tussen de apps, die verwijst naar je website.
App Icoon toevoegen aan je website
Lees verder →

Cirkel maken met CSS? Gebruik border radius

CSS

Nog niet zo heel lang geleden konden afrondingen op webpagina’s alleen met losse afbeeldingen gemaakt worden. Voor elk hoekje een apart plaatje. Het nadeel hiervan is dat het onnodig het laden van je webpagina vertraagt, het niet flexibel is, en veel tijd kost om te maken of te bewerken. Gelukkig is er nu een makkelijkere methode. Met behulp van een stukje CSS3 kan je eenvoudig van elk blok een cirkel maken.

Lees verder →

Open afbeeldingen direct in Photoshop

Snelle tip voor FirefoxAls webdesigner wil je natuurlijk zoveel mogelijk tijd nuttig besteden aan je werk. Daarom dit bericht in de categorie Snelle tips.  Met deze Add-on voor Firefox kan je direct vanuit je browser een afbeelding openen in Photoshop. Bespaart het los downloaden, openen, en verwijderen van het bronmateriaal!

Na het installeren van de add-on klik je simpelweg bij afbeeldingen met de rechtermuis knop en selecteer je “Open with Photoshop”. Als Photoshop nog niet draait dan wordt het natuurlijk eerst opgestart.

Vervang witte achtergrond snel en precies met Photoshop

Photoshop vervang achtergrond kleur makkelijk met Blend Mode

Het aanpassen van de achtergrond in een afbeelding kan een tijdrovende klus zijn. Er zijn verschillende mogelijkheden om dit in Photoshop te doen, maar allemaal houdt het in dat je op de een of andere manier zelf moet aangeven wat achtergrond is en wat niet. Wanneer de achtergrond een eenvoudig overtrekbaar is en er een duidelijke scheiding is tussen achtergrond en voorgrond is dit nog niet zo’n probleem. Is dit niet het geval kan je er zo een uur voor uittrekken. Deze tip werkt alleen in specifieke gevallen, maar wanneer je het kan toepassen kun je er veel tijd mee besparen, zonder op kwaliteit in te leveren.

Lees verder →

Displacement masks in Photoshop

Photoshop Displacement mask tutorial

Een van de grootste problemen wanneer je realistisch probeert een onderdeel aan een afbeelding toe te voegen is dat een afbeelding plat is. Afbeeldingen hebben geen diepte, dus alles wat je erboven op zet zal zich ook niet vormen in de ruimte. Stel je wilt net als in het bovenstaande voorbeeld graffiti aan een muur toevoegen, dan valt het direct op dat de graffiti niet de groeven in de muur volgt en er dus “boven zweeft”.

Handmatig de afbeelding gaan vervormen zal of niet realistisch zijn, of enorm veel tijd kosten. Daarom heeft Photoshop de Displacement mask filter geïntroduceerd. In het onderstaande bericht een complete uitleg over deze functie en een gratis download van voorbeeldbestanden om het makkelijk zelf uit te proberen.

Lees verder →

Bespaar tijd met Photoshop Actions en Batches

Gebruik Photoshop acties om tijd te besparen
Niets is vervelender dan iets herhaaldelijk opnieuw te moeten doen. Heb je bijvoorbeeld honderd foto’s die allemaal verkleind, gedraaid en wat donkerder gemaakt moeten worden is het zonde om dit ook iedere keer opnieuw te moeten doen. Om standaard taken op te kunnen nemen en overal te kunnen herhalen heeft Photoshop een speciaal paneel bedacht.

Lees verder →

Ogilvy Advertentie layout in webdesign

David Ogilvy Advertentie principe in webdesign
In de jaren 50 bedacht David Ogilvy een nieuwe layout voor advertenties. Het doel was het percentage lezers dat actie ondernam na het lezen zo hoog mogelijk te krijgen. Veel is in de media veranderd sindsdien, maar de principes die hij beschreef en toepaste zijn nog steeds actueel.

Lees verder →

Photoshop selectie opslaan of verbergen

Photoshop selectie opslaan of verbergen

Photoshop Selectie opslaan

De selectie tool is een handig middel om onderdelen binnen afbeeldingen te kunnen bewerken. Het is mogelijk om selecties binnen het bestand op te slaan door in het menu naar Select > Save Selection (Selectie > Sla selectie op) te gaan. Je kan dan een naam geven aan de selectie en het later via load selection weer terugkrijgen.

Photoshop Selectie verbergen

Wil je echter even tijdelijk die bewegende stippelrand om de de selectie weg krijgen, zonder de selectie inactief te maken? Gebruik dan de toets combinatie CTRL + H (CmD + H op Mac) gebruiken. De selectie blijft wel gewoon bestaan, maar is even niet zichtbaar. Druk dezelfde toets weer in om de selectie weer zichtbaar te maken.

Bounce rate

analytics: bounce rate in web designDe term bounce rate, ofwel weigeringspercentage, valt in de statistieken categorie. Het geeft het percentage bezoekers aan die je website verlaten nadat ze slechts één pagina gezien hebben. De bounce kan dus tot stand komen als de bezoeker op een externe link klikt, de browser of tab sluit, de back toets indrukt of een andere URL in de adresbalk intoetst. Over het algemeen wordt de meting uitgevoerd op de homepagina, omdat dit de pagina is waar de meeste nieuwe bezoekers op komen.

Lees verder →

AIDA model

Aida model in web design
Het AIDA model wordt veel toegepast in web design wanneer een hoge conversierate belangrijk is. Door middel van AIDA kan je bepalen in welke volgorde je wilt dat bezoekers items op je website ziet.

AIDA is een afkorting van:

Lees verder →

Conversie

Conversie is het percentage van bezoekers dat een mogelijke actie uitvoert in de applicatie. Een klassiek voorbeeld hiervan is de mogelijkheid om een account aan te maken op een website. De totale account conversierate voor de website is het percentage van unieke bezoekers die een account hebben aangemaakt. Vaak wordt specifieker gekeken wat de conversie is van de home pagina, omdat dat de plek is waar nieuwe bezoekers overtuigd moeten worden.

Werken met Photoshop Levels

Photoshop levelsMet Photoshop levels kan je eenvoudig foto’s analyseren en verbeteren. Het geeft een overzicht van de aanwezigheid van kleurwaardes.

Je kan met sliders onder de grafiek aangeven wat het donkerste en lichtste punt is. Wanneer bijvoorbeeld decomplete RGB channel geselecteerd is zal de laagst geselecteerde waarde de nul lijn helemaal zwart maken. de hoogste waarde, 255, wordt wit. Wanneer een foto onder of overbelicht is kan je door bij de input levels diagram het lichte of donkere waarden verhogen.

Lees verder →

Content in web design

Schrijven van teksten voor je website op de ouderwetse manier.

Content is een verzamelwoord van alle informatie die je aanbiedt op je website. Hoe belangrijk het ontwerp van de applicatie is, uiteindelijk draait het vaak om de content. Een mooie website zonder content kan geen succes worden, maar een slecht vorm gegeven website met goede content wel. Toch komt het in web design vaak op de laatste plaats. Hoe komt dat?

Lees verder →

What the font?

What the font

In de categorie snelle tips besparen het meeste tijd de website whatthefont.com. Een veel voorkomende vraag in web design is welk lettertype gebruikt wordt in een afbeelding. Wanneer de afzender het zelf niet kan achterhalen wordt het lastig. Je kunt duizenden lettertypen zelf gaan vergelijken.

Lees verder →

Communiceren met je klanten

Communicatie met de klantOver dit onderwerp kunnen boeken volgeschreven worden, want het blijft een lastig punt. Technisch een goed project neerzetten is vaak niet voldoende om ook een tevreden klant te krijgen.

Waar gaat het mis?

Projectrollen

Ten eerste komt dit doordat in een project verschillende rollen gespeeld worden. De klant heeft andere belangen dan jij. Waar voor jou een tijd werken winstgevend is, zal de klant er voor moeten betalen. Men heeft er dus belang bij voor te doen alsof het project makkelijker en simpeler is dan echt het geval is. Dit vooral wanneer je het project voor een vast bedrag aanneemt.

Denk bijvoorbeeld aan Google, stel dat de klant een soortgelijke zoekmachine wilt. Hij zal proberen je voor te houden dat het maken van de zoekmachine simpel is. Het enige wat je hoeft te doen is het maken van een leuk logo, zoekveld eronder en een knop om te zoeken. Dan hoef je erna alleen maar wat resultaten uit een database halen.

Lees verder →

Photoshop dupliceren zonder copy

Photoshop tip duplicate zonder copyHet zal je vast al wel zijn opgevallen. Bij het dupliceren van layers in Photoshop wordt automatisch copy en een oplopend nummer toegevoegd. Dit zorgt al snel voor een onoverzichtelijke lijst van layers. Het is dan ook aan te raden om de toevoeging te verwijderen.
Lees verder →

Stock fotografie

Als web designer zal je voor projecten vaak afbeeldingen nodig hebben. Voor iedere foto de studio induiken is te kostbaar, en daarom bestaan stock foto’s. Er zijn websites waar fotograven over de hele wereld al dan niet betaald foto’s aanbieden. Let altijd goed op welke licentie aan een afbeelding is gekoppeld. Sommige gratis afbeeldingen mogen bijvoorbeeld alleen voor persoonlijk gebruik ingezet worden.

In dit artikel lees je alles over:

Lees verder →

Klassieke photoshop propaganda faal

Een van de meest bekende slechte bewerking van een propaganda foto is de onderstaande.

Iraanse raketten photoshop

Iraanse raketten photoshop

© AFP

In juli 2008 verspreidde Iran via het Franse persbureau AFP een persbericht met bijgesloten een foto van vier raketten die via mobiele lanceerstations waren afgeschoten. De foto belande op veel voorpagina’s in Amerika, maar al snel werd duidelijk dat de foto bewerkt was. Zie hoe de wolken en het rook simpelweg gekopieerd is, en de gloed die om de derde raket hangt.

Alles over Blending Options

De blending options (opties voor overvloeien) is een van de belangrijkste opties in Photoshop. Tegelijk heeft onprofessioneel gebruik ervoor gezorgd dat het een slechte naam heeft gekregen. Veel startende ontwerpers zien de blending options als het middel om het ontwerp wat op te leuken en strooien dus rond met overbodige en overdreven effecten.

Hoe werken de blending options, en hoe gebruik je het praktisch? Dat zal je zien in deze nieuwe categorie. In deze eerste post een overzicht van alle mogelijkheden. Rechterklik met je muis op een layer (laag) en selecteer Blending options. Je krijgt dan het onderstaande scherm te zien.

Photoshop Blending Options hoofdscherm

Photoshop Blending Options hoofdscherm

Lees in het onderstaande artikel alles over de mogelijkheden die Blending options biedt.

Lees verder →

Beginner: instellingen voor nieuw bestand

Bij het aanmaken van een nieuw bestand in Photoshop zal het je direct opvallen dat er aardig wat ingesteld kan worden. Door goed te kijken naar wat het doel is van je document kan je makkelijk bepalen welke instellingen het beste passen.

Photoshop window nieuw bestand

Photoshop window nieuw bestand

Loop het formulier van boven naar beneden af. In het eerste veld kan je de naam van het project opgeven. Je kan ervoor kiezen om dit over te slaan. Bij het opslaan zal de naam namelijk automatisch overgenomen worden van de bestandsnaam die je invult.

Lees verder →

Beginner: Photoshop automatische foto optimalisatie

Dat het verbeteren van je foto’s niet moeilijk hoeft te zijn bewijst Adobe nog maar eens met de mogelijkheid om de tone, contrast en kleur automatisch te laten verbeteren.

Als je snel een afbeelding zoekt om het mee uit te proberen, gebruik dan deze: http://www.design101.nl/wp-content/uploads/2011/10/silverton_mad_max.jpg.

photoshop automatische foto optimalisatie menu

photoshop automatische foto optimalisatie

Via het menu Image heb je de keuze uit “Auto Tone”, “Auto Contrast” en “Auto Color”. Het spreekt redelijk voor zich wat de knoppen voor effect hebben. Probeer het uit en kijk of je tevreden bent met het eindresultaat. Lukt het je om door middel van je eigen bewerkingen het nog beter te krijgen?

Gebruik Photoshop Filters i.c.m. Smart Objects (CS2+)

Een van de voordelen van Photoshop is de uitgebreide set van voorgeprogrammeerde filters. Hiermee kan in enkele klikken effecten aan afbeeldingen toegevoegd worden.

Gebruik filters

Weet je al hoe je filters kan gebruiken? Dan kan je het onderstaande blokje overslaan. Voor het experiment open je een willekeurige foto.

Photoshop filter

Navigeer naar de filters via het menu.

Lees verder →

Haastige spoed is zelden goed

Photoshop is perfect voor het manipuleren van foto’s, bijna alles is mogelijk. Maar slecht uitgevoerde bewerkingen werken tegen je. Kijk dus hoe het niet moet en maak de fout zelf niet.

Een tweeling foto maken door twee losse foto’s samen te voegen? Let op dat je geen stukken arm vergeet.

Been vergeten Photoshop faal

Lange dunne benen horen bij het ideaalbeeld van de vrouw. De bewerking is dus wel te snappen, maar dat de overduidelijk missend stuk been over het hoofd gezien kan worden minder.

Photoshop taalkeuze bij installatie

Engels of Nederlands
Een van de belangrijkste vragen bij het aanschaffen en installeren van Photoshop is de taal waarin je het wilt gebruiken. Hoewel het grotendeels bepaald wordt door eigen voorkeur kun je bij de keuze rekening houden met het volgende.

Lees verder →

Nederlands design weblog

Een 101 staat ook wel bekend als vraagbaak. Een plek waar je eenvoudig al je informatie kan vinden. Deze weblog is de Nederlandstalige 101 op het gebied van ontwerpen, en dan vooral Photoshop en web design.

Wil je nu net beginnen met de basis? Deze weblog begint van start af aan zodat iedereen mee kan doen. Vragen of opmerkingen zijn altijd welkom bij de comments!