In the following Adobe Illustrator tutorial you will learn how to create a detailed scanner illustration. We’ll start with a bunch of simple shapes, some basic vector shape building techniques, several effects and the round any corner script. Once we have our starting shapes we’ll continue with some Pathfinder options, several new effects plus some basic masking techniques. For the final touches we will use some simple blending.

Before we get started, here is a preview of the illustration we’ll be creating.

Step 1

Hit Control + N to create a new document. Enter 600 in the width and height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the "Align New Objects to Pixel Grid" box is unchecked before your click OK. Now, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid). Next, you’ll need a grid every 5px. Go to Edit > Preferences > Guides & Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box.

You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Step 2

Pick the Rectangle Tool(M), create a 480 by 345px shape, fill it with a flat green then grab the Direct Selection Tool(A). Select the left anchor point and move it 80px to the right then select the right anchor point and move it 80px to the left. This will turn your rectangle into a trapezoid. Next, you’ll need the Round Any Corner script. You can find it in this article.

Save it to your hard drive, return to Illustrator and continue with the Direct Selection Tool (A). Select the bottom anchor points (highlighted in the second image) and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 50px Radius and click OK. In the end your shapes should look like in the third image.

Step 3

Reselect the shape created in the previous step and go to Effect > Warp > Arc Lower. Enter the data shown below, click OK and go to Effect > Warp > Bulge. Again, enter the data shown below, click OK and go to Object > Expand Appearance.

Step 4

Pick the Rectangle Tool(M), create a 410 by 270px shape, fill it with a flat yellow and place it as shown in the first image. Grab the Direct Selection Tool(A) and focus on this new shape. Select the left anchor point and move it 65px to the right then select the right anchor point and move it 65px to the left. Again, you’ll need the Round Any Corner script.

Continue with the Direct Selection Tool (A), select the bottom anchor points (highlighted in the second image) and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 10px Radius and click OK. In the end your shapes should look like in the third image.

Step 5

Reselect the shape created in the previous step and go to Effect > Warp > Arc Lower. Enter the data shown below, click OK and go to Effect > Warp > Arc Upper. Again, enter the data shown below, click OK and go to Object > Expand Appearance.

Step 6

Reselect the shape created in the previous step and go to Object > Path > Offset Path. Enter a 3px Offset and click OK. Fill the resulting shape with black.

Step 7

Reselect the black shape created in the previous step and make a copy in front (Control + C > Control + F). Select this copy along with the green shape, open the Pathfinder panel and click on the Minus Front button. Once again, you’ll need the Round Any Corner script.

Grab the Direct Selection Tool (A), select the four anchor points highlighted in the second image and go to File > Scripts > Other Script. Open the Round Any Corner Script, enter a 3px Radius and click OK. In the end your shape should look like it does in the third image.

Step 8

Pick the Rectangle Tool(M), create a 300 by 20px shape and place it as shown in the first image. Select it along with the black shape and click on the Minus Front button from the Pathfinder panel. Move to the Layers panel and drag the resulting, black shape below the yellow one.

Step 9

Reselect the green shape and replace the flat color used for the fill with the linear gradient shown below. Move to the Layers panel, double click on this shape and name it "main".

Step 10

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Reselect "main" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and hit the up arrow twenty times (to move it 20px up). Reselect both copies and click on the Minus Front button from the Pathfinder panel.

Move to the Layers panel and you will find a group with three new shapes. Select it, ungroup it (Shift + Control + G) and delete the two, top shapes. Select the remaining shape and fill it with the linear gradient shown in the third image. Move to the Layers panel and name it "mainBottom".

Step 11

Reselect "mainBottom" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image.

Step 12

Reselect "mainBottom" and make two new copies in front (Control + C > Control + F > Control + F). Select the bottom copy and move it 3px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=199 G=203 B=203.

Step 13

Focus on the shapes created in the last two steps. Select the first one and go to Effect > Blur > Gaussian Blur. Enter a 4px radius and click OK. Select the second one and go to Effect > Blur > Gaussian Blur. Enter a 2px radius and click OK. Reselect both shapes and group them (Control + G). Next, you need to mask this group. Reselect "main", make a copy in front (Control + C > Control + F), fill it with white and drag it above the group (in the Layers panel).

Open the Transparency panel. Select the fresh, white shape along with the group, open the fly-out menu of the Transparency panel and simply click on the Make Opacity Mask button. In the end your masked group should look like in the sixth image. Move to the Layers panel and lock it.

Step 14

Reselect "mainBottom" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=175 G=175 B=175.

Step 15

Reselect "mainBottom" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image.

Step 16

Reselect "mainBottom" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 10px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a compound path (Object > Compound Path > Make), fill it with R=100 G=100 B=100 and lower its opacity to 5%.

Step 17

Reselect "mainBottom" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 10px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Again, turn the resulting group of shapes into a compound path (Object > Compound Path > Make), fill it with R=100 G=100 B=100 and lower its opacity to 5%.

Step 18

Reselect "mainBottom" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 10px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=100 G=100 B=100 and lower its opacity to 10%. Unlock the masked group created in step #13 then select "mainBottom" along with all the shapes created in the last seven steps and group them (Control + G).

Step 19

Reselect "main" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and open the Transform panel (Window > Transform). Check the middle, top reference point and the "Constrain Width and Height Proportions" button then simply enter "385" in the height box.

Step 20

Select this resized copy along with the other copy created in the previous step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the second image.

Step 21

Reselect "main" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 25px up and 12px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a compound path (Object > Compound Path > Make), fill it with R=242 G=245 B=245, lower its opacity to 20% and change the blending mode to Soft Light.

Step 22

Reselect "main" and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 25px up and 12px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a compound path (Object > Compound Path > Make), fill it with R=242 G=245 B=245, lower its opacity to 20% and change the blending mode to Soft Light.

Step 23

Reselect the black shape and replace the flat color used for the fill with the linear gradient shown below. Move to the Layers panel, double click on this shape and name it "interior".

Step 24

Reselect "interior" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px to the down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=70 G=70 B=70.

Step 25

Reselect "interior" and make two new copies in front (Control + C > Control + F > Control + F). Select the bottom copy and move it 2px to the down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=235 G=235 B=235.

More on Page Two

We are only halfway through the tutorial. There is still more to come over on page two.

Do you want to get better at what you do? Well, getting feedback is the most important step in doing that. The world is much more social and information is flowing faster than ever before. We can’t afford to be doing things without listening to our followers or users. The only way we can survive and even stand out is by shaping ourselves with the help of others. So let’s get our customers involved in building our business better, with some feedback tools and services.

Now don’t get confused with all these feedback tools and services. Knowing what each tool is good at will help you get feedback more effectively. We’ve categorized each method of getting feedback into 7 different concepts to narrow your search.

• Voice of Customer Feedback – Get visitors to complain or give feedback by using widgets
• Process Level Feedback – Feedback forms trigger when an action is taken in the site
• Web Design Feedback – Get opinions for design mockups, ideas, or projects
• Crowd Sourcing Feedback – Build forums and communities for bugs, requests, or praises
• User Testing / UX – Test what you want and get feedback about it
• Surveys – Collect user opinions with multiple questions
• Website Chat – Get instant feedback about any situation

Voice of Customer Feedback Tools and Services

Wishbox
By pressing a button, it takes a screenshot of the current page, goes to the feedback wizard, and then allows users to paint, write, draw, blackout, crop, and give comments to show exactly what they want.

BugMuncher
Highlight a specific area on the web page, blackout unnecessary stuff, write a description, and check out the feedback preview before sending in the feedback.

WebEngage
A classic feedback widget which you usually see on the sides of a website. Start by setting up a basic feedback form, customize the fields, add some CSS styling to the feedback window, integrate it with code, and wait for the feedback to come in.

OpinionLab
Arrange the feedback places on any part of your touch/curiosity points and start collecting customer feedback.

Feedbackify
Create & customize your feedback form and put it on your website easily. Put custom scripts on your feedback form to pop up automatically in certain places.

UserEcho
Customers can vote on their favorite bit of feedback so you can track which changes are working, monitor feedback with a statistical system, and organize your content with an automatic duplicate search system.

GrabFeedback
Sign-up with the service, manage your forms, and put it on your site with a piece of code. Check out the analytics of your feedback in 3 different dashboards.

KissInsights
Target your questions to any customer type, keep questions short, and get results privately if you prefer to be exclusive.

Process-Level Feedback Tools and Services

Kampyle
The system triggers when a unique action takes place such as downloads, checkouts, uninstalling etc.

Webreep
Collects customer feedback in three ways. A feedback button, a direct invitation, or when users leave the website.

ForeSee
Measures satisfaction throughout the web experience across the purchase lifecycle (from browse to checkout, purchase, post-purchase, etc.), across brands, and across a lot of points to find out where a user fails to succeed in your specific pages or actionable items.

Web Design Feedback Tools and Services

Notable
Captures websites and makes it useful for web designers and developers to check up on their work, get constructive criticism, and improve their projects.

Concept Feedback
Post your landing pages, mockups, wireframes, apps, and interfaces and get feedback from experts with real world experience.

ProofHQ
Proofreaders will be able to see each others’ comments and be able to work more effectively while managing conflicting feedback.

ConceptShare
Visually review print, web, and video assets with markup tools like a pointer, pen, crop, highlighter, shapes, and images. Comment pins allow you to see a "heat map" of commenting activity on an asset.

Redmark
Upon uploading a design, an automatic e-mail is sent to clients which makes it easier to receive fast feedback.

Bounce
Grab a web page, give feedback, and bounce your idea around the web.

Launchly
Test your ideas, designs, and services from an audience that is passionate about new websites.

Crowd-Sourcing Feedback Tools & Services

Get Satisfaction
Engage customers on Facebook, your website, searches, or on any mobile device to build better relationships.

SuggestionBox
Create unlimited categories for suggestions such as, feature requests, bugs, in progress, and so on. Makes sure you don't lose track of them.

User Voice
A feedback forum to maintain customer satisfaction and support. Answer feedback instantly on the platform or on your favorite mail service.

Sitepoint Reviews and Critiques Forum
Sitepoint review and critiques forum has a large community which is available to help fellow designers out by providing feedback on their design elements and website reviews.

IdeaScale
Create a feedback community by giving your customers a platform to share, vote, and discuss feedback.

SparkBin
This tool works for your employees rather than your customers. It can quickly gather ideas and drive your employees to submit ideas more frequently.

Gripe
Helps users complain with a location-aware mobile app to one of any 100 million+ local businesses or service providers worldwide.

Zendesk
Get customer satisfaction ratings, advanced analytics, and open your customer service up to social media like Twitter and Facebook.

User Testing / UX Tools & Services

FiveSecondTest
Upload a screenshot/mockup, prepare questions, and wait for people to give feedback.

UserTesting
Select your participants from specific demographics or choose your own customers to perform tasks that you want.

Usabilla
Test designs at any stage by selecting popular predefined tasks or creating your own tasks.

Userfly
Implement to your site with a single line of code, start testing immediately, and watch your users' mouse movements and clicks.

Feedback Army
With a cost of $20 submit your URL and arrange questions you want to get answered by an army of feedback people.

OpenHallway
Create tasks, share the link with your participants, and then watch and listen to the recorded sessions anytime, anywhere.

Loop11
A remote usability testing site which requires no coding and no downloads. Create a usability test, invite participants, and analyze data with quality metrics.

Userlytics
Handpick any demographic from age, gender, hobbies, occupation, etc. and get qualitative research results in a matter of days or hours.

WhatUsersDo
Prepare some sets of tasks for your users, their demographics, and watch them complete the tasks, or not.

UTest
Choose a test from a variety of user testing types and learn more about the process and engagements.

Survey Tools and Services

Confirmit Survey Software
Create surveys fitted with your company branding, and send them to your customers or employees.

SurveyMonkey
Create surveys by choosing question types, survey templates, skip logic, and many more customization options. Get responses and analyze with analytics.

4QSuite
Use an invitation rate to control the impression rate of the surveys. Upon completion, get real-time results and reach out to your respondents.

Zoomerang
Create surveys, send them out, get responses in real-time, and monitor the results.

SurveyGizmo
Combine 26 basic question types with customizable options for research, insights, tracking, and marketing automation. Use logic, branching, and jumping to make your survey dynamic.

JotForm
Drag and drop form fields to create any type of survey, embed to your site with a single code, or share it via a link.

Website Chat Tools

WebsiteChat.net
Put a live chat button on your site and wait for a user to click on it.

Mibew Web Messenger
This open-source live support application enables one-on-one chat assistance in real-time directly from your website.

Chatango
Add to your site including Facebook, Blogger, or many other social networks. Have control over the chat group where you can ban users, delete messages, add moderators, and even ban words.

Olark
Know who’s on your site, chat with them, and improve your business.

AjaxIM
Open-source extensible, customizable, instant messaging framework with an easy installation.

To Wrap It Up

We've got lots of feedback tools and services and tried to cover them all for curious and passionate listeners. However, if you know other tools, methods, or even experiences that might fall into this article range, feel free to comment below.

(rb)