• Course Information
• Readings
• Schedule
• Assignments
• Resources
• Technology
• Errors and Feedback

 

Unit 2: Creating images in Photoshop


  1. This unit includes practice activities and an assignment (#1) described on the Assignments link. The purpose of the practice activities is to teach you some of the most important Photoshop techniques for image creation and to get you to consider some fundamental graphic design principles.
    • Create your own version of the NASA banner image using images that you gather from the Internet
    • Using images that you have created, design a banner page that will appear on every page in your website
    • Movie showing basic Photoshop layout techniques
  1. Creating images in Photoshop
    • In Unit 1 we learned how to manipulate and edit existing images using various Photoshop tools. In this Unit we will learn how to create images from scratch by combining images and text to create an aesthetically pleasing design.
    • Working with color
      • Do you have trouble selecting colors that will work well together on your site? Use Kuler from Adobe to identify perfect color combinations.
    • You can download a demo photoshop file to see how I set up my project. Warning! This file is large (i.e. 33MB)! When you have downloaded the file you can deconstruct the image.
    • Save images to an "images" folder. I selected 1 background and 5-8 foreground images from the following websites:
    • Plan your design
      • On paper, sketch a template for the main areas of the banner that you will include on your website.
      • Example
    • Setup your file (for practice my file is 2200X500; you will probably use a smaller banner for your website)
      • Size: 1000 x 500 (note: use 72 dpi for all web images).
      • Turn on rulers (View > Rulers). Make sure you have 'snapping' turned on: (View > Snap). What is the benefit of snapping?
      • Add Guides to help you to layout your screen (make sure View > Snap to > Guides is turned on) and make spacers between images.
      • Use the Marquee tool to measure areas to get exact image dimensions; view the dimensions on the Info panel; make a note of the dimensions you want for each of your images
    • Add a background
      • Find a large image that you want to us as a background. Open image (in a new file) and use the cropping tool to crop 1000 X 500 pixels. Note that you can set the exact pixel dimensions for the cropping tool.
      • Drag your background layer into your main file (use the Move tool) and place appropriately on stage
      • You may want to deemphasize the image by desaturating or lowering its opacity
    • Open each of you images you plan to incorporate into the banner in a new file
      • Crop each image to its desired size then drag the layer into the main file and place as appropriate
      • Double click on a layer to open Layer Styles-- select a Drop Shadow and Stroke for each image. Set options for each feature.
    • Add a new layer as a text background
      • Select the pixel dimensions with a Rectangular Marquee too and Fill with paint (Edit > Fill... or Shift-F5)
    • Add a new layer for text
      • Select the text in a layer to change its color.
    • Change the Canvas size if you want to increase the width of the image
      • Set to 1300 x 650
    • You should take some time to read about basic graphic design principals
  2. Movie showing how to upload your files to a server.