Classes

Week 15: Checking In

Please log in and leave a comment with a link to your Flickr and WordPress site.

NOTE: Your final project and written document is due on Wednesday, December 19th. I will be in the lab between 6pm and 7:30pm to collect your portfolio and dvd with all your files. You MUST log in on Week 16 and leave a link to your sites.

Read More

Week 14: InDesign Pt. 2

Week 14 | Overview

Working with Text and Type (3)

Starting Up

Adding Text to you Document

  • Creating a Text Frame
  • Creating Multiple Frames

Changing Character Attributes

  • Changing Font and Type Styles
  • Adjusting Size
  • Adjusting Line Spacing
  • Adjusting Character Spacing: Kerning and Tracking
  • Using a Baseline Shift

Changing Paragraph Attributes

  • Horizontal Aligning Text
  • Changing the Spacing Before and After Paragraphs
  • Using Tabs
  • Adding Rules Above or Below Paragraphs
  • Changing Text Color
  • Creating Drop Caps
Finding and Changing Text
  • Finding and Changing Text and Text Attributes
  • Finding and Changing Text Using GREP
Checking and Correcting Spelling
  • Checking Spelling
  • Adding Words to the Dictionary
  • Checking Spelling as you Type
  • Automatically Correcting Spelling
  • Editing Text Using the Story Editor
  • Using Track Changes
  • Drag-and-drop Text Editing
Special Characters and Glyphs
  • Using the Glyphs Panel and Glyph Sets
Text Frame Options
  • Adjusting Text Inset
  • Vertically Aligning Text
Importing Text
  • Flowing Text Manually
  • Threading Text Between Frames
  • Usine Semi-autoflow to Link Several Text Frames
  • Changing the Number of Columns in a Text Frame
Baseline Grid
  • Viewing and Changing the Baseline Grid
  • Adding Story Jumps
Using Styles to Format Text
  • Creating a Headline and Applying a Style
  • Importing Styles from other Documents
  • Redefining Styles
Placing Text on a Path
  • Importing Text from Microsoft Word
Missing Fonts
  • Finding and Fixing Missing Fonts

InDesign – Working with Text and Type (3)

In-Class Exercise

  1. Starting on page 1, navigate through the document and apply styles to all text, including body, byline, drop cap, and headlinie.
  2. Change the color of the Body text and redefine the style.
  3. Turn on show Text Threads ad use the Selection tool to select the linked text frames on page 5, create a new page at the end of the document and drag the frames to the new page. Return to page 2 and see if the story jump automatically updates.
  4. Make a new headline box on page 7 and type in a fictitious headline. Format the headline using the headline style as a starting point. You may need to adjust the size depend on how many words you enter.

 Working with Styles (04)

Style types

  • Paragraph Styles
  • Character Styles
  • Object Styles
  • GREP Styles
  • Table and Cell Styles

Paragraph Styles

  • Defining Paragraph Styles
  • Applying Paragraph Styles

Character Styles

  • Defining Character Styles
  • Applying Character Styles
Using Nested Styles
Updating Styles
Adding Styles form Another InDesign Document
Quick Apply
Organizing Styles into Groups
Object Styles
  • Creating Object Styles
  • Applying and Object Style
  • Changing and Object Style

InDesign – Working with Styles (4)

In-Class Exercise 

  1. Open id0401_word.indd and choose Load All Text Styles from the Paragraph Styles panel menu. The Open a File Dialog box appears.
  2. In the Open a File dialog box, choose the file id0402.indd. Click Open, and the Load Styles dialog box appears.
  3. In the Load Styles dialog box, select only the styles named callout and byline to import these into your document. Click OK to close the dialog box and import the styles.
  4. Choose the Type tool from the Tools panel, and then click to place the cursor within the words by Larry Happy located at the bottom of the eft page, and then click the byline style to apply it to this text.
  5. In the Pages panel, double-click the right side of the document spread, page 73.
  6. Click and drag to select the ingredients, selecting from sugar through cinnamon. In the Paragraph Styles panel, click to apply the re_list paragraph style to the ingredients.
GREP Styles
  1. In the Pages panel, double-click the right page in the Spread, page 73, to center this page in the document window.
  2. Click within any of the bottom four paragraphs in the Molasses Gingersnaps recipe.
  3. In the Paragraph Styles panel, right-click the rec_steps paragraph style and choose Edit “rec_steps”. The Paragraph Style Options dialog box is displayed.
  4. Click on the GREP Style category on the left side of the dialog box, and then click the New Grep Style button. A new entry is created in the GREP Style section of the dialog box. Options for applying a style to specific text are then listed in the dialog box.
  5. Next to Apply Style, click [None] and choose New Character Style from the drop-down menu. Name the Style Myriad Bold, and then click to select the Basic Character Formats section and set the Font Family to Myriad Pro and the Font Style to Bold. Click OK. The new character style you created now displays next to Apply Style, indicating this style will be applied to text specified using GREP. Keep the Paragraph Styles Options dialog box open.
  6. Click the area to the right of To Text and delete any content that is there. Click on the @ symbol to the right and choose Wildcards > Any Digit. This will search for any digit, or number, within the text that has the rec_steps Paragraph Style applies to it. Click the @ symbol again and choose Repeat > One or More Times. This GREP expression looks for any digit that occurs one or more times in a row within the rec_steps styled text. Click OK. **NOTE: any numeric character that appears within the recipe steps is now bold ad uses the font Myriad Pro to make it easier to identify key areas in the steps of the recipe that need special attention.
  7. Choose File > Save to save your work, and then choose File > Close.

FINAL PROJECT: InDesign 12 Page Booklet

Research & Thumbnails and Rough Comps due on Week 15. This must be posted to your blog even though there is no class on Week 15.

12-page Booklet – The assignment is to create a booklet, to be used as a mailer for the  non-profit Charity Water.

  • The project will incorporate InDesign, Photoshop and/or Illustrator.
  • Project must be submitted with following items: Research & Conceptual Sketches, Preliminary Comps, and Final Designs. You will be graded separately on each phase of your project. You will be submitting your final design as a digital file on the class file AND as a print file that you will place in your final portfolio.
Incorporate all the skills you’ve learned this semester to create a 12-page booklet that highlights the non-profit Charity Water.
Note: This document house include the following at a minimum:
  • Nonprofit name and logo
  • Images
  • Text
  • Graphics
No two pages should be designed exactly the same. No images or headlines should be repeated. No dummy text should be used.
Size: 8.5×11 vertical format. Download the printer template here.
Requirements
Your Final Project combines all of the class lessons on creating an appropriate and functioning layout for a document. The InDesign project requires you to create a 12-page booklet for Charity Water. You may use Photoshop and Illustrator in this project, but the final layout must be in InDesign. You MUST also include a write-up of the project when turning in your digital and print files.
Physical Items to be Turned in
  1. Thumbnails of each page layout. (All layout out on ONE page)
  2. Full page layout of each page printed out in hard copy.
  3. A printed copy of your written description.
  4. All files in a folder with your name placed in the Final Project Submission folder on the class thumb drive:
  • The electronic copy of the written description (in a Microsoft Word format)..
  • The electronic copy of the final project (in PDF and InDesign).
Written Document
A written description that summarizes the design concepts and work on the project is due at the same time. The Project Written Descriptions should include proper punctuation and grammar practice. You are highly encouraged to proofread your work.

Your presentation and write-up should answer the following questions:

  • Describe the use of the document.
  • Describe the audience the document will be used for.
  • Describe the reasons for laying out the document the way you did and how its layout fits the audience it is intended for.

• Discuss the following design principles and how you created them as part of your write-up:

  1. —center of interest
  2. —unity
  3. —contrast
  4. —balance
  5. —eye movement
  6. —other means you employed to make the document work and how it improved the your document’s communication and overall look.
  • • Describe any problems you had in producing and formatting the document and how you solved them, or why you could not solve them.
  • • Discuss how you would do this document differently, if you had time to do it over, and why.
  • • Describe what you learned of significance while doing this project.

PLEASE NOTE: The paper must be written in complete paragraphs. A list that gives the information asked for in the requirements for the write-up will not be accepted.  Written descriptions must adhere to rules of grammar and punctuation.

NOTE: To review Punctuation and Grammar Rules, you might want to examine the Owl website, sponcered by Purdue University: http://owl.english.purdue.edu/handouts/grammar/index.html.


In-Design Resources

HOMEWORK | WEEK 14

************************NOTE: THERE IS NO CLASS ON DEC. 12 (week 15) AS PER SCHOOL CALENDAR.  WEEK 14 HOMEWORK MUST BE POSTED ON DEC. 12. YOU MUST LOG INTO WEEK 15 AND LEAVE A COMMENT WITH A LINK TO YOUR HOMEWORK.************************

Answer the following questions and post to your blog.

(From video 3)

  1. If you have a font that doesn’t have the style of italic, can you make it italic?
  2. Can you flow text into an existing frame?
  3. Can you divide one text frame into multiple columns?
  4. How can you add Previous and Next page markers?
  5. What is the best way to see changes that have been made to text in a given story?
(From video 4)
  1. What is the difference between character and paragraph styes?
  2. What is a nested style and why is it used?
  3. What is the keyboard shortcut to access the Quick Apply option?
  4. If there are multiple styles in a document and scrolling becomes tedious, how can  you organize the styles?
(From video 4)
To practice creating style, do the following:
Create  your own layout using favorite recipes. (You can get some from foodnetwork.com). Import the styles from this lesson and apply them to the text and frames in your own recipes. Import the object styles as well.

***NOTE: Save  your files three ways***

  • First – File > Save as and use the .indd extension.
  • Second – File > Package
  • Third – File > Export save as a .JPG
  • Then, open the .JPG in Photoshop and check the image size. Make sure it’s at 72dpi and the color mode is RGB.

Upload finished files to your blog AND to your Flickr feed.

Follow the videos you saw in class and complete the exercises. Post to you blog and to Flickr.


EXTRA CREDIT 

Working with Graphics (5)

Download these files. Watch the video below.

Answer the following questions and post to your blog:

  1. How can InDesign automatically fit images to frames or frames to images?
  2. To flow text around the shape of a clipping path, which panel can you use?
  3. How do you reposition a graphic inside its frame?
  4. Which graphic format supports the visibility of layer comps?
  5. Once a layered graphic is placed in an InDesign document, how do you change the layer visibility?


Read More

Week 12: Photoshop Project II

Photoshop Project II 

  • Please post links to for the following:
  • Roughs and Comps of the Photoshop style frames
  • Completed homepage template from one of the tutorials
  • Completed revised homepage template with YOUR new color scheme, fonts, images, etc.
  • Sketches and rough designs of your two additional pages showing placement of images/text for the second two pages.
Post everything to your blog and list your blog link in the comments section.

Be sure to read my comments that I post regarding this deliverable so that you can fix errors and produce updated and finished iteration for week 13.


Week 13 | Homework

Choose ONE of your classmates projects and critique it. Post your comments on your blog PRIOR to Sunday at noon. Post another comment on week 12 letting your classmates know whose work  you are critiquing and a link to your critique.

FINAL PROJECT DUE ON WEEK 13 AT THE BEGINNING OF CLASS.

Read More

Week 13: Intro to InDesign

Week 13: Intro to InDesign

Week 13 | Overview

  • Understanding the InDesign workspace
  • Working with panels and tools
  • Navigating through InDesign documents
  • Importing text and images
  • Using styles to quickly format texts and objects
  • Creating and saving custom page sizes
  • Creating page guides
  • Adding section
  • Using automatic page numbering
  • Creating master pages and applying them to document pages

In InDesign you’ll:

Work with a document to understand how to navigate, place graphics, and add formatting to text, creating a finished document that can be printed or distributed as a digital document.

An Overview of InDesign


The InDesign Workspace:

Documents in InDesign are located INSIDE the black border. This is your workspace.

Document Window:

Anything INSIDE the black border will appear in your finished page. The area outside of the black border is called the “pasteboard”. You can drag and drop elements you want to use on your page there but you MUST DRAG them inside the black border to show up on your finished file. This is a great way to “temporarily” hold items until you use them.



Download project files here:

  1. InDesign 01 Project_Done
  2. InDesign 01 Project
  3. InDesign 01 Links
Choose File > Open > Open Project Done

Choose Window > Workspace > Typography

Choose Window > Workspace > Reset Typography to reset the InDesign panels to their default positions for the Typography workspace.

Using Guides
Just like Photoshop and Illustrator, guides in Indesign will help you align content on your page and create and organized layout.
  • Margin Guides
  • Ruler Guides
Margin guides define the space around the edge of your document. This is important so that you don’t cut off any content on your page. Margin guides are displayed in magenta. By default, they display 1/2″ within the page edge.
Ruler guides are guides you add to your document layout to align content on your page. You can hide the guides anytime you want.
  • To hide guides:  Choose View > Grids & Guides > Hide Guides or Command+; on the Mac.
  • To view guides: Choose View > Grids & Guides > Show Guides or Command+; on the Mac.

Viewing Modes
The viewing modes option lets you choose whether all content and guides display on your monitor, or whether InDesign displays only content that is positioned on the page and will print.
Various Viewing Modes
 Preview Mode
At the bottom of the Tools panel, click and hold the Mode button, and choose Preview from the available modes. The pasteboard will appear gray and all elements located on the pasteboard are hidden. The boarders do not display around any items on the page if they are not selected.
Bleed Mode
Click and hold the Mode button again and choose Bleed from the menu. This shows the bleed area that was specified when the document was created. “Bleed” is the outside of the page that is intentionally used by designers so that any inaccuracies in the cutting, trimming, and binding process do not create a visible white space along the edge of an object that is intended to print all the way to the edge of a document.
Presentation Mode
Click and hold the Mode button again and choose Presentation from the menu. This mode present your document on a black background. It’s a good way for viewing your document. In this mode  you can navigate through the pages of your document by using the up and down or left and right arrow keys. To exit Presentation mode click escape.
Click and hold the Mode button again and choose Normal.

Working with Panels
The Tools Panel
  • Click on the double-arrow icon at the top of the tools panel. This changes it from a single to a double column.
  • Click the gray bar at the top of the Tools panel, hold down the mouse button and you can drag the panel around.

Changing the Magnification of your Document
OPEN the project files above.
  1. In the Pages panel, double-click on the page 1 icon to display the first page of the document.
  2. Select > Zoom tool and click and hold in the upper-left corner of the Spinnews logo at the top of the page and then drag down to the lower-right corner of the logo. Release the mouse. The area  you’ve selected with the Zoom tool is magnified. If you’ve zoomed too much, hold the Option key while clicking with the Zoom tool.
  3. Select the Hand tool from the Tools panel. Click and hold down on the page in the document window. Magnification changes and a red frame appears,  indicating which portion of the document will be visible when you finish scrolling.
  4. Use the Hand tool to arrange the page so the logo is in the center of your document.
  5. Press and hold the page in the document window. Position the red frame so the entire border of the image is visible, then release the mouse.
  6. To view the entire document: View > Fit Page in Window or Command+0.

Placing and Formatting Text 
Adding Type

Working with Type
When adding type in an InDesign layout, you always place it inside a frame. Frames are containers that hold text but they can also hold graphics or shapes.
  1. Choose File > Open File and open id01.indd.
  2. If you need to, press the Pages button in the docking area along the right side of the workspace. The Pages panel open. In the Pages panel, double-click page 1 to center this page in the workspace.
  3. In the Tools panel, select the Type tool. Position you cursor along the left side of the page, where the left margin guide and the first horizontal guide meet. Click and hold down, then drag down and to the right to the location where the right margin guide and the second horizontal guide meet. Release the mouse and a new text frame is created and a cursor blinks.
  4. Type: Fending off the winter blues with cross-training – in the text frame. It appears in the default font size.
  5. In the panel docking area along the right side of the workspace, click the Paragraph Styles button. Select the Heading style. The Heading style is applied to the paragraph which includes all the text in this frame.
  6. The top line of the sentence is longer than the bottom line. To balance the lines, click the panel menu button in the top-right corner of the Control panel and choose Balance Ragged Lines from the submenu. InDesign will automatically balance the lines within the frame.

Building Documents with Master Pages

  • Creating and saving custom page sizes
  • Creating page guides
  • Adding section
  • Using automatic page numbering
  • Creating master pages and applying them to document pages
Download project files here: InDesign 02
 

HOMEWORK | WEEK 12

Answer the following questions and post to your blog.

  1. What does the red plus sign in the lower-right corner of a text frame indicate?
  2. How do you reposition an image inside of a frame?
  3. How can you ensure that if your reposition the panels in InDesign to your liking , you can always bring them back to that state?
  4. If you cannot see panels that you need to use, how can you locate and display them in your workspace?
  5. Do automatic page numbers always start with page 1?
  6. If you want to modify content on a page that is linked to a master page, how do you select this locked content?
    How can you access styles created in other InDesign documents?

***NOTE: Save  your files three ways***

  • First – File > Save as and use the .indd extension.
  • Second – File > Package
  • Third – File > Export save as a .JPG
  • Then, open the .JPG in Photoshop and check the image size. Make sure it’s at 72dpi and the color mode is RGB.

Upload finished files to your blog AND to your Flickr feed.

Follow the videos you saw in class and complete the exercises. Post to you blog and to Flickr.

 

Read More

Week 11: Retouching & Photoshop Project II

Week 11: Retouching & Photoshop Project II

Week 11 | Overview

Retouching Images 

  • Clone Stamp Tool
  • Repairing Fold Lines
  • Repairing Fold Lines
  • Healing Brush
The 3 Components of Good Web Design
  • Aesthetic Design
  • Information Design
  • Interface Design
MAJOR PROJECT II: Website Style Frame Design

Retouching Images 

In-class Assignment #1 – Clone Stamp Tool (Looks like a rubber stamp)
  1. Select the Zoom tool and click and drag a marquee around the top half of the image.
  2. Select the Clone Stamp tool.
  3. Position your cursor over the nose of the girl and hold down the Option key. When you see the crosshair, click with your mouse. You’ve just defined the source image area for the Clone Stamp tool.
  4. Position the cursor to the right side of the girls face, then click and drag to start painting with the Clone Stamp tool.
  5. Press the ] (right bracket) to enlarge the Clone Stamp brush.
  6. Change the Opacity to 50% to clone at a 50% opacity or go back to 100% if you want full opacity.
  7. Save your file and name it as follows: 2012.10.1.Smith_John_Clone
  8. Upload to your blog and Flickr and save your .psd file.

Repairing Fold Lines
Using the History command to reopen the image of the girl in it’s original state.
In-class Assignment #2– Repairing Fold Lines
  1. Select the Zoom tool and check the Resize Windows To Fit check box in the Options bar.
  2. Click three times in the upper-right corner of the image to reveal the fold marks that you will repair with the Clone Stamp tool.
  3. Select the Clone Stamp tool and Ctrl+click on the image area to open the Brush Preset picker. Click on the Soft Round brush and change the Size to 13px. Press the Return key.
  4. Position your cursor to the left of the fold mark, and hold down the Option key and click to define the area as the source.
  5. Position the Clone Stamp tool over the middle of the fold line itself, and click and release.
  6. Press Shift+[ (left bracket) several times to make your brush softer.
  7. Continue painting over the fold lines in the upper-left corner.
  8. Save your file and name it as follows: 2012.10.1.Smith_John_FoldLines
  9. Upload to your blog and Flickr and save your .psd file.

The Spot Healing Brush (Looks like a band-aid)
The Spot Healing Brush tool paints with sampled pixels from an image and matches the texture, lighting, transparency, and shading of the pixels that are sampled to the pixels being retouched, or healed. UNLIKE the Clone Stamp tool, the Spot Healing Brush automatically samples from around the retouched area.
In-class Assignment #3– Spot Healing Brush
  1. Using the History panel, go back to the original image and select the Zoom tool. Click and drag the lower-right section of the image to zoom into the lower-right corner.
  2. Select the Spot Healing Brush tool and click and release repeatedly over the fold marks.
  3. Using the Spot Healing Brush, repair the fold lines.
  4. Save your file and name it as follows: 2012.10.1.Smith_John_SpotHealingBrush
  5. Upload to your blog and Flickr and save your .psd file.

The Healing Brush (Looks like a band-aid with dotted lines)
The Healing Brush tool also lets you correct imperfections. Like the Clone Stamp tool, you use the Healing Brush tool to paint with pixels you sample from the image, but the Healing Brush tool also matches the texture, lighting, transparency, and shading of the sampled pixels. Now we’re going to remove some defects from the girls dress.
In-class Assignment #4– Healing Brush
  1. Go back to the original version of the image. Choose View > Fit on Screen.
  2. Select the Zoom tool, then click and drag over the bottom area of the girls dress.
  3. Click and hold on the Spot Healing Brush to select the hidden Healing Brush tool.
  4. Position your cursor over an area near to, but outside, the fold line in the skirt, as you are going to define this area as your source. Hold down the Option key and click to define the source.
  5. Paint ove the fold line that is closest to the source area you defined.
  6. Repeat this process. Option+click in appropriate source areas near the fold across the dress, then paint over the fold lines, using the Healing Brush tool.
  7. Save your file and name it as follows: 2012.10.1.Smith_John_HealingBrush
  8. Upload to your blog and Flickr and save your .psd file.
The FINAL images encompasses ALL the tools used above. Save it as 2012.10.1.Smith_John_RetouchingFinal

The 3 Components of Good Web Design
  • Aesthetic Design

Aesthetic design is all about getting the look right. A designer that focuses on good aesthetic will be able to design sites that not only look good but the designs fit the need. Designs convey different messages to an end user, so it’s essential that a design matches the site’s message. If your design looks great but doesn’t serve its content and message, in the end, it’s a bad design. When designing for the web, it’s very important that you don’t simply follow fads and trends without considering how appropriate it is for your clients market. The design has to look good, but also look appropriate.

Of the three components of web design, aesthetic design is the one that people most identify as what “design” is. It may look simple to the end user but aesthetic design is deceptively difficult. Simple and effective doesn’t mean quick and to the point.

  • Information Design

Information design focuses on usability. It’s laying out the the information on a website in the best way, so that users can intuitively and effectively find and understand information.
Think about how you organise and format text on a page. Most people skim through content on a screen so it’s much better to organise it with headings and subheadings, diagrams and visual hooks, and general variation for the eye. Simply breaking down the structure of a block of text and using techniques like these make the page much easier to digest. Information design is more than what you have on a single page, it’s how you lay out the menus and submenus and how your hyperlinks connect information and pages.

Information Architectures specialize in website usability and flow.

  • Interface Design

Interface design focuses on the arrangement and makeup of how a user interacts with a site. Interface means a point or surface where two things touch. Web user interface is where a person and a website meet. Its how the menus, components, forms, and all the other ways you can interact with a website connect with the person using the site. It’s is about making the experience of using a website easy, effective and intuitive.

The use of icons is a simple example of interface design. How intuitive is the icon? Will the user immediately know what to do when they see the icon? The use of icons and other visual labels to signify different types of content or actions is good interface design.


 Information Tips To Make You A Better Website Designer

Be Methodical

  • Understand the Site’s Content, Processes and Purpose
  • Prioritize and Look for User Paths
  • Organise the Information

Think Out of the Box

  • Let other people review your design
  • Don’t limit yourself to what you think you “have to include” and more about “what you can delete”

Keep your Structure Balanced

  • Keep the number of options on a given level to 4 – 8 (main and subnav)

Design for Scanning, Skimming and Jumping

  • Most of the time people skim, scan and jump around a website
  • Don’t wrap key information in bundles of text, highlight it, change the font size
  • Convey information with headings, subheadings, bullet points and diagrams

Design Text that Wants to be Read

  • Focusing on displaying text well
  • Don’t use too-small font sizes, low contrast between text and background color, or light text on a dark background
  • Consider titles, subheadings, quotes, and other techniques for pulling the eye

Guide the User both Across Pages and Through Pages

  • Set ways that users will tend to explore a website
  • Use visual guides and links to help them move along a path

Don’t Overcomplicate Things

  • Simple is better

Visualize Information

  • Good visuals matter
  • Use diagrams or visualize some data, concepts or information

Analyse your Information Design

  • Analyse the site to see how people use and digest the information

Don’t be Satisfied with 1 Iteration

  • Make more than one version, no matter how happy you are with the first one

Throw Objects around to Look for Happy Accidents

  • Some of the best designs are done by accident

Create a Theme Around a Visual Element

  • Make a play on some visual element – dots, dashes, lines, diagrams, bullets, it’s your choice
Use Structure!
  • Evenly space things
  • Line things up
  • Use Grids
  • Be Systematic in Font Sizes and Families

PHOTOSHOP FINAL PROJECT UPDATE:

MAJOR PROJECT II: Website Style Frame Design: Adobe Photoshop CS6

The assignment is to create website style frames, using Adobe Photoshop CS6.

* Each project must be submitted with following items: Research & Conceptual Sketches, Preliminary Comps, Word Document and Final Designs. You will be graded separately on each phase of your projects. You are required to submit all research, inspiration, sketches, preliminary comps, word document and final design as digital files.

Design Brief

Subject: Website Design

Choose ONE of the three website design tutorials to design “style frames” (website page mockups) for a future website build. The tutorial will guide you through designing the “home page” of the website. You are required to design the HOME PAGE as well as TWO additional pages. Additional pages could be any of the following: contact page, photo gallery page, about us page or get involved page.

  1. Option One      — Simple Web Page Layout
  2. Option Two     – Professional Web Layout
  3. Option Three  – Portfolio Web Layout
  4. Option Four   —  Six Degrees Web Layout
  5. Option Five   —  Photo Portfolio
  • For your additional two pages, keep the same logo, header, main navigation and footer. Change the layout of the other parts of the page.

Page Layout

  1. Appealing to target audience
  2. Consistent site header/logo
  3. Consistent navigation area
  4. Informative page title that includes the company/organization/site name
  5. Page footer area — copyright, last update, contact e-mail address
  6. Good use of basic design principles: repetition, contrast, proximity, and alignment
  7. Balance of text/graphics/white space on page
  8. Good contrast between text and background
  9. Home page has compelling, interesting information above the fold (before scrolling down) at 1024×768

Color and Graphics

  1. Use of different colors in page backgrounds/text is limited to a maximum of three or four colors plus neutrals
  2. Color is used consistently
  3. Color has good contrast with associated text
  4. Color is not used alone to convey meaning (accessibility)
  5. Use of color and graphics enhances rather than distracts from the site
  6. Each graphic used serves a clear purpose

Content Presentation

  1. Common fonts such as Arial or Times New Roman are used OR no more than one web font used. Make sure your using WEB SAFE FONTS.
  2. Techniques of writing for the Web are used: headings, bullet points, short sentences in short paragraphs, use of white space, etc.
  3. Fonts, font sizes, and font colors are consistently used
  4. Content provides meaningful, useful information
  5. Content is organized in a consistent manner
  6. Information is easy to find (minimal clicks)
  7. Content is free of typographical and grammatical errors
  8. Content provides links to other useful sites
  9. If standard link colors are not used, hyperlinks use a consistent set of colors to indicate visited/non-visited status

Miscellaneous:

  • The website page design must contain all of the information that is normally found on a web page.
  • The selection of type styles, typefaces and box package size and format should be consistent with the home page.
  • The pages must demonstrate unity by using common themes that demonstrates they are from the same website.

Project Submission and Printout:

  • The three website style frames must be uploaded to your blog, Flickr and all files placed on the class thumb drive. KEEP ALL ORIGINAL FILES. They will be turned in at the end of the semester on a DVD.
  • Word document, research, sketches, design iterations and final design in the following formats: .psd, .jpg and .doc should be uploaded to your blog and the class thumb drive and labeled as follows:  Last Name_First Name_Date_Project I_Photoshop Styleframes.
  • The style frames will be turned in as a Adobe Photoshop file, a .jpg file and a pdf file. The written description and research for the project in Microsoft Word will be turned in .doc format and the project sketches will be turned in .jpg format.

Items That Must Be Physically Turned In On Week 13:

  1. Paper print out of the project written description.
  2. . psd, .jpg, .pdf and .doc files uploaded to the class thumb drive.
  3. Adobe Photoshop Project I: Written Description

Requirement Summary

  1. Your additional website style frames must use multiple Photoshop tools and procedures and may NOT be created only from text or images that have not been Photoshopped.
  2. Additional Photoshop style frames must illustrate that they were designed and fit the shape of the home page and the style is consistent through out the pages.
  3. A Microsoft Word document with the following information must be included with your final project II submission. It must include a written description explaining the Photoshop tools, principles, and elements you used in designing your product.
  4. Create a folder on the class flash drive and label it: Last Name_First Name_Date_Project I_PhotoshopStyleframes. Inside of that folder, upload the following files:
  5. The write-up should specifically define the what and why of each element designed and why you designed it that way.  The Word document will be graded both for content and grammar.
  • . psd file
  • .jpg file
  • .pdf file
  • .doc document

Adobe Photoshop Project I: Written Description Should Include:
Write a description of the website style frame design process and the thinking behind its design. The following items should be included in your project description: Remember to include your full name, date, project I and project title in the document. The content of the Photoshop Project Written Description must include the following:

  1. The name of the website tutorial you followed and the url of the tutorial you followed.
  2. Why did you select the colors you did for your additional style frames designs?
  3. What research did you do to make the additional style frames designs fit the nature of the company and the home page?
  4. What did you do to assure that the style frames would be consistent with the home page?
  5. What elements are your center of interest on your additional pages and why?
  6. Describe the flow throughout the various parts of your web page designs.
  7. What elements did you use to create unity between the home page and the two additional pages you designed?
  8. How successful do you think you were in meeting the design needs of a consistent and fluid website?
  9. What Photoshop tools did you rely on most and why did you choose these tools?
  10. What problems did you encounter while creating your style frames and how did you solve them?
  11. What would you do differently, if you could start over?

NOTE: If you need help with Punctuation and Grammar Rules, review the Owl website, sponsored by Purdue University: http://owl.english.purdue.edu/handouts/grammar/index.html.

Due Dates:

  • Completed style fram designs re due at the BEGINNING of class on week 13. Roughs and comps of the package are due week 12 to allow for class critiques.

NOTE: Be prepared to present your Project I on week 12 for class reviews. Final due date is Week 13.

Photoshop CS6 “Style Frames/Website” Grading Rubric

Grading Criteria and Point Allocations:

File format and Submission:

5.0 pts. ________ Files formats turned in: Jpg, PDF (.pdf) and original Photoshop (.psd) file format.
5.0 pts. ________ The written description (.doc) and Jpg’s of your drawing/design iterations prior to the start of Photoshop design. Due on week 7

Consistency of design:
5.0 pts. ________ The two additional style frames are consistent with the home page design.
5.0 pts. ________ Items should be viewed as a group use effective proximity.
5.0 pts. ________ Pages used a variety of Photoshop tools and were not made only with text and/or images.

Graphical elements with text:
5.0 pts. ________ The additional pages were legible and understandable when viewed.
5.0 pts. ________ Additional page designs were clear and distinctive.
5.0 pts. ________ Images, text and other placeholders related well to the rest of the website design.
5.0 pts. ________ The website pages are clearly understood and recognized for what it is.

Representation:
2.5 pts. ________ Design is appropriate for the company or product.
2.5 pts. ________ The type selection was appropriately matched the home page.

Color:
2.5 pts. ________ Header and text color blends well and look integrated.
2.5 pts. ________ The balance of color between background and type was well planned and the focus is appropriately placed.
2.5 pts. ________ Color selections are appropriate for the website as well as color groupings.

Interest and function:
2.5 pts. ________ Style frame shows a distinct and appropriate center-of-interest, and the eye is drawn to it.
2.5 pts. ________ Images and text sizes are appropriate and are easy to read.

Quality of Work:

10.0 pts. ______   The design for the additional pages were well thought out and represents quality work and effort.
7.5 pts. _______   The designs reflect the use of a large number of Photoshop tools and were used to their best advantage.
5.0 pts. _______   The designs incorporate website development research, sketches, iterations and final output.

Word and Submission:

15 pts. ________ Microsoft Word document including a written description explaining the Photoshop tools, principles, and elements you used in designing your product.

Total__________


Week 11 | Homework

Critique

Using critique guidelines in the article “How to Write a Critique”,  choose the “text” images from last weeks homework from ONE of you classmates. Critique their three images.
  • relax
  • think small
  • rise up
Upload your critique to your blog. Make sure you write the classmates name that you are critiquing down on your blog. You can review the reading, How to Write a Critique here.
Critique:  Assess the artistic elements of the text images
  • Color
  • Composition
  • Font Choice
  • Effectiveness
Explain what you liked about each text image, and why you liked it.
Elaborate on elements of the composition that could be improved upon
Summarize your general perception.
Delicious:
Tag three more sites that focus on Photoshop which refer to any of the techniques we learned in class today. Write a comment in Delicious about why you think each one would be a good resource for this class. *Make sure you also add the tag:  Fundamentsof adobecs6MSUFall2012
Photoshop Project II – Following Items Due Next Week – Week 12
Roughs and Comps of the Photoshop style frames are due week 12 to allow for class critiques. Meaning: The COMPLETED homepage template from one of the tutorials above, the COMPLETED revised homepage template with new color scheme, fonts, your images, and at a minimum, sketches of documents showing placement of images/text for the second two pages.
NOTE: Be prepared to present your Project II on week 12 for class reviews. Final due date is Week 13.
** THERE WILL BE NO CLASS ON WEDNESDAY, NOVEMBER 20TH. You will still be required to post on the class blog on the 20th and upload your template design and homework to your blog.**
Read More

Week 9: Selection Tool, Painting and Photoshop Project I

Week 9: Selection Tool, Painting and Photoshop Project I
 Week 9 | Overview
Magic Want Tool
Refine Edge Feature
Quick Mask
Type Tutorial
Painting and Retouching
Brush Presets
Creating a Border
Blending Modes
Eyedropper Tool
Photoshop Major Project I

Working with the Magic Wand Tool

Open file ps0502_work here.

In-class Assignment #1 – Use the image above to work with the Magic Wand Tool.

  1.  Select and hold the on the Quick Selection tool to locate and select the hidden Magic Wand Tool.
  2. In the Options bar, make sure the tolerance is set to 32.
  3. Position your cursor over the red portion of the kite and click once. Notice that similar tonal areas that are touching are selected. Place your cursor over different parts of the kite and click to see the different selections that are created. The selections pick up only similar tonal areas that are touching, which in this case is generally not the most effective way to make a selection.
  4. Choose Select > Deselect or Command + D.
  5. Click once in the sky at the top center of the image. The sky becomes selected. Don’t worry if the sky is not entirely selected, it is because those areas are outside of the tolerance range of the area that you selected with the Magic Wand tool.
  6. Press Command + 0 (zero) to fit the picture to the screen. Then hold down the Shift key and click the area of sky that was left unselected. Those areas are added to the selection of the sky.
  7. Choose Select > Inverse. Now the selection has been turned inside out, selecting the kite. Inversing a selection is a helpful technique when solid colors are part of an image, as you can make quick selections instead of focusing on the more diversely colored areas of an image.
  8. With the selection of the kite still active, choose Select > Deselect, and the selection is deselected. Then choose Select > Reselect to reselect the kite.
  9. Now you will sharpen the kite without affecting the sky. Choose Filter > Sharpen > Unsharp Mask. The Unsharp mask dialog box appears.
  10. Drag the Amount slider to the right to about 150, or type 150 into the amount text field. Leave the Radius text field at 1. Change the Threshold slider to about 10, or type 10 into the Threshold text field.
  11. Click and drag in the preview pane to bring the kite into view. Position  your cursor over the kite in the preview pane, and then click and hold. Release the mouse to see the Unsharp Mask filter effect applied. Press ok.
  12. Save your file and name it as follows: 2012.10.1.Smith_John_Text_MagicWandTool
  13. Upload to your blog and Flickr and save your .psd file.

Making Difficult Selections with the Refine Edge Feature

Open file ps0504_work here.

In-class Assignment #2 – Use the image above to refine edges.

Using the Refine Edge feature can help you to improve your selection of difficult items such as fur and hair.

Open the image file above.

  1. Click and hold the Quick Selection tool, and then select the hidden Magic Wand tool.
  2. Click the white area off to the right of the woman; the white area becomes selected.
  3. Choose Select > Inverse to invert the selection. The woman is now selected.
  4. Click on the Refine Edge button in the Options bar, the Refine Edge dialog box appears.
  5. To get a better view of the hair selection, choooose the Black & White option from the View drop-down menu. Black &White is a viewing option that you can use to see your selection better.
  6. Using the Radius slider, in the Edge Detection section, change the Radius value to 100. The issue you now have is that by increasing the radius to get a better selection of hair, you also degraded the edge selection of the shoulder, beneath the hair. You will use the Erase Refinements tool to help you clean up your selection.
  7. Click and hold down on the Refine Radius tool and select the Erase Refinements tool.
  8. Position your cursor over and area in your image where you would like to clean up the selection.
  9. Start painting over the areas that you do not want the refinements to take place.
  10. Select Layer Mask from the Output drop-down menu and press OK. Since you have added a layer mask, your results are shown as a transparent selection.
  11. Save your file and name it as follows: 2012.10.1.Smith_John_Refine_Edge
  12. Upload to your blog and Flickr and save your .psd file.

Using Quick Mask

Open file ps0505_done here AND Open file ps0505 here.

In-class Assignment #3 – Use the image above to refine edges.

Quick Mask is another method for modifying selections.  When using Quick Mask mode, you’ll use the Paint Brush tool to paint and modify your selection. In this exercise you will create a mask using the Quick Mask feature, save the selection, and then copy and paste the selection into another image.

Open the image file above.


Photoshop Type Tutorial

The new Type Styles feature in Adobe CS6 enables you to define text styles, for both paragraphs and characters, in a very similar way as in InDesign. This allows you to change the appearance of any text you have very easily.

Character Styles: Control character attributes, such as font size, color, kerning, leading, etc (the attributes in the Character panel).

Paragraph Styles: Control both character AND paragraph attributes, such as indents and spacing, alignment, hyphenation, etc (the attributes in the Paragraph panel). These panels can be found under the Window menu, OR under Type -> Panels

  • Paragraph and Character Panels
  • Paragraph Styles and Character Styles Panels
  • Setting Up Type Styles
  • Creating Paragraph Styles
  • Modifying Paragraph Styles
  • Multiple Paragraph Styles
  • Selecting Paragraph Styles
  • Changing a Paragraph Style’s Settings

PAINTING AND RETOUCHING:  STARTING TO PAINT
In Photoshop create a new document. File > New. Type paiting in the Name text field.

Using the Color Panel
Open the Color panel. If it’s not visible choose Window > Color.
Click once on the Set Foreground Color box to open the Color Picker.
Type in the RGB text fields: R:74 G:150 B:190 and press OK.

Using the Brush Tool
The Brush tool paints using the foreground color. You can control the brush type, size, softness, mode, and opacity with the Brush tool Options.
  1. Select the Brush tool in the Tools panel.
  2. Press the arrow next to the brus size in the Options bar to open the Brush reset picker.
  3. Position our cursor over any of the brushes to see a tooltip appear. It provides a description of the brush and displas its pixels.
  4. Choose the brush described Soft Round Pressure and click on it.
  5. Enter the size 45.
  6. Position the cursor on the left side of the image window, then click and drag to painting a curved line.
  7. Use the Color Picker panel and click on a different color. Then paint another brush stroke crossing over the orignal stroke.
  8. Press the ] key and the brush increases in size. Press the left ] and it decreases the size of the brush.

Changing Opacity
Changing the level of opacity affects how transparent your brush strokes look over other image information.
  • Open the Swatches panel Window > Swatches
  • Move your move over a swatch color and choose a color.
  • To change its opacity, go to the Options bar at the top and click on the arrow next to 100%. A slider appears. Drag the slider to the left to lower the opacity to about 50%, and then click on the arrow to collapse the slider. You can also just type 50 into the opacity text field. Windows > Opacity
  • Use your mouse to overlay another color and note the transparency of the color.
*Note: Changing the opacity of a color does not affect any of the painting that you have already completed, but it will affect future painting.

Using the Brush Presets
  1. Select the Brush tool and then select the Toggle the Brush panel button in the Options bar. The Brush panel appears.
  2. Select the Brush Presets tab to bring it forward and then select Small List from the panel menu.
  3. Click on the Round Curve Low Bristle Percent preset.
  4. Using the Size slider click and drag the size of the brush to approximately 205px.
  5. With the Brush tool still selected,  hold down the Option key and sample a color of the woman’s skin color. Choose a darker shade if possible.
  6. In the Options bar, click on the Mode drop-down menu and select Multiply.
  7. Use large wide brush strokes to paint over the woman playing the guitar.

***Save the PSD and upload the jpg to your blog and Flickr. save it as LastName_FirstName_Brush.


Using the Airbrush Feature
Using the airbrush option allows your paint to spread much like the effect you would have using a true airbrush.
  1. Select Round Fan Stiff Tin Bristles from the Brush Preset panel. Change the value to 20px.
  2. Press D to return to the Photoshop default colors of Black and White.
  3. If the Mode drop-down menu in the Options bar is not set to Normal, set that to Normal now.
  4. Click and release with your cursor anywhere on the image to stamp a brush stroke onto the image. Do this a few more times.
  5. Now, Select the Enable airbrush-style build-up effects in the Options bar.
  6. Use the same brush preset, click and hold on your image to notice that the paint spreads, as you hold.
  7. When you are finished experimenting, return the Flow control back to 100%.

***Save the PSD and upload the jpg to your blog and Flickr. ave it as LastName-First_name_Airbrush.


Creating a Border Using the Bristle Brushes
Now we’re going to use a bristle brush to create an artistic border around the edge of the image.
Select the Round Blunt Medium Stiff bristle brush from the Brush Presets panel.
Choose any color that you want to use for the border you’re about to create.
Click in the upper-left corner of the image. Hold down the Shift key and click in the lower-left corner. By Shift+clicking you have instructed Photoshop that you want a stroke to connect from the initial click to the next.
Shift+click in the lower-right corner, and then continue this process until you return to you original stroke origin in the upper-left corner.
***Save the PSD and upload the jpg to your blog and Flickr. Save it as LastName-First_name_Bristle_Brushes.
Here’s the BEFORE photo:
Here’s the AFTER picture:

Applying Color to an Image
You can color anything in Photoshop by using different opacity levels and blending modes. Let’s take a grascale image and tint it with color.
  1. Double-click on the Zoom tool to change the view to 100%.
  2. Choose Image > Mode > RGB Color. In order to color a grayscale image, it needs to be in a color mode.
  3. Open Window > Swatches
  4. Select the Brush tool and Ctrl+click on the canvas to open the contextual Brush Preset picker. Select the Soft Rounded brush (this should be the first brush). Slide the Size slider to 25 and the Hardness slider to 5. Press Return key.
  5. Using the Opacity slider in the Options bar, change the opacity of the brush to 85%.
  6. Position you cursor over a brown color in the Swatches panel.
  7. Using the Brush tool, paint the boy’s hair.
  8. Press Option Z to delete the painting.

Changing Blending Modes

Your still using the photo of the boy – ps0603.

You can use Opacity to alter the appearance of a brush stroker but you can also use blending modes. The blending mod controls how pixels in the image are affected by the painting.
  1. In the Options bar, change the opacity to 50%.
  2. Select Color from the Mode drop-down list.
  3. Using the Brush tool, paint over the boy’s hair.
  4. Finish painting the hair brown and save the image.
***Save the PSD and upload the jpg to your blog and Flickr. Save it as LastName-First_name_Painting.

The Eyedropper Tool 
The Eyedropper tool is used for sampling color from an image. For this in-class assignment, we’re going to use the Eyedropper tool to sample a color from another image to colorize te boy’s face.
  1. Make sure the original black and white photo of the boy is open.
  2. Select Window > Arrange > 2-up Vertical to see both images.
  3. Click on the title bar of the color photo to bring that image forward.
  4. Choose the Eyedropper tool and osition it over the boy’s face in the color iimage. Click once on his left cheek. The color is selected as the foreground color in the Tools panel.
  5. Select the Brush tool, then using the Options bar at the top, make sure that Color is selected from the Mode drop-down menu and that the Opacity slider is set at 15%.
  6. Position your cursor over the image to see the brush radius size. Press the ] until the brush is 150px wide.
  7. Click on the title bar of the black/white image and with the Brush tool selected, paint the boy’s face.
  8. Remember, your Opacity is set at 15% so you’ll build up the skin tone color by painting over areas again.
  9. With the Brush selected, press the Option key and sample the blue color from the striped shirt in the color image.
  10. Press the [ (left bracket) key until the brush size is about 60px.
  11. Press the number 5. By pressing 5 you can indicate that you want 50% opacity.
  12. Position the paint brush over one of the boy’s eyes in the black/white image and click to paint it blue. Repeat with the other eye.
***Save the PSD and upload the jpg to your blog and Flickr. Save it as LastName-First_name_PaintingFullBoy.


Homework | Week 9   
If you did NOT finish all the in-class assignments, please finish it for homework and upload to both Flickr and your blog. SAVE YOUR PSD’S.
Recreate Rock and Roll Girl
Using multiple layer, recreate the finished imaged of the rock and roll girl seen above.

Delicious:

Tag three more sites that focus on Photoshop which refer to any of the techniques we learned in class today. Write a comment in Delicious about why you think each one would be a good resource for this class. *Make sure you also add the tag:  fundamentalsofadbobecs6msufall2012

Create text entries, using Photoshop CS6, for the following phrases:

  • relax
  • think small
  • rise up
Document size: 800px x 600px
Color mode: RGB
The font and image should be in harmony with the phrase. Read this to help you choose your fonts. Note: There is no image in this exercise, create a new file in Photoshop, use color and/or texture for the background, apply and manipulate text. Post to blog. SAVE YOUR PSD’S.
Graffiti project
Select 1 photograph from any source (Google images – search graffiti) and use the paint tool to change the image in an interesting way, post to Flickr and to your blog. Use at least 3 unique features of the paint tool on each image. Part II: Create YOUR OWN unique graffiti images (THREE IMAGES). Start with a blank document and use the tools you learned in class. Document size: 800px wide x 600px deep.
Photoshop Major Project I:
Web Banners

Photoshop Major Project is due at the BEGINNING OF CLASS on week 10 (NEXT WEEK).

Client:

The American Red Cross 

CLIENT BRIEF:

Create 6 website banners to support the Internet marketing efforts of the American Red Cross (ARC) which highlight Hurricane Sandy. ARC has a recognized brand with specific font, color and sizes. Access their various logos and design specifics here.

You have free reign to design the composition as you would like. Focus on online donation,  a second idea here,  text treatments that promote recovery efforts, blood donations, co-brand one of your banners with MSU, or any other American Red Cross banner ad that specifically focuses on New Jersey and Hurricane Sandy.

American Red Cross Brand Guide

Review their brand guide carefully to give the web banner the correct voice, imagery and look and feel.

The above image links are meant as a reference and NOT for you to directly copy. You can get more inspiration here.  For this project, you will need SIX completed composition images of your designs (6 different designs) that includes the ARC’s logo and follows their design brand which will be used in a series of web banners. You will also need to create a Word document that explains your concept rationale. The Word document may also have some sort of image/images integrated into it. 

  1. Develop a concept for this project.
  2. Devise sketches of the proposed compositions. Sketches should be full-fledged compositions of the intended deliverable for your client.  
  3. Submit JPG images sand .PSD files for each of the SIX web banners, as well as your Word doc. Your Word doc should be at least 250 words (roughly one page) in length. Include your concept statement with your rationale for design, the process you went you through to achieve your result, and a breakdown and explanation of the elements of your design.
  4. Use Photoshop CS6 to create a series of SIX unique concept-based web banners. You can use logo images found on the Red Cross brand identity web page. Be consistent with your  designs. Make them look like they were designed specifically to focus on New Jersey and Hurricane Sandy. You are communicating one message, the Red Cross is helping victims of Hurricane Sandy and needs YOU to get involved by either supporting them, donating blood or volunteering.
  5. NOTE: At least one of the six designs must include an image. At least one of the six designs must be co-branded with Montclair State.

DELIVERABLES:

Save the file as LastName_FirstName_ARCBannersv1 (change to v2 and v3).jpg .

Finished .JPG of your web banners should include the following:

  • Website banners in six sizes. See standard web banner sizes here. Create one of each size: Leaderboard, Square, Skyscraper, Rectangle, Button and Full Banner
  • A logo and phone number and/or url on all banners

Requirements
  • Project Research & Conceptual Sketches
  • Preliminary Web Banner Comps (Sketches – multiple iterations)
  • Final Web Banner JPG’s – designed in Photoshop CS6

A Word document that includes the following:

  • Your concept
  • Your rationale
  • Your overall pitch to the American Red Cross
*****NOTE: Create your Photoshop document to be 300 dpi and 10″ wide. Then resize it down to web rez, 72 dpi.  SAVE THE FULL REZ FILES!******

DOWNLOAD ALL THE RED CROSS wordmark logos here.

DOWNLOAD ALL THE RED CROSS classic logos here.

DOWNLOAD ALL THE RED CROSS button 1 logos here.

DOWNLOAD ALL THE RED CROSS button 2 logos here.

DOWNLOAD ALL THE RED CROSS button 3 logos here.

MSU Logo 1 Black/White  MSU Color Logo 2

Go to MSU’s site to download logos and branding instructions.

You can download images from Asbury Park Press Photojournalist Tom Costello here.


****NOTE: The Illustrator section of your portfolio is due on Week 10 – next week***

Read More

Week 8: Intro to Photoshop Pt. II

Week 8: Intro to Photoshop Pt. II

Homework | Week 7 PHOTOSHOP BASICS | Review

  1. On your blog, answer the following:
  • Describe two ways to combine one image or another.
  • What is created in the destination image when you cut and paste or drag and drop another image file into it?
  • What are the best formats (for prints) in which to save a file that contains text or another vector objects?
  1. Delicious:  Tag three more sites that focus on Photoshop and any of the items we learned in class today. Write a comment in Delicious about why you think each one would be a good resource for this class. *Make sure you also add the tag:  fundamentalsofadbobecs6msufall2012
  2. All in-class assignments should be posted to you blog and to Flickr. They include:
  • BRUSH TOOLS
  • ACCESSING TOOLS
  • HIDDEN TOOLS
  • COMPOSITE ASSIGNMENT (5 farm images)

Week 8 Overview

  • Intro to Photoshop pt. II

Exploring Photoshop CS6

  1. Vector Shape Tools
  2. Fills and Strokes
  3. Brush Tips
  4. Applying Type Styles
  • Photo composition
  • Adjustments

Color Correction
Paintbrush Tool

  • Experimenting with New Vector Capabilities

Append custom vector shapes
Apply a pattern
Adjust the stroke and fill

  • Making the Best Selections
The importance of a good selection
Using the Marquee tools
Creating the square selection
Creating a selection from a center point
Changing a selection into a layer
Working with the Magic Wand tool
The Lasso tool
Saving a selction
Feathering the selection
Using the Quick Selection tool
Making difficult selection with the Refine Edge feature
Using the pen tool for selections

******NOTE: ALWAYS BRING A BACK UP OF ALL YOUR FILES IN TO CLASS ON A FLASH DRIVE. ALSO, PLEASE BRING IN HEADPHONES TO EACH CLASS SO THAT YOU CAN REVIEW VIDEOS WHILE DOING IN-CLASS ASSIGNMENTS.*******


PHOTO COMPOSITION

In-class Assignment | Week 8 | COMPOSITE ASSIGNMENT V1

Experimenting with New Vector Capabilities

  1. Open file: ps0101.psd – image of a skier
  2. Save it as: ps0101_work and choose Photoshop format
  3. Select the Rectangle tool – click and drag to create a large rectangle that covers the right half of the image. (You’ll notice a Rectangle 1 vector layer has been added in the Layers panel)
  4. With the Rectangle 1 vector layer active, click Fill in the Options bar, and then click the Pattern button.
  5. Select Grey Granite as the pattern.
  6. Click and hold the Rectangle tool and select the hidden Custom Shape tool.
  7. Click the arrow in the Shape drop-down menu to see default shapes.
  8. Click the gear icon and select Nature category.
  9. Choose Append – Select the Snowflake shape – Click on the Path operations – select Subtract Front Shape.
  10. Position m ouse in the middle of the left side of the Rectangle shape and press and hold the Option key. Click and create to create a large snowflake.
  11. Click the Path Selection tool to reposition.
Continue with the following:
  1. Adding a mask to a Vector layer
  2. Using the new brush tips
Adding strokes to vector images
Cloning your new snowflake
Adding text layers from another document

In-class Assignment | Week 8 | COMPOSITE ASSIGNMENT V2

Variations on the ski project.

Use the PSD file from composite assignment v1 above and change the pattern from grey granite to the selection of your choice. Change the nature shape in the first version to a shape of your choice. Change brush tip, gradient, font, color, size of the text and anything else you want to make it look different. When you finish, save the file as follows: 2012.10.Smith_John_Composite_v2


In-class Assignment | Week 8 | MAKING THE BEST SELECTIONS

Download all project zip files below. Unzip the files and place all files in one folder on your desktop.

PS04_01  PS04_02 PS05_03 PS04_04 PS04_05 PS04_06 PS04_07 PS04_08 PS04_09


When you finish, save the file as follows: 2012.9.Smith_John_Selections


Making the Best Selections

  • Using the Marquee Tool

Open image ps0501 here. Open image ps0501_done here.

In-class Assignment #1 – Use the image above to create an overlay with text.

  1. Select the Rectangualr Marquee tool, (the square with the dashed lines). Choose View > Snap and make sure it’s checked.
  2. Position your cursor in the upper-left side of the guide in the care image, and drag a rectangular selection down toward the lower-right corner of the guide. A rectangular selection appears as ou drag, and it stays active when you release the mouse. You’ll now apply an adjustment layer to lighten just the selected area of the image. You are lightening this region so that a text overlay can be placed over that part of the image.
  3. If the Adjustments panel is not visible, choose Window > Adjustments and click on the Curves icon;the Properties panel appears. (Click on the Curves button to create a new Curves adjustment layer.)
  4. Click and drag the upper-right anchor point (shadow) straight down, keeping it flush with the right side of the curve window, until the Output text field. The rectangular selection in the image is lightened to about 20% of it’s original value.
  5. Go back to the Layers panel, click the box to the left of the text layer named poster text; the Visibility icon (the eye) appears, and the layer is now visible. The text appears over the lightened area.
  6. Save your file and name it as follows: 2012.10.1.Smith_John_Text_MarqueeTool
  7. Upload to your blog and Flickr and save your .psd file.
In-class Assignment #2 – Creating a square selection

  1. Click on the image background in layers.
  2. Select the Rectangle tool.
  3. Click and drag while holding the Shift key  to create a constrained square.
  4. Let go of the mouse and see the square. Notice the dotted lines. This means you can move the square around.
  5. Click on the Curves icon and change the opacity.
  6. Click on the Selection tool and position the cursor over the selection region. Now you’ll notice a scissors appears. This means that if you move the selection, it will cut out a portion of the photo. The pixels will be deleted.
  7. Press Command Z to undo.
  8. Reselect the square, then choose Image > Adjustments > Hue/Saturation. Click and drag the Hue sliders to cange the color of the selection region.
  9. Add text.
  10. Save your file and name it as follows: 2012.10.1.Smith_John_Text_MarqueeToolSquare
  11. Upload to your blog and Flickr and save your .psd file.
In-class Assignment #3 – Creating a selection from a center point

  1. Select the Background layer in the Layers panel, then click and hold the Rectangular Marquee too and select the hidden Elliptical Marquee tool.
  2. Draw a circle selection from the center of the image.
  3. Place your cursor in the center of the tire, and hold down the Option and Shift key.
  4. Click and drag to pull a circular selection from the center origin point.
  5. Release the mouse.
  6. If you need to nudge the circle around, use the up/down, left/right arrows.
  7. Click Select > Transform Selection. You’ll see a bounding box appear around your selection Use the bounding box’s points to adjust the size and proportion. Note: To scale proportionally, hold down the Shift key when transforming. Press the Enter key to accept changes.
  8. Follow the directions from in-class exercise #1 starting at no. 3 to add the opacity and then the text.
  9. Save your file and name it as follows: 2012.10.1.Smith_John_Text_MarqueeTool_CenterPoint
  10. Upload to your blog and Flickr and save your .psd file.

In-class Assignment #4 – Changing a selection into a layer

By moving a selection to its own independent layer, you can have more control over the selected region while leaving the original image data intact.
  1. Make sure the Background layer is selected.
  2. Select the tire with the Ellipse tool holding down Option/Shift.
  3. Press the Command and J key to create a new layer. You’ll then see the new layer in your layers panel.
  4. Apply a filter: Choose Filter > Blur > Motion Blur. You’ll see a dialog box.
  5. Type 0 in the Angle text field and 45 in the Distance text field and press OK. You’ll see the motion blur applied.
  6. Save your file and name it as follows: 2012.10.1.Smith_John_Text_MarqueeTool_ChangingLayer
  7. Upload to your blog and Flickr and save your .psd file.

Homework | Week 8 Overview
  • On your blog, answer the following technical questions:
  1. How do you create a dashed stroke in Photoshop CS 6?
  2. How do you make a vector shape into an exact size?
  3. What feature can you use to move multiple layers from one file to another?
  4. What is the difference between a Paragraph and a Character Style?

Delicious:
Tag three more sites that focus on Photoshop which refer to any of the techniques we learned in class today. Write a comment in Delicious about why you think each one would be a good resource for this class.

*Make sure you also add the tag:  fundamentalsofadbobecs6msufall2012

  • Photo Composition/Selection
If you did NOT finish the photo composition assignments in class, please finish it for homework. Title it in the following format: 2012.9.Smith_John_photocomposition *NOTE: You are replacing Smith_John with your name.
2012.9.Smith_John_selection *NOTE: You are replacing Smith_John with your name.
NOTE: You have a choice to use the SAME ski picture OR any photo of your choice and recreate a second version of the PHOTO COMPOSITION. Use a different gradient, custom shape tool, text, font color, etc. Save it as v2.
  • Nautical Alphabet

Recreate ALL letters of the nautical alphabet in Photoshop. Be sure to use ONLY the colors currently used in the image BUT do not use the same colors currently used on each image. For example, the letter A is in red and the symbol is in blue. Make the letter A blue and the symbol red. Change the colors around BUT use only the colors that are currently used for each alphabet.

Post it to your blog with the following file name: 2012.9.Smith_John_Nautical_Alphabet *NOTE: You are replacing Smith_John with your name. NOTE: Save the  PSD file to your external drive or flash drive. You will be uploading the PSD files to the class thumb drive.

***On your blog, list the exact colors and tools used to recreate the alphabet.


Read More

Week 7 – Project II DUE – Photoshop Basics

Week 7 – Project II DUE – Photoshop Basics

Week 6 Overview

  • Intro to Photoshop

Getting Started: Workspace Layout

  1. Options Bar
  2. Tool Palette
  3. Undo and History Palette
  4. Opening an Image
  • Rotating the Image
  • The Crop Tool
  • Resizing Images
  • Tones, Contrast and Color
  • Dodging and Burning
  • Sharpen
  • Adjustment Layers
  • Flattening/Saving Images
  • PSD vs JPG
  • Save and Export
******NOTE: ALWAYS BRING A BACK UP OF ALL YOUR FILES IN TO CLASS ON A FLASH DRIVE. ALSO, PLEASE BRING IN HEADPHONES TO EACH CLASS SO THAT YOU CAN REVIEW VIDEOS WHILE DOING IN-CLASS ASSIGNMENTS.*******

Intro to Photoshop

Adobe Photoshop is the industry standard tool for working with digital images. Whether the image comes from a digital camera, scans, stock imagery, Web-ready artwork, or even vector graphics, all of them can be manipulated in Photoshop. Used for both enhancing and manipulating photographs as well as creating original artwork, Photoshop is used by photographers, designers, videographer and 3d artists.

What is Adobe Photoshop video.

Adobe Photoshop CAN:

  • Rotate an image
  • The Crop  Tool: Crop or resize images
  • Modifying Color
  • Crop an image
  • Align an image
  • Correcting Exposures
  • Adjust tonal properties such as lightening a dark image
  • Restoring and Retouching Images
  • Combining multiple images into composites
  • Simulating a variety of lens effects
  • Color correction of images
  • Dust and scratch removal
  • Opening or saving in a variety of file formats
Designers use Photoshop to create:
Textures for website backgrounds
Manulapiting type
Creating comps of website and mobile applications
Videographer use Photoshop for:
Assembling image sequences into timeline animation
Removing unwanted objects from frames in their video
Repairing video using the cloning and healing tool
Creating frame by frame animations

3d Artists use Photoshop for:

Creating 3 dimensional shapes used in other applications
Creating 3d objects
Painting 3d environments
Adobe Photoshop CANNOT:

Make a blurry photograph sharper
Increase the size of a low resolution image b to a large one
Change a raster based image into a vector based image

Photoshop integrates with InDesign for print production, After Effects for video compositing and Illustrator for print design.


Getting Started – 1. Workspace Layout

2. Options Bar

Located just below the main menu on Mac computers, the options bar is contextual in nature. Depending on which tool you’re on, the options displayed will change.

Tools Palette
Many of the icons used for the tools in Photoshop are now industry standards across all types of software including Illustrator, InDesign and After Effects.

You can align your tool palette to show two rows of tools as opposed to one. It’s your choice. Notice, if  you see a small triangle in the lower right hand corner on any of the icons on a tool in the tool bar, it signifies that there is more than one tool to choose from in that button.

Just click and hold down the button and a small window will pop up offering additional tools.

Common Tools
Crop Tool: Used to cut off a portion of your photo or resize the photo.

Lasso Tool:Used to select a specific part of a photo. If you want to draw a shape on your photo, use this tool. It forms a selection marquee and any adjustments you make will only affect this portion of the photograph.

Text Tool:Allows you to add text to your image. Any text placed on your image will become part of your image once the document is saved.

Dodge and Burn Tools:Allows you to dodge light from the image, causing it to lighten. Or, force light into a particular area to darken (burn) the image. The opacity setting allows you to gradually implement these tools.

Rubber Stamp:Also known as the clone tool, the rubber stamp allows the user to manipulate the photo in some way by sampling a particular area of a photo, and stamping it in another area. To sample, press and hold the ALT key.

3. UNDO and History Palette
Command-Z (Mac) or CTRL-Z (PC) is the “undo” command that will undo the last action you took. Photoshop only allows you to undo the last step when using this shortcut. To undo more than one action, pull up the History palette.  Window –> History menu. The history palette stores every action you take in the program as a list. To undo, simply click on a previous item on the list and it will undo every action listed after it.

4. Opening an Image
To open an image, click on the File menu and select Open. You can also use the Browse option. By using Browse, Photoshop will automatically launch another Adobe Bridge, which allows you to preview thumbnails from folders.


Rotating images

If your image is crooked or not aligned to the horizon,  you may want to rotate it. Go to the image menu and select Image Rotation and select either 90 degrees Counter Clockwise (90 CCW), or 90 Clockwise (90 CW) depending on which way the photo is situated. Click 180 degrees if the photo is completely upside down.

Straightening a Crooked Image Video


The Crop Tool

Once you have the image open, click on the crop tool in your tool palette. Then click and drag open a box on your image, highlighting the area you want to crop.

Notice the anchor points, the small boxes in the corner of the image, You can click and drag on the small boxes to reshape your crop. When hovering over the boxes, your mouse cursor will change into different arrows indicating how that anchor point will shape the crop if you click on it. When you hover your mouse arrow just outside one of the corner boxes, it changes your cursor into a curve. This curve indicates that it will rotate your crop.

Resizing while Cropping

You can save a lot of time by resizing the image while you are cropping. You’re telling Photoshop which dimensions the image should result in after your crop.  Place a numerical value for inches or points in the width and height fields, you can also put in a resolution value, in the option bar while the crop tool is selected.  If you write 600px, that stands for 600 pixels. If you write 600in, that stand for 600 inches. Photoshop normally defaults to “in”, which stands for “inches”.

You don’t necessarily have to crop an image to resize it. That’s just an added plus if you were planning on cropping the image anyway. If you wish to resize your image without cropping, Photoshop offers a number of methods. Click on the image menu. The image resize option will be found under here.

Resizing Images

You can resize an image by cropping it or without cropping it, Photoshop offers a number of options. Click on the image menu, then image size. The image size dialogue box will display and present list of options. There are two sections to this dialogue, the Pixel Dimensions section at the top and the Document Size at the bottom.  In the pixel dimensions section, you type in the values of the height and width. If the Constrain Proportions checkbox is checked, then when you change either the height and width the other value will change respectively based on the ratio of their dimensions. If you don’t have this box checked, you will distort the photograph when resizing.

Using the new Crop tool in Adobe 6.0 Video


Tones, Contrast and Color

There are many ways to adjust an image in Photoshop, it’s really your preference.

Adjusting Levels

To adjust levels go to the menus Image –> Adjustments –> Levels

You’ll see a graph showing the values across the spectrum of the image called a histogram. To simplify it:, the left side of the graph is the shadows and blacks and the right side displays the highlights and whites. You note in the graph that there are few black or white tones, as the graph is rather flat on the edges. To adjust the image, move the three slider arrows at the bottom to their appropriate settings. The black slider arrow defines the black point, that is the darkest part of the photo. The white slider defines the white point, the brightest part of the photo that is white. The middle slider adjusts what are called the mid-tones. Drag the outside sliders inward until the are lined up with the edge of the histogram.

Right away the contrast picks because the image didn’t have a very solid white or black point. Next, adjust the middle slider to set the mid-tones of the image. Mid-tones adjusts the overall brightness of the image.

Adjusting Colors Using Levels

You can also adjust the colors of an image using levels. Simply select the Channel option at the top to choose one of the three primary colors. Your choice allows you to either increase or decrease that particular color from the image (sliding either the white point, black point, or mid-tones). If you subtract a particular color, it’s relative secondary color will start to emerge in the image. If ou want to add some yellow to your image, you would subtract blue. Set the channel to blue, and slide the black slider inward.

Variations

Variations is another way to adjust the levels of a photo. It’s much less precise, but sometimes its all you need. Variations presents you with a window dialogue that shows several copies of your image.

Auto Corrections Video

Correction and Adjustments in Photoshop Video

Using Adjustment Layers Video


Dodging and Burning

Dodging and burning refers to “lightening” and “darkening” portions of the photograph.  The dodge tools looks like a black lollipop while the burning tool looks like a hand forming a circle. When you select the dodge or burn tools, the option bar at the top will give you a new set of parameters to adjust the tool’s usage.

Option bar for dodge and burn tool in photoshop

Adjust these settings so that you only change the photo in small increments so that nothing stands out too quickly. Use the exposure setting to adjust the amount of dodging or burning that occurs with each pass. The range will specify the range of tones that will be affected. You want to lighten highlights and darken shadows. If your goal is to brighten shadows or darken highlights, then use the mid-tones setting. The brush size will specify the size of the tool you will be using.

Brush size in photoshopThe master diameter is the size of what Photoshop calls the “brush” size.  The hardness refers to how soft the brush’s edges are. When using dodging or burning, you want a low hardness setting to offer the softest brush. If you are trying to be more exact, you can increase the brush hardness, but increase the chance that the touch-up will be noticeable.


Sharpen

Sharpening increases the contrast of edges found in the photograph, giving the appearance of a sharper or clearer photograph.Note that using the sharpening filter cannot make an out-of-focus photo, into a sharp, or in-focus photo.


Adjustment Layers

When you open an image  background layer is your primary layer. Adding additional layers allows you add elements (contained within those layers) to your image. This allows you to add additional information to your document without affecting the other layers. Each layer is superimposed over the other and can be modified without affecting the other layers.

To add a new layer, click on the layer icon located at the bottom of the layers palette. Rename your layers by double clicking on it and typing the new layer name. Once you added a new layer, now it’s time to add information to that layer.

Here’s a quick step by step on how to add text to an image.

  1. Create a new layer
  2. Rename your new layer “Text”,  indicating that the layer will contain text.
  3. Select the text tool.
  4. Click on the image and the text box will appear.
  5. Type in your text and click OK.
  6. To position the text, select the move tool and drag your text.
  7. Your text is now on a separate layer you can manipulate it without affecting the original image.

Flattening/Saving Images 

Once you’ve finished manipulating your image, you’ll need to save them. There are two ways I recommend saving images. First, save a copy of the image that retains the individual layers. To do that, you’ll need to save it as a PSD file. Saving a copy of the image as a PSD fil, you’ll retain the individual layers which allows you to reopen the image in Photoshop and manipulate those layers at a later time. To save your image as a PSD file, go to File, Save As and make sure you save click PSD.

Note that once you flatten the image, the individual layers will no longer be available. All of the layers will be flattened into one layer. This will prevent you from manipulating any of the data. For example you will no longer be able to move the text around.

If you want to use your image on the Web, you need to flatten the image so that it consists of only one layer which consists of all the data from each of the layers. You to flatten the image first, and save a copy of your image as a .jpg, .gif or .png file. Note that once you flatten the image, you won’t be able to manipulate the individual layers. All of the layers will be flattened into one layer.

Step 1: Go to the Layer menu and select Flatten Image.

Step 2: Go to File, Save As and save the image as a JPG or whatever format you choose.


PSD vs JPG vs GIF vs PNG

PSD preserves all the layers in your file. You should ALWAYS save a copy of your image as a PSD. Once you’ve done that, then consider which file format below best fits your needs.

Image File Formats: There are three primary image file formats used for graphics viewed on the web. Each of these file types were designed for the purpose of compressing memory usage. Each file type does this a different way.

Jpeg 
Jpegs work well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple cartoons, or line drawings. JPEG is “lossy,” meaning that the decompressed image isn’t quite the same as the one you started with. (There are lossless image compression algorithms, but JPEG achieves much greater compression than is possible with lossless methods.) JPEG is designed to exploit known limitations of the human eye, notably the fact that small color changes are perceived less accurately than small changes in brightness.

Gif
Graphics Interchange Format. A format used for displaying bitmap images on World Wide Web pages, usually called a “gif” because .gif is the filename extension. These files use “lossless” compression and can have up to 256 colors.

Png-8 and Png-24
PNG is a compression scheme that has two main benefits: it is a lossless compression image format and it holds alpha channel information. Originally, the Portable Network Graphics (PNG) format was designed as a royalty-free format, which would replace GIF and JPEG. Png-24 allows for smooth blending between alpha and opaque.

Image Size
When speaking about image size on the web, there are three possible interpretations of this that you must take into account.

File Size refers to the amount of disk space an image occupies (in KB or MB)
Image Dimensions refers to the physical size of the image, expressed in height and width.
Resolution refers the pixel density of an image. This is expressed in pixels per inch (ppi). Images are displayed on the web at 72 dpi. Printed images are generally of higher resolution.

Compression

Compression shrinks down the file size of the photo so that it loads on the user’s computer quickly, but maintains a certain level of quality.

Saving

Click the Save button to save your image. ALWAYS ave your original photo for archiving, or if you intend to reopen it later PRIOR to using the save for web.


Save and Export

There are two ways of saving a photo in Photoshop. The first is to use the Save As… dialogue, the other is called Save for Web & Devices… which is used to save your photos in preparation for publication to the Web.

1) Save as: I recommend saving the file type as a Photoshop or .PSD file, which will also save extra Photoshop-specific information about your photo and allows you to go back to the file at a later date and manipulate all layers. You will not lose any quality when you re-save it multiple times. Saving as a .jpg, .png or .gif compresses the photo allowing you to use it on the web.

2) Save for Web: Use this when you are ready to export your photo for publication to the Web.  The Save for Web allows you to see how your photo will appear once it’s published to a Web site. Optimized will show you how your photo will appear once it’s published on a Web site, and 2-up/4-up will show you comparisons so you can see how the different levels of compression will affect your photo when saving. These are automated ways to save your image for the Web.


In-class Assignment I | Week 7 | ACCESSING TOOLS

Download the attached zip file which includes PSD files for this accessing tools assignment here.

  1. Select the Brush tool. By default, your brush tool is loaded with black paint.
  2. Click once on the foreground color to open the pick so you can select a different color in you foreground.Select a blue color to use to brighten up the sky.
  3. Click on the Brush Preset Picker to see your option for size and hardness.
  4. Click and drag the size slider, to the right until you reach 100px. Make sure the Hardness slider is at 0%. You’ve just changed the brush to a large soft brush that will blend well with the edges of the strokes.
  5. Click and drag anywhere on the image one time to create a brush stroke across the image. Click Command Z to undo.
  6. Click and hold the Painting Mode drop-down menu and select Color from the bottom of the list.
  7. Click the arrow to the right of the Opacity option to see the slider Change Opacity to 20%.
  8. Click and drag on the upper right corner of the image. You’ll be brightening the sky.
  9. Note: You can build up color by releasing the paint brush and painting over the same area.
  • Save image 1 with new filename.
  • Example: 2012_Smith_John_AccessingTools_v1

In-class Assignment II | Week 7 | BRUSH TOOLS

  1. With the car photo still open:
  2. Select the Brush tool.
  3. Click the Swatches tab.
  4. Click the color calle Pure Red Orange.
  5. With the Brush tool selected, start painting in the upper-left part of the image, adding orange to the sky.
  6. Paint the sky until the orange blends in.
  • Save image II with new filename.
  • Example: 2012_Smith_John_BrushTools_v1

Using the Panels

To reset panels: Window > Wordspace > Reset Essentials

Choosing Other Panels

History Panel: The History panel allows you to undo and redo steps up to 20 steps.

Click on the History panel. If you can’t find it choose Window > History

Click back on the various history states to see how your steps are undone.

Expanding and Collapsing Your Panels

To bring back your worspace to its original configuartion: Window > Workspace > Reset Essential.

Collapse groups of panels by double-clicking the dark gray bar (title bar) at the top of the panels. Double-click it to reopen.

If the History panel is no longer open, click the icon for the History panel.

Click the double-arrow in the upper-right to collapse the panel back to an icon.


Hidden Tools

Some of the tools in the Tools panel display a small triangle at the bottom-right corner; this indicates there are additional tools hidden under the tool.


In-class Assignment III | Week 7 | HIDDEN TOOLS

  1. Click and hold on the Brush tool to see the hidden Pencil, Color Replacement and Mixer brush tools.
  2. Select the Mixer Brush Tool and release. The Color Mixer tool is now the visible tool. The Mixer Brush simulates realistic painting techniques.
  3. Change the foreground color at the bottom of the Tools panel. The Color Picker appears.
  4. Position your cursor on the Color Slider and click and drag until shades of orange appear in the Color Panel.
  5. Click once in the Color Pane to select and orange color or type in the RGB: R:235 G:269 B:24.
  6. Click on the Brush Preset picker button in the Options bar and set the following attributes for the Mixer Brush tool.
  • Size: 175 px
  • Hardness: 20%
  1. Click once on the Useful mixer brush combinations drop-down menu and select the Moist, Light Mix preset.
  2. Press Command+0. (This is the keyboard shortcut for Fit on Screen.
  3. With the Mixer Brush tool still selected, start painting in the upper-left areas of the image to create a shade of orange blending in from the corner.
  4. Repeat this for all four corners in the image.
  • Save image III with new filename.
  • Example: 2012_Smith_John_HiddenTools_v1

In-class Assignment IV | Week 7 | COMPOSITE ASSIGNMENT

Download the attached zip file which includes PSD files for this composite assignment here.

  1. Watch the video below that describes how to create a composite photo and recreate the barn/chicken/cow image.
  2. Using the farm image, try adjusting the stacking order of the layers in the composite image
  3. Scale and move the layers to place the cow and rooster in different positions.
  4. Add your own images to the composition, adjusting their position and scaling.
  5. Save the images as JPEG files using the different compression options and presets to determine the impact these have on quality and file size.
You should end up with a total of FIVE different images. Upload them to your Flickr site and label them:
YYYY_MM_DD _YourName_Farm_01
YYYY_MM_DD _YourName_Farm_02
YYYY_MM_DD _YourName_Farm_03
YYYY_MM_DD _YourName_Farm_04
YYYY_MM_DD _YourName_Farm_05
Tag your images in Flickr with the following tag: FundamentalsAdobeCS6MSUFall2012
***NOTE: If you don’t finish this in class, please complete it for homework.

Homework | Week 7 PHOTOSHOP BASICS

  1. On your blog, answer the following:
  • Describe two ways to combine one image or another.
  • What is created in the destination image when you cut and paste or drag and drop another image file into it?
  • What are the best formats (for prints) in which to save a file that contains text or another vector objects?
  1. Delicious:  Tag three more sites that focus on Photoshop and any of the items we learned in class today. Write a comment in Delicious about why you think each one would be a good resource for this class. *Make sure you also add the tag:  fundamentalsofadbobecs6msufall2012
  2. If you did NOT finish the farm assignment in class, please finish it for homework.

 

Read More

Week 6 – Project II Critiques

Homework | Week 5 | Review

Be prepared to present Project II to you classmates for critiques. Everything listed below should be completed by week 6.

Requirements:

  • Project Research & Conceptual Sketches
  • Preliminary Label Comps (Sketches – multiple iterations)
  • Final Label Comps (Sketches – multiple iterations)
  • Preliminary Logo Comps (Sketches – multiple iterations)
  • Final Logo Comps (Sketches – multiple iterations)
  • Preliminary Logo and Label Comps – designed in Illustrator CS6

A Few Quick Illustrator CS6 Tips

RULERS AND GUIDES

  • Ruler Commands:

To View or Hide Rulers on your Art Board:

  • View > Show Rulers or View > Hide Rulers

GUIDE COMMANDS:

To View or Hide Rulers on your Art Board:

Click on either of the rulers and drag the ruler guide into the work area.

To Lock or Unlock Guides:

View > Guides > Lock Guides. If you see a check mark here, it means that the guide is locked.

To Move a Guide:

Make sure the guide is unlocked (no check mark). Use the Selection tool to select the guide to move and drag it to a new location.

To Delete a Guide:

  • Make sure the guide is unlocked (no check mark). Use the Selection tool to select the guide you want to delete and press Delete (Mac OS).
  • To delete all guides at once, choose View > Guides > Clear Guides.

To Show or Hide Guides

  •  View > Guides > Show Guides, or View > Guides > Hide Guides.

To Snap Objects to Guides

  •  View > Snap to Point. A check mark indicates that snapping is turned on. When an object is dragged within 2 pixels of a guide, it will then snap to that guide.
  • The pointer will change from a filled arrowhead to a hollow arrowhead when a snap occurs.

LAYER POSITIONING

The arrangement of a layer dictates which layer will overlap on top or beneath another layer. The first layer (the first object drawn) is listed at the top. Each additional layer drops below the top layer. To change the stacking order of selected objects see below.

Arrange commands:
Object > Arrange > Bring to Front: moves an object to the top position in the work area.
Object > Arrange > Send to Back: moves an object to the bottom position in the work area.
Object > Arrange > Bring Forward: moves an object one step forward in the stacking order.
Object > Arrange > Send Backward: moves an object one step backward in the stacking order.
To duplicate objects in Illustrator, simply select the object you want to duplicate, choose Edit > Copy and Edit > Paste. A duplicate of the original object will be placed in the center of the work area at the top of the stacking order.

You can also open the layers panel and drag layers to different positions.


 

Project II Critiques

Critique Goals:

  1. Obtain specific kinds of feedback.
  2. Compare how several different components of the same product are designed.
  3. Discuss the user flow through a design,. (Similar to a cognitive walkthrough).
  4. Explore the designs of competing products.
  • Explore: Color, shape, function, font, style, concept, execution

Homework | Week 6  

Write a written critique of each of your groups projects and post to your blog.

Project II Critiques

PROJECT 2 IS DUE ON WEEK 7

Read More
Page 1 of 212