Welcome to Fiery Darts. We are striving to be your home for learning what you can about Adobe Photoshop by providing uniqe, timely and regular tutorials. Please take a moment to bookmark our site.

Creating a Web Banner With Magnifying Text Effect

Filed under: Web Graphics — Fiery Darts @ 2:29 pm

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.
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.
Create a web shape using custom shape tool.
Select the layer and change the layer mode to color dodge and opacity to 50%.
Type "searching for best deal" in a new layer.
Create a magnifying glass from custom shape tool.
Apply layer style as shown.
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.
Hide the search shape layer and create a circle below the text layer.
Press Ctrl+Alt+G to make clipping mask.
Unhide the search shape layer.
Hide these layers and in a new layer type a new line of text and add company logo too.
Open animation window. For first frame hide the second line and logo and unhide magnifying glass, first line and masked text.
Select the magnifying glass and masked layer together.
Duplicate frame and move elements as shown.
Create successive duplicate frames and add motion as shown.
Similarly create back motion of the magnifying glass and masked layer.
In 14th frame we hide these layers and unhide second line and logo.
Duplicate the frame and hide logo and second line to create blink effect.
Adjust delay duration of frames as shown in the image shots.
Press Ctrl+Alt+Shift+S and output an optimized animated GIF.

Creating a Vine/Green Text Effect

Filed under: Text Effects — Fiery Darts @ 6:05 pm

Creating a Vine/Green Text Effect
Start by typing the text in a new file.
Right click the layer rand select rasterize. From filter menu select liquify.
Select forward warp tool.
Drag the corners of the text to create roots and branches.
Create a leaf using custom shape tool.
Add more leafs to the text.
Apply the following layer style to the text.
Fill the background with a nice color.

Creating a Navigation Header

Filed under: Web Graphics — Fiery Darts @ 10:03 am

Creating a Navigation Header
Start by creating a rounded rectangle in a new file.
Apply gradient overlay with the settings shown.
Enable subtract from shape area at the top bar and draw a circle using elliptical shape tool.
Create a light and a dark color line as a divider.
Create a rectangle and apply following layer style .
Select the rectangle using direct selection tool. Using add Anchor point tool add two anchor points at the each side of the bottom of the rectangle. Delete the corner nodes of the bottom and join the new anchor points using pen tool. This will create a button which is rounded at the bottom.
Create a rectangle below the divider lines. This will serve as a button bar.
Apply gradient overlay with the settings shown.
Place the button over this bar.
Duplicate this button 4 times.
Scale down the buttons and place it to fit the whole button bar.
Create a triangle using polygon shape tool.
Press Ctrl+T and squeeze it vertically.
Duplicate it and place over all buttons.
Type your text links on all buttons.
Insert a cutout of a relevant image and move it below all layers.
Insert the company logo and place it on the left of the header.
Type some categories to the right side of the header.
  Next »