Banner Header with Images with Feathering in Illustrator
● Open your Work in Illustrator and make a Banner for your Portfolio.
✓ Opacity Mask✓ Free 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 …
✓ … 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 http://www.dafont.com/ and search for a font that fits your project theme -
Step #23: Type Something you can Use in your Project ~
✓ Select the Horizontal Type Tool or hit the keyboard shortcut (t) …
✓ … drag a box and type your name, the name of your portfolio, whatever you need.
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