Design, create web interface in Photoshop


Designing a professional web interface is the essential job of a web designer. You are not a web designer and you want to create your own professional website. This article covers all the ways to design websites in Photoshop professionally, you can refer to manually creating a website for yourself.


Currently there are many web design software that users trust to download for use, in parallel with the use of web design software, the images we need to process through an editing tool Other photos, this tool Taimienphi selected is Photoshop

In this article, Taimienphi.vn will guide you how to design web pages in Photoshop, create one Web display professional with software AdobePhotoshop. After following the steps carefully, you will create a very nice website interface as shown below:

Before creating a professional website interface with Photoshop, you need a website template and of course, the leading editing and design tool in Adobe Photoshop.

Download Adobe Photoshop here: Download Photoshop

Download the PSD Website Template file to your computer and use it here: Download Photoshop Website Template

Design web in Photoshop, create professional web interface with Adobe Photoshop

Step 1: Mockup

Before starting the design, you need to plan for the requirements, interfaces and functions. Then you have to organize your ideas into an appropriate layout for implementation. Mockup and wireframe are quite helpful in creating flexible layouts.

In this tutorial mockup and wire frame are set with gray tones. This way you can eliminate colors on the background, to focus on the layout and not be distracted by the different colors. And you are free to adjust and organize everything. A mockup can display the details as you want.

how to create a professional web interface photoshop 3

Step 2: Set up Canvas

The next step is to create a wide layout 960 pixels. Create a new sized document 1200 x 1500.

how to create a professional web interface with photoshop 4

Below is a layout with a width of 960 pixels, and you will have to choose the area to work on. Press the key combination Ctrl + A to select the entire document.

how to create a professional web interface with photoshop 5

Choose Select =>Transform Selection. Shrink the selected part width to 960 pixels. That is the working area of ​​the layout.

how to create a professional web interface photoshop 6

Add a guide line to this section.

how to create a professional web interface photoshop 7

Next you need to create some padding between the border and the content you will add later. On the active area, select Transform Selection. Resize the selected area width 920 pixels. This means that 2 padding on both sides has a total padding size of 40 pixels.

how to create a professional web interface with photoshop 8

Add guide lines to the selected area.

how to create a professional web interface with photoshop 9

Step 3: Create a Header

Follow these steps to create a header for the layout. Create an area of ​​height 465 pixels.

how to create a professional web interface with photoshop 10

Firstly Fill This area is grayed out, then use Layer Styles to add colors and gradients. Perform this operation throughout the design process to maintain the visual hierarchy.

photoshop web design

Add a gradient to the header. Double click on the thumbnail of the layer thumbnail, select Gradient Overlay. Create 2 color gradients like the image below using the same settings.

how to create a professional web interface photoshop 12

Now color the selected area like the image below:

photoshop web design

The next step is to add highlights to the header. Create a new layer using the keystrokes Ctrl + Alt + Shift + N. Choose a soft brush of diameter 600px and choose the color code # 19535a for the brush. Just click on the middle of the header once.

how to create a professional web interface photoshop 14

Select an area at the top of the height 110 pixels.

Create a professional web interface with photoshop 15

Press Delete To delete the selected part. This time it will look like:

how to create a professional web interface with photoshop 16

Shrink vertically by pressing key combination Ctrl + T.

how to create a professional web interface photoshop 17

Make sure the highlight is at the center of the header. Select the layer, header and highlight and press the key V to switch to the tool Move Tool. On the board Options Panel select the button Align Horizontal Centers.

photoshop web design

Create a new layer, use the tools Pencil Tool have color code # 01bfd2 to draw a highlight line.

How to create a photoshop professional web interface 19

Hide the edges using the gradient mask. Select the tool Gradient Tool, create gradients in tables Options Panel as shown below:

how to create a professional web interface with photoshop 20

Apply the gradient above.

how to create a professional web interface with photoshop 21

Step 4: Create Texture and Pattern

The next step now is to create a checker pattern and apply this checker pattern to the header. Select the tool Pencil Tool, set the brush size to 2 pixels and add 2 dots to 2 opposite corners as shown below. Leave the background and select these dots. Choose Edit =>Define Pattern.

how to create a professional web interface photoshop 22

Create a new layer and place this layer below the highlighted layer. Select the area where you want to apply the pattern. Press the key combination Shift + F5 to open the dialog box Fill. Select the pattern you just created and choose OK, got it.

photoshop web design

That area will be filled with a pattern.

how to create a professional web interface photoshop 24

Blend the pattern into the header. Add one Layer Mask into the layer Pattern. Select soft brush with color code #ffffff, Opacity of the brush down 60% and paint. Also you can adjust the Opacity to suit your requirements.

how to create a professional web interface with photoshop 25

Once done, you may find that Blend is quite eye-catching.

how to create a professional web interface photoshop 26

Step 5: Add a logo type logo (font style)

The background completion process has done quite a bit. Your task now is to add the logo type. Before doing this, add highlights to the back of the logo. Select soft brush with color code # 19535a and add a dot.

photoshop web interface design

Next added Type. The font used in the example below is Bebas. If you want to use this font, you can download and install it, in addition, there are many other beautiful Vietnamese fonts for you, download beautiful fonts to your computer.

photoshop web interface design

Add effects Subtle for logo.

Create a professional web interface with photoshop 29

how to create a professional web interface with photoshop 30

Step 6: Path

Add link links.

how to create a professional web interface photoshop 31

I created photoshop web interface

Create path button. Use the tool Rectangular Marquee Tool and fill with any color. Then fell Fill Opacity down 0.

Create a professional web interface with photoshop 33

Double click on the thumbnail of the layer thumbnail, select Gradient Overlay, and use the settings as shown below:

how to create a professional web interface photoshop 34

Step 7: Content Slider

Choose an area of ​​size 580 x 295 pixels.

how to create a professional web interface with photoshop 35

Fill the area with gray tone.

I created photoshop web interface

Add the image you want to use, paste it into the layer you just created above.

how to create a professional photoshop web interface 37

Now it’s time to add the shadow effect to the slider. Create a new layer, select the tool Brush Tool set diameter is 400 pixels. Open the board Brushes and reduce the size of the dots, use the settings like below.

how to create a professional web interface photoshop 38

Set brush color code to # 000000 and add the dots.

how to create a professional web interface with photoshop 39

Apply Gaussian Blur to soften the edges.

I created photoshop web interface

Select the lower half of the shadow and delete that part.

how to create a professional web interface with photoshop 41

Change the position of the ball right on the slider.

how to create a professional web interface photoshop 42

Shrink the ball vertically. Next center on slider. Select both layers and on the board Options Panel, click the button Align Horizontal Centers.

how to create a professional web interface with photoshop 43

Duplicate the ball and rotate vertically, placing it on the bottom edge of the slider.

how to create a professional web interface photoshop 44

Create slider control buttons using tools Rectangular Marqee Tool and fill the color code # 000000.

how to create a professional web interface with photoshop 45

Decrease the button Opacity down 50%.

how to create a professional web interface photoshop 46

Open AutoShapes on the board Option Panel and select the arrow icon as below. Add that icon to the button.

how to create a professional web interface photoshop 47

Next create a bar like the image below and fill with color # 000000.

how to create a professional web interface with photoshop 48

Reduction Opacity down to 50%.

how to create a professional web interface photoshop 49

Here you can add a description for your project.

how to create a professional web interface with photoshop 50

Step 8: Add the welcome line for the site

Add welcome lines and site descriptions here. To type Vietnamese in Photoshop with accents is very simple, just install the software that supports Vietnamese typing and select the accented Vietnamese font types, if you do not understand, please refer to Vietnamese typing method. in Photoshop to know how.

how to create a professional web interface with photoshop 51

how to create a professional web interface photoshop 52

Step 9: Complete the Header

At this point, the header is almost complete. To complete the header, the final step is to add a drop shadow to the header. Create a shadow like the previous tutorial using the brush tool.

how to create a professional web interface with photoshop 53

Leave the space between header and shadow as 1 pixel.

how to create a professional web interface with photoshop 54

Step 10: Apply the gradient to the background

Create a light gray to white gradient using the settings shown below.

how to create a professional web interface with photoshop 55

Create a new layer below the header and apply the gradient above.

how to create a professional web interface with photoshop 56

how to create a professional web interface with photoshop 57

Step 11: Add a rotating slider button

Create a spin control button.

how to create a professional web interface with photoshop 58

Apply Inner Shadow on each button to see the active items on the slider.

how to create a professional web interface photoshop 59

Step 12: Create Content Divider

Select the tool Pencil Tool and draw a line. Choose light gray (color code #aaaaaa).

how to create a professional web interface with photoshop 60

Use gradient mask to hide the edges.

how to create a professional web interface with photoshop 61

Step 13: Add Main Content (main content)

Now your task is to add content. The layout below is divided into 3 equal columns and has padding in the middle. To do this you can calculate and divide the available space into 3 equal boxes of width 25 pixels and there is padding in the middle.

how to create a professional web interface with photoshop 62

Add guide lines to the boxes. Then delete these boxes and the rest are equal columns.

how to create a professional web interface with photoshop 63

Add some featured services. Drop icons from the icon set Function. Maintain distance between objects in sync.

how to create a professional web interface with photoshop 64

how to create a professional web interface with photoshop 65

Next create the button Read More (read more). Select the tool Rounded Rectangle Tool to draw different shapes. Make sure it’s a layer Shape.

how to create a professional web interface with photoshop 66

Apply Gradient Overlay and Stroke for the Read More button.

how to create a professional web interface photoshop 67

how to create a professional web interface with photoshop 68

Duplicate this button.

how to create a professional web interface photoshop 69

Add more recent activity items. In the example below, draw 3 boxes to add 3 images and apply 3 strokes.

how to create a professional web interface with photoshop 70

Paste the images into the boxes.

how to create a professional web interface photoshop 71

how to create a professional web interface photoshop 72

Create the shadow as in the steps above and place in the boxes.

how to create a professional web interface photoshop 73

Add some descriptions to the project.

how to create a professional web interface photoshop 74

Now is the step to create a professional web interface in Photoshop with social networking utilities like Twitter Feed. Drag the bird Twitter icon.

how to create a professional web interface with photoshop 75

Create a Twitter notification.

how to create a professional web interface with photoshop 76

Create a More Tweets button.

how to create a professional web interface photoshop 77

Apply the following styles:

how to create a professional web interface with photoshop 78

how to create a professional web interface photoshop 79

Add text, how to insert text or insert text into photos in Photoshop via the Type Tool, when selecting this tool along with choosing the font, size (size), you start proceeding to add text or insert text into photos in Photoshop

how to create a professional web interface with photoshop 80

Step 14: Create the Footer and complete the process

Create a footer area and fill that area with gray.

how to create a professional web interface photoshop 81

Apply Color Overlay.

how to create a professional web interface photoshop 82

Finally, add the footer catalog link and copyright information. And so you have completed the process of creating a web interface in Photoshop.

how to create a professional web interface photoshop 83

The final result after performing fully and accurately the steps to create a professional web interface using Photoshop above.

how to create a professional web interface with photoshop 84

https://thuthuat.taimienphi.vn/cach-tao-mot-giao-dien-web-chuyen-nghiep-bang-photoshop-24074n.aspx
In Photoshop there are many features that help you edit your image nicely, with the ability to edit backlit photos, your photos taken in backlit conditions will look very dark, then the image will be restored. again quickly, make the photo brighter, take part in how to edit backlit photos that Taimienphi has instructed.

.

Add a Comment

Your email address will not be published. Required fields are marked *