The most versatile section of the Photoshop tutorials, it includes guidelines on drawing and editing of different objects in Photoshop.  Home Photoshop Drawing Techniques Stylish Banner for your Website

Stylish Banner for your Website


First of all we need to create a new document with the size of canvas 500x300 pixels and fill it with color of #2d164d.

Stylish Banner for your Website image 1

Then use the Rounded Rectangle Tool and draw the form bellow with any color.

Stylish Banner for your Website image 2

Then we use following layer styles for this layer: Gradient Overlay and Stroke:

Stylish Banner for your Website image 3

Stylish Banner for your Website image 4

And we get this:

Stylish Banner for your Website image 5

Then create a new layer over and merge it with the previous one to get all effects in one layer. Now we apply the Drop Shadow layer style to received layer:

Stylish Banner for your Website image 6

Get the effect which you may see at the picture bellow:

Stylish Banner for your Website image 7

Let's add some volume to our banner. In order to do this we use the Dodge Tool (130 px, Range: Midtones, Exposure: 25%.) and make darkening on left and right side.

Stylish Banner for your Website image 8

After that we load selection with Select > Load Selection, then create a new layer and use the Gradient Tool to fill selected part of the layer with the gradient from white to transparent at the top and the bottom of layer.

Stylish Banner for your Website image 9

Stylish Banner for your Website image 10

Then remove selection with Ctrl+D and then change layer mode to Overlay.

Stylish Banner for your Website image 11

And the last step for design of entire banner. We need to add some glare. In order for this we create a selection across the banner's form (Ctrl+left click the first button Layer Thumbnail in the Layers Palette). The use the Elliptical Marque Tool, hold down Alt and cut the piece of the selected area. You have to get the same result as on picture bellow.

Stylish Banner for your Website image 12

After that we use the Gradient Tool and fill the gradient from white to transparent on the new layer.

Stylish Banner for your Website image 13

Remove the selection by using Ctrl+D and change the layer mode to Overlay. Then apply Drop Shadow layer style for current layer:

Stylish Banner for your Website image 14

Get this one effect:

Stylish Banner for your Website image 15

Now we may add some information to our banner. In the beginning we may bring the tracery to our banner. For these purposes we may use these brushes. Load selection of banner again (Ctrl+left click the first button Layer Thumbnail in the Layers Palette), create a new one layer and put the print of brush into the selected area.

Stylish Banner for your Website image 16

Remove this selection with Ctrl+D and change the layer mode to Overlay, then set up opacity to 30%.

Stylish Banner for your Website image 17

Now we adjust the sharpness by using Sharpen Tool (Brush: 200px, Mode: Normal, Strength:50%).

Stylish Banner for your Website image 18

Now, I would like to add a picture. Let's use Google Pictures or sites of stock clip-arts. I found this one. Open image, separate it from background by using Polygonal Lasso Tool and copy it to our main canvas, make it a little bit smaller and rotate by using Ctrl+T.

Stylish Banner for your Website image 19

After that we're going to highlight the flower. For this effect apply the Outer Glow layer style for current layer:

Stylish Banner for your Website image 20

Get this effect now:

Stylish Banner for your Website image 21

Let's create a new layer and merge it with the previous one to get all effects in one layer. Now select the banner's form (Ctrl+left click the first button Layer Thumbnail in the Layers Palette). After that invert the selection using keys Ctrl+Shift+I and press Delete to delete everything abroad the banner.

Stylish Banner for your Website image 22

Now, remove selection with Ctrl+D. It's time to add the text information. Use the Horizontal Type Tool and type the string 'New Spa Saloon' with white color.

Stylish Banner for your Website image 23

Font we've used above is Avant Garde Gothic - commercial font. In this way you may use any other font if you don't have this one. Now apply to this text layer Drop Shadow layer style:

Stylish Banner for your Website image 24

Now we get something like this one:

Stylish Banner for your Website image 25

After that, type one more string like 'Click here to enter' underneath with the color of #80bb00 using the same style of layer.

Stylish Banner for your Website image 26

And the last thing what we need to do is add the name. Type the word 'AQUA' using white color.

Stylish Banner for your Website image 27

Apply the following Blending Options for this text layer: Drop Shadow and Outer Glow:

Stylish Banner for your Website image 28

Stylish Banner for your Website image 29

We should get the result of applying layer styles at the picture bellow.

Stylish Banner for your Website image 30

At this point our lesson is finished. I hope it was useful and interesting for you, do not feel shy to make experiments and you shall get great results. Good luck!

Stylish Banner for your Website Tutorial: Final Result



Author's URL: PhotoshopStar
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 "Stylish Banner for your Website"

Only registered users can write comment

Reader's comments