March 29th, 2010
Make Your Own Toolbar Button Glyphs
Things you will need: Photoshop
Now that the new ToolbarButton style has landed on Trunk I put together some templates in Photoshop and posted them on the SVN server. These templates will allow someone to make their own glyphs with only a new vector graphic.
The file itself is pretty straight forward. It has a layer named “Base” containing a Vector Mask and some Layer Effects. The “Background(s)” group is for previewing the glyph and should be turned off before saving.
The canvas size is set at 18×18 pixels with the actual glyph taking up between 14×14 and 16×16 with the outer region used for a slight glow and etch. This is an attempt to account for variable backgrounds (e.g. Personas or Glass).
Just select the Mask, grab your Pen or Shape tool and start drawing. You will have to draw in the present Vector Mask and delete its current contents. Apparently you can’t have an empty Vector Mask. You can also copy and paste from Illustrator.
If you lose your layer you can always just create a new Vector Mask on a layer, Load the Win7-Glyph-Styles.asl file in the Styles palette and apply the “Win7GlyphBase” style to your new layer.
You can make various shapes and the Layer Effects do most of the work.
Once you are finished just toggle the visibility of the “Backgrounds(s)” group and select “Save for Web(& Devices)” from the “File” menu to save a transparent PNG of your new button glyph.
You could even resize your image and it will scale nicely with a few Layer Effects tweaks.
Or change the color.
Tags: SVN Templates Theme Windows
This entry was posted on Monday, March 29th, 2010 at 2:59 pm and is filed under Firefox. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.
Can you give download link for FF with this GUI for windows. I’ve downloaded this http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/firefox-3.7a4pre.en-US.win32.installer.exe
but GUI doesn’t look like on pics above.
@Budda40: The work on implementing the design has only recently begun. At present the only notable things that have landed is the new toolbar button style and glass. Work on everything else is in progress.
Good luck? wish you’ll finish new GUI very soon.
Thanks! Me too!
Can you post when we can expect some milestones in the progress of the UI, I realy like the mock-ups, and the almost same interface works perfectly in Opera, but I can’t miss the add-ons, and stability
We hope to have most of the major theme work for Windows more or less in place by late-May/early-June.
https://wiki.mozilla.org/Firefox/Projects/New_Theme#Timeline_.2F_Milestones
Thank you for this mock-up of the Adblock Plus icon
As it is now, I am rather struggling with supporting different icon sizes. Until now icon sizes were pretty standardized – 24×24 for large icons, 16×16 for small icons, all custom themes use these sizes as well (or at least can deal with them). Only problem was SeaMonkey Mail which uses 32×32 icons but only in the Modern theme. That problem I could ignore. Now all the sudden the “large” icons in Minefield are pretty much the same as the small icons and I’m pretty certain that this will not be consistent across themes. I need some clever way to detect which icon size the theme expects – always using the same size or using SVG doesn’t look great…
Hey Stephen I was messing with your template a little bit. I love it and had fun! Check out my little pack! http://timrfox.deviantart.com/art/Firefox-3-7-Icon-Pack-1-158898157
@Tim: That’s awesome and quick work! Thanks for sharing the results.
The theme is looking awesome, Stephen! Can’t wait. And really hope you keep this style for the toolbar buttons too.
Is that Aero Glass your using in these mockups from an actual window glass theme? I tried getting mine like your settings, but am unable to do so. I like how it blurs out the background pretty much.
Also what background is it that your using on these images?
Weird saying this but @Kurt. You can play with the transparency settings in the control panel where you select the color glass you want to use.
@Kurt (supernova_00) (also weird saying this =P), I realize that, but nothing seems to match anything close to what these mockups show. I’ve tried to mess with the control panel quite a bit.
If Stephan did do these using the Windows theme, hopefully someone can post a SS of their Control Panel settings.
Why are you promoting the usage of the proprietary program Photoshop, to make icons for a Free Software web browser? You can do the same thing in GIMP, or better yet a Vector Graphics program, like Inkscape.
For the sake of users’ freedom, please do not suggest using any proprietary software. Mozilla was founded on Free Software principles, you do not need to help destroy them.
InaTux your being a little too critical… He’s showing us how he made them. Besides Photoshop is the most commonly used.
@Stephen, is this mockup real? http://newdefault.tumblr.com/post/491792968
It looks nice, but I don’t know if this will be usefull, because I think it will be very often used.
Stephen, I saw the interactive mockups you put up, I think the nav-bar button hover effect looks better on Style 5, It has a more of a Windows 7 look and feel, the current one look too dark.
@Kurt
“He’s showing us how he made them.”
He’s also suggesting how to reproduce. And he shouldn’t be using Photoshop for his work on Firefox.
“Besides Photoshop is the most commonly used.”
That’s like saying “Just design your web site for Internet Explorer, it’s the most commonly used.”
@Max
What ‘interactive model’?
@InaTux
Since this is some professional work for a world class browser he should use the best.. and supporting standards and ACID3 results is the best.. You wouldn’t want a sketchy looking browser with a ‘GIMP made’ sign and a smiley face on it! Would you?!
tweeny, hopefully that new mockup with the copy/paste buttons isn’t real. That looks ugly and ruins the simplicity feel to the new theme.
On the contrary, I like it!
And just to say it (have no there place to do) How about making the addons, downloads, history and all other dialog boxes you’re going to fuse into tabs making them app-tabs? UNSPOOFABLE!
Just retain the ability to have them in a standalone window as a dialog box NOT as a tab..
@Medo, it was just some alternative buttons for the navbar.
And after installing the latest build I see that the hover effects that I mentioned are already added. Looks good. Can’t wait till the theme is complete, and I’m still hoping the the animation for the tabs will be done as well.
[...] concludere un articolo che spiega come creare dei bottoni personalizzati per la barra degli strumenti di [...]
That’s really cool! I’m loving the new GUI, you’re my inspiration as once I finish college I want to do what you do — and hopefully just as good!
A few things I was thinking about outside of the Firefox window.
1a) Will there be any Windows 7 jump list integration (at least I think it’s called that, the thing with the arrow in the start bar that gives you various program options)? Even non-native Windows 7 programs seem to work well with it, like the CS4 suite. The only “recently visited” pages I get in the list are ones that sit on me locally.
1b) I’m sure there will, but could I opt-in for a suggestion to have Profiles as one of the sections? It’s very tedious to manage profiles in Firefox, and I think a big bulk of the FF user’s are web-devs who want two profiles, one for browsing and one for development work, and even with some add-ons and doing CMD commands, it’s more tedious than it has to be.
2) Anything being done to the progress bar?
Keep up the great work, and I’m stoked for this new release. I apologize if some of my questions don’t fall into your scope, but it is design related, so I figured it was worth a shot.
@Medo
“Since this is some professional work for a world class browser he should use the best..”
Being “the best” doesn’t justify being proprietary. Firefox was built on this principle.
“and supporting standards and ACID3 results is the best..”
I don’t see how Stephen Horlander’s Photoshop vector graphics have to do with Acid3 test results. Or how any vector graphics have to do with Acid3 test results. And Photoshop doesn’t produce HTML5 standard vector graphics, but that doesn’t matter anyway.
“You wouldn’t want a sketchy looking browser with a ‘GIMP made’ sign and a smiley face on it! Would you?!”
I wouldn’t suggest GIMP if the developers feel that Firefox needs vector graphic glyphs, I would suggest Inkscape. Also the program doesn’t decide the quality of the finished product, especially when one is only making simple icons; GIMP is just as capable in this area, as well as 75% of all other areas.
Nice Tutorial Stephen! looks very great
But it would be very useful, when you or anybody else make a tutorial with inkscape…
thx
@InaTux..
I really can’t say anything.. It looks like I was asleep while writing.. and this isn’t a joke!
Alongside the “OMG YOU USED NON-FREE SOFTWARE THE WORLD IS GONNA END!” comments, I actually think SVG versions would be a good idea by default.
It is not logical to use ‘X’ to mean ‘stop’ when in computer UIs these days ‘X’ also means ‘close’ or ‘delete’! FF2 was more logical in that it used an octagon shape to mean stop. Here are some of my alternative proposals (I didn’t use your guidelines here so they would obviously need cleaned up!):
https://wiki.mozilla.org/File:Alternative_stop_buttons.png
I think I prefer the one that is the same as the FF2 STOP icon.
Thanks for the tutorial. Are you going to be writing a new CSS tutorial any time soon?
[...] New Glyphs in Context blog.stephenhorlander.com [...]