How To Draw A Website In Photoshop

Table of contents:

How To Draw A Website In Photoshop
How To Draw A Website In Photoshop

Video: How To Draw A Website In Photoshop

Video: How To Draw A Website In Photoshop
Video: Web design tutorial: How to design Website in Photoshop 2024, December
Anonim

Photoshop is an extremely powerful and versatile tool. It is not only the world's most popular photo editor, but also a utility for bringing all kinds of web design ideas to life. In addition, photoshop is quite suitable for creating a layout of a web page or even an entire site from scratch.

How to draw a website in photoshop
How to draw a website in photoshop

Instructions

Step 1

Launch photoshop and create a new document. To do this, press the key combination Ctrl + N. Then select the "Gradient" mode and fill the document with any combination of colors. The main thing is that the direction of the fill is from top to bottom. You can always set additional colors later. Just create a new layer and use a brush to paint on the background. To avoid confusion later, rename the layer you just created to Color.

Step 2

Now texture the background of the page to make the site look interesting. Select the sample you like from the textures that the program offers. For example, leaves or stone tiles, imitation of brickwork, look good. Activate the "Filter" mode and apply Artistic-Film Grain. Then Pixelate-Mosaic. Experiment with the options.

Step 3

Having achieved what you want, set the Difference mode in the Blending Mode tab. Try different opacity values.

Step 4

Prepare a background for the site name and other explanatory captions. Using the Rounded Rectangle tool (U) in a new layer, select the black shape, in the Layer Style item activate the Drop Shadow mode. Adjust the transparency of the layer.

Step 5

For further work, you will need groups of layers, so while holding down the Ctrl key, press the Ctrl + G buttons on your keyboard. Select all the layers that have been created so far and assign them to the Background group. You also need to create two more nested groups. The main group can be called Home, and the internal one - Logo.

Step 6

Write the text for the site header. Click on the Type Tool and create an inscription on a new layer created in the Logo group. Try different values for the Layer Style parameters. Next, create another layer and display the text information in any suitable color.

Step 7

Create important site-specific buttons like sign in and log in. This requires a group of layers, which you can call that.

Step 8

Use the Rectangular Marquee Tool, then the Gradient Tool to fill the selected area of the document from bottom to top with a gradient from dense to transparent.

Recommended: