Hoofdtopic Visser's GFX Snufjes

[Visser23]

Dames en heren, jongens en meisjes. In dit topic zullen jullie wekelijks iets mee krijgen over graphics. Theorie, tips, tutorials, alles komt aan boven. Reacties kunnen geplaatst worden in het reactietopic.

1. Theorie van Charles Sanders Pierce

2. Theorie van Roland Barthes

3. Tutorial: de basics van Adobe Photoshop

4. Tutorial: een herfst signature maken

5. Inspiratiebronnen

[Visser23]

Visser’s GFX Snufjes

Als we met design bezig gaan, zijn we bezig met het creëren van een bepaald beeld of een beeldtaal. Beeld bestaat uit tekens die iedereen op een bepaalde manier kent. Tekens vindt je overal, ook buiten beeld om. Geluidjes zijn ook tekens. Iedereen weet bijvoorbeeld dat elke maandag van de maand de toeters exact om 12:00 uur afgaan om het teken te geven dat de alarmen het nog doen.

“Tekens zijn elementen die een betekenis dragen”. Een voorwaarde van een teken is dat het waarneembaar is en dat het vertegenwoordigd kan worden. Letters vertegenwoordigen een klank. Beelden vertegenwoordigen dat was is afgebeeld.

De heren Charles Sanders Pierce en Roland Barthes zullen we moeten gaan onthouden. Dit zijn de grondleggers van Semiotiek. Door deze mannen zijn tekens makkelijker te begrijpen. Vandaag behandelen we de gedachtegang van Pierce.

Charles Sanders Pierce

Volgens Pierce zijn er drie soorten tekens. Iconische relaties, indexicale relaties en symbolische relaties. Iconische relaties worden bijna door iedereen begrepen op basis van uiterlijke gelijkenis. Indexicale relaties worden gerelateerd aan ervaring. Symbolische relaties zijn gebaseerd op afspraken (bijvoorbeeld in cultuur en religie).



Dit is een voorbeeld van een iconische relatie. Je kijkt naar het beeld en herkent direct over welke sport het gaat.



Hierboven is een voorbeeld van een symbolische relatie. Op basis van afspraken in cultuur (normaal Rode Kruis en de islamitische) is het logo van Rode Kruis afgebeeld.

Hierboven is een voorbeeld van een indexicale relatie. Je ziet vossensporen welke totaal niet lijken op een vos. Maar als je vossensporen aantreft, weet je wel dat er een vos in de buurt is. Door middel van ervaring weet je dat het om vossensporen gaat en deze kan je relateren aan een vos.

Op basis van deze voorbeelden moet je dus ook met design bezig gaan. Je moet kunnen uitleggen en verantwoorden waarom je bepaalde keuzes hebt gemaakt. Je moet dus ook erg goed oppassen met je keuzes. Het hangt er soms helemaal vanaf hoe je een teken of beeld inzet. Nog een klein voorbeeld;

Iedereen weet dat bovenstaand bord een voetpad is waarbij een man met een kind loopt. Wanneer je dit bord zou gebruiken bij een artikel over een gescheiden vader, heeft het bord een hele andere betekenis. Wanneer je het bord zou plaatsen bij een artikel over een ontvoering van een kind, ziet de lezer het beeld weer anders. Je moet er dus voor zorgen dat je op basis van deze gedachtegang, de juiste keuzes maakt in je design.

[Visser23]

Vorige editie, in mijn gastrubriek, waren we al even bezig met de theorie achter designing. We hebben de kijk van Charles Sanders Pierce behandeld. Het ging over het herkennen van beelden en tekens en de gedachte die bij deze beelden en tekens bij je opkwam. Voordat we beginnen met tutorials over verschillende zaken, gaan we eerst nog de theorie van Roland Barthes behandelen, gevolgd door overtuigingskracht bij beelden.

Roland Barthes was iemand die veel bezig was met de betekenis achter beelden en tekens. Volgens Barthes zijn er twee manieren waarop tekens een betekenis krijgen. Hij maakt onderscheid in Denotatie en Connotatie. In onderstaande tabel staat het kort uitgelegd.

[table=header]Primaire denotatie|Secundaire denotatie|Primaire connotatie|Secundaire connotatie

Objectief|Intersubjectief|Cultureel|Subjectief

Op grond van kenmerken|Op grond van gedeelde kennis|Op grond van gedeelde waarden|Op grond van persoonlijke waarden[/table]

Een voorbeeld van primaire denotatie is de volgende.

Je ziet een zwarte, jonge man welke in een militair uniform salueert. Zijn ogen richten omhoog, naar waar een - denkbeeldige - Franse vlag wappert. De foto was de cover van Paris Match uit 1955, bij een artikel van Frans Westelijk-Afrika. Primaire denotatie is dus puur herkennen wat je ziet.

Een voorbeeld van secundaire denotatie is de volgende.



Vanuit primaire denotatie zien we een gekleurde schelp op een dak van een tankstation. Vanuit secundaire denotatie weten we dat het een verwijzing is naar een oliegigant welke zijn waren verkoopt. Dit laatste kan je alleen weten als je wat kennis hebt van de wereld.

Connotatie gaat meer om de gevoelswaarde in plaats van kennis. Een voorbeeld. De denotatie van het woord “minderheid” is ‘een groep personen die minder dan de helft van het totaal aantal personen vormt’. Vanuit connotatie heeft “minderheid” een hele andere betekenis zoals “buitenstaanders” of “onderdrukte groep”. Over denotatie is over het algemeen geen discussie mogelijk. Over connotatie wel.

Oké, nog één voorbeeld waarbij we alle vier soorten snel behandelen.



Vanuit primaire denotatie zien we een blanke man van middelbare leeftijd in een zilvergrijze auto. Deze zilvergrijze auto heeft een wit nummerbord en de auto heeft rode bekleding. Het is een zonnige dag gezien de zonnebril van de bestuurder en het open dak. Ook zien we een weg met een gele streep en een groen landschap op de achtergrond.

Vanuit secundaire denotatie weten we dat de auto een Porsche Boxter S is, waarvan het model meer dan 100.000 euro kost.

Vanuit primaire connotatie kunnen we denken dat Porsche een automerk is wat alleen voor de rijken bestemd is, gezien de prijs van de auto en de Ray-Ban zonnebril van de bestuurder.

De laatste, vanuit secundaire connotatie kunnen we terugdenken aan opa Willem welke ook altijd reed met een zonnebril op in een, vergelijkbare, zilvergrijze auto.

Beelden kunnen dus vele verschillende gedachtes oproepen bij mensen. Hierbij moet je dus kijken naar de kennis van de doelgroep over het onderwerp, aangezien het anders verkeerde gedachten kan oproepen. Volgende week gaan we nog een klein stukje doen over overtuigingskracht bij designs. Daarna beginnen we volop aan tutorials van verschillende designs, waarbij dit alles weer terug komt.

[Visser23]

Vandaag gaan we een signature maken aan de hand van deze tutorial. De signature zal de basis van Photoshop bevatten. Voor beginners met Photoshop is deze tutorial goed te doen. Bij vragen is het natuurlijk altijd mogelijk om te reageren onder aan de rubriek. Outcomes zijn altijd leuk om te tonen, uiteraard.

Vooraf moeten we aantal dingetjes weten. Bij het maken van een signature zijn een aantal begrippen belangrijk. Textures, renders en stocks.

Texture: een soort foto die je kan gebruiken om een achtergrond of een bepaald effect te creëren.

Render: een foto waarbij een personage, dier of voorwerp uitgesneden is. De achtergrond is bij het plaatje weggehaald. Dit kan je herkennen door de “hokjes” achter de foto. Renders hebben altijd een .png formaat.

Stock: een complete foto die direct kan worden gebruikt in een design.

Goed. We gaan nu echt beginnen. Open je Photoshop (ik gebruik Photoshop CS6) en ga linksboven naar File > New. Maak een bestand van 500 pixels breed (width) en 200 pixels hoog (height). Zet het bestand op 300 pixels/inch voor een goede resolutie en zorg ervoor de Color Mode op RGB-colour staat. Background Contents moet Transparant zijn.



We hebben nu een bestand van 500 pixels breed en 200 pixels hoog waarbij de achtergrond transparant is. We moeten al een beetje een idee hebben van het design. Zo kunnen we er een mooie achtergrond bij maken. Ik ben van plan om een voetbalvrouw in mijn signature te verwerken, dus ik wil iets sportiefs uitstralen. Ik zal dus gebruik maken van bepaalde – moderne – effecten.



Mijn personage die ik ga gebruiken is de bovenstaande. De kleuren van deze personage zijn dus rood, wit en blauw. Ik wil graag maximaal twee kleuren gebruiken in mijn design, dus kies ik in dit geval voor rood en wit. Nu weet ik dus een beetje hoe ik de achtergrond kan maken. Ik kan er voor kiezen om een basic achtergrond te doen met bijvoorbeeld een rode kleur (of verschillende rode kleuren). Hiervoor kun je de Brush-tool (B) gebruiken.

Bij je toolbox kun je vervolgens de kleur van je brush bepalen. Klik op de bovenste van de twee kleuren en selecteer een mooie kleur. Ik heb dus voor een rood/roze gekozen. Als je een kleur hebt, selecteer dan de Soft Brush bovenin het venster en maak deze groter naar ongeveer 185 pixels. In de afbeeldingen hieronder is het kort gedemonstreerd.





Nadat ik hier en daar wat met de brush tool heb gespeeld, heb ik de onderstaande achtergrond gemaakt. Ik heb dus vaak op het kleurenpaletje geklikt en een andere rode of roze kleur aangeklikt. Ik heb hierdoor variatie gebruikt in verschillende lichte en donkere kleuren.



We hebben nu een soort achtergrond gemaakt door middel van de brushtool. Ik ben echter nog niet helemaal tevreden en wil een soort effect creeren op de achtergrond. Dit doe ik door middel van een Background Texture. Je kan op Google gewoon zoeken op deze zoekterm en je zult vele plaatjes tegenkomen. Ik heb gebruik gemaakt van deze texture. Kopieer de afbeelding en plak hem in je design. Maak de afbeelding groter door middel van Ctrl + T (Kan ook via Edit > Transform) te drukken en dan met Shift ingedrukt de hoekjes te vergroten. Als het goed is, heb je nu de hele signature bedekt met de foto. Echter, de texture heeft hele andere kleuren dan wat we eigenlijk willen. Dit gaan we aanpassen!

Druk op Ctrl + Shift + U om de afbeelding zwart/wit te maken. Zet de layer daarna op Overlay met 75% opacity.



We hebben nu de onderstaande achtergrond gemaakt, dus gaan nu bezig om de render in de signature te plaatsen. Kies een bekend persoon (ik koos Alex Morgan) en typ er render achter. Je zult allemaal verschillende afbeeldingen te zien krijgen waar hokjes achter zitten. Hieronder een voorbeeld.



Sla de afbeelding op en open deze in Photoshop (File > Open). Sleep het plaatje met de Move tool (V) naar je signature en plaats deze in het midden van je design.



De render lijkt nu gewoon opgeplakt, dus laten we deze gaan verwerken in de achtergrond. Dit noemen we in Photoshoptermen ook wel inblenden. Inblenden kan op vele manieren, waarvan ik er eentje laat zien. We gaan op Google opzoek naar een light texture welke redelijk rondom de render heen kan. Eerst gebruik ik deze texture om een lichteffect te creëren. Kopieer de afbeelding en plak deze in je signature. Doe heb iets op de render en zet de laag op ‘Linear Dodge’. Druk vervolgens op CTRL + U om de kleur aan te passen van de texture. Ik heb gekozen voor een blauwe kleur aangezien deze overeenkomt met haar broekje. Daarna heb ik wat van de texture weggegomd met de Erase-Tool (E) . De grootte van de gum kun je op dezelfde manier wijzigen als die van de Brush-tool.

Mijn signature ziet er nu zo uit.



Pak vervolgens weer de Erase-tool (E) en zet deze op een soft eraser (zelfde als een softbrush en ook op dezelfde manier). Zet de grootte op ongeveer 25-30 pixels en gum een klein stuk van de render weg aan de kant waar je zo meteen een texture wilt toevoegen. Zie hieronder mijn voorbeeld.



Natuurlijk moeten we deze plekken gaan opvullen met een texture. Hiervoor heb ik gekozen voor deze texture. Kopieer deze en plak hem weer in je design. Verklein hem (CTRL + T) naar het goede formaat en roteer de texture ook. Dit kan gewoon met de muis. Zet de texture daarna op Linear Dodge. De kleuren van de texture passen uiteraard niet bij de kleuren van de render. Daardoor heb ik de texture wit gemaakt. Dit doe je door CTRL + U te drukken. Je zit nu in het scherm van Hue/Saturation. Klik vervolgens rechtsonder op ‘Colorize’ en schuif vervolgens wat met de drie balkjes. Om de texture een beetje wit te maken, heb ik gekozen voor:

Hue: 346

Saturation: 25

Lightness: 0



Mijn signature ziet er nu zo uit:



De zijkant heb ik nu redelijk in de achtergrond laten verlopen door een texture. Ik heb de texture er dan ook ingeplakt en de kleur aangepast. Daarnaast heb ik met de soft-eraser hier en daar wat van de texture verwijdert. Let er dan ook op dat bijvoorbeeld op de arm van de render geen stukjes van de texture staat.

De zijkant is natuurlijk nog niet alles. De schouder moet ook nog. Hier gebruik ik een andere texture voor. Namelijk deze. Ik plak de texture in het design en verander de Blending Mode naar ‘Screen’. Vervolgens verplaats ik de layer naar beneden in het Layer Panel (F7) aan de rechter kant. Ik zet de texture-layer dan ook onder de render-layer. Zie de foto.



Nadat ik de texture een beetje heb verkleind, ziet mijn signature er nu zo uit.



De achtergrond vind ik zelf nog een beetje saai. Vandaar dat ik er dan ook voor kies om toch nog een texture te gebruiken voor de achtergrond. Ik zocht op ‘Texture’ en vond deze texture. Kopieer deze en plak deze in je design. Zet de Blending Mode op Screen en verplaats de texture een beetje. De Opacity heb ik op 50% gezet.



Natuurlijk moet er ook nog iets van tekst in. Klik op de tekst-tool (T) en klik vervolgens ergens in het design. Het liefst op de plaats waar jij je tekst wilt hebben. Typ je tekst eerst. Bovenin kan je het lettertype veranderen. Ook de grootte en kleur van je letters kan je bovenin aanpassen. Ik heb gekozen voor het Cooper Black font en heb het lettertype zwart gelaten. Daarnaast heb ik gekozen voor verschillende groottes in mijn tekst.



Ik ben nog niet helemaal tevreden, aangezien de kleur totaal niet bij de rest van het design past. Zet de tekst-layer op 60% opacity. Zoek vervolgens een texture op. Ik koos deze uit. Kopieer en plak deze in je design. Maak het klein en doe de texture over je tekst heen. Klik vervolgens met de rechtermuisknop op de tekstlaag (rechts in het Layer Panel). Klik vervolgens op ‘Create Clipping Mask’. De texture is nu alleen over de tekst heen en het ziet er al een stuk beter uit dan eerst.



Nu alleen nog een rand om je signature heen en hij is af. Daar gaan we. Maak een nieuwe layer (Layer > New of CTRL + Shirt + N). Ga vervolgens naar de Magic Wand Tool (W) in je toolbox en klik hiermee in het design. Er zal een stippellijn om je signature heen komen. Ga vervolgens naar Edit > Stroke om er een rand omheen te doen. Ik koos voor een 3px brede rand en heb deze in Centre gezet. Ik heb voor een donkerrode kleur gekozen. De outcome van de signature is als volgt.

[Visser23]

Deze week gaan we een stapje verder in Photoshop. Vorige week hebben we de basis een beetje leren kennen en hebben we eindelijk een signature weten te maken. Deze week gaan we opnieuw een signature maken, maar we gaan hier en daar wat nieuwe tools gebruiken van het Adobe-programma Photoshop.

Gezien het thema van Art of the Month gaan we deze keer voor een herfst signature.

Stap 1

Open een nieuw document van 400x150 (400 pixels width en 150 pixels height). Zorg ervoor dat de background op ‘White’ staat. Je document zal nu meteen wit zijn.

Stap 2

We beginnen deze keer anders dan anders. Vorige week begonnen we met het maken van een achtergrond, maar deze week plaatsen we direct de afbeelding waarom het draait. In dit geval ga ik niet voor een render, maar ga ik werken met een stock. Een render is in deze signature namelijk niet van belang. Zoek dus een stock op internet op en plaats deze in je document. Zorg er wel voor dat deze render op de juiste grootte is. Dit doe je door de simpele toetsencombinatie CTRL + T. Daarna moet je uiteraard de hoekjes nog pakken en met shift ingedrukt er wat mee gaan slepen. Ik heb gekozen voor

deze stock.

Stap 3

Nadat je de stock hebt geplaatst, moet je deze nog twee keer dupliceren. Dit doe je door middel van de toetsencombinatie CTRL + J of je klikt met rechts op de layer, waarna je duplicate layer aandrukt.

Stap 4

Maak de bovenste layers onzichtbaar door op het oogje

te klikken voor de layer. Pak nu de Smudge Tool en veeg met een 186 px grootte de hele stock over je design heen. Net zolang totdat je een mooi effect creert. Mijn signature ziet er op het moment zo uit:

Stap 5

Maak nu het eerste kopie weer zichtbaar door middel van weer op het (doorzichtige) oogje te klikken. Selecteer de layer en zet de blending mode op Soft Light.

Selecteer nu het tweede kopie en maar ook deze laag zichtbaar. Zet deze op blending mode Luminosity 50%. Mijn signature ziet er nu als volgt uit.

Stap 6

Ik ben nog niet echt helemaal tevreden met de kleuren combinatie. Laten we er dus wat anders van maken. Maak een nieuw Photofilter

aan door midden van Layer > New Adjustment Layer > Photofilter. Kies vervolgens voor een Warming Filter LBA. Je kan natuurlijk ook andere filters kiezen, maar ik vond deze het best erbij passen.

Stap 7

De signature is natuurlijk nog een beetje saai. Vandaar ook dat ik heb besloten om een light texture toe te voegen. Ik heb dan ook voor

deze texture gekozen. Kopieer en plak deze in je design en verklein hem weer naar de juiste grootte. Zet de texture op blending mode Screen en op ongeveer 60% opacity.

Stap 8

De signature is toch iets te licht. Maak een nieuwe layer aan (CTRL + Shift + N) en vul deze op met een zwarte kleur. Zet de layer daarna op Soft Light, 43% opacity.

Stap 9

Naast bladeren moet er natuurlijk wel iets meer in een signature zitten. Ik heb ervoor gekozen om een vogel te verwerken in mijn signature. Ik heb

deze vogel gekozen. Kopieer en plak deze in je design. Selecteer nu de Magic Wand Tool (W) en klik op het witte gedeelte van de foto. Druk nu op ‘delete’ of ‘backspace’ om het witte om de vogel te verwijderen. Maak de vogel nu kleiner en dupliceer hem eventueel.

Stap 10

De tekst. Het moeilijkste gedeelte van de hele signature in mijn ogen. Maak een nieuwe layer en selecteer de Text Tool (T). Klik in je design en typ je tekst. Nadat je dat gedaan hebt, moet je eventjes vergroten of verkleinen. Ook moet je de tekst op een juiste plaats neerzetten.

Ik heb gekozen voor het font Chaparral Pro, bold italic. Nadat je de juiste tekst hebt geplaatst, ga je naar Blending Options (dubbelklik op de layer of rechtsklik > Blending Options). Ga naar Styles en klik vervolgens deze aan:

Ga dan naar Drop Shadow en zet het neer zoals in onderstaande screen.

Wanneer je dat gedaan hebt, ga je naar Inner Glow en zet je het weer neer zoals onderstaande screen.

Ik heb dus gekozen voor een opvallende tekst. Dit aangezien de tekst in deze signature redelijk belangrijk is. Hier wil ik dan ook lichtelijk de focus op leggen. Aangezien het nog iets teveel is, zetten we de opacity van de textlayer op zo’n 60%.

Outcome

Dit was de tutorial dan alweer. We hebben een aantal nieuwe dingentjes geleerd.

- Blending Options

- Design met een stockfoto

- Adjustment Layer > Photofilter

De outcome van mij is de volgende en is tevens mijn ingestuurde signature in de Art of the Month Battle:

[Visser23]

Welkom dames en heren bij een nieuwe 'GFX met Visser'. Afgelopen twee keer hebben jullie Photoshop mogen leren door middel van een tweetal tutorials. Ditmaal gaan we de rubriek anders inrichten. Inspiratie is namelijk erg belangrijk in het wereldje van design. Voordat je ergens aan begint, moet je natuurlijk wel iets in gedachten hebben voordat je dit daadwerkelijk kan realiseren.

Vele mensen krijgen ideeën als zij aan het wandelen zijn of als ze op de wc zitten. Dit is natuurlijk een optie. Daarnaast proberen anderen weer door middel van bepaalde oefeningen een idee te krijgen, welke ze vervolgens opschrijven. Ik vind het allemaal onzin. Ik zoek altijd gewoon op internet voor inspiratie en doe helemaal niks met opschrijven. Daar heb ik wel zo'n hekel aan. Schetsen, opschrijven, mock-ups, het trekt mij allemaal niet. Ik open Photoshop en ga knallen.

Inspiratie kan je overal weghalen natuurlijk. Ik heb echter wel een aantal voorbeeldjes die ik jullie graag zou willen laten zien.



Natuurlijk een fotocamera welke bewerkt is. Dat is echter niet het enige. Het is een fotocamera welke zichzelf kan bedienen en zelf de mooie kleuren naar zich toetrekt. Door deze foto ga je nadenken over waar die stralen vandaan komen. Wat voor mooie paradijs zit er in het verlengde van de foto?



Dit is ook een zeer mooi voorbeeld van een foto waar je inspiratie van kan krijgen doordat je er bij na moet denken. Het lijkt op het eerste gezicht een mooie, bewerkte foto. Echter, er klopt iets niet. 'De wet van voorgrond en achtergrond' is hier namelijk niet toegepast. Wat is nou de voorgrond en de achtergrond in deze foto?



Tot slot het voorbeeld hierboven. Ook dit is iets waarbij je echt moet nadenken voordat je pas doorhebt wat je ziet. Het is duidelijk dat het een huis is, maar hoe moet je er nou naar kijken?

Desingers hebben verschillende manieren om hun werk te laten zien. Bovenstaande voorbeelden zijn dus echt typische voorbeelden van foto's die mijn inspireren. Ze laten mij nadenken en zorgen ervoor dat ik creatief kijk naar de beelden. Ik maak van de foto een eigen beeld, welke ik vervolgens kan vertalen naar mijn eigen werk.

Heb jij ook een voorbeeld van iets waar je inspiratie uit haalt? Show me!