Banner Header with Images with Feathering in Illustrator

    ●   Open your Work in Illustrator and make a Banner for your Portfolio.

Learn About:

Opacity MaskFree Transform Tool Feathering Pencil Tool

Other People's Work:

Here are examples inspired by this tutorial.


Step #1: Open a Blank Document in Adobe Illustrator ~

Open Illustrator. Hit the keyboard shortcut: Cmd(⌘)+N or go to: File > New and open a new document 800 x 200 pixels with approximately these settings:

Step #2: Rounded Rectangle Tool ~

Select the Rounded Rectangle Tool which is behind the Rectangle Tool

Step #3: Draw a Box ~

Draw a Box:

Step #4: Choose your Colors~

Click the Swatches icon in Illustrator or go to: Window > Swatches

…"tear off" your Swatch panel and place it somewhere.

Step #4: Radial Gradient ~

Now click the Gradient icon or hit the keyboard shortcut: Cmd(⌘)+F9 and select Radial as the Type.

Step #5: Choose your Gradient Color Stops ~

Now you can drag colors from the Swatches menu to fill your gradient.

Drag OFF any stops you don't need …

Step #6: Drag the Gradient ~

Drag the Gradient over to the rounded rectangle shape and drop it (if necessary).

Step #7: Adjust the Angle of the Gradient ~

Adjust the Angle of the gradient here:

Step #8: Drop Shadow ~

Select everything by hitting Cmd(⌘)+A and go to: Effect > Stylize > Drop Shadow.

Try the other Effects Too! Experiment! Take a risk!

Step #9: Download and Install New Symbols ~

Download this zipped file: and open it in Illustrator …

open with illustrator

… then open the Symbols panel to view your new symbols …

… click on the Symbols Libraries Menu

… and save the Symbols as your name or whatever.

Step #10: Create a New Layer~

  Create a New Layer, lock your others.

Step #11: Use your New Symbols ~

Locate the Symbols you saved by clicking on the Symbol Libraries Menu again, go down to User Defined - and open the custom symbols you created.

Then drag a symbol onto the artboard onto your New Layer.

Step #12: Blending Mode ~

Click Transparency or go to: Window > Transparency

… and change the Blending Mode until you get something you like.

Also, experiment with lowering the Transparency (if necessary …)

Step #13: Create a New Layer ~

Create a New Layer and lock your other layer(s).

Step #14: Import an Image ~

Now open your Portrait from one of these tutorials:






… go to: File > Place … and place the image.

Step #15: Embed the Image ~

When you get the file in illustrator, hit Embed on the menu bar.

If you don't Embed the image, it wont be there when you send it in!

Step #16: Adjust the Size ~

Get the Free Transform Tool or hit the keyboard shortcut letter (e) …

… and, holding adjust the image to fit.

Step #17: Create ANOTHER New Layer ~

Create ANOTHER New Layer!

Step #18: Ellipse Tool ~

Get the Ellipse Tool or hit the keyboard shortcut letter (L) …


… and draw a circle over the image.

Step #19: Gausian Blur ~

Go to: Effect > Blur > Gaussian Blur and adjust the blur so it is slightly fuzzy around the edge.

Step #20: Select Both Shapes ~

With the Selection Tool, select both the circle and the image by dragging accross both of them.

Step #21: Transparancy Panel ~

Click Transparancy or go to: Window > Transpararency

… and click on Make Mask.

Step #22: Find a Font that Matches your Project ~

Go to and search for a font that fits your project theme -

If you want, search for a font that matches your project theme at

If you need a reminder on installing fonts, refresh your memory from this tutorial = 31-blend-text-ai.htm

Step #23: Type Something you can Use in your Project ~

Select the Horizontal Type Tool or hit the keyboard shortcut (t) …

horizontal type tool

… drag a box and type your name, the name of your portfolio, whatever you need.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Step #24: Blending Options ~

Then go to: Effect > Stylize > Drop Shadow

Step #25: Save for Web ~

Go to: File > Save for Web … and save your document as a png-8.

Step #28: Go to Weebly ~

Go to: and open the portfolio page you made for this class, find your header and replace it with the new one …

Step #29: Publish ~

Hit the Publish button …

… and then click on your web address.

Step #30: Select the Link ~

Navigate to the exact page in your browser where your files and reflections are posted …

… copy the URL address of your page …

… and paste the address into your reply so when the link is clicked it goes directly to the page that contains your evidence.

Other Resources: