Author: Chloe Reyes

Verdere toelichting op het EPS bestand

15 September 2016 / Chloe Reyes / 0 Comments

We spraken in een eerder artikel al over het EPS bestand en waarom je dit bestandsformaat zou moeten kiezen boven bijvoorbeeld een PSD bestand als het gaat om speciale drukwerk doeleinden. Er zijn verschillende sites waar je meer kunt lezen over het EPS bestand, maar wij proberen het in alle detail nog een keer hier uit te leggen.

Waarom heet het EPS?

Laten we beginnen bij het begin, waarom EPS en waar staat EPS bestand voor? EPS staat voor Encapsulated PostScript, simpel gezegd is het gewoon een grafisch bestand in de PostScript taal.

Waarvoor wordt het EPS bestand gebruikt?

We gaan even een situatieschets doen. Je bent een grafisch ontwerper (Photoshop geleerd) en krijgt een opdracht binnen voor een grandioos billboard. Je bent gewend om in Photoshop alles te doen en dit is helemaal prima. Echter kom je er bij het ontwerpen achter dat jouw pdf bestand wel heel erg groot wordt. Je krijgt een PDF bestand van groter dan een gigabyte! Behalve dat dit een logistieke ramp is is dit ook nog eens geheel onnodig.

Hoezo gebeurt dit?

Photoshop genereert pixels, waar een EPS-editor vormen genereert. Het grote verschil is dat pixels niet schaalbaar zijn, dus moet Photoshop de bestandsgrootte aanzienlijk vergroten bij grote bestanden. Dit resulteert in onmogelijk verstuurbare bestanden, een ramp voor niet alleen jou maar ook je opdrachtgever.

De oplossing: EPS bestand

Wanneer je jezelf aanleert om in Adobe Illustrator jouw grootschalige graphics te maken, kom je erachter dat wat er in een EPS bestand gegenereerd wordt veel schaalbaler is. De vorm die je maakt, neemt een minimale bestandsgrootte in beslag waardoor deze makkelijk te gebruiken is voor grote projecten als billboards.

Waar gebruik je EPS bestanden NIET voor?

Het is ook belangrijk om te kijken waar je een EPS bestand niet voor moet gebruiken. Grappig genoeg is dit hetgeen waar Photoshop juist voor gemaakt is, namelijk; foto’s bewerken.

Gebruik Photoshop en Illustrator voor je graphics

9 September 2016 / Chloe Reyes / 0 Comments

Wanneer we als designers aan de gang gaan, zijn er bepaalde standaarden die we moeten aannemen. Wanneer je bijvoorbeeld bezig bent met drukwerk is het belangrijk dat je vanaf een ai bestand converteert naar een EPS bestand. Waarom? Omdat dit het uiteindelijke formaat is wat ervoor zorgt dat er geen kwaliteitsverlies is. Dit zijn namelijk zogeheten Vector graphics, en het grote verschil met pixel editors is dat je dit onbeperkt groot kan maken, zonder kwaliteitsverlies. Echter kan een goede designer ook niet zonder een goede pixel editor, lees hieronder waarom.

raster-vector-art

Pixel editors zijn ook belangrijk

Wat zijn nou eigenlijk pixel editors ten opzichte van bijvoorbeeld programma’s als Illustrator? Nou, om een groot voorbeeld te noemen, Adobe Photoshop. De bewerkbare bestanden van Photoshop zijn PSD bestanden.

Waarom pixel editors?

Pixel editors worden vaak ingezet voor het maken van onder andere posters, logo’s en vooral online graphics. Wat we hiermee bedoelen is bijvoorbeeld een foto die op Facebook gedeeld gaat worden of een afbeelding die gebruikt gaat worden als achtergrond van een website. Wanneer je bijvoorbeeld een vrachtwagen moet bedrukken, lees dan even verder. We gaan er dieper op in waarom je voor dat soort (groot) drukwerk Illustrator-achtige programma’s moet gebruiken.

Vector-based software voor groot drukwerk

We hebben het hierboven al gehad over online graphics zoals logo’s, Facebook afbeeldingen en dergelijke. Echter komt het als grafisch ontwerper ook vaak voor dat je drukwerk moet ontwerpen voor iets grotere doeleinden, zoals bijvoorbeeld een vrachtwagen of billboard. Je kan je misschien wel bedenken dat je hiervoor niet moet kiezen voor raster software. Ten eerste krijg je onwijs grote bestanden (het exporteren van een PSD bestand ten grootte van een A4’tje kan toch al gauw oplopen tegen de 100MB). Ten tweede is het zo dat een geëxporteerd EPS bestand (dit is dus vector) qua kwaliteit veel hoger is dan een PSD (of PDF, JPG bestand).

Customize je eigen wordpress plugins

22 November 2015 / Chloe Reyes / 0 Comments

We hebben het in de artikelen hiervoor gehad over WordPress. Wil je een website starten dan is dit echt het CMS. Alles is overzichtelijk, eenvoudig en daarnaast worden er duizenden plugins aangeboden die je allemaal kunt gebruiken. Veel plugins zijn gratis, sommige zijn betaald.

Nu kan het zijn dat je een plugin download en dat deze niet helemaal aansluit bij het thema van je website. In dit geval heb je vaak de mogelijkheid om de css regels aan te passen en deze helemaal naar je hand te zetten, alles is dan aan te passen. Neen een voorbeeld aan http://www.maaltijdboxonline.nl, op deze website zijn een aantal plugins aangepast naar het thema. Zo opent op de homepagina een tabel met prijzen. Deze tabel bestaat uit de kleuren van de website, deze zijn aangepast. Ook op de kortingscode pagina staat een plugin die is aangepast, je ziet hier alle kleuren weer terugkomen en aansluiten bij het gebruikte thema.

Je ziet nu dat de beheersing van CSS heel belangrijk is voor het customizen van je website. Je kan een standaard thema dan helemaal naar je hand zetten en aanpassen. Dit is wat je wilt wanneer je wilt opvallen en echt iets wilt maken dat uniek is.

Je hoeft natuurlijk niet altijd WordPress te gebruiken maar het is wel heel makkelijk om te beginnen. Grote bedrijven en websites als http://www.nu.nl hebben webdesigners in dienst en werken niet met WordPress. Ze hebben een website ontwikkelt die volledig naar de eigen wensen is omgezet, wordpress zou in dit geval een aantal nadelen voor ze hebben qua data-requests, en de hoeveelheid artikelen op de website.

Inspiratie voor webdesign

20 August 2015 / Chloe Reyes / 0 Comments

Als je voor het eerst aan de slag gaat met webdesign is het fijn als je inspiratie kan opdoen op verschillende locaties. Door het bekijken van andere websites krijg je een beter inzicht in de mogelijkheden, opties en variaties. Uiteraard kan je hiervoor het hele internet afstruinen, maar je kan ook gebruik maken van websites die de coolste designs voor jou op een rijtje hebben gezet.

WordPress standaard of niet?

Voor deze week ben ik het internet af gaan speuren naar websites die WordPress gebruiken en daarbij een thema hebben gekocht. Ik als webdesigner kan het heel erg waarderen als iemand ondanks dat alsnog moeite heeft gestoken in design, door bijvoorbeeld custom CSS te gebruiken. Hiermee maak je een bestaand thema helemaal anders.

Ik als vervend sneakerfan zoek nog wel eens naar dikke air maxjes, en toevallig bij het zoeken kwam ik een site tegen die precies dit had gedaan. Het gaat om de site http://www.nieuwesneakers.nl/. Hieronder zie je een foto van de broncode van deze site (dit kan je in elke web-browser trouwens doen door rechts te klikken en dan te klikken op ‘bron weergeven’).

Je ziet hier de URL structuur /wp-content/themes/dt-the7

Je kan hier zien aan de URL-structuur dat ze het thema DT-The7 hebben gebruikt. Ik ben op zoek gegaan en kwam hem hier tegen.

Toch ziet het originele design er anders uit dan het design van de Nieuwe Sneakers site. Je kunt duidelijk zien dat ze veel custom CSS hebben gebruikt. Om een klein voorbeeld te geven:

#text-22 > div.widget-title { background-color: #fc4b00; text-align: center; font-weight: bold; color: #FFF; padding-top: 5px; padding-bottom: 5px; margin-bottom:0; }

Je ziet hier dat ze hun eigen widget titel hebben gestijlt.

Ik daag je uit, ga rondstruinen op het internet op zoek naar WordPress thema’s en kijk hoe deze veranderd zijn door de uiteindelijke gebruikers. Geloof me, hier ga je veel van leren! Laat in de comments weten of je iets gevonden hebt!

Webdesign Inspiratie

De website van Webdesign Inspiratie heeft weliswaar geen unieke titel, maar het heeft wel een uitgebreid portfolio van inspirerende websites. Je hebt de mogelijkheid om alle websites op een pagina te tonen, waardoor je een zeer helder overzicht krijgt van de laatste trends. Het is visueel erg prikkelend en je zal dan ook binnen no time een idee hebben van wat je wilt gaan maken.

CSSMania

Dit is de Amerikaanse tegenhanger van Webdesign Inspiratie. Deze website is echter al sinds 2004 in de lucht en heeft dus een zeer grote database waar je uit kunt putten. Trek nou niet meteen de conclusie dat 2004 oud en dus uit is. Retro is namelijk altijd al in geweest. Niet goed genoeg? Bij CSSMania kan je per maand kijken wat de nieuwste websites zijn. Zo volg je dus altijd de laatste trends.

De wereld

Beperk je niet alleen tot andere websites. De waarheid is dat inspiratie overal vandaan kan komen. Volg tutorials op Youtube, lees magazines over webdesign, ga naar een gave tentoonstelling toe. Ga naar buiten. Blijf je niet blindstaren op dat scherm maar haal eens een frisse neus. Je zult zien dat het je goed doet!

Illustrator vs Photoshop

18 August 2015 / Chloe Reyes / 0 Comments

Op het moment dat je begint met webdesign zal je ongetwijfeld een keer tegen de vraag aanlopen welk programma je beter kan gebruiken; Illustrator of Photoshop. Het antwoord op die vraag is volledig afhankelijk van het doel. Beide programma’s hebben namelijk zijn eigen voordelen.

Illustrator

Illustrator is een zeer geliefd programma bij grafische ondernemers. Het stelt je in staat om logo’s en ontwerpen te creëren en te modeleren naar jou wens. Het voordeel van Illustrator is dat het werkt met vector in plaats van pixels. Doordat pixels uit vierkante blokken bestaat kan je een afbeelding maar tot een bepaalde grootte uitvergroten. Daarna zij je de blokjes en wordt de afbeelding onduidelijk. Met vector lopen de losse onderdelen in elkaar over. Ze passen naadloos op elkaar, waardoor je een afbeelding zo groot of klein kan maken als jij wilt. Het behoudt altijd zijn scherpte. Daarom is Illustrator het perfecte programma als je van plan bent om logo’s te maken. Je kan met een bestand namelijk het logo voor de opdruk van een pen leveren, maar ook voor een spandoek van 3 bij 3 meter.

Photoshop

Fotograven zweren op hun beurt weer bij Photoshop. Dat is ook niet zo vreemd, want het programma biedt alles wat een fotograaf nodig heeft. Je kan het zien als de moderne doka. Onderbelichte foto’s kan je helderder maken, overbelichte foto’s kan je meer contrast geven. Je kan bovendien verschillende bewerkingen uitvoeren zoals bijsnijden, kleur aanpassen en zelfs het in of uit perspectief brengen van het beeld. Bovendien zijn een aantal functies in Photoshop gemakkelijker te verwerken dan in Illustrator. Zo zet je een afbeelding in een paar seconden helemaal vrijstaand. Uiteraard worden je afbeeldingen dan wel weer met pixels opgeslagen.
Het beste van twee werelden

Eigenlijk is het voor iedere grafische ontwerper een must om de twee programma’s naast elkaar te hebben lopen. In Photoshop kan je namelijk gemakkelijk snelle bewerkingen doen en Illustrator is ideaal vanwege de vectoren. Je kan bestanden van Photoshop inladen in Illustrator. Als je deze vervolgens embed, dan worden de pixels omgezet in vectoren. Zo benut je dus al je mogelijkheden.

De webdesigntrends van 2015 en 2016

13 August 2015 / Chloe Reyes / 0 Comments

Als je van plan bent om een website te maken, dan is het natuurlijk wel van belang dat deze ook bezocht wordt. Vandaag de dag kan je niet meer aankomen met een simpele site met vaste kaders en weinig tot geen interactie. Door de ontzettend snelle ontwikkelingen die het World Wide Web de afgelopen jaren heeft ondergaan zijn wij ondertussen zeer verwend. We willen en kunnen steeds meer. Net als met alle andere dingen in de wereld zijn er gelukkig verschillende trends die we kunnen volgen om succesvol te zijn. Hier volgt een overzicht voor de webdesigntrends van 2015 en 2016.

Adaptive webdesign

Dit jaar zijn er twee termen die je ontzettend vaak zal tegenkomen. Responsive en adaptive webdesign. Beide passen de grote van de website aan naar de grote van het scherm waar je op kijkt. Wanneer je dus op je mobieltje kijkt wordt de website zo aangepast dat hij op het scherm past. Adaptive webdesign gaat zelfs nog een stapje verder. Daarbij kan je namelijk de content die wordt weergegeven ook aanpassen. Je kan dingen toevoegen of juist verwijderen per apparaat. Zo haal je over het maximale uit!

Scrollen

Een andere nieuwe trend, die zich eigenlijk heel mooi aansluit bij het adaptive design is het een-pagina-principe. Je klikt niet langer door naar andere pagina’s, maar blijft eeuwig scrollen. De informatie wordt continue aangevuld. Tot voorheen maakte voornamelijk social media zoals Facebook en Tumblr overduidelijk gebruik van dit design, maar het komt op steeds meer websites naar voren. In Amerika zijn er al verschillende kwaliteitskranten die met de one-page werken. Zij voegen continue een nieuw artikel toe als de lezer omlaag scrolt, om deze zolang mogelijk op de website te houden.

Transparantie

Als je dan toch liever voor een website met links gaat, zorg er dan voor dat de knoppen transparant zijn. Niets is visueel zo lelijk als een button die het overzicht verpest. Door transparante buttons (spookknoppen) te gebruiken, blijf je een mooi en esthetisch geheel houden. Het schreeuwt niet om de aandacht, maar het valt de bezoeker wel op.

Opvulling

Websites met een witte, zwarte of iedere andere solide achtergrond doen saai aan. Het is statisch en alles behalve verleidelijk. Je doet er veel beter aan om je website visueel aantrekkelijk te maken. Denk daarbij bijvoorbeeld aan een grote foto’s, animaties en/of video’s. Zorg voor verschillende lagen in je website zodat deze meer dimensie krijgt en wees niet bang om meerdere foto’s te plaatsen. Uiteraard kan je wel gewoon gebruik make van ruimtes tussen je foto’s in. Als de achtergrond daarbij wit, zwart of een andere kleur is kan dat echt geen kwaad. Dit zorgt dan juist weer voor rust.

Kwaliteit

De webdesigntrends van dit jaar en aankomend jaar leggen de lat erg hoog. Er is een bepaalde ongeschreven standaard waar je site aan moet voldoen om te voorkomen dat mensen wegklikken. Met andere woorden; je kan maar beter kwaliteit bieden of je hebt geen bezoekers. Deze kwaliteit zit hem niet alleen in een leuke animatie of mooie plaatjes op de achtergrond. Je moet nog net even verder denken. Het totaalplaatje moet kloppen. Besteed daarom aandacht aan welk lettertype je gebruikt, welke grootte deze zal zijn en misschien nog belangrijker, welke kleur. Zorg er voor dat je graphics van de hoogste kwaliteit zijn. Heb je de mogelijkheid om in vector te werken in plaats van in pixels, doe dat dan vooral! Let wel goed op! Hoe groter het bestand, deste langzamer de pagina laadt, en dat wil je ook voorkomen!

De beste lettertypes voor webdesign

11 August 2015 / Chloe Reyes / 0 Comments

Als je een frisse website wilt maken kan je niet meer aankomen met lettertypes zoals Arial en Times New Roman. Alhoewel deze lettertype nog altijd zeer functioneel zijn, bijvoorbeeld tijdens het schrijven van een sollicitatiebrief, worden ze geweerd uit de wereld van webdesign. Toch kan je niet zomaar klakkeloos ieder lettertype gebruiken dat je mooi vindt. Het vinden van het juiste lettertype is dus essentieel.

Een paar tips

Het vinden van het juiste lettertype is misschien wel het moeilijkste gedeelte van het webdesign. Toch is het belangrijk dat je hier voldoende tijd in steekt. Een font geeft een website namelijk een eigen karakter, waarmee je precies datgene kan overbrengen waarvan je hoopt dat de bezoeker het denkt.
Een andere tip is om te binnen met het vinden van je font. Het kan namelijk zo zijn dat je precies het juiste lettertype hebt gevonden dat exact dat over brengt wat jij wilt vertellen, maar totaal niet bij de rest van je website past. Op het moment dat je begint met je font kan je jou design nog aanpassen.
Hou het simpel. Eenvoud zorgt voor totaliteit. Uiteraard kan je voor je titels, kopjes, knopjes en andere verfraaiingen een ander lettertype gebruiken dan voor je tekst, maar voorkom het gebruik van meer dan 3 verschillende fonts.

Een font is overigens niet alleen een manier om jou stijl over te brengen, maar dient ook informatie te geven. Zorg er dus voor dat je lettertype leesbaar is. Niets is zo vermoeiend als het moeten uitpuzzelen wat er nu precies staat. Een duidelijk lettertype met de juiste grootte en een goed contrast is dus een echte must!

Stukje geschiedenis

Er zijn twee verschillende typen fonts. Schreef en schreefloos. De letters in schreefstijl hebben kleine strepen aan de boven en onder kant. Men is van gedachte dat dit soort lettertypes dateert uit de tijd van de Romeinen en de strepen een overblijfsel zijn van de lijnen waar tussen geschreven werd. Dit soort lettertypes komen zeer zakelijk over en worden dan ook onder andere gebruikt voor kranten, zakelijke websites etc. Schreefloze lettertypen, zoals comic sans, komen juist een heel stuk vrolijker en losser over. Dat maakt schreefloze lettertypes ideaal voor ontspanning etc.

Het vinden van fonts

Wanneer je een beginnende webdesigner bent, wil je waarschijnlijk beginnen met gratis fonts. De kans is groot dat je nog niet zover bent dat je bakken met geld verdient met het bouwen van sites. Dat wil dus zeggen dat alle aanschaffen die je moet doen uit jou portemonnee vandaan komen. Gelukkig is dat voor lettertypes niet nodig.

Dafont is mogelijk de meest bekende website als het gaat om gratis lettertypes. Deze database bevat verschillende stijlen die volledig gratis en rechten vrij zijn. Alles wat je van deze pagina haalt kan je dus met een gerust hart om je website neerzetten.

Behance is een geweldige plaats voor graphic designers. Je kan hier niet alleen veel inspiratie op doen, maar hebt ook nog eens de mogelijkheid om verschillende foto’s en fonts gratis te downloaden. Ook voor de designer die al wat langer bezig is, is Behance een geweldige website om eens te bekijken. Hou er overigens wel rekening mee dat niet alles gratis is.

Bij Losttype betaal je per licentie. Wanneer je van plan bent om het lettertype alleen maar voor eigen gebruik te houden kan je het gratis downloaden. Ga je het op een website plaatsen, dan betaal je per website een prijs. De bedragen zijn erg uiteenlopend dus snuffel vooral eerst even lekker rondt voor je een keuze maakt.
Je eigen lettertype

Wil je jouw website helemaal eigen maken, dan kan je er natuurlijk altijd nog voor kiezen om je eigen lettertype te maken. Omdat er best wel wat bij komt te kijken zijn er websites zoals Pepermunt en Fontlab die je aardig op web helpen. Fontlab biedt overigens ook professionele software, maar daar mag je dan ook wel gelijk een flinke duit voor neerleggen.

Natuurlijk kan je ook gewoon aan de slag met programma’s zoals Illustrator. Pak je tekentablet er maar bij. In combinatie met het programma Glyphs heb jij zo de gaafste fonts ontworpen. Characters legt je stap voor stap uit hoe je dit kan doen.

Als laatste

Wanneer je een font gekozen hebt, is het altijd verstandig deze nog even aan een laatste test te onderwerpen. Type de tekst “The quick brown fox jumps over the lazy dog.” In deze zin zitten alle letters uit het alfabet. Zo heb je een goed overzicht van de letters en kom je niet in eens voor onprettige verrassingen te staan. Vergeet niet om zowel hoofdletters als kleine letters te controleren.

Bezoek Dafont: http://www.dafont.com
Bezoek Behance: https://www.behance.net
Bezoek Losttype: http://www.losttype.com/browse/
Bezoek Pepermunt: http://www.pepermunt.net/games/lettertype-maken.html
Bezoek Fontlab: http://www.fontlab.com
Bezoek Characters: http://www.characters.nl/blog/maak-je-eigen-lettertype-met-illustrator-en-glyphs/

De basis van webdesign

7 August 2015 / Chloe Reyes / 0 Comments

Hoe begin je nou met webdesign? Het is natuurlijk niet iets wat je zomaar even een, twee, drie doet. Hier is een kleine opsomming van kennis die je nodig hebt en waar je die kan opdoen!

Codering

Achter iedere goede website zit een nog betere codering. Of het nu HTML, CSS of HTML5 is, het is kennis die je nodig hebt. Om als volleert ICT’er websites in elkaar te kunnen zetten heb je echt een opleiding nodig. Nou kan je 4 jaar in de leer gaan bij een erkende ROC opleiding, maar je kan natuurlijk ook gewoon cursussen volgen die jou piekfijn weten uit te leggen hoe die codering nou eigenlijk werkt. Er zijn verschillende online platformen, waar je gratis en voor niets een goede basis kan opdoen. Denk hierbij aan pagina’s zoals HTML Leren, HTML Dog (Engelstalig) en Learn it. Uiteraard dien je dit wel helemaal zelfstandig aan te pakken. Je hebt dus geen begeleiding voor wanneer je iets niet helemaal begrijpt.

Wil je toch voor die zekerheid gaan, of heb je een stok achter de deur nodig? Dan kan je ook cursussen volgen bij onder andere Learningtrain en LOI. Overigens zijn er ook een groot aantal programma’s die het programmeren een stuk gemakkelijker voor je maken. Denk daarbij aan Adobe Dreamweaver of Everweb (mac). Hou er wel rekening mee dat je zonder programeerkennis minder mogelijkheden hebt.

Grafisch

Een ander essentieel onderdeel van webdesign is de grafische vormgeving. Het zelfstandig kunnen ontwerpen van logo’s, bewerken van foto’s en verwerken van animaties is een grote must. Doorgaans wil dat zeggen dat je bekend moet zijn met programma’s zoals Photoshop, flash en illustrator. Uiteraard kan je ook daar weer een opleiding voor volgen, een cursus voor doen bij Learningtrain of de LOI, maar je kan uiteraard ook online terecht voor een groot aantal tutorials. Learn it bied naast HTML ook Photoshop, Indesign, Lightroom, Flash en etc. aan. Het is een ideaal platform om een goede basis voor webdesign op te doen.

YouTube

We hebben je een aantal tips gegeven waar je al heel wat kennis kan op doen. Toch blijkt het in praktijk zo dat mensen sneller iets leren op het moment dat ze het gezien hebben. Vrees echter niet, Youtube staat vol met filmpjes die je uitleggen hoe je bepaalde dingen kan doen. Alhoewel er vele Engelstalige tutorials op staan, zijn er ook een groot aantal Nederlandse video’s die je goed op weg helpen. HoeGaatDat is bijvoorbeeld 1 van die Youtube platforms. Je kan direct op het scherm mee kijken en de stappen gelijktijdig uitvoeren. Het is de ideale manier van leren!