Icon-A-Day, Icon # 73, Log Off
The Last of the "Start" Symbols
Wednesday, March 16, 2005 by mormegil | Discussion: Icons
Icon 73 (Log Off) Once more my poor Icon-A-Day project is late, for this I firmly blame Charter Internet. Luckily I still have my work Internet. Today we are finishing up the last of the "Start" symbols, and taking care of "Log Off". This one is once more almost identical with the other start symbols in the way it is made. One thing to note with the last five icons, is that they are all almost exactly the same in construction, yet all have their own style. This is a good example of how a good technique can be used on different base graphics over and over and still look good. In theory you could do an entire icon pack with just this one tutorial, and have something pretty cool, if not perfect. | ||
Step 1: Once again we start with our glass background box and change the colors to blue. |
Step 2: Now I make a little key with some rectangles and squares welded together. |
Step 3: Now we give the key some perspective, tweeting it until it looks natural. |
Step 4:
Now I use the Contour tool to give the key a "poor mans bevel" |
Step 5:
Now with the Contour tool I give the key an inner contour to give it the appearance of depth. |
Step 6: Now we give the key a standard Corel Drop Shadow. |
Step 7: Last we give the new icon a standard Reflection. |
|
Click here to download the finished icon. |
Tomorrow, assuming I have Internet as I have been promised, we will try and get back to the folder icons and start wrapping up that section of the Icon Package. |
DX3 - The Overhaul: An Independent Perspective
=n00bish(|33t_gfx)
Tuesday, March 15, 2005 by azdruid | Discussion: DesktopX
All right! DesktopX 3 is out and now WE have a nice shiny press release to stick in Konfabulator's face. So, what's new, why should you care, blah blah corporate speak
To begin, I have used DesktopX since version 1. It was really, really neat. Problem was, all the content for it consisted mainly of animated objects that did one thing and were on the whole ugly. It was like Linux: massive potential but no means to exploit it. Plus, the button-filled interface made noobs run away in terror. Bah. They weren't the target audience anyway.
Right, so then Alberto Riccio (the deity behind DX) began work on DesktopX 2. The beta, which I ran, broke tons of stuff and had even more buttons. I eventually reverted back to the stable build, as it is. I could wait. When DX2 was deemed fit-for-consumption, SD released it. Suddenly, the community began hearing whispers of this "uberkool!" new feature called widgets. So, apparently someone thought that hey! Its not enough to run DesktopX.exe - lets run EACH OBJECT in separate memory space! In my own humble opinion, my friends, I never cottoned on the the widget crowd. It seemed pointless, because there was really no reason why I would install DesktopX if not to actively use it. Plus, I like tweaking the hell out of every object I possess without a 5-step import process.
The Widget Wars have since escalated, and symbolify the gradual acceptance of OS Customization by the commoner fools. Granted, widgets were easier, but only for those who felt that a light system was 50 processes. The app of Mac origin, Konfabulator, has recieved a lot of press from pretty much everyone in the last year, due to Apple's ass-raping them and the creation of a Windows version (which was slow and weak). Now there are multiple contestants in the Widget Arena(tm) like Kapsules and AveDesk. Oddly enough, DesktopX remained overshadowed, ironically, by these lesser programs. Our King and benefactor Brad realized that hey! Most people are confused by any more than two buttons displayed in a dialog at once. And so, the simplification of DesktopX began.
To me, the announcement of DX3 came out of nowhere. I expected the 2.x line to last a lot longer. In any case, the big changes in DX3 are as (to the best of my memory) as follows:
- 3part UI. Runtime, Builder, Widget Manager Thingy
- Plugins (gee! thats not a NEW feature)
- Mormegil's beautiful graphics. Long overdue.
- 150% more widgety goodness and configuration
- DX Pro is now only $70. Sweet.
Wait a moment, you say. WTF is DX Pro? Please tell me ATI is not in control of the naming scheme.
Fear not my young inexperienced friend, would be my response, for the shiny, expensive version of DesktopX possesses the magic key to which people like us can make good-looking standalone applications very, very easily. Visual Basic be damned. And so it was to be. Have a look at the DX Welcome widget. It is IMPOSSIBLE to do that in VB. Mormegil probably did it in 5 minutes.
But DesktopX 3. Yes. Well, it comes with a nice assortment of widgets (gahh) that look really pretty and can outperform Konfabulator's offerings out of the box. I think that was one of SD's key goals with DX3 - make it be useful as soon as its loaded. In any case, yes, out-of-the-box-awesomeness is fulfilled. I'd like to see even more, but hey, that's because I'm picky. Where is KClock? KClock kicks ass.
The truth and rec---I mean the division and consolidation of DesktopX was done quite well, even though I hate its guts. See, I actually liked having all the bells in whistles in ONE panel, so I didn't have to manage three executables to build and test content. Making software is always a balanced equation: you want to stuff enough features in to make it viable, but on the same time, you need to make the interface usable enough and refrain from button madness. The DX3 interface is the extreme opposite of The GIMP's. The core component, DesktopX.exe, provides just enough buttons to get stuff onto your desktop. How terribly fascinating! It's Konfabulator! To do anything particularly productive, one must turn to the DesktopX Builder, which has an interface more reminiscent of the good old days.
To sum up this jumbled mass of words:
- DesktopX 3 is cool. Shut up and download it.
- If you are a n00b, be happy.
- If you are a power user, you will have to cope because the other new features are worth it.
- If you are Alberto Riccio, pat yourself on the back and have a beer.
The ol' double-edged blade in DesktopX is of course how ridiculously easy it is to create stuff for it. It was what originally attracted me. It is of the most trivial matter to draw a square in Fireworks and have a nice square on your Desktop that opens Firefox or whatever. Upside? You can do Whatever you want! Dont wait for someone else to do it, dream it up yourself. Downside? I don't want a square to launch Firefox, and probably 99% of visitors to the DesktopX library on WC don't ether. So, guys, moderate your own content before you upload it. It saves time for everyone.
Just one other quick note that is completely irrelevant to DesktopX 3 but has implications for the program overall, is its shelf life. Stardock needs to (and does) make it very, very clear what DesktopX is capable of. Fancy animations may satisfy the dull-witted co-worker but not the rest of the world. I originally used DesktopX to create bars for launching oft-used programs easier. That task has since been delegated to ObjectDock Plus. A year ago I had 50 DX objects at one point in time. Now I have 2 objects, and four ObjectDock Plus bars because the ODP framework makes for a much nicer and easier launchbar. So, just be aware, that as more specifically designed applications focus on smaller points to compete with DX, DesktopX needs to evolve as well. So far it's doing a wonderful job.
Download it. Now.
Icon-A-Day, Icon # 72, Shutdown
Life sucks without internet access.
Monday, March 14, 2005 by mormegil | Discussion: Icons
Icon 72
(Shutdown) Tonight we will do almost exactly the same as yesterday, but with different graphics. This is a good example of how you can re-use the same techniques and get good results with very simple changes. | ||
Step 1: First things first, we copy the Suspend icon and delete the moon. I also change the background to Black and Red. |
Step 2: Once again I use a few circles and a rectangle to create a "Power" symbol. |
Step 3: Now just like yesterday we use the Perspective tool, give our Power Symbol a bit of perspective. I also use the Contour tool to give the moon a "poor mans bevel" |
Step 4: Now with the Contour tool I give the Power symbol an inner contour to give it the appearance of depth. We also give the moon a nice bit of gloss. |
Step 5: Now we give the symbol, including its bevel, a standard drop shadow, dropping it pretty much straight out to the left. |
Step 6: As it seems to almost always be our last step, we give the new icon a new Reflection. |
Finished Icon Design. |
||
Tomorrow we will wrap
up this little set of "Start" icons with the Log Off icon, check back in then.
|
Mozilla Foundation ends Suite development
Monday, March 14, 2005 by geekinthecity | Discussion: Personal Computing
The Mozilla foundation has released separate web browser (the wildly successful Firefox) and e-mail client (Thunderbird). I have found that I love the tight integration of web browser and the e-mail client. Open just one program for both web surfing and e-mailing. There are features found in both the web browser inside the Mozilla suite and Firefox that are just a lot more well executed in the Suite. One of these is the cookie manager. In Mozilla suite the cookie manager is found right in the tools menu while in Firefox the cookie manager in found in preferences under privacy.
It was with some shock and sadness that I learned that the Mozilla Foundation is ending development of the suite. There won't have any more new versions the program that has made the web and e-mail so much safer and enjoyable. Although news development on Mozilla Suite will be ending soon the Mozilla Foundation says there will be bug fixes and security updates for the forseeable future. Don't get me wrong, Firefox is a great browser however it just needs to mature before I switch. I don't doubt that when all support for Mozilla suite comes to an end and I have to switch I can tell you for sure it I won't be going back to Microsoft Internet Explorer.
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. |