Design

22

Nov/11

Designer Spotlight: Interview With Web and Graphic Designer Veerle Pieters

by Robert Bowen under Design, Feeds, Web Design

One of the things that we hear a lot in the design/development field tends towards keeping that passion alive which first drove us to this arena. For when we keep that flame burning, our work will always remain vibrant and successful. This idea is exemplified in our interviewee here, Veerle Pieters (one of the fascinating minds behind Duoh!), whose love for design in all its various forms shines through.

We’ll allow Veerle to introduce herself, informally in her own words, but we would like to take a moment and describe her in our words before we get to that. If you are not familiar with Veerle, her blog, or her work, then you are in for a real treat. Her work is as whimsical as it is precise, and packing as much personality as the lady herself. Her award winning work is a vibrant expression of her glowing inner child with the crisp, clean professional edge she has honed through years of imaginative exploration of graphic and web design.

Beginning as an illustrator in print design, Veerle grew her talents along with the world wide web giving her a much fuller perspective on the field of design overall. Her boundless talents are an inspiration to so many, and today we are lucky to be able to feature her and share some of her insights with our readers. Without any further ado, on with the interview…

The Interview & Showcase

Thanks again for agreeing and taking the time to answer these questions. So tell us a bit about yourself. Who exactly is Veerle Pieters? How would you describe yourself?

I always find talking about yourself extremely hard but here we goâ€¦ I’m a graphic/web designer hailing from a small but beautiful European country called Belgium. I am a color lover that likes to listen to deep soulful music while designing. When I’m not at work I like to ride my bicycle to clear my head and snap pictures along the way to share on Instagram just to show how much beauty there is around us if you just open your eyes to see it.

Who are some of your biggest influences in web design?

Right now not really someone particular but many years ago when I started with web standards I was influenced by Jeffery Zeldman and Douglas Bowman and Dave Shea’s Zen Garden. I try to do my own thing and not be influenced by trends that overdo a certain design element. Personally I will use something that everybody claims you shouldn’t because I like to believe it’s all in the way how you apply it. I am of course also influenced by waves of techniques that popup in our industry like ‘responsive web design’ for example.

You’ve worked in both print and web design, which do you prefer and which offers the most freedom?

Print is still my first love because a web site can never replace that tactile feeling of having something in your hand you’ve created. Web design offers the most freedom, can be controlled easier and has a higher tolerance for error. Mistakes are deadly in print, especially when you are creating something that has a super high print volume.

What are some of your favorite projects you’ve worked on?

One of my favorite projects and most challenging ongoing project is without a doubt Fab.com. Another one is jolena.be where I really got the chance to explore creative boundaries. I wrote a little about the process of that project on my blog.

What advice would you give to other web designers?

I think the most important thing is to stay passionate about what you do and don’t loose that drive to constantly learn new things because we are part of a constantly changing environment. Learning and experimenting is a very important aspect of what de do. If you think you learned enough already I’m afraid that web design isn’t the right path for you. Also, believe in yourself and stay true to yourself and don’t be afraid to fail. Sounds clichÃ© but that is what makes us what we are.

Can you give us a summary of your process?

Depending on how I feel and the amount of ideas that present I usually start by using my own Inspiration Stream as a starting place to look for that spark. Long time ago I browsed around CSS galleries but I’ve learned that they block my inspiration instead of helping. The most successful way is to look at things that aren’t related to web design at all such as my stream. When I got that inspiring spark I mostly start the process by doing some sketches in one of my little notebooks. Not always though, as I sometimes begin directly in Photoshop too. The more complicated projects have a wireframe stage that we go through first. Once those are approved by the client, the design work in Photoshop starts. I’m not part of the ‘design in a browser movement’ as I feel that approach blocks my creativity. About 90% of the projects, start with the inner pages first because these are usually the most difficult ones to work on. If the client approves the design we start the technical part by writing the CSS/HTML.

What are some of your thoughts on the importance of web standards?

Web standards are important but they are just guidelines, they aren’t a relegion if you understand what I mean. It’s a set of guidelines and best practices to help you but not a rule of law. It’s ok to deviate or improvise if you need to, and if there is no other way of doing it semantically. If you start mailing other people by pointing out validation errors you aren’t getting it. Projects can be complex and zero validation errors is sometimes impossible. The important part is that you try and that you think about structure, accessibility etcâ€¦

How do you convey the importance of web standards to your clients?

I don’t convey it all. I just do it. Clients shouldn’t have to worry about this or decide on, it’s up to us to use what is best for the client’s interest and web standards does just that.

What made you choose expression engine for your blog over other options?

I opted for ExpressionEngine because at that time it was the only system that would let me create a web site my way instead of the other way around that the system dictates how you should use it. I wanted something that I could use my templates, just the way I coded them, plus I wanted a system that didn’t inject extra code in my templates. Another important reason was that it was powerful enough to create a site that covered all my needs without having to resort to learning PHP because I needed to extend it. I had no interest in learning another program language as a designer.

What drew you away from print design to web design?

Because I was intrigued by this new thing called web design. I saw an opportunity that it could become something very important and that it would provide a source of income.

Web design changes so quickly, how do you keep up?

By reading books and following tutorials.

What are some of the biggest challenges that you see facing the web design industry today?

The biggest challenge imho is keeping up with our fast changing industry. Not an easy task to accomplish with a full workload all the time and a blog that needs attention too. One does need a lot of time filtering out what comes online to finally get to what will become a standard way of doing things.

What can we expect to see from you in the future?

There is some exciting stuff in the pipeline for Fab.com and I’m also working on a few projects that involve a lot of illustration work.

(rb)

Web Design Leave a Comment more...

21

Nov/11

Create a Business Icon from Scratch an Adobe Illustrator Tutorial

by Jasmina Stanojevic under Design, Feeds, Web Design

Business icons are one of the most poplar vector illustrations. As with all vectors in general, business icons are scalable which makes them perfect for use in web design. The best way to create an icon is to use one of the vector based programs, such as Adobe Illustrator, Corel Draw, etc. We are going to create an interesting business icon that consists of two arrows and a globe in this Adobe Illustrator tutorial. The techniques we are going to describe is applicable for creation other kinds of illustrations as well.

So, let’s get down to business.

This is what we will be creating.

Creating the Globe

Before we create the globe we need to prepare a grid of parallels and meridians. It means we have to prepare the symbol that we’ll apply to the globe. The Blend Tool will help us do that.

Grab the Line Tool (/) from the Tool Panel and create a vertical line. Now, select Add Anchor Point Tool (+) and add an anchor point exactly in the middle of the line.

Select the Direct Selection Tool (A) from the Tool Panel, grab that anchor point and drag it to the left (don’t forget to hold the Shift key on the keyboard for straight dragging).

This way we have created a sharp corner. We need to smooth it out. Grab the Convert Anchor Point Tool (Shift + C) from the Tool Panel, click on the anchor point and to drag it downwards (Shift for straight dragging).

Select the path and under Object select Transform > Reflect. Set the Axis to Vertical and hit the Copy button. It will create a mirror image of our path. Move the new path toÂ the right (Shift for straight dragging).

Select both paths and under Object select Blend > Make. It will create more paths in the middle. To specify the exact number of the paths open Blend Options (Object > Blend > Blend Options). We’ll set the value for the Specified Steps to 17.

Grab the Line Tool (/) from the Tool Panel and create a horizontal line (Shift for straight dragging), as shown on the picture below.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the line and place it as pictured.

Select both horizontal lines and under the Object select Blend > Make. Set the value for Specified Steps to 9.

Select all the elements we’ve created so far and Group them (Ctrl / Cmd + G). Grab the group of elements and drag it to the Symbol Panel. Symbol OptionsÂ window will pop up. Set the name to Grid, make sure to set the Type to Graphic and hit the OKÂ button.

Now we have created a symbol which we’ll use to apply to our globe.

Creating the Globe

First of all, we have to create a circle. Grab the Ellipse Tool (L) from the Tool Panel and create a circle (don’t forget to hold the Shift key on the keyboard for the proper circle).

With the Direct Selection Tool (A) select the anchor on the left side and hit the Delete key on the keyboard to remove it. You should end up with something like this.

Under Effect select 3D > Revolve.

Under theÂ 3D Revolve OptionsÂ box make sure to set the Surface to Diffuse Shading and then hit the Map ArtÂ button. This is the where we are going to apply the symbol we created to our sphere.

In the Symbol drop down Menu select the symbol of the grid we have already made. Make sure to hit Scale to Fit button. It will apply the grid symbol properly.

You should end up with something like this.

Now we need to apply some nice color gradients. To be able to do that, first we have to turn our object into editable shapes. Under Object select Expand Appearance. Then we need to Ungroup (Shift + Ctrl/ Cmd + G) the object. Be ready to repeat that action a few times, until you “separate” the sphere from the grid. When you achieve that select the sphere (you’ll notice that it contains many concentric circles) and under the Pathfinder Panel hit the Unite button. This will turn the circles into a single one.

Set the Fill color for the grid to #61D4E0.

We are going to apply a nice blue radial gradient to the circle. It will turn our circle into a nice blue sphere.

There is one more thing we should add to the globe. Select the Rectangle Tool (M) from the Tool Panel and create the ellipse. Set its Fill color to white (#FFFFFF) and place it as it shown on the picture below.

Set the Opacity of the new ellipse to 26%.

Our globe is ready for some nice arrows. Before we create them don’t forget toÂ Group (Ctrl / Cmd + G) all the elements of the globe together.

Creating the Arrows

To create nice 3D arrows we will be using 3D effect Revolve. It will help us to fold the arrow around the globe. So, lets get started. First we will create the shape of the arrow.

Grab the Rectangle Tool (M) and create a rectangle, as it’s shown on the picture below.

Now, grab the Star Tool from the Tool Panel and click on the Artboard. The Star Options window will pop up. Set the value for Points to 3 and hit the OK button.

It will create a triangle. Rotate it and place it as it show on the picture below. Align the shapes by using Vertical Align Center under the Align Panel.

When you are satisfied with the result under the Pathfinder Panel hit the Unite button. It will turn both shapes into the arrow shape.

Drag the arrow to the Symbol Panel and name it Arrow. Set the Type to Graphic. This way we are creating the symbol of the arrow which we’ll be using later.

Now, grab the Rectangle Tool (M) from the Tool Panel and create a rectangle, as pictured.

Under the Effects select 3D > Revolve. Check the Preview box in order to be able to see what are we doing.Â Under theÂ Revolve OptionsÂ box click on theÂ Map ArtÂ button.

You will notice that the cylinder contains three sides. Upper ellipse, lower ellipse and the lateral side of the cylinder. Switch between sides, and when you select the lateral side of cylinder select the arrow in the drop down menu for Symbol. Also, make sure to check Invisible Geometry. It will remove the cylinder shape and only the arrow will be visible.

Feel free to play with the size and the rotation of the arrow, until you reach the right angle and position.

When you reach a desirable result hit the OK button. We can also change the rotation of the invisible cylinder in order to find the best position for our arrow by rotating the cube in the 3D Revolve Options box.

Now we have to turn our arrow into an editable shape. Select the shape with the arrow and under Object hit Expand Appearance. You should end up with something like this.

Lets Ungroup (Shift + Ctrl / Cmd + G) the new shape (we’ll have to do it more than once) and remove everything besides the arrow. This is what we should have by now (blue color is changed to be able to see the result clearly).

Take a good look at the arrow. See if there are any unnecessary anchor points and remove them.

Now we have to turn the arrow into a 3D shape. Select both parts of the arrow and duplicate them (Ctrl / Cmd + C, Ctrl / Cmd + F). Using the arrow keys on the keyboard nudge the copies a few pixels to the right and thenÂ downwards. You should end up with something like this.

We have to connect some shapes now. Grab the Add Anchor Point Tool (+) from the Tool Panel and add few anchor points.

With the Direct Selection Tool (A) grab the new anchor point and move it to the lower corner of the green shape.

Repeat this step for the other corners of the arrow as well.

To be able to create a glossy arrow with lots of reflected parts, we’ll have to divide some parts of the arrow. Select the Pen Tool (P) from the Tool Panel and create the path as it’s shown in the picture. We will use the path to divide the red part of the arrow. Just select them both (red shape and the green path) and under the Pathfinder Panel hit the Divide button. It will split the red shape exactly in half. Don’t forget to Ungroup it (Shift + Ctrl / Cmd + G).

And, now our arrow is ready to get some nice colors.

Applying the Color Gradients

In this part of the tutorial we will try to achieve a nice glossy look for the arrow.

To start we will apply some nice linear gradients.

Use a radial gradient for lateral side.

We can also divide the inner part of the arrow. Just create another path using the Pen Tool (P) and divide the inner side of the arrow.Â Apply a nice radial gradient to both sides.

We can also make some additional shapes that will help us to create the glossy look of the arrow. Select the right upper side of the arrow and under Object select Path > Offset Path. Set the value for Offset to -3 and hit the OK button.

With the Direct Selection Tool (A) move the upper side of the new shape. Just select the upper anchor points and move them upwards, as shown below.

Apply a nice linear gradient to the new shape.

We can do the same thing with the left side of the arrow. You should end up with something like this.

In order to create more light reflections we will divide some other parts of the arrow as well. Grab the Line Tool (/) from the Tool Panel and create a few random lines.

Use each of the lines to divide the surface underneath the line. Just select the line and the shape you want to divide and under the Pathfinder Panel hit the Divide button.

Apply a green radial gradient to the new shape, just make sure to create a sharp transition, just as it’s shown in the pictures below.

Repeat this step for the other shapes as well. It will create nice light reflections.

Some nice edge highlights will give our illustration a real glossy look.

The Final Touch

Now we will combine our globe with the arrows. To be able to set the two arrows in the right place we will have to learn to draw a Clipping Mask. A Clipping Mask is actually a random shape without the Fill and Stroke colors which allows us to hide some parts of the illustration.

Let’s get down to business.

Place the arrow on the top of the globe (as pictured). Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the arrow and send the copy behind the globe (Shift + Ctrl / Cmd + [). You should end up with something like this.

Grab the Pen Tool (P) from the Tool Panel and draw a shape similar to this.

When you are drawing the shape for the Clipping Mask keep in mind what parts of the arrows needs to be visible (everything inside the path will remain visible). Also make sure to follow the shape of the globe in order to avoid overlapping the globe and the part of the arrow that needs to be behind it.

When you are satisfied with the shape of the Clipping Mask remove the Stroke color, select the globe and the arrow and under the right click select Make Clipping Mask.

This action will hide all parts of the arrow outside the Clipping Mask. This way we have created the illusion that the arrow is "sitting" on the globe.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the green arrow behind the globe, Bring it to the Front (Shift + Ctrl / Cmd + ]) and change the color to red. Using the Reflection feature under Object > Transform > ReflectÂ flip the arrow upside downÂ by using reflection onÂ a Horizontal and Vertical axis. You should end up with something like this.

Repeat the steps for creating the Clipping Mask and you should get something like this.

Feel free to create a few more shadows and some sparks…

…and we are done!

The Conclusion

Glad that you went through the entire tutorial. It will help you to create a really interesting web icon that can be used for different kinds of purposes (business, environment, communication, etc). Using this technique you can actually do other kinds of illustrations as well.

Just feel free to be creative and to explore the other possibilities. Hope you like this tutorial. Thank you for following along.

(rb)