Photoshop CS3 Extended
This series of lessons are designed for web design students that are ready to create their own custom logos and design elements such as background images, rollover buttons, and flash movie components.
Lesson 2: Edit and Optimize images for the Web.
Learn to alter images for use on the Web.
You will create two versions of your custom logo as images that are ready for the web. Try to recreate the example, or your own unique logo.
| This image is not transparent .JPG | This image is transparent .GIF |
|---|---|
 |
 |
Have Fun! -Mr. Fisher
Step One
- Open Photoshop document "logoOne.psd"
- Make any changes you want before you go to step two
Step Two
- Save (Ctrl +S)
- On the Menu Choose File >> Save for Web and devices.
- In the pop-up window select: JPEG, LOW
- Look at the image, it should have lost quality.
- Increase the Low to MEDIUM, it should look better.
Step Three
- Check the file size and download time in the bottom left corner of the pop-up window.
- Do not save an image larger than 25 K or more than 10 seconds @28.8
Step Four
- Click the SAVE button
- Save your image as "logoOneJPG"
- Add your image to a web page using notepad or Dreamweaver
Step Five: Save an image with a transparent background
- Open logoOne.psd
- Hide layers that are not part of your logo (click the eye next to a layer)
- Use the magic wand tool to remove "white fill" or other colors from your layers
- Don't delete any of your logo! If you do use "Ctrl+Z" to undo the mistake
- When you see the gray and white checkerboard those areas are transparent.
Step Six
From the menu select File > Save for web and devices
- Select GIF
- Make sure the image is under 25K and less than 10 sec. @28.8
- Click SAVE and name the images LogoOneGIF
- Add the image to a web page using notepad or Dreamweaver
Great Job! You have learned the basic skills required to create a custom logo that is ready to be published to a web site.
Skills You have Acquired:
- Create and modify shapes
- Create and modify text
- Apply styles to text
- Apply effects to shapes
- Save PS documents as images (.jpg and .gif)
All skills will be tested on the Quiz! Go create logos is PS!
Advanced Ideas
- Use real photos in your next logo
- Make sure your logos are appealing, interesting to look at, and easy to read
- Apply multiple effects (fx) and try all the styles so you know what they look like
- Have fun creating with Photoshop