A Icon a day Keeps the Creative Block away. (I hope)
Saturday, January 08, 2005 by mormegil | Discussion: OS Customization
An Icon a day Keeps the Creative Block away. (I hope)
As some of you may have noticed, and gotten mad at me for, I have not had a new free Iconpack out for quite some time. This is not so much because I have been doing Premium Suites, it's because I just have not been able to find any time. Since I have started working at Stardock, over a year ago now, I have been doing a lot of fun stuff at work. Making video game UI's, Skins, and 3D. This has been sapping the amount of creativity I have left when I get home. Not to mention my cursed time sucking addiction of Halo 2.
This brings me to the point of this blog. Starting today, I am going to find some time every day to make one (1) Icon. This will give us a new complete Iconpack in about 60 days.
Here is my plan.
1) Design 1 Icon a day, starting with the folder. (Can't help but do this)
2) Post that Icon in the Misc Icons section over on wincustomize. This way anyone who wants to can get the Icons as they are made, and not have to wait for the completed pack.
3) Post a short blog on the making of each Icon. This hopefully will allow for feedback from users, and help make the pack better.
With that lets get started.
|Icon 01 (Closed folder) |
The folder is always one of the hardest Icons to do. It sets the style for the entire pack of Icons. I tend to spend the most time on the folder Icon, but I am going to force myself to crank this one out. Because this is the first article in this series I am going to show a bit more of the "making of" than I will have time to do in the future.
I am going to be using CorelDraw to do all the designing in this pack; if you want you can get a free trial copy at www.corel.com. If you are more comfortable with other graphics programs hopefully you will be able to get the basics of what I am doing and translate it into that programs tool set.
One last thing; I am going to be referring to a lot of tools and techniques over the life of this blog series and I won't have time to describe them in these articles. I will try and do some individual tutorials on how I use each tool and technique as time goes by, if requested.
|Step 1: |
Using the Rectangle Tool, I Draw a 1.28 x 1.28 box. I use this to make sure to keep my Icon in a square aspect, and so the Icon dose not become stretched or distorted when I make it.
Then I create another rectangle and, using the Mesh fill tool, "Sculpt" it into the back side of my folder.
|Step 2: |
Using the Mesh fill tool I go in and do some detail. In this case I am adding in some bevels and gradients. I am winging this, so I think I will go ahead and make the back black. I am going to go with a metal and composite look for this. I am doing a lot of this in the Galactic Civilizations GUI, and am in that kind of mood. Plus maybe in the process of making this pack I can use some of the ideas in the game screens, and vice versa.
|Step 3: |
I want some texture in all of these Icons because I am in that kind of mode at the moment, plus it is a simple technique that can make for a nice rich feel. I don't have a lot of time for these Icons, and I will be using allot of the more popular looks.
So using the interactive transparency tool, I take a copy of the back of the folder. Change it to 30% black and add a stretched wave texture, setting the transparency to Multiply.
|Step 4: |
Now following the same steps as in Step 1, I use another rectangle and the Mesh tool to mold it into the shape I want the folder front to be.
As in Step 2, I use the mesh fill tool to give the folder front some detail.
|Step 5: |
Now I use the same steps as in Step 3 to make transparent texture over the front part of the folder.
Then I draw some of the obligatory white glare on the front of the folder and the tab. Then use the Interactive Transparency tool to fade it out from top to bottom. Giving us that Shiny look.
Now I just draw a black shape that I can use to pull a drop shadow off of for my shadow. I am having to do the shadow this way because I want it to look slanted back, and I don't want the standard shadows.
The only trick here is to set the shadows opacity to 100% so I can do something with it in the next step.
|Step 7: |
Now I break the shadow apart from the shadow shape I drew and delete the shape. Then using the Interactive Transparency tool I fade the shadow out. Also using Arrange I send the shadow to the back of the folder.
|Step 8: |
I see a lot of people do a reflection of their icon in their screen shots, but I thought it might be fun to try and do it in all the Icons of this pack. So lets do it.
To do this I simply copy the elements of my folder, Flip, Move, and Skew them into the location I want. Then convert them into a bitmap (24 bit RGB).
|Step 9: |
Now to get that reflected look, I can simply crop the created bitmap to fit inside my guide box, and using the Interactive Transparency tool fade it out.
|Finished Icon image. || |
Download the finished Icon.
Now I use IconDeveloper, or other Icon program, to create the Icon. There are several other tutorials out there telling you how to do that so I will make you look them up. For this pack, in the interest of not limiting what we can design, I have decided to only do 32 bit Icons for Windows XP.
So there we go, Icon # 1 is done. You can download it here if you want to play with it.
The most unappreciated Icon in the pack.
|Icon 02 (Default File) |
After the Folder icon, the Default File icon, tends to be the most important icon in a pack. (At least for me). It is at the same time one of the easiest and one of the hardest icons in an Iconpack. It takesn very little time to draw, but you may end up doing it 50 times, trying to find something that has not been done 1000 times before. The icon below took maybe 15 minutes to do, less time than it is taking me to write this.
Now that I said all that, I came up with the style for this icon set in one try. Mostly as a "Hey, I wonder if I could pull that off" experiment. What I have decided to try and pull off is a Glass icon set, or Plastic icon set, depending on how you look at it. All the file icons will be transparent glass plates, with a colored band on the top, the band may change depending on the type of Icon. Also the glass will allow us to have any file "Overlays" that I place on the icons to have a reflection in the surface of the file. At least that is the plan.
This is the Default Icon, so it is pretty damn plain, but I am pretty excited to see how the rest of the icons come out. Now lets get started.
|Step 1: |
Using the Rectangle Tool, I draw a 1.28 x 1.28 box, same as in the last icon. Then I draw another rectangle; that will become my file icon.
|Step 2: |
I give the rectangle a white to light grey gradient, and then using the Interactive Transparency tool I make it fade from slightly transparent on the top and bottom, to about 50% transparent in the center.
Because this is glass and my page is white I put a throw away shape in a darker color behind my Icon so I can see it. I will delete it later.
|Step 3: |
Now I copy the rectangle 3 times and Crop the copies so I can get my edges - one Grey and one white - and send them to the back. This is to give the glass some depth.
Then I place another 2 rectangles on the top - one transparent blue, and one white - to make my band.
|Step 4: |
Now I copy the shape of the page and pull a light drop shadow off it. I also copy the edges separately and pull a shadow off them. This gives us that glass shadow look.
I also fade them out in the same way I did in yesterdays folder shadow.
|Step 5: |
Now using the same steps as yesterday I make the reflection of the icon below.
Lastly we add the "Glare", drawing the glare on with white shapes and fading it out with the Interactive Transparency tool.
|And our finished icon should look something like this. || |
Note: I realized at the end of this that I had the colors of the inside of the glass reversed, so I flipped the two trimmed shapes so the black is on the top left and the white is on the bottom right.
Well that about wraps it up for the Default File. Let's hope my gamble that this will look good when we get more of them will pay off. Tomorrow I think we will do the open folder, or the Default Document icon. Tune in then to find out.
Skinning that soothes the savage desktop
Saturday, January 08, 2005 by Essencay | Discussion: New Releases
Click on Image to go to skin
Click on Image to go to skin
Click on Image to go to skin
Click on Image to go to skin
Click on Image to go to skin
Now everybody, fire up their new desktop and go "Oooo....Aaaah"
Microsoft's Built-in Pop-up Blocker...My Current Pop-Up Blocker
Friday, January 07, 2005 by Essencay | Discussion: Windows XP
The monkey thought 'twas all in fun Pop! Goes the weasel
A penny for a spool of thread. A penny for a needle
That's the way the money goes, Pop! Goes the weasel
A half a pound of tupenny rice. A half a pound of treacle
Mix it up and make it nice, Pop! Goes the weasel.
Up and down the London road, In and out of the Eagle
That's the way the money goes, Pop! Goes the weasel
I've no time to plead and pine, I've no time to wheedle
Kiss me quick and then I'm gone, Pop! Goes the weasel
Remember the bad old days when browsing the net could be a nightmare with the amount of popups you encountered and trying to find a decent free popup blocker was a chore? Well not anymore. Now the question to ask yourself is...did I de-activate all the other pop-up blockers installed on my PC so that I can control what is being blocked? Seems everyone is jumping on this ride including Microsoft.
Right now on my PC I have 4 pop-up blockers installed. XP's SP2 added one to IE6. MSN Toolbar has one built-in. Earthlink's TotalAccess has one built-in (this is the one I used when pop-up blockers where scarce), and Norton's Internet Security 2005 added the fourth. So if you're wondering why your favorite site that uses pop-ups no longer pops check to see if one of the many possible pop-up blockers you may have installed (Google's Toolbar comes to mind) on your computer isn't blocking it. Best bet is to uninstall, if you can, or disable all but one.
My current favorite for IE6 is the one that SP2 added. Whenever it comes across a new site with popups it gives you a convenient visual warning to allow you to configure it, as well as blocking the pop-up. What's yours?
How to Revert to the Standard Desktop
Wednesday, January 05, 2005 by Cordelia | Discussion: OS Customization
Yesterday's article was a long, pedantic drone about installing the WindowBlinds program and downloading and installing skins for your computer. Today's article is about reverting to the original Windows skin, although why anyone would want to violate their computer in this way is beyond me. Now that I've been playing dress up with my computer for all of two weeks, the standard Windows style is tantamount to leaving my computer naked in a snowstorm, but hey, sometimes it has to be done, right?
You ready? Right click on the desktop. A menu pops up listing various exciting things you can do like "refresh". At the bottom you will find "properties". Click on that. This is the "Display Properties" dialogue window. Click on the "Appearance" tab. Go to the drop down menu that says "Windows and buttons". I am running Windows XP on my computer, so near the top of the list there is "Windows XP style". Click on it.
The preview shows me the shiny, boring - I mean blue! - Windows XP style. Click "Apply" and wait for a moment...and voila! Your computer is back to normal. [Computer shivers in the cold]. So simple even a noob like me can do it! Quickly now, before my poor computer gets a complex I'm throwing on a new skin...ah! Much better.
Daily Hint for the Noob: When you have WindowBlinds installed you can change your skin easily by going through these same steps. Once you have uploaded a few different skins, you can scroll through them just by using the Appearance tab in the Display Properties dialog box.
Tomorrow's Article: How to Make A Screen Shot
Correct my grammar and win a dirty hankie!!!
(Offer not valid in the Northern or Southern Hemispheres)
Create Your Own Orbicon Icons.
I have made over 100 icons in the past 2 days. They all have the same idea in mind; glass orbs with an image referring to a program inside of the orb. For some reason I cannot stop making these little orbs. Now, I know that some of you are saying - "Orbs are very old..." or "We are tired of seeing orbs..." - but I say, "MAN! I wish I could stop making these things!"
This is where this article gets interesting: I am going to share with you just how I made these orb icons, so that you too might try and see whether or not you can stop making them. Yes, this is a tutorial for making Orbicon icons using Photoshop and Icon Developer. I hope it comes in handy for someone.
Step one: Open Photoshop and Icon Developer.
Step two: Find some image or logo that you would like to use for your icon. If you want to Google search images for the logo that will work as well. I like to use http://www.brandsoftheworld.com to find high resolution EPS (encapsulated post script) images for download. So I am going to use this site to find a logo for www.mozilla.org - the giant red dinosaur ( found here) - and I am going to download the EPS of it and save it to disk.
Step three: Open the EPS file using Photoshop.
Should look something like this:
Just click OK on this dialog box.
|Step Four: The next step will be to make the EPS file background transparent. The wonderful Magic Wand in the toolbar of Photoshop. |
Notice that I have selected the Magic Wand and set the tolerance to (5) and chosen anti-alias and contiguous.
Then choose the white area around the mozilla.org dinosaur, and go to select and choose inverse. Push [ ctrl + X ] or go to Edit --> Cut and that will remove the dinosaur from the EPS file.
Next go to File --> New and set the background to transparent, click ok to the default size then go to Edit--> Paste and a new image with the red dinosaur will appear, with a transparent background.
Step Five: Now to begin making the Orb'd dinosaur. The easiest way I found to do this was to reduce the image size to 128x<128... meaning go to Image-->Image Size - and change the smaller number to 128 (constrain proportions selected)... this case being the height. Your dinosaur dimensions should be 146x128. Now go to Image--> Canvas Size and change that to 2 by 2 inches. The blank area around the dinosaur should be a lot bigger now. Now we will go to Filter--> Distort--> and Spherize. We will increase the slider to 100% and Press OK... then apply it 2 more times, by pressing [ ctrl + F ]. the dinosaur should look somewhat larger and kind of Orb'd. Go to Image--> Trim choose transparent pixels check all of the sides (top, bottom, left, right) and Press OK. Leave that image alone.
|Step Seven: Add the mozilla.org dinosaur to the icon. Go back to your dinosaur and Press [ ctrl + A ] and then [ ctrl + C] to Copy the dinosaur... then go to your orb and press [ ctrl + P ] to Paste the dinosaur there. Then Free Transform the dinosaur, by Pressing [ ctrl + T ] - set the horizontal and vertical scale to 25% and center the dinosaur in the orb. (Figure6) - Then right click the dinosaur Layer and go to Blending Options - choose Drop Shadow and Press OK. Choose the Dinosaur Layer and set it to 80% Opacity. (Figure7)|
Figure6 - click to zoom
Figure7 - click to zoom
|Step Eight: Create the Icon. Now go to Image-->Trim... this will make the image back to a smaller size. Then go to File-->Save For Web and choose PNG-24 Then select the Image Size tab and uncheck Constrain Proportions and set the size to 128x128.(Figure8) Then Click Save.|
Figure8 - click to zoom
Now We Have Our 128x128 PNG
|Step Nine (Optional): Open Icon Developer and choose Convert Image to Icon. Choose ONLY XP Icons and click OK(Figure9). Then go to File-->Save As and name your Icon.|
Now We Have Our 128x128 Icon
Step Ten (Optional): Zip your *.ICO and *.PNG file together and Upload it to the Misc Icons Section at Wincustomize.com. :)
You can see examples of my Orbicons over at http://wstaylor.wincustomize.com - ENJOY !!!
A quick look at what's coming..
Tuesday, January 04, 2005 by Frogboy | Discussion: WindowBlinds
Ah customization of Windows. It's a gradual process. Using the popular voice over IP chat program, Ventrilo, let's take that journey with WindowBlinds 4.5.
...In the beginning there was Windows classic. And it was good. Simple, fast clean. Then Windows XP came and it came with a skin (known as "visual styles" when you're "skinning" the entire GUI).
And so the title bars and borders were changed. And it was still good. But not complete. For only theme-aware applications can be skinned by Microsoft's msstyles run through Windows XP.
But there was Stardock, who had been skinning the GUI of operating systems for many years. They had WindowBlinds.
WindowBlinds could skin even non-theme aware programs (i.e. most programs aren't theme aware). And so it was better. But skinning more elements of the GUI also came at a performance cost that some noticed.
So then Stardock came out with WindowBlinds 4.x. culminating with WindowBlinds 4.4 released in 2004. And its use of hardware acceleration and other features exclusive to Windows XP make WindowBlinds not just faster than the default Windows XP style (so fast that the high performance PC company, Alienware chose to bundle WindowBlinds with their computers) but on part with the original classic Windows interface. Users could have their cake and eat it too.
And soon WindowBlinds 4.5 will be here. It has some very key features:
Hue/Saturation colorization. WindowBlinds had colorizing before but not like this. Before, you could apply a color to an entire skin. This worked on some skins quite well but on many skins not so well. Why? Because if you take a blue and yellow skin (For instance) and apply red to the whole thing, the entire thing looks..well washed out.
Hue shifting is different. You shift the colors of the skins rather than apply a color mask to them. This has the effect making skins look a lot more normal and interesting.
So a skin like VectorCell might look like this normally and we'll load up the Setup dialog of that Ventrilo program so you can see the dialog of a pretty busy looking window:
But with Hue and saturation shifting it could then be made to look like this:
Notice how natural it looks? It doesn't looked washed out. Even if you would never want a purple skin on your desktop, it now looks like it designed with purple in mind.
Or how about if you wanted to have it be a more vibrant blue?
You can have that too. Or any other color you can think of. All looking as if the skin was always meant to have that.
But let's go with something harder. Something more challenging. How about some skin that has lots of colors?
Here's Faux-Toon. It has many colors. You could not colorize this with the old system because it would look very muddied with a single color grafted onto everything.
Not that we'd recommend this color combination but rather just as a demonstration of the difference between hue-shifting (a WindowBlinds 4.5 feature) and what you can imagine applying some arbitrary color to the entire thing.
Plus you have the fact that there's thousands of WindowBlinds skins out there:
And once last look at this dialog using the default Windows XP msstyle:
So in other words, if you want Windows XP to look like Windows XP consistently you will want WindowBlinds.
The Second new feature of WindowBlinds 4.5 is the ability for WindowBlinds visual styles to now include special styles just for the frames of Internet Explorer / Explorer browser windows. We don't have any examples done yet so we'll have to wait to show some screenshots. But you can probably imagine what skin authors will be able to do with this. We may expand this further so that in a given skin, skin authors can define specific frames for specific programs within a single skin if they choose.
The Third new major feature of WindowBlinds 4.5 is the ability to have per-pixel alpha channels on the Start menu itself. Those of you who like very nice Start menus can imagine the cool stuff that can be done with this. We don't have any skins done yet that show this off (we're working on them now).
The Fourth major change in WindowBlinds 4.5 which may get into 4.5 or have to wait until a minor update is the ability to have per-pixel alpha on menus. Many skinners have requested this for years.
The Fifth major addition to WindowBlinds 4.5 (or it may get into a subsequent update depending on time) is support for the 64bit version of Windows.
Plus, there are tons of small tweaks and changes here and there to improve performance, fix bugs found/reported, etc.
So there you have it, WindowBlinds 4.5. It should be out in the next couple of weeks. If you have Object Desktop you'll get this automatically. You can purchase WindowBlinds or Object Desktop here.
I'll Show You Mine if You Show Me Yours!
Tuesday, January 04, 2005 by Cordelia | Discussion: OS Customization
Here are some of my top picks in the various categories. There are always so many good choices it's hard to narrow it down to just a few. What are your favorites? Include a screenshot! Here are some of mine:
Faberge by Pictoratus
Dreamweb by teddybearcholla
the eye by teffumi
This is a brand new category. Be sure and post your screensavers!
GoldPlanet by adni18
GAMP Designs by GAMP Designs
Coax Coax by APB
MousePill by Woodbridge
X-Alien_2_[Grey] by JJ Ying
GANT Blue Animations by DPG
Ascension Animations by Pixel Pirate
Here is my current screenshot:
You can find all of these items and a few more on my recommendations page: Link.
Share some of your favorites!
Sunday, January 02, 2005 by joeKnowledge | Discussion: Community
| ||Maybe you have never seen a Tiggz skin, well here is your chance! Tiggs WinCustomize page is full of skins that you might want to put on you desktop. Tiggs current skin called GT3 is amazing and very nice to use on your desktop, especially if you like dark skins. |
Take a look at it here:
I want to especially note the DX widget that allows you to change Windowblinds skins. SkinChanger by Tiggz, if I am not mistaken, can now run whether you have DesktopX running or not.
And it just keeps going! What was his very first skin?
GTcool by Tiggz for CoolPlayer
Coolplayer??? What is That???
Not to mention other skin firsts for Tiggs, in my honest opinion, was one of the few skinners who helped keep Object Bar (one of the best apps on WinCustomize) alive and skinned. With Tiggs Object Bar skin that matches the GT suite of skins, you now have a really cool functional start bar for your desktop.
I use it myself (with dark and green skins that is ) and find myself a little inspired to finish my own Object Bar theme.
Now if your looking for a lighter theme from this author, then take a look at Killer suite of skins
For Example: Killer by Tiggz for WindowBlinds
Want some more color? Try a tasty blue Rubicon suite
For Example: Rubicon by Tiggz for Object Bar
Lastly, I want to show you this. I personally do not use Bootskins, but this one takes the cake. While it is in Black and White and may not have much else, I think the overall design deserves mention. Introducing GT2 for Bootskins
Some might say: Joe... it nice and all but... Then I would say: Look at it! Its really cool and it goes with the whole look of GT2. And it make great use of only having shades of gray.
So take a look at Tiggs WinCustomize home page. While your at it, take a look at Tiggz Deviant Art home page too. Browse around both of them, and remember to look at the recommendations and favorites!
Until the next WinCustomize User Page Focus, I'm joeknowledge/joetheblow
A list for one who wants to skin it all...
1) Make a WindowBlinds skin! (high quality, and with none of that trendy aero/longhorn/aqua or whatever the latest crap is now, of course) This means I have to actually sit down for a while and have some patience with Photoshop and CorelDRAW…not to mention SkinStudio.
2) Create some icons! I’ve drawn out a few, but I have some troubles putting my ideas into pixels. Can you smell a suite yet?
3) Post more on the WinCustomize and Skinning.net forums! I’m more active on the Stardock IRC, but I like the boards too. I mean, who doesn’t want to miss out on the WB/msstyle arguments and the other nonsense?
4) Put together some tutorials for ObjectDock Plus, ObjectBar 2, and hopefully some others as well. :D Maybe I should make a tutorial entitled “Annoying Users: The 7 Deadly Errors” after seeing all of the controversy that's taken place here over the past year.
5) Start to learn some Jscript so I can program DesktopX widgets. I’d love to try to play with Bungie.net’s Halo 2 XML stats!
6) Continue to help out some SDC_Guests on #SDCentral and help them on their path to skinning enlightenment…
7) Attend some more SkinStudio classes hosted Skinartistry’s Bones2112 and NightTrain2002! I’ve missed the past two weeks, but the one class I did go to I had a lot of fun! :CONGRAT:
8) Look into getting some new Trillian 3 skins…there’s a real shortage of them! (And new plugins, cmon Cerulean!)