Advanced Mousing 101: Develop Your Pen Tool Skills to ULTRA LEVEL!!!!!

Pen Tool Practice Exercise 1:

Pen Tool Tutorial:

Read through this tutorial carefully and follow along with illustrator using the pen tool. You will be required to turn in a pdf file that demonstrates your steps of pen tool practice in each step of the tutorial, additionally at the end of the tutorial there are 10 black shapes. You must trace these shapes using the pen tool. You may download the images, and use the FILE/PLACE function in Illustrator to place the jpg on your artboard for tracing.

View the tutorial here: http://www.vectordiary.com/illustrator/drawing-with-pen-tool

When your Pen Tool Exercise is complete you can move on to this next assignment, Place and Trace. The goal is to further practice your Pen Tool by tracing line art over a photograph.

Pen Tool Practice Exercise 2: Place and Trace:

The goal of your place and trace assignment is to show clean lines, and to use line profile modifications and different line weights to add focus and emphasis to the details and features in your illustration.

1. Search for a photograph online that you would like to trace... make sure the image is at least 1000 pixels wide so that it contains some good details. Look for images that have details that can be traced, flat looking images may not trace well
2. Download your image and import it into Adobe Illustrator
3. Lock down the layer that contains your photograph, create a new layer to create artwork on above the image
4. Using your Pen Tool only, trace line art over your photograph, make sure there is no Fill, Outline only! Vary the thickness and other stroke properties to add depth to your illustration
5. Turn off the photograph layer to see your line art. Keep drawing until your image contains a good level of detail. Save your file often to avoid losing work to software crashes, etc

Place and Trace Examples:

It's time to wade into the Blog...

Hello Students,
In this course we will be posting work on blogs to turn in and share our best pieces, creating a gallery of work to reflect upon. At the end of the course you may decide to keep or delete your site. 

Turning in work:

1. You are expected to communicate with your instructor when work is posted and ready for final review. 
2. You are expected to ask for feedback before posting to ensure your work is the best it can be. 
3. After your preliminary design is complete, spend time editing and enhancing your work.
4. Post your work to your blog and ensure the appearance is pleasing and the images are formatted correctly. Provide a descriptive post title and any other relevant information.
5. When the post is complete EMAIL your instructor stating the work is ready for final review.

Screencap from photo student Yesim Yilmaz's blog.

Get started with blogging:

A blog is a regularly updated website or web page (like the one you’re reading now!), typically one run by an individual or small group, that is written in an informal or conversational style. In this class you will be keeping a blog throughout the year. Your blog will showcase your finished photos/videos and will be a record for how you created them.

Most often boggers write from a personal perspective that allows them to connect directly with their readers. In addition, most blogs also have a “comments” section where readers can correspond with the blogger. Interacting with your readers in the comments section helps to further the connection between the blogger and the reader. After you create your first post, I will upload a page on the course website where you can find links to your classmates blogs.

From time to time we will visit each others blogs and comment on each other’s work. Please use the comment section to complement your classmates on their work, ask questions about their process or give constructive feedback on how you tackled a similar challenge that would be useful to both the blogger and the readers. Comments should never be meanspirited, sarcastic or a forum for you to talk about unrelated matters.

Now let’s think about your blog. Getting started you’ll need to:

1. Choose a Blog Host (wix.com, wordpress.com and weebly.com all over free hosting and templates for you to choose from. I dislike ads and messy blog interfaces, strive for a clean presentation of your work. Alternate platforms are acceptable with permission such as flickr.
2. Create an account. Write down ALL your info (User Name, PW and URL). You’ll need all of this each time you create a new post. WordPress.com, wix.com, weebly.com all offer free hosting with templates and a little bit of customizability. 
3. Create your first post. Write a short bio about yourself and what your goals are this year in CTE graphic design class. 
4. Introduce yourself… My name is ____. Welcome to my design blog… 
5. Discuss your background in art and design or any related disciplines... 
6. Talk about your short term and long term goals in this class. What do you hope to get out of it? 
7. Here is a sample: https://larkinwilson.wixsite.com/mysite

A Rough Guide to Setting Up a Blogger Blog:

This is a snapshot of one of my class blogs, I started with a basic template and customized the colors and banner art to suit my style. I have 5 different blogs for the classes I teach and one to show my professional work... a little customization will go along way in making your blog standout.

Step 1: Go to http://www.blogger.com and sign up for a blog

The setup is easy, read each screen and explore the options. The guide below is a rough outline to setup of your blog, it may not be 100% accurate.

• Blogger now is part of Google, so if you have a Google account (which allows for things like gmail) you should use that to set up your new blogger account. If you don't have a Google account, now is a pretty good chance to set one up. Otherwise, it is just a matter of following the instructions on this page. Sign In or Sign Up and create your blog
• Be sure to check the "terms of service" box; of course, you might actually want to read through it a bit first, though the rules are pretty standard for these sorts of services.
• Save your username and password some place. In fact, I would encourage you to write it down some place. Don't lose this!
• The "Blog Title" will be what appears in the title portion of your blog site itself.
• For the address of your blog don't have any spaces, it can be different than your "Blog Title".
• The "word verification" section is a security set-up the blogger folks have; simply type in the word you see in the funky font into the provided box. Click "continue" when you're done.
• You can choose any template you want for your blog, and you can also change the template later if you would like. Click continue when you're done.
• After waiting a few moments, you should get a screen that says your blog has been created. Good for you! Click on the "start posting" arrow and get to work!

Step 2: Get posting!

• The posting screen for blogger is pretty straight-forward. Give your entries a title, type in the appropriate window, and use the editing tools for your blog entry as you want. We'll talk about more advanced options for your posting later, but if you know any basic html, you can incorporate most of that code into your blog posts.
• To post or "publish" your post, click the button at the bottom of the screen "Publish Post." If you start writing something but you don't want to post it until later, click where it says "Save as Draft."
• When you publish your post, blogger will process the information and then, if everything worked (and it usually does), it will give you the option to "view blog." Take a look at it; you should notice a couple of things:
  • The address for your blog-- something like http://stevendkrause.blogspot.com-- is the address for your blog. Send this URI (web address) to me! I will link to your blog from the class web site.
  • Readers should be able to post a comment to your post by clicking on the "comments" link.

Step 3: Do some adjustments to your account

There are a number of different things you might want to do to make your blog a bit more useful. But here are a couple of things you really should do no matter what.

Blocking blog spam. I know, hard to believe, but yes, the world of spamming extends to blogs too. Fortunately, Blogger has a pretty decent security feature that will eliminate almost all spam posts from your blog. Here's what to do:

• If you aren't already logged in, log in to your Blogger account. You did remember your username and password, right?
• From the "Dashboard" screen, click on the name of your blog.
• Click on the tab "Settings."
• Click on the link near the top of that page under the tabs labeled "Comments."
• Set "Who Can Comment?" to "Only Registered Users." It isn't essential that you do this, but I'd recommend it.
• A bit further down, set "Show word verification for comments?" to "Yes." This is a security feature that requires the comment poster to type a specific word that shows up as slightly distorted text in a window.
• Select "Save Settings" at the bottom of the page.

Time zone. It'd be nice if the time was right on your blog, right? Here's how to do that:

• If you aren't already logged in, log in to your Blogger account. You did remember your username and password, right?
• From the "Dashboard" screen, click on the name of your blog.
• Click on the tab "Settings."
• Click on the link near the top of that page under the tabs labeled "Formatting."
• Under "Time Zone," select the right time zone (and if you're reading this as part of one of my classes, that'd be "Detroit." Duh.)
• Select "Save Settings" at the bottom of the page.

Doing things to customize your blogger blog. There's lots of stuff you can do customize your blog. At a minimum, I'd recommend including some links to your classmates' blogs or other blogs you like to read, but there are a lot of other things you can do, too-- include pictures, lists of stuff you like, etc., etc.

• If you aren't already logged in, log in to your Blogger account. You did remember your username and password, right?
• From the "Dashboard" screen, click on the name of your blog.
• Click on the tab "Template."
• Make sure the "Page Elements" tab under this is selected, and click on "Add a Page Element." From here, simply follow the instructions. Be sure to save you page element additions and double-check that it worked.

Trouble-shooting:

"Hey, what should I do if it didn't work?!" Well, blogger really is pretty easy to use, try asking the person to your left or right and I bet you can figure out the issue. It's important to collaborate and share information. 

Have fun!

 - Mr.Wv

Introduction to Computer Graphics: Vector vs Bitmap

Hello Students,

What does this car have to do with video games? Today's lesson is about the two image creation methods that exist in digital media. Raster or bitmap graphics are what most computer users are familiar with... these could be a photograph on a website or a video that you watch. The other method is vector graphics.

It's all about connections. Pierre Bezier was an engineer and one of the founders of geometric modeling and in the field of calculating curves for CAD/CAM systems and was a leading engineer at Renault, bringing this technology to auto manufacturing.

Early video games such as space invaders used vector graphics also. Now a bezier curve can exist in 2 dimensions or three, modern video games can use 3D models that are comprised of "Nurbs" or "Non-Uniform Rational B-Splines". These are basically 3D objects that are created by bezier curves and have "surfaces" between the curves to create a shape. These are all examples of vector graphic technology being used in different ways.

Raster or Bitmap graphics are also used in video games. Early games used small graphics called "sprites" to create animated video game characters. In modern 3 dimensional games, bitmap graphics are used to create textures on 3D graphics.

Let's Make Some Pixels! Bitmap Icon Art Assignment:

• Open Photoshop and create a new document, set width to 12 pixels and height to 16 pixels and resolution to 72DPI
• Go to the photoshop PREFERENCES menu and choose GUIDES, GRIDS AND SLICES and set the GRIDLINE to EVERY 1 PIXELS and the SUBDIVISION to 1
• Select the BRUSH TOOL and in the BRUSH OPTIONS set brush size to 1 Pixels
• Create a new layer in the layer palette
• Begin to draw your image, use different colors from the COLOR PICKER and paint your image in square by square
• When artwork is complete, scale it up by using the IMAGE menu, and clicking IMAGE SIZE, increase the pixel dimensions and set the RESAMPLE IMAGE option to NEAREST NEIGHBOR-PRESERVE HARD EDGES
• When finished create a new folder for this project, then go to File > Save for Web and Devices, Set file format to GIF and save a file for turning in. Then go to File > Save and save a Photoshop version of your file.
• When you are done creating Mario try creating your ow character from scratch! Use your imagination and make a cool character. Want to challenge yourself? Ask me how to animate your pixel art!

Previous Student Examples:

Introduction to Vector Art, Pen Tool Practice and Box-to-Car:

Vector Assignment Part 1: Pen Tool Practice!
Pen Tool Tutorial:

Read through this tutorial carefully and follow along with illustrator using the pen tool. You will be required to turn in a pdf file that demonstrates your steps of pen tool practice in each step of the tutorial, additionally at the end of the tutorial there are 10 black shapes. You must trace these shapes using the pen tool. You may download the images, and use the FILE/PLACE function in Illustrator to place the jpg on your artboard for tracing.

View the tutorial here: http://www.vectordiary.com/illustrator/drawing-with-pen-tool

When your Pen Tool Exercise is complete you can move on to this next assignment, Place and Trace. The goal is to further practice your Pen Tool by tracing line art over a photograph.

Vector Assignment Part 2, Transform Box to Car:

"Box to Car" Illustration created by R.O.P. student Josh Booker

• Open Illustrator and create a new document, File>New
• Draw a box about 4X4 inches
• Click on the Pen Tool and hold to reveal the hidden tools and select the Add Anchor Point Tool (it looks like the Pen Tool with a + next to it)
• Begin clicking on the box outline to add anchor points, several to each side
• Switch over to the Direct Selection Tool and Click-Drag an anchor point to move it
• Continue dragging your anchor points to modify the shape
• Keep adding anchor points and moving them to create the outline of an automobile
• Add more anchor points and adjust to smooth out your creation
• Use Illustrators simple drawing tools such as the circle tool and pen tool to customize your creation. Add colors too!
• When finished create a new folder for this project, then go to File > Save for Web and Devices, Set file format to GIF and save a file for turning in. Then go to File > Save and save an Illustrator version of your file.

Previous Student Examples:

Semester Conclusion

Thank you to all my great students from this semesters CTE Graphic Design class. There were some very impressive portfolios and projects and I thank you all for your hard work and dedication. I know every student walked away with new skills, insight and abilities in Graphic Design.

It was my honor to provide you all with high quality CTE education in the Arts, Media and Entertainment pathway.

1. "Design is intelligence made visible." -- Alina Wheeler, author

 - Mr.W

Graphic Design Final Project: CTE Promotional Poster

Hello Students,
Your final project is to design a promotional poster that will create interest for students in taking CTE classes. You could design a poster that creates interest for a specific class or multiple classes. If your poster qualifies it will be printed and displayed on campus and you will have another great design project for your portfolio.

Project Description:
You have just been hired by me to create a promotional poster. Your goal is to design an eye-catching and engaging poster that is suitable to display on High School bulletin boards. You should have an understanding of your audience and what will appeal to them. Your design can be creative and fun but should look professional.

Project Specifications:

• Poster dimensions must be 36"x24"
• Must be created in CMYK with Adobe Illustrator and/or Photoshop
• Must use bold eye catching colors
• Must be created with no more than 2 different font styles
• Must be readable when printed from 10-15 away
• Pick a class to promote, choices are Graphic Design, Digital Photography, Video Production and Animation, Bicycle Technology or the Automotive Technician Program
• Use your own ideas to make this poster unique. Poster can incorporate artwork you or other students have created to show as examples. Poster should provide an eye-grabbing headline to interest the viewer and guide them to a "call to action" such as requesting more information or signing up for the class with their counselor

Project Copy:
Poster may contain this text, creative editing is encouraged as long as the message stays on point:

• Headline: "Learn (choose a class to feature) at Santa Cruz High School!" or an alternate headline could start with "Would you like to learn _______?"
• Body copy example (would be different for other classes): Do you enjoy learning through hands-on projects and activities? Learn digital media skills in our newest computer lab with cutting edge software and equipment. ROP offers several exciting classes in your school. Talk to your counselor to sign up for one of these great courses. Space is limited, sign up today!
• Here is what our students are saying about this great course : "Insert student testimonial quote here" <-- you will need to interview students for these quotes...
• Success Starts Here! Career Technical Education is your first step!

Grading and Evaluation:

• Poster design should be clean, eye-catching and professional
• You will be evaluated on your ability to communicate your concept to me and incorporating feedback into your design.
• Poster design should include all relevant and important material
• Design should showcase effective use and understanding of: Typography, color theory, application of elements and principles of design
• Poster will be judged on how well it incorporates your clients input and how that is translated into your design
• Poster needs to meet all specifications
• Due by end of finals

Student Examples:

Portfolio Project

Hello Students,

Having a polished and professional looking portfolio is key to your success in finding work after High School and moving on to developing a career. Download the ROP Portfolio Handbook to use as a guide for creating your own portfolio, a requirement in all ROP classes.

Portfolio's are due by beginning of May and must be ready for presentation, evaluation and critique (make it perfect!) but that is no reason to slack on this project. You should put great time and care into creating the professional side of your portfolio and then you will be ready to add your creative projects as the semester progresses. You will complete a digital version as a PDF file for evaluation. Class winner will be able to print and prepare their portfolio for inclusion in the Portfolio Showcase competition. Everyone can print a copy to keep and report covers will be provided if possible.

Remember that the best portfolio in class will be sent to the portfolio design competition that ROP has at the end of each school year, your portfolio will compete against other graphic design classes across the county, and there are prizes!

A judge evaluates print portfolio's from past entrants...

Part A: Portfolio Cover Design Assignment:

• Design an eye catching cover design for you your portfolio
• Include your name, the title of this class, the school you are currently attending and the year
• Design your cover for standard letter size 8.5X11 inch paper
• When you are done post your portfolio cover design to your blog
• Portfolio structure design is due today
• Cover design is due on wednesday

Use an iterative design process to find the best color/type solutions for your design...

Part B: Portfolio Development Long Term Assignment:

• Your portfolio must be created in Indesign and the final file must be a multi-page PDF document
• Use the Pages palette to create multiple pages for your portfolio with Indesign
• Your portfolio cover, table of contents and all materials should look clean and consistent. Use consistent design style across all aspects of your portfolio, this includes color, typography, layout and style

Your Portfolio must contain in this order: See portfolio handbook for more details...

1. Cover page with your name, class title, year. Spend some time on this, it should show good design skill and be reflective of your personality
2. Table of contents
3. Letter of Introduction
4. Resume
5. Handwritten Job Application 
6. List of References
7. Letter of Recommendation -  cannot be from your ROP teacher or a family member
8. 3 or more work samples with written explanation about the work, why is it important to your career choice? What did the project entail, what were the challenges and difficulties? Give us details.

How Your Portfolio Is Evaluated:

• Contains required content and format
• Well organized
• Free of grammer problems
• ROP related work samples
• Shows creativity
• Nice appearance
• Shows skill development
• Appropriate for use in job search
• Professional appearance
• Nice presentation
• Shows good design and wise choice of color palettes
• Shows consistency across all pages
• Reflects your style, personality and interests

A print portfolio can take many forms, it can be professionally bound, stitched by hand or bound with a spiral ring... how will you create your portfolio, what will make it stand out above the rest?

Tips For Winning The Portfolio Competition:

In the last few years the portfolio competition has gotten fierce, especially for the graphic design category. Other schools have printing facilities that we don't, so you must use your creativity, ingenuity and eye for design to stand above the rest. Consider purchasing a large format portfolio binder and printing work samples at 11X17", or consider making a hand-bound book format to showcase your work. The limits are only contained by your creativity!

Use this as a rough guide to laying out your own portfolio...

Ok, have fun!

Previous Student Portfolio Cover Design Samples:

P.S. There are more samples on the back table for review...

Design and Create an Original Magazine Cover

Hello Students,

Your new assignment is a combination of using Digital Photography and 3 programs to create one product, Adobe Illustrator, Photoshop and Indesign. Find a high resolution image and process the photo with filters if you wish in photoshop and use it to design an original magazine cover with Adobe Indesign. You will create additional artistic elements with Illustrator as well. This project is a good lesson in utilizing multiple software tools. You need to use original photos and content!

Part 1 - Launch and Explore InDesign

• If you are confident with Indesign you can skip ahead, if you feel you need more familiarity with Indesign than read through and try out all the tools in Indesign before proceeding.
• Go to the dock and launch InDesign, or look in your Applications folder to find the app
• Go to the File Menu and create a New Document
• Go to the Window Menu and set your Workspace to Advanced
• Explore the tool bar, click on the text tool and draw a text box to create text, try the shape tools and look for the color modifiers to change colors
• Open all the palettes under the Window Menu and explore all the functions, look at the quick guides below for reference
• See if you can create text of different sizes, change the colors, modify the text kerning and tracking and draw shapes in different colors and with different borders

Hidden Tools and Shortcut Keys

Character Formatting Panel In InDesign

Paragraph Formatting Panel in InDesign

Part 2 - Magazine Cover Design Project:

• Think up a magazine topic and title for your cover design, create a simple pencil sketch of the cover including all photos, art, titles, headers, text insets Your magazine must have a title header that is created in Illustrator, a cover photo that has been post-processed in Photoshop, a photo inset, text headlines with effects created with Indesign. It should also include all details such as month, date, edition number, etc.
• When you design is ready grab a camera and shoot your cover photo, use Photoshop to post process the image for your cover. Crop, colorize, convert to black and white, use filters for an illustration look.... do something creative with your cover image
• Design your magazine title with Illustrator, spend time making the typography and any illustrative elements look perfect. Consider colors that will blend well with your cover image
• Create decorative borders or inset elements with Illustrator
• Set up your document in Indesign for standard letter size.... import all your different elements and begin arranging them on the page.... create any additional typographic elements in Indesign... use colors that are complimentary and read well.
• Add your image insets and additional details for a polished look, make it perfect!
• If you need some standards to go by or some inspiration, check out this tutorial: Magazine cover design tutorial with Indesign

Here is the progression of my magazine cover design. I took the photo, processed it with Photoshop, added colorful borders in Illustrator and brought it into Indesign to create my magazine cover design.

Designs are due Friday, this should be another great design piece for your portfolio!

 - Mr.W


Student Examples: