Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Creating a Web Banner With Magnifying Text Effect

Creating a Web Banner With Magnifying Text Effect


Start by creating a new file. Use a standard banner size 468X60 pixels. Fill the background with a dark color.

image 1

Create a big circle and fill it with a different color. Place it in such a way so that only top portion of the circle is visible, that too on the bottom of the banner.

image 2

Create a web shape using custom shape tool.

image 3

Select the layer and change the layer mode to color dodge and opacity to 50%.

image 4

image 5

Type "searching for best deal" in a new layer.

image 6

Create a magnifying glass from custom shape tool.

image 7

Apply layer style as shown.

image 8

image 9

Duplicate the text layer and hide the original one. Change the font and size of the duplicate text layer. Try to use a bold font.

image 10

Hide the search shape layer and create a circle below the text layer.

image 11

Press Ctrl+Alt+G to make clipping mask.

image 12

image 13

Unhide the search shape layer.

image 14

Hide these layers and in a new layer type a new line of text and add company logo too.

image 15

Open animation window. For first frame hide the second line and logo and unhide magnifying glass, first line and masked text.

image 16

Select the magnifying glass and masked layer together.

image 17

Duplicate frame and move elements as shown.

image 18

Create successive duplicate frames and add motion as shown.

image 19

image 20

image 21

Similarly create back motion of the magnifying glass and masked layer.

image 22

image 23

In 14th frame we hide these layers and unhide second line and logo.

image 24

Duplicate the frame and hide logo and second line to create blink effect.

image 25

Adjust delay duration of frames as shown in the image shots.

image 26

Press Ctrl+Alt+Shift+S and output an optimized animated GIF.

Creating a Web Banner With Magnifying Text Effect Tutorial: Final Result



Author's URL: Fiery Darts
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Creating a Web Banner With Magnifying Text Effect"

Only registered users can write comment

Reader's comments