Design for a business site in Photoshop

In this tutorial, I use only the very minimum of colors to create a dark design for a business site. By slightly changing the template, you can also use it for a WordPress blog.

It is very important to use textures when creating designs. We will use a set of two hundred seamless textures, and this, it would seem, a minor detail will play a significant role in favor of the beauty of the design.

Create a new document in Photoshop 1000х1100px. Fill the background with color # 2c2c2c. Download texture set 200 Photoshop seamless pixel patterns.

Load the textures into the program, create a blank for the header, as shown in the figure, using the tool Rectangle (Rectangle).

Specify the following styles for the layer:

You will find the texture you need here:

If you don’t like this texture, experiment with others – you may like some of them more.

It happened to me:

Using tool Pen Tool (Pen) draw a button at the very top of the header, as shown in the figure:

Specify the following styles for the layer with the header:

Shadow (Drop shadow):

Gradient overlay:

So while my button looks like, as you might have noticed, I already added some text to the navigation:

Create another “square”, as at the very beginning of the lesson, immediately after the cap. I used color # 131313 for background.

Using tool Pen Tool (Pen) I drew another form. In the picture below, I highlighted it in red, so that you can be better seen. Fill it with the same color # 131313.

Create a similar form will be easier if you use the grid (Ctrl + ”).

Next, combine the previous two layers into one. To do this, select both layers and click Ctrl +E. Apply the following styles to the resulting layer:

Inner shadow:

That’s what eventually happened to me. Please click on the image below and view better in full size.

Using tool Rounded Rectangle Tool (Rectangle with rounded edges) create several forms as shown below:

Select all the layers created in the previous step and merge them into one by clicking Ctrl +E. We apply the following styles:

Gradient overlay (gradient overlay):

As you guessed, this is the future of the slideshow. It happened to me:

Using tool Rounded Rectangle Tool (Rectangle with rounded edges) we create two more forms. The upper form is intended for the search form, the lower one is the sidebar for a list of recent entries, or any other widget.

For the last two forms, we apply the following styles:

Inner shadow:

Embossing / bevel (Bevel / Emboss):

Using the tool Pen Tool (Pen), create another form at the very bottom of the layout:

For layer styles, I used the same styles as when creating the slideshow.

Draw small gray circles on each side and place a layer with these circles immediately after the background layer. It should turn out like this:

Now we dilute yet the boring layout with pictures. I used Bokeh effect.

The final touch – add text.

And you’re done!


Like this post? Please share to your friends: