How to create a website mockup using Photoshop [Bagian 4]

Hello loyal inwepo readers, we will meet again in the making tutorial Website models With Photoshop we’re going to Part 4. For friends who haven’t read Part 1, Part 2, and Part 3, it would be nice to read it first because everyone part this tutorial article is related.

After completing the previous tutorial, now is the time to include the pictures in the design website. First choose the square plane for Header by clicking on the layer or pressing Ctrl One keyboard and click the rectangle.

1. Then enter any picture you want to use Header his. After pasting the picture, make sure the picture is right above the square layer Headlines.

img header 2

2. Then click with the right mouse button on the image layer before and choose Create clipping mask. To adjust the size, you can press Ctrl + T keyboard, if the size is correct, you can press the button Enter.

img headers 3 and 4

3. Then select Menu on the image layer Blur filter Gaussian blur and enter the value 6 and click OK. If you then set the opacity value to 50%, the background image becomes a little blurry so that the writing can be seen clearly later.

img headers 5 and 6

4. Then select the rectangle for the navigation bar and click the eye image to the right of the layer name so that it is square Navigation bar is hidden so that it is not visible.

img header 7

5. Then enter the portfolio. Here we enter Screenshot from the website, which is the result of the work of the team developer This. For example, the author contains website Iflix, Nickelodeon and Marvel. To enter the picture, it is the same as entering the picture in the previous header. Select it first Rectangle with rounded cornersJust enter the picture, then right click on the picture and choose Create clipping mask and adjust the size.


6. Then enter the image again as the portfolio background. Inserting the picture corresponds to inserting the picture in the header. Don’t forget to select the rectangle first and then paste the image, right click on the image layer and select Create clipping mask, adjust the image size and decrease the image opacity value.

Portfolio 1

The preliminary result of a website design as follows:


That’s it for part 4, we’ll meet again in part 5 to take photos of team and contact backgrounds. see you later

Leave a Reply

Your email address will not be published.