Glossy 3D Interface with Corel Draw

Let’s make something clear, I’m NOT a designer, I am a coder. I learn bit about design just because I don’t want my apps to end up looks to much like crap as many Open Source application being done without the help of a designer.

So here’s my story. One day I was asked by a client if I could show them what their website might look like if I was to build them using CMS, sure enough I didn’t want to show crappy sample website with standard template even if it’s only a preview. I want it to look at least a close-to-nice website, complete with their company name on the header. I searched Google for a tutorial on the first thing that crossed my mind, glossy interface design. I got a nice one with a very promising title, “Principles of Glossy Interface Design” (http://www.partdigital.com/tutorials/glossy), it’s in Photoshop.

I opened Photoshop, click here and there, input this and that, and I’m stuck at some point where it didn’t give me clear instruction. After few minutes of trying in vain I cowardly gave up (hey, Photoshop is not one of my thing). So I thought I’ll give it a shot with Corel Draw at which I’m more experienced with, what I did was this:

1. Create a rounded rectangle, do it by first create an ordinary rectangle by selecting Rectangle Tool from the Tool Box, then use Shape Tool to drag the corner to make it round.
   
   
   
   
2. By using the Fill Tool, fill the rectangle with RGB value of 117, 153, and 163 (as instructed in the mentioned article, any color would do of course), don’t forget to remove the outline by using the Outline Tool.
   
   NOTE: When Fill Dialog opened, the default color input model is CMYK, change the model to RGB.
   
   
3. Next is to create ellipse crossing the rounded rectangle, fill it up with white and remove the outline. The intersection between this ellipse and the rounded rectangle will be used to create shine effect by setting the intersection to semi transparent white.
   NOTE: The illustration below shows the ellipse without fill color and with outline for the comfort of our viewing, it should be white and without outline.
   
   
   
   
4. To create intersection between ellipse and rounded rectangle bring up Shaping Dialog from the main menu Arrange -> Shaping -> Shaping. Select the rounded rectangle, select Intersect from the shaping type while making sure that on the Leave Original section Target Object checkbox is cleared. Click the Intersect With button and then click on the ellipse to create intersection between to shapes and remember to remove the outline of the intersection.
   
   
   
   
5. Now to create that shiny effect we talked about a while ago we must set intersection to be nearly transparent, to do so use the Transparency Tool click inside the intersection and drag it slightly at any direction, that should create Linear Transparency which is not what we need, we want a Uniform Transparency which we could get by setting Transparency Type at the transparency toolbar to Uniform. Next, set the Starting Transparency value at the same toolbar to 70.
   
   
   
   
6. Starting to look shiny here are we? No? Ok, let us move to the next step where we back to work on the rounded rectangle. To add a rather 3D look, we’ll fill the rounded rectangle with gradient, so select the rounded rectangle and click on the Fountain Fill Dialog, a dialog will appear with gradient editor, set the Angle to 90, set the “From” Color selection to RGB 117, 153, 163 and “To” Color to RGB 153, 219, 222.
   
   
   
   
   
7. Now don’t tell me you can’t see something started to look shiny, but yes, something is missing, a little shadow perhaps. Select the rounded rectangle, select Shadow Tool and click on the center of rounded rectangle and drag it just a little bit at any direction. A Shadow Dialog will appear on the toolbar , set Drop Shadow Opacity and Drop Shadow Feathering to 10, Drop Shadow Feathering Direction to Outside.
   
   
   
   

Nice isn’t? Well, for a programmer at least. I guess that’s all I can share, next time I probably going to share some other simple tips on Corel Draw for Programmers.