Summary:

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: ornament-symbols.zip 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:

 

 

 

45-color-portrait-ai.htm

 

… 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) …

ellipse-tool-ai.png

… 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 http://www.dafont.com/ and search for a font that fits your project theme -

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

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: http://www.weebly.com/ 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: https://www.youtube.com/watch?v=q93poFEpTBU