HOME | DD

SamuDroid β€” Steam - Windows 10 Fluent Design System Concept

#steam #projectneon #windows10 #fluentdesignsystem #concept #userinterface
Published: 2017-07-31 18:27:46 +0000 UTC; Views: 9022; Favourites: 43; Downloads: 0
Redirect to original
Description Hello! This time I want to show you my Steam concept, with some Fluent Design elements! I hope you like this!
Related content
Comments: 21

artexjay [2019-02-04 23:03:09 +0000 UTC]

This needs to be a thing

πŸ‘: 1 ⏩: 0

SL4RKGG [2018-07-07 17:01:37 +0000 UTC]

its beautifulΒ 

πŸ‘: 2 ⏩: 0

LukeMageSlayer [2017-11-12 15:11:30 +0000 UTC]

i want this theme

πŸ‘: 2 ⏩: 0

CyanRooper [2017-08-24 23:35:10 +0000 UTC]

really beauty! how you make the acrylic? the noise + blur?

πŸ‘: 1 ⏩: 1

SamuDroid In reply to CyanRooper [2017-08-26 13:41:38 +0000 UTC]

I Follow the Microsoft acrylic "recipe": Blurred background + exclusion blend + Color tint (blue in this case) + noise

πŸ‘: 1 ⏩: 1

CyanRooper In reply to SamuDroid [2017-08-28 18:12:34 +0000 UTC]

but, you make this in Adobe XD or Photoshop?

πŸ‘: 0 ⏩: 1

SamuDroid In reply to CyanRooper [2017-08-31 07:25:15 +0000 UTC]

With Photoshop

πŸ‘: 0 ⏩: 1

CyanRooper In reply to SamuDroid [2017-08-31 07:29:21 +0000 UTC]

Ohhh... Now I understand... Great job!

πŸ‘: 0 ⏩: 1

SamuDroid In reply to CyanRooper [2017-08-31 07:37:53 +0000 UTC]

If you want to emulate it I can write for you a little guide

πŸ‘: 1 ⏩: 1

CyanRooper In reply to SamuDroid [2017-08-31 07:42:16 +0000 UTC]

That would be very useful!

πŸ‘: 0 ⏩: 1

SamuDroid In reply to CyanRooper [2017-08-31 08:08:16 +0000 UTC]

- Create a rectangle (it'll be our "sidebar", in this case, 720*320px is my standard resolution)
- Apply a 30px gaussian blur to your background (top menu: Filter - Blur - Gaussian Blur) and place it above the rectangle.
- Right click the blurred background from the layers page and choose "create clipping mask".
- Create an exact copy of the rectangle, place it on above all the layers and give it a white color, give a 10% opacity and from the blending modes, select "Exclusion".
- Make a third rectangle, place it on the top and give an opacity of 60% or 80%, and blending mode "normal"; give it the color you want.
- The last layer is the "noise". To do it, just search on Google "Photoshop noise", download and import it on your project and give an opacity of 2%.

πŸ‘: 1 ⏩: 2

CyanRooper In reply to SamuDroid [2017-08-31 21:32:49 +0000 UTC]

Your guide was very helpful! Thank you!
Β Β 

πŸ‘: 0 ⏩: 1

SamuDroid In reply to CyanRooper [2017-08-31 21:34:37 +0000 UTC]

Glad I helped you

πŸ‘: 0 ⏩: 1

CyanRooper In reply to SamuDroid [2017-08-31 21:35:43 +0000 UTC]

I hope to see more of your concepts!Β Β Β 

πŸ‘: 0 ⏩: 1

SamuDroid In reply to CyanRooper [2017-09-01 19:20:18 +0000 UTC]

I only have to get inspiration

πŸ‘: 0 ⏩: 0

CyanRooper In reply to SamuDroid [2017-08-31 16:52:30 +0000 UTC]

πŸŽŠπŸŽ‰πŸŽŠπŸŽ‰πŸŽŠπŸŽ‰πŸŽŠ Thanks you! I will try it

πŸ‘: 0 ⏩: 0

jalexis1994 [2017-08-10 23:00:30 +0000 UTC]

great, is there any way to make it real??

πŸ‘: 0 ⏩: 1

R3d-Gh0st-o-o In reply to jalexis1994 [2017-09-24 17:44:23 +0000 UTC]

If valve take this design into consideration, that would be great actually.

πŸ‘: 1 ⏩: 1

artexjay In reply to R3d-Gh0st-o-o [2019-02-04 23:03:45 +0000 UTC]

They definetly should, the current design of Steam leaves much to be desired.

πŸ‘: 0 ⏩: 1

R3d-Gh0st-o-o In reply to artexjay [2019-03-17 10:49:57 +0000 UTC]

Indeed, plus they barely changed the look of Steam.
It honestly look dated.

πŸ‘: 1 ⏩: 0

cookies2011 [2017-08-01 00:19:20 +0000 UTC]

Looks nice.

πŸ‘: 0 ⏩: 0