It is currently Thu Mar 28, 2024 8:34 am

All times are UTC - 8 hours [ DST ]




Post new topic Reply to topic  [ 23 posts ] 
Author Message
PostPosted: Mon Jul 29, 2013 4:21 pm 
Offline

Joined: Fri Mar 22, 2013 12:41 am
Posts: 35
*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 79784 times ]
colour template1_1.png
colour template1_1.png [ 369 Bytes | Viewed 79784 times ]
Win81.png
Win81.png [ 721 Bytes | Viewed 79784 times ]


Last edited by webulator70 on Tue Jul 30, 2013 8:44 pm, edited 6 times in total.
Top
 Profile  
Reply with quote  
PostPosted: Mon Jul 29, 2013 5:32 pm 
Offline

Joined: Fri Mar 22, 2013 12:41 am
Posts: 35
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 79784 times ]
Top
 Profile  
Reply with quote  
PostPosted: Tue Jul 30, 2013 4:22 am 
Offline

Joined: Sat Jun 29, 2013 8:16 am
Posts: 16
1.1 sometime got problem


Attachments:
99.jpg
99.jpg [ 96.61 KiB | Viewed 79555 times ]
88.jpg
88.jpg [ 347.78 KiB | Viewed 79711 times ]


Last edited by glitter3 on Tue Jul 30, 2013 12:10 pm, edited 2 times in total.
Top
 Profile  
Reply with quote  
PostPosted: Tue Jul 30, 2013 4:24 am 
Offline

Joined: Sat Jun 29, 2013 8:16 am
Posts: 16
(40+40+40) *50 not working


Attachments:
10.png
10.png [ 71.89 KiB | Viewed 79546 times ]


Last edited by glitter3 on Tue Jul 30, 2013 5:53 am, edited 1 time in total.
Top
 Profile  
Reply with quote  
PostPosted: Tue Jul 30, 2013 4:50 am 
Offline

Joined: Sat Jun 29, 2013 8:16 am
Posts: 16
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


Last edited by glitter3 on Tue Jul 30, 2013 12:11 pm, edited 2 times in total.
Top
 Profile  
Reply with quote  
PostPosted: Tue Jul 30, 2013 4:51 am 
Offline

Joined: Sat Jun 29, 2013 8:16 am
Posts: 16
39+39+39 *50 version


Attachments:
Default 8 Start(39+39+39).png
Default 8 Start(39+39+39).png [ 921 Bytes | Viewed 79727 times ]
Top
 Profile  
Reply with quote  
PostPosted: Tue Jul 30, 2013 7:10 pm 
Offline

Joined: Fri Mar 22, 2013 12:41 am
Posts: 35
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?


Top
 Profile  
Reply with quote  
PostPosted: Tue Jul 30, 2013 7:15 pm 
Offline

Joined: Fri Mar 22, 2013 12:41 am
Posts: 35
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 79567 times ]
Top
 Profile  
Reply with quote  
PostPosted: Tue Jul 30, 2013 8:39 pm 
Offline

Joined: Fri Mar 22, 2013 12:41 am
Posts: 35
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


Top
 Profile  
Reply with quote  
PostPosted: Wed Jul 31, 2013 6:33 am 
Offline
User avatar

Joined: Sun Jan 06, 2013 1:44 pm
Posts: 1996
what about users who don't use 100% scaling on their pc? :P


Top
 Profile  
Reply with quote  
PostPosted: Wed Jul 31, 2013 12:31 pm 
Offline

Joined: Fri Mar 22, 2013 12:41 am
Posts: 35
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.


Last edited by webulator70 on Thu Aug 01, 2013 7:11 pm, edited 1 time in total.

Top
 Profile  
Reply with quote  
PostPosted: Thu Aug 01, 2013 5:17 am 
Offline

Joined: Fri Jul 26, 2013 12:37 pm
Posts: 9
you can use the start button i have uploaded. it’s the 8.1start button.


Top
 Profile  
Reply with quote  
PostPosted: Mon Aug 05, 2013 3:08 pm 
Offline

Joined: Mon Aug 05, 2013 3:07 pm
Posts: 1
pc10282013 wrote:
you can use the start button i have uploaded. it’s the 8.1start button.
Thanks.


Top
 Profile  
Reply with quote  
PostPosted: Mon Aug 05, 2013 8:45 pm 
Offline
Site Admin
User avatar

Joined: Wed Jan 02, 2013 11:38 pm
Posts: 5333
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.


Top
 Profile  
Reply with quote  
PostPosted: Tue Aug 06, 2013 10:37 am 
Offline

Joined: Sat Jun 29, 2013 8:16 am
Posts: 16
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 78409 times ]
Top
 Profile  
Reply with quote  
PostPosted: Tue Aug 06, 2013 10:40 am 
Offline

Joined: Sat Jun 29, 2013 8:16 am
Posts: 16
may be option to enable secondary button


Top
 Profile  
Reply with quote  
PostPosted: Tue Aug 06, 2013 7:00 pm 
Offline
User avatar

Joined: Sun Jan 06, 2013 1:44 pm
Posts: 1996
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


Top
 Profile  
Reply with quote  
PostPosted: Mon Oct 07, 2013 11:36 am 
Offline
User avatar

Joined: Thu Jan 03, 2013 12:38 am
Posts: 5374
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.

_________________
Links to some general topics:

Compare Start Menus

Read the Search box usage guide.

I am a Windows enthusiast and helped a little with Classic Shell's testing and usability/UX feedback.


Top
 Profile  
Reply with quote  
PostPosted: Wed Oct 16, 2013 4:51 am 
Offline

Joined: Fri Mar 22, 2013 12:41 am
Posts: 35
Thanks. Glad you like it. :)


Top
 Profile  
Reply with quote  
PostPosted: Thu Jan 29, 2015 8:22 am 
Offline

Joined: Thu Jan 29, 2015 8:20 am
Posts: 1
Thanks.


Top
 Profile  
Reply with quote  
PostPosted: Sat Jan 31, 2015 9:46 pm 
Offline

Joined: Sun Jul 07, 2013 6:53 pm
Posts: 38
Let me perfect it a white windows 8.1 button that is for classic mode for programs such as classictheme.exe etc


Top
 Profile  
Reply with quote  
PostPosted: Mon Mar 09, 2015 8:09 am 
Offline

Joined: Mon Mar 09, 2015 7:59 am
Posts: 2
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?


Top
 Profile  
Reply with quote  
PostPosted: Mon Mar 09, 2015 8:10 am 
Offline
Site Admin
User avatar

Joined: Wed Jan 02, 2013 11:38 pm
Posts: 5333
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.


Top
 Profile  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 23 posts ] 

All times are UTC - 8 hours [ DST ]


Who is online

Users browsing this forum: No registered users and 31 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group, Almsamim WYSIWYG Classic Shell © 2010-2016, Ivo Beltchev.
All right reserved.