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


INTRODUCTION
If I told you I saw an image of President Obama shaking hands with Osama bin Laden, what would your response be?
  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:
Open a Word document and Save As: Web Design Vocabulary /Do Now
  1. Define:
    1. Adobe Photoshop
    2. photo manipulation
    3. Visit the Curtis High School web site. What is consistently the same each page?
    4. Navigation Bar
    5. Header
    6. 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.
  2. Now Open up Photoshop. Here's a mini toolbar reference image below:
PS_toolbox.jpg



ASSIGNMENT 1: Create a header image
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:
banner.jpg
Requirements:
  1. Create a new image 900 x 100 pixels and leave all the other defaults. Title: Banner new_image.png
  2. Select the background layer in your layers window
    1. Select a foreground and background color color_swatches.png
    2. Select the Paint Bucketpaintb.png tool (it may be hiding behind your Gadient tool gradient.png - right-click to find it)
    3. Click on your image to change the background to your selected color.
  3. ## Click on the Horizontal Type(T) tool type.pngand type your full name on the image. Use the blending options on that layer to add special effects to the text.
    Find an image on Google that relates to something that you are interested in (Soccer, music, cars, etc.) and save it to your folder.
  4. Open that image in Photoshop (File --> Open). Drag down the tabs at the top to display both images at one time.
  5. Use the Magnetic Lasso lasso.pngtool to select what you want and remove the unwanted background
  6. Use the MOVE toolmove_tool.png to Drag and drop it onto your image. It should automatically appear on a new layer.
  7. Use the Transform tool (<ctrl> + t) to resize it.
  8. Use the Move toolmove_tool.png to position it in the corner.
  9. Use the Eraser Tool 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.
  10. Use the Blur tool blur.pngto soften/blur the edges so it is not so apparent where the image begins and ends.
  11. 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.opacity.png
  12. Go to File-->Save as: My Banner & go to File-->Save for Web, save as a .jpg
  13. 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
layers-example.jpg

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:

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


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?

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
Photoshop Layout Exercise1 - Create a layout for the School of Visual Arts
  1. Visit the School of Visual Arts (SVA) web
    site
  2. What shapes do you see?
  3. Take a piece of paper and draw the shapes as you see them on the page.
  4. 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
These areas are also know as: Containers
Compare your page layout with your neighbors. Are they the same?


Define the following words:

  1. mockup (add them to your vocabulary-do now document)
  2. prototype
  3. fixed
  4. variable
Start Photoshop Mockup:
  1. In your web design folder, create a new folder and 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)
  6. Make sure your ruler is on.
  7. 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.
  8. Use the rectangle tool to define that areas of the SVA web page's layout
  9. Use the paint bucket tool to fill each area with a different color
  10. Use the Type tool(T) to label each area and define the width x height of each area.
  11. Go to File/Save to save this image as: SVA Layout in the SVA folder
Photoshop Layout Exercise2 - Create a layout for the Enlightened Design site
  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