Plaatjes bewaren voor Web

Open een plaatje in Photoshop en tik Cmd-Alt-Shift-S (Bewaar voor Web).
In dat paneel kies je rechtsboven voor de Voorinstelling “JPG hoog“. Bewaar als 1.jpg, 2.jpg etc, maximaal 1200 px, en zet ze in de map hr (staat voor High Res) in de map ima.

Kies png 24 als er transparantie in moet.

Thumbnails (lr)

Maak van diezelfde plaatjes ook kleine versies (thumbnails), die klikbaar worden naar de grote plaatjes. Zet die thumbnails in een map lr (staat voor Low Res). Kleine vierkante plaatjes kun je maken met de Crop-tool, die je linksboven afstelt op B x H en daarnaast op 200px en 200px.

Voeg nu een Lightbox toe.

Extra effecten met CSS

Op de kleine plaatjes kun je ook effecten toepassen met CSS:

.gallery img {
   border-radius: 100px;
   border:3px solid #ddd;
   transition:all 1s;
   filter: grayscale(1);
   opacity: 0.5; 
} 
.gallery img:hover { 
   border: 3px solid #69f; 
   filter: grayscale(0);
   opacity: 1; 
   transform:scale(1.1) rotate(5deg);
}

Om alle plaatjes moet dan een <div class=gallery>

<div class="gallery">

<a href="hr/1.jpg">
   <img src="lr/1.jpg" width="200" height="200">
</a>

<!-- Hier de rest van de plaatjes -->

</div>

Meer CSS effecten en animaties staan hier.

Bekijk ook dit overzicht met alle CSS die je op plaatjes kan gebruiken.