Icon-A-Day, Icon # 71, Suspend
One more quick one.
Saturday, March 12, 2005 by mormegil | Discussion: Icons
Icon 71 (Suspend) Today's icon will follow almost exactly the same steps as yesterdays. This is a good example of how to re-use techniques. So with no further ado, lets make the "Suspend" icon. | ||
Step 1: First things first, we copy the Run icon from yesterday and remove the text, and change the background to a Golden Yellow blend. ![]() |
Step 2: Now using two circles and the trim tool I make myself a nice crescent moon shape. ![]() |
Step 3: Now we use the Perspective tool, give our half moon some dimension. I also use the Contour tool to give the moon a "poor mans bevel" ![]() |
Step 4: Now we give the Moon a standard Corel drop shadow. ![]() |
Step 5: Now with the contour tool I give the Moon a inner contour to the appearance of depth. ![]() |
Step 6: Now we give the moon a nice bit of gloss. ![]() |
Step 7: Once more the last step is to give the new icon a new Reflection. ![]() |
Finished Icon Design. ![]() |
|
This brings us to the last ever icon to be done in my crap-taculer tiny 1 bedroom apartment. Tomorrow we will push on further through the "Start icons" From my shiny brand new house. See you all then. |
Icon-A-Day, Icon # 70, Run
Like the help Icon, only differant.
Friday, March 11, 2005 by mormegil | Discussion: Icons
Icon 70 (Run) Today we will continue to go through the "Start" icons. This works out for me since I am going to be finishing (hopefully) moving this weekend, and will not have a lot of free time. The good news is that the next few tutorials will be easy for me. The bad news is that the next few tutorials will will seem quite repetitive. On the other hand this will be a good example of how you can use a technique multiple times and achieve good results quickly. Yesterday we did the "Help" icon, today we will move on to "Run" | ||
Step 1: First things first, we copy the Help icon from yesterday, and remove the "?", and change the background to Reds. ![]() |
Step 2: Now we simply type out the word "RUN" in a font that we think will look good. This is the same font as yesterdays icon. ![]() |
Step 3: Now we use the Perspective tool to place the text, so it is kind of floating in front of the background. ![]() |
Step 4: Now using the Contour tool, I give the text a "poor mans bevel" ![]() |
Step 5: Once I have the bevel the way I want I give the text a standard Corel drop shadow. ![]() |
Step 6: Now with the contour tool I give the text an inner contour to the appearance of depth. I also give it some glare. ![]() |
Step 7: The last step is to give the new icon a new Reflection. ![]() |
Finished Icon Design.![]() |
|
Well, with that I'm back to packing. Tune in tomorrow for the "Suspend" icon. |
DesktopX Journal: Day 6
Picking a style for the new widgets..
Thursday, March 10, 2005 by Frogboy | Discussion: DesktopX
In the good old days, the only things that lived on your desktop were icons. Ah, icons. So safe and predictable. Icons, after all, are all static pictures that are typically 32 pixels wide and 32 pixels tall.
When DesktopX 1 was released 5 years ago, a new type of content was added to the Windows desktop - objects. Objects could be any shape or size. And that was great for people who wanted to create their own stuff. But most users want some conformity. In recent years, mini-applications called "widgets" now populate the desktops of many users. And the best widgets tend to follow a consistent style.
For DesktopX 3, Stardock wanted to go with its own, unique look for how the included "widget" content would be done. So we sat down and looked at what was available. Most widgets tend to have a "glassy" look to them. The style we were most influenced by was the "Aero" look from Microsoft's upcoming "Longhorn". But we didn't just want to take the Aero-style. We wanted our DesktopX widgets to have their own distinctive look and feel.
So Scott Tykoski (BoogieBac) and Paul Boyer (Mormegil) came up with "Silica". A crystallized design that is used throughout many of the included DesktopX 3 widgets.
While many of the DesktopX 3 widgets include a user interface for changing the color, they can also have their color changes from their preference dialog. Below you can see an example of the generic properties dialog that every widget gets. The second page even lets users assign a hot key for bringing up their widgets or hiding them all (if you're worried about getting your desktop "cluttered" have no fear.
One of the new features of DesktopX 3 is the ease developers can add their own custom preference page to the widget properties page. This is useful on things like Disk space meters where the user might want to display the space free on a particular hard disk.
Obviously, coming up with any particular style for the widgets is tricky. Even picking the right size is important. We had felt that too many DesktopX widgets were far far too big. The Silica widgets tend to be quite small in size. Usability over flash.
Hopefully users will find the design of the Silica widgets to be both aesthetically pleasing and very useful.
Stardock also hopes (And gives permission) for widget authors to freely use the Silica artwork for the creation of DesktopX widgets so that users can look forward to a consistent look and feel for their desktops.
Icon-A-Day, Icon # 69, Help
Help, Help, I have to do the Help Icon.
Thursday, March 10, 2005 by mormegil | Discussion: Icons
Icon 69 (Help) I wanted to do the Scanners and Cameras icon today, but I want to put some time into that one, so I am going to put it off for a few days. I am gearing up to do the big portion of our move on Saturday, so I am going to do a some of the simpler icons we have left to do. A while ago we did the "Folder Options" icon, in the process we made a glass checkbox. I liked the way it looked, and I think I am going to use that element to do several of the "Start" icons. Today we will start this process with the Help icon. | ||
Step 1: First thing we do is copy the Folder Options icon. ![]() |
Step 2: I delete the folder, and the reflections. And use the mesh tool to change the color of the center rectangle to blues. ![]() |
Step 3: Now I type myself a "?" and convert it to curves. ![]() |
Step 4: Now using the perspective tool I tweak my "?" to look like it is the same perspective as the glass block. ![]() |
Step 5: Now using the contour tool I give our "?" a "poor mans bevel". ![]() |
Step 6: Once more with the contour tool I give the "?" an inner contour to give it some depth. I also give the "?" some glare. ![]() |
Step 7: I put a temporary gray box behind the icon to see how it will look on darker backgrounds. I also give the "?" a nice new drop shadow. ![]() |
Step 8: Last thing we have to do is give it our standard Reflection. ![]() |
Finished Icon Design. |
![]() Click here to download the finished icon. | ||
This should start us off on a bit of a string of "Start" icons. Check in tomorrow for the "Run" icon. Se ya then. |
DesktopX Journal: Day 5
Building a better desktop
Thursday, March 10, 2005 by Frogboy | Discussion: DesktopX
Widgets have gotten a lot of attention in the past year. I admit, we've really fixated on the widget aspects of DesktopX since that's where a lot of the interest seems to have been. But with DesktopX 3, we have not forgotten about one of the most popular uses of DesktopX -- building a desktop.
To recap - DesktopX (Standard and Pro) enable users to create desktop objects on their Windows desktop. These objects can be as simple as a static picture or as complex as any stand alone program could imagine being. It's up to the user. These objects can be grouped together and exported. They can be exported as objects to be put on people's DesktopX enhanced desktop, they can be exported as widgets to be run as mini-programs...OR...they can be put together to build an entirely new desktop.
What I want to show is how easy it is to create a desktop. My example, to keep it simple, is pretty lame I confess but hopefully it'll cover enough of the basics that you can go from there.
First off, for my desktop I'm going to have a bottom bar and a right bar. So I'll need an image. I'm going to borrow an Aero-style PNG file I got on WinCustomize. Then I'm going to create a DesktopX object and assign its image to be that Aero PNG file. Then on the states tab I'm going to go to appearance and then "Advanced" and set up how it can be tiled and stretched. Basically I want to be able to resize this PNG image without it looking stretched out.
Now that I've done that, I'll resize it to make sure I did it right. I do that on the summary page.
Good. Looks good resized. Now, in DesktopX I can make things a % of the desktop. DesktopX is natively resolution independent (unfortunately, most people choose to hard code the size of their exported desktops which is almost always unnecessary). So I'm going to make my image be 100% of the horizontal size but 64 pixels tall.
Now to do the same with a vertical one which I created using "clone".
Next I will prepare to hide my Windows desktop icons and Start bar.
Now for fun I'm going to put the date and time. DesktopX includes a plugin that does this. So I just select that under "additional abilities" and then make that object of type text.
Okay, so here's my little text object. I changed the colors and gave it a border so that it stands out.
Now, one of the things that's important to remember when building a desktop is that you'll want all your "desktop" items to be of the desktop z-order (by default, objects are created at the Normal z-order). You want your desktop stuff to always show up below your windows.
Now I need a Start button. Okay, here I cheated, I went onto the DesktopX area and did a search for a start button. This just brings up the Windows Start menu.
Make it match my existing look.
And then toss it on there. Now, I also need to reserve the space for my various docks. There's tons of ways to do this. The easy/lame way is to just go and set the workspace area.
I'm just maximizing my window so you can see the effect of workspaces.
Now I start importing objects to put on my docks. Then I go to the ObjectDock section on www.wincustomize.com to start finding more specific PNG and icon files I want.
One thing nice about DesktopX objects when dealing with icons and such is that you can control their size and you can control how they behave in different instances (such as mouse over). I also gave this object a shadow.
So now let's create another object that I'll use as a pop up.
Using my trusty Aero image once again I have made a nice box.
So now I'm going to need a thin that when clicked on will toggle my pop up. So I grabbed this. I will resize it to 32x32 (looks really cool big eh?).
So now I make this object an "object controller".
And I turn my pop up window into a toggle popup.
And voila. Drag and drop some stuff on there, put some MP3 player controls I made on there and I have an interactive pop up window.
Icon-A-Day, Icon # 68, Printers Folder
Another quick one saves the day.
Wednesday, March 9, 2005 by mormegil | Discussion: Icons
Icon 68 (Printers Folder) As I have mentioned over the last few tutorials, I am in the process of moving, Tonight I settled down to finally pack up all my computer crap. This, as I am sure it is with a lot of you, is a pain in the butt for me. I start going "Hey I forgot I had this" or "oh what the hell is that", or "why on earth did I buy this Macintosh if I never use it"? Anyway the point of this story is that I became quite involved with this project, and just about forgot to do my nightly icon. Since this is the Icon-A-Day project I found myself in a bit of a panic when I remembered. Luckily for me and for my little icon project, yesterday we did the Printers icon, doing all the hard work for today's icon. The Printers Folder. This one is simply reusing existing elements, and doing a bit of tweaking. That said.... | ||
Step 1: We will start by copying the Printers icon from yesterday. ![]() |
Step 2: Now we copy our Admin Folder and remove the "Little People" ![]() |
Step 3: I tweak the size of the printer a bit, and place it in front of our folder. ![]() |
Step 4: Now to offset it a bit from the folder I add a few drop shadows to the back paper tray. ![]() |
Step 5: I'm not to happy with the way everything is gray and black, so I want to add a splash of color. I use the Mesh Tool to go in and recolor the light part of our printers glass cover with some red ![]() |
Finished Icon design. |
![]() Click here to download the finished icon. | ||
Well that was simple and will save me enough time to pack one more box of crap before I go to bed. Tomorrow I think I might try and take on the Cameras and Scanners Folder. So check back then. |
Icon-A-Day, Icon # 67, Printers
Losts of Pictures, less talk.
Tuesday, March 8, 2005 by mormegil | Discussion: Icons
Icon 67 (Printers) Ok I got home at a reasonable hour tonight so I thought I would make good on my plans from yesterday and do the printer icon. The good news is here it is. The bad news is it took me to long to do. Today's tutorial is going to be big on pictures and pretty light on commentary. The problem is that it is almost entirely done with the Mesh Tool, so it is hard to say, "do this, and do this". For more on the Mesh tool check out the two Videos I have done in the CorelDRAW for skinners series. Ok off we go again. | ||
Step 1: I start with Seven Rectangles, and using the Mesh Tool I block out my printers shape. ![]() |
Step 2: Now I start "sculpting" the printer with the mesh tool. ![]() |
Step 3: Next I start adding the colors and tuning the mesh to give it some dimension. ![]() |
Step 4: Now I start giving the mesh more details, some grooves to match our folders and other metal graphics. ![]() |
Step 5: You can see a bit more detail here of the mesh as it starts to take shape. ![]() |
Step 6: I have to do a bit of tweaking to make sure that all mesh shapes fit together properly, or else we will get cracks between the shapes when we export. ![]() |
Step 7: Now I give the glass cover of our printer a bit of gloss just for polish. ![]() |
Step 8: I won't bother showing more on the rest of the shapes, I will just summarize by saying I go in with the Mesh Tool and fill and sculpt the rest of our shapes. ![]() |
Step 9: Now I create a bit of a drop shadow for the finished printer. ![]() |
Step 10: And last we create our reflection using our normal methods. ![]() |
Finished Icon design. |
![]() Click here to download the finished icon. |
I am pretty happy with this Printer, however I feel it is to monotone. Perhaps later we will give it more color, but lets go with this for now. Until tomorrow, go skinning.... |
Icon-A-Day, Icon # 66, User Program Group
One last fling for the "little people."
Monday, March 7, 2005 by mormegil | Discussion: Icons
Icon 66 (User Program Group) Yesterday we had the pleasure of making the "Program Group" folder. This makes today's icon very simple and gives us one last chance to use the "People" overlay that we originally made for the Admin folder. Today's icon is another one of those icons that most people will never see. There are system administrators out there who see it every day, and beside, it is supported by IconPackager, so to do a complete pack we have to do it. | ||
Step 1: We shall start with a copy of yesterdays Program Group folder. ![]() |
Step 2: Now we copy the "People" from our Admin folder, and shrink them down a bit, also we remove the shadows and Reflections. ![]() |
Step 3: We lean the people up against the Explorer window. Then we copy our elements and make our reflection graphics. ![]() |
Step 4: Now we add a drop shadow. to the "People" and feather out the Reflection with the Interactive Transparency tool. ![]() |
Finished Icon design. |
|
Well that was simple; unfortunately we are running out of the simple folder icons, I am hoping to finally get around to the "Printer" folder tomorrow. See you then. |
03-05-05 Highlights at Skinartistry
Written by Old Sapphire
Monday, March 7, 2005 by Skinartistry | Discussion: OS Customization
A weekly article to summarize what's goin on at Skinartistry, and what's hot.
Main Attraction
Skin: Reciprocity
Type: Windowblind
Author: pictoratus
Website: http://www.pictoratus.com/
Email: pictoratus@pictoratus.com
I love a skin with lots of flare, eye candy, tricks, flaming hoola-hoops, and all other what-have-you's - but sometimes, all of the do-hickeies and widgets can get to be somewhat irritating, redundant, and often are overdone. When I'm suffering from skin overload, I want something to calm my nerves a bit, and keep things simple, but not too simple. That's exactly what I find with Reciprocity. This skin is simple, sleek, and modern - and surprsingly easy on the eyes. The color does a lot of things for the skin: it adds some interest and flash, and really brings out many darker-schemed websites and highlights them well. Don't be turned off by the color - it's minty freshness is comfortable and unique.
It's difficult to decide whether to consider this minimal or not - the start menu is compact and simple, and the window buttons are kind and dainty, yet you still get that gently fattening feel as you would from a normal skin.
Whether you're looking to satisfy your favorite color fetish, try something new, keep it 'minimal', but not too minimal, or just want to wear something comfortable and sheik- Reciprocity should be the first choice on your list.




"Cool Stuff" Highlights
from all around the net








Worth Checking Out
old & new stuff

What is Avalon
Microsoft's next-gen display system explained
Sunday, March 6, 2005 by Draginol | Discussion: Avalon
Avalon is the new rendering and compositing technolgoy that Microsoft is developing primarily for Longhorn (Microsoft's next release of Windows) that is available in beta form on Windows XP as I write this.
From Windows 3.0 all the way through Windows XP, the Windows graphical environment was pretty primitive. The Graphical Device Interface (GDI) provided only limited visual options to developers.
As 3D hardware has improved, the gulf between what developers could do with traditional Windows programs versus what one could see in a PC game grew more and more obvious.
Avalon is designed to bridge that gap. It provides two things of particular interest:
(1) It delivers a new rendering and compositing model that developers can take advantage of. This new model can make use of the latest/greatest advances in video hardware (such as 3D). That doesn't mean one must use it to create "3D" looking programs but rather it means that all kinds of impressive visual effects become possible.
(2) It provides a new programming model that allows software developers to create user interfaces that are defined declaratively (such as created via XAML).
(Editorial on)
Everything else you hear about Longhorn is mostly just fluff. It's really about Avalon. Without Avalon, there's not much point to Longhorn in my view.
The reason for that is not because people want eye candy but because we are currently moving towards a video stand-still.
Consider this, modern LCD displays can display at 1600x1200. But many people don't bother to run at the highest resolution their monitor can display because "everything gets too small". That's because fonts and other elements in Windows are at a static DPI (96 dpi to be precise).
Avalon's compositer allows you to use the full potential of your display. Increase your resolution as much as you can and then adjust the size of everything on the fly. Instead of bitmaps and hard coded font sizes, you have vector based interfaces that simply become more detailed, more defined as you increase the DPI. Same for fonts.
So the user running at say 3200 x 2400 in 2008 isn't greeted with tiny text and tiny UI. Their UI is whatever size that is comfortable for the user with it being sharp and detailed (Rather than scaled up with fuzzyness).
The compositing engine will allow for far for interesting ways to display information on the screen. Right now, developers are limited in how they can display things on screen by the graphics sub-system. When people saw the Dock on MacOS X with its "genie" effect, PC users oohed and awed. That sort of thing is just the tip of the iceberg. That's just eye candy.
With XAML, developers will be able to put together sophisticated, visually appealing programs quickly and easily that tap into Avalon. This could create user interfaces that are designed to meet the user's needs much more easily than what we have today.
(editorial mode off)