First Previous Page 5 of 7 Next Last

CorelDRAW For Skinners: Part 6

Mesh Tool 201, Makeing a Folder form scratch.

Saturday, February 19, 2005 by mormegil | Discussion: Icons

 CorelDRAW for Skinners. Part 6: Advanced Mesh Tool 201
 
I have gotten a lot of requests for an Advanced Mesh Tool Tutorial, so today I am going try and help. Today's tutorial takes us from a blank page to a competed folder icon, almost entirely created with Mesh Fill objects. One new thing this week is that I am also posting the CDR file that I made doing the tutorial. So you can play with it yourself.

Note: This tutorial is very long, (32 minutes) sorry about that, and I ramble a bit, but it is a good example of how to use the Mesh Tool, to "do" something, rather then just how it functions. Hopefully that part will be there as well.

I would also like to take this opportunity to thank Stardock for hosting these video files, as I know they must take up quite a bit of precious bandwidth. Hopeful the people who are enjoying them appreciate it as well.

This weeks videos:
  
Mesh Tool 201 (Making A folder from scratch)
Stay tuned for more. Requests encouraged, and appreciated.
 
Video #10: Mesh Tool 201

Mesh Tool 201 Sample CDR (CorelDRAW 11 Format)


For all the CorelDRAW for Skinners tutorials visit:
The CorelDRAW for Skinners Index

To see these Techniques in use visit:
The Icon-A-Day (Index)

Don't forget to check out all my Icons, Skins, and more Tutorials at my Skinning Homepage Mormegil.wincustomize.com.
All Images, Videos, and Text in this tutorial are © Paul Boyer, and may not be reused without written permission.
 

Icon-A-Day, Icons # 48 & # 49, BAT and Application Files

I like to have these two go hand in hand.

Saturday, February 19, 2005 by mormegil | Discussion: Icons

Icon 48 - 49 (Application & BAT Files)

Over the next few days I would like to polish off most of the remaining default icons supported in a standard icon pack. Today we will take care of two of them.
Yesterday we did the INI file, and in the process we created a gear that is leaning on a file; today we will put that to good use.
 
Step 1a:

First I copy our INI File from yesterday. I Nudge the gear out of my way, delete the text copy and lines from the page, and change the Title to BAT.

Step 2a:

Now I change some colors. I am going to make the page Black for these two icons. To make them look more "Command Prompt-ish". I also paste some text in. In this case it is a copy of an Autoexec.bat file I found on the Internet. (So very retro).
Step 3a:

Now I Nudge our gear back in place. Since I have not moved the file and I have my
Nudge set up the way I showed in the "Setup" Video, I know it is exactly in the right place. So I am done with that.
 
Step 4a:

Now using our
Reflection Technique we give the and page gear a new shadow.
Step 5a:

Since this is a Bat file it is more or less just text, so I want it to reflect that it is editable. I copy our pen from the My Documents folder and place it in front of our new icon.
Just to make it stand out a bit more I use the Mesh Tool to go in and edit its color, making it Blue.

Finished Icon Image

Note: As you can see I changed my mind, as I often do, about the color of the title bar. I changed it to the color I have been using for the System File icons.

Step 1b:

Now for the next icon we copy the Bat file we just made. Nudge the gear off, change the title to C:\, as well as fill the page with Some 1's and 0's to indicate that it is a binary, or compiled file.

Step 2b:

Now as before I simply
Nudge the gear back in place.

Step 3b:

As Above I give our new icon a new Reflection using our
Reflection Techniques
 
Finished Icon Image.


 




Click here to download the finished icon.

I think tomorrow I will stay in the realm of File icons. Now I'm off to do this weeks CorelDRAW for Skinners.

Read the other Icon-A-Day Articles:
(Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

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

All Images and Text in this tutorial are © Paul Boyer, and may not be reused without written permission.

Icon-A-Day, Icon # 47, The INI File

Once more into the File Icons my friends.

Friday, February 18, 2005 by mormegil | Discussion: Icons

Icon 47 (INI File)

Well, today is Friday and I'm beat, so as with the last few Fridays I was thinking it would be nice to do something simple. Our iconpack is coming along well, better than I had hoped in fact. However we have many icons to go, a lot of them are not very glamorous so I think we should polish off a few more of them. So tonight we will do one more; the INI file. I am using this as our Configuration file icon, but I will make an INF file as well later.
 
Step 1:

We will start by copying our Text File and changing the title to INI.
Step 2:

Now once more we will steal some of our prefab Graphics and Copy one of the gears from the Admin Folder.
Step 3:

Now using our
Reflection Techniques we give the gear and the file a new reflection.

 
Step 4:

Now using our
Shadow Technique We give the gear a new shadow.
Finished Icon Image







Click here to download the finished icon.

Tomorrow I will polish off another simple File icon to make time for this weekends CorelDRAW for Skinners.

Read the other Icon-A-Day Articles:
(Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

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

Icon-A-Day, Icon # 46, The Desktop

This one everyone sees, but not many use.

Thursday, February 17, 2005 by mormegil | Discussion: Icons

Icon 46 (Desktop)

This is one of those icons that everyone looks at in your icon pack, but is actually rarely seen in use. Mostly as a 16x16 in your quick launch bar, but never the less I like to spend a little time on it, an make sure it looks good.
Since the Desktop is essentially just a special kind of folder, I am going to use the styles we are using for the folders, so that at least on some level they match.
 
Step 1:

I start by using the mesh fill and some rectangles, to make the basic shapes of the desktop.
Step 2:

Now using more rectangles I use the Mesh Fill tool to make some corner covers for our desktop.

Step 3:

To make it match the folders I make the corners black, and I give the Main desktop a nice Brush texture using our transparency 102 techniques.
 
Step 4:

Now I give desktop and top two corners some
gloss, and make a simple shadow off the entire thing.
Step 5:

Now I copy the File icon off the My Documents folder, and rotate it slightly so it looks like it is sitting on our desktop. I also make a copy and change the title bar to blue. To polish them off I give both the files a slight drop shadow.

Step 6:

last I make a copy of our pen from the my documents folder, and set it in front of our almost completed icon.

Finished Icon Image




Click here to download the finished icon.

Join us tomorrow as we dive back into the file icons.

Read the other Icon-A-Day Articles:
(Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

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

Icon-A-Day, Icon # 45, The Shortcut Overlay

This little guy never gets any love

Wednesday, February 16, 2005 by mormegil | Discussion: Icons

Icon 45 (Shortcut Overlay)

Today we will do the only other "Overlay" icon in the standard icon Pack. The Shortcut overlay is always one of the easiest things to make, but not necessarily the easiest to design. It is simple enough to put a arrow in the corner of a square and call it done. I like to spend some time making sure that it matches the rest of the icons, and looks good overlaying the Folders, and Files.
 
Step 1:

First I start with a simple 2D arrow.
Step 2:

Then I slant I back a bit with the perspective tool.

Step 3:

Now using the
Contour tool I give our arrow a poor mans Bevel.

 
Step 4:

Now I give the backs of the arrow some gradients, and a blend. I also throw on a bit of
gloss.

Step 5:

Now we give it a
reflection, and a a shadow.

Finished Icon Image:




Click here to download the finished icon.
 

I know the final icon image is not very impressive, but I show it with a few examples in the screen shot. Tomorrow we will take a stab at the Desktop Icon.

Read the other Icon-A-Day Articles:
(Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

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

Icon-A-Day, Icon # 44, My Documents Folder.

One more of the major components.

Tuesday, February 15, 2005 by mormegil | Discussion: Icons

Icon 44 (My Documents)

Today we finally get around to making the My Documents folder, usually I make this right at the beginning of the pack, but with this pack I was not sure what I wanted to do, so I put it off until now. For this icon I we will re-use several elements and make one more that we will use again later I am sure.
 
Step 1:

First I gather some elements, the Open Folder, the Default Document, the Picture for the my Pictures Folder, The piece of file from the My Video Folder and last the HTML file from the Web Folder.

Step 2:

Now I size the film a bit and place it in front of the Html File.

Step 3:

Then I pile in the Picture from the My Pictures folder.

 
Step 4:

Then I move all our new elements into the folder.

Step 5:

Now I give our folder a new reflection.

Step 6:

Now I move our Default File in front of the Folder and Slant it back with the perspective tool. I also give the file a nice shadow.

Step 7:

Now I want a pen, so I am going to make a Sharpie like pen out of some rectangles, using the Mesh Fill.

Step 8:

I shape the new Mesh Objects to look more or less like a pen. I also give the pen a shadow.


Finished Icon Image





Click here to download the finished icon.
 

Well, now we have one more of the major components to our pack. We will be done before you know it. Tomorrow we shall try and do one of the "Other" icons.
Note: I thought the file Icon looked kind of bland in blue, so as you can see in the final image, I changed it to a red.

Read the other Icon-A-Day Articles:
(Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

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

Icon-A-Day, Icon # 43, The Favorites Folder

A Valentines Day Special.

Monday, February 14, 2005 by mormegil | Discussion: Icons

Icon 43 (Favorites Folder)

Well, today is Valentines Day so I thought I should do something romantic. Then I realized I was making Icons, and metallic Sci-Fi style icons at that. Where the heck am I going to find romance?
Then I thought way back to the early days of the Internet and my first browser. I don't even remember which one it was now, but what ever it was it had a heart for the Favorites icon. Its a bit sappy, but hey its Valentines day, and its an excuse to do a big sappy heart. So lets do it.
 
Step 1:

We start by taking the Web folder icon and deleting the Globe and Cable. Then I make a simple 2D heart.

Step 2:

Now using the Perspective tool, I slant our heart back to make it look like it is leaning on the folder.

Step 3:

Now using Contour I give the heart a "poor mans bevel".
I also copy the heart make it smaller and offset it a bit. Then I blend the two hearts together to give the heart a bit of a rounded look.
 
Step 4:

Now we give our heart some gloss.

Step 5:

Then we re-do the folders reflection, and create two new reflections for the heart.
Step 6:

Lastly we give the heart a couple of drop shadows, one on the folder and one on the floor.


Finished Icon Image.



 



Click here to download the finished icon.
 

Well, happy Valentines day everyone. Tomorrow we will finally get the My Documents folder taken care. 

Read the other Icon-A-Day Articles:
(Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

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

Icon-A-Day, Icon # 42, The Default Document

almost forgot this one.

Sunday, February 13, 2005 by mormegil | Discussion: Icons

Icon 42 (Default Document)

I was planning on doing the My Documents folder today, but once I sat down to do it, I came to the realization that I did not have a Default Document icon. This may seem like nothing; we have the default file, the Word Document, assorted Music formats and so on. You see the problem is this: I use the Default Document icon a lot; I use it in several folder icons and as the base for several more file types. We have already more or less used it when making the DOC file icon.
How's that? How can we have used it already, when it is not done? Well it seems we may have already made it - kind of. Let me explain....
 
Step 1:

I have what is more or less our Default Document file in our Doc File, so we start by copying it.

Step 2:

I simply remove the Word Logo, as well as the DOC extension. This icon will end up being used for any document windows does not have an icon assigned for, so we have to leave the extension blank.

Step 3:

Now I want to change the title background color, I decided to do a Dark Grey, but as you can see in the last step today, I changed my mind and made it the same color as the default file title. I think we will use this for all the system file icons.

 
Step 4:

Now I need to give it a new reflection so I do that. Straight down to go with the new style of reflections. (Note to self, fix reflections on earlier File icons.)
Step 5:

Now I throw a box with some different colors behind the file, to make sure that it looks ok on different color backgrounds.

Finished Icon Image.




Click here to download the finished icon.

It may seem a bit odd to spend an entire tutorial doing such minor changes to an existing icon, but The Default Document needs to be simple, and generic, and that I think is what we have here.

Tune in tomorrow for a Valentine's day treat, as we do the Favorites folder.

Read the other Icon-A-Day Articles:
(Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

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

Icon-A-Day, Icon # 34, JPG File

Let us take a brake from folders.

Monday, February 7, 2005 by mormegil | Discussion: Icons

A Icon a day Keeps the Creative
Icon 34 (JPG File)

    Today we will take a bit a break from the folder icons, and do one of the File Type icons. I am still not quite set in my ways on the File icons and hope this one will go a bit further in establishing the style that will carry thru the entire pack.
Step 1:

We will start by, copying our Default document and My Pictures folder.
Step 2:

I want to have the color band of all the Graphics file types to have a kind of RGB fade. So I mess with the band until I like what I see.
Step 3:

Now I copy the Picture out of one of the Photos in the My Pictures folder, and crop it down to fit on the white portion of our file.

 
Step 4:

I am going make the entire file area show a transparent version of the photo, so I use the Interactive Transparency tool and give it a gradient.
Step 5:

Now we copy the photo from the folder and place it in front of the file. I skew it a bit to make it look like it is leaning a bit more on the file.

Step 5:

Then I copy the paint brush from our Shared Pictures folder, and set it in front of the picture.
Using the Reflection techniques I give our file and picture a reflection.
Step 7:
The last thing I do is give the picture a shadow.

Finished Icon image

 

Click here to download the finished icon.

Well, I am still not 100% sold on the underlining style of the file icons, but we will move on to another tomorrow and see if it grows on me.

Read the other Icon-A-Day Articles: (Icon-A-Day Index)

CorelDRAW for Skinners.
Part 1: Mesh Tool 101 & Gloss 101
Part 2: Drop Shadows 101 & Reflections 101
Part 3: Exporting 101, Contour & Line 101
Part 4: Transparency 101 & Transparency 102

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

Icon-A-Day, Icon # 33, Network Connections Folder

1, 2, 3, Bam were done.

Sunday, February 6, 2005 by mormegil | Discussion: Icons

Icon 33 (Network Connections)

   Most likely this will be the easiest icon we will do. We already have the Web Folder icon from Lesson # 20, and we already have several "System Folders" from icons like last nights. To make our Network Connections icon we will simply take elements from two icons and move them together. I know some of you will say it looks too much like the Web Folder, but the truth is that most people will never see the web folder, and this one will be seen much more often, since it is a Control Panel icon.

Note: When in Package Builder mode of IconPackager this Icon is called "Dialup Networking"
 
Step 1:

First thing we do is copy our Web Folder, & ActiveX Folders from earlier.

Step 2:

Now I delete the Folder Portion of our Web Folder, and the X part of out ActiveX folder.

Step 4:

Now I move the Two Elements together. Bam. We're done.

Finished Icon Image

Click here to download the finished icon.

Tune in tomorrow for something more exiting.

Read the other Icon-A-Day Articles: Icon # 1, Icon # 2, Icon #3, Icon # 4, Icon #5, Icon # 6, Icon # 7, Icon # 8, Icon # 9, Icon #10, Icon # 11. Icon 12 & 13, Icon # 14, Icon # 15, Icon # 16, Icon #17, Icon #18, Icon # 19, Icon #20, Icon # 21, Icon # 22. Icon #22, Icon # 23, Icon # 24. Icon #25, Icon # 26, Icon # 26, Icon # 27, Icon # 28, 29 & 30, Icon # 31, Icon # 32.

CorelDRAW for Skinners.
Part 1: Mesh Tool 101 & Gloss 101
Part 2: Drop Shadows 101 & Reflections 101
Part 3: Exporting 101, Contour & Line 101
Part 4: Transparency 101 & Transparency 102

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




web-wc01