Week 14 | Wednesday

Create Alternate Layouts With the Same Content Using Adobe InDesign CS6

Use your cover page design when completing this tutorial.


HOMEWORK | WEEK 12

Critiques

Create a blog posting that lists your top two and bottom two designs and write a blog posting about all four.


  • Complete the tutorial

  • Print your annual report in booklet form whe

    ***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.
    Create a folder on your DropBox called InDesign_Week 12 | Wednesday and place all your InDesign files.
    Upload finished files to your blog AND to your Flickr feed.

    • WIREFRAMES – Update you wireframes to show the changes you made after Monday’s critique.
    • INDESIGN LAYOUTS – All 12 pages, fully designed with text and images are due for class critique.

FINAL PROJECT – DUE ON WEDNESDAY OF EXAM WEEK

FINAL PROJECT: InDesign 12 Page Booklet

  • Research & inspirations (must include a minimum of FIVE annual reports or booklets for inspiration), hand drawn wireframes due on Wednesday | Week 13. 
  • Photoshop wire frames of ALL your pages AND first layout iteration due on Wednesday | Week 14.  (12.3.14)
  • Second iterations of your pages due on Friday | Week 14. (12.5.14)
  • FINAL iterations of your pages due on Wednesday | Week 15. (12.10.14)
  • Project due on 12.17.14

December 12: Last Day of Classes

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 files on your project page, in your DropBox folder 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 must include the following at a minimum:
  • Nonprofit name and logo
  • Images
  • Text
  • Graphics
No two pages should be designed in the same layout. No images or headlines should be repeated. No dummy text should be used.
Size: 8.5×11 vertical or horizontal 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.
Items to be Turned in
  1. Research/Inspiration
  2. Wireframes
  3. Thumbnails of each page layout. (All layout on ONE page)
  4. Full page layout of each page.
  5. Your written description on your project page and in your DropBox folder.
  6. All files in a folder with your name placed on your DropBox.
  7. The final project (in PDF and InDesign).
Written Document – 500 word minimum
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, sponsored by Purdue University:

Week 13 |Wednesday

FINAL TUTORIALS FOR THE SEMESTER 


#13 DO NOW -ADD TO BOOKMARKS Images II – Import Options 12

More options for importing images, including working with clipping paths and transparency for special effects.


#14 DO NOW Add Images III – The Links Panel 13

How to use the Links panel to manage, update and edit the images in your document.


#15 DO NOW Layout I – Document Setup 14

Document setup using guides and grids. Understanding Master pages and automatic page numbering.


#16 DO NOW Layout II – Paragraph Styles

Creating and using paragraph styles to ensure consistency in your type.


#17 DO NOW Layout III – Character Styles

Creating and applying character styles to individual letters and words. Using nested styles for quick formatting with multiple styles.


DO NOW: Layout IV – Object Styles

Just like paragraph and character styles, object styles can be used to format objects you use repeatedly. Plus, creating a library to store your objects.


DO NOW:Layout V – Text Cleanup 18

Using InDesign’s sophisticated Find/Change functions to quickly clean up and re-format text.


DO NOW:Layout VI – Check Spelling

Basic spell check, plus user dictionaries and multiple languages.


DO NOW:Layout VII – More Tips

Using layers, locking objects, aligning objects. Modifying a layout with the Gap tool. Drop shadow and other effects, and the corner options.


DO NOW:Preflight & Package

How to check your files for errors and package them for output.


DO NOW:Print & Export

Basic printing options and PDF export.



FINAL PROJECT – DUE ON MONDAY OF EXAM WEEK

FINAL PROJECT: InDesign 12 Page Booklet

  • Research & inspirations (must include a minimum of FIVE annual reports or booklets for inspiration), hand drawn wireframes due on Wednesday | Week 13. 
  • Photoshop wire frames of ALL your pages AND first layout iteration due on Monday | Week 14.  (12.2.13)
  • Second iterations of your pages due on Wednesday | Week 14. (12.4.13)
  • FINAL iterations of your pages due on Monday | Week 15. (12.9.13)
  • Project due on 12.16.13

December 11: NO CLASS – Wednesday designated as Friday

December 12: Last Day of Classes

December 16: FINAL PROJECT DUE | FINAL PORTFOLIO DUE


HOMEWORK | WEEK 12

***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.
Create a folder on your DropBox called InDesign_Week 12 | Wednesday and place all your InDesign files.
Upload finished files to your blog AND to your Flickr feed.


DO NOW

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



FINAL PROJECT – DUE ON WEDNESDAY OF EXAM WEEK

FINAL PROJECT: InDesign 12 Page Booklet

  • Research & inspirations (must include a minimum of FIVE annual reports or booklets for inspiration), hand drawn wireframes due on Wednesday | Week 13. 
  • Photoshop wire frames of ALL your pages AND first layout iteration due on Wednesday | Week 14.  (12.3.14)
  • Second iterations of your pages due on Friday | Week 14. (12.5.14)
  • FINAL iterations of your pages due on Wednesday | Week 15. (12.10.14)
  • Project due on 12.17.14

December 12: Last Day of Classes

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 files on your project page, in your DropBox folder 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 must include the following at a minimum:
  • Nonprofit name and logo
  • Images
  • Text
  • Graphics
No two pages should be designed in the same layout. No images or headlines should be repeated. No dummy text should be used.
Size: 8.5×11 vertical or horizontal 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.
Items to be Turned in
  1. Research/Inspiration
  2. Wireframes
  3. Thumbnails of each page layout. (All layout on ONE page)
  4. Full page layout of each page.
  5. Your written description on your project page and in your DropBox folder.
  6. All files in a folder with your name placed on your DropBox.
  7. The final project (in PDF and InDesign).
Written Document – 500 word minimum
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, sponsored by Purdue University:

Week 12 | Friday

#6 DO NOW –Text I – Placing

The different ways to get text into your document, plus options for text frames.


#7 DO NOW –Text II – Threading

How to flow text through multiple pages and text frames, and how to put text on a path.


#8 DO NOW – Text III – Navigation Shortcuts + Story Editor

NOTE: NOTHING TO DO, JUST WATCH

In this video we’ll go over keyboard shortcuts for navigating through and selecting text. We’ll also take a look at the advantage of editing stories in the Story Editor.


#9 DO NOW TYPE

Type I – Character Formatting


 

DO NOW #10 Type II – Paragraph Formatting


DO NOW #11 Type III – Tabs

In-Design Resources

#12 DO NOW – Images I

– Placing and Fitting  11

How to get images into your document, and how to fit them into your layout.

Resources


HOMEWORK | WEEK 12

***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.
Create a folder on your DropBox called InDesign_Week 12 | Wednesday and place all your InDesign files.
Upload finished files to your blog AND to your Flickr feed.


DO NOW
Follow the videos you saw in class, #6-#11 and complete the exercises. Post to you blog and to Flickr. Due Wednesday | Week 13

DELICIOUS
Tag FIVE sites that relate to today’s tutorials. Due Wednesday | Week 13


FINAL PROJECT – DUE ON WEDNESDAY OF EXAM WEEK | 12/17

FINAL PROJECT: InDesign 12 Page Booklet | DEADLINES

  • Inspirations (must include a minimum of TEN annual reports or booklets for inspiration – Pinterest board) due | Wednesday | Week 14. (11.26.14)
  • Research (Delicious -10 tags) | due on Wednesday | Week 14. (11.26.14)
  • Hand drawn wireframes due on Wednesday | Week 14. (12.3.14)
  • Photoshop wire frames of ALL your pages due on Friday | Week 14.  (12.5.14)
  • First COMPLETE layout in InDesign due on Wednesday | Week 14.  (12.5.14)
  • Second COMPLETE layout in InDesign due on Friday | Week 14.  (12.7.14)
  • December 12: NO CLASS – Wednesday designated as a Friday – Wednesday | Week 15
  • Project due on 12.17.14

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

  • The project will incorporate InDesign, Photoshop and/or Illustrator.
  • Project must be submitted with following items: Research, Inspiration, Conceptual Sketches (hand-drawn & Photoshop), 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 files on your project page, and in your DropBox folder.
  •  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 must include the following at a minimum:
    • Nonprofit name and logo
    • Images
    • Text
    • Graphics
    No two pages should be designed in the same layout. No images or headlines should be repeated. No dummy text should be used.
    Size: 8.5×11 vertical or horizontal 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 or other non-profit. 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 files.
    Items to be Turned in
    1. Research/Inspiration
    2. Wireframes
    3. Thumbnails of each page layout. (All layout on ONE page)
    4. Full page layout of each page.
    5. Your written description on your project page and in your DropBox folder.
    6. All files in a folder with your name placed on your DropBox.
    7. The final project (in PDF and InDesign).
    Written Document – 600 word minimum
    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, sponsored by Purdue University:

Week 12 | Wednesday

In InDesign You Will:

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.


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

Navigation

SHORT CUTS FOR GETTING AROUND YOUR DOCUMENT

  • Click on PAGES menu – double click on the page you want to go to.
  • To select the HAND TOOL – Hold down the OPTION + SPACE BAR. Use the hand tool to move around a page.
  • To fit the page in the window and center it – press COMMAND + 0 – To center a spread in the window – use COMMAND + OPTION +0

Changing the Magnification of your Document

RESOURCES AND SHORTCUTS

  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.

#1 DO NOW: Placing and Formatting Text 
Adding Type and Wrapping Text

 Download project files here:

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.
  1. InDesign 01 Project
  2. InDesign 01 Links

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.

WATCH THE VIDEO > COMPLETE THE VIDEO TUTORIAL > SAVE THE FILE AS lastname_firstname_date_type 

SHORT CUTS FOR ADDING PARAGRAPH STYLES

  • Window Menu > Styles > Paragraph Styles
  • See a small PLUS SIGN at the end of a column – this means there’s more text than the frame can fit. Click on SELECTION TOOL – click on PLUS SIGN – hover over text frame in second frame. Text is linked from one frame to the next.
  • Use TYPE TOOL – click on text – COMMAND A to select all text.

#2 DO NOW: 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
 
COMPLETE THE TUTORIAL AND SAVE THE FILE AS lastname_firstname_date_masterpage

#3 DO NOW: 10-Minute Layout
Using text and images that you find on the web, watch the video below and create a document following their directions.


#4 DO NOW: InDesign – Working with Text and Type (3)
  • WORKING WITH TABS – DOWNLOAD THE PROJECT FILES, FOLLOW ALONG IN THE VIDEO AND COMPLETE THE STEPS WRITTEN BELOW

  • Creating a Text Frame

#5 DO NOW : Adding Text to you Document

  • FILE > OPEN > ID0301.INDD – Start working on the first page of this document.

* If necessary, use the Pages panel to navigate to the first page.

  • Choose the TYPE TOOL and position the cursor on the left edge of the page so it is at the margin guide, approximately 1/2″ above the list of stories. Use your mouse to click and drag diagonally down and to the right to create a new text frame. Release the mouse when it is positioned just above the existing text frames that contains the list of stories. The new frame should be place above the existing frame and the left and right edges should be similarly positioned to the corresponding edges of the frame.
  • Type “Inside this issue:” into the text frame.
  • Choose File > Save As > Save it as id0301_work.indd (export as a .jpg as well)

TIP: Creating Multiple Frames

When drawing a text frame pressing the right arrow key one time will divide the text frame being created into two linked text frames. Pressing the arrow key a second time will create a third linked frames, which you can continue until you have the desired number of frames.

TIP: TAB CHARACTER  (tab key – symbol is a double chevron) When setting tabs inside a document, NEVER  put more than one tab in a row. Tabs are paragraph specific. One tab character per one tab stop.


#6 DO NOW –Text I – Placing

The different ways to get text into your document, plus options for text frames.


#7 DO NOW –Text II – Threading

How to flow text through multiple pages and text frames, and how to put text on a path.


#8 DO NOW – Text III – Navigation Shortcuts + Story Editor

NOTE: NOTHING TO DO, JUST WATCH

In this video we’ll go over keyboard shortcuts for navigating through and selecting text. We’ll also take a look at the advantage of editing stories in the Story Editor.


#9 DO NOW TYPE

Type I – Character Formatting


 

DO NOW #10 Type II – Paragraph Formatting


DO NOW #11 Type III – Tabs

In-Design Resources

HOMEWORK | WEEK 11

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?
  7. (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?

Complete in-class Do Now’s

#1-5 DUE ON FRIDAY | #6-11 DUE ON WEDNESDAY

***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 website and to Flickr.

DELICIOUS

Add SIX Links in Delicious – ONE link related to each of the topics below:

  • Placing and Formatting Text
  • Building Documents with Master Pages
  • Adding Text to you Document
  • Working with Text and Type
  • Placing
  • Threading

MAKE SURE TO ADD COMMENTS IN THE COMMENT SECTION AS TO WHY THE LINK IS RELEVANT OR USEFUL

Week 11 | Wednesday

Photoshop Project II – Due  – Week 12 WEDNESDAY

  • Print out of all three pages for critique’s
  • Research
  • Inspiration
  • Site outline
  • Site map
  • Hand drawn wireframes for the three pages you designed.
  • Photoshop designed wireframes for the three pages you designed.
  • The COMPLETED revised homepage template with new color scheme, fonts, your images.
  • Two additional pages designed in Photoshop
  • Print out of all three pages for critique’s
  • Project page completed
  • Three pages print
  • 600 word document description
  • Drop Box link

Photoshop Project II – Project Due  – Week 12 WEDNESDAY


HOMEWORK

PINTEREST

  • Pin 10 links that have functional, beautiful, footers.
  • Pin 10 links that have functional, beautiful, social media icons.

CRITIQUES

  • Critique each of your classmates and post it on your homework page. You MUST also read each of your classmates critiques AND respond with a two to three sentence blog post in response to each comment.

LAYOUTS

  • Final Photoshop version of each of your three pages due for critiques on Friday.

 

 

Week 10 | Friday

Photoshop Project II – Following Items Due  – Week 11 Wednesday

  • Print out of all three pages for critique’s
  • Research
  • Inspiration
  • Site outline
  • Site map
  • Hand drawn wireframes for the three pages you designed.
  • Photoshop designed wireframes for the three pages you designed.
  • The COMPLETED revised homepage template with new color scheme, fonts, your images.
  • Two additional pages designed in Photoshop
  • Print out of all three pages for critique’s

Photoshop Project II – Project Due  – Week 11 Friday

Project page completed
Three pages print
600 word document description
Drop Box link

Week 10 | Wednesday

Photoshop Project II – Following Items Due  – Week 10 Friday
  •  Complete one of the three style frame home page tutorials from Photoshop Project II.
  • Research
  • Inspiration
  • Site outline
  • Site map
  • Hand drawn and Photoshop designed wire frames for the NEW homepage and two additional pages your will be designing.

Photoshop Project II – Following Items Due  – Week 11 Wednesday

  • The COMPLETED style frames for the NEW homepage  and TWO additional pages with new layouts, color scheme, fonts, and images.
  • Updated wire frames iterations in Photoshop for all three pages you designing – both hand drawn and created in Photoshop
  • Updated site map and site outline
  • Research and Inspiration
  • Print out of all three pages for critique’s
  • DropBox link with all files, including PSD’s for all you work on this project.
  • Updated wire frames iterations in Photoshop for all three pages.
  • Research
  • Inspiration
  • Site outline
  • Site map
  • Hand drawn wireframes for the three pages you designed.
  • Photoshop designed wireframes for the three pages you designed.
  • The COMPLETED revised homepage template with new color scheme, fonts, your images.
  • Two additional pages designed in Photoshop
  • Print out of all three pages for critique’s

 All project files including Word document and DropBox link.

Style frame tutorials

COMPLETE one of the homepage tutorials on the Project II page.

Photoshop Project II – Following Items Due  – Week 11 Friday

  • First iterations of the style frames for the NEW homepage with new color scheme, fonts, your images and any layout changes to the homepage design.
Updated wire frames iterations in Photoshop for both of the additional pages you will be designing.
Photoshop Project II – Following Items Due  – Week 10 Friday
Research
Inspiration
Site outline
Site map
Hand drawn wireframes for the three pages you designed.
Photoshop Project II – Following Items Due  – Week 11 Wednesday
Photoshop designed wireframes for the three pages you designed.
The COMPLETED revised homepage template with new color scheme, fonts, your images.
Two additional pages designed in Photoshop
Print out of all three pages for critique’s

 

Photoshop Project II – Following Items Due  – Week 12 Friday

All project files including Word document and DropBox link..

Week 9 | Friday


The Elements of Design

 

DO NOW

Buttons, Bars & Tabs
Techniques for creating navigation elements.

Watch video and complete button tutorial. View it here.


DO NOW

Watch video and complete tutorial.


Ribbons and Banners

DO NOW

Tiled Backgrounds and Seamless Textures

Watch video and complete tutorial.


DO NOW

Shadows

Watch video and complete icon tutorial.


Week 11 | Homework


Delicious

On your del.icio.us account tag three Web Sites that focus on Photoshop

  • Photoshop Buttons, Bars, and Tabs in Web Design
  • Creating Photoshop shadows  
  •  Tiled Backgrounds and Seamless Textures

 

 All project files including Word document and DropBox link.


Delicious

On your del.icio.us account tag three Web Sites that focus on Photoshop CS 6.

  • Designing for the web
  • Mobile design using Photoshop CS 6
  • UI or US design

 

Week 9 | Wednesday

A STORY OF MIXED EMOTICONS


Information Architecture

The role of an Information Architect in Web development is to develop the structure, labeling, and navigation schemes of the site. This phase is alternately known as Interaction Design and Experience Design and Information Design.

The Site Outline is the first step in this process. Now we are going to visualize our Information Architecture in the form of a Functionality Specification or Functional Spec.

With the Functional Spec you create a blueprint for your site much the way an architect does for a building. The purpose of this spec is to synthesize needs identified in the requirements document into a concrete plan for development. It includes a visual map of the overall hierarchy and flow of your site, and detail views for each interface or page. At this point in the process, we are not concerned with the graphical interface of images, colors, and fonts that will go into your site, but the outlining basic structure and functionality.

site outline

WEB DEVELOPMENT PROCESS

Site Map

A site map is a  flow diagram of the pages contained in your website. This is the essential information architecture needed to build your website.

 

CREATING A FUNCTIONAL SPEC

For our purposes, the Functional Spec will consist of a Site Map (or Site Flow) and a set of Wireframes.

The Site Map is a visual representation of all the pages of the site and how the user navigates through them.

Wireframe is a diagram that represents the layout, content, and functionality of each page.

Wire frame: Where Content Elements Appear Within the Page

Wireframes are rough illustrations of page content and structure, which may also indicate how users will interact with the website. The first step is to great these diagram to establish page layout and then you will move to the visual design. Wireframes are useful for communicating early design ideas showing exactly what information, links, content, promotional space, and navigation will be on every page of the site. Wireframes may illustrate design priorities in cases where various types of information appear to be competing.

Since a site map does not indicate any hot links that may appear within a page, your wire frame will help you to determine how a user will navigate through your site beyond the main navigation. The purpose of a wire frame is to determine where each content piece will be displayed on the page, and which pieces will be displayed most prominently.

You do not need to worry about how each piece will look. The wire frame example below uses a tabbed navigation approach, however this visual is merely a placeholder and the designer may take a totally different aesthetic approach once the design phase begins.

Wireframe and Design Elements Planning
  • Sketch out the basic navigation structure for your site
  • Identify the number of pages

Hand-drawn Wireframe

wireframe-sketch-01

Grid Design of a Wireframe

wireframe-sketch-13

#1. DO NOW – Create a HAND DRAWN WIRE FRAME for the Charity Water page. Then, using Photoshop, create the grid layout for the Charity Water homepage.


INTERFACE DESIGN PRINCIPLES

Ok, we’ve gone through the Discovery phase, and determined what we want our site to be, who it is for, and what it is going to contain. We’ve mapped this all out in our functional spec. Now its time to bring to life with the next step in the Design Phase, known variously as Interface, Visual, and Graphic Design.

PAGE SIZE

Unlike a printed page, you can not predict or truly control the amount of pixels you users will see. Here’s a few quick stats to check out:

2014 Monitor resolution:

MOST POPULAR USED screen resolution: 1366 x 768  


CREATING A DESIGN MOCKUP

Creating a template

  1. For every distinct interface that you have defined for a site, you will need to make a mockup for it. If your page layout doesn’t vary much from page to page, you may be able to use a single document and sets of layers to contain all the permutations.
  2. Create a new document in Photoshop or Illustrator. Go to File > New
  3. Set the following document settings:
    • Size: 5000 h ×1280 w for Charity Water (depending on what size you decide to build for)
    • Resolution: 72 pixels/inch
    • Mode: RGB
    • Contents: Transparent
  4. Open your layers palette: Window > Layers.
  5. Create and name separate layers for each part of your design grid. Typical sections that your site may have are:
    • Body (background color or pattern)
    • Branding / Header (Logo and Site Title)
    • Sidebar
    • Global Navigation
    • Content
    • Section Heading
    • Copy (sub-headings, paragraphs, lists, bullets and inline links)
    • Footer (copyright and email link)
  6. Turn on your Rulers: Window > Show Rulers
  7. Use guides to define the sections of your design grid. Click on the Move Tool in the Tool palette and drag a horizontal and vertical guide from each ruler.
  8. Use the Photoshop or Illustrator tools to create your mockup. The mockup should show the client how the final interface will look. Specify logo, color scheme, fonts and positioning.
  9. Once you have finalized the your mockup you are ready to slice and optimize your images.
  • Use the images, colors, fonts, and icons from the Charity Water homepage to complete this. You can take screen shots of each section of the homepage, create a new layer in photoshop for each section, and create one psd.

#2 DO NOW – Create a STYLE FRAME for the Charity Water page.

 REVIEW
Wireframe and Design Elements Planning
  • Sketch out the basic navigation structure for your site
  • Identify the number of pages
Mock-ups based on requirements analysis
  • Keep your design elements organized
Styleframes
  • Using the wireframes you created as a base, add style elements to your pages.
  • Include the following:
  1. Colors: find the hexadecimal # for your colors
  2. Add images to the layout
  3. Add icons and/or illustrations to the layout

CREATING A DESIGN MOCKUP RESOURCE

Here’s an example of a multi-page design comp:

Multi-page design comp

Here’s what the actual site looks like when fully design an coded.

Good resource: 10 Tips for Creating Website Mockups


#3. DO NOW – Complete the video tutorial below.

  • Create a folder on your DropBox titled: “Designing a Website”.
  • Include the PSD.
  • Upload the JPG to Flickr and to your website.

Designing a Website


Week 9 | Homework

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.
  • Designing for the web
  • Mobile design using Photoshop CS 6
  • UI or US design
Complete the THREE Do Now Tutorials listed:
#1. DO NOW
  • – Create a HAND DRAWN WIRE FRAME for the Charity Water homepage.

Save the PSD to the Charity Water Style Frame folder on your DropBox. Upload the JPG’s to Flickr and your website Week 9 Wednesday Homework post.

#2. DO NOW
  • – Create a GRID WIRE FRAME IN PHOTOSHOP for the Charity Water homepage.
  • – Using Photoshop, create the grid layout for the Charity Water homepage.

Save the PSD to the Charity Water Style Frame folder on your DropBox. Upload the JPG’s to Flickr and your website Week 9 Wednesday Homework post.

#3. DO NOW – Create a STYLE FRAME for the Charity Water homepage.
  • Save the PSD to the Charity Water Style Frame folder on your DropBox. Upload the JPG’s to Flickr and your website Week 9 Wednesday Homework post.
  • #4. DO NOW – Complete the video tutorial below.

    • Create a folder on your DropBox titled: “Designing a Website”.
    • Include the PSD.
    • Upload the JPG to Flickr and to your website.

    Designing a Website

    #4.  – Complete thePS CS6  Animated Button tutorial. DUE week 9 FRIDAY
    • Create a folder on your DropBox with each PSD and JPG. Upload the JPG’s to Flickr and to your homework page. 

    PS CS6  Animated Button TUTORIAL | DUE FRIDAY

      • Complete the tutorial – ANIMATED BUTTON IN PHOTOSHOP CS6
      • Create a folder in DropBox called: PS CS6  AnimatedButton
      • Title your image: date_yourname_PS_CS6_AnimatedButtonv1
      • Inside that folder place your PSD file AND GIF file of the tutorial.
      • Leave a comment on week 9 with a link to your DropBox folder.
      • Upload your animated GIF to IMGUR and provide me with the link.
      • Leave a comment with a link to your DropBox folder AND Imgur animated GIF.
      • After uploading the animated GIF to Imgur, copy the HTML, go to your homework post, click on the text view and paste the HTML.

    NOTE: YOU CAN ADD THE CHROME WEB DEVELOPER EXTENSIONTO GOOGLE CHROME TO ALLOW YOU TO CHECK COLOR, SIZE, AND DOWNLOAD IMAGES.

Week 8 | Friday

Animated Button Timeline in Photoshop CS6 | DUE WEEK 9 | FRIDAY

*****THE VIDEO TUTORIAL IS MUCH EASIER TO WATCH AND CREATE THAN THE WRITTEN INSTRUCTIONS**

PS CS6  Animated Button TUTORIAL

  • Complete the tutorial – ANIMATED BUTTON IN PHOTOSHOP CS6 listed above
  • Create a folder in DropBox called: PS CS6  AnimatedButton
  • Title your image: date_yourname_PS_CS6_AnimatedButtonv1
  • Inside that folder place your PSD file AND GIF file of the tutorial.
  • Leave a comment on week 8 Friday with a link to your DropBox folder.
  • Upload your animated GIF to IMGUR and provide me with the link.
  • Leave a comment with a link to your DropBox folder AND Imgur animated GIF.
  • Go to Imgur, copy the HTML code, go back to your homework post, click on the TEXT view (not visual), and  paste the HTML code for your animated GIF.

 

Glow Animated Button in Photoshop CS6

VIDEO

ANIMATION TIPS! 

To set the duration of the animation, at the far right corner of the Timeline, you’ll find the Work Area end point, which you can drag to the last keyframe that you created.

TimelineEndPoint Animated Button in Photoshop CS6

And finally, if you want your animation to loop, rather than just play once, under the Timeline menu at the top right, you can choose to loop the playback.

TimelineLoop Animated Button in Photoshop CS6

Once your animation is complete, you can either render it out as a video with the Render option at the bottom of your Timeline, or you can save it as a Gif for use on the web. Under the File menu, you’ll find the Save for Web option. Once you select Gif, at the bottom, you can choose wether it plays back once, or forever. Don’t worry if the preview looks choppy. Once it’s saved, you’ll have a nice, smooth animation.

SaveForWeb Animated Button in Photoshop CS6

 

HOMEWORK

PS CS6  Animated Button TUTORIAL | DUE WEEK 9 | FRIDAY

    • Complete the tutorial – ANIMATED BUTTON IN PHOTOSHOP CS6 listed above
    • Create a folder in DropBox called: PS CS6  AnimatedButton
    • Title your image: date_yourname_PS_CS6_AnimatedButtonv1
    • Inside that folder place your PSD file AND GIF file of the tutorial.
    • Leave a comment on week 8 Friday with a link to your DropBox folder.
    • Upload your animated GIF to IMGUR and provide me with the link.
    • Leave a comment with a link to your DropBox folder AND Imgur animated GIF.
    • After uploading the animated GIF to Imgur, copy the HTML, go to your WordPress homework post, click on the text view and paste the HTML.

DUE WEEK 9 | WEDNESDAY

WORD AS IMAGE PROJECT II DUE ON WEDNESDAY 10/29 AT THE BEGINNING OF CLASS

All listed below should be uploaded to both Flickr, Imgur for your animate GIF and your project page.

    • Dictionary Word Definition for Each Word
    • Thesaurus for Each of Your Three Words
    • Research – with comments for each piece of research
    • Inspiration – with comments for each inspiration
    • Mind Map
    • Three Sketches of Each Word
    • Color Sketches of Each Word
    • Photoshop Iterations
    • Final Photoshop PSD Files
    • Final Photoshop JPG Files
    • Word document description – 600 words
      • This must be on your website as well as printed on paper
    • All three words animated
    • Sound added to all three words
    • A DropBox link to ALL files and project paper

    All of the above should be uploaded to both Flickr, Imgur and your project page. Final Three Words Animated

Resource on adding sound in Photoshop

In the Photoshop animation timeline, the last line in the timeline is called AUDIO.

  • To add audio, click on the music  note button.
  • Add file.
  • Select file.
  • You can fade the audio in and out.

SAVE YOUR ANIMATED GIF WITH SOUND

  • File > Export
  • Render Video
  • Use all the default options
  • Save it to your desktop
  • Create a YouTube account
  • Upload the MP4 video file
  • In YouTube, click on share, click on embed, choose the size you want, click copy
  • Go to  your project page, click on TEXT view for your posts (not the visual view), paste the code and hit save. The video file will appear on your post.

Week 8 | Wednesday

 Project II Large Group Critiques

Write critiques for each of your classmates and post them to your homework page.


TUTORIAL #1

Photoshop | Selection Methods

The many selection methods in Photoshop, from the Marquee tools, Lasso tools, Magic Wand and Quick Selection.

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


TUTORIAL #2

Photoshop Essentials | The Pen Tool

The feared Pen tool! Let me show you how easy the Pen tool is to use. Once you get the hang of it, you’ll be using it for everything.

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


TUTORIAL #3

Photoshop | Healing Tools
Looking to heal your photos? Here are a few tools that will help, from cloning, to healing, to patching.

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


Banner Design for the Web

Advertising is everywhere, and with Google ad words, Facebook ads, and sponsored Twitter tweets, advertising on the Web is the future. Many site generate 100% of their revenues directly from banner ads.

Examples

CSS Remix
The ads on CSS Remix are displayed along the top of the site and blend in well with the site listings.

Design Bombs
Design Bombs displays their 125px ads on the left-hand sidebar. The ads fit in with the other gallery listings on the site.

Behance Network
The  Behance Network website design has small sponsor boxes down the right-hand column that display ads next to their content.

  • Know what you want to say.
  • Create a call to action, something to make the viewer want to click on your ad for more information.
  • Design for horizontal or vertical .

Here are some useful design tips:

  1. When you design your ad, keep it simple and clear, free of clutter with a message that’s easy to read. It must jump out from the rest of the message.
  2. Use animation, but sparingly. You don’t want to irritate the viewer.
  3. The animation should not interfere with the design or message.
  4. The animation should loop no more than ten times.
  5. Keep file sizes small. It’s important that your animations load quickly. While Flash creates great animations, it can also create large files. For this reason it’s better to use compressed JPEGs or GIF files.
  6. When designing a banner, it’s important to understand the importance of branding, so make sure you use the company logo in some way.
  7. Make sure your message and call to action is on the first page in case the user decides to stop the animation.
  8. Use bright blue, green and yellow colors. Avoid red.
  9. Some words that can improve your click through ratio (CTR) are: Click here, submit and free.
  10. Make sure the banner links to the page that has the information mentioned on the banner. Don’t make them hunt for it.

DESIGN RESOURCES
Standard Web Banners
Banner Ads: Excellent Examples for Inspiration


Designing a simple website banner with a logo TUTORIAL

banner_1

  • Complete the tutorial – listed below
  • Title your image: date_yourname_PS_WebsiteBanner
  • Create a folder in your DropBox titled: Website Banners
  • Inside that folder place your PSD file AND jpg file of the tutorial.
  • Post it to Flickr and to your website.

Follow the below steps to create the above website banner :

Step 1 : Creating the banner size
Open a new file by clicking on File>Open. Make the file size width of 780px and height of 120px. You can go till 140px for the height. You can make a banner flexible according to your design.

Step 2: Giving the background color
Create a new layer. Name it bgcolor. Give a background color by doing the following:

  • Change the foreground color to #E4D1B8.
  • Click on the  Paint Bucket Tool seen in the tools panel on the right.
  • Click on the canvas with your mouse. Your background color is now changed to the new color.

Step 3 : Giving the inside background color
Create a new layer. Name it insidecolor. Select  Rectangular Marquee Tool seen in the tools panel on the right. Make the rectangle size width of 760px and height of 100px inside the background. Fill it with color # C64866 using the paint bucket tool.

Step 4 : Creating the logo background
Create a new layer. Name it logobkg. Select Rectangular Marquee Tool. Make the rectangle size width of 120px and height of 100px. Put the rectangle in the left side of the banner. Fill it with black color # 000000.

Step 5 : Creating a logo using the custom shape tool
Create a new layer. Name it logo. Choose the  custom shape tool seen in the tools panel on the right. Click on the Shape drop down menu seen on the top toolbar. Click on the arrow and select Ornaments. Look for the ornament which is in the banner.

Drag it in the logo space and position it so it comes in the middle of the logo background. Now you have a temporary ornament as a logo which can be replaced with your company logo if needed.

Step 6 : Creating the vertical lines in the banner
Create a new layer. Name it band. Select Rectangular Marquee Tool. Make the rectangle size width of 7px and height of 120px. Put the rectangle in the middle of the banner. Fill it with color # E8B0BD. Make four copies of the layer band.

Step 7 : To make a copy, right click on the layer and click on duplicate. A screen named Duplicate Layer will appear.

Enter name of the layer as band copy. Click on OK. Do the same with band copy2, band copy3, band copy4. Place the bands properly in the banner.

Step 8 : Creating the Logo Border
Create a new layer. Name it border. Select Rectangular Marquee Tool. Make the rectangle size width of 20px and height of 100px. Fill it with color # A63D56. Put the rectangle on the right of the logo background. Make a copy and place the new rectangle on the left of the logo background.

Step 9 : Creating the dashed lines
Now select the  Horizontal Type Tool (text tool). Type” _________” using the hyphen key. Place it on the top of the banner. Make a copy, right click on the layer and click on duplicate. Place it at the bottom of the banner.

Step 10 : Adding your Company Name
With the text tool  type your company name or website name with the color # FCF3E5.


How to Create an Animated Banner Ad

  • Complete the tutorial – listed above
  • Title your image: date_yourname_PS_AnimatedWebsiteBanner
  • Create a folder in your DropBox titled: Website Banners
  • Inside that folder place your PSD file AND GIF file of the tutorial.
  • Post it to Imgur and to your website.

Homework | Week 8 | Wednesday  

FINISH THE IN-CLASS TUTORIALS

  • Simple website banner with a logo
  • Animated banner ad

BANNER ADS

Create a banner ad campaign for any existing New Jersey nonprofit of your choice using five different banner ad dimensions from the standard web sizes. You will be required to animate TWO of the five ads.

A few New Jersey nonprofit suggestions:

  1. Covenant House New Jersey
  2. Eva’s Village
  3. Community Food Bank of New Jersey 
  4. Little Kids Rock
  5. Also check out Charity Navigator which ranks charity. Sort the search by rankings. Four stars is the top ranking, reputable nonprofits.
  • List the name, mission and URL of your chosen NJ nonprofit
  • Research – with comments for each piece of research
  • Inspiration – with comments for each inspiration
  • Mind Map
  • Sketches of Each of the Five Sizes
  • Color Sketches of Each of the Five Sizes
  • Photoshop Iterations
  • Final Photoshop Files

DELICIOUS

On your del.icio.us account tag three Web Sites that focus on Photoshop CS 6:

  • Designing Banner Ads in Photoshop
  • Animated Banner Ads
  • Animating Timeline

and write a note in the Delicious comments section about why you think each one would be a good resource for this class.

WORD AS IMAGE PROJECT II DUE ON WEDNESDAY 10/29 AT THE BEGINNING OF CLASS

All listed below should be uploaded to both Flickr, Imgur for your animate GIF and your project page.

    • Dictionary Word Definition for Each Word
    • Thesaurus for Each of Your Three Words
    • Research – with comments for each piece of research
    • Inspiration – with comments for each inspiration
    • Mind Map
    • Three Sketches of Each Word
    • Color Sketches of Each Word
    • Photoshop Iterations
    • Final Photoshop PSD Files
    • Final Photoshop JPG Files
    • Word document description – 600 words
      • This must be on your website as well as printed on paper
    • All three words animated
    • Sound added to all three words
    • A DropBox link to ALL files and project paper

    All of the above should be uploaded to both Flickr, Imgur and your project page. Final Three Words Animated

Resource on adding sound in Photoshop

In the Photoshop animation timeline, the last line in the timeline is called AUDIO.

  • To add audio, click on the music  note button.
  • Add file.
  • Select file.
  • You can fade the audio in and out.

SAVE YOUR ANIMATED GIF WITH SOUND

  • File > Export
  • Render Video
  • Use all the default options
  • Save it to your desktop
  • Create a YouTube account
  • Upload the MP4 video file
  • In YouTube, click on share, click on embed, choose the size you want, click copy
  • Go to  your project page, click on TEXT view for your posts (not the visual view), paste the code and hit save. The video file will appear on your post.

Week 7 | Friday

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

When Saving Images: Save as: 

  • Example: 2014_Smith_John_AccessingTools_v1
  • Tag your images in Flickr with the following tag:

     adobecreativesuitemsu2014


The Tools of Photoshop

Let’s take a look at three of the most crucial tools in Photoshop: the Move, Crop and Zoom tools. You’ll find yourself using these tools more often than you think!


An introduction to the Brush tool, and its available customization options. Whether you’re looking to paint a masterpiece or retouch a photo, the Brush tool is a crucial tool to understand!

In-class Assignment #1 –  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.


In-class Assignment #2 – 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.


In-class Assignment #3 – 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:
guitar
Here’s the AFTER picture:
ps0602_done

In-class Assignment #4 – Applying Color to an Image
You can color anything in Photoshop by using different opacity levels and blending modes. Let’s take a grayscale 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.

 In-class Assignment #5 – Changing Blending Modes

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 many selection methods in Photoshop, from the Marquee tools, Lasso tools, Magic Wand and Quick Selection.


Once you get the hang of it, you’ll be using it for everything.


Here are a few tools that will help heal your photos, from cloning, to healing, to patching.


Create your own custom vector shapes in Photoshop.


Learn how the burn, dodge and sponge tools can help you further tweak the tones of your images.



In-class Assignment #6 – 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 position it over the boy’s face in the color image. 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.


Open image ps0605 here. This is what the finished image will look like. Download this background image.


In-class Assignment #7 – 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: 2014.10.17.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 #8 – 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: 2014.10.17.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 #9 – 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:  2013.10.23.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 #10– 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: 2014.10.17.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 2014.10.17.Smith_John_RetouchingFinal


Homework | Week 7 | Friday
  • Complete all assignments listed in this class post.
  • Delicious:

Tag three 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.

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

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 tutorials. Document size: 800px wide x 600px deep.
  1. If you have an image in the grayscale mode and you want to colorize it, what must you do first?
  2. What blending mode preserves the underlying grayscale of an image and applies a hue of the selected color? Hint: it is typically used for tinting images.
 
Word as Image
***Please review project 1 page and note what is due for next week’s class.***

Animated GIF’s (Graphics Interchange Format)
Most popular name example

 

Week 7 | Wednesday

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.


Adobe Photoshop Overview

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

The Photoshop CS6 Interface

This video covers the basics of the Photoshop interface, from changing the interface’s color, finding the Tools bar, the Options bar and exploring Photoshop’s panels.


Background Save and Auto Recover


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


Photoshop | Creating New Documents


LAYERS

Photoshop Essentials | What Is a Layer?
Exploring layers: what they are, how they’re created and the different layer options that are available.


Photoshop Essentials | Non-Destructive Editing

Working with Adjustment Layers, Layer Masks and Smart Objects can help you edit your projects non-destructively, which will save you a lot of hassle in the future.


TUTORIALS

  • ASSIGNMENT | ACCESSING TOOLS #1

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: 2014.10.14.Smith_John_AccessingTools_v1

  • ASSIGNMENT | BRUSH TOOLS #2
  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:2014.10.14.Smith_John_BrushTools_v1

  • ASSIGNMENT  | HIDDEN TOOLS #3

  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:242 G:101 B:34.
  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:2014.10.14.Smith_John_HiddenTools_v1

  • ASSIGNMENT | COMPOSITE #4

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:

 adobecreativesuitemsu AS WELL AS add additional tags. 


  • ASSIGNMENT  |  PHOTO COMPOSITION #5

<

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 mouse 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

  •  ASSIGNMENT | COMPOSITE #6

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:2014.10.14.Smith_John_Composite_v2


  •  ASSIGNMENT | MAKING THE BEST SELECTIONS #7

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:

2014.10.14.Smith_John_Selections


Making the Best Selections

  •  ASSIGNMENT | Marquee Tool #8

Open image ps0501 here. Open image ps0501_done here.

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:

2014.10.14.Smith_John_Text_MarqueeTool

  1. Upload to your blog and Flickr and save your .psd file.
  •  ASSIGNMENT | Creating a Square Selection #9
  1. Click on the image background in layers.
  1. Select the Rectangle tool.
  2. Click and drag while holding the Shift key  to create a constrained square.
  3. Let go of the mouse and see the square. Notice the dotted lines. This means you can move the square around.
  4. Click on the Curves icon and change the opacity.
  5. 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.
  6. Press Command Z to undo.
  7. Reselect the square, then choose Image > Adjustments > Hue/Saturation. Click and drag the Hue sliders to cange the color of the selection region.
  8. Add text.
  9. Save your file and name it as follows:

2014.10.14.Smith_John_Text_MarqueeToolSquare

  • Upload to your blog and Flickr and save your .psd file.
  •  ASSIGNMENT | Creating a selection from a center point #10 
  1. Select the Background layer in the Layers panel, then click and hold the Rectangular Marquee too and select the hidden Elliptical Marquee tool.
  1. Draw a circle selection from the center of the image.
  2. Place your cursor in the center of the tire, and hold down the Option and Shift key.
  3. Click and drag to pull a circular selection from the center origin point.
  4. Release the mouse.
  1. If you need to nudge the circle around, use the up/down, left/right arrows.
  1. 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.
  1. Follow the directions from in-class exercise #1 starting at no. 3 to add the opacity and then the text.
  2. Save your file and name it as follows:

2014.10.14.Smith_John_Text_MarqueeTool_CenterPoint

  • Upload to your blog and Flickr and save your .psd file.

 ASSIGNMENT | Changing a selection into a layer #11
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:

2014.10.14.Smith_John_Text_MarqueeTool_ChangingLayer

  • Upload to your blog and Flickr and save your .psd file.

Homework | Week 7 | Wednesday 
  • Complete all assignments listed in this class post.
  • ASSIGNMENT | 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 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.
  1. If you did NOT finish the farm assignment in class, please finish it for homework.
Homework 6: 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: 2014.10.14.Smith_John_Nautical_Alphabet *NOTE: You are replacing Smith_John with your name. NOTE: Save the  PSD file to your DropBox.  You will give me a link to this on Wednesday.

***On your blog, list the exact colors and tools used to recreate the alphabet. Each flag on the map should be 200 px x 200 px. Each flag should be a separate Photoshop layer.

  • Homework 7: 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:
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.

Week 6 | Friday

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.


Adobe Photoshop Overview

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.

The Photoshop CS6 Interface

This video covers the basics of the Photoshop interface, from changing the interface’s color, finding the Tools bar, the Options bar and exploring Photoshop’s panels.


Background Save and Auto Recover


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.

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

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

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

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

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 workspace to its original configuration: 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.


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.


New Documents


TUTORIALS

  • ASSIGNMENT | ACCESSING TOOLS #1

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: 2014_Smith_John_AccessingTools_v1

  • ASSIGNMENT | BRUSH TOOLS #2
  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: 2014_Smith_John_BrushTools_v1

  • ASSIGNMENT  | HIDDEN TOOLS #3

  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: 2014_Smith_John_HiddenTools_v1

  • ASSIGNMENT | COMPOSITE #4

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:

 adobecreativesuitemsu AS WELL AS add additional tags. 


  • ASSIGNMENT  |  PHOTO COMPOSITION #5

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 mouse 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

  •  ASSIGNMENT | COMPOSITE #6

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: 2014.10.Smith_John_Composite_v2


  •  ASSIGNMENT | MAKING THE BEST SELECTIONS #7

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: 2014.10.Smith_John_Selections


Making the Best Selections

  •  ASSIGNMENT | Marquee Tool #8

Open image ps0501 here. Open image ps0501_done here.

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: 2014.10.10.Smith_John_Text_MarqueeTool
  7. Upload to your blog and Flickr and save your .psd file.
  •  ASSIGNMENT | Creating a Square Selection #9
  1. Click on the image background in layers.
  1. Select the Rectangle tool.
  2. Click and drag while holding the Shift key  to create a constrained square.
  3. Let go of the mouse and see the square. Notice the dotted lines. This means you can move the square around.
  4. Click on the Curves icon and change the opacity.
  5. 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.
  6. Press Command Z to undo.
  7. Reselect the square, then choose Image > Adjustments > Hue/Saturation. Click and drag the Hue sliders to cange the color of the selection region.
  8. Add text.
  9. Save your file and name it as follows: 2014.10.10.Smith_John_Text_MarqueeToolSquare
  10. Upload to your blog and Flickr and save your .psd file.
  •  ASSIGNMENT | Creating a selection from a center point #10 
  1. Select the Background layer in the Layers panel, then click and hold the Rectangular Marquee too and select the hidden Elliptical Marquee tool.
  1. Draw a circle selection from the center of the image.
  2. Place your cursor in the center of the tire, and hold down the Option and Shift key.
  3. Click and drag to pull a circular selection from the center origin point.
  4. Release the mouse.
  1. If you need to nudge the circle around, use the up/down, left/right arrows.
  1. 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.
  1. Follow the directions from in-class exercise #1 starting at no. 3 to add the opacity and then the text.
  2. Save your file and name it as follows: 2014.10.10.Smith_John_Text_MarqueeTool_CenterPoint
  1. Upload to your blog and Flickr and save your .psd file.

 ASSIGNMENT | Changing a selection into a layer #11
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: 2014.10.10.Smith_John_Text_MarqueeTool_ChangingLayer
  7. Upload to your blog and Flickr and save your .psd file.

Homework | Week 7  
  • Complete all assignments listed in this class post.
  • ASSIGNMENT | PHOTOSHOP BASICS #5
  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 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.
  1. If you did NOT finish the farm assignment in class, please finish it for homework.
Homework 6: 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: 2014.10.Smith_John_Nautical_Alphabet *NOTE: You are replacing Smith_John with your name. NOTE: Save the  PSD file to your DropBox.  You will give me a link to this on Monday.

***On your blog, list the exact colors and tools used to recreate the alphabet. Each flag on the map should be 200 px x 200 px. Each flag should be a separate Photoshop layer.

  • Homework 7: 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:
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.

PROJECT 2 IS DUE ON WEEK 7 WEDNESDAY

Project Submission and Printout:

The final INFOGRAPHIC RESUME must be printed in color, and at full size – 11″X17″. Design should also be uploaded to your Flickr, copy the image URL, add media and insert it onto you project 2 page o your website. KEEP ALL ORIGINAL FILES. They will be turned in at the end of the semester.

Word document, research, sketches, design iterations and final design in the following formats: .ai, .jpg and .doc should be UPLOADED TO DROPBOX and labeled as follows: Last Name_First Name_Date_Project II_Illustrator_Infographic.

The design will be turned in via DropBox as a Adobe Illustrator file, a .jpg file as well as printed in color. 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. ALL project files should be on BOTH your Illustrator Project II page as well as DropBox. ALL research, inspiration, low and high fidelity sketches, Illustrator v1 and v2 should be completed. They should all be linked to your project II page.

Items That Must Be Physically Turned In On Week 7 | WEDNESDAY at the BEGINNING of class:

  • Inforgraphic Resume printed at 11″x17″ and in color.
  • Paper print out of the project written description.
  • All .ai, .jpg and .doc files UPLOADED TO DROPBOX.
  • A link to BOTH your Illustrator Project II DropBox folder AND your Project II page.
  • Written Description – 600 word minimum.

Week 6 | Wednesday

Life = Risk


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

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

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

Collaboration – Steve Jobs


Homework | Week 6  

#1 | Critique

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

#2 | Project II

PROJECT 2 IS DUE ON WEEK 7 WEDNESDAY

Project Submission and Printout:

The final INFOGRAPHIC RESUME must be printed in color, and at full size – 11″X17″. Design should also be uploaded to your Flickr, copy the image URL, add media and insert it onto you project 2 page o your website. KEEP ALL ORIGINAL FILES. They will be turned in at the end of the semester.

Word document, research, sketches, design iterations and final design in the following formats: .ai, .jpg and .doc should be UPLOADED TO DROPBOX and labeled as follows: Last Name_First Name_Date_Project II_Illustrator_Infographic.

The design will be turned in via DropBox as a Adobe Illustrator file, a .jpg file as well as printed in color. 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. ALL project files should be on BOTH your Illustrator Project II page as well as DropBox.

#3 | PINTEREST

Add 10 more pieces of inspiration for your infographic resume.

#4 | PROJECT II

ALL research, inspiration, low and high fidelity sketches, Illustrator v1 and v2 should be completed. They should all be linked to your project II page.

Items That Must Be Physically Turned In On Week 7 | WEDNESDAY at the BEGINNING of class:

  • Inforgraphic Resume printed at 11″x17″ and in color.
  • Paper print out of the project written description.
  • All .ai, .jpg and .doc files UPLOADED TO DROPBOX.
  • A link to BOTH your Illustrator Project II DropBox folder AND your Project II page.
  • Written Description – 600 word minimum.

 

Week 5 | Friday

“a few ideas …” (Visions of Students Today)


Project II

Pinterest Resource


INSPIRATION
The Girl Effect


Water Changes Everything


How to Be an Educated Consumer of Infographics: David Byrne on the Art-Science of Visual Storytelling


DESIGN BRIEF
Assignment: Graphic Resume

RESOURCES:

Pinterest Visual Resumes
25 Examples of Super Creative Resume Design

Create a Visual – Graphic Resume

Visual experiences are winning our time and attention!

Your resume is a calling card to your future and clearly communicating your qualifications to potential employers is essential.  In the digital age, everything is changing and the standard resume is no longer standard. Your website will become your online identity and you online resume needs to read differently. First impressions can last forever and creating a visual presentation that stands out is important. More often than not, if your resume hasn’t caught someone’s eye within 30 seconds, they’re no longer interested.

An infographic resume has the chance to:

  • Stand out of the stack
  • Showcase your creative skills

The 500 Year Evolution of the Resume

The 500 Year Evolution of the Resume 

YOU HAVE 6 SECONDS TO MAKE AN IMPRESSION: HOW RECRUITERS SEE YOUR RESUME

Recruiters spent 80% of their time looking at six data points:

  • Name
  • Current title and company
  • Previous title and company
  • Current start and end dates
  • Previous start and end dates
  • Education
  1. Keep important data point’s clear and simple
    Creativity and simplicity can make a big impact.
  2. Create a hierarchy that presents information in a way that is easy to find and understand. Create visual cue’s such as big numbers and headings.  You want it to be easy to read and just enough detail that leaves the reader wanting more.
  3. Focus on graphic design principles.
  4. Make it Easy to Understand
    Resumes follow a specific format with your name and contact info at the top, followed by a summary of your skills, your work history, and your education.
  5. Tell a Story
    Make sure your resume tells a story—that positions you as the best candidate for the job.
  6. Pick the Right Colors
    Color is king but treat it like royalty. Don’t design with crazed splashes of color —which may detract from your story. Chose your color palate wisely. Striking contrasts or harmonious complements can work but don’t overlook a monochromatic color scheme that can make a big impact.

Resume Redesign
Can Beautiful Design Make Your Resume Stand Out?

Text is more than just words on a page. Think of color palate, shape and form on a page. Research differences between ‘Before’ and ‘After’ resume images like the resume makeovers below from Loft Resumes.

before-and-after-resume-examples


Resume___The_Creative_Dork_by_pyrotensive

resume-11

Resume_marco_schifano_en


THINGS TO CONSIDER

  • Fonts and Families

Focus on the difference between fonts and typefaces.

  • Readability

A few things to keep in mind—serif fonts are easier to read than sans-serif fonts on a typed, hard-copy resume don’t go any smaller than the size 11.5, and balancing text with white space is essential (e.g. don’t crowd the page!).

  • It’s Your Choice BUT…

Generally, it not a good idea to put a photo on your resume. The human eye is naturally drawn to photos, and in this case of your resume design, the profile photo. Researcher has shown that the resume prevented recruiters from looking at more important data such as experience and education.


PROJECT DIRECTIVE

Look at the Pinterest ‘Graphic Resumes’ board for a variety of resume examples.  Identify examples that you like and don’t like and take away inspiration for your own design.

Completely REDESIGN your current resume as a visual infographic resume.  Consider text as a visual element of your resume as well as a verbal one.  Text, placement, color, variation of size, even the proportion of text to white space affect the visual impact of your resume.

  • Post ‘before’ and ‘after’ images of your resume to Flickr AND create a NEW PAGE called Illustrator Project II with the parent page of PROJECTS where you will put all your research, inspirations, sketches and iterations, old resume and FINAL resume. If  you don’t have a current resume, quickly create a traditional resume.

Requirement Summary:

  • A maximum of ONE photo (small) can be used only if it is converted to a graphic in Illustrator with Image Trace and Live Paint. All work must be done in Illustrator
  • Logo can NOT only be created from text only. It must use multiple Illustrator tools and procedures. (If you already have a logo from project 1, you CAN use it.)
  • Your full name should be on the resume.
  • You must use a minimum of TEN TOOL/TECHNIQUES and explain what they are and how you used them in your word document.
  • You CAN use reuse some of the items in the tutorials you completed.
  • You may NOT use any tools, graphic creators, existing vector art or anything you did not create in this project.
  • It CANNOT contain only text.
  • A written description explaining the tools, principles, and elements you used in designing each of these must be turned in with the Illustrator files. The written description must be in Microsoft Word and must be saved as a .doc and .pdf.
  • A minimum

WORD DOCUMENT

  • 600 word minimum

Discuss your design process from design brief to project completion. How did your research inspire your sketches and Illustrator Iteration? What Illustrator tools did you use and what did you use them to create?  What steps did you take? What does your design portray? Are you pleased with your final design? Why or why not? If you had to start over again, what would you do differently?

PROCEDURE FOR PROJECT SUBMISSION  | DUE AT THE BEGINNING OF CLASS | WEEK 7 | WEDNESDAY | OCTOBER 15th, 2014:

FILE SUBMISSION PROCEDURE:

  1. Save a copy of ALL your .ai, .pdf and .jpg files through Save As: _date_name_infographic resume.
  2. Create a folder, with your name_illustrator project II as the folder name, inside of the folder place the following files:
  • Research
  • Inspiration
  • Sketches
  • Color Sketches
  • Illustrator Iterations and FINAL Files
  • Word document
  1. Place the folder with ALL your files in your DropBox. Copy the folder URL, make a comment on Week 6 FRIDAY with the full URL.

ITEMS THAT MUST BE PHYSICALLY TURNED IN AT THEDUE AT THE BEGINNING OF CLASS | WEEK 7 | WEDNESDAY | OCTOBER 15th, 2014:

  1. Paper print out of the “traditional” and NEW “infographic resume”, in color.
  2. Paper print out of the project written description.

Homework | Week 6 | Friday

Homework 1:  RESUME

Create a traditional one page resume using text only in Microsoft Word.

Homework 2:  DELICIOUS

On your del.icio.us account tag three Web Sites that focus on Infographic Resumes and tag FIVE SITES for your research  and write a note in the Delicious comments section about why you think each one would be a good resource for this class.  *Make sure you also add the tag: msuadobecreativesuite2014  AS WELL AS add additional tags.

Homework 4:  PINTEREST

Create a Pinterest account and a visual resume board and PIN 10 images that inspire you.

Homework 5:  PROJECT II: The Following is Due

Create an Illustrator Project II page on your website and list the following:

Research
Inspiration
Sketches (Low fidelity)
Colored Sketches (High fidelity)
First Illustrator Iterations of Project II  (YOUR ILLUSTRATOR PAGE SHOULD BE 11″X17″

COMPLETE ALL OF THE ABOVE

@@Deliverable’s AND Due Date: Week 7 WEDNESDAY@@

Homework 6:

iOS Musemm Map Due

Week 5 | Wednesday

ILLUSTRATOR | PROJECT 1 | DUE AT THE BEGINNING OF CLASS ON FRIDAY

ILLUSTRATOR | PROJECT 1 | OVERVIEW

Design Brief

Subject: CD/DVD CASE

  • Create a fictitious product company, logo and package/label design for your company. All CD/DVD designs must contain complete information.
  • Develop a CD/DVD cover/back cover/spin design, according to the following specifications.
  • Size: Determine the CD/DVD size from those in production. (4.75″ X 4.75″)
  • Include: title, logo, song or product list, manufacturer’s name, manufacturer’s contact information, manufacturer’s address, bar code or QR code, etc. Whatever you would normally find on a CD/DVD cover.
  • Product Name: Student choice – do not use an existing CD/DVD name.
  • Manufacturer: Student choice – do not use an existing CD/DVD name.
  • Logo: The product must contain a logo that matches the company name selected by the student.

Miscellaneous:

  • The CD/DVD design must contain all information that is normally found on a CD/DVD.
  • Selection of type styles, typefaces and the box package is made by the student.
  • The logo and CD/DVD design must demonstrate unity by using common themes. which demonstrates they are from the same product line.
  • The labels should fit the container neatly and look professional. You need to start with a CD/DVD case first to design your insert to fit, not the other way around.

Project Submission and Printout:

The final CD/DVD cover/back cover/spin must be printed in color, and at full size.
Design should be inserted into the CD/DVD case.

Design should also be uploaded to your Flickr, copy the image URL, add media and insert it onto you project 1 page o your website. KEEP ALL ORIGINAL FILES. They will be turned in at the end of the semester.

Word document, research, sketches, design iterations and final design in the following formats: .ai, .jpg and .doc should be UPLOADED TO DROPBOX and labeled as follows: Project I labeled: Last Name_First Name_Date_Project I_Illustrator_DVD.

The design will be turned in as a Adobe Illustrator file, a .jpg file as well as attached to CD/DVD they are design to fit. 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 5 | FRIDAY at the BEGINNING of class:

  • CD/DVD with your designs inserted into the case.
  • Paper print out of the project written description.
  • All .ai, .jpg and .doc files UPLOADED TO DROPBOX.
  • Adobe Illustrator Project I: Written Description

Requirement Summary

  • Photos can only be used only if they are converted to a graphic in Illustrator with Image Trace and Live Paint and even then must be used sparingly.
  • Your logo must use multiple Illustrator tools and procedures and may NOT be created only from text.
  • Design must be cleanly and neatly attached to a CD/DVD case to illustrate that they were design and fit the shape of the specific container.
  • Each design must contain the usual information that is used for that product..
  • The labels must fit their container well and look professional.
  • A Microsoft Word document with the following information must be included with your final project I submission. It must include a written description explaining the tools, principles, and elements you used in designing your product.
  • 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.
  • Adobe Illustrator Project I: Written Description Should Include:
  • Write a description of the logo design process/ product 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 Illustrator Project Written Description must include the following:

The name of the company and product your design was created for.

  • What image is your company attempting to project and why?
  • Why did you select the colors you did for your label designs?
  • What research did you do to make the designs fit the nature of the company or product?
  • What did you do to assure that the designs would work for the CD/DVD containers you used?
  • What elements are your center of interest on your designs and why?
  • Describe the flow throughout the various parts of your designs.
  • What elements did you use to create unity between the logo and the cover design?
  • Describe how you created unity between the logo, cover, and other parts of the packaging.
  • How successful do you think you were in meeting the product need to get customers to understand your CD/DVD?
  • What Illustrator tools did you rely on most and and why did you choose these tools?
  • What problems did you encounter while creating your designs and logo and how did you solve them?
  • 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.

Project 1 Recap
A few insights and oversights regarding Project 1:

  • When uploading your files to your project page, label each image.
  • Write your name, date and project name on your document description.
  • Save your document as a .doc or .pdf as they are universal file extensions.  NOT Mac Pages format.
  • Print out your document description, read it out loud and rewrite your document.
  • Delete all printer guides prior to printing your files.
  • Place ALL files on your website project page.
  • UPLOAD everything to DropBox

The People Who Are Crazy Enough To Think They Can Change The World Are The One’s Who Do.


IOS Map


Alan Watts – What if Money Were No Object?


HOMEWORK
  • Upload the in-class iOS Map and save it with the file name v1
  • Finish the iOS Map tutorial you created in class and save it as v2
  • Create iOS Map Indicators with Graphic Styles
Create v2 of the iOS Map Indicator tutorial using any one of the maps found here as your background. Find the locations for the worlds TEN  famous , largest or your favorite museums and map them.
Complete exercise and save as follows: 2014.10.1_Last Name_First Name_iOS Map_v1, v2, and iOS Map_Museums (You’re giving me three files.)
  • ****NOTE – Upload the .ai AND PDF files to your DropBox as well and share your DropBox with a link by posting the link on week 6 Wednesday by making a comment.  *****

Week 4 | Friday


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

When Saving Files | Save as: 

  • Example: 2014_Smith_John_AccessingTools_v1
  • Tag your images in Flickr with the following tag:

    adobecreativesuite2014

    ***ALWAYS SAVE YOUR AI FILES!**


THE STROKE PALETTE 
DOWNLOAD the ai file here.

Complete exercise and save as follows: 2014.9.31_Last Name_First Name_StrokePalette (Change the colors, etc. Personalize it.)


3D Tools

Rendering 3D in Illustrator.

Complete exercise and save as follows: 2014.9.31_Last Name_First Name_3D(Change the colors, etc. Personalize it.) Upload to both Flickr and your website.


Gradient Mesh and Shading
Applying gradient meshes and shading to objects.

Complete exercise and save as follows: 2014.9.31_Last Name_First Name_Gradient(Change the colors, etc. Personalize it.) Upload to both Flickr and your website.


Tracing and Live Paint
Tracing and using the Live Paint tool.

Complete exercise and save as follows: 2014.9.31_Last Name_First Name_Tracing – GET A LINE ART DRAWING from Google Images for this exercise. (Change the colors, etc. Personalize it.) Upload to both Flickr and your website.


INTRODUCTION TO PROJECT II

Infographic Visual Resume

  • Project II

Pinterest Resource


Homework | Week 4 Friday

Homework 1:  Tutorials

Complete the tutorials. Upload them to BOTH Flickr and to your websites. Change the colors, strokes, etc. Personalize them. Be sure to label each one. REMEMBER, you are recreating the original tutorial AS WELL AS creating a new, unique, design.

  • Art Board
Recreate the multi-page art board with letterhead, business card, post card and trifold AS WELL AS create a new document and design all the pieces to promote yourself.
  • 3D Tools
  • Stroke Palatte
  • Gradient Mesh and Shading
  • 3D Tools
  • Gradient Mesh
  • Tracing
  • Tracing and Live Paint
Homework 2:  DELICIOUS
On your del.icio.us account tag three Web Sites that focus on Illustrator,  or anything we learned in class today, and write a note in the Delicious comments section about why you think each one would be a good resource for this class.  *Make sure you also add the tag: adobecreativesuite2014, Illustrator Project 1 AS WELL AS additional tags.

Homework 3:  Project I DUE WEEK 5 WEDNESDAY

Research
Sketches – low and high fidelity sketches
Illustrator Iterations of Project I including front, back, spine and logo
Final .ai and .pdf files

@@Deliverable@@

  • Create a folder date-lastname-firstname-illustrator-projectI
  • Place ALL files inside that folder
  • Place the folder inside your DropBox
  • Command click on the folder to SHARE LINK
  • Copy link
  • On week 5 Wednesday comments, give me a link to your DropBox folder
  • Print out your cd/dvd IN COLOR and insert it in a real cd/dvd case.

Due  | Week 5 | Wednesday

 


Week 4 | Wednesday


INSPIRATION
Janis Joplin on Creativity and Rejection: Her Lost Final Interview, Rediscovered and Animated


“You are what you settle for. You are only as much as you settle for.”


PROJECT I CRITIQUES

Large group project critique.

The Align Palette

Complete exercise and save as follows: 2014.9.24_Last Name_First Name_AlignPalette


PATHFINDER PALETTE


Complete exercise and save as follows: 2014.9.24_Last Name_First Name_PathFinderPalette


THE TYPE PALETTE

Download the project file here.

Complete exercise and save as follows: 2014.9.24_Last Name_First Name_TypePalette


##FOR ALL TUTORIALS – COMPLETE THE TUTORIAL AS WELL AS CREATE A NEW, UNIQUE DESIGN.##

THE STROKE PALETTE 

Complete exercise and save as follows: 2013.10.11_Last Name_First Name_StrokePalette (Change the colors, etc. Personalize it.)


SYMBOLS PALETTE
Download Project Files

Complete exercise and save as follows: 2014.9.24_Last Name_First Name_SymbolsPalette (Recreate the tutorial AS WELL AS create a NEW design that uses your own branding)


THE MAGIC WAND

Complete exercise and save as follows: 2014.9.24_Last Name_First Name_MagicWand (Change the colors, etc. Personalize it.)


ART BOARDS

Complete exercise and save as follows: 2014.9.24_Last Name_First Name_ArtBoards (Change the colors, etc. Personalize it.)


Homework | Week 5  

Homework 1: Project I

Incorporate today’s critiques into your final project which is due Week 5 | Friday AT THE BEGINNING OF CLASS. Write a post for EACH classmate that lists your critiques.

Homework 2: Project I

Your entire project should be finalized and drawn in Illustrator. Your front, back and spine designed and completed in color, all materials including your inspiration, research, .jpgs/.pngs, .ai files, your Word document and your final design saved as a PDF.  Everything should be burned to your CD/DVD burned, all items placed in your CD/DVD case including writing your name, date and project title on the CD/DVD. Final project due on Week 5 AT THE BEGINNING OF CLASS.

Items That Must Be Physically Turned In On Week 5 Friday at the START of class:

  • CD/DVD with your designs inserted into the case.
  • Adobe Illustrator Project I: Written Description, on your website, printed out and on the CD/DVD.
  • All .ai, .jpg and .doc files burned to a CD/DVD which should be inserted into the case.
  • Label your CD/DVD Date_Last name_First name_Illustrator Project 1

Homework 3:  Complete the tutorials. Change the colors, strokes, etc. Personalize them. Upload them to BOTH Flickr and to your websites. Be sure to label each one.

  • THE ALIGN PALETTE
  • PATHFINDER PALETTE
  • THE TYPE PALETTE
  • THE STROKE PALETTE 
  • SYMBOLS PALETTE
  • THE MAGIC WAND
  • ART BOARDS

Homework 4:  Project 1

The following are due for Friday.

  • Research 1 (should be already completed)
  • Research 2
  • Sketch Round 1 (doodling) (should be already completed)
  • Sketch Low Fidelity (pencil) (should be already completed)
  • Sketch High Fidelity (pencil and colored markers)
  • Logo Iteration 1 (should be already completed)
  • Logo Iteration 2
  • Cover Iteration 1 (should be already completed)
  • Cover Iteration 2
  • Back Cover Iteration 1
  • Spine Iteration 1

Homework 5:  DELICIOUS

On your del.icio.us account tag FIVE Web Sites that focus on your Illustrator project, and write a note in the Delicious comments section about why you think each one would be a good resource for this class.  *Make sure you also add the tag:
adobecreativesuite2014, Illustrator Project 1 AS WELL AS additional tags. AS WELL AS add additional tags.

Week 3 | Friday

Information R/evolution


PROJECT 1 | SKETCH | CRITIQUES

Critique Goals:

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

Break into groups of three, share your work, speak to its strengths and weaknesses. Take notes because your are required to post a review of BOTH of your classmates in your group to your website. Critiques should be posted by 10am on Monday.


Design Development: Iterative Design Process

  • Explore: What are you trying to solve?
  • Functions: Define the usage, dimensions and output.
  • Iterate: Plan – Do – Study – Act
  1. Agree on the objective.
  2. Work on the design.
  3. Using virtual prototype (sketches in your sketchbook), study the outcomes.
  4. Make a decision and move from the sketchbook to Illustrator.

Illustrator | Saving Files


Layerless Thinking

Explains how layers are used (or not used) in Illustrator.


Locking & Hiding

Let’s look at manipulating groups by locking and hiding.


  • BEZIER CURVES

With Bezier curves you connect the dots to create an image. By simply connect the dots, you have straight lines. We’ll use Bezier curves to create smooth images which incluses curving lines.

Bezier curves simply employ a level of mathematical formulas to apply curves to your image data. When using the Bezier tools in Vector programs you manipulate your vector lines to create the curves. An Illustrator project is made up of a series of paths, (points called anchor points). Points are connected by curved or straight outlines called paths, and a curved path makes up a Bezier curve.

If you select the Pen Tool and click (and release) on the workspace, you create an initial anchor point. Click in another location (do not release) and drag to create a curved path (Bezier Curve). You’re able to select any anchor point at any time and drag to edit the look of the curve. When you click and drag anchor points, direction handles appear. The angle and length of these direction handles determine the shape and size of the curve. The direction handles in a Bezier curve are not part of the design and will disappear when the path is not active.

Complete exercise and save as follows: 2014.9.19_Last Name_First Name_BezierTool


REFERENCE:

For those of you who want to convert artwork or a photo into a vector artwork for your CD cover, view this video.


HOMEWORK

Homework 1: Vincent Van Gogh

Design Brief:
Choose one of the three paintings by Vincent van Gogh and re-create it in Illustrator.

This exercise will help you to begin understanding how design elements can work together to form a work of art. Your recreation doesn’t have to be an exact reproduction because we haven’t mastered all the tool. Use the elements of designs and the tools you’ve been learning so far.

Download the painting here.

Look for horizontal and vertical image blocks and show the motion simple shapes affect when creating a dynamic work of art. Keep note s of the techniques the original artist used in the work’s production and write a few sentences about the techniques and tools you used to recreate it.

The first thing you should do is to concentrate on the general shapes of the work, then move on to color, and then the final details. Try to interpret the design choices Vincent van Gogh made when he painted the image.

Deliverables:

A .jpg and .ai of your recreation

The original image along with a blog posting naming the artist and the name of the painting.
The image files should be named 2014.9.19_Last Name_First Name_VanGogh

  • Create a new document
  • Import the painting
  • Create a New Layer
  • Apply design elements use drawing tools such as the rectangle, oval, square, circle, etc. to begin tracing over the image.
  • Use layers to help organize your composition. (Each new element you wish to add, you can create a new layer and add it to that layer.) Name each of your layers.
  • Add color to your document.
  • Use the drawing tools to add as much detail as possible.
  • Hide the original painting by turning the visibility to the original layer (clicking the eyeball on the layers palette for Layer 1.
  • Save your file as an .ai file. You will need to Save for Web and Devices and change GIF to JPEG to save as a .jpg file. Set your image quality to high.
  • Finish and Save
  • Post the original artwork and your document to your site.

Homework 2: Complete all in class assignments if you you have not already done so and upload them to Flickr and then your website. When completing the exercises, use a different color so that I can see what you’ve created. Review the videos for reference.

Homework 3: PROJECT 1

The following are due on Wednesday

  • Sketch Low Fidelity (pencil)
  • Sketch High Fidelity (pencil and colored markers)
  • Logo Iteration 1 (sketches)
  • Cover Iteration 1 (sketches)
  • Critique 1
Use ILLUSTRATOR to create the first iterations for Project I including logo and cover. Use your sketches as references for your Illustrator files. Files should be created for the logo, front and back cover and spine.  The following items should be included in your Illustrator files.
Product specifications required include:
  • Designed to the exact CD/DVD size using the template provided
  • Company or product name
  • Manufacturer
  • Font choices
  • Logo design
  • Bar code
  • Designed in color
Save your .ai files as well as export your files and save as .jpgs. Upload all your .jpgs to Flickr, copy the image URL, go to your website blog post, add media, insert URL, paste Flickr URL, click on link back to Flickr and save your post.
Homework 4: Critique
Post your critiques of BOTH of your classmates designs to you blog by 10am on Monday. You are to take these critiques into consideration when creating your first design iteration using Illustrator. Then RESPOND to the critique. You don’t have to incorporate their critique into your design BUT you need to justify why you did or did not incorporate the changes.
Homework 5: DELICIOUS

Complete your RESEARCH for project 1 – add FIVE ADDITIONAL links in Delicious from your research and inspiration for your project idea. Tag it with the additional tag: Illustrator Project 1. Make sure you add your comments in the COMMENT section on what inspired you, what design aesthetics you might use, etc. (You should have a total of 10 links for project 1) *Make sure you also add the tag:adobecreativesuite2014, Illustrator Project 1 AS WELL AS additional tags.

Week 3 | Wednesday

NOTE: YOU MAY ONLY LOG IN TO THE CLASS WEBSITE AT THE BEGINNING OF EACH CLASS


Did You Know? Shift Happens, 2014 remix


Basic Tools


Creating Objects


The Pen Tool


Selection Tools


Shape Tools | Selection Techniques Review


Object-Oriented Design

 Save the document as: 2014.9.17_Last Name_Object-Oriented Design –  Upload that file to Flickr and post on your website.


Grouping

 Save the document as: 2014.9.17_Last Name_First Name_Grouping –  Upload that file to Flickr and post on your website.


MAJOR PROJECT 1

(Illustrator CS 6): CD/DVD
The assignment is to create a digital still life (a CD/DVD design including front, back and spine), in Illustrator, using your knowledge of the drawing tools. The designs will be set up and must be sketched BEFORE moving to Illustrator.


Design Brief for Illustrator  

CD/DVD Case Design

Develop a design for a compact disc CD/DVD case. This design will include both the front and back cover insert for a conventional jewel CD/DVD case, along with the title panels. The design can focus on either an audio CD/DVD or CD/DVD game, CD/DVD movie title, or idea of your own and can be either real or fictitious.

Design Specifications: Size Conventional CD/DVD case dimensions. Download a print ready template here. Download the .ai file titled:

CD Package
4.75″x 4.75″
Double Back

This gives you the layout for the front and back but not the spine.

CD/DVD Name: Use a real or fictitious audio CD name – or real or fictitious CD or DVD game title.

Logo: Design an original logo for the company of manufacture for either the audio CD or game CD/DVD.

Information: The project will include all of the information typically found on either an audio or game compact disc. Included will be the side title bars and the back cover insert. Dimensions can be found on a typical CD case or DVD cover.

Project specifications include research, size, name, manufacturer, font choices, initial logo design and  initial box design and final designs.

Written Description: Detailed 600 word document detailing your design process, the tools you used and what you would change if you had to do  it again.

* Each project must be submitted with following items: Research & Conceptual Sketches, Preliminary Comps, Final Designs and written description. You will be graded separately on each phase of your projects. You will also be submitting each final design as a digital file.

Final Package Printout:

Final project must be printed in color, at full size, and inserted into a cd/dvd case. The cd/dvd inside the case should ALL files you created (including hand sketches, multiple .ai iterations and written description doc. All files should also be uploaded to your website on a page titled PROJECT 1 | Illustrator. KEEP ALL ORIGINAL FILES. They will be turned in at the end of the semester on a DVD.


A NOTE ON SKETCHING

  • When designing anything, (including the CD/DVD project) sketch often!

Sketching helps you think about content, hierarchy and flow among other aspects. Sketches are cheap, easy to do and very fast. You should be able to create one new idea every thirty seconds. Sketching is also one of the best ways to communicate ideas about layout, user experience and user flow for a site.

DON’T use the computer until we review the sketches in class. Young designers tend to skimp on the sketches or omit them altogether. Too many designers transition too early from sketches to a higher fidelity design without first exploring all possible solutions.

Design concepts for developers

Sketches allow you to iterate on ideas quickly and save lots of time experimenting in mockups or code

Create a NEW page call Illustrator Project 1. The parent page should be Digital Media Production. On the Illustrator Project 1, heading: Sketches. Under that, create a list:

  • Research 1
  • Research 2
  • Sketch Round 1
  • Sketch Low Fidelity (pencil)
  • Sketch High Fidelity (pencil and colored markers)
  • Logo Iteration 1
  • Logo Iteration 2
  • Logo Iteration 3
  • Cover Iteration 1
  • Cover Iteration 2
  • Cover Iteration 3
  • Back Cover Iteration 1
  • Back Cover Iteration 2
  • Back Cover Iteration 3
  • Spine Iteration 1
  • Spine Iteration 2
  • Spine Iteration 3

The sketches from the instructions below need to be uploaded to Flickr and the URL linked to each one of the above.

  1. Create  CD/DVD with various iterations in your sketch book.  Scan your drawings OR take a photo and upload to Flickr, then  link the URL to the above.
  2. Create Logo for CD/DVD with various iterations in your sketch book. Scan your drawings OR take a photo and upload to Flickr, then  link the URL to the above.

HOMEWORK | Week 3 | Wednesday

Create a POST called WEEK 3 FRIDAY HOMEWORK | Due 9.19.14

  •  Go to the page  you created called ADOBE CREATIVE SUITE. Highlight Week 3 Wednesday Homework, click link and paste in the blog post URL.
  • Complete ALL in-class tutorials. Upload them to Flickr, copy the embed code and paste in your homework blog post. EACH image posted should have the title above it.
  • Create  a new page called Illustrator Project 1 with the parent page Adobe Creative Suite. Add the bullet point listed above.
  • Complete your RESEARCH for project 1 – add FIVE links in Delicious from your research and inspiration for your project idea. Tag it with the additional tag: Illustrator Project 1. Make sure you add your comments in the COMMENT section on what inspired you, what design aesthetics you might use, etc.
  • List the NAME of your project and if you’re going to be creating a CD or DVD.
  • Hand draw at least two iterations for your first design sketches. Upload to Flickr and copy embed code and add to your Illustrator page.
  • List your Delicious URL on your homework blog posting
  • On your del.icio.us account tag three Web Sites that focus on Illustrator or anything we learned in class today, and write a note in the Delicious comments section about why you think each one would be a good resource for this class. ALSO, add week 3 Wednesday in your comments section so that I can keep track of your comments. *Make sure you also add the tag:adobecreativesuite2014  AS WELL AS add additional tags.

 

Week 2 | Friday

Don Norman: The three ways that good design makes you happy


MORE WIDGETS

How to use the WordPress Text Widget

The WordPress Text widget is the easiest way to add custom HTML code to your WordPress sidebar.

  1. Log into your WordPress Dashboard
  2. Under Appearance, click “Widgets”
  3. Find the “Text” widget under the “Available Widgets” section, and drag and drop it to your “Main Sidebar” section.
    drag-and-drop-text-widget-to-main-sidebar
  4. A window will appear in which you can type in a title and text for your widget. Enter your text, and then click “Save” and then click “Close”.
    enter-text-widget-details-and-click-save
  5. Your widget is now saved and is visible on your website!
    results-of-a-wordpress-text-widget

Customizing your WordPress Sidebar
How to add images and image links to your WordPress sidebar

The sidebar is a wonderful piece of real estate on your site to place relevant content that may not fit directly on a page or post. Most content in a sidebar is text, however you can certainly add some diversity by making some of those text links into buttons or image links. Adding an image link to your WordPress sidebar is not much different than adding any other meta data. Below is a quick tutorial on how to add image links to your sidebar in your WordPress site.

Adding image links to your sidebar in WordPress

Log into your WordPress Admin dashboard.
Once logged into the Admin area, look to the left hand menu and click on the Appearance menu category.


Introduction to Adobe Bridge

Adobe Bridge is an organizational software application that is a part of the Adobe Creative Suite. Its primary purpose is to link the parts of the Creative Suite together using an interface similar to the file browser found in previous versions of Adobe Photoshop. It is accessible from all other components of the Creative Suite.


Best Practices for File Naming

Accurate file-naming – Special characters – Underscore – Date

YYYY_MM_DD _FileName_Version

NEVER EVER, EVER, EVER, EVER THROW AWAY NATIVE FILES

Read more about file-name convention for digital files.


Best Practices for File Storage

What happens when you move your files to multiple locations?


Introduction to Adobe Illustrator CS6


Adobe Illustrator History

Adobe introduced Illustrator 1.1 was introduced in 1987, using the Bezier curve as the basis for vector graphics. These vector graphics create PostScript files visually.


Adobe Illustrator vs Adobe Photoshop

They share much of the same functionality BUT Adobe Illustrator is used for creating vector graphics and vector text, while Photoshop is used to create raster graphics (or bitmaps). Vector graphics are  made of lines and curves that contain mathematical objects called vectors (Illustrator). Raster graphics (or bitmaps) contain tiny dots of color (also called pixels or bits)(Photoshop). In Photoshop the image is the combination of many of these dots/pixels with the final result being the appearance of a solid image. You to edit images by changing the pattern of the pixels by lightening or darkening them, and by rearranging their pattern.

Summary: Photoshop is the primary tool for editing photos and Adobe Illustrator is the preferred tool for creating vector graphics. Note:  Bitmap graphics (photos) are much larger in file size than vector graphics because information for every single bit must be saved to the file. Every time you change the file and resave it you lose quality. Change the size of a raster graphic and your quality will be changed. Vector graphics can be scaled to any size without losing quality.

Adobe Illustrator will allow you to convert a vector image to a raster image. You can also import raster images, but the images themselves cannot be edited in Illustrator.

See the example below of a vector and a bitmap below.


Understanding Vector Graphics (Illustrator)

Vector is another word for a scalable graphic design. They are constructed shapes, colors, and placement that together, form a picture, and are ‘scalable’. Vector graphic formats include PICT, EPS, and WMF as well as PostScript and TrueType fonts.

In their original format, vector graphics are easy to alter; anything about the graphic can be changed. Vector graphics allow you to open a previously saved file, change it, and then save it again. You can open the file an unlimited number of times, change it, and then save it and you never lose the integrity of the document. They offer exceptionally high quality print; the vector file type most typically requested by printing companies is called .EPS – which is short for Encapsulated Post Script.

Adobe Illustrator creates graphics in vector format, and then from these vector images a whole multitude of other file types can be created without changing the scalable attributes of the vector file (the master file). From this master file you can create a GIF, JPEG, PNG, TIFF, XBM, BMP, and PCX file. Note, you can take a vector file and turn it into a bitmap bile but you CANNOT take a bitmap image and turn it into a vector image.

When a shape or an object in Illustrator, it is considered either an open path or a closed path. When the path is enclosed, a square for example, it’s call that a closed path. When the beginning and ending points are not connected, a line for example, that is an open path. A path is made up of multiple segments with each segment having an anchor point at the beginning and one at the end. Anchor points control the shape of the path. When you draw a shape, it is considered to be an object in Illustrator. Anything added is always considered an object.


Touring the Illustrator Interface

Tools Panel Overview

The Tools panel appears at the left side of the screen. You can move the Tools panel by dragging its title bar. You can also show or hide the Tools panel by choosing Window > Tools.

You use tools in the Tools panel to create, select, and manipulate objects in Illustrator. Some tools have options that appear when you double-click a tool. These include tools that let you use type, and select, paint, draw, sample, edit, and move images.

You can expand some tools to show hidden tools beneath them. A small triangle at the lower-right corner of the tool icon signals the presence of hidden tools. To see the name of a tool, position the pointer over it.

tool bar


Setting Up a New Document

  • File – New
  • Choose a profile: print, web, video/film, etc.
  • Advanced: choose your color mode (CMYK for print, RGB for web)


HOMEWORK | Week 2 | Friday  

Create a POST called WEEK 2 FRIDAY HOMEWORK | Due 9.17.14

  • Copy the URL. Go to the page  you created called ADOBE CREATIVE SUITE. Highlight Week 2 Friday Homework, click link and paste in the blog post URL.
  • Install 2 WordPress Text Widgets onto any page on your website.
  • A. Use HTML code to create 3 links to an external websites. Search W3Schools website for the code if you don’t know it.
  • B. Make any one word or sentence in the Text Widget BOLD using HTML
  • C. Add an image to a Text Widget  in a sidebar
  • List your Delicious URL on your homework blog posting
  • On your del.icio.us account tag three Web Sites that focus on WordPress Widgets, WordPress themes, plugins, widgets or anything we learned in class today, and write a note in the Delicious comments section about why you think each one would be a good resource for this class. ALSO, add week 2 Friday in your comments section so that I can keep track of your comments. *Make sure you also add the tag: adobecreativesuite2014  AS WELL AS add additional tags.

HW TUTORIALS | DESIGN BRIEF:

Create an original graphic for a background for a website using Adobe Illustrator, to create an original work. Use design elements including line, shape and space as well as Illustrator effects to create the background.

HOMEWORK Exercise 1: 

Download the sample vector file here.

Create a new document with the following parameters, prepped for the web:

  1. Width: 1280 pixels – Height: 800 pixels.This is the most common web resolution.
  2. Make sure that the New Document Profile has Web selected. This will set the resolution will be set for you (72 pixels/inch, color mode RGB 8 Bit).
  3. Open the sample vector file and drag it and drop it onto your new document. Change the following: color, size, shape and placement and scale using Illustrator’s simple tools and effects (blur, etc.) to create a generic background that could be used for a website. Save the file as an editable pdf and upload to your blog.
  4. Give your document a name starting with: 2014.9.12_Last Name_Frist Name_Background.
HOMEWORK Exercise 2: 
Create a new document with the parameters above EXCEPT this time, DO NOT use the sample vector file. Create your own vector file. Save the file as an editable pdf and upload to your blog, giving your document a name starting with: 2014.9.12_Last Name_First Name_Background2
The project theme is: WATER.

HOMEWORK EXERCISE 3:

 – The project theme is: RESIZING/TRANSFORMING.

Rectangle Tool

  1. Create a new blank document. File > New (The shortcut on the Mac is Command+N)
  2. Choose Print from the New Document Profile drop-down menu and Inches from the Units drop-down menu.
  3. Profile > Custom – Number of Artboards > 1 – Size . Letter –
  4. Press OK and a new document appears
  5. Select the Rectangle tool from the Tools panel. Click and drag anywhere on the artboard. Typically, you pull from the upper-left corner diagonally to the lower-right corner.
  6. Save the document as: 2014.9.12_Last Name_First Name_Rectangle

HOMEWORK EXERCISE 4:

Complete the following:
  • Choose the selection tool and click on your rectangle to highlight the rectangle and show the eight handles.
  • Drag the rectangle to a new location without resizing it.
  • Hover over the bottom-middle handle until the cursor becomes a vertical arrow. Click and drag to resize the rectangle.
You now know how to create, move and resize and object.

Save the document as: 2014.9.12_Last Name_First Name_Rectangle2

Transform Panel: The transform panel lets you know the shape’s dimensions.
  • Select the rectangle – Open the Transform panel – Window > Transform
  • Click on the upper-left corner of the reference point locator to see the X and Y values change
  • Choose View > Show Rulers to display the rulers
  • In the transform panel type 2 into the X text field and 2 into the Y tab field. MAKE SURE the Constrain Width is not selected. Then type 1 in Width and 1 in Height text field.
The rectangle is now positioned and sized according to those values.

Save the document as: 2014.9.12_Last Name_First Name_Rectangle3

Rotating and Using the Transform Panel:
Select the shape – Type 25 into the Rotate text field at the bottom of the Transform panel and hit Return. The object rotates 25 degrees counterclockwise.
Click and hold on the arrow to the right of the Sheer text field and choose -30 from the drop-down menu. The shape is now sheared by 30 degrees.

Save the document as: 2014.9.12_Last Name_First Name_Rectangle4

Constraining a Shape:

HOMEWORK EXERCISE 5:

  1. Select the Rectangle Tool
  2. Hold down the Shift key and click and drag on an empty are. NOTE: Holding down the shift key contrains the shape to create a square. To keep it a square, release the mouse BEFORE releasing the shift key.
  3. Do the same with the Elipse Tool. You can find the Elipse Tool by holding down the mouse on the Rectangle Tool and you’ll see a drop down menu.
  4. Hold down the Shift key, select an area of the art board, and drag to create a circle. NOTE: Remember to release the mouse BEFORE you release the Shift key to keep the shape a circle.

Save the document as: 2014.9.12_Last Name_First Name_Rectangle5

@@@NOTE: At the end of the Illustrator section you will be turning in a print portfolio with all your work. Create a NEW Illustrator document and place ALL your rectangles  on ONE page.

Save the document as: 2014.9.12_Last Name_First Name_RectangleFINAL – Upload that file to Flickr and post on your website. @@@


Week 2 Wednesday – WordPress

Week 2 Wednesday |  WordPress

 “Few people think about it or are aware of it. There is nothing made by human beings that does not involve a design decision somewhere.”

-Bill Moggridge


Steve Jobs on How to Live BEFORE You Die
ted_logo


REVIEW | POSTS VS PAGES

ADDING CONTENT

POSTS VS. PAGES

When adding content, you have to decide if it should be a post or a page. The main difference between these is that a page is non-dated content that is intended to be a permanent, top-level part of your site that does not change often. A post is for dated, time-sensitive content, that you will add on a regular basis to freshen the site. Posts are usually the bulk of the site, with pages providing context and background information. On this site, the weekly lessons are posts and the syllabus is a page.

USING THE PAGE/POST EDITOR

  • Visual vs. HTML
  • Standard Toolbar
  • Kitchen Sink Toolbar
  • Uploading and Inserting Images

CREATING PAGES

Pages are relatively simple. They have the following elements:

  • Title
  • Content
  • Publish Status
  • Page Attributes – Template and Parent
  • Featured Image

CREATING POSTS
Posts have most of the same elements as pages with some additions. They do not have parents.

Categories – You can use these to organize your posts. Categories can be added right from the post page or from the Categories item in the left side dashboard menu.

Tags – Tags are a looser way of associating posts with a list of keywords that describe the content of a post. Some themes will show all the tags on a post as hyperlinks, so you can quickly jump to other posts tagged with the same term.

Format – As of WP 3.1, there are a number of options for a post format besides the standard type. The effect of choosing one of these rather than the standard format is going to depend on your theme.

  • aside – Typically styled without a title. Similar to a Facebook note update.
  • gallery – A gallery of images. Post will likely contain a gallery shortcode and will have image attachments.
  • link – A link to another site. Themes may wish to use the first <a href=””> tag in the post content as the external link for that post. An alternative approach could be if the post consists only of a URL, then that will be the URL and the title (post_title) will be the name attached to the anchor for it.
  • image – A single image. The first <img /> tag in the post could be considered the image. Alternatively, if the post consists only of a URL, that will be the image URL and the title of the post (post_title) will be the title attribute for the image.
  • quote – A quotation. Probably will contain a blockquote holding the quote content. Alternatively, the quote may be just the content, with the source/author being the title.
  • status – A short status update, similar to a Twitter status update.
  • video – A single video. The first <video /> tag or object/embed in the post content could be considered the video. Alternatively, if the post consists only of a URL, that will be the video URL. May also contain the video as an attachment to the post, if video support is enabled on the blog (like via a plugin).
  • audio – An audio file. Could be used for Podcasting.
  • chat – A chat transcript, like so:
Adam: what's up?
Luis: not much
Adam: that sounds boring

More on PLUGINS

Most Popular WordPress Plugins

The plugins listed below are the most popular among our customers in several different categories – ecommerce, SEO, security and more.

Akismet
Akismet stops the spam messages in your blog comments. Any messages recognized as blog spam get recorded in the Akismet web service and blogs all over the world become immune against it.
Jetpack

This is a comprehensive plugin that contains a wide range of features: notifications in your toolbar, connect site to social networks and automatically share, view concise stats, allow subscriptions to your posts to receive notifications, share content with Facebook, Twitter and more.

Contact Form 7
With Contact Form 7 you can easily create instant drop in forms for the visitors of your WordPress blog. This way you will be able to stay in touch with them without providing your email address. Your readers can contact you any time and your email remains spam-free.

All-in-one-seo-pack

This is a plugin that helps you optimize your WordPress for SEO and generates meta tags automatically, optimizes titles, avoids duplicate content, includes Google Analytics support. It is the only plugin to provide SEO integration for e-commerce.

The plugin is a popular tool when transferring content or a whole website as it will import posts, pages, comments, custom fields and post meta, categories, tags and terms from custom taxonomies and authors from a WordPress export file.

This is an ecommerce plugin that is entirely customizable as it allows you to use your own HTML & CSS and have complete control over the look and feel of your online store. It offers a streamlined checkout process, integrates with PayPal, Google Checkout and more, and has flexible shipping options and integrations with variety of shippers.


CUSTOM MENUS
Most up to date themes allow you to add at least one custom menu to your site. You can build a menu of links to categories, pages and custom links.


Beginner’s Guide to WordPress Menus
Paul Kaiser explains the menu system basics and how to start using them on your site. Working with the original WordPress menus WordPress menu management to the rescue.

Drag, drop, and done

RESOURCE:Read more about WordPress menus.


Building Menus

Your site’s navigation menu is generally a combination of Categories and Pages, as shown in this example:

Menu1

Categories are shown here in red, while the other three links are to Pages in the system.

Prior to WordPress 3.0, menu building was a semi-manual process. There are WordPress function calls that can be inserted into a theme’s header.php template file, which will automatically pull in a hierarchy of nested pages, or of categories and their subcategories. However, that system required users to touch the HTML/PHP of the site (many users aren’t comfortable with this), and made it tricky to precisely control the order of items in the menu, or to exclude certain items.

WordPress 3 introduced a new “Menus” system which has made menu construction much, much easier. If your currently active theme is designed to support Menus, you’ll see a “Menus” link in the Appearance section of the Dashboard sidebar:

Menus2

If that entry doesn’t appear in your Appearance manager, you’ll need to edit your theme’sheader.php template file, remove the code that currently builds menus, and replace it with a bit of new code. That process is well-described here. For now, we’ll assume that your theme already has Menu support.

WordPress can actually support the use of multiple menus on a site. To get started, you’ll need to name at least one menu in the system – may as well call it “Main”:

Menus3

Once you’ve saved a blank menu, you’ll need to attach it to a location. In the default “2010” theme that comes with WordPress, the main named location is called “Primary Navigation.” Associate your “Main” menu with the “Primary Navigation” location:

Menus4

With that done, you can now begin dragging menu sections from the left side of the page to the “Main” menu drawing area at the right, in much the same way as you built your collection of Widgets.

Start by checking the boxes for some or all of your Categories at the lower left, then click Add to Menu:

Menus5

The selected categories now appear in the menu builder:

Menus6

To change the order of the menu, try dragging the category entries up or down. Click Save Menu, then take a look at your live site. Want to see something even cooler? Try dragging one of your menu items a bit to the right, so that one category is nested under another:

Menus7

Now take another look at your live site – the hierarchy of categories will be translated into nested “fly-out” menus on your site.

Now try adding some of your Pages to the menu, in the same way. You might want to arrange it so your menu shows one page, then three categories, then another page, or whatever you like.

Finally, take a look at the Custom Links section on the left of the Menu builder. Create a Custom Link to your homepage by entering a URL of “/” (or whatever is relevant for your site) and a label of “Home”:

Menus9

Of course, custom links can go to any page or post on your site, or even to other pages on the web! Drag the new custom link to the top of the menu and save.

Menus10

Using this system, categories and pages no longer show up automatically in your menus, but you’ll find that you have much more control, and end users will have far less need to call in developers to build their menus.

If you do decide you want newly added top-level pages to be added to your menu automatically, check the box labeled “Automatically add new top-level pages” near the top of the menu builder.


SIDEBARS AND WIDGETS

Most WordPress themes include at least one “sidebar”, an area to the right or left of the page content that can contain a variety of things, including search, lists of recent posts, your blogroll, and admin links. These components are called widgets, and are managed through the widgets panel. Some themes also support the addition of widgets in other areas of the site, such as the headers and footers.


Ken Robinson: How Schools Kill Creativity

A QUICK LESSON ON HTML/CSS

The Building Blocks of HTML and CSS
Introduction to HTML
HTML Structure: Using Lists
HTML Structure: Tables, Divs, and Spans

COMPLETE:
Introduction to HTML
HTML Basics
Fundamentals of HTML


HOMEWORK | Week 2

    1. Install WordPress on your web hosting space.
    2. Go to your wp-admin panel and install a theme (you may not use the default theme) under appearances, select themes and choose a new theme. Add at least SIX plugins.  Add widgets, fill out the personal info on the site.
    3. Add the following PAGES to your website:
      • About
      • Contact
      • MSU
      • Classes
      • Adobe Creative Suite
    4. On the ABOUT page, add a photo of yourself (upload the photo to your Flickr account and link it from there), an artist statement and a bio or resume.
    5. On the CONTACT page, add a contact plugin form. Try searching for Contact Form 7 in PLUGINS under POPULAR.
    6. ON the MSU page create a list of all your MSU fall 2014 classes.

    On the ADOBE CREATIVE SUITE page, create a list with the following information:

    • Week 1 Homework Wednesday(make this bold)
    • Week 2 Homework Monday (make this bold)
    • Week 1 | Adobe Creative Suite (this link should be a LINK that corresponds to the homework post)
    • Week 2 Wednesday | WordPress (this link should be a LINK that corresponds to your homework post)
      1. Create a POST titled Week 1 Wednesday Homework, ADD the categories: Adobe Creative Suite and Week 1 Wednesday Homework. Make the Adobe Creative Suite category the parent category. In this post, list links to week 1 homework including:
      • Delicious
      • Flickr
      • Website URL
      1. Create a POST titled Week 2 homework
      2. Create a POST titled Week 2 Wednesday Homework.  ADD the categories: Adobe Creative Suite and Week 2 Wednesday Homework. Make the Adobe Creative Suite category the parent category. In this post, list links to week 2 homework including:
    • List the PLUGINS you added to your site
    • List the WordPress theme you chose
    • List any widgets you added
    • Website URL

    Add a custom menu to your site.

  • Add 2 widgets to your sidebar.
  • Add the WordFence AND Captcha plugins.
  • Complete the CODE ACADEMY lesson on HTML. Take a photo of the certificate at the end showing that you completed it. Upload it to Flickr and post it to your blog.
  • Add a new post called: Homework Week 2 Wednesday and list all your homework and links.
  • On your Adobe Create Suite page, add the following text: Homework Week 2 Wednesday and make it a link to the blog posting you created.
  • On your del.icio.us account tag three Web Sites that focus on WordPress, WordPress menus or anything we learned in class today, and write a note in the Delicious comments section about why you think each one would be a good resource for this class.  *Make sure you also add the tag: msuadobecreativesuite2014-04 AS WELL AS add additional tags.

Week 1: Wed | Adobe Creative Suite

Week 1 – September 3rd
Class Introductions, Review Syllabus, Introduction to Studio, Delicious, Flickr, DropBox, Photo Booth, Web Hosting Place, Server, Create Blog.



Studio Rules

  • Students are required to use the desktop computers during class. No food and/or drinks are allowed in or on the computer area.
  • Using your cell phone or traversing social media during class is prohibited.
  • Attendance is required.
  • Homework is NOT optional.

The Class Blog

This is the class blog. All lessons, homework, readings, and resources for the class will be posted through this blog. All of you will be required to register on the blog, and I will use the email address that you sign up with to communicate with you outside of the class. Please be sure to use your MSU email when registering. I will also place comments regarding your work on this blog. Please take note of the address now!

You will be required to log into the class blog each class. Once you’ve created your WordPress blog, leave a comment on the CLASS BLOG.


Photo Booth

Go to PhotoBooth on your Mac and take a photos of yourself. Lean in close to the camera so that the photo shows a close up of your face. Once this is completed, please create a gravatar so that your image will be posted with each of your comments on the class blog.


Your Personal Blog

You will post all homework on your personal blog UNTIL we get your websites launched. This is a blog you create specifically for this class. Go to WordPress and create your blog. For your blog address as well as your username, use your full name. Example, johnbrown.wordpress.com. It’s as easy as that! Use your first and last  name when registering your blog. If  your name is taken, add your middle initial or full middle name. Please take note of the address now!

You will be required to post all your homework on your personal website before the start of each class. When you log into the CLASS BLOG for each class, write the FULL url of your homework that you created on your PERSONAL WEBSITE, DELICIOUS AND FLICKR ACCOUNTS. Each week I will click on the url’s and review your homework.


Student Questionnaire

Fill out the student questionnaire so that I have your contact information and can get to know you a little better.


Del.icio.us

Del.icio.us is a social bookmarking service that everyone is required to sign up for an account for an maintain tags on it. Through del.icio.us you are going to “tag” pages related to our work in the class so that you can reference them later and share them with the class. It is a way to keep all your tagged pages in an orderly manner making it very easy for you to find your tagged pages. We will be using Del.icio.us to tag sites related to this class including tutorials, design inspirations, lectures and other articles.

Sign up for an account here: http://del.icio.us/


Flickr

Flickr is a photo sharing service that everyone is required to sign up for an account for and upload your weekly work too. Through Flickr you are going to “upload” images related to our work in the class so that you can reference them later and share them with the class. It is a way to keep all your work in an orderly manner making it very easy for you to find your tagged images.

Sign up for an account here: Flickr


Register for a DropBox Account

If you DO NOT already have a DropBox account, please use the link here to create on. It will help me in tracking your installs. https://db.tt/pQHZn7uR – DropBox is a place where you can save your files to the cloud and access them from any computer, anywhere. Sign up for a free DropBox account and install DropBox on your personal Computer.


 Best Practices for File Storage

What happens when you move your files to multiple locations?


Web Hosting Space

Everyone is required to have a domain name and web hosting space. You can use any hosting provider you’d like, or use the one you may already have. If you do not have a web hosting space, you can sign up at BlueHost, the company I use to host my websites. Again, you may use any web hosting space that you choose, but if you decide to use BlueHost,use this link to sign up and I can track your install in case you have any issues. NOTE: This is where you will host all your work through out your four years at MSU. It’s $4.99 a month and they give you a free domain name. Your domain name should be your first and last name.com. Example www.johngreen.org Your desired domain name may already be taken. If that’s the case, try your first name, middle name, and last name.org ie: johnalbertgreen.org. They will ask you if you want to purchase any other services. Please decline everything.


Homework | Week 1

  1. Register as a user of this blog. Post a comment to this blog post to let me know that you are registered and include the address (url) for your  ”wordpress blog”. Each week following this you will post a link to your homework on your own WordPress blog in the comments section of this blog .
  2. Purchase web hosting space from your chosen provider. My suggestion is to go with Bluehost for $4.95 per month.  Your domain name should be your first and last name .org. Bring your login information to class on Friday. You are required to purchase a domain name and web hosting space for this class. This is where you will post and maintain all of your work for the semester and through out the next four years at MSU.
  3. Fill out the student questionnaire.
  4. Create a del.icio.us account for yourself. Tag three Web Sites that focus on the Adobe Creative Suite (make sure they include information on Photoshop/Illustrator/InDesign, and write a note about why you think each one would be a good resource for this class. *Make sure you also add the tag: msuadobecreativesuite2014-02
  5. Create a Gravatar account. Take a photo of yourself, upload it to Gravatar and link it to your WordPress blog using the email you used to create the blog. You can use Photo Booth on a mac.
  6. Create a Flickr account for yourself. Upload the photo you took of yourself using Photo Booth. *Make sure you also add the tag: msuadobecreativesuite2014-02
  7. You will need access to the Adobe Creative Suite for homework assignments. You can come in to use the school computers or you can purchase Adobe Creative Cloud for $19.99/month (student discount).
  8. Go to DropBox and sign up for a free account. On your personal computer, install DropBox.

Week 1 Friday | WordPress

Week 1 – September 5th

OVERVIEW

  • Student Websites
  • Installing WordPress
  • Wp-Admin Panel
  • Selecting Themes
  • Adding Pages
  • Creating Posts
  • Adding Media

A Vision of Students Today


What is WordPress

WordPress is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL. Features include a plugin architecture and a template system. WordPress was used by more than 22.0% of the top 10 million websites as of August 2013.

This 5-minute video provides a brief introduction to the WordPress content management system and demonstrates why it is the most popular web publishing platform today.


Why Choose WordPress?

  • Free
  • Open Source: Easy to find, easy to use, easy to share

Findability is the end goal for any website. If a tree falls in the forest and no one saw it fall, did it really fall?

If you want to get indexed on Google, WordPress is a great way to do it. WordPress is built to be a magnet for search engines and other online indexes to the extent that if you don’t want your WordPress site indexed, you have to take steps to prevent it from happening.

WordPress has great search and share optimization. Plugins like WordPress SEO, AddThis, and Facebook for WordPress give any site the opportunity to be seen.

WordPress is easily findable, accessible, and provides shareable information. When reading or viewing content on a WordPress site, you are able to access and interact with that content through comments and RSS feeds.

  • Mature
  • Customizable: Easy to publish, easy to configure, easy to maintain

WordPress is the pinnacle of open source. It is built, evolved, and maintained by the people that use it and is in a constant state of forward-moving change. .

WordPress has undergone several fundamental changes that have made applications even easier to use and has become more powerful and diverse.

  • Easy to Maintain: Easy to build, easy to augment, easy to evolve

With the advent of themes, building a custom WordPress site from scratch takes less time than with any other platform. WordPress is a simple interface between the site owner, the database, and the end user.

  • Large Community

The Bottom Line

WordPress offers one of the best available solutions for most websites today. It’s a great tool to use and has both the ease of use and the advanced features to suit pretty much any need. And just when you think your need isn’t met, a theme, a plugin, or an extension is there to fill the void.


WordPress.com vs WordPress.org

WordPress.org is where you can download the latest version of WordPress for installation on your own domain. It is also where you can find documentation and support, and add-ons to customize your site.

WordPress.com is where you can set up a blog under the wordpress.com domain (yourblog.wordpress.com). The basic service is free and supported by advertising, premium services like your own domain name are available for a fee.


Sample Sites

Some people think they don’t want to use a system like WordPress because they don’t want there site to look like a “template” or a “blog”. Basic WordPress sites do share similar layouts but there are thousands of free and commercial themes that you can use and, if you want to get into more advanced techniques, completely customize. Here are some examples of sites that were built with WordPress:


Steve Jobs on Failure (1994)


Setting Up Your Website

  • This tutorial will guide you through the WordPress install on Bluehost.
  • Go to Bluehost.com and click on Control Panel Login
  • In the ACCOUNT LOGIN area, enter your url and password
  • Click login

Installing WordPress with MOJO Marketplace

  1. Navigate to the MOJO Marketplace section inside cPanel.
  2. Click the One-Click Installs icon.
    One-Click Installs
  3. Choose WordPress.
    WordPress Icon
  4. Click the Start button.
    Start a brand new installation
  5. Choose the domain name to install it to.
    Select installation domain

    In the field next to the doamin, you can enter a subfolder such as ‘blog’ or leave it blank if you want the site’s main page to be the blog.

  6. Read through the license and service agreements and check the boxes.
  7. Select the Install Now button.
    Install Now button 

Using WordPress: Log in the Admin Panel

To access your WordPress administration panel, you will (in most cases) add “wp-admin” at the end of your domain name in your web browser.

For example: http://www.yourdomain.com/wp-admin/

When you installed WordPress through the one-click install on Mojo, they gave you  a username and password. Use that to login to your WordPress admin panel.

If you are successful, you will see a screen similar to the one below:

wp_login


The Dashboard

This video provides an overview of the WordPress Administration Panel which provides access to the functions and features of your WordPress-powered website.

Covered in this video:

  • Familiarizing yourself with the WordPress Dashboard.
  • How to customize the WordPress interface just for you.
  • Hide Dashboard modules you rarely use.
  • The collapsible navigation menu and functions.
  • The default modules that are available to users.
  • How to use the QuickPress module to quickly create a new Post.


Using WordPress: Installing Plugins

(WordPress Plugin) Plugins are pieces of code created with the purpose of expanding the functionalities of a software, in this case of WordPress. There are literally thousands of WordPress plugins already created, solving a wide range of problems and needs.

These steps will help you install and select a WordPress plugin for your blog.

    1. Inside the WordPress Dashboard, select the Add New link from the Plugins menu.

 

    1. You can search for a plugin based on name, category, or function.
    1. Click the Download link to the right of the plugin you’d like to download.
    1. Click the Install button for your desired plugin.
    1. Your plugin is now available. Click on the ‘Activate’ link to activate it.

 

Your WordPress blog has now incorporated the plugin you activated.


Design, Sustainability, Change 

A Little Inspiration.


INTRO TO WORDPRESS THEMES
What is a Theme?
A theme is simply collection of files that allow you to “skin” your WordPress site. A theme is comprised of template files, that determine the components that will go on each type of page, and a styles sheet or sheets that control fonts, colors and layout. Themes are stored in wp-content > themes.


A WordPress “theme” generally consisting of:

  • One or more CSS style sheets
  • Any necessary images that comprise the theme graphics
  • A collection of PHP/HTML “template” files
  • A thumbnail image representing the theme in the Dashboard

A typical WordPress theme contains a dozen or more files, but only a few are technically required.

These files work together as a package to define the entire look and feel – and sometimes behavior – of a WordPress site. Themes are completely decoupled from site content, so a site owner can apply a new theme with the click of a button and have all content on their site take on a whole new appearance.

This collection of files is contained in a folder that lives in the wp-content/themes directory on your web server. When an administrator visits the Appearance | Themes section of the WordPress Dashboard, all valid theme folders in that location will appear. Any valid theme can be applied to the site content by clicking the Activate link below its name.

Your WordPress install comes with two themes installed, but there are thousands of third-party themes that you can install yourself. You can browse them on the WordPress.org site or Google “free WordPress themes”.


CHOOSING THEMES
When choosing a theme, make sure that it is compatible up to your version of WordPress ( the current version is 3.5). Many new features were introduced in WordPress 3.0, and you want to make sure to take advantage of them.

RESPONSIVE THEMES

A responsive WordPress theme is a theme built to adapt it’s design to tablets and smartphones, creating a great user experience. Previously, dedicated WordPress mobile themes was the best option, but in 2013, responsive WordPress themes are the hot new trend. With the rapid growth of smartphones, tablet computers and Internet enabled gadgets, we have to take mobile web design seriously and ensure that your theme is can be viewed easily on any mobile device.

Responsive web design allows your website content to be displayed correctly by adjusting the layout to accommodate screens of different orientation and sizes. From a branding perspective, responsive themes allow you to maintain one theme and provide one consistent look and feel no matter how visitors access your website. This is a huge money saver for clients as there is not longer the need for mobile versions of websites. To test responsive layouts, check out some responsive web design tools.


Checking Your Themes
A quick note on downloading and installing themes. There are thousands of FREE and PREMIUM themes out there and not everyone is as honest and straightforward as we hope they’d be. It’s good practice to check your themes prior to installing them.

Take a look at: TAC (Theme Authenticity Checker)

Scan all of your theme files for potentially malicious or unwanted code. Be aware of advertisements or dangerous JavaScript inserted into legitimate themes by third party theme download sites.

Future versions will allow to check for other theme vulnerabilities. CHECK YOUR THEMES BEFORE INSTALLING THEM!



Installing Themes
There are two ways to install a new theme, through the WP admin tools, or by downloading and uploading it into the themes directory. Which you use will depend on how you FTP into your hosting account.

INSTALLING VIA ADMIN

From the admin, go to Appearance > Themes

To install a NEW theme that is not currently available through your WordPress panel, do the following.

  1. Go into your ADMIN panel
  2. Go to APPEARANCE
  3. Go to THEMES
  4. Click on INSTALL THEMES
  5. Click on UPLOAD and upload the theme that you’ve already downloaded from the web and saved to your hard drive
  6. Click on BROWSE and UPLOAD the theme
  7. Click on INSTALL and then PREVIEW

THEME OPTIONS

Some themes have an options panel that allow you to further customize appearance and layout. What the options are will vary from theme to theme. “Paid” themes usually offer you more options and more documentation.

 


Homework | Week 1 Friday

    1. Install WordPress on your web hosting space. Each week you will post a link to your homework on your own WordPress site in the comments section of this blog.
    2. Go to your wp-admin panel and install a theme (you may not use the default theme) under appearances, select themes and choose a new theme. Add at least SIX plugins.  Add widgets, fill out the personal info on the site.
    3. Add the following PAGES to your website:
      • About
      • Contact
      • Classes
      • Adobe Creative Suite
    4. On the ABOUT page, add a photo of yourself (upload the photo to your Flickr account and link it from there), an artist statement and a bio or resume.
    5. On the CONTACT page, add a contact plugin form. Try searching for Contact Form 7 in PLUGINS under POPULAR.
    6. ON the CLASSES page create a list of all your MSU fall 2014 classes.

    On the ADOBE CREATIVE SUITE page, create a list with the following information:

    • Week 1 Homework Wednesday(make this bold)
    • Week 2 Homework Monday (make this bold)
    • Week 1 | Adobe Creative Suite (this link should be a LINK that corresponds to the WordPress post)
    • Week 2 Wednesday | WordPress (this link should be a LINK that corresponds to the WordPress post)
      1. Create a POST titled Week 1 Wednesday Homework, ADD the categories: Adobe Creative Suite and Week 1 Wednesday Homework. Make the Adobe Creative Suite category the parent category. In this post, list links to week 1 homework including:
      • Delicious
      • Flickr
      • Website URL

      Same procedure for Week 2 homework.

      1. Create a POST titled Week 2 homework
      2. Create a POST titled Week 2 Wednesday Homework.  ADD the categories: Adobe Creative Suite and Week 2 Wednesday Homework. Make the Adobe Creative Suite category the parent category. In this post, list links to week 2 homework including:
    • List the PLUGINS you added to your site
    • List the WordPress theme you chose
    • List any widgets you added
    • Website URL
    • List your Delicious url
    • List your Flickr url
      1. On your del.icio.us account tag three Web Sites that focus on WordPress, WordPress themes or anything we learned in class today, and write a note in the Delicious comments section about why you think each one would be a good resource for this class. ALSO, add week 2 in your comments section so that I can keep track of your comments. *Make sure you also add the tag: *Make sure you also add the tag: msuadobecreativesuite2014-02  AS WELL AS add additional tags.

Montclair State University Adjunct Assistant Professor Najlah Hicks