Photoshop Backgrounds, Buttons, Banners

1
Photoshop Backgrounds, Buttons, Banners
Animation In PowerPoint Presentations
2

• Backgrounds
• Offset foreground objects making them clearer
• Provide visual continuity and support
• Break up the monotony of a static white
  background

3

• Backgrounds can be found in
• text boxes (like this one)
• graphics
• patterns
• table cells
• frames
• windows
• Web sites

4
Backgrounds can be single images, single colors
or they can be repeated (tiled) to fill up any
space. Tiled backgrounds can be square,
rectangular, or single pixel rows or columns.
5

• Making Backgrounds in Photoshop

6

• We will make all of our backgrounds in Photoshop.
  
• Using Photoshop we can create a wide variety of
  backgrounds.
• Use GIF files for graphical elements and JPG for
  photo-realistic or highly graduated elements.

7
Step 1 Use your single row selection tool to
select an area.
Step 2 From your pull down menus, select edit
then copy to make a copy of your selection.
8
Step 3 Create a new file (left) then name your
file (right). When you copy an image file
Photoshop will remember the size of that file.
Then when you create a new file the size (above,
here 600 x 1) will match the last image file you
copied.
9
Step 4 In the file menu, use the Save for Web
command.
Step 5 This will open your Save for Web window.
Here I am saving the single pixel row of the sky
of the previous slide. Notice I am saving this as
a JPEG because the sky has a high level of
graduation.
10
Step 6 Once you tell it to save, you will get
your Save Optimized As window. You can choose
where you want to save (here I am saving to the
Desktop) and what you want to call your file.
11
Now you are ready to use this file to create a
background. We will apply these backgrounds to
PowerPoint in these examples, but keep in mind
these backgrounds and techniques cross over to
Web projects easily.
12

• Using Backgrounds in PowerPoint

13
For slide, shape, or text box background changes,
use the Format pull-down menu (right) or control
click on what you want to format and then select
the formatting option from the pop up menu (below
pics).
Format Menu (above, highlighted choices vary with
selection)
Control Click (right click PC)
14
We can, of course, use a single image as a
background. Be cautious of using primary graphics
in the secondary position of background. Use a
blur, filter, or masking effect to dull down
primary images when using them as backgrounds.
We can also take small pieces from much larger
images to create backgrounds (like this text
box).
15

• Making Buttons and Banners In Photoshop

16
Notice the advantages in text and layer effects
here. PowerPoint has made great strides in this
department, but Photoshop is the king. Refine
most of your images with Photoshop and your
effort will show. On this page the textures are
patterns taken from a scan of a shirt and then
used to make the buttons and banner.
Backgrounds and layer effects can be applied to
buttons and banners in Photoshop and inserted
into PowerPoint.
17
Step 1 Make a rectangular selection of an image.
Then go to the Edit pull-down menu and select
Define Pattern. This allows you to fill any
selection (rectangular or otherwise) with this
pattern.
18
Step 2 Create a new image that is about the size
of your button. My image dimensions are 150 x 38
(pix W x H).
Step 3 Then create a selection to fill. Here
(left) I have made an elliptical shape using the
Elliptical Marquee tool. Also notice I am using
my guides and rulers to keep everything centered.
Step 4 Command click (above) or use the Edit
pull-down menu (above-left) to get to your Fill
command.
19
Step 5 The Fill window (left) will prompt you for
what you want to fill your selection with. Here
(below) we are filling with our shirt pattern.
Remember, all of your patterns are defined from
rectangular shapes, but you can fill any
selection with a pattern. Your pattern will tile
to fill objects larger than itself.
20
Step 6 Layer Effects are being applied here to
the layer with the ellipse in it. Layer Effects
can be applied through the Layers window (lower
right). In Photoshop 5.5 you can also change
layer effects through the layers pull-down menu.
21
Step 7 Layer Effects are being applied here to
the text layer. Here I have simply embossed the
text to give it better separation from the
ellipse. Save Optimized As and you have a button!
These effects can be applied to anything. We made
buttons here but it could be a banner, text box,
or any other design element.
22

• Using Buttons and Banners in PowerPoint

23
Now lets use some of these elements. We can use
buttons in PowerPoint in much the same way we use
buttons online. Click any of the buttons on the
left to move through a gallery of sea-life
images. Click on the banner at the bottom to
return to the beginning of this section.
Exit
24
Exit
25
Exit
26
Exit
27
Exit
28
Exit
29
Exit
30
Exit
31
Exit
32
Exit
33

• Creating Animations in ImageReady

34
Animated GIF files are GIF files that contain
multiple images that can be displayed in sequence
to form animations.You can set the delay between
frames as well as the decay type. On the left
you can see the frames that make up an animated
banner. Below you can see the Animation window in
ImageReady. Each frame is visible and the delay
is below each frame. You can add, move, or remove
frames from this window.
35
Step 1 With our original, layered psd file in
Photoshop open, our first step is to Jump To
ImageReady. This is done by clicking on the
bottom icon in the toolbar (left).
36
Selecting individual layers in individual frames
allows you to add motion and fades. Just change
each layer a small amount, create your next
frame, and repeat until you have completed your
animation.
Play Frame
Add Frame
Frame
of loops
Delay
Animation Window (above) notice 0.5 delay times.
37

• Using Animations in PowerPoint

38
One way of using animations is to incorporate
animations into your banners, buttons, and design
elements. Here I took the banner from earlier and
animated the individual elements to give it an
active feel. Animating this brings attention to
the banner element, and provides an anchor for
all Joels Aquarium areas to come. We could
also animate the buttons on this page if we
wanted to draw attention to our navigational
elements.
39
Animations can also be used to show processes.
The animation below is a director writing ready
to sound up on a script. The animation on the
left is an audio operator sounding up a
microphone.
These animations are created by grabbing 6 frames
per second of a standard video (30 fps).
40

• Conclusion

41
Now you are ready to create backgrounds, buttons,
banners, and animations in Photoshop. These
skills will carry over directly into other
projected media (WWW, TV). Remember to always
save your original psd files with layers intact
so you can reuse your graphics.
42
(No Transcript)