Musings on, Art, Skinning, Computers, and the True meaning of Life. (AKA The Lego Theory)
My Computer, and CorelDRAW for Skinners.
Published on January 15, 2005 By mormegil In
 
Icon 08 (My Computer)

     Today we are going to do one of the more complicated icons, the "My Computer" icon. Because I am trying to keep these relatively simple I have decided to do a simple LCD monitor. I will be using the "Mesh Fill" tool to do 90% of this icon. I have done a video on using the Mesh Fill tool. You can view it here.
    I have also done a video on doing the "Gloss" look, you can check it out here.
 
Step 1:

Like I said, we are going to be doing mostly mesh fills to make this. I start by drawing several Rectangles with the Mesh Tool, and shape them into my basic shapes.


Step 2:

Now I start molding the shape of the monitor, with the Mesh Tool. Whites and gray colors on the nodes.
Once again check out the Mesh Fill 101 video for more on this technique.
Step 3:

You can see the how using this technique is starting to give us some shape to the main panel.



 
Step 4:

Now I start to do more mesh editing, to get the look I want. I am going with some bevels, like we have in the folder.



 
Step 5

This shows how you can get quite detailed with the mesh if you want. In the end this monitor will only consist of 4 mesh fills. and a few other graphics.




 
Step 6:

Now I copy my main shapes, clear the Mesh Fill, and fill them with a light grey.
Then I use the "Interactive Transparency" tool and apply the same "Brushed" texture I used on the folders. (I will do a video on this later)
Step 7:

Now I draw a shadow mask and pull a shadow off of it, while using the same technique as in our earlier icons.

Step 8:

Most of the time I will draw my own image for the screen; something simple. This time I thought it would be fun to use a bitmap.
I take an image I am using in the Galactic Civilizations UI, and skew it slightly, then crop it down to fit in the screen area.

Step 9:

Now I ad some glare.
See the Gloss 101 Video on more on how to do this.

Step 10:

Now once more we make the reflection on the floor, same as the earlier icons.
(Video on this to come later.)

Finished Icon Image.


 




Download Finished Icon Here

That's the "My Computer" icon. We will be seeing this used a lot in icons to come. The image in it might change, but with this I can use it if I get the chance to do a Galactic Civilizations theme.

Read the other Icon-A-Day Articles: Icon # 1, Icon # 2, Icon #3, Icon # 4, Icon #5, Icon # 6, Icon # 7.

CorelDRAW for Skinners videos: Mesh Fill 101, Gloss 101.

And don't forget to check for all the Icon-A-Day icons as they get made, in the Miscellaneous Icons Gallery at Wincustomize.com


Comments (Page 1)
on Jan 15, 2005
*CerebroJD's jaw ricochet's off the floor*

Thats incredible! Probably the best icon of a monitor I've ever seen....ever!
on Jan 15, 2005
CerebroJD said it all.

Simply the coolest thing I have seen to date.

Thanks for the lessons and the vids, they are indespensible.
on Jan 16, 2005
WOW, someone give this man an award, Thak you for taking the time to do this Paul. The videos are really cool, you make everthing look so easy. I hope you make more videos, I'm learning a lot from them. Thanks again, you're the man!!
on Jan 16, 2005
All I can say is: AWESOME. Thank you for your time and effort.
on Jan 16, 2005
Wow... amazing. Like Cerebro said, the best monitor icon EVER. As a Coreldraw user, I really appreciate the tutorials... very helpful.
on Jan 16, 2005
i really love the videos........one question, how can i store them on my computer ??
on Jan 16, 2005
-OZZY-,

After running the video to the end in Windows Media Player, make sure the "Now Playing List" is showing and highlight the title of video, go to "File>Save As" and select a spot to save. It should save as a .wmv file.

Again, you must run video to end before doing this, otherwise the "Save As" option is not available.

Hope this helps.
on Jan 16, 2005
You can also just right click on the video's hyperlink and say Save Target As.
on Jan 16, 2005
thx corky & mormegil !!! i've done this before but i just keep on forgetting these things
on Jan 18, 2005
Nice icon.. ya make it look to easy.
on Jan 20, 2005
Man... WOW...

WOW on the Tutorials

WOW on the Icons

and WOW on all your efforts to do this for all of us!


1 Q - what did you use to make the video, that was great!
on Jan 20, 2005
I recorded the video with CamStudio, and then resample it with Windows Movie Maker 2.
on Feb 03, 2005
this might be simple, but it is kicking my butt...how do you skew the bitmap for the screen graphic? When ever I put a bitmapped picture in the icon and try to skew it with the mesh tool the bitmap goes away and is replaced with a solid color I can do this in photoshop...just not in Draw
on May 21, 2005
Dude nice job... what do you use to create all of this?
on Apr 30, 2008
Hey Mormegil, why can't i see the images in the tutorial steps, I unable to view any of the images above and can see only the text. Thanks, Anmol.
Meta
Views
» 24728
Comments
» 17
Category
»
Sponsored Links