Classic Shell: Forum

As per the request from one Classic Shell user here, I created a Windows 8 Start button with Microsoft logo colors. Set the button size to 42/44/46 (sizes for 100% DPI) - or whatever size suits you.

I couldn't add the shine effect though as I am not a designer. Getting the shine effect as the original Windows 8.1 button will require an animated Start button: http://www.classicshell.net/tutorials/buttontutorial.html

Edit: If you use a higher DPI, there is a sharper button below appropriate for 125 DPI.

_________________
Links to some general topics:

● Compare Start Menus

● Read the Search box usage guide.

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

Yeah, this is what I wanted . The shinning effect would be awesome there though , but for now, I'm setting this as my start icon. Thank you so much!

What I want is:

1. Same design and size W8 logo, but with official colors: red, green, blue and yellow. Transparent background of course.

2. When you hover the mouse over it, the background is still transparent, the logo has the same colors. The only thing that happens is the glass effect.

3. Once you click it, nothing changes. (well, you could do 2 versions: a original version in which nothing changes after the click, and a second version, in which when you click the start button, it gets a little smaller or something like that, not too exaggerated/extravagant, just a little tweak so we know it's clicked)

This icon should be the the official Windows 8 logo, it's pretty obvious why. And it seems that it is not a requested icon, that is weird.

Nevertheless, check this:

That's a screenshot of my 1920x1080 screen, scaled 125%, with the pixels as they are displayed, as I can see them, just zoomed in with Photoshop (in other words, there's no AA filter or soft filter or anything like that). I've set the button size so THIS PC shortcut is in the same position (size 56), so the button occupy the same space as the original Windows 8 logo.

1. Your icon is not as sharp as the original one. Notice the left and right sides are kinda softened in the last pixel columns.
2. The centered cross is softened too.
3. The dimensions are not the same. You icon is wider (and just wider). BOTH heights of the left side and right side are THE SAME. So your icon is almost the same, just stretched tight.
4. Your icon doesn't start in the same position as the original (distance to the left side). To accomplish this, I have to set the size next to 46-47, and then, both icons have the same distance to the left side of the screen.

These issues are always there, doesn't matter if I set the size 42,44,46,50,55,56,57... So the icon always looks blurry, which is noticeable and undesirable.

Could you fix it? Hope all this info helps you


I've moved the upper original icon to the left so you can compare the width.

AND finally, I just wanted to say thanks again and say that Classic Shell is THE REASON I'm still using Windows 8.1. No good start menu, no Windows 8.1. Thanks to God, I found this software.

Since you use a 125% DPI, this button is getting scaled which is why I think you are seeing scaling/size issues. I don't know if the image scaling algorithm that Classic Shell uses to scale the button (WIC fant) is better than bicubic, or whether it's worse. The original Windows 8.1 logo that you compare it with might be a larger sized image optimized for 125 DPI that Windows 8.1 might be automatically switching to when a higher DPI is being used.

I matched the original button size only at 100% DPI. You could try resizing the image itself using bicubic to suit your DPI and set the button size to 0 (Automatic) in Classic Start Menu's settings.

_________________
Links to some general topics:

● Compare Start Menus

● Read the Search box usage guide.

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

For best results you should not use scaling of the image. It will always produce lower quality results than an image that is built for a particular size.

But as I said, I've tried a lot of different sizes, and every single one had this blurry effect, which means it's an icon's problem. Indeed, if you look at the icon, you'll see this effect. I've tried also a lot of buttons, and they were not blurry, so "scaling" the items is not a problem here. Also, the icon is not the original, cause it's wider. BTW, I'm using it right now, and it's what I want, it's so cool, but you know, I'd like it to be more perfect.

Cheers!

when you say you've tried alot of different sizes, what do you mean?

you had an original icon of "56"? is that 56x56?

and how did you get the different sizes?

did you yourself create 8 different sizes of the icon? or did you find 8 different sizes online?

and if you did make them, how did you get them to different sizes?

and if you downloaded several different sizes, do you know how the other person made them?

alot of people will just re-size a smaller icon to a larger size, using photoshop or something, and resample the image using different algorithms to approximate the original

and programs which automatically rezsize just do the same thing

You need to create your own Icon from Scratch, at 256 x 256, as a PNG.. you can do it as a new layer over that one for precision, and then delete the original.

and then, you need to save a copy in your desired size as you want to use it, and be sure it looks the same at that size, or looks how you want it

This is the only way to have clean, crisp detail at larger & smaller sizes.

most icons you just rip are not 256x256.. but sometimes there are larger versions.. you can search online or look further into your computer for an Icon that is the size you need it

and what do you mean "Glass effect"

each color panel gets a glass panel look over it?

here is one i've made to look like what I think is the same as the original one you wanted above..

and a second one I've made with some more obvious effects

and I've made them both very big,.. so they should be ok to use at any size you want

Here they are:

Thanks! I take the first one, though there's no almost no difference, only if you look at the icon the time you're changing it.

Nevertheless, I'm not agree with you. The icon provided by GauravK has more resolution than my final button, so I'm killing pixels there, I'm downscaling the images, so I don't need any larger resolution icon. I'm still see the blurry border sides, and the center cross is 1 pixel "fatter". It should be just 1 pixel, I'm still getting 2 pixels.

Look closer to your icons:

This is GauravK's:


This is yours:


And this is how it should be in order to look like the original, without blurry border sides:


See? I know it's not finished, but there shouldn't be any intermediate color between yellow and the white background (except the lower and upper sides, that need those intermediate tone to smooth the line), cause that's what is causing the edges look blurry. In your case, your icon have much more resolution, but there's still a small line in the left and right side. The "program" or whatever is reading the image is considering and displaying those lines, and as the minimum pixels it can use is 1, the result is almost the same as the lower resolution icon.

well, it will always do that when you zoom in.. no matter how big you make it, since you are essentially adding information which isnt there.. unless you make a vector graphic, which doesnt have that limitation..

a bit silly for a start menu orb though

if you make it at the size above that you posted, it will still have the same limitation when zooming in..

Mine is made with Photoshop, really the highest level graphics editor you can buy

but even though it was made in the native PSD format, exporting to any format will change how its displayed..

additionally, uploading may have a further effect on the image.. as will your viewer, and the program which uses it, etc

and the size I posted I already WAY bigger than any display on the market can handle for a Start Menu Orb..

the size you posted is not going to display any better.. in fact, the bigger it is, the better chances of it not looking good when you make it smaller

Classic Shell will display the Orb much smaller, and the detail you pointed out will look like a solid line

and making the line too solid at larger sizes may actually cause it to look like a poorly-drawn or uneven line at smaller sizes

if you are trying to make that image your desktop background or something, thats a different story, and the images above will not work

Like I said and Ivo reiterated, you are not using 100% DPI plus not the default size of the button. There WILL be interpolation artefacts taking into account the adjustments necessary for the increased DPI as well as different size of the button (compared to the image dimensions). Instead, if you resize the image using a bitmap editor to suit your DPI where Button size setting is at 0, you may get sharper results. Resizing an image using a bitmap editor is not that hard. Any free editor like Paint.net or Gimp can do it.

I will try to upload a sharper image if I get time to make it.

_________________
Links to some general topics:

● Compare Start Menus

● Read the Search box usage guide.

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

No, no, no, no, first of all, I did that zoom in to show you guys that the image has this semi-tone around each different square, and THAT shouldn't be there, cause that's what's causing the blurry effect. Basically, you have to use JUST 4 colors: Red, Green, Blue and Yellow. The image should only have 1 tone per color. BUT, to smooth the upper and lower sides, you have to use those different tones, so it doesn't look jagged.

Just look at the Microsoft original logo that I put in this post, it has only 1 color, 1 tone: white, but, to smooth the upper and lower sides, it includes some different tones there.

Second, when you zoom in, you're not adding information to the images, it all depends in what program you're using. For example, when I zoomed in the screenshot with photoshop, I didn't add any information to the photo, as you can see. When you zoom in an image, the image is being upscaled, and, if no filter is applied, it should look worse, distorted, not proportional, unless you use an integer zoom: x2 zoom, x3 zoom... There are some programs that add filters when you zoom in the image, so it looks smoother. Look here:


That image is 266x210, and it's perfectly sharp (notice that when I upload the photo, it loses some quality, but the black center line should be squares)

Now, If I zoom in the photo, somewhere between x1 and x2, you get this:


The left photo is zoomed in with Photoshop. Well, this program automatically applies an AA filter or something like that if you're zooming in less than x2, so the photo looks proportional and nice. The right photo is zoomed in with Windows Photo Viewer, which DOES NOT apply any filter. Again, as the server I uploaded the photos applies a filter, it is not as sharp as it should be, but the right photo is sharp as hell, but doesn't look proportional, and it's deformed as the zoom is not an integer.

So, both are working with the same image, both are zooming in the very same image, but Photoshop is "making up" some pixels, and W Photo Viewer no, it's just upscaling, and when you use a decimal zoom in, you get that.

I know the size I posted is not going to fix it, indeed, that's what I'm trying to explain here. I just zoomed in the icon so you can see the semi-tone color in the borders, that shouldn't be there.

To sum up, could you remove those semitone colors?
http://fotos.subefotos.com/4febe4be9094 ... b8504o.png

For better quality:
https://mega.co.nz/#!AUBmka7K!LC25fIYwm ... eFl3qfRJvU

But that make no sense, cause I've tried many different buttons, and all of them looked sharp and nice. AND, your image has MORE pixels than what I need, so the image is being downscaled, so it shouldn't make up pixels, it should remove pixels from the original, so semitones, if they're not in the original image, they shouldn't be in the icon.

Thanks!

If an image is downscaled then the new pixels will contain a mix of multiple original pixels. If they have different color then you will get new colors.

The same applies to the alpha channel. Even if the original image is very sharp and contains only 100% transparent and 100% opaque pixels, when you downscale it you may get pixels with any degree of opacity.

The alternative is to use the "nearest pixel" downscaling algorithm, but it produces very low-quality images. If you are not satisfied with the way the start button resizes the images you must do it yourself in a graphics program and then set the size to "0" in the settings.

That's right.


What? How can they have different colors than the original icon?


I didn't understand this one.



How can I do that? Can I edit with paint the 3 icons and then save it as png?

Thanks!

If you mix 2 pixels with the same color then no matter the ratio in which you mix them you will get the same color. But if you mix 2 different colors you will get new colors. Same for the alpha channel. If you mix one transparent and one opaque pixel you will get a semi-transparent pixel.

Imagine a 100x100 image resized to 50x50. Every new pixel is the average of 4 original pixels. If 2 of those pixels are white and 2 are black the new pixel will be gray (even though the original image doesn't contain gray).

To manually resize an image you need a painting program that understands transparency. Paint doesn't work. It will destroy the transparency. You need a more sophisticated tool like Photoshop, Paint.Net or Gimp.

Oh, OK, but in this case, ALL the pictures provided had 2 different tones of color, and that's the problem, it should be 1 tone. That's why I'm asking if they can repaint the borders so it is not like this:
http://fotos.subefotos.com/0e5b5b26b26a ... 51c0eo.png
http://fotos.subefotos.com/22293df5713c ... 3da3co.png

If they repaint those lines, and I'm still getting this undesired effect, then I have to do a custom size icon.

well, I actually forgot to delete the underlayer, so It was a bit 'fuzzier' than it should have been..

I've "Cleaned up" one of the images to remove most of the extra pixels. but I must say, people have not done this sort of graphic work since the early 90's

and the reason for that is that pixels are square, not diagonal, if they were hexagonal or octagonal I'm sure things would be different, so unless you have no diagonal lines, as in the second set of logos you posted where all the lines are either horizontal or vertical, your lines at any other degree off of the X & Y plane are going to be jagged hard drops..

In fact, the only reason blending of pixels & transparencies ever occurred was for non-X-Y lines..which is really most graphics other than squares or rectangles.

a solution we used to use in the old days was to simply make the image very large so the pixels werent so obvious when zoomed out for viewing..

we used to actually manually figure out how to mix two colors to produce the color thats between them, or more faded, to get any sort of fade or smooth effect at all.. and do it pixel by pixel... Photoshop couldnt do that in the early days.. before AA or Dithering etc.. and all this other cool stuff

these hard edges were never desirable, not even in early line-art work.. and I dont think they are today. In fact, most format filters, like PNG, JPG, etc, also do some smoothing, purposefully.. as do most image viewers.. converters, and about everything else...

like they said above, the best way for you would be to create an image exactly as you want it, at the exact size you want it, then set the size to 0 to that it displays the size you created it..

but this PNG is perfectly clear, as I'm sending it now.

I suppose it would be nice if all there was an option to only smooth out all lines other than horizontal & vertical ones, but there really arent so many of them out there, and most times, you'd want the whole thing smoothed to look more natural.. but, i suppose such a filter would be a nice thing for instances such as these

Thanks again, but as I said, it doesn't matter how big you do your image, I'm killing almost ALL pixels of it.

Now, I'm confused. I've zoomed in your photo and it seems that it has just 1 tone per each color, so semi-tones shouldn't appear, it supposed to be perfect now. But look:





What the freakin' hell for God's sake! Why are those semitone pixels being displayed?

It's a 35 pixels width and 34 pixels height image. I think the best way to accomplish this is to create with the same resolution and size it to 0, so there's no scaling. The Windows 8 original logo's cross is 1 pixel fat, and I'd like it to be like that, just 1 pixel row and 1 pixel column.

By the way, the diagonal lines were fine as they were, you didn't have to change them. That's exactly what I've explained before, that diagonal lines must have like 4 or 5 semitones, so it doesn't look jagged.

Thanks again dude!

I think the best solution is to use solid colors in the RGB channels (even make them much bigger than necessary), and then give it shape by changing the alpha channel. There should not be semitones on the RGB side. That's because you don't know what the background is going to be, and you can't pre-blend it. Still, when the image is resized you will get pixels that are not exact. There is no way around that.

well, I showed you a screenshot of maximum zoom of what I made.. on 100% transparent background, RGB mode, PNG, and it had no smoothing..

but what you'll find is that most programs, viewers, and about anything that touches an image does some sort of rescanning and renders/interprets the image with an algorithm to smooth the image... even if it doesnt actually change the image itself.. just in the way it displays it..

You could try some of the Windows Live image tools, or maybe even MS Office Picture manager, if you have an older version of office lying around.. but that wont do you much good if whatever you're displaying it with displays a smoothed image during interpretation.

anyway, I think we can safely say its something on your end.. as those edges were block-erased the old fashioned way, at the pixel level.

I recommend Paint.net for creating a new 35 x 34 image .. its easy to learn and has a lot of functionality for most basic graphic art work. just create a new image thats 35x34, open your current Icon for reference, place a layer on top of it, and draw upon the new layer , sampling colors from your original as you go.

@rambomhtri, try this button. I think at 125% DPI and size 0, it should exactly match the Windows 8.1 original button dimensions and sharpness. That said, what I guessed above was right. Windows 8.1 internally switches to a different image when you increase the DPI, it doesn't scale the image. I suspect it has Start button images in its DLLs all the way up to 500% DPI. Even at smaller sizes/100% DPI it doesn't downscale a larger image. Unscaled image=higher quality if you want pixel perfect sharpness.

_________________
Links to some general topics:

● Compare Start Menus

● Read the Search box usage guide.

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

at that size, you cant tell at all about what one pixel might have looked like back when it was much larger.. and Honestly, I dont even believe you can tell the difference between them

unless your face is right on top of your screen or something..

I really dont get what you are after.. are you saying its actually an eye sore? that you can tell it doesnt look like the original?

please post some screenshots between your win 8.1 original icon, and one of the better ones above in classic shell..

I'd like to see the difference for myself

YEEEEEEEEEEEEEEEEEAH, I love you GauravK, hell yeah, now it is sharp as hell, damn right, xD.

There's so much myth about high dpi screens. I'm telling you, I've been using for 10 years a laptop with a 4:3 1366x768 15.4" screen. Just 5 months ago I bought a Lenovo with a Full HD display 16:9 1920x1080, and dude, there's a HUGE difference, HUGE. You can TOTALLY tell if there one more row of pixels. I really think that the best 15.6" resolution is 8K, where then you shouldn't be able to see any pixel at all.

Nevertheless, I've noticed something weird in the image, lol. I'm posting a new message.

Here you have the screenshots:

Lol, you guys are gonna kill me, but look this, I just don't understand anything, xD. BTW, believe me or not, I've discovered this change of color of 1 pixel column cause the cross looked a little weird between the red and green squares. If I look closer, I notice that it's all over the cross.

Ah I forgot to delete the pixels taken by the 1 pixel cross and make them transparent. That is easy to fix. Here is the fixed version. Btw, I spent quite a lot of time on this image.

_________________
Links to some general topics:

● Compare Start Menus

● Read the Search box usage guide.

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

Finally, sharp and nice. Thank you so much for your effort, dude.

One more thing, I've compared the transparent background of the 2 icons, original and your fixed one, and when I put the original logo, the background is slightly darker, only noticeable if you're zooming in the image and comparing pixels that are joined, just like my last message. Of course, I don't give nothing about this, but I just wanna know why is this happening. Thanks again!

wow...

and I thought I had some OCD

XD, lol, I don't have that, I just wanna know why that happens, just that. Cause if the icon is totally transparent, it makes no sense that the color is different. It's just curiosity.

lol indeed it appears so.




Have got no idea why whatever you said is happening. The only difference between the two images is that the area of the cross is transparent in the 2nd one.

_________________
Links to some general topics:

● Compare Start Menus

● Read the Search box usage guide.

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

By original I meant Windows 8.1 white official logo compared to your fixed last version.

No idea about that either why the background shade is different. Maybe it's because of the different way in which a custom Start button is rendered.

_________________
Links to some general topics:

● Compare Start Menus

● Read the Search box usage guide.

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

hi i got it but its to big for my taskbar ! can you make a smaller one

There's a option to scale the Start Button, called "Button Size".

_________________
TILES WOOOOOO