I really don't feel like organizing this! So, I'll make it look like a blog.
| Quick Word on HTML Colors 20NOV2010 |
| HTML Colors are pretty easy. While
at first glance, you may not have any clue what color 9069FF is, it's
not as hard as you think. HTML colors are just another format of rgb
colors (red, green, blue) that used hexidecimal numbers. The six characters in HTML colors are really three hexidecimal numbers, each of which goes from 00 to FF. That translates to 0-255 in decimal numbers. Each number corresponds to the amount of red, green or blue. So, 9069FF is the same as 144 red, 105 green, and 255 blue. Still can't imagine what that looks like? There's a trick...of course. The lowest of the three values can often indicate the darkness of the color, and you can ignore it when thinking of color mixture. The difference between the lowest value and the next largest value indicates the color saturation. I'm going to make some random color numbers and guess what they look like. 1d349f = 29, 52, 159 r,g,b. This is fairly dark, and a mix of green and blue, with a lot more blue. It looks like this edaaca = 237, 170, 202 r,g,b. A lighter color, mixing red and blue, slightly redder. It looks like this 99991a (lets not convert) red is pretty high, green is the same, blue much lower. A dark color, mixing red and green with equal amounts, and higher saturation. (in rgb, mixing red and green gets yellow) It looks like this With a little practice, you can get a pretty good guesstimate of an HTML color just by looking at the code. So, what's 9069FF? red is higher, green is low-mid range, blue is max. A medium dark bluish purple - the background color of this page. |
| Hexidecimal - this is a base 16 numbering system. Compared to the more common decimal system: DECIMAL 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 HEXIDECIMAL 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F 20 You get the picture. |
| Working with those Tiny Folder Icons 06NOV2010 |
| The folder icons in the menu -
Documents,
Music, Pictures, etc., are often avoided by all but the most dedicated
themers. If you've ever tried to make your own icons, you know why. No
matter how cool your ideas for icons are, once you shrink it down to
the correct size of 24 x 24 pixels, it looks nothing like your larger
version. Your "rainbow unicorn" is now just a "watery blur", your
"perfect replica of a newspaper" has become a "defective chessboard". If you only had just a little more space, even 32 x 32, you could work with that, but... Bleh, it's enough to make you give up and comb the internet for somebody else's icons, or just leave the default ones and tell yourself that you can live with it. Well, I'm not going to tell you that making these icons will ever be EASY, but with a few tips, maybe you can put down that mallet that you've been hitting your head with, and create icons that are pretty OK. |
| Folder Icon Names, Format
and Sizing The folder icons are very specific in their names, format and sizing, and you have to follow certain rules to get them to show up at all, and other rules that make them look better. First: all the icons are in ..Theme/menu_icons. They are all PNG files, and they have obvious names (documents.png, music.png, videos.png... you get the picture.) They MUST have these names, and be in this location, or they just won't show up at all - you will just see the default icons. The Image Info for these files is: Size: 24 x 24 pixels Colorspace: Default RGB color Resolution: 150 x 150 dpi. It's best to make your final image conform to these, although I have had success with higher resolutions. I don't think they looked better at 300 x 300 dpi, but they didn't look worse. Size is a funny thing. They menu will stretch or shrink your image to 24 x 24 pixels , but it may not be doing as good a job as your graphics editor. So, yeah, you could save your icon at 240 x 240 pixels, or 1024 x 1024 pixels, but 99 times out of a hundred it will not look good in the menu after it shrinks it. You are better off making it look as good as you can at 24 x 24 pixels. More on this below. |
| Ideas and Theme Consistency Every tutorial I've read online takes some time out to talk about this. They stress that you should make icons that have some type of recognizable symbol, like a CD for a "Music" folder, a lower-case "i" for a "Help" link, etc. Don't just throw in a picture of a pipe wrench for one, a gorilla for another, a coin for a third, just because you can draw them - they need to be somehow connected to the functions that they represent. (... eh, I'm not so worried about that, since the menu has the text right next to it, but it's a good rule of thumb.) What's MORE important is that the icons look like they belong to the theme, and that they belong together as a set. You can get this by using common shapes across the icons - maybe a rounded square border, or the same image of an open folder in each. You could colorize them all to the same color, which is complementary to the theme colors. If you are doing a holiday theme, you are halfway there, because most holidays have symbols associated with them. If your theme is abstract, try finding an element from your background that you can adapt. Here's a great trick to getting nicely styled, consistent icon symbols: DINGBAT FONTS. Dingbats are fonts that use pictures instead of letters. Windows includes Wingdings and Webdings. Free dingbat fonts are widely available for download from places like dafont.com. The beauty of these is that they are designed to look good at different sizes. Open the Windows Character Map tool, select the font, and you can see all of them at approximately the size they would appear in the menu. You will need to convert them to PNG, of course, using the Text tool of your graphics editor. A note about using these: Use free or open source fonts if you can. Give credit to the font designer by putting a text file in the menu_icons folder that lists the font designer - it won't take up much space or affect the theme, but somebody put a lot of work into them. If you decide to just use icons from open source collections, that's a quick way to get good quality, consistent icons, but again, include a text file crediting the artist, and the license if applicable. |
| Getting To It Once you have ideas, start sketching them out on paper or onscreen. Open up your graphics editor and create a new square image - I tend to start at about 240 x 240 pixels at 300 dpi with alpha transparency. If there is a common element like a folder or a circle border, create that and save it separately for use later. If you are using a vector graphics editor like Inkscape, you can get excellent clean lines and curves, but I've found that it scales better if I export it first as a png and scale it down in a raster editor like GIMP. Keep your shapes simple. No matter how good you are, really fine detail just won't scale. Complex color patterns also won't survive the process. Thicker lines and higher contrast helps. Take your drawing right the edge of the image, don't leave space if you can - your final result doesn't have a lot of real estate, so don't waste it. The menu supports PNG transparency, so just make the areas you want transparent - like for rounded corners or odd shapes. As you work on them, every so often zoom out to get an idea of what it will look like. And remember - Save early, save often, save as! |
| Finishing Up Once your image is done, it's time to scale it down. Even though the menu technically can scale your image, it's nowhere as good as using an algorithm in your graphics editor. SAVE A COPY of the large version and scale the other copy. You may need it. Most graphics editors have several different algorithms for scaling, which you can choose as an option. I prefer Sinc (lanczos3). So in GIMP, for example when you choose Image>Scale Image, you can choose that from the dropdown next to "Interpolation". Scale it to 24 x 24 at 150 dpi, and then set the zoom to 100% to get a realistic view. Chances are it won't look like what you had expected, so undo the scaling and tweak it, and scale it again. If it's close, you can work directly on it after it's scaled. Once you love it, save it using the requird name (documents.png, music.png etc.,) and start on the next one! |
| A
Last Word Not everyone is interested in making icons totally from scratch. Some quick and easy ideas: - Colorize the existing icons to match your theme - Make one icon that's used for all. You will need to save it as the individual file names, tho. - Extract the 24x24 layer from existing *.ico files. GIMP opens *.ico files as layers, so that's pretty easy. Just remember fo give credit to the original creators. Hope this helps! |
| Fun With
Transparency 16OCT2010 |
| 406 by 573. Yep. 406 by 573. That's the HARDCODED dimensions of the PortableApps Platform menu. It's a pretty arbitrary dimension, I think. Not really anything special. It's not a Golden Rectangle, which would be more like 573 x 354 or more elegantly, 600 x 370. Nope, nothing special. Just a box. As a themer, of course my first instinct is to break OUT of the box. There aren't really a lot of options, though. You can't make a background that is larger or smaller that 406 by 573... well, you can, but PAM will just squeeze or stretch it to... yep, 406 by 573. However, there's one saving grace that the menu has which will let you mod that box outline a bit, and it is FUSCHIA, or more accurately, FF00FF. John left this one color to act as greenscreen for the menu. It's actually used in the default menu, leetle tiny bits that round the upper corners. You can work this into your theme to cut out funky outlines, put holes in, etc. ANYTHING colored FF00FF in the menu is transparent and behaves as if it's not there to the mouse. That includes the background, buttons, text, even your personal picture. FF00FF is extremely literal, so you may find it a little annoying as you work with it. You can't be off by even a little, so neither EF00FF nor FF00FE will be transparent, they will just be a garish pink. |
| So, try it out, make a background.png that
is just one big field of
FF00FF. In your PATheme.ini, set: [Menu]and restart the menu. Hmm.. it should be mostly transparent, but there's a pink halo around the text, and the PAM logo, and the buttons are pink. Wha? Try this experiment. In your PATheme.ini, set: [Menu]and restart the menu. Now it looks like the normal menu, but again, pink. One last experiment: In your PATheme.ini, set: [Menu]that is to say, make sure all the other BackgroundColors are commented out with a semicolon, and restart the menu. Looks like our first experiment, right? |
| Let me 'splain. As I described in Anatomy of a Portable Apps Theme, the graphics of the theme are arranged in layers. Each image layer supports normal alpha transparency, which means that you can have pixels with opacity from 0% to 100%. But the FF00FF effect applies to the final layered output! So, any partial transparency laid over a FF00FF pixel will change the final output to be a little off from FF00FF. - In the top layer, you have the PAM logo and text. That PAM logo uses alpha transparency to blend itself, hence the pink halo. As for the text, Windows uses something called "antialiasing" to smooth the edges of a font by blurring it with it's surroundings a little. That's also important to remember for when you start making cutouts later... - The second layer has the buttons, which are also semi-transparent. - The third layer, the Chrome layer, is entirely semi-transparent. JTH uses it to get the color-switching effect, by knocking out the background.png and leaving the background color. Of course, every square pixel of it knocks the FF00FF off by a little or a lot, so there's the pink. Custom themers usually don't use the chrome layer, anyway, so we just set it to custom in PATheme.ini to disable it. - If we disable both the chrome layer, and disable the background.png by setting it to none, and then set the BackgroundColor to FF00FF, you have the total transparency effect again. - You could make the ENTIRE menu disappear, except for the logos and appicons, by filling every graphic with FF00FF, and setting all the font colors to FF00FF, too! But that would be useless, since you can't interact with transparent parts!! - You can have a transparent Personal Picture too, by making it all or partly FF00FF. |
| Brain spinning yet? You really have to play
with it to get it right. This brings us to some practical uses and limitations of editing with FF00FF. First, some things that may not be immediately apparent ;-) - Most image editors use antialiasing to smooth edges of fonts and selections. GIMP does this, but you can turn it off in the tool options. You will need to do this with text if you want it to Float, and with your selection tool BEFORE you use it to cut out your shapes. Otherwise, you'll start seeing that pink halo again. - You CAN'T have an Aero effect yet. FF00FF is all or nothing, so until JTH works this out, you won't be able to create semi-transparent themes. - You might get accidental transparency if two alpha layers are colored just right to make FF00FF, but that would be rare. - And of course, you have to work around the existing structure. You can't move the buttons or apps or folders or the PAM Logo, and if you cut your transparency too close to the logo, you will see the pink halo again... What can you do? The most obvious thing is that you can make cool outlines (within reason) and work them into your theme layout. You can cut holes in the menu. You can have your buttons "float" in midair, so to speak. Whee! Get the pinata, time to celebrate! OK, it's a small victory at best. But at least you have some answers to the weirdity that you will encounter when you start to play with FF00FF! And if it doesn't exactly take us outside of the box, at least we can make the box a little different shape. |
| Anatomy
of a Portable Apps Theme 12OCT2010 |
| Layers: You can think of the theme as being arranged in layers. 1. The Portable Apps logo, menu icons, application icons, and text are in the top layer, and will be visible no matter what else you have in the theme. 2. The buttons and scroll bars are in the next layer. They are semi-transparent png files by default, so you can see the underlying layers through them. 3. The Chrome layer is a non-editable semi-transparent png file. You can select a dark or white variant, or hide it altogether. Most themers will elect to hide it, and do all the work in the background.png file. 4. The background.png file is the file that most themers will customize. If it is opaque, it will act as the bottom layer, but it can also be semi-transparent, which will allow it to blend with the background color. 5. The background color is not a file, but is specified as an HTML color in the PATheme.ini file. In the built-in themes that come with 2.0b5, most of the colored themes use the chrome file, no background.png, and the background color set in the PATheme.ini. |
 |
| Buttons
and progress bars: Default Location: X:\PortableApps\PortableApps.com\App\DefaultData\Themes\Default\ Custom Location: X:\PortableApps\PortableApps.com\Data\Theme\ Each button or progress bar has its own image. You can customize these. The default images are semi-transparent, so you can see the layers below, but it's OK to make them opaque, because any text is in the top layer. Not every button is visible at all times. *hover*.png files appear when you position the mouse (hover) over the button *pressed*.png files appear then you click the mouse on the button *normal*.png files are visible unless you hover over or press the button. When customizing these buttons, be sure to customize each of these variants. Typically, *hover* variants are slightly different from *normal* in contrast and tone, while *pressed* variants are more different, sometimes with inverted contrast. Note that there is no *normal* or *pressed* variant for appicon_hover.png, and also no *pressed* variant for the the scroll buttons. The app_progress_background.png ONLY appears during the menu startup. The drivespace_slider.png has a setting in the PAtheme.ini file, to stretch the image or not. If you choose not to customize these, just leave these files out of your theme, and it will use the defaults. |
 |
| Fonts: Fonts are defined in the PAtheme.ini file. At this point, they are pretty simple. Here's what they look like in the ini file [ButtonApplications]You can't change the fontface, or bold them or italicize them. You'll find that for readability, you'll need to use high contrast colors like black or white, but of course it's up to you to experiment. All font colors are HTML colors. So far, I can't get the IconTransparentColor or DividerColor to change anything. That means that all you can do is change the color of the font, and in the case of the DriveSpace, change the shadow color. StretchImage= lets you stretch the drivespace_slider.png file, or not. |
 |
| menu_icons: Default Location: X:\PortableApps\PortableApps.com\App\DefaultData\Themes\Default\menu_icons\ Custom Location: X:\PortableApps\PortableApps.com\Data\Theme\menu_icons\ Each menu icon own image. You can customize these. You can find a lot of nice icons on the net, or you can make your own. A simple way to tweak them without having to be an artist is to colorize them to match your theme. I use GIMP to do that. If you choose not to customize these, just leave these files out of your theme, and it will use the defaults. |
 |