Implementing dark images in light design

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 1853 Views - Last Post: 17 November 2017 - 10:31 AM

#1 O'Niel   User is offline

  • D.I.C Regular

Reputation: 14
  • View blog
  • Posts: 415
  • Joined: 13-September 15

Implementing dark images in light design

Posted 10 October 2017 - 02:40 PM

So I have the following problem. I need to make
a website for a company who does the effects on parties etc.

They have light colors (blue, gray, white) as their website-colors.
But the problem is, parties are dark and so pictures of their work
exist out of dark colors.

I want to implement some of those images in their website.
And for sure one on the main-page.

But how do you implement a picture on a page if the colors
in the picture doesn't match the colors of the page/website?


Here a small example:
https://ibb.co/n2uufb

Posted Image
How would I implement that dark picture in the light design
of the website?

Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Implementing dark images in light design

#2 snoopy11   User is offline

  • Engineering ● Software
  • member icon

Reputation: 1467
  • View blog
  • Posts: 4,726
  • Joined: 20-March 10

Re: Implementing dark images in light design

Posted 23 October 2017 - 01:34 AM

Put a blue box around it as a border have whitespace between border and dark photo.

This will blend in between the two contrasts while bring up the darkness of the photo

and dampening the effect of the ultra-bright website design.



Posted Image
Was This Post Helpful? 1
  • +
  • -

#3 ge∅   User is offline

  • D.I.C Lover

Reputation: 193
  • View blog
  • Posts: 1,185
  • Joined: 21-November 13

Re: Implementing dark images in light design

Posted 27 October 2017 - 06:25 AM

This is an excellent advice. Create a transition so that the eye gets accustomed to darkness. This transition can take any shape although I would avoid gradients as a general rule.

Be careful with borders though: your screen is already a rectangle with a border, the browser window is a rectangle with a border, sometimes the website itself is of fixed width and has some sort of outline... that's a lot of borders and rectangles already.
Was This Post Helpful? 1
  • +
  • -

#4 snoopy11   User is offline

  • Engineering ● Software
  • member icon

Reputation: 1467
  • View blog
  • Posts: 4,726
  • Joined: 20-March 10

Re: Implementing dark images in light design

Posted 28 October 2017 - 01:05 AM

Yeah true geo its a lot of rectangles,

but it definitely works as a construct.......
Was This Post Helpful? 1
  • +
  • -

#5 nesir28   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 51
  • Joined: 11-August 17

Re: Implementing dark images in light design

Posted 07 November 2017 - 01:37 PM

Overlay it with a white square set that square to either , color , or lighten i its properties, Then pay around with the opacity of the overlay, You arent limited to using white you can use light blue example , the lighten overlay will add your colour of the overlay to dark areas of the image then add a second overlay to with colour property to make the image have a hue if you need.
Was This Post Helpful? 1
  • +
  • -

#6 O'Niel   User is offline

  • D.I.C Regular

Reputation: 14
  • View blog
  • Posts: 415
  • Joined: 13-September 15

Re: Implementing dark images in light design

Posted 09 November 2017 - 12:50 PM

Thanks for the suggestions all! This is the way I implemented it:
https://jm-productions.be/index.php
Was This Post Helpful? 0
  • +
  • -

#7 ge∅   User is offline

  • D.I.C Lover

Reputation: 193
  • View blog
  • Posts: 1,185
  • Joined: 21-November 13

Re: Implementing dark images in light design

Posted 10 November 2017 - 04:14 AM

Your images are washed out now. It is unfortunate. I would also avoid the shadow and rounded corners which are out of place in your design.

I think nesir's suggestion is the most interesting : just add a translucent border overlaying your images in either white or blue and it will make the transition, literally, between the two spaces. Or apply the blue filter to the whole image and only reveal it when the user hovers it with the mouse. Nice intuition there.

This post has been edited by ge∅: 10 November 2017 - 04:17 AM

Was This Post Helpful? 0
  • +
  • -

#8 nesir28   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 51
  • Joined: 11-August 17

Re: Implementing dark images in light design

Posted 10 November 2017 - 04:51 AM

Posted Image

This is kind of what i was talking about ( though i rushed it a bit I didnt really do a great job, the one layer works more on your lighter areas ( look at the light stream on top being accentuated, and the second layer in combination will hit the dark spot, what you really want is that massive dark spot at the bottom that in itself kills the image colour wise.. I wrote down the setting im pretty sure you could easily find a better combination by playing around.

Remember you dont have to use white to make things lighter , just a lighter variant of the dark colour as an overlay type also works , these are light blue and purple.

This will also help in avoiding that white washed out look.

I hope this helps

This post has been edited by nesir28: 10 November 2017 - 05:01 AM

Was This Post Helpful? 0
  • +
  • -

#9 nesir28   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 51
  • Joined: 11-August 17

Re: Implementing dark images in light design

Posted 10 November 2017 - 05:12 AM

I dont get to do this type of stuff much anymore lol so im enjoying this another tip sometimes its better to duplicate a overlay that make it stronger ( dont ask me why ) have a look at this one. The third layer ending at the left is a duplicate of the first but placed ontop of the other twoPosted Image Ps the image is pixelated cuz i just saced it of your thumb.

This post has been edited by nesir28: 10 November 2017 - 05:14 AM

Was This Post Helpful? 0
  • +
  • -

#10 ge∅   User is offline

  • D.I.C Lover

Reputation: 193
  • View blog
  • Posts: 1,185
  • Joined: 21-November 13

Re: Implementing dark images in light design

Posted 10 November 2017 - 05:15 AM

I barely see anything. If the change is not noticeable, it is a pointless effort. If I have time I will make a suggestion based on what I understood of your reply.
Was This Post Helpful? 1
  • +
  • -

#11 nesir28   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 51
  • Joined: 11-August 17

Re: Implementing dark images in light design

Posted 10 November 2017 - 05:19 AM

Well thats kind of the thing with images less is more... i pushed it up anyway the suggestion was to give op the method of doing this , i didnt do it a hundred percent but he has the means, so imo not so pointless , in the second picture i might of overpushed it , it all comes down to personal preference. This is why i gave him the method of doing it so he can find his own or his clients best taste.

Infact i would do what i did to the thirds image maybe a little more , lighten it slightly more with the overlays, and then take the other two images he has and darken them slightly to make them match a little more. Pushing this image to try match those is "possibly" too much.

This post has been edited by nesir28: 10 November 2017 - 05:28 AM

Was This Post Helpful? 0
  • +
  • -

#12 snoopy11   User is offline

  • Engineering ● Software
  • member icon

Reputation: 1467
  • View blog
  • Posts: 4,726
  • Joined: 20-March 10

Re: Implementing dark images in light design

Posted 11 November 2017 - 09:57 AM

Yes I agree the photo's look washed out now.....pity.. that.
Was This Post Helpful? 0
  • +
  • -

#13 ge∅   User is offline

  • D.I.C Lover

Reputation: 193
  • View blog
  • Posts: 1,185
  • Joined: 21-November 13

Re: Implementing dark images in light design

Posted 12 November 2017 - 06:17 AM

The statement of minimalism is not that you should be timorous, it is that you should remove everything which doesn't contribute significantly to the effect. In minimal art, you can't remove anything. If you did, everything would fall apart because everything is necessary.

I give you an example (which predates minimalism by a century but is emblematic of this)

Posted Image
Kandinsky's "Mit den schwarzen Bogen" (With the black arc) painting

This dude was working with visual dissonance, so basically he attempted to make paintings with things which don't go together. Here you have 3 blocs of abstract stuff and Kandinsky's statement (whether you agree with it or not is a different matter) is that it is a good painting, but only because of the black arc. Removing it would be like removing a safety pin, the 3 blobs would go their own way separately and it would not make a good painting.

The statement of minimalism just pushes this further: "OK, if there are things we can't remove, it means the rest is not necessary, so why keep it?"

Here, since the effect is not even noticeable, if you want to apply the "less is more" rule of thumb, then you should remove it because it doesn't contribute greatly to the visual result.


So, what I would suggest, first of all is to find what would be the ideal blending of the image. The one which would not contradict the design at all

And of course it is this one
Posted Image

- But, geo, sorry, it's embarrassing, but we can't read the image any more.

- No worries! geo's got a solution!

Yes, I'm talking to myself.

Hush.

This website is clearly about projectors, sound and light, and what do you often do with projectors? You project (often animated) shapes, you move them around, etc.

So why not do it here with an animated SVG clipping mask using the shape of the logo ?

Posted Image

of course, when you hover over the image it would display the whole thing.

This is clearly not "less is more", but in this realm of lights and sound, I think "more is less".

Now, if you don't want the sideshow to attract so much attention, or if the technical aspect is too complicated for you, just do a simple frame, but give it a little twist so it is not yet another rectangle

Posted Image

It's just a suggestion

This post has been edited by ge∅: 12 November 2017 - 06:22 AM

Was This Post Helpful? 3
  • +
  • -

#14 nesir28   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 51
  • Joined: 11-August 17

Re: Implementing dark images in light design

Posted 12 November 2017 - 08:17 AM

I cant deny its a really insightful approach and good reading research behind it ( or theory i think its called ) well done mate.
Was This Post Helpful? 0
  • +
  • -

#15 snoopy11   User is offline

  • Engineering ● Software
  • member icon

Reputation: 1467
  • View blog
  • Posts: 4,726
  • Joined: 20-March 10

Re: Implementing dark images in light design

Posted 12 November 2017 - 01:02 PM

He's very gifted nesir28 :)
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2