Smart Photoshop

Animated Banner for Florist Site

Filed under: web-graphics — admin @ 1:49 pm

Creating an animated banner for florist site

Start by creating a file of banner size.

Insert an image of flowers.

Create a rounded rectangle using rounded rectangle shape tool. Reduce the opacity to 80%.

Insert a cutout of a flower.

Insert another cutout and place on the left side of the banner.

Type company name over the rounded rectangle.

Type other text details in separate layers.

Click add vector mask from the bottom of the layer palette

Create a rectangular selection using rectangular marquee tool. Press Ctrl+Alt+D to feather the selection. Click the mask thumbnail. Fill the selection with black color. Repeat this steps for the other two text detail layers.

Insert some small flowers.

Open animation window. For the first frame hide the three text detail layers.

Duplicate frame. Move the small flowers to the right. Move the mask of the first text layer to the right so that it’s completely visible.

Click tween button form the animation palette. Apply settings as shown.

Duplicate the last frame and hide the small flower layers for this screen.

Repeat the above steps for rest of the text detail layers.

Press Ctrl+Alt+Shift+S to save an optimized animated GIF.

Comments (1)

Creating a Girly Heart Header

Filed under: web-graphics — admin @ 2:53 pm

Creating a Girly Heart Header

In honor of Valentine’s Day - I wanted to offer a photoshop tutorial on making a cute and girly - love heart header.

1. Find a good heart image or use the pen tool to create something like this.

2. Apply these layer styles to it.

3. Use the rectangular marquee tool to add different strips of a varity of shades of pink and purple to the background.

4. Now add small versions of the heart in step 1 except make them a light gray. Scatter them randomly throughout.

5. Now add the navigation to the left hand side. We used a dark gray color and the font impact.

6. Repeat step 5, except with white font. Nudge the layer down and to the right two pixels to get a shadow effect. And your navigation menu is all complete!

Comments (0)

Art Gallery Navigational Header

Filed under: web-graphics — admin @ 12:57 am

Creating a navigational header for an art gallery

Start by creating a new file of header size. Apply gradient to the background layer.

Create a big ellipse using elliptical shape tool. Double click the layer to open layer style window. Apply gradient layer style with the gradient shown.

Insert a cutout of a tree.

Duplicate layer. Enable lock transparent pixels from layer palette. Press Ctrl+T. Right click the layer and select distort. Fill it with black color. Adjust nodes to create a perspective shadow.

Reduce the opacity to 50%.

Create a circle using elliptical shape tool. Move this layer below all the layers in layer order in layer palette.

Double click the layer to open layer style window. Apply layer style with the settings shown.

Create a rounded rectangle using rounded rectangle shape tool. Press Ctrl+T. Right click the layer and select distort. Adjust nodes to get the shape as shown.