Nieuw Document

Maak een nieuwe Photoshop document aan (Apple+N) (Control+N)
Kies het juiste formaat.

Kies dan File -> Place (dit zorgt ervoor dat je gelijk een smart object voor je krijgt)
Schaal de afbeelding tot 1/4e van het hele document. (bij een smart object maakt het niet uit hoe vaak en hoe klein of groot je de afbeelding maakt! Er is geen kwaliteitsverlies)

Dupliceer en verdeel

Klik en sleep het afbeelding naar rechts met je ALT toets ingedrukt. (dupliceren tijdens slepen)
Zorgt dat alle thumbnails goed gespreid zit.

Filter toepassen

Pas nu je gewenste filter aan je verschillende lagen toe voor de vergelijkingen.

Je kunt ook een bepaalde filter gebruiken. Bijvoorbeeld de filter levels. Je kan dit op al je thumbnails toepassen en zo elke voorzien van verschillende elementen.

Nu zie je dat de filter over alle thumbnails zit. Om het op 1 laag toe te passen doe je rechter muisknop op de filter en kies dan Create Clipping Mask!

Nu je verschillende filters op je thumbnails heb komt er een handige truc met Smart Object.

Replace Contents

Kies op een van de smart object in je laag palet met je rechter muisknop en kies -> Replace Content
Kies nu je andere afbeelding om hetzelfde effect te bekijken.

Template opslaan

Sla het bestandje op als een PSD bestand en zo kan je deze bestand vaker gebruiken om andere afbeeldingen in te laden.

Filter op origineel toepassen!

Stel je heb nu het juiste filter gevonden die je op de originele afbeelding wilt toepassen.
Open de originele afbeelding, kies de juiste filterlaag van het template document en sleep die laag direct naar je originele afbeelding.

Succes!

Wat heb je nodig om een WordPress website te maken?
Ten eerste moet je een domein en hosting pakket met MySQL database hebben!
Er zijn genoeg webhosting op het internet te vinden, Artsmixer.com is gehost bij MKEweb.com.

Voorbereiding

Voor het installeren van WordPress heb je het recente http://wordpress.org/download/ versie van wordpress nodig.

• Maak eerst een website map aan en zet alle FTP instellingen in Dreamweaver.
• Pak alle bestanden in de map WordPress in de root van je website uit.

Installatie

Volg de installatie procedure.
Klik op Create a Configuration file als die pagina verschijnt.
WordPress zal om je database gegevens vragen voer die in.

Als het gelukt is krijg je een pagina met je login naam (admin) en gegenereerde wachtwoord! Die ook per mail wordt verstuurd.

Klaar!

Ga vervolgens naar je website en je ziet een standaart WordPress thema met een voorbeeld artikel en nog enkele pagina’s.
Nu heb je WordPress op je website geinstalleerd.

Meer informatie over het installeren van WordPress lees je hier

Het is een basis tip dat erg handig is en een dat je zeker vaker zal gaan gebruiken.

Wanneer ik veel lijnen html code heb geschreven wordt mijn html code soms rommelig en ik heb nooit veel zin om alles in 1 keer goed te organiseren, maar als ik mijn pagina bijna af heb gebruik ik het Apply Source Formatting functie van Dreamweaver.

Je kan in Dreamweaver dus heel snel het overzicht van het organisatie van je html bestand terug halen door eerst alles te selecteren in je codeview Command+A:
Ga dan vervolgens naar:
Menu -> Commands -> Apply Source Formatting

Nu ruimt Dreamweaver dus je code op en zo krijgt je meer overzicht over je html codes!

1. Content management system

Klanten kunnen de content zelf beheren en wijzigen.
Dat houd in dat je de front en back-end hebt!
Je heb dus maar 1 basis pagina nodig voor de template en alle pagina’s kun je gewoon in de admin van Wordpress aanmaken zonder enige moeite en de pagina verschijnt in je menu!

2. Thema’s

Vormgeving is erg belangrijk als het om websites gaat!
WordPress heeft een erg gemakkelijke optie. Namelijk de optie thema’s.
Ik ga jullie hier later nog veel meer vertellen over hoe je een mooi thema kan maken in WordPress!

Erg handig is dat per thema een aparte map nodig is, zo kun je dus thema versies beheren door gewoon de map van thema van 2008 te kopiëren en bij het redesignen te plakken als 2009 thema. En je kunt het ook nog in 1 klik veranderen in de admin!

3. Regelmatig updates!

Wordpress.org brengt erg vaak updates uit met altijd goede verbeteringen en dat is wel erg handig als je weet dat er veel aan usability van het back-end gewerkt wordt!

4. Plugins

Plugins zijn onmisbaar bij WordPress! Zoals: Anti-spam, Automatische updates, Foto galerij en meer handige plugins.
Ik raad het je wel aan om niet te veel plugins te installeren, want daar wordt je website trager van.
Hier ga ik jullie later ook nog meer over vertellen!

5. Snelle installatie

Een van de redenen dat WordPress zo populair is dat WordPress zo is geinstalleerd (binnen 5 minuten)
Later meer over het installeren!

6. Users

In de Back-end (admin) van Wordpress is er de mogelijkheid om meerdere accounts aan te maken!
Als je WordPress als blogsite gaat gebruiken kan je bezoekers de mogelijkheid geven om zich te registreren en toegang te geven tot de speciale artikelen of downloads!

Voor gewone sites voor grote bedrijven is het ook erg goed te doen. Door de medewerkers een account te geven met beperkingen met bijvoorbeeld alleen bevoegdheden tot het schrijven van artikelen, maar niet publiceren. Om te publiceren heb je weer een ander account nodig!

Ook jij als webdesigner kan als admin geregistreerd zijn en alle layout en thema’s aanpassen, terwijl de klant daar niet aan kan zitten en dus ook niks kan veranderen.

Dit leg ik later uit in detail.

7. OpenSource!

Ook erg belangrijk is dat WordPress geheel gratis en voor commerciële doeleinden gebruikt mag worden!
Lees hier meer over GNU General Public License

Om op de hoogte te blijven van WordPress artikelen kan je inschrijven op de RSS Feed

• http://freelancefolder.com/
• http://freelanceswitch.com/

• 1 kolom layout
• 2 kolommen layout
• 3 kolommen layout

Kopieer en plak onderstaande code in Dreamweaver of Kladblok en sla dit op als index.html
Vragen en opmerkingen zijn altijd welkom!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>1, 2, 3 layout</title>
<style type="text/css">
/* settings */
* {margin: 0; padding:0;} .clear {clear: both;} body { background: #000;}
/* typografie */
p {
padding: 10px 0 0 10px;
}
/* standaart settings */
.header {
height: 50px;
float: left;
width: 800px;
border-bottom: 1px dotted #555;
background-color: #D3D3D3;
text-align: center;
}
.footer {
height: 40px;
width: 800px;
float: left;
background-color: #909090;
text-align: center;
}

/* container voor alle layouts */
#container {
margin: 20px auto 0 auto;
width: 800px;
}
	/* 1 kolom */
	.content {
	height: 200px;
	background: #0099FF;
	}
	/* 2 kolommen */
	.content-links {
	width: 500px; height: 200px;
	background: #0099FF;
	float: left;
	}
	.content-rechts {
	width: 300px; height: 200px;
	background: #0000AA;
	float: left;
	}
	/* 3 kolommen */
	.drie-midden {
	width: 400px; height: 200px;
	float: left;
	background: #444;
	}
	.drie-links, .drie-rechts {
	width:  200px; height: 200px;
	float: left;
	background: #0099FF;
	}

</style>
</head>

<body>
<!-- 1 KOLOM -->
	<div id="container">
        <div class="header">
            <p>Ik ben header</p>
        </div>

        <div class="content">
            <p>Ik ben content</p>
        </div>

        <div class="footer">
            <p>Ik ben footer</p>
        </div>
    </div>
<div class="clear"></div>

<!-- 2 KOLOMMEN -->
	<div id="container">
        <div class="header">
            <p>Ik ben header</p>
        </div>

        <div class="content-links">
            <p>Ik ben content LINKS</p>
        </div>

        <div class="content-rechts">
            <p>Ik ben content RECHTS</p>
        </div>

        <div class="footer">
            <p>Ik ben footer</p>
        </div>
    </div>
<div class="clear"></div>

<!-- 3 KOLOMMEN -->
	<div id="container">
        <div class="header">
            <p>Ik ben header</p>
        </div>

        <div class="drie-links">
            <p>Ik ben content LINKS</p>
        </div>

        <div class="drie-midden">
            <p>Ik ben content MIDDEN</p>
        </div>

        <div class="drie-rechts">
            <p>Ik ben content RECHTS</p>
        </div>

        <div class="footer">
            <p>Ik ben footer</p>
        </div>
    </div>
</body>
</html>