Foto met kleine dots - Hoe maken

[Vincentje]

Ik ben bezig met een eigen website waar ik ook graag een foto met kleine puntjes zou invoeren waarvan op onderstaande link een voorbeeld:

http://www.bakkerijmathiasenjasmine.be/

Iemand een idee hoe ze dat doen (photoshop?)

Alvast bedankt

[LesC]

Re: Foto met kleine dots - Hoe maken

Zelf nog nooit geprobeerd, maar snel even voor jou ge-google-d. Dit zijn maar twee links, maar je krijgt er veel meer als je zoekt op "dotted photo effect photoshop":

http://www.photoshopessentials.com/photo-effects/color-dots/

https://www.youtube.com/watch?v=usDDwwraaRk

[brunov]

Re: Foto met kleine dots - Hoe maken

Ik heb ook even gezocht en heb deze manier getest om soortgelijk resultaat te krijgen: https://colorlabsproject.com/tutoria...-in-photoshop/

Maar concreet bij deze site hebben ze het volledig met css (cascading style sheets) gedaan. De foto's zelf zijn normaal, bv: http://www.bakkerijmathiasenjasmine....vframboos2.jpg

De truck is om via css er een afbeelding van een raster over te leggen. Mocht je het "raster" willen aanpassen, dan moet je enkel de afbeelding van het raster aanpassen en niet alle individuele foto's.
In dit geval is het raster een afbeelding van 2px op 2px waarvan één pixel grijs is: http://www.bakkerijmathiasenjasmine.be/images/dot.png

Ik probeer de werking uit te leggen...

In de webpagina wordt de banner met foto's gedefiniëerd:

<div id="fpbanner">
	<ul class="slideme">
		<li style="background-image:url(/files/ban/bavframboos2.jpg);">
		</li>
		<li style="background-image:url(/files/ban/choc1.jpg);">
		</li>
		<li style="background-image:url(/files/ban/koeken2.jpg);">
		</li>
		<li style="background-image:url(/files/ban/fruittrio1.jpg);">
		</li>
		<li style="background-image:url(/files/ban/la2.jpg);">
		</li>
		<li style="background-image:url(/files/ban/brood1.jpg);">
		</li>
	</ul>
	<div id="fpoverlay">
	</div>
	<div id="slidedown">
		<a href="javascript:;"></a>
	</div>
</div>

In de style sheets wordt het uiterlijk vastgelegd:

#fpbanner {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 400
}
#fpbanner #fpoverlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(/images/dot.png);
	z-index: 401
}

Hierbij wordt de afbeelding van het raster (dot.png) over de afbeelding gelegd. De z-index bepaalt de volgorde van de lagen, het hoogste nummer komt bovenaan. De foto heeft index 400, het raster heeft 401 en komt dus over de afbeelding te liggen.

Heel simpel: geen foto's aan te passen, geen Flash of andere video maken en bij een nieuwe foto volstaat het om een extra regel toe te voegen (regel begint met <li... en eindigt met </li>)

De wisseling van de foto's wordt gedaan met javascript.

[Vincentje]

Re: Foto met kleine dots - Hoe maken

Mannen hartelijk dank voor jullie hulp.
Ik ga dat even met de css code proberen is inderdaad niet zo moeilijk.

[Empe]

Re: Foto met kleine dots - Hoe maken

é Brunov

Bijzonder goed uit de doeken gedaan !

[brunov]

Re: Foto met kleine dots - Hoe maken

Mercie!
Ontleden gaat me nog altijd beter af dan zelf schrijven...

[kawaracer]

Re: Foto met kleine dots - Hoe maken

als je de foto's zelf wil omzetten dan moet je eens zoeken naar technieken om het om te zetten naar dots voor zeefdruk, zijn gaan wel eerst naar zwartwit en met erg groot contrast maar met kleuren moet dit ook lukken denk ik. in photoshop omzetten naar bitmap (Image -> Mode -> Bitmap) linkje

Blijkbaar gaat dit niet met kleur beelden