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

Hello reader, I’m back. This time I will continue mock up Website with Photoshop.

For those who haven’t seen Part 1 of this tutorial, please read the previous tutorial:

The last one in Part 1 does Headline, menu, and button At Header. After that we create text our services use Text tool Photoshop uses Glober as the font, the text size is 40 px, the text color is black.

1. To center the text, select layers Text Our Services and press Ctrl + A keyboard and choose Align horizontal centers. If you pressed Ctrl + D to deselect the selected layer.

Set up a service center

2. Then do it text inferior our services what is the service that is provided, for example here create text that says planning. Then write again below planning that will be a description of the planning, input here lorem ipsum text as in the manufacture text second on Image slider in the tutorial part 1. For text The font size for planning is 40 pt, while the descriptive text below is 18 pt.

Planning lorem teks text

3. Then create additional services to make the selection easier text planning and Lorem Ipsum then press the button Ctrl + J At keyboard. The duplication is displayed in the layers area, while the font still looks unchanged on the worksheet. There are actually two fonts on the worksheet, but their position is in the same position.

Duplication of service planning 2

4. To move it, press the V key on the keyboard to switch Move tool, then press the button layer At keyboard and move the text to the center with mouse.

Duplication of service planning 3

5. Then change text Second, select the planning level Copy and double click on the posts T big in layers and change the text in UI / UX design.

Duplication of service planning 4

6. Then duplicate the text again as before and place it on the right-hand side. After this change Text UI / UX design Will Development.

7. Then select the planning level until the Lorem-Ipsum level is activated development and move it down a bit as an image will appear above each service.

Duplication of service planning 5

8. Next, enter three pictures and place each picture in each service. For example, you can use the light symbol for planning images, the image equipment symbol for UI / UX, and the laptop symbol for development.

Service fix

The end result will look something like this.

Interim result 2

That’s it for part 2, continue with the parts manufacturing part Portfolio and team. See you later.






Leave a Reply

Your email address will not be published.