We develop design for a site template in Photoshop

In this tutorial, you will learn how easy it is to create a design with transparent buttons for a site template.

Final result:

We begin our lesson with creating a new document with a size of 960 x 900 pixels. I set the foreground color to # 141414, then taking the tool PaintBucketTool (Fill) clicked once on the image.
I took the tool BrushTool (Brush), and, choosing a soft round brush, painted on the new layer three large dots on the image, using the following colors: # a864a8, # ed1c24, # 662d91.

Note that the brush size needs to take 600 pixels.

Then select the filter in the menu Filter > Noise > Addnoise (Filter-Noise-Add Noise).

I used the following parameters:

Your template will look like this:

Then select Filter > Blur > MotionBlur (Filter-Blur-Blur in motion).

In the filter settings window, set the angle to 90 degrees, the offset is 998 pixels.

As you can see, it turned out to be quite easy to create such a beautiful background for our site. That’s how it should turn out.

Create a new layer (you can press CTRL + SHIFT + ALT + N for this).

Take the tool again BrushTool (Brush), set the foreground color to white. I again chose a soft round brush of large diameter.

Then use this brush to draw a large spot on the image.

Change the blending mode of this layer to Overlay (Overlap).

Now let’s start adding details to our template. We will create a navigation bar. To do this, take the tool RectangleTool (Rectangle) and draw a rectangle shape at the top of the template.

Then i took the tool RoundedRectangleTool (Rectangle with rounded corners) and set the parameters to a radius of 6 pixels.

I turned on the visibility of the grid, because I want to make an exact alignment of the elements in the subsequent steps (for this, select in the menu View > Show > Grid – View-Show-Grid).

With the tool RoundedRectangleTool (Rectangle with rounded corners) create three rectangles as shown below.

Now for all created layers with rectangles, add the following layer styles (put Fill 10% and set the specified parameters on the tabs Bevel and Emboss (Emboss) and Stroke (Stroke)):

You will get this result.

(click to enlarge)

I have drawn more rectangle shapes also with the tool RoundedRectangleTool (Rectangle with rounded corners).

For these rectangles, add such layer styles (in the Outer Glow, Color Overlay, and Stroke tabs).

This is the result.

Now add the text you want. Use for this tool HorizontalTypeTool (Horizontal text). I wrote a free text as a sample.

Then you can add some image at the top of the template. I used the finished 3D image in blue. How to create this image, you can learn in this lesson.

Note. Translation of this lesson to https://photobecket.com

On the sides of this image I added two arrows; use the tool for this. CustomShapeTool (Arbitrary shape).

The result is a site template.


(Click to enlarge)

Like this post? Please share to your friends: