Photoshop

Short videos on how to create a logo in Photoshop Video1 on how to create a clean logo in Photoshop Logo video2
 * Introduction to Photoshop/ **** Creating and Modifying Images in Adobe Photoshop **

**INTRODUCTION** If I told you I saw an image of President Obama shaking hands with Osama bin Laden, what would your response be? Open a Word document and Save As: **Web Design Vocabulary /Do Now**
 * 1) Do a search on "Photoshopped images"
 * 2) Explain why [|these images] may not be believable.
 * 3) [|View other images created in Photoshop.]
 * 4) [|View web site headers created in Photoshop]
 * 5) View examples of web site banners: [|Banners]
 * Practical Assignment:**
 * 1) Define:
 * 2) Adobe Photoshop
 * 3) **photo manipulation**
 * 4) Visit the Curtis High School web site. What is consistently the same each page?
 * 5) **Navigation Bar**
 * 6) **Header**
 * 7) Based upon the general definition of a header, what would be in the header area on a web page? Remember, it has to be something that would exist on every page of the web site consistently without changing for site recognition purposes.Define: **Web Page Header** also know as a **logo** or **banner**.
 * 8) Now Open up Photoshop. Here's a mini toolbar reference image below:

**ASSIGNMENT 1**: **Create a header image** > **Find an image** on Google that relates to something that you are interested in (Soccer, music, cars, etc.) and save it to your folder.
 * Goal:**Create a personal header image
 * Objective:** Create an image named **MyHeader** for the header area of your personal wiki that has your name, a background and an image of something that relates to you.
 * Outcome****:** Example below:
 * Requirements:**
 * 1) Create a new image **900 x 100 pixels** and leave all the other defaults. Title: Banner [[image:new_image.png]]
 * 2) **Select the background layer in your layers window**
 * 3) **Select a foreground and background color [[image:color_swatches.png]]**
 * 4) **Select the Paint Bucket[[image:paintb.png]] tool (it may be hiding behind your Gadient tool [[image:gradient.png]] - right-click to find it)**
 * 5) **Click on your image to change the background to your selected color.**
 * 6) ## Click on the **Horizontal Type(T)** tool [[image:type.png]]and type your full name on the image. Use the blending options on that layer to add special effects to the text.
 * 1) **Open that image in Photoshop (File --> Open). Drag down the tabs at the top to display both images at one time.**
 * 2) Use the **Magnetic Lasso [[image:lasso.png]]**tool to select what you want and remove the unwanted background
 * 3) **Use the MOVE tool[[image:dbutera-webdesign/move_tool.png]] to Drag and drop it onto your image.** It should automatically appear on a new layer.
 * 4) Use the **Transform tool** **( + t)** to **resize it.**
 * 5) Use the **Move** tool[[image:dbutera-webdesign/move_tool.png]] to position it in the corner.
 * 6) Use the **Eraser** Tool [[image:easer.png]]& **Zoom** tool (to zoom in and get a close up) to clean up any untidy areas to make it look professionally done and not sloppy.
 * 7) Use the **Blur** tool [[image:blur.png]]to soften/blur the edges so it is not so apparent where the image begins and ends.
 * 8) Fade it (change the opacity): click on the layer the image is on and look for the **Opacity** slide in the top right of your Layers window.[[image:dbutera-webdesign/opacity.png]]
 * 9) Go to File-->Save as: **My Banner** & go to File-->**Save for Web,** save as a .jpg
 * 10) If this image is for your wiki, logon to your wikispaces account, go to your site and then go to **manage/Settings Look & Feel**, scroll to bottom and look for Browse button to upload logo (banner image).

** ASSIGNMENT 2 - Create an image using the brush tool, text and special effects**
 * Goal:** Learn basic Photoshop tools and understand how layers work
 * Objective:** Create an image using additional Photoshop tools
 * Outcome:** The image below shown below with a background color, two circles, text and grasses each on their own layer.
 * 1) **[|Follow this tutorial.]** * **BUT** replace the word Layers with YOUR NAME!!!
 * 2) Save the image as: **Grasses** and put on your wiki


 * ASSIGNMENT 3 ** **- "Photoshop" an image - create a myth**
 * Goal:** Modify your own image using Photoshop and another image.
 * Objective:** Take a picture of yourself and/or a classmate OR images from the web and modify it
 * Outcome****:** A fake image you created - a myth
 * 1) Create an image named: **Myth** to be put on your wiki's Photoshop page. Examples of [|unbelievable or deceptive images] also known as "Photoshoped" images.
 * 2) Get a picture of a classmate, friend or family member OR an image for Google, open the image(s) in Photoshop. Save and open another image from the web to get body parts or a background location to create a comical or mythical image.
 * 3) Be creative!! For ideas, do a search on: "photo-shopped" images.
 * 4) If you needed additional assistance, watch a video: Go to your **MyComputer** icon on your desktop and look for the Network Drive: **331Public Drive/BUTERA/PHOTOSHOP TUTORIALS**/**Changing Heads**


 * ASSIGNMENT 4 - Photoshop lesson of your choice **
 * Outcome****:** An image of your choice
 * 1) Click on the link below and **do tutorial #26** or another of your choice:
 * []

@http://creativefan.com/easy-photoshop-tutorials/
 * Extra credit (10pts)** if you do another tutorial exercise from the link above or from this link::


 * ALL 5 IMAGES ABOVE SHOULD BE UPLOADED TO YOUR WIKI'S PHOTOSHOP PAGE AND LABELLED**


 * STOP HERE**


 * How do we use Photoshop to create a web page mockup? **

DID YOU EMAIL ME YOUR WIKI PROJECT PAGE address for credit??
 * Do Now:** You have a met with a client about a new web site and have determined the following requirements:
 * the pages the site will have such as: home, about us, products, services, contact, etc....
 * the basic color theme based upon some artwork provided for the header area of the pages
 * what might the artwork be?
 * we need to develop the home page, what needs to be done first?

**Photoshop Layout Exercise1** - Create a layout for the School of Visual Arts > [|site] These areas are also know as: Containers Compare your page layout with your neighbors. Are they the same?
 * Goal:** Learn how to create a web page layout.
 * Objective:** Create a web page layout in Photoshop and slice the main image up into separate images.
 * Outputs:** Put the following **two images** on your wiki's Project Page under the heading: **Site Mock-ups**
 * 1) School of Visual Art's (SVA) site mock-up image
 * 2) Enlightened Design site mock-up image
 * 1) Visit the[| School of Visual Arts (SVA) web]
 * 1) What shapes do you see?
 * 2) Take a piece of paper and draw the shapes as you see them on the page.
 * 3) Label the areas as such:
 * Main Menu Bar (also know as the Navigation Bar) 800 x 100
 * Header (where the name of the site is) 100 x 1000
 * Content 500 x variable
 * Sidebar (where there is additional news, references and events announced) 300 x variable
 * Footer (small, thin area where there is often copyright, web master, contact or date information) 800 x 80

Define the following words:

Start Photoshop Mockup: **Photoshop Layout Exercise2** - Create a layout for the Enlightened Design site
 * 1) **mockup (**add them to your vocabulary-do now document)
 * 2) **prototype**
 * 3) **fixed**
 * 4) **variable**
 * 1) In your web design folder, **create a new folder a**nd name it: **SVA**
 * 2) **Open Photoshop**
 * 3) Go to **File/New**
 * 4) Title: SVA
 * 5) **Width= 900 pixels, Height = 1000 pixels**, leave all the other default settings
 * Main Menu Bar (also know as the Navigation Bar)
 * Header (where the name of the site is)
 * Content
 * Sidebar (where there is additional news, references and events announced)
 * Footer (small, thin area where there is often copyright, web master, contact or date information)
 * 1) Make sure your ruler is on.
 * 2) Set your ruler measurement to pixels by going here: Edit > Preferences > Units & Rulers. You will see a pop-up screen and set your ruler & type measure to pixels.
 * 3) Use the ** rectangle tool to define that areas ** of the SVA web page's layout
 * 4) Use the **paint bucket tool to fill** each area with a different color
 * 5) Use the Type tool(T) to label each area and define the **width x height** of each area.
 * 6) Go to File/Save to save this image as: **SVA Layout** in the SVA folder
 * 1) Open Photoshop
 * 2) Go to **File/New**
 * 3) Title: Page1 Layout
 * 4) The image you are creating for the layout will be **Width=760 pixels and Height=800 pixels.** Leave all the other default settings.
 * 5) Now [|go to this page to see the Enlighten Design web page's layout] Scroll down to see the diagram of the page's mockup and follow the width and height definitions below the image. "Changes depending on content" = Variable
 * 6) Use the rectangle tool to define the areas of the page.
 * 7) Use the paint bucket tool to fill each area with a different color.
 * 8) Use the Type tool to label each area as shown and define the **width x height** of each area.
 * 9) Save the image as a .jpg under the name: **EDlayout**