Category Archives: Classes

Week 14 | Monday | INDD

HOMEWORK | WEEK 14 Monday

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


#1 InDesign Major PROJECT PAGE

ADD the following list and complete the items below

  1. Research | Delicious
  2. InspirationPinterest
  3. Concept
  4. Low Fidelity wire frames
  5. High Fidelity wire frames
  6. SECOND 6 pages of your final project designed in InDesign

 


FINAL PROJECT: InDesign 12 Page Booklet | DEADLINES

  • Inspirations (must include a minimum of 20 annual reports or booklets for inspiration – Pinterest board) due | Monday | Week 14. 
  • First 6 pages of your layout in InDesign due on Monday | Week 14
  • Second6 pages of your layout in InDesign due on Wednesday | Week 14
  • Final critique on Thursday
  • Project due on 12.14.15
  • 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.

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
  • Research/Inspiration
  • Wireframes
  • Thumbnails of each page layout. (All layout on ONE page)
  • Full page layout of each page.
  • Your written description on your project page and in your DropBox folder.
  • All files in a folder with your name placed on your DropBox.
  • The final project (in PDF and InDesign).
Written Document – 400 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:

—center of interest

—unity

—contrast

—balance

—eye movement

—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 | Thursday | INDD


HOMEWORK | WEEK 13 Thursday

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


#1 InDesign Major PROJECT PAGE

ADD the following list and complete the items below

  1. Research | Delicious
  2. InspirationPinterest
  3. Concept
  4. Low Fidelity wire frames
  5. High Fidelity wire frames
  6. First 6 pages of your final project designed in InDesign

#4 PINTEREST BOARD FOR THE PROJECT 

ADD 5 ADDITIONAL PINS TO YOUR PROJECT BOARD

#5 ADD THREE DELICIOUS LINKS FOR YOUR PROJECT

FINAL PROJECT – DUE ON MONDAY OF EXAM WEEK


FINAL PROJECT: InDesign 12 Page Booklet | DEADLINES

  • Inspirations (must include a minimum of 20 annual reports or booklets for inspiration – Pinterest board) due | Monday | Week 14. 
  • First 6 pages of your layout in InDesign due on Monday | Week 14
  • Second6 pages of your layout in InDesign due on Wednesday | Week 14
  • Final critique on Thursday
  • Project due on 12.14.15
  • 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.

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

Research/Inspiration

Wireframes

Thumbnails of each page layout. (All layout on ONE page)

Full page layout of each page.

Your written description on your project page and in your DropBox folder.

All files in a folder with your name placed on your DropBox.

The final project (in PDF and InDesign).

Written Document – 400 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:

—center of interest

—unity

—contrast

—balance

—eye movement

—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 | Monday | INDD III

#1 DO NOW Layout I – Document Setup 14

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


#2 DO NOW Layout II – Paragraph Styles

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


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


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


#5 DO NOW:Layout V – Text Cleanup 18

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


#6 DO NOW:Layout VI – Check Spelling

Basic spell check, plus user dictionaries and multiple languages.


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


#8 DO NOW:Preflight & Package

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


#9 DO NOW:Print & Export

Basic printing options and PDF export.


HOMEWORK | WEEK 13 Monday

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


#1 DO NOW
Follow the videos you saw in class and complete the exercises. Post to you blog and to Flickr. Due Thursday 

#2 DELICIOUS
Tag THREE sites that relate to today’s tutorials.

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

#3 InDesign Major PROJECT PAGE

ADD the following list and complete the items below

  1. Research | Delicious
  2. InspirationPinterest
  3. Concept
  4. Low Fidelity wire frames
  5. High Fidelity wire frames

#4 PINTEREST BOARD FOR THE PROJECT 

ADD 5 ADDITIONAL PINS TO YOUR PROJECT BOARD

#5 ADD THREE DELICIOUS LINKS FOR YOUR PROJECT

FINAL PROJECT – DUE ON MONDAY OF EXAM WEEK


FINAL PROJECT: InDesign 12 Page Booklet | DEADLINES

  • Inspirations (must include a minimum of TEN annual reports or booklets for inspiration – Pinterest board) due | Monday | Week 12. 
  • Research (Delicious -5 tags) | due on Monday | Week 12
  • Hand drawn wireframes (low fidelity) due on Thursday | Week 13
  • Photoshop wire frames (high fidelity) of ALL your pages due on Thursday | Week 13
  • First complete layout in InDesign due on Monday | Week 14
    • Second complete layout in InDesign due on Wednesday | Week 14
  • Project due on 12.14.15

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.

  • 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 – 400 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 | Monday | INDD

#1 DO NOW –Text II – Threading

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

SAVE YOUR PROJECT AND UPLOAD TO YOUR HOMEWORK POST.
#7 THREADING


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


#3 DO NOW TYPE

Type I – Character Formatting

SAVE YOUR PROJECT AND UPLOAD TO YOUR HOMEWORK POST.
#9 TYPE I


DO NOW #4 Type II – Paragraph Formatting

SAVE YOUR PROJECT AND UPLOAD TO YOUR HOMEWORK POST.
#1O TYPE II


DO NOW #5 Type III – Tabs

SAVE YOUR PROJECT AND UPLOAD TO YOUR HOMEWORK POST.
#11 TYPE III


#6 DO NOW – Images I

– Placing and Fitting  11

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


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


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


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


#1 DO NOW
Follow the videos you saw in class and complete the exercises. Post to you blog and to Flickr. Due Monday 

#2 DELICIOUS
Tag FIVE sites that relate to today’s tutorials. ONE link related to each of the topics below:

  • Threading
  • Character Formatting
  • Paragraph Formatting
  • Tabs
  • Placing and Fitting

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

#3 CREATE A NEW PROJECT PAGE

Title it: InDesign Major Project

#4 CREATE A NEW PINTEREST BOARD FOR THE PROJECT 

ADD 10 PINS

#5 ADD FIVE DELICIOUS LINKS FOR YOUR PROJECT

FINAL PROJECT – DUE ON MONDAY OF EXAM WEEK


FINAL PROJECT: InDesign 12 Page Booklet | DEADLINES

  • Inspirations (must include a minimum of TEN annual reports or booklets for inspiration – Pinterest board) due | Monday | Week 12. 
  • Research (Delicious -5 tags) | due on Monday | Week 12
  • Hand drawn wireframes (low fidelity) due on Thursday | Week 12
  • Photoshop wire frames (high fidelity) of ALL your pages due on Thursday | Week 12
  • First complete layout in InDesigin due on Monday | Week 13
    • Second complete layout in InDesigin due on Thursday | Week 13
  • Project due on 12.14.15

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 – 400 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 11 | Thursday | INDD

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 

SAVE YOUR PROJECT AND UPLOAD TO YOUR HOMEWORK POST.
#1 PLACING TEXT

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
SAVE YOUR PROJECT AND UPLOAD TO YOUR HOMEWORK POST.
#2 MASTER PAGE

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

SAVE YOUR PROJECT AND UPLOAD TO YOUR HOMEWORK POST.
#3 10 MINUTE LAYOUT


#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
  • SAVE YOUR PROJECT AND UPLOAD TO YOUR HOMEWORK POST.
    #4 TEXT AND TYPE

#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)

SAVE YOUR PROJECT AND UPLOAD TO YOUR HOMEWORK POST.
#5 ADDING TYPE

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.

SAVE YOUR PROJECT AND UPLOAD TO YOUR HOMEWORK POST.
#6 PLACING

In-Design Resources

HOMEWORK | WEEK 11

Complete in-class Do Now’s

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

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

 

DELICIOUS

Add FIVE 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

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

Week 11 | Monday | Final PS

LEAVE A COMMENT

  • Link to your PROJECT PAGE

HOMEWORK

Major PS Project I | ITEMS DUE THURSDAY

  • RESEARCH – 3 MORE tags on Delicious with comments for each piece of research
  • INSPIRATION – Pinterest board titled: PS Banners – Pin 5 MORE images with comments for each inspiration
  • PHOTOSHOP Iteration showing AT ALL SIX COMPLETED banner AND one banner should be animated
  • WORD DOCUMENT 400 words
  • DROPBOX All PSD files on Dropbox
  • CRITIQUE 200 word critique response from today’s critique

 

Week 10 |Thursday | PS

LEAVE A COMMENT

  • Link to your HOMEWORK PAGE
  • Link to your PROJECT PAGE

HOMEWORK

Major PS Project I | ITEMS DUE MONDAY

  • RESEARCH – 3 tags on Delicious with comments for each piece of research
  • INSPIRATION – new Pinterest board titled: PS Banners – Pin 5 images with comments for each inspiration
  • PHOTOSHOP Iteration showing AT ALL SIX COMPLETED banner

 

Week 10 | Monday PS Major Project

Mini PS Project I DUE

Provide a link to your project page and DropBox


The 10 laws of Photoshop etiquette

01. Name your layers

Photoshop etiquette
The first rule of Photoshop club: name your layers

As boring and mundane as it sounds: name your layers. This is the most basic rule of them all – even if it’s a basic descriptive name such as ‘arrow’. There’s nothing worse then trying to find a certain layer within a file containing countless duplicates of ‘Layer Copy’.

Once labelled, organise these layers into group folders; allowing you to move and show/hide various large sections with ease. Layers such as backgrounds or other solid elements that you wish to be preserved should be locked to ensure they don’t get clipped or moved accidently.

Once you’ve completed your task it’s always worth having a quick glance over your file to filter out and delete any unnecessary empty layers (a good way to check if a layer is empty is pressing Command+T). You’d be surprised how many crop up.

02. Structure your files logically

Establish a simple naming convention that not only works for you, but would also work if your granny had to read it. Naming conventions such as ‘New’, ‘Latest’ or ‘’Website-Final’ won’t cut it and I can almost guarantee that it won’t be the ‘final’. An example of a good naming structure could be: ‘Name_Type_Size_Version’.

Why this structure? The company name is the first thing you see to identify the brand of the file. ‘Type’ illustrates what the file is intended for (Website, Email, etc). ‘Size’ is only applicable in certain cases such as banners, whereby you will have various sizes for example: ‘120×600’ or ‘300×250’, and finally ‘Version’, which could be simplied to ‘v2’, ‘v3’, etc, can be applied when making revisions to the original file. It’s good practice to save progress as another file, so you never overwrite previous revisions in case you need to refer back to them.

Seeing these variables in the file name is a smarter way to organize your files and will definitely eliminate any confusion for future reference.

03. Mask once

This refers back to point 02 and grouping layers: why apply 10 masks on 10 layers when you can group the lot and mask once? Work smarter, not harder!

04. Save your paths

The pen tool to a designer is like the lightsaber to a Jedi. The better you can use it, the more powerful your skills become. So once you’re done spending hours making the perfect clipping path be sure to save them all, otherwise you risk doing it again later in the job.

05. Don’t stretch text or images

Photoshop etiquette
Keep a sense of proportion – avoid the temptation to stretch

Never stretch buttons or vector shapes out of proportion; especially ones with rounded corners. Always redraw them to ensure you get the correct and consistent shape and style.

Never stretch images either; scale (down, never up) and transform but don’t stretch out of proportion. The same applies for fonts; kern, track and scale but whatever you do, absolutely do not stretch. Never. It’s very unprofessional.

Using smart filters where possible will ensure vector shapes can be made bigger and smaller with no distortions; handy to bear in mind when designing for mobile and retina displays.

06. Align your elements

A sign of a good designer is alignment. So switch on those rulers and get snapping: Snap to grid. Snap to Pixel. Snap to Layer. Snap to something! This ensures both that your designs are pixel perfect and that all elements within your design are easy on the eye.

07. Apply effects gracefully

Avoid the temptation to apply Color Overlay, Drop Shadow, Bevel, Outer Glow and Strokes onto each and every element of your design. It’s a tool job – know the difference between each one and when to use it. The main objective should be to use effects that complement the design and elevate your user experience. Subtlety is the key.

If you’re applying the same effect on numerous elements then its always worth copy/pasting the layer styles to ensure the effects are exactly the same. Also, be aware of the Global Lighting option and when this needs to be applied. When in doubt, turn it off, so you can customize each element and effect to your liking. Otherwise one day you’ll be wondering who changed all the styles in your design.

08. Collect up unused styles and images

Photoshop etiquette
Unused styles and images may come in handy later – so keep them organised

After experimenting with various styles or images, it’s good practice to put all these unused elements into one folder titled something like ‘Unused’. Have it switched off at the bottom of the original file (it can be deleted on copied revisions thereafter to keep file-size down).

This rule is an exception to the general rule about removing unused layers. It follows the same logic as keeping various little elements such as icons and small imagery handy just in case you need to make quick changes or additions.

09. Proof-read your designs

Most designers are bad at spelling, so check your text and grammar thoroughly. Ensure everything is spellchecked (and that includes the brief and copy provided) so you iron out any further kinks and your work can clearly be read and understood.

Try not to use text speak. Make it clear so your granny could read and understand it.

10. Make everything easy to find

Once you’re all done with your design, be sure to store it in a relevant location with all stock imagery, web files, and so on nearby – not in a random folder called ‘design files’ or ‘misc’. You’ll probably never find it again, and others certainly won’t.

Conclusion

All these Photoshop etiquette rules may seem like a pain, especially when you’re used to working in your own way. But if you get into the habit of sticking to them, they’ll save you a great deal more pain in the long run. Every little helps. And this acts as a good first step.

TUTORIAL #1 | DO NOW

UPDATED STEP BY STEP | HOW TO ANIMATE A BANNER AD

01. Setting up

Make a banner - step 1

Firstly we need to set up our document to the right spec. Navigate to photoshop, create a new document and int he new document dialog box ensure the dimensions are set to pixels and enter 728 for the width and 90 for the height end ensure that the color mode is set to RGB. As we’re working in pixels, don’t worry about the resolution. This is the standard size for a horizontal leader board banner ad.

02. Start designing

Make a banner - step 2

Now to start designing the ad. This is going to be a typography led design so I want to keep it bold and graphic using Creative Bloqs brand colors, but feel free to use your own colors and graphic elements to best suit your project.

First create a new layer in the layers panel and make a perfect square selection by holding shift whilst using the rectangular marquee tool. Now fill this with a color using the paint bucket tool and name the layer something suitable, in this case I’ve called it “color block 01”.

03. Fill the banner

Make a banner - step 3

Now hover over the square with the move tool and whilst holding alt, drag and duplicate the square so that it snaps to the edges of the original square. Snap will need to be turned on under the view menu.

Keep duplicating the squares until you’ve filled the banner, then select them all by holding shift and ensure that they’re centred in the document. Now simply delete every other orange square to create a simple square grid to base our design and animation on. With all the squares still selected hit Cmd+E to merge all the square layers.

04. Create type elements

Make a banner - step 4

Now to start creating the type elements. Hit T to bring up the type tool and draw a square over the first orange square. Make sure white is selected in the foreground color, type a character and select the font you’d like to use, the bolder and more graphic the better. Use the keyboard shortcut Cmd+Shift+. to quickly increase the point size.

Once you’re happy hit the move tool and then use the cursor keys to centrally position the type within the orange frame. Duplicate the text frame and repeat the process filling all the orange squares with different characters.

05. Duplicate and merge

Make a banner - step 5

Now duplicate one of the text frames and repeat the process in step 4 filling the white squares with orange type as shown above. Now we want to create a single layer out of the orange type and the white type.

To do this simply hold shift and select all the white type and then hit Cmd+E to merge the layers. Repeat this process for the orange type and name them something appropriate such as “white type 01” in the layers panel. This will rasterise the type and you won’t be able to edit it anyone so make sure you’re happy with it.

06. Create frames

Make a banner - step 6

Repeat this process until you have three sets of white type and three sets of orange type. Now we need to create two frames for the advert copy. Simply create a new layer, fill it with a color and then type your message, in this case ‘The 100 best free fonts’. Merge the color layer and type layer and then repeat the process for the final branding frame, in this case I’m simply using the Creative Bloq logo.

07. Animate the layers

Make a banner - step 7

Now that we have all the layers named up and neatly organised, its time to start animating them. If you’re using CS6 or above then navigate to Window>Timeline and then choose ‘Create Frame Animation’ from the drop down. If you’re pre CS6 then simply choose Animation from the Window menu.

Now turn all your layers off apart from the background, the colored blocks and the first set of orange and white type. Duplicate the frame and turn off the first set of orange and white type and turn on the second set. Repeat this process for the final set of type and create separate frames for the copy and logo layers as shown above.

08. Play with frame rate

Make a banner - step 8

You’ll notice that all the frames in the timeline are set to 0 sec and if you press play then they’ll cycle through at super fast speed. Now what we need to do is start playing around with the rate at which the animation cycles through each frame, bearing in mind that we’ll probably want to linger longer on the actual advertising message and branding.

This stage is very much a matter of trial and error but be careful to ensure that the final message(s) are left static long enough for the viewer to engage with the message. for the purposes of this job I’ve chosen a 0.75 second frame rate to cycle through the graphic letterforms and then 2 seconds per frame for the final messages.

09. Check the animation

Make a banner - step 9

To check your animation simply hit the play button in the timeline panel and ensure that ‘Forever’ is selected from the drop down if you want the animation to loop continually.

You may wish to experiment with some of the type cycling through at different frame rates or creating more sets of type so there are a greater number of character to cycle through. However, always keep in mind that the more complex the animation then the greater the file size will be. Check with your client what the maximum files size is as this can greatly affect the complexity and options you have when creating your animated banner.

10. Save as…

Make a banner - step 10

Finally, we need to save out the animation as a GIF. navigate to ‘Save for Web and Devices’ under the file menu and ensure that GIF is selected. Here you have a number of options but the main ones that will affect the file size are the number of colors you choose to use and the Lossy slide bar.

Play around with these settings and you’ll see an estimated file size beneath the image preview window. Bear in mind that there will be a loss of quality if you drastically reduce those two options but the flatter the colors then the better the results. For example, photographic work will noticeably suffer.

Now all that’s left to do is save out the file and drag it into your browser to test it.

HOMEWORK

Major PS Project I | ITEMS DUE THURSDAY

  • Create a new PAGE on your website called PS Major Project and place each item below on the project page
  • RESEARCH – 3 tags on Delicious with comments for each piece of research
  • INSPIRATION – new Pinterest board titled: PS Banners – Pin 5 images with comments for each inspiration
  • CONCEPT – List the nonprofit you will be designing the banners for and the “concept” behind each banner. Minimum of ONE paragraph
  • LOW FIDELITY – B/W  Sketches of each banner – total 6 banners
  • HIGH FIDELITY – Color Sketches of each banner – total 6 banners
  • PHOTOSHOP Iteration showing each banner size – simple page with just boxes/rectangles and the size of each banner listed
  • PHOTOSHOP Iteration showing AT LEAST ONE COMPLETED banner