Classic Shell
http://classicshell.net/forum/

*Almost* Pixel perfect Win8.1 Button
http://classicshell.net/forum/viewtopic.php?f=18&t=1015		 Page 1 of 1
Author:  webulator70 [ Mon Jul 29, 2013 4:21 pm ]
Post subject:  *Almost* Pixel perfect Win8.1 Button
*The hover and click states are ok, the normal state is not quite 1:1, (sorry.) See post #9 for details*

Updated to (mostly) 1:1, it's now 1:1 exactly like 8.1s start button for the click and hover states and aside from tiny aliasing differences, just about so for the normal state.

I got Glitter3's accurate Win 8.1 button and got to thinking how to make one that is completely pixel accurate at all stages.

I wanted to screenshot all 3 states to get the right colours for the button hover and click highlights. Taking a screenshot for the hover and click states required a timed screenshot program since the official button undoes these states when you press print screen. I then used Neopaint to make transparency masks for the normal state. I chose the grey colour you see because it is the default colour that windows uses when you select using wallpaper as your start screen background, also because it is a neutral colour that should go with whatever colour scheme you set windows to. I might put up more colours later.

I also had to add one hight of pixel to each button state, it appears there is a hidden pixel row that goes under the screen, I am not sure whether this is CS or windows itself doing this. If anyone wants to verify, Try recolouring the the bottom line in every state of this start button icon and loading it up. You wont see this extra line unless you re-size the start bar to be two rows or more. (I am using CS 3.9beta on win 8.1.)

It should be completely aligned with the start screens button.

I've now made colour and transparency templates. This will make things easier for anyone that wants to make their own colour variations. Using the alpha template alone also works as a wildcard for any colour.

Attachments:
alpha template1_1.png
alpha template1_1.png [ 649 Bytes | Viewed 80221 times ]
colour template1_1.png
colour template1_1.png [ 369 Bytes | Viewed 80221 times ]
Win81.png
Win81.png [ 721 Bytes | Viewed 80221 times ]
Author:  webulator70 [ Mon Jul 29, 2013 5:32 pm ]
Post subject:  Re: Pixel perfect Win8.1 Button
Steps to create your own colours:

1. Open the colour template in a graphics editor that supports transparent png files. (Neopaint[shareware] is my favorite, Paint.net[free] works too.)
2. Flood fill the blue portion to whatever colour you want.
3. Use paste from file and select the alpha template.

I've added the default light blue colour done via this method.

Attachments:
Default 8 Start.png
Default 8 Start.png [ 733 Bytes | Viewed 80221 times ]
Author:  glitter3 [ Tue Jul 30, 2013 4:22 am ]
Post subject:  Re: Pixel perfect Win8.1 Button
1.1 sometime got problem

Attachments:
99.jpg
99.jpg [ 96.61 KiB | Viewed 79992 times ]
88.jpg
88.jpg [ 347.78 KiB | Viewed 80148 times ]
Author:  glitter3 [ Tue Jul 30, 2013 4:24 am ]
Post subject:  Re: Pixel perfect Win8.1 Button
(40+40+40) *50 not working

Attachments:
10.png
10.png [ 71.89 KiB | Viewed 79983 times ]
Author:  glitter3 [ Tue Jul 30, 2013 4:50 am ]
Post subject:  Re: Pixel perfect Win8.1 Button
41 = 1 pixel overlap

40 = windows logo wrong position with 1 pixel border

39 = only 1 pixel border

Attachments:
89.jpg [248.55 KiB]
Downloaded 18253 times
Author:  glitter3 [ Tue Jul 30, 2013 4:51 am ]
Post subject:  Re: Pixel perfect Win8.1 Button
39+39+39 *50 version

Attachments:
Default 8 Start(39+39+39).png
Default 8 Start(39+39+39).png [ 921 Bytes | Viewed 80164 times ]
Author:  webulator70 [ Tue Jul 30, 2013 7:10 pm ]
Post subject:  Re: Pixel perfect Win8.1 Button
Hrm... on my system they align with the bar, not one pixel over or under. If I allow the Windows 8.1 button, and hover the corner, it appears exactly the same as the my CS button. Stock Win 8.1 64bit start bar settings and CS 3.90 on Windows 7 mode.

Also aligns on VMware just fine.

Your button sizes are set to 0?
Author:  webulator70 [ Tue Jul 30, 2013 7:15 pm ]
Post subject:  Re: Pixel perfect Win8.1 Button
Just tried the one I posted again, downloaded from this page, It aligns fine and no 1 extra pixel row up top. :/

Tried the 39+39+39 one, its one pixel row too low.

I understand the hight of the bar is 40 but using a 40+40+40 png yeilds miss alignments with the real start button. If you enable the bottom left corner and hover over CS's button and then move to the corner, you can see how a 40 sized one miss aligns by one pixel, that's why I made it 41.

The bar actually seems to be 41 pixels tall with a 1px row hidden off the bottom of the screen. Color the bottom line of each button a noticeable colour like pink. You won't see it if the bar is the standard 1x size, if you double the bar height, you will see it.

At least that's how it all goes down on my computer.

If need be, I'll make a zoomed in video to show what I'm talking about. What is the easiest way to make a zoomed in gif that comes out fairly smooth, not grainy and keeps the aspect ratios correct?

The attached picture is the my start button (41+41+41) on the left and the real one on the right, both hover states. (I'm sort of sick of the whole blue thing lately.)

Attachments:
Screenshot (9).png
Screenshot (9).png [ 2.43 KiB | Viewed 80004 times ]
Author:  webulator70 [ Tue Jul 30, 2013 8:39 pm ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
I just discovered that the white, normal state is slightly different. The anti aliasing on the real one has a slightly darker outline. I sourced mine from a start bar that was turned completely black against a black background, with these settings it should indeed look 1.1 but I am unsure of how to get it any better then it is. Maybe some colour/alpha math with a screen of the real one would get me the exact but its just the anti aliasing, not the logo itself. The Hover and clicked states should still be completely 1:1. The title has been changed accordingly.

I might give it some time and see if I can get it to match but I also might not. :P
Author:  Jcee [ Wed Jul 31, 2013 6:33 am ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
what about users who don't use 100% scaling on their pc? :P
Author:  webulator70 [ Wed Jul 31, 2013 12:31 pm ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
Touché. I'm hoping that CS will have an option to just not draw anything over the original icon, leaving it intact, though I have no idea how easy or hard that would be.
Author:  pc10282013 [ Thu Aug 01, 2013 5:17 am ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
you can use the start button i have uploaded. it’s the 8.1start button.
Author:  nabilalk [ Mon Aug 05, 2013 3:08 pm ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
pc10282013 wrote:
you can use the start button i have uploaded. it’s the 8.1start button.
Thanks.
Author:  Ivo [ Mon Aug 05, 2013 8:45 pm ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
I am looking into ways for using the built-in button for Windows 8.1, and then it will be exactly perfect :) Of course if you want the same button on Windows 7 or 8, you will need a custom image like this one.
Author:  glitter3 [ Tue Aug 06, 2013 10:37 am ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
Ivo wrote:
I am looking into ways for using the built-in button for Windows 8.1, and then it will be exactly perfect :) Of course if you want the same button on Windows 7 or 8, you will need a custom image like this one.


can you make classic shell button Next to native button



native button >>>> start screen

Classic shell button >>> startmenu

it will look like this 2 buttons

Attachments:
cs.jpg
cs.jpg [ 51.44 KiB | Viewed 78846 times ]
Author:  glitter3 [ Tue Aug 06, 2013 10:40 am ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
may be option to enable secondary button
Author:  Jcee [ Tue Aug 06, 2013 7:00 pm ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
if your looking for a keyboardless way to open the start screen, you can remove the disable hotcorners option, then clicking the bottom left pixel on your screen will open the metro UI
Author:  Gaurav [ Mon Oct 07, 2013 11:36 am ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
Nice button webulator70. I like your alpha template. :) The fact that it follows the Aero/Taskbar color due to the transparency is very nice instead of the Metro accent color.
Author:  webulator70 [ Wed Oct 16, 2013 4:51 am ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
Thanks. Glad you like it. :)
Author:  aasime [ Thu Jan 29, 2015 8:22 am ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
Thanks.
Author:  powerplayer [ Sat Jan 31, 2015 9:46 pm ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
Let me perfect it a white windows 8.1 button that is for classic mode for programs such as classictheme.exe etc
Author:  gjgigol [ Mon Mar 09, 2015 8:09 am ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
webulator70 wrote:
You wont see this extra line unless you re-size the start bar to be two rows or more. (I am using CS 3.9beta on win 8.1.)


How do you make the taskbar thigher than one row?
Author:  Ivo [ Mon Mar 09, 2015 8:10 am ]
Post subject:  Re: *Almost* Pixel perfect Win8.1 Button
You first need to unlock the taskbar. Right-click on it and make sure "Lock the taskbar" is unchecked. Then you grab it by the top edge and drag up to make it taller.
Page 1 of 1 All times are UTC - 8 hours [ DST ]
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/