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.**

25 Comments

    • Ian,

      You didn’t turn in a print out for the Photoshop banners and it’s not posted on your site.

Leave a Reply

Your email address will not be published. Required fields are marked *